feat: Persist Studio manual edits via manifest (#593)

## Summary

Studio manual geometry edits now persist as a project-local manifest instead of being baked into composition source on each gesture.

The manifest lives at:

```text
.hyperframes/studio-manual-edits.json
```

It is the source of truth for manual drag, resize, rotation, inspector geometry edits, group moves, and selected-layer reset.

## Architecture

- **Manifest-backed edits**: each edit stores a kind (`path-offset`, `box-size`, `rotation`), a source-scoped target, and the edit values.
- **Source-scoped resolution**: targets include `sourceFile`, `id`, `selector`, and `selectorIndex`, so duplicate selectors in nested compositions resolve against the owning source file.
- **Additive CSS layer**: move uses CSS `translate`, resize writes stable dimensions/flex sizing, and rotation uses CSS `rotate` over the authored base.
- **Shared replay runtime**: Studio preview, thumbnails, frame capture, producer renders, and CLI Studio renders/thumbnails all use the same core manual-edit render script.
- **Animation-safe replay**: Studio reapplies the manual layer after load, refresh, timeline seeks, player operations, playback frames, thumbnail seeks, and render seeks instead of rewriting GSAP timelines.
- **History and handoff**: the manifest is a normal project file, so undo/redo and agent edits can preserve, modify, or remove manual visual edits explicitly.

## User Impact

Users can move, resize, rotate, group-move, and reset supported layers from the canvas or inspector, then refresh, capture thumbnails/screenshots, play animated compositions, and render videos without manual edits drifting away from the edited state.

## Main Files

- `packages/studio/src/components/editor/manualEdits.ts`
- `packages/studio/src/components/editor/DomEditOverlay.tsx`
- `packages/studio/src/components/editor/PropertyPanel.tsx`
- `packages/studio/src/App.tsx`
- `packages/core/src/studio-api/helpers/manualEditsRenderScript.ts`
- `packages/studio/vite.config.ts`
- `packages/cli/src/server/studioServer.ts`
- `packages/core/src/compiler/htmlBundler.ts`
- `packages/producer/src/services/htmlCompiler.ts`
- `packages/core/src/studio-api/routes/thumbnail.ts`
- `packages/producer/src/services/fileServer.ts`
- `packages/producer/src/services/renderOrchestrator.ts`

## Test Plan

```bash
volta run --node 22.20.0 bun run build
volta run --node 22.20.0 bun run --filter @hyperframes/core test -- src/studio-api/helpers/manualEditsRenderScript.test.ts
volta run --node 22.20.0 bun run --filter @hyperframes/core typecheck
volta run --node 22.20.0 bun run --filter @hyperframes/studio typecheck
volta run --node 22.20.0 bun run --filter @hyperframes/cli typecheck
volta run --node 22.20.0 bunx oxlint <changed files>
volta run --node 22.20.0 bunx oxfmt --check <changed files>
git diff --check
```

packages/studio/src/components/editor/gradientValue.test.ts

@@ -0,0 +1,89 @@
+import { describe, expect, it } from "vitest";
+import {
+  buildDefaultGradientModel,
+  insertGradientStop,
+  parseGradient,
+  serializeGradient,
+} from "./gradientValue";
+
+describe("parseGradient", () => {
+  it("parses linear gradients", () => {
+    expect(
+      parseGradient("linear-gradient(135deg, rgba(15, 23, 42, 0.58), rgba(255, 255, 255, 0.04))"),
+    ).toMatchObject({
+      kind: "linear",
+      repeating: false,
+      angle: 135,
+      stops: [
+        { color: "rgba(15, 23, 42, 0.58)", position: 0 },
+        { color: "rgba(255, 255, 255, 0.04)", position: 100 },
+      ],
+    });
+  });
+
+  it("parses radial gradients", () => {
+    expect(
+      parseGradient("radial-gradient(circle closest-side at 20% 35%, #ff0000 10%, #0000ff 90%)"),
+    ).toMatchObject({
+      kind: "radial",
+      shape: "circle",
+      radialSize: "closest-side",
+      centerX: 20,
+      centerY: 35,
+    });
+  });
+
+  it("parses conic gradients", () => {
+    expect(
+      parseGradient("conic-gradient(from 45deg at 40% 60%, #111111 0%, #ffffff 100%)"),
+    ).toMatchObject({
+      kind: "conic",
+      angle: 45,
+      centerX: 40,
+      centerY: 60,
+    });
+  });
+
+  it("parses repeating gradients", () => {
+    expect(
+      parseGradient("repeating-linear-gradient(90deg, #000000 0%, #ffffff 50%)"),
+    ).toMatchObject({
+      kind: "linear",
+      repeating: true,
+      angle: 90,
+    });
+  });
+});
+
+describe("serializeGradient", () => {
+  it("serializes default gradient models", () => {
+    expect(serializeGradient(buildDefaultGradientModel("rgba(60, 230, 172, 0.18)"))).toBe(
+      "linear-gradient(135deg, rgba(60, 230, 172, 0.18) 0%, rgba(255, 255, 255, 0.04) 100%)",
+    );
+  });
+
+  it("round-trips parsed gradients", () => {
+    const parsed = parseGradient(
+      "repeating-conic-gradient(from 90deg at 25% 75%, rgba(0, 0, 0, 0.5) 0%, rgba(255, 255, 255, 0.1) 100%)",
+    );
+    expect(parsed).not.toBeNull();
+    expect(serializeGradient(parsed!)).toBe(
+      "repeating-conic-gradient(from 90deg at 25% 75%, rgba(0, 0, 0, 0.5) 0%, rgba(255, 255, 255, 0.1) 100%)",
+    );
+  });
+});
+
+describe("insertGradientStop", () => {
+  it("inserts a stop at the clicked position with an interpolated color", () => {
+    const parsed = parseGradient("linear-gradient(90deg, #000000 0%, #ffffff 100%)");
+    expect(parsed).not.toBeNull();
+
+    expect(insertGradientStop(parsed!, 25)).toMatchObject({
+      stops: [
+        { color: "#000000", position: 0 },
+        { color: "#404040", position: 25 },
+        { color: "#ffffff", position: 100 },
+      ],
+    });
+  });
+});