feat: major editor overhaul (assets, properties, timeline, fonts) (#709)

* feat: major editor overhaul (assets, properties, timeline, fonts)

Refactor editor core systems to standardize UI architecture and improve performance.

Assets & Properties:
- Replace monolithic property items with composable `Section` architecture.
- Add specialized sections for Transform, Blending, and Text.
- Implement `NumberField` with scrubbing and math evaluation.
- Add new ColorPicker with EyeDropper and multiple format support.
- Standardize asset panels using new `PanelView` layout.

Fonts & Stickers:
- Implement custom font atlas/sprite system for high-performance previews.
- Add virtualized FontPicker with search and favorites.
- Refactor stickers to use a provider-based architecture (icons, emoji, flags, shapes).
- Standardize sticker IDs to `provider:value` format.

Timeline & Interaction:
- Convert bookmarks to rich objects with notes, colors, and duration.
- Refactor drag-and-drop to use Command pattern (enabling proper undo/redo).
- Add Shift modifier to disable snapping during moves/resizes.
- Add new overlays for layout guides and text editing.

Renderer:
- Add support for multi-line text, custom line-height, and letter-spacing.
- Implement global composite operation (blend modes).
- Update sticker node to resolve dynamic provider IDs.

Infrastructure:
- Add storage migrations (v3->v6) for text weights, sticker IDs, and bookmarks.
- Update global styles and core UI components (Button, Input, Popover).

* add ts-nocheck directive to settings-legacy.tsx to suppress TypeScript errors

* fix: correct global composite operation assignment in TextNode to ensure proper blend mode handling

* deleted shadcn components with errors

* formatting

* fix linter issues

* migrate from next middleware to proxy

* add missing component back

* add breadcrumb back

* chore: add @radix-ui/react-primitive deps

* chore: more deps

* chore: add missing env vars to bun-ci

* next env

3 files changed, 446 insertions, 0 deletions

diff --git a/apps/web/src/components/editor/panels/properties/sections/blending.tsx b/apps/web/src/components/editor/panels/properties/sections/blending.tsx
new file mode 100644
index 00000000..430efa25
--- /dev/null
+++ b/apps/web/src/components/editor/panels/properties/sections/blending.tsx
@@ -0,0 +1,196 @@
+import { useEditor } from "@/hooks/use-editor";
+import { usePropertyDraft } from "../hooks/use-property-draft";
+import { clamp } from "@/utils/math";
+import { NumberField } from "@/components/ui/number-field";
+import {
+	DEFAULT_BLEND_MODE,
+	DEFAULT_OPACITY,
+} from "@/constants/timeline-constants";
+import { OcCheckerboardIcon } from "@opencut/ui/icons";
+import { Fragment, useRef } from "react";
+import { Section, SectionContent, SectionHeader } from "../section";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectSeparator,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
+import type { BlendMode } from "@/types/rendering";
+import type { ElementType } from "@/types/timeline";
+import { HugeiconsIcon } from "@hugeicons/react";
+import { RainDropIcon } from "@hugeicons/core-free-icons";
+
+type BlendingElement = {
+	id: string;
+	opacity: number;
+	type: ElementType;
+	blendMode?: BlendMode;
+};
+
+const BLEND_MODE_GROUPS = [
+	[{ value: "normal", label: "Normal" }],
+	[
+		{ value: "darken", label: "Darken" },
+		{ value: "multiply", label: "Multiply" },
+		{ value: "color-burn", label: "Color Burn" },
+	],
+	[
+		{ value: "lighten", label: "Lighten" },
+		{ value: "screen", label: "Screen" },
+		{ value: "plus-lighter", label: "Plus Lighter" },
+		{ value: "color-dodge", label: "Color Dodge" },
+	],
+	[
+		{ value: "overlay", label: "Overlay" },
+		{ value: "soft-light", label: "Soft Light" },
+		{ value: "hard-light", label: "Hard Light" },
+	],
+	[
+		{ value: "difference", label: "Difference" },
+		{ value: "exclusion", label: "Exclusion" },
+	],
+	[
+		{ value: "hue", label: "Hue" },
+		{ value: "saturation", label: "Saturation" },
+		{ value: "color", label: "Color" },
+		{ value: "luminosity", label: "Luminosity" },
+	],
+];
+
+export function BlendingSection({
+	element,
+	trackId,
+}: {
+	element: BlendingElement;
+	trackId: string;
+}) {
+	const editor = useEditor();
+	const blendMode = element.blendMode ?? DEFAULT_BLEND_MODE;
+	const didSelectRef = useRef(false);
+	const committedBlendModeRef = useRef(blendMode);
+	if (!editor.timeline.isPreviewActive()) {
+		committedBlendModeRef.current = blendMode;
+	}
+
+	const previewBlendMode = (value: BlendMode) =>
+		editor.timeline.previewElements({
+			updates: [
+				{ trackId, elementId: element.id, updates: { blendMode: value } },
+			],
+		});
+
+	const commitBlendMode = (value: string) => {
+		if (editor.timeline.isPreviewActive()) {
+			editor.timeline.commitPreview();
+		} else {
+			editor.timeline.updateElements({
+				updates: [
+					{
+						trackId,
+						elementId: element.id,
+						updates: { blendMode: value as BlendMode },
+					},
+				],
+			});
+		}
+		didSelectRef.current = true;
+	};
+
+	const handleBlendModeOpenChange = (isOpen: boolean) => {
+		if (!isOpen) {
+			if (!didSelectRef.current) editor.timeline.discardPreview();
+			didSelectRef.current = false;
+		}
+	};
+
+	const opacity = usePropertyDraft({
+		displayValue: Math.round(element.opacity * 100).toString(),
+		parse: (input) => {
+			const parsed = parseFloat(input);
+			if (Number.isNaN(parsed)) return null;
+			return clamp({ value: parsed, min: 0, max: 100 }) / 100;
+		},
+		onPreview: (value) =>
+			editor.timeline.previewElements({
+				updates: [
+					{ trackId, elementId: element.id, updates: { opacity: value } },
+				],
+			}),
+		onCommit: () => editor.timeline.commitPreview(),
+	});
+
+	return (
+		<Section collapsible sectionKey={`${element.type}:blending`}>
+			<SectionHeader title="Blending" />
+			<SectionContent>
+				<div className="flex items-start gap-2">
+					<div className="w-1/2 space-y-1.5">
+						<NumberField
+							className="w-full"
+							icon={
+								<OcCheckerboardIcon className="size-3.5 text-muted-foreground" />
+							}
+							value={opacity.displayValue}
+							min={0}
+							max={100}
+							onFocus={opacity.onFocus}
+							onChange={opacity.onChange}
+							onBlur={opacity.onBlur}
+							onScrub={opacity.scrubTo}
+							onScrubEnd={opacity.commitScrub}
+							onReset={() =>
+								editor.timeline.updateElements({
+									updates: [
+										{
+											trackId,
+											elementId: element.id,
+											updates: { opacity: DEFAULT_OPACITY },
+										},
+									],
+								})
+							}
+							isDefault={element.opacity === DEFAULT_OPACITY}
+							dragSensitivity="slow"
+						/>
+					</div>
+					<div className="w-1/2 space-y-1.5">
+						<Select
+							value={committedBlendModeRef.current}
+							onOpenChange={handleBlendModeOpenChange}
+							onValueChange={commitBlendMode}
+						>
+							<SelectTrigger
+								icon={<HugeiconsIcon icon={RainDropIcon} />}
+								className="w-full"
+							>
+								<SelectValue placeholder="Select blend mode" />
+							</SelectTrigger>
+							<SelectContent className="w-36">
+								{BLEND_MODE_GROUPS.map((group, groupIndex) => (
+									<Fragment key={group[0]?.value ?? `group-${groupIndex}`}>
+										{group.map((option) => (
+											<SelectItem
+												key={option.value}
+												value={option.value}
+												onPointerEnter={() =>
+													previewBlendMode(option.value as BlendMode)
+												}
+											>
+												{option.label}
+											</SelectItem>
+										))}
+										{groupIndex < BLEND_MODE_GROUPS.length - 1 ? (
+											<SelectSeparator />
+										) : null}
+									</Fragment>
+								))}
+							</SelectContent>
+						</Select>
+					</div>
+				</div>
+			</SectionContent>
+		</Section>
+	);
+}
diff --git a/apps/web/src/components/editor/panels/properties/sections/index.tsx b/apps/web/src/components/editor/panels/properties/sections/index.tsx
new file mode 100644
index 00000000..8be58f39
--- /dev/null
+++ b/apps/web/src/components/editor/panels/properties/sections/index.tsx
@@ -0,0 +1,2 @@
+export * from "./transform";
+export * from "./blending";
diff --git a/apps/web/src/components/editor/panels/properties/sections/transform.tsx b/apps/web/src/components/editor/panels/properties/sections/transform.tsx
new file mode 100644
index 00000000..17a54b4c
--- /dev/null
+++ b/apps/web/src/components/editor/panels/properties/sections/transform.tsx
@@ -0,0 +1,248 @@
+import { NumberField } from "@/components/ui/number-field";
+import { useEditor } from "@/hooks/use-editor";
+import { usePropertyDraft } from "../hooks/use-property-draft";
+import { clamp } from "@/utils/math";
+import type { ElementType, Transform } from "@/types/timeline";
+import { Section, SectionContent, SectionHeader } from "../section";
+import { Button } from "@/components/ui/button";
+import { HugeiconsIcon } from "@hugeicons/react";
+import {
+	ArrowExpandIcon,
+	Link05Icon,
+	RotateClockwiseIcon,
+} from "@hugeicons/core-free-icons";
+import { useState } from "react";
+import { DEFAULT_TRANSFORM } from "@/constants/timeline-constants";
+
+type TransformElement = {
+	id: string;
+	transform: Transform;
+	type: ElementType;
+};
+
+function parseFloat_({ input }: { input: string }): number | null {
+	const parsed = parseFloat(input);
+	return Number.isNaN(parsed) ? null : parsed;
+}
+
+export function TransformSection({
+	element,
+	trackId,
+}: {
+	element: TransformElement;
+	trackId: string;
+}) {
+	const editor = useEditor();
+	const [isScaleLocked, setIsScaleLocked] = useState(false);
+
+	const previewTransform = (transform: Partial<Transform>) => {
+		editor.timeline.previewElements({
+			updates: [
+				{
+					trackId,
+					elementId: element.id,
+					updates: { transform: { ...element.transform, ...transform } },
+				},
+			],
+		});
+	};
+
+	const commit = () => editor.timeline.commitPreview();
+
+	const positionX = usePropertyDraft({
+		displayValue: Math.round(element.transform.position.x).toString(),
+		parse: (input) => parseFloat_({ input }),
+		onPreview: (value) =>
+			previewTransform({
+				position: { ...element.transform.position, x: value },
+			}),
+		onCommit: commit,
+	});
+
+	const positionY = usePropertyDraft({
+		displayValue: Math.round(element.transform.position.y).toString(),
+		parse: (input) => parseFloat_({ input }),
+		onPreview: (value) =>
+			previewTransform({
+				position: { ...element.transform.position, y: value },
+			}),
+		onCommit: commit,
+	});
+
+	const scale = usePropertyDraft({
+		displayValue: Math.round(element.transform.scale * 100).toString(),
+		parse: (input) => {
+			const parsed = parseFloat_({ input });
+			if (parsed === null) return null;
+			return Math.max(parsed, 1) / 100;
+		},
+		onPreview: (value) => previewTransform({ scale: value }),
+		onCommit: commit,
+	});
+	const scaleFieldProps = {
+		className: "flex-1",
+		value: scale.displayValue,
+		onFocus: scale.onFocus,
+		onChange: scale.onChange,
+		onBlur: scale.onBlur,
+		dragSensitivity: "slow" as const,
+		onScrub: scale.scrubTo,
+		onScrubEnd: scale.commitScrub,
+		onReset: () =>
+			editor.timeline.updateElements({
+				updates: [
+					{
+						trackId,
+						elementId: element.id,
+						updates: {
+							transform: {
+								...element.transform,
+								scale: DEFAULT_TRANSFORM.scale,
+							},
+						},
+					},
+				],
+			}),
+		isDefault: element.transform.scale === DEFAULT_TRANSFORM.scale,
+	};
+
+	const rotation = usePropertyDraft({
+		displayValue: Math.round(element.transform.rotate).toString(),
+		parse: (input) => {
+			const parsed = parseFloat_({ input });
+			if (parsed === null) return null;
+			return clamp({ value: parsed, min: -360, max: 360 });
+		},
+		onPreview: (value) => previewTransform({ rotate: value }),
+		onCommit: commit,
+	});
+
+	return (
+		<Section collapsible sectionKey={`${element.type}:transform`}>
+			<SectionHeader title="Transform" />
+			<SectionContent>
+				<div className="flex flex-col gap-2">
+					<div className="flex items-center gap-2">
+						{isScaleLocked ? (
+							<>
+								<NumberField icon="W" {...scaleFieldProps} />
+								<NumberField icon="H" {...scaleFieldProps} />
+							</>
+						) : (
+							<NumberField
+								icon={<HugeiconsIcon icon={ArrowExpandIcon} />}
+								{...scaleFieldProps}
+								className="flex-1"
+							/>
+						)}
+						<Button
+							variant={isScaleLocked ? "secondary" : "ghost"}
+							size="icon"
+							aria-pressed={isScaleLocked}
+							onClick={() => setIsScaleLocked((isLocked) => !isLocked)}
+						>
+							<HugeiconsIcon icon={Link05Icon} />
+						</Button>
+					</div>
+					<div className="flex items-center gap-2">
+						<NumberField
+							icon="X"
+							className="flex-1"
+							value={positionX.displayValue}
+							onFocus={positionX.onFocus}
+							onChange={positionX.onChange}
+							onBlur={positionX.onBlur}
+							onScrub={positionX.scrubTo}
+							onScrubEnd={positionX.commitScrub}
+							onReset={() =>
+								editor.timeline.updateElements({
+									updates: [
+										{
+											trackId,
+											elementId: element.id,
+											updates: {
+												transform: {
+													...element.transform,
+													position: {
+														...element.transform.position,
+														x: DEFAULT_TRANSFORM.position.x,
+													},
+												},
+											},
+										},
+									],
+								})
+							}
+							isDefault={
+								element.transform.position.x === DEFAULT_TRANSFORM.position.x
+							}
+						/>
+						<NumberField
+							icon="Y"
+							className="flex-1"
+							value={positionY.displayValue}
+							onFocus={positionY.onFocus}
+							onChange={positionY.onChange}
+							onBlur={positionY.onBlur}
+							onScrub={positionY.scrubTo}
+							onScrubEnd={positionY.commitScrub}
+							onReset={() =>
+								editor.timeline.updateElements({
+									updates: [
+										{
+											trackId,
+											elementId: element.id,
+											updates: {
+												transform: {
+													...element.transform,
+													position: {
+														...element.transform.position,
+														y: DEFAULT_TRANSFORM.position.y,
+													},
+												},
+											},
+										},
+									],
+								})
+							}
+							isDefault={
+								element.transform.position.y === DEFAULT_TRANSFORM.position.y
+							}
+						/>
+					</div>
+
+					<div className="flex items-center gap-2">
+						<NumberField
+							icon={<HugeiconsIcon icon={RotateClockwiseIcon} />}
+							className="flex-1"
+							value={rotation.displayValue}
+							onFocus={rotation.onFocus}
+							onChange={rotation.onChange}
+							onBlur={rotation.onBlur}
+							dragSensitivity="slow"
+							onScrub={rotation.scrubTo}
+							onScrubEnd={rotation.commitScrub}
+							onReset={() =>
+								editor.timeline.updateElements({
+									updates: [
+										{
+											trackId,
+											elementId: element.id,
+											updates: {
+												transform: {
+													...element.transform,
+													rotate: DEFAULT_TRANSFORM.rotate,
+												},
+											},
+										},
+									],
+								})
+							}
+							isDefault={element.transform.rotate === DEFAULT_TRANSFORM.rotate}
+						/>
+					</div>
+				</div>
+			</SectionContent>
+		</Section>
+	);
+}