The asset type "vector art" exists as a model, which is stage 1 of #129 and shows nothing in the browser yet on purpose: a vectorart asset is not placeable, sits in the + menu and in the asset panel with its own icon (a curve between two points) and has no tab, so it behaves like a font - selectable, its rows in the inspector, a double click leading nowhere - because the tab is stage 3 and half an asset would only be in the way; the data model in Asset.ts is a shape built from rings (even-odd, so a shape may have holes, answer 6 in the issue), a ring being points with optional bezier handles in/out stored as an offset from the point and a closed flag (an open path is stroke only, answer 4), plus fill colour, opacity and an optional stroke (answer 5) - the two handles are kept apart instead of mirrored, because what "smooth" means is the editor's business and not the model's; canvas width, height and the filter are properties, so they get an inspector row and undo like any other, while the shapes are intrinsic data like the frames of a texture; the revision that #185 hands to the picture path is a fingerprint of what is drawn, not a counter, which is exactly why that key took a string token - no command can forget to bump it - and the name of a shape is deliberately left out of it, renaming changing no pixel; six undo commands in the new vectorArtCommands.ts (add a shape numbered in order, remove one which comes back to its old place - unlike a tilemap layer the last one may go too -, rename, move, write the rings as one step per gesture with the list copied, and set the style where stroke: null takes it away) and the pure function shapeOrderTarget for the four buttons of the planned inspector list (one forward, to front, one back, to back), which also serves dragging in that list; loading from a project file is strict - a point without numbers falls away, a broken handle leaves a corner behind, duplicate shape ids fall away like duplicate layer ids, a stroke of width 0 is no stroke - while a ring with a single point, which is what someone is drawing right now, stays; three findings on the way: JSON.stringify as the fingerprint was wrong because the same drawing came back from a project file as {points, closed} and was built as {closed, points}, so a reload would have rasterized the same picture under a new key (the fingerprint writes its fields in a fixed order now and a test measures that case), toNumber in serialize.ts turns any nonsense into 0 so the Number.isFinite checks ran into nothing and {x: 'far'} became the left edge instead of vanishing (shapes read numbers strictly via asFinite, 0 being a place on the canvas here), and "Vector art" would have been both a menu entry and the panel heading, which an existing test catches because a click by text would hit the heading - the group is called "Vector drawings" now while the menu entry stays "Vector art"; 20 new unit tests in tests/core/vectorart.test.ts and three counter-checks hold: the fingerprint back on JSON.stringify fails 2, reading the numbers loosely again fails 4, and not copying the ring list fails 1; no e2e check and the check sum stays 1157, only module 04 counting 19 asset types instead of 18 (#129)

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

src/core/store/serialize.ts

@@ -26,6 +26,9 @@ import type {
   StateMachineAsset,
   TextureFrame,
   TilemapLayer,
+  VectorPoint,
+  VectorRing,
+  VectorShape,
 } from '../model/Asset';
 import { parseCellKey } from '../model/tilemap';
 import { pluginsOf } from './projectPlugins';
@@ -55,6 +58,7 @@ import {
   setFrameSlice,
 } from '../model/texture';
 import { pointsOf } from '../model/polygon';
+import { SHAPE_FILL_DEFAULT } from '../model/vectorart';
 import { hasParentCycle } from '../model/walk';
 import {
   DECLARED_PORT_KINDS,
@@ -191,6 +195,8 @@ export function deserializeProject(raw: unknown, fallbackId = ''): Project {
       assets.push({ id, type, name, props, pictures });
     } else if (type === 'tilemap') {
       assets.push({ id, type, name, props, layers: normalizeLayers(a.layers) });
+    } else if (type === 'vectorart') {
+      assets.push({ id, type, name, props, shapes: normalizeShapes(a.shapes) });
     } else if (type === 'animation') {
       // A root or row aiming at something gone is kept: it reads as missing and keeps its keys.
       const root = typeof a.root === 'string' ? a.root : '';
@@ -558,6 +564,77 @@ function normalizeLayers(raw: unknown): TilemapLayer[] {
   return layers;
 }
 
+/**
+ * The shapes of a vector art asset (#129). A point whose coordinates are no numbers falls away, as
+ * a frame's outline corners do, and so does a handle that is not a pair of numbers – the point then
+ * reads as a corner, which is what a shape drawn without handles says anyway. A shape left without
+ * any drawable ring is kept: it is an outline someone is still drawing, and the rasteriser passes
+ * over it. A doubled shape id is dropped as a doubled layer is.
+ */
+function normalizeShapes(raw: unknown): VectorShape[] {
+  const shapes: VectorShape[] = [];
+  for (const item of Array.isArray(raw) ? raw : []) {
+    const s = asRecord(item);
+    if (typeof s.id !== 'string' || !s.id || shapes.some((o) => o.id === s.id)) continue;
+    const rings: VectorRing[] = [];
+    for (const r of Array.isArray(s.rings) ? s.rings : []) {
+      const ring = asRecord(r);
+      const points: VectorPoint[] = [];
+      for (const p of Array.isArray(ring.points) ? ring.points : []) {
+        const point = asRecord(p);
+        const x = asFinite(point.x);
+        const y = asFinite(point.y);
+        if (x === null || y === null) continue;
+        const kept: VectorPoint = { x, y };
+        for (const side of ['in', 'out'] as const) {
+          const handle = normalizeHandle(point[side]);
+          if (handle) kept[side] = handle;
+        }
+        points.push(kept);
+      }
+      // Closed is what a shape usually is, and what every ring written by the editor says.
+      rings.push({ points, closed: ring.closed !== false });
+    }
+    const shape: VectorShape = {
+      id: s.id,
+      name: typeof s.name === 'string' ? s.name : 'Shape',
+      rings,
+      fill: normalizeColor(s.fill, SHAPE_FILL_DEFAULT),
+      opacity: normalizeOpacity(s.opacity),
+    };
+    const stroke = asRecord(s.stroke);
+    const width = asFinite(stroke.width);
+    if (width !== null && width > 0) shape.stroke = { color: normalizeColor(stroke.color, 0), width };
+    shapes.push(shape);
+  }
+  return shapes;
+}
+
+/**
+ * A number as written, or null – unlike `toNumber`, which reads anything unusable as 0. A coordinate
+ * of 0 is a place on the canvas, so "broken" and "the left edge" must not come out the same.
+ */
+function asFinite(value: unknown): number | null {
+  return typeof value === 'number' && Number.isFinite(value) ? value : null;
+}
+
+function normalizeHandle(raw: unknown): Vec2 | undefined {
+  const handle = asRecord(raw);
+  const x = asFinite(handle.x);
+  const y = asFinite(handle.y);
+  return x !== null && y !== null ? { x, y } : undefined;
+}
+
+function normalizeColor(raw: unknown, fallback: number): number {
+  const value = asFinite(raw);
+  return value === null ? fallback : Math.max(0, Math.min(0xffffff, Math.floor(value)));
+}
+
+function normalizeOpacity(raw: unknown): number {
+  const value = asFinite(raw);
+  return value === null ? 1 : Math.max(0, Math.min(1, value));
+}
+
 function normalizeBag(raw: unknown, schema: PropertySchema, sparse: boolean): PropertyBag {
   const r = asRecord(raw);
   const bag: PropertyBag = {};