From a9b9cf6bf50f08723896659634f2e6afc17bcd42 Mon Sep 17 00:00:00 2001
From: Maze Winther <mazewinther@gmail.com>
Date: Wed, 29 Apr 2026 00:37:56 +0200
Subject: chore: switch from biome to eslint + prettier; fix ton of lint issues

---
 apps/web/src/text/components/assets-view.tsx |  94 ++--
 apps/web/src/text/components/text-tab.tsx    | 767 ---------------------------
 2 files changed, 47 insertions(+), 814 deletions(-)

(limited to 'apps/web/src/text/components')

diff --git a/apps/web/src/text/components/assets-view.tsx b/apps/web/src/text/components/assets-view.tsx
index ffabe3b8..82a8e46c 100644
--- a/apps/web/src/text/components/assets-view.tsx
+++ b/apps/web/src/text/components/assets-view.tsx
@@ -1,47 +1,47 @@
-import { DraggableItem } from "@/components/editor/panels/assets/draggable-item";
-import { PanelView } from "@/components/editor/panels/assets/views/base-panel";
-import { useEditor } from "@/editor/use-editor";
-import { DEFAULTS } from "@/timeline/defaults";
-import { buildTextElement } from "@/timeline/element-utils";
-import type { MediaTime } from "@/wasm";
-
-export function TextView() {
-	const editor = useEditor();
-
-	const handleAddToTimeline = ({ currentTime }: { currentTime: MediaTime }) => {
-		const activeScene = editor.scenes.getActiveScene();
-		if (!activeScene) return;
-
-		const element = buildTextElement({
-			raw: DEFAULTS.text.element,
-			startTime: currentTime,
-		});
-
-		editor.timeline.insertElement({
-			element,
-			placement: { mode: "auto" },
-		});
-	};
-
-	return (
-		<PanelView title="Text">
-			<DraggableItem
-				name="Default text"
-				preview={
-					<div className="bg-accent flex size-full items-center justify-center rounded">
-						<span className="text-xs select-none">Default text</span>
-					</div>
-				}
-				dragData={{
-					id: "temp-text-id",
-					type: DEFAULTS.text.element.type,
-					name: DEFAULTS.text.element.name,
-					content: DEFAULTS.text.element.content,
-				}}
-				aspectRatio={1}
-				onAddToTimeline={handleAddToTimeline}
-				shouldShowLabel={false}
-			/>
-		</PanelView>
-	);
-}
+import { DraggableItem } from "@/components/editor/panels/assets/draggable-item";
+import { PanelView } from "@/components/editor/panels/assets/views/base-panel";
+import { useEditor } from "@/editor/use-editor";
+import { DEFAULTS } from "@/timeline/defaults";
+import { buildTextElement } from "@/timeline/element-utils";
+import type { MediaTime } from "@/wasm";
+
+export function TextView() {
+	const editor = useEditor();
+
+	const handleAddToTimeline = ({ currentTime }: { currentTime: MediaTime }) => {
+		const activeScene = editor.scenes.getActiveScene();
+		if (!activeScene) return;
+
+		const element = buildTextElement({
+			raw: DEFAULTS.text.element,
+			startTime: currentTime,
+		});
+
+		editor.timeline.insertElement({
+			element,
+			placement: { mode: "auto" },
+		});
+	};
+
+	return (
+		<PanelView title="Text">
+			<DraggableItem
+				name="Default text"
+				preview={
+					<div className="bg-accent flex size-full items-center justify-center rounded">
+						<span className="text-xs select-none">Default text</span>
+					</div>
+				}
+				dragData={{
+					id: "temp-text-id",
+					type: DEFAULTS.text.element.type,
+					name: DEFAULTS.text.element.name,
+					content: DEFAULTS.text.element.content,
+				}}
+				aspectRatio={1}
+				onAddToTimeline={handleAddToTimeline}
+				shouldShowLabel={false}
+			/>
+		</PanelView>
+	);
+}
diff --git a/apps/web/src/text/components/text-tab.tsx b/apps/web/src/text/components/text-tab.tsx
index 0f0b274a..e69de29b 100644
--- a/apps/web/src/text/components/text-tab.tsx
+++ b/apps/web/src/text/components/text-tab.tsx
@@ -1,767 +0,0 @@
-"use client";
-
-import { Textarea } from "@/components/ui/textarea";
-import { FontPicker } from "@/components/ui/font-picker";
-import type { TextElement } from "@/timeline";
-import { NumberField } from "@/components/ui/number-field";
-import { useRef } from "react";
-import {
-	Section,
-	SectionContent,
-	SectionField,
-	SectionFields,
-	SectionHeader,
-	SectionTitle,
-} from "@/components/section";
-import { ColorPicker } from "@/components/ui/color-picker";
-import { Button } from "@/components/ui/button";
-import { uppercase } from "@/utils/string";
-import { clamp, formatNumberForDisplay } from "@/utils/math";
-import { useEditor } from "@/editor/use-editor";
-import { CORNER_RADIUS_MAX, CORNER_RADIUS_MIN } from "@/text/background";
-import {
-	DEFAULT_TEXT_COLOR,
-	MAX_FONT_SIZE,
-	MIN_FONT_SIZE,
-} from "@/text/typography";
-import { usePropertyDraft } from "@/components/editor/panels/properties/hooks/use-property-draft";
-import { useKeyframedColorProperty } from "@/components/editor/panels/properties/hooks/use-keyframed-color-property";
-import { useKeyframedNumberProperty } from "@/components/editor/panels/properties/hooks/use-keyframed-number-property";
-import { useElementPlayhead } from "@/components/editor/panels/properties/hooks/use-element-playhead";
-import { KeyframeToggle } from "@/components/editor/panels/properties/components/keyframe-toggle";
-import { isPropertyAtDefault } from "@/rendering/components/transform-tab";
-import {
-	resolveColorAtTime,
-	resolveNumberAtTime,
-} from "@/animation/values";
-import { HugeiconsIcon } from "@hugeicons/react";
-import {
-	MinusSignIcon,
-	PlusSignIcon,
-	TextFontIcon,
-} from "@hugeicons/core-free-icons";
-import { OcTextHeightIcon, OcTextWidthIcon } from "@/components/icons";
-import { DEFAULTS } from "@/timeline/defaults";
-import { cn } from "@/utils/ui";
-
-export function TextTab({
-	element,
-	trackId,
-}: {
-	element: TextElement;
-	trackId: string;
-}) {
-	return (
-		<div className="flex flex-col">
-			<ContentSection element={element} trackId={trackId} />
-			<TypographySection element={element} trackId={trackId} />
-			<SpacingSection element={element} trackId={trackId} />
-			<BackgroundSection element={element} trackId={trackId} />
-		</div>
-	);
-}
-
-function ContentSection({
-	element,
-	trackId,
-}: {
-	element: TextElement;
-	trackId: string;
-}) {
-	const editor = useEditor();
-
-	const content = usePropertyDraft({
-		displayValue: element.content,
-		parse: (input) => input,
-		onPreview: (value) =>
-			editor.timeline.previewElements({
-				updates: [
-					{ trackId, elementId: element.id, updates: { content: value } },
-				],
-			}),
-		onCommit: () => editor.timeline.commitPreview(),
-	});
-
-	return (
-		<Section collapsible sectionKey={`${element.id}:content`}>
-			<SectionHeader>
-				<SectionTitle>Content</SectionTitle>
-			</SectionHeader>
-			<SectionContent>
-				<Textarea
-					placeholder="Name"
-					value={content.displayValue}
-					className="min-h-20"
-					onFocus={content.onFocus}
-					onChange={content.onChange}
-					onBlur={content.onBlur}
-				/>
-			</SectionContent>
-		</Section>
-	);
-}
-
-function TypographySection({
-	element,
-	trackId,
-}: {
-	element: TextElement;
-	trackId: string;
-}) {
-	const editor = useEditor();
-	const { localTime, isPlayheadWithinElementRange } = useElementPlayhead({
-		startTime: element.startTime,
-		duration: element.duration,
-	});
-	const resolvedTextColor = resolveColorAtTime({
-		baseColor: element.color,
-		animations: element.animations,
-		propertyPath: "color",
-		localTime,
-	});
-
-	const textColor = useKeyframedColorProperty({
-		trackId,
-		elementId: element.id,
-		animations: element.animations,
-		propertyPath: "color",
-		localTime,
-		isPlayheadWithinElementRange,
-		resolvedColor: resolvedTextColor,
-		buildBaseUpdates: ({ value }) => ({ color: value }),
-	});
-
-	const fontSize = usePropertyDraft({
-		displayValue: element.fontSize.toString(),
-		parse: (input) => {
-			const parsed = parseFloat(input);
-			if (Number.isNaN(parsed)) return null;
-			return clamp({
-				value: Math.round(parsed),
-				min: MIN_FONT_SIZE,
-				max: MAX_FONT_SIZE,
-			});
-		},
-		onPreview: (value) =>
-			editor.timeline.previewElements({
-				updates: [
-					{ trackId, elementId: element.id, updates: { fontSize: value } },
-				],
-			}),
-		onCommit: () => editor.timeline.commitPreview(),
-	});
-
-	return (
-		<Section collapsible sectionKey={`${element.id}:typography`}>
-			<SectionHeader>
-				<SectionTitle>Typography</SectionTitle>
-			</SectionHeader>
-			<SectionContent>
-				<SectionFields>
-					<SectionField label="Font">
-						<FontPicker
-							defaultValue={element.fontFamily}
-							onValueChange={(value) =>
-								editor.timeline.updateElements({
-									updates: [
-										{
-											trackId,
-											elementId: element.id,
-											patch: { fontFamily: value },
-										},
-									],
-								})
-							}
-						/>
-					</SectionField>
-					<SectionField label="Size">
-						<NumberField
-							value={fontSize.displayValue}
-							min={MIN_FONT_SIZE}
-							max={MAX_FONT_SIZE}
-							onFocus={fontSize.onFocus}
-							onChange={fontSize.onChange}
-							onBlur={fontSize.onBlur}
-							onScrub={fontSize.scrubTo}
-							onScrubEnd={fontSize.commitScrub}
-							onReset={() =>
-								editor.timeline.updateElements({
-									updates: [
-										{
-											trackId,
-											elementId: element.id,
-											patch: {
-												fontSize: DEFAULTS.text.element.fontSize,
-											},
-										},
-									],
-								})
-							}
-							isDefault={element.fontSize === DEFAULTS.text.element.fontSize}
-							icon={<HugeiconsIcon icon={TextFontIcon} />}
-						/>
-					</SectionField>
-					<SectionField
-						label="Color"
-						beforeLabel={
-							<KeyframeToggle
-								isActive={textColor.isKeyframedAtTime}
-								isDisabled={!isPlayheadWithinElementRange}
-								title="Toggle text color keyframe"
-								onToggle={textColor.toggleKeyframe}
-							/>
-						}
-					>
-						<ColorPicker
-							value={uppercase({
-								string: resolvedTextColor.replace("#", ""),
-							})}
-							onChange={(color) => textColor.onChange({ color: `#${color}` })}
-							onChangeEnd={textColor.onChangeEnd}
-						/>
-					</SectionField>
-				</SectionFields>
-			</SectionContent>
-		</Section>
-	);
-}
-
-function SpacingSection({
-	element,
-	trackId,
-}: {
-	element: TextElement;
-	trackId: string;
-}) {
-	const editor = useEditor();
-
-	const letterSpacing = usePropertyDraft({
-		displayValue: Math.round(
-			element.letterSpacing ?? DEFAULTS.text.letterSpacing,
-		).toString(),
-		parse: (input) => {
-			const parsed = parseFloat(input);
-			return Number.isNaN(parsed) ? null : Math.round(parsed);
-		},
-		onPreview: (value) =>
-			editor.timeline.previewElements({
-				updates: [
-					{ trackId, elementId: element.id, updates: { letterSpacing: value } },
-				],
-			}),
-		onCommit: () => editor.timeline.commitPreview(),
-	});
-
-	const lineHeight = usePropertyDraft({
-		displayValue: formatNumberForDisplay({
-			value: element.lineHeight ?? DEFAULTS.text.lineHeight,
-			fractionDigits: 1,
-		}),
-		parse: (input) => {
-			const parsed = parseFloat(input);
-			return Number.isNaN(parsed)
-				? null
-				: Math.max(0.1, Math.round(parsed * 10) / 10);
-		},
-		onPreview: (value) =>
-			editor.timeline.previewElements({
-				updates: [
-					{ trackId, elementId: element.id, updates: { lineHeight: value } },
-				],
-			}),
-		onCommit: () => editor.timeline.commitPreview(),
-	});
-
-	return (
-		<Section collapsible sectionKey={`${element.id}:spacing`}>
-			<SectionHeader>
-				<SectionTitle>Spacing</SectionTitle>
-			</SectionHeader>
-			<SectionContent>
-				<div className="flex items-start gap-2">
-					<SectionField label="Letter spacing" className="w-1/2">
-						<NumberField
-							value={letterSpacing.displayValue}
-							onFocus={letterSpacing.onFocus}
-							onChange={letterSpacing.onChange}
-							onBlur={letterSpacing.onBlur}
-							onScrub={letterSpacing.scrubTo}
-							onScrubEnd={letterSpacing.commitScrub}
-							onReset={() =>
-								editor.timeline.updateElements({
-									updates: [
-										{
-											trackId,
-											elementId: element.id,
-											patch: { letterSpacing: DEFAULTS.text.letterSpacing },
-										},
-									],
-								})
-							}
-							isDefault={
-								(element.letterSpacing ?? DEFAULTS.text.letterSpacing) ===
-								DEFAULTS.text.letterSpacing
-							}
-							icon={<OcTextWidthIcon size={14} />}
-						/>
-					</SectionField>
-					<SectionField label="Line height" className="w-1/2">
-						<NumberField
-							value={lineHeight.displayValue}
-							onFocus={lineHeight.onFocus}
-							onChange={lineHeight.onChange}
-							onBlur={lineHeight.onBlur}
-							onScrub={lineHeight.scrubTo}
-							onScrubEnd={lineHeight.commitScrub}
-							onReset={() =>
-								editor.timeline.updateElements({
-									updates: [
-										{
-											trackId,
-											elementId: element.id,
-											patch: { lineHeight: DEFAULTS.text.lineHeight },
-										},
-									],
-								})
-							}
-							isDefault={
-								(element.lineHeight ?? DEFAULTS.text.lineHeight) ===
-								DEFAULTS.text.lineHeight
-							}
-							icon={<OcTextHeightIcon size={14} />}
-						/>
-					</SectionField>
-				</div>
-			</SectionContent>
-		</Section>
-	);
-}
-
-function BackgroundSection({
-	element,
-	trackId,
-}: {
-	element: TextElement;
-	trackId: string;
-}) {
-	const editor = useEditor();
-	const lastSelectedColor = useRef(DEFAULT_TEXT_COLOR);
-	const { localTime, isPlayheadWithinElementRange } = useElementPlayhead({
-		startTime: element.startTime,
-		duration: element.duration,
-	});
-	const resolvedBgColor = resolveColorAtTime({
-		baseColor: element.background.color,
-		animations: element.animations,
-		propertyPath: "background.color",
-		localTime,
-	});
-
-	const bgColor = useKeyframedColorProperty({
-		trackId,
-		elementId: element.id,
-		animations: element.animations,
-		propertyPath: "background.color",
-		localTime,
-		isPlayheadWithinElementRange,
-		resolvedColor: resolvedBgColor,
-		buildBaseUpdates: ({ value }) => ({
-			background: { ...element.background, color: value },
-		}),
-	});
-
-	const bg = element.background;
-
-	const resolvedPaddingX = resolveNumberAtTime({
-		baseValue: bg.paddingX ?? DEFAULTS.text.background.paddingX,
-		animations: element.animations,
-		propertyPath: "background.paddingX",
-		localTime,
-	});
-	const resolvedPaddingY = resolveNumberAtTime({
-		baseValue: bg.paddingY ?? DEFAULTS.text.background.paddingY,
-		animations: element.animations,
-		propertyPath: "background.paddingY",
-		localTime,
-	});
-	const resolvedOffsetX = resolveNumberAtTime({
-		baseValue: bg.offsetX ?? DEFAULTS.text.background.offsetX,
-		animations: element.animations,
-		propertyPath: "background.offsetX",
-		localTime,
-	});
-	const resolvedOffsetY = resolveNumberAtTime({
-		baseValue: bg.offsetY ?? DEFAULTS.text.background.offsetY,
-		animations: element.animations,
-		propertyPath: "background.offsetY",
-		localTime,
-	});
-	const resolvedCornerRadius = resolveNumberAtTime({
-		baseValue: bg.cornerRadius ?? CORNER_RADIUS_MIN,
-		animations: element.animations,
-		propertyPath: "background.cornerRadius",
-		localTime,
-	});
-
-	const paddingX = useKeyframedNumberProperty({
-		trackId,
-		elementId: element.id,
-		animations: element.animations,
-		propertyPath: "background.paddingX",
-		localTime,
-		isPlayheadWithinElementRange,
-		displayValue: Math.round(resolvedPaddingX).toString(),
-		parse: (input) => {
-			const parsed = parseFloat(input);
-			return Number.isNaN(parsed) ? null : Math.max(0, Math.round(parsed));
-		},
-		valueAtPlayhead: resolvedPaddingX,
-		step: 1,
-		buildBaseUpdates: ({ value }) => ({
-			background: { ...bg, paddingX: value },
-		}),
-	});
-
-	const paddingY = useKeyframedNumberProperty({
-		trackId,
-		elementId: element.id,
-		animations: element.animations,
-		propertyPath: "background.paddingY",
-		localTime,
-		isPlayheadWithinElementRange,
-		displayValue: Math.round(resolvedPaddingY).toString(),
-		parse: (input) => {
-			const parsed = parseFloat(input);
-			return Number.isNaN(parsed) ? null : Math.max(0, Math.round(parsed));
-		},
-		valueAtPlayhead: resolvedPaddingY,
-		step: 1,
-		buildBaseUpdates: ({ value }) => ({
-			background: { ...bg, paddingY: value },
-		}),
-	});
-
-	const offsetX = useKeyframedNumberProperty({
-		trackId,
-		elementId: element.id,
-		animations: element.animations,
-		propertyPath: "background.offsetX",
-		localTime,
-		isPlayheadWithinElementRange,
-		displayValue: Math.round(resolvedOffsetX).toString(),
-		parse: (input) => {
-			const parsed = parseFloat(input);
-			return Number.isNaN(parsed) ? null : Math.round(parsed);
-		},
-		valueAtPlayhead: resolvedOffsetX,
-		step: 1,
-		buildBaseUpdates: ({ value }) => ({
-			background: { ...bg, offsetX: value },
-		}),
-	});
-
-	const offsetY = useKeyframedNumberProperty({
-		trackId,
-		elementId: element.id,
-		animations: element.animations,
-		propertyPath: "background.offsetY",
-		localTime,
-		isPlayheadWithinElementRange,
-		displayValue: Math.round(resolvedOffsetY).toString(),
-		parse: (input) => {
-			const parsed = parseFloat(input);
-			return Number.isNaN(parsed) ? null : Math.round(parsed);
-		},
-		valueAtPlayhead: resolvedOffsetY,
-		step: 1,
-		buildBaseUpdates: ({ value }) => ({
-			background: { ...bg, offsetY: value },
-		}),
-	});
-
-	const cornerRadius = useKeyframedNumberProperty({
-		trackId,
-		elementId: element.id,
-		animations: element.animations,
-		propertyPath: "background.cornerRadius",
-		localTime,
-		isPlayheadWithinElementRange,
-		displayValue: Math.round(resolvedCornerRadius).toString(),
-		parse: (input) => {
-			const parsed = parseFloat(input);
-			if (Number.isNaN(parsed)) return null;
-			return clamp({
-				value: Math.round(parsed),
-				min: CORNER_RADIUS_MIN,
-				max: CORNER_RADIUS_MAX,
-			});
-		},
-		valueAtPlayhead: resolvedCornerRadius,
-		step: 1,
-		buildBaseUpdates: ({ value }) => ({
-			background: { ...bg, cornerRadius: value },
-		}),
-	});
-
-	const toggleBackgroundEnabled = () => {
-		const enabled = !element.background.enabled;
-		const color =
-			enabled && element.background.color === "transparent"
-				? lastSelectedColor.current
-				: element.background.color;
-		editor.timeline.updateElements({
-			updates: [
-				{
-					trackId,
-					elementId: element.id,
-					patch: {
-						background: {
-							...element.background,
-							enabled,
-							color,
-						},
-					},
-				},
-			],
-		});
-	};
-
-	return (
-		<Section
-			collapsible
-			defaultOpen={element.background.enabled}
-			sectionKey={`${element.id}:background`}
-		>
-			<SectionHeader
-				trailing={
-					<Button
-						variant="ghost"
-						size="icon"
-						onClick={(event) => {
-							event.stopPropagation();
-							toggleBackgroundEnabled();
-						}}
-					>
-						<HugeiconsIcon
-							icon={element.background.enabled ? MinusSignIcon : PlusSignIcon}
-							strokeWidth={1}
-						/>
-					</Button>
-				}
-			>
-				<SectionTitle>Background</SectionTitle>
-			</SectionHeader>
-			<SectionContent
-				className={cn(
-					!element.background.enabled && "pointer-events-none opacity-50",
-				)}
-			>
-				<SectionFields>
-					<SectionField
-						label="Color"
-						beforeLabel={
-							<KeyframeToggle
-								isActive={bgColor.isKeyframedAtTime}
-								isDisabled={!isPlayheadWithinElementRange}
-								title="Toggle background color keyframe"
-								onToggle={bgColor.toggleKeyframe}
-							/>
-						}
-					>
-						<ColorPicker
-							value={
-								!element.background.enabled ||
-								element.background.color === "transparent"
-									? lastSelectedColor.current.replace("#", "")
-									: resolvedBgColor.replace("#", "")
-							}
-							onChange={(color) => {
-								const hexColor = `#${color}`;
-								if (color !== "transparent") {
-									lastSelectedColor.current = hexColor;
-								}
-								bgColor.onChange({ color: hexColor });
-							}}
-							onChangeEnd={bgColor.onChangeEnd}
-						/>
-					</SectionField>
-					<div className="flex items-start gap-2">
-						<SectionField
-							label="Width"
-							className="w-1/2"
-							beforeLabel={
-								<KeyframeToggle
-									isActive={paddingX.isKeyframedAtTime}
-									isDisabled={!isPlayheadWithinElementRange}
-									title="Toggle background width keyframe"
-									onToggle={paddingX.toggleKeyframe}
-								/>
-							}
-						>
-							<NumberField
-								icon="W"
-								value={paddingX.displayValue}
-								min={0}
-								onFocus={paddingX.onFocus}
-								onChange={paddingX.onChange}
-								onBlur={paddingX.onBlur}
-								onScrub={paddingX.scrubTo}
-								onScrubEnd={paddingX.commitScrub}
-								onReset={() =>
-									paddingX.commitValue({
-										value: DEFAULTS.text.background.paddingX,
-									})
-								}
-								isDefault={isPropertyAtDefault({
-									hasAnimatedKeyframes: paddingX.hasAnimatedKeyframes,
-									isPlayheadWithinElementRange,
-									resolvedValue: resolvedPaddingX,
-									staticValue: bg.paddingX ?? DEFAULTS.text.background.paddingX,
-									defaultValue: DEFAULTS.text.background.paddingX,
-								})}
-							/>
-						</SectionField>
-						<SectionField
-							label="Height"
-							className="w-1/2"
-							beforeLabel={
-								<KeyframeToggle
-									isActive={paddingY.isKeyframedAtTime}
-									isDisabled={!isPlayheadWithinElementRange}
-									title="Toggle background height keyframe"
-									onToggle={paddingY.toggleKeyframe}
-								/>
-							}
-						>
-							<NumberField
-								icon="H"
-								value={paddingY.displayValue}
-								min={0}
-								onFocus={paddingY.onFocus}
-								onChange={paddingY.onChange}
-								onBlur={paddingY.onBlur}
-								onScrub={paddingY.scrubTo}
-								onScrubEnd={paddingY.commitScrub}
-								onReset={() =>
-									paddingY.commitValue({
-										value: DEFAULTS.text.background.paddingY,
-									})
-								}
-								isDefault={isPropertyAtDefault({
-									hasAnimatedKeyframes: paddingY.hasAnimatedKeyframes,
-									isPlayheadWithinElementRange,
-									resolvedValue: resolvedPaddingY,
-									staticValue: bg.paddingY ?? DEFAULTS.text.background.paddingY,
-									defaultValue: DEFAULTS.text.background.paddingY,
-								})}
-							/>
-						</SectionField>
-					</div>
-					<div className="flex items-start gap-2">
-						<SectionField
-							label="X-offset"
-							className="w-1/2"
-							beforeLabel={
-								<KeyframeToggle
-									isActive={offsetX.isKeyframedAtTime}
-									isDisabled={!isPlayheadWithinElementRange}
-									title="Toggle x-offset keyframe"
-									onToggle={offsetX.toggleKeyframe}
-								/>
-							}
-						>
-							<NumberField
-								icon="X"
-								value={offsetX.displayValue}
-								onFocus={offsetX.onFocus}
-								onChange={offsetX.onChange}
-								onBlur={offsetX.onBlur}
-								onScrub={offsetX.scrubTo}
-								onScrubEnd={offsetX.commitScrub}
-								onReset={() =>
-									offsetX.commitValue({
-										value: DEFAULTS.text.background.offsetX,
-									})
-								}
-								isDefault={isPropertyAtDefault({
-									hasAnimatedKeyframes: offsetX.hasAnimatedKeyframes,
-									isPlayheadWithinElementRange,
-									resolvedValue: resolvedOffsetX,
-									staticValue: bg.offsetX ?? DEFAULTS.text.background.offsetX,
-									defaultValue: DEFAULTS.text.background.offsetX,
-								})}
-							/>
-						</SectionField>
-						<SectionField
-							label="Y-offset"
-							className="w-1/2"
-							beforeLabel={
-								<KeyframeToggle
-									isActive={offsetY.isKeyframedAtTime}
-									isDisabled={!isPlayheadWithinElementRange}
-									title="Toggle y-offset keyframe"
-									onToggle={offsetY.toggleKeyframe}
-								/>
-							}
-						>
-							<NumberField
-								icon="Y"
-								value={offsetY.displayValue}
-								onFocus={offsetY.onFocus}
-								onChange={offsetY.onChange}
-								onBlur={offsetY.onBlur}
-								onScrub={offsetY.scrubTo}
-								onScrubEnd={offsetY.commitScrub}
-								onReset={() =>
-									offsetY.commitValue({
-										value: DEFAULTS.text.background.offsetY,
-									})
-								}
-								isDefault={isPropertyAtDefault({
-									hasAnimatedKeyframes: offsetY.hasAnimatedKeyframes,
-									isPlayheadWithinElementRange,
-									resolvedValue: resolvedOffsetY,
-									staticValue: bg.offsetY ?? DEFAULTS.text.background.offsetY,
-									defaultValue: DEFAULTS.text.background.offsetY,
-								})}
-							/>
-						</SectionField>
-					</div>
-					<SectionField
-						label="Corner radius"
-						beforeLabel={
-							<KeyframeToggle
-								isActive={cornerRadius.isKeyframedAtTime}
-								isDisabled={!isPlayheadWithinElementRange}
-								title="Toggle corner radius keyframe"
-								onToggle={cornerRadius.toggleKeyframe}
-							/>
-						}
-					>
-						<NumberField
-							icon="R"
-							value={cornerRadius.displayValue}
-							min={CORNER_RADIUS_MIN}
-							max={CORNER_RADIUS_MAX}
-							onFocus={cornerRadius.onFocus}
-							onChange={cornerRadius.onChange}
-							onBlur={cornerRadius.onBlur}
-							onScrub={cornerRadius.scrubTo}
-							onScrubEnd={cornerRadius.commitScrub}
-							onReset={() =>
-								cornerRadius.commitValue({ value: CORNER_RADIUS_MIN })
-							}
-							isDefault={isPropertyAtDefault({
-								hasAnimatedKeyframes: cornerRadius.hasAnimatedKeyframes,
-								isPlayheadWithinElementRange,
-								resolvedValue: resolvedCornerRadius,
-								staticValue: bg.cornerRadius ?? CORNER_RADIUS_MIN,
-								defaultValue: CORNER_RADIUS_MIN,
-							})}
-						/>
-					</SectionField>
-				</SectionFields>
-			</SectionContent>
-		</Section>
-	);
-}
-- 
cgit v1.3.1