chore: normalize line endings

3 files changed, 340 insertions, 340 deletions

diff --git a/docs/actions.md b/docs/actions.md
index 44c2153f..3d001e86 100644
--- a/docs/actions.md
+++ b/docs/actions.md
@@ -1,85 +1,85 @@
-# Actions System
-
-Actions are the trigger layer for user-initiated operations. They connect keyboard shortcuts, UI buttons, and context menus to editor functionality.
-
-## Adding a New Action
-
-### 1. Define the action — `src/lib/actions/definitions.ts`
-
-Add an entry to the `ACTIONS` object:
-
-```typescript
-"my-action": {
-    description: "What it does",
-    category: "editing",           // playback | navigation | editing | selection | history | timeline | controls
-    defaultShortcuts: ["ctrl+m"],  // optional
-    args: { someValue: "number" }, // optional, only if it takes args
-},
-```
-
-**If your shortcut uses a special key** (not a letter/digit), check `getPressedKey` in `src/stores/keybindings-store.ts` and add a case if it's missing:
-
-```typescript
-if (key === "escape") return "escape";
-```
-
-**If your action has a `defaultShortcuts`**, also add a keybindings migration so existing users get it (keybindings are persisted in localStorage — new defaults only apply to fresh installs):
-
-1. Create `src/stores/keybindings/migrations/vN-to-vN+1.ts`:
-
-```typescript
-export function vNToVN1({ state }: { state: unknown }): unknown {
-    const s = state as { keybindings: Record<string, string>; isCustomized: boolean };
-    const keybindings = { ...s.keybindings };
-    if (!keybindings["my-key"]) {
-        keybindings["my-key"] = "my-action";
-    }
-    return { ...s, keybindings };
-}
-```
-
-2. Register it in `src/stores/keybindings/migrations/index.ts` and bump `CURRENT_VERSION`.
-
-### 2. Register the handler — `src/hooks/actions/use-editor-actions.ts`
-
-```typescript
-useActionHandler(
-    "my-action",
-    () => {
-        editor.timeline.doSomething();
-    },
-    undefined, // isActive: MutableRefObject<boolean> | boolean | undefined
-);
-```
-
-### 3. Register arg types (if needed) — `src/lib/actions/types.ts`
-
-Only required if your action accepts arguments:
-
-```typescript
-export type TActionArgsMap = {
-    // ...existing actions...
-    "my-action": { someValue: number } | undefined; // | undefined = optional args
-};
-```
-
-## Invoking Actions
-
-Use `invokeAction` for any user-triggered operation (buttons, context menus, etc.):
-
-```typescript
-import { invokeAction } from "@/lib/actions";
-
-invokeAction("my-action");
-invokeAction("seek-forward", { seconds: 5 });
-```
-
-Avoid calling `editor.xxx()` directly from UI components — that bypasses the action layer (toasts, validation feedback, keybinding support).
-
-## The `isActive` parameter
-
-The third argument to `useActionHandler` controls when the handler is active:
-
-- `undefined` — always active
-- `true` / `false` — statically enabled/disabled
-- `MutableRefObject<boolean>` — reactive, toggled at runtime (e.g. only active when a panel is focused)
+# Actions System

+

+Actions are the trigger layer for user-initiated operations. They connect keyboard shortcuts, UI buttons, and context menus to editor functionality.

+

+## Adding a New Action

+

+### 1. Define the action — `src/lib/actions/definitions.ts`

+

+Add an entry to the `ACTIONS` object:

+

+```typescript

+"my-action": {

+    description: "What it does",

+    category: "editing",           // playback | navigation | editing | selection | history | timeline | controls

+    defaultShortcuts: ["ctrl+m"],  // optional

+    args: { someValue: "number" }, // optional, only if it takes args

+},

+```

+

+**If your shortcut uses a special key** (not a letter/digit), check `getPressedKey` in `src/stores/keybindings-store.ts` and add a case if it's missing:

+

+```typescript

+if (key === "escape") return "escape";

+```

+

+**If your action has a `defaultShortcuts`**, also add a keybindings migration so existing users get it (keybindings are persisted in localStorage — new defaults only apply to fresh installs):

+

