@svgsketch/core 1.8.0 → 1.9.0

package/README.md

@@ -21,19 +21,19 @@ const doc = new Document({ width: 400, height: 300 })
   .add(new Circle(200, 150, 80).fill('#2563eb'))
   .add(new Rectangle(10, 10, 100, 60).fill('#ef4444').cornerRadius(8));
 
-const svg = doc.toSVG();      // rendered SVG string
-const svgs = doc.toJSON();    // canonical `.svgs` document
+const svg = doc.toSVG(); // rendered SVG string
+const svgs = doc.toJSON(); // canonical `.svgs` document
 ```
 
 ## What it includes
 
-| Module      | Exports                                                         |
-| ----------- | --------------------------------------------------------------- |
-| `types`     | `HistorySnapshot`, `SerializedShape`, `SerializedSymbolDef`, …  |
-| `format`    | `parseDocument`, `stringifyDocument`, `migrateSnapshot`, `validateSnapshot`, `substituteVariables` |
-| `renderer`  | `renderToSvg`                                                   |
-| `sdk`       | `Document`, `Circle`, `Rectangle`, …, `Timeline`, `Track`       |
-| `codegen`   | `generateCode` — SVG / React / Vue / D3 / CSS output            |
+| Module     | Exports                                                                                            |
+| ---------- | -------------------------------------------------------------------------------------------------- |
+| `types`    | `HistorySnapshot`, `SerializedShape`, `SerializedSymbolDef`, …                                     |
+| `format`   | `parseDocument`, `stringifyDocument`, `migrateSnapshot`, `validateSnapshot`, `substituteVariables` |
+| `renderer` | `renderToSvg`                                                                                      |
+| `sdk`      | `Document`, `Circle`, `Rectangle`, …, `Timeline`, `Track`                                          |
+| `codegen`  | `generateCode` — SVG / React / Vue / D3 / CSS output                                               |
 
 ## The `.svgs` format
 
@@ -52,17 +52,39 @@ designed for:
 ```jsonc
 {
   "schemaVersion": 1,
-  "documentMetadata": { /* title, author, license, … */ },
-  "templateVariables": [ /* { name, type, defaultValue, … } */ ],
-  "viewboxes":        [ /* { id, x, y, width, height } */ ],
-  "guides":           [ /* { id, orientation, position, … } */ ],
-  "measurements":     [ /* dimensioning annotations */ ],
-  "groups":           [ /* { id, parentId, siblingIndex, … } */ ],
-  "clipMaskGroups":   [ /* <clipPath> / <mask> definitions */ ],
-  "customPatterns":   [ /* user-defined fill patterns */ ],
-  "symbols":          [ /* reusable component definitions */ ],
-  "animationTimeline": { /* tracks + keyframes */ },
-  "shapes":           [ /* array — order IS z-order */ ]
+  "documentMetadata": {
+    /* title, author, license, … */
+  },
+  "templateVariables": [
+    /* { name, type, defaultValue, … } */
+  ],
+  "viewboxes": [
+    /* { id, x, y, width, height } */
+  ],
+  "guides": [
+    /* { id, orientation, position, … } */
+  ],
+  "measurements": [
+    /* dimensioning annotations */
+  ],
+  "groups": [
+    /* { id, parentId, siblingIndex, … } */
+  ],
+  "clipMaskGroups": [
+    /* <clipPath> / <mask> definitions */
+  ],
+  "customPatterns": [
+    /* user-defined fill patterns */
+  ],
+  "symbols": [
+    /* reusable component definitions */
+  ],
+  "animationTimeline": {
+    /* tracks + keyframes */
+  },
+  "shapes": [
+    /* array — order IS z-order */
+  ],
 }
 ```
 
@@ -72,7 +94,7 @@ exhaustive schema.
 ### Ordering rules
 
 - **`shapes` preserves array order** — the position of a shape in the
-  array *is* its painter's-model z-order. Sorting would silently reorder
+  array _is_ its painter's-model z-order. Sorting would silently reorder
   rendering and destroy user intent.
 - **Id-keyed collections** (`groups`, `viewboxes`, `guides`,
   `clipMaskGroups`, `customPatterns`, `symbols`) are sorted by `id`.
@@ -122,7 +144,7 @@ Two complementary mechanisms for parameterizing documents:
 
 - **`state.bindings`** — a map from a geometry property name to a CSS
   custom-property name (without the leading `--`). When a property is
-  bound, `state[property]` holds the *resolved* value (what the renderer
+  bound, `state[property]` holds the _resolved_ value (what the renderer
   uses if no substitution runs), and `bindings` records the variable the
   editor should re-bind to on the next edit. Example:
 
@@ -132,8 +154,8 @@ Two complementary mechanisms for parameterizing documents:
     "type": "circle",
     "state": {
       "radius": 50,
-      "bindings": { "radius": "card-radius" }
-    }
+      "bindings": { "radius": "card-radius" },
+    },
   }
   ```
 
@@ -173,13 +195,7 @@ Errors block loading; warnings are surfaced but do not.
 ## Minimal example
 
 ```ts
-import {
-  Document,
-  Circle,
-  parseDocument,
-  substituteVariables,
-  renderToSvg,
-} from '@svgsketch/core';
+import { Document, Circle, parseDocument, substituteVariables, renderToSvg } from '@svgsketch/core';
 
 // Build
 const doc = new Document({ width: 200, height: 200 })

package/dist/index.d.mts

@@ -1611,6 +1611,12 @@ declare const COMMON_TRANSFORM_NODE_DEFAULTS: CommonTransformNodeProps;
 
 type SerializedShapeState = ShapeTransformState & {
     [key: string]: unknown;
+    /**
+     * Editor layer label shown in the Elements panel. This is intentionally
+     * separate from ShapeMetadata.name / SVG id so it may contain arbitrary
+     * user-facing text without changing exported element identifiers.
+     */
+    layerName?: string;
     x?: number;
     y?: number;
     width?: number;
@@ -2753,6 +2759,7 @@ type LibraryDefOfKind<K extends LibraryKind> = Extract<LibraryDef, {
  */
 
 interface CommonNodeProps extends CommonTransformNodeProps {
+    layerName: string | null;
     fillColor: string;
     borderColor: string;
     borderWidth: number;

package/dist/index.d.ts

@@ -1611,6 +1611,12 @@ declare const COMMON_TRANSFORM_NODE_DEFAULTS: CommonTransformNodeProps;
 
 type SerializedShapeState = ShapeTransformState & {
     [key: string]: unknown;
+    /**
+     * Editor layer label shown in the Elements panel. This is intentionally
+     * separate from ShapeMetadata.name / SVG id so it may contain arbitrary
+     * user-facing text without changing exported element identifiers.
+     */
+    layerName?: string;
     x?: number;
     y?: number;
     width?: number;
@@ -2753,6 +2759,7 @@ type LibraryDefOfKind<K extends LibraryKind> = Extract<LibraryDef, {
  */
 
 interface CommonNodeProps extends CommonTransformNodeProps {
+    layerName: string | null;
     fillColor: string;
     borderColor: string;
     borderWidth: number;