# Plan — SVG asset authoring view

## Concept
A new asset kind `svg` (sibling to `button`) with its own sub-editor scope. Created from a "+" button under the Images section. The sub-editor reuses the canvas + shape primitives but has no time axis: each sub-layer is a single static frame.

## 1. Data model — `src/types/scene.ts`
- Extend `AssetKind` union with `'svg'`.
- Add `SvgAsset { id; kind: 'svg'; name; canvas: { width; height; background? }; layers: Layer[] }`.
- Add to the `Asset` discriminated union.
- Layers reuse the existing `Layer` type — single keyframe at `t=0` is all the renderer/sampler needs.

## 2. Store scope — `src/stores/scene.ts`
- New state: `activeSvgAssetId: string | null`.
- Actions (mirroring the button pair):
  - `addSvgAsset(name, canvas)` → creates asset, returns it.
  - `enterSvgAssetEdit(assetId)` → sets `activeSvgAssetId`, clears layer / clip / button selections, parks playhead at 0.
  - `exitSvgAssetEdit()` → nulls scope + selection.
- The existing `addLayer(assetId)` and `addAsset(...)` already write into the active scope (button / clip / main); extend the same scope-resolver so `activeSvgAssetId` is recognised. That means `addSampleRect / addSampleCircle / addSampleText / addSamplePolygon / startFreeformDrawing` all work unchanged inside the SVG scope.
- Block keyframe-creating paths inside SVG scope (`upsertKeyframe`, the "+ keyframe" button, arrow-nudge keyframe writes) — silently bake into the single frame at `t=0` instead of inserting a new one. Cheaper and cleaner than scrubbing them out post-hoc.

## 3. AssetSidebar — `src/components/AssetSidebar.vue`
- Add a `section-action` "+" button to the Images section header (same pattern as Clips/Buttons section).
- Handler: prompt for name (and maybe canvas size — default `300×300`) → `addSvgAsset(...)` → `enterSvgAssetEdit(asset.id)`.
- SVG assets show up in the Images section list as their own row (icon + name + click-to-edit + drag-to-stage to place a layer that references the asset). Pattern matches Buttons section.

## 4. Sub-editor wiring — `src/App.vue`
- Scope footer: add a third branch alongside `activeClipId` / `activeButtonAssetId`. SvgAsset name + back button → `exitSvgAssetEdit()`.
- **Layout swap** (the "left side replaces library" bit): when `activeSvgAssetId` is truthy:
  - The `.sidebar` slot renders a new `SvgLayerPanel` instead of `AssetSidebar`.
  - The `.timeline` footer area is collapsed / hidden (toggle a `panels-no-timeline` class on `.app` that flips `--timeline-height` to 0 and skips rendering Timeline). Same machinery the TAB-panels feature uses, so the visual transition is consistent.
- Header transport (play/pause/rewind/playhead) stays but should be disabled in SVG scope — there's nothing to play. Easiest: gate them on `!activeSvgAssetId`.

## 5. New component — `src/components/SvgLayerPanel.vue`
A purpose-built layer list. Cannot extract from Timeline — its track-name column is too coupled to the time axis. Surface area:
- One row per layer in `asset.layers`, top = front.
- Per row: type icon, inline-rename name, eye toggle (`editorHidden`), lock toggle, delete.
- Drag-to-reorder calling `moveLayer`.
- Top toolbar with the same shape-creation buttons currently in AssetSidebar (rect / circle / text / polygon / freeform). Reuse the existing `addSample*` handlers — they already obey active scope once step 2 lands.
- Selection state: existing `selectedLayerIds` works as-is.

## 6. CanvasStage — `src/components/CanvasStage.vue`
- Already drives off `activeButtonAssetId` for the button stage. Add a parallel branch for `activeSvgAssetId` that resolves the source layers + canvas size from the SVG asset.
- Skip the playhead animation: sample layers at `t=0` regardless of `store.playhead`. (Or: lock playhead to 0 in SVG scope so existing sampling Just Works.)
- Disable / hide UI not relevant to authoring statics: keyframe overlays, in/out brackets, scrub guidance.

## 7. Rendering the SVG asset back in the main scene — `src/lib/render.ts`
When a layer references an `SvgAsset`, draw its sub-layers via the existing layer/group draw path at `t=0`, scaled into the asset's `canvas` rect (same idea as `drawButtonFrame`). New helper `drawSvgFrame(ctx, asset, scene, images)` — small, reuses `drawMaskedGroup` like the button code does.

## 8. Persistence
No work. `SvgAsset.layers` is just `Layer[]`; goes through `projectForSave` → JSON → `.ruw` round-trip transparently. The only gate is the `AssetKind` union — once that's extended, save/load + zip/unzip + scene-clone paths all continue to work unchanged.

## 9. i18n
Strings: section-action button label/tooltip, scope footer label, layer-panel toolbar tooltips, the new-svg prompt copy. EN + DE.

## 10. Tests (devtools/tests.ts)
- Store: `addSvgAsset` shape, `enterSvgAssetEdit` flips scope + clears selection, `exitSvgAssetEdit` reverses it, `addLayer` inside SVG scope appends to `asset.layers`.
- Sidebar: "+" button under Images creates an asset and enters edit mode.
- App: while `activeSvgAssetId`, sidebar shows the layer panel and the timeline area is hidden.
- Render: a scene containing a layer referencing an SVG asset draws the asset's child shapes (snapshot via canvas pixel sample, like the existing button rendering tests).
- Round-trip: save + reload preserves `kind: 'svg'` and the nested `layers`.

## 11. Decisions (confirmed)
- **Canvas size on creation**: inherit from current scene; user can resize later via the existing resize button.
- **Background**: transparent.
- **Placement after creation**: drop user straight into the sub-editor.
- **Existing keyframe data**: strip on entry — SVG sub-layers carry a single t=0 keyframe.

Implementation order: 1–2 (types + store) → 3 + 4 (sidebar entry + scope swap) → 5 (layer panel) → 6 (canvas stage scope) → 7 (main-scene render) → 8 (i18n) → 9 (tests).