+1. Create `src/stores/keybindings/migrations/vN-to-vN+1.ts`:

+

+```typescript

+export function vNToVN1({ state }: { state: unknown }): unknown {

+    const s = state as { keybindings: Record<string, string>; isCustomized: boolean };

+    const keybindings = { ...s.keybindings };

+    if (!keybindings["my-key"]) {

+        keybindings["my-key"] = "my-action";

+    }

+    return { ...s, keybindings };

+}

+```

+

+2. Register it in `src/stores/keybindings/migrations/index.ts` and bump `CURRENT_VERSION`.

+

+### 2. Register the handler — `src/hooks/actions/use-editor-actions.ts`

+

+```typescript

+useActionHandler(

+    "my-action",

+    () => {

+        editor.timeline.doSomething();

+    },

+    undefined, // isActive: MutableRefObject<boolean> | boolean | undefined

+);

+```

+

+### 3. Register arg types (if needed) — `src/lib/actions/types.ts`

+

+Only required if your action accepts arguments:

+

+```typescript

+export type TActionArgsMap = {

+    // ...existing actions...

+    "my-action": { someValue: number } | undefined; // | undefined = optional args

+};

+```

+

+## Invoking Actions

+

+Use `invokeAction` for any user-triggered operation (buttons, context menus, etc.):

+

+```typescript

+import { invokeAction } from "@/lib/actions";

+

+invokeAction("my-action");

+invokeAction("seek-forward", { seconds: 5 });

+```

+

+Avoid calling `editor.xxx()` directly from UI components — that bypasses the action layer (toasts, validation feedback, keybinding support).

+

+## The `isActive` parameter

+

+The third argument to `useActionHandler` controls when the handler is active:

+

+- `undefined` — always active

+- `true` / `false` — statically enabled/disabled

+- `MutableRefObject<boolean>` — reactive, toggled at runtime (e.g. only active when a panel is focused)

diff --git a/docs/countries-search.md b/docs/countries-search.md
index 62ed3913..8bce73b4 100644
--- a/docs/countries-search.md
+++ b/docs/countries-search.md
@@ -1,51 +1,51 @@
-# Countries search — Data Guide
-
-## Structure
-
-Each country entry in `apps/web/public/countries.json` follows this shape:
-
-```json
-{
-  "name": "Denmark",
-  "code": "DK",
-  "languages": ["danish"],
-  "flag_colors": ["red", "white"],
-  "region": "Northern Europe"
-}
-```
-
-### name
-Use the commonly recognized country or territory name.
-
-### code
-Use the canonical country/territory code.
-
-### flag_colors
-Canonical color names only: `red`, `white`, `blue`, `green`, `yellow`, `black`, `orange`, `purple`.
-
-### languages
-The official or widely spoken languages.
-
-### region
-Consistent values — don't mix "Europe" and "Western Europe" for the same type of country.
-
-| Region | Examples |
-|---|---|
-| Northern Europe | Denmark, Sweden, Norway, Finland, Iceland |
-| Western Europe | France, Germany, Switzerland, UK, Netherlands |
-| Southern Europe | Italy, Spain, Greece, Portugal |
-| Eastern Europe | Poland, Russia, Czech Republic, Hungary |
-| Middle East | Saudi Arabia, UAE, Israel, Turkey |
-| East Asia | Japan, China, South Korea |
-| Southeast Asia | Thailand, Vietnam, Indonesia, Singapore |
-| South Asia | India, Pakistan, Bangladesh |
-| Central Asia | Kazakhstan, Uzbekistan |
-| North Africa | Egypt, Morocco, Tunisia |
-| Sub-Saharan Africa | Nigeria, Kenya, South Africa, Ethiopia |
-| North America | USA, Canada, Mexico |
-| Central America | Panama, Costa Rica, Guatemala |
-| Caribbean | Cuba, Bahamas, Jamaica |
-| South America | Brazil, Argentina, Colombia |
-| Oceania | Australia, New Zealand |
-| Atlantic Ocean | Ascension Island, Saint Helena |
-| North Atlantic | Bermuda |
+# Countries search — Data Guide

+

+## Structure

+

+Each country entry in `apps/web/public/countries.json` follows this shape:

+

+```json

+{

+  "name": "Denmark",

+  "code": "DK",

+  "languages": ["danish"],

+  "flag_colors": ["red", "white"],

+  "region": "Northern Europe"

+}

+```

+

+### name

+Use the commonly recognized country or territory name.

+

+### code

+Use the canonical country/territory code.

+

+### flag_colors

+Canonical color names only: `red`, `white`, `blue`, `green`, `yellow`, `black`, `orange`, `purple`.

+

+### languages

+The official or widely spoken languages.

+

+### region

+Consistent values — don't mix "Europe" and "Western Europe" for the same type of country.

+

+| Region | Examples |

+|---|---|

+| Northern Europe | Denmark, Sweden, Norway, Finland, Iceland |

+| Western Europe | France, Germany, Switzerland, UK, Netherlands |

+| Southern Europe | Italy, Spain, Greece, Portugal |

+| Eastern Europe | Poland, Russia, Czech Republic, Hungary |

+| Middle East | Saudi Arabia, UAE, Israel, Turkey |

+| East Asia | Japan, China, South Korea |

+| Southeast Asia | Thailand, Vietnam, Indonesia, Singapore |

+| South Asia | India, Pakistan, Bangladesh |

+| Central Asia | Kazakhstan, Uzbekistan |

+| North Africa | Egypt, Morocco, Tunisia |

+| Sub-Saharan Africa | Nigeria, Kenya, South Africa, Ethiopia |

+| North America | USA, Canada, Mexico |

+| Central America | Panama, Costa Rica, Guatemala |

+| Caribbean | Cuba, Bahamas, Jamaica |

+| South America | Brazil, Argentina, Colombia |

+| Oceania | Australia, New Zealand |

+| Atlantic Ocean | Ascension Island, Saint Helena |

+| North Atlantic | Bermuda |

diff --git a/docs/keyframes.md b/docs/keyframes.md
index 97619626..afa85846 100644
--- a/docs/keyframes.md
+++ b/docs/keyframes.md
@@ -1,204 +1,204 @@
-# Keyframe System
-
-Keyframes allow element properties to change over time. The system is split into three layers: the **data model** (how keyframes are stored), the **registry** (which properties support keyframes and how to read/write them), and the **UI** (hooks and components that wire it all together).
-
-## How It Works
-
-### Data model
-
-Every `BaseTimelineElement` has an optional `animations?: ElementAnimations` field:
-
-```typescript
-interface ElementAnimations {
-    channels: Record<string, AnimationChannel | undefined>;
-}
-```
-
-A channel is a typed bucket of keyframes keyed by property path (e.g. `"opacity"`, `"background.color"`). Three channel types exist: `NumberAnimationChannel`, `ColorAnimationChannel`, and `DiscreteAnimationChannel`.
-
-### Registry
-
-`src/lib/animation/property-registry.ts` defines which property paths are animatable and how to read/write their values on an element. `src/types/animation.ts` holds the canonical list of valid paths in `ANIMATION_PROPERTY_PATHS`.
-
-### Resolver
-
-`src/lib/animation/resolve.ts` provides functions that return the effective value of a property at a given local time — falling back to the element's static value when no keyframes exist.
-
-### Renderer
-
-Nodes in `src/services/renderer/` call the resolve functions before drawing so that animated properties interpolate correctly during export and preview.
-
-### UI
-
-Two hooks in `src/components/editor/panels/properties/hooks/` handle the keyframe-aware field logic:
-
-- `useKeyframedNumberProperty` — for numeric fields (opacity, position, scale, etc.)
-- `useKeyframedColorProperty` — for color pickers
-
-Both hooks handle the toggle/add/remove keyframe flow and automatically switch between writing to the static property and writing to the animation channel depending on whether keyframes are active.
-
----
-
-## Adding a New Animatable Property
-
-Using `"background.paddingX"` as an example.
-
-### 1. Register the path — `src/types/animation.ts`
-
-```typescript
-export const ANIMATION_PROPERTY_PATHS = [
-    // ...existing paths
-    "background.paddingX",
-] as const;
-```
-
-### 2. Add a registry entry — `src/lib/animation/property-registry.ts`
-
-```typescript
-"background.paddingX": {
-    valueKind: "number",          // "number" | "color" | "discrete"
-    defaultInterpolation: "linear",
-    numericRange: { min: 0 },     // optional, only for number properties
-    supportsElement: ({ element }) => element.type === "text",
-    getValue: ({ element }) =>
-        element.type === "text"
-            ? (element.background.paddingX ?? DEFAULT_TEXT_BACKGROUND.paddingX)
-            : null,
-    setValue: ({ element, value }) =>
-        element.type === "text"
-            ? { ...element, background: { ...element.background, paddingX: value as number } }
-            : element,
-},
-```
-
-**Notes:**
-- `getValue` must return the effective value including any defaults — this is what gets recorded when a keyframe is added.
-- `setValue` receives `AnimationValue` (`number | string | boolean`). Cast to the correct type since `coerceAnimationValueForProperty` already validated it upstream.
-- For color properties, use `valueKind: "color"` and cast `value as string`.
-
-### 3. Add a resolve function — `src/lib/animation/resolve.ts`
-
-For **numbers**, use the existing generic `resolveNumberAtTime`:
-
-```typescript
-import { resolveNumberAtTime } from "@/lib/animation";
-
-const resolvedPaddingX = resolveNumberAtTime({
-    baseValue: element.background.paddingX ?? DEFAULT_TEXT_BACKGROUND.paddingX,
-    animations: element.animations,
-    propertyPath: "background.paddingX",
-    localTime,
-});
-```
-
-For **colors**, use `resolveColorAtTime`:
-
-```typescript
-const resolvedColor = resolveColorAtTime({
-    baseColor: element.color,
-    animations: element.animations,
-    propertyPath: "color",
-    localTime,
-});
-```
-
-If neither fits (new value kind), add a dedicated resolve function following the same pattern as `resolveOpacityAtTime` and export it from `src/lib/animation/index.ts`.
-
-### 4. Wire the renderer
-
-In the relevant node (`src/services/renderer/nodes/`), call the resolve function before drawing:
-
-```typescript
-const resolvedPaddingX = resolveNumberAtTime({
-    baseValue: this.params.background.paddingX ?? DEFAULT_TEXT_BACKGROUND.paddingX,
-    animations: this.params.animations,
-    propertyPath: "background.paddingX",
-    localTime,
-});
-```
-
-Use the resolved value (not `this.params.*`) anywhere that value affects rendering.
-
-### 5. Wire the UI
-
-In the properties panel, replace `usePropertyDraft` with the appropriate keyframe hook and add a `KeyframeToggle` to the field.
-
-**For number fields:**
-
-```typescript
-const { localTime, isPlayheadWithinElementRange } = useElementPlayhead({
-    startTime: element.startTime,
-    duration: element.duration,
-});
-
-const resolvedPaddingX = resolveNumberAtTime({
-    baseValue: element.background.paddingX ?? DEFAULT_TEXT_BACKGROUND.paddingX,
-    animations: element.animations,
-    propertyPath: "background.paddingX",
-    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,
-    buildBaseUpdates: ({ value }) => ({
-        background: { ...element.background, paddingX: value },
-    }),
-});
-```
-
-In JSX:
-
-```tsx
-<SectionField
-    label="Width"
-    beforeLabel={
-        <KeyframeToggle
-            isActive={paddingX.isKeyframedAtTime}
-            isDisabled={!isPlayheadWithinElementRange}
-            title="Toggle background width keyframe"
-            onToggle={paddingX.toggleKeyframe}
-        />
-    }
->
-    <NumberField
-        value={paddingX.displayValue}
-        onFocus={paddingX.onFocus}
-        onChange={paddingX.onChange}
-        onBlur={paddingX.onBlur}
-        onScrub={paddingX.scrubTo}
-        onScrubEnd={paddingX.commitScrub}
-        onReset={() => paddingX.commitValue({ value: DEFAULT_TEXT_BACKGROUND.paddingX })}
-        isDefault={isPropertyAtDefault({
-            hasAnimatedKeyframes: paddingX.hasAnimatedKeyframes,
-            isPlayheadWithinElementRange,
-            resolvedValue: resolvedPaddingX,
-            staticValue: element.background.paddingX ?? DEFAULT_TEXT_BACKGROUND.paddingX,
-            defaultValue: DEFAULT_TEXT_BACKGROUND.paddingX,
-        })}
-    />
-</SectionField>
-```
-
-**For color fields**, use `useKeyframedColorProperty` instead. It returns `{ onChange, onChangeEnd, toggleKeyframe, isKeyframedAtTime }` — wire `onChange({ color })` and `onChangeEnd` directly to the `ColorPicker`.
-
----
-
-## Checklist
-
-- [ ] Path added to `ANIMATION_PROPERTY_PATHS`
-- [ ] Registry entry added with correct `valueKind`, `supportsElement`, `getValue`, `setValue`
-- [ ] Resolve call added in the renderer node
-- [ ] UI field uses `useKeyframedNumberProperty` or `useKeyframedColorProperty` (not `usePropertyDraft`)
-- [ ] `KeyframeToggle` added to the `SectionField`
-- [ ] `onReset` calls `commitValue` (not `editor.timeline.updateElements` directly)
+# Keyframe System

+

+Keyframes allow element properties to change over time. The system is split into three layers: the **data model** (how keyframes are stored), the **registry** (which properties support keyframes and how to read/write them), and the **UI** (hooks and components that wire it all together).

+

+## How It Works

+

+### Data model

+

+Every `BaseTimelineElement` has an optional `animations?: ElementAnimations` field:

+

+```typescript

+interface ElementAnimations {

+    channels: Record<string, AnimationChannel | undefined>;

+}

+```

+

+A channel is a typed bucket of keyframes keyed by property path (e.g. `"opacity"`, `"background.color"`). Three channel types exist: `NumberAnimationChannel`, `ColorAnimationChannel`, and `DiscreteAnimationChannel`.

+

+### Registry

+

+`src/lib/animation/property-registry.ts` defines which property paths are animatable and how to read/write their values on an element. `src/types/animation.ts` holds the canonical list of valid paths in `ANIMATION_PROPERTY_PATHS`.

+

+### Resolver

+

+`src/lib/animation/resolve.ts` provides functions that return the effective value of a property at a given local time — falling back to the element's static value when no keyframes exist.

+

+### Renderer

+

+Nodes in `src/services/renderer/` call the resolve functions before drawing so that animated properties interpolate correctly during export and preview.

+

+### UI

+

+Two hooks in `src/components/editor/panels/properties/hooks/` handle the keyframe-aware field logic:

+

+- `useKeyframedNumberProperty` — for numeric fields (opacity, position, scale, etc.)

+- `useKeyframedColorProperty` — for color pickers

+

+Both hooks handle the toggle/add/remove keyframe flow and automatically switch between writing to the static property and writing to the animation channel depending on whether keyframes are active.

+

+---

+

+## Adding a New Animatable Property

+

+Using `"background.paddingX"` as an example.

+

+### 1. Register the path — `src/types/animation.ts`

+

+```typescript

+export const ANIMATION_PROPERTY_PATHS = [

+    // ...existing paths

+    "background.paddingX",

+] as const;

+```

+

+### 2. Add a registry entry — `src/lib/animation/property-registry.ts`

+

+```typescript

+"background.paddingX": {

+    valueKind: "number",          // "number" | "color" | "discrete"

+    defaultInterpolation: "linear",

+    numericRange: { min: 0 },     // optional, only for number properties

+    supportsElement: ({ element }) => element.type === "text",

+    getValue: ({ element }) =>

+        element.type === "text"

+            ? (element.background.paddingX ?? DEFAULT_TEXT_BACKGROUND.paddingX)

+            : null,

+    setValue: ({ element, value }) =>

+        element.type === "text"

+            ? { ...element, background: { ...element.background, paddingX: value as number } }

+            : element,

+},

+```

+

+**Notes:**

+- `getValue` must return the effective value including any defaults — this is what gets recorded when a keyframe is added.

+- `setValue` receives `AnimationValue` (`number | string | boolean`). Cast to the correct type since `coerceAnimationValueForProperty` already validated it upstream.

+- For color properties, use `valueKind: "color"` and cast `value as string`.

+

+### 3. Add a resolve function — `src/lib/animation/resolve.ts`

+

+For **numbers**, use the existing generic `resolveNumberAtTime`:

+

+```typescript

+import { resolveNumberAtTime } from "@/lib/animation";

+

+const resolvedPaddingX = resolveNumberAtTime({

+    baseValue: element.background.paddingX ?? DEFAULT_TEXT_BACKGROUND.paddingX,

+    animations: element.animations,

+    propertyPath: "background.paddingX",

+    localTime,

+});

+```

+

+For **colors**, use `resolveColorAtTime`:

+

+```typescript

+const resolvedColor = resolveColorAtTime({

+    baseColor: element.color,

+    animations: element.animations,

+    propertyPath: "color",

+    localTime,

+});

+```

+

+If neither fits (new value kind), add a dedicated resolve function following the same pattern as `resolveOpacityAtTime` and export it from `src/lib/animation/index.ts`.

+

+### 4. Wire the renderer

+

+In the relevant node (`src/services/renderer/nodes/`), call the resolve function before drawing:

+

+```typescript

+const resolvedPaddingX = resolveNumberAtTime({

+    baseValue: this.params.background.paddingX ?? DEFAULT_TEXT_BACKGROUND.paddingX,

+    animations: this.params.animations,

+    propertyPath: "background.paddingX",

+    localTime,

+});

+```

+

+Use the resolved value (not `this.params.*`) anywhere that value affects rendering.

+

+### 5. Wire the UI

+

+In the properties panel, replace `usePropertyDraft` with the appropriate keyframe hook and add a `KeyframeToggle` to the field.

+

+**For number fields:**

+

+```typescript

+const { localTime, isPlayheadWithinElementRange } = useElementPlayhead({

+    startTime: element.startTime,

+    duration: element.duration,

+});

+

+const resolvedPaddingX = resolveNumberAtTime({

+    baseValue: element.background.paddingX ?? DEFAULT_TEXT_BACKGROUND.paddingX,

+    animations: element.animations,

+    propertyPath: "background.paddingX",

+    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,

+    buildBaseUpdates: ({ value }) => ({

+        background: { ...element.background, paddingX: value },

+    }),

+});

+```

+

+In JSX:

+

+```tsx

+<SectionField

+    label="Width"

+    beforeLabel={

+        <KeyframeToggle

+            isActive={paddingX.isKeyframedAtTime}

+            isDisabled={!isPlayheadWithinElementRange}

+            title="Toggle background width keyframe"

+            onToggle={paddingX.toggleKeyframe}

+        />

+    }

+>

+    <NumberField

+        value={paddingX.displayValue}

+        onFocus={paddingX.onFocus}

+        onChange={paddingX.onChange}

+        onBlur={paddingX.onBlur}

+        onScrub={paddingX.scrubTo}

+        onScrubEnd={paddingX.commitScrub}

+        onReset={() => paddingX.commitValue({ value: DEFAULT_TEXT_BACKGROUND.paddingX })}

+        isDefault={isPropertyAtDefault({

+            hasAnimatedKeyframes: paddingX.hasAnimatedKeyframes,

+            isPlayheadWithinElementRange,

+            resolvedValue: resolvedPaddingX,

+            staticValue: element.background.paddingX ?? DEFAULT_TEXT_BACKGROUND.paddingX,

+            defaultValue: DEFAULT_TEXT_BACKGROUND.paddingX,

+        })}

+    />

+</SectionField>

+```

+

+**For color fields**, use `useKeyframedColorProperty` instead. It returns `{ onChange, onChangeEnd, toggleKeyframe, isKeyframedAtTime }` — wire `onChange({ color })` and `onChangeEnd` directly to the `ColorPicker`.

+

+---

+

+## Checklist

+

+- [ ] Path added to `ANIMATION_PROPERTY_PATHS`

+- [ ] Registry entry added with correct `valueKind`, `supportsElement`, `getValue`, `setValue`

+- [ ] Resolve call added in the renderer node

+- [ ] UI field uses `useKeyframedNumberProperty` or `useKeyframedColorProperty` (not `usePropertyDraft`)

+- [ ] `KeyframeToggle` added to the `SectionField`

+- [ ] `onReset` calls `commitValue` (not `editor.timeline.updateElements` directly)