@snowcone-app/canvas 0.28.0 → 0.30.0

package/dist/embed.mjs

@@ -1,54 +1,60 @@
-import { C as a, a as r, b as t, u as i, d as o, f as n, g as d } from "./UnifiedFontService-BJzoqfBF.js";
-import { E as l, R as u, a as E, b as c, S as p, c as g, d as S, f, p as x, e as T, g as v, h as C, v as P } from "./embed-L3oRIgsj.js";
-import { g as B, i as h, u as y } from "./editorErrors-8uDRMhow.js";
-import { D as k, d as D, a as I, i as F } from "./design-builder-bquxIHct.js";
-import { D as w, T as M, h as A, i as G, j as K, k as _, l as j, m as z, r as N, u as Y, a as q, b as H, c as J, d as O, e as Q, f as U, w as V } from "./template-fields-ai7vnW8g.js";
-import { s as X } from "./CanvasStateV1-kL09wsAn.js";
+import { C as a, a as t, b as r, u as o, d as i, f as n, g as m } from "./UnifiedFontService-Co9tQ59z.js";
+import { E as u, R as l, a as E, b as c, S as p, c as g, d as f, f as x, p as S, e as C, g as T, h as v, v as y } from "./embed-Csez1hui.js";
+import { E as P, y as b } from "./FontAnalyzer-DKG5JK0x.js";
+import { D as R, d as h, a as k, i as D } from "./design-builder-JYLO_Hyi.js";
+import { u as L } from "./editorErrors-WzaNxU1Y.js";
+import { D as M, T as A, h as G, i as K, j as _, k as j, l as z, m as N, r as Y, u as q, a as H, b as J, c as O, d as Q, e as U, f as V, w as W } from "./template-fields-DYPW7bVU.js";
+import { c as Z, e as $, l as ee, r as se } from "./ExportManager-DUdis6se.js";
+import { s as te } from "./CanvasStateV1-BDSyYo4A.js";
 export {
   a as CanvasServicesProvider,
-  k as DesignBuilder,
-  w as DesignStateStore,
-  l as Editor,
-  B as EditorError,
-  u as RealtimeCanvas,
+  R as DesignBuilder,
+  M as DesignStateStore,
+  u as Editor,
+  P as EditorError,
+  l as RealtimeCanvas,
   E as RealtimeEmbed,
   c as RealtimeMockup,
   p as SnowconeEditor,
-  M as TEMPLATE_FIELDS_KEY,
+  A as TEMPLATE_FIELDS_KEY,
   g as auditEditor,
-  S as collectEmbedIssues,
-  r as createProxyGenerate,
-  t as createProxyImageSearch,
-  D as design,
-  A as editorElementKind,
-  f as formatBuyPrice,
-  I as isColorToken,
-  h as isEditorError,
-  G as isGroupElement,
-  K as isImageElement,
-  F as isLayerToken,
-  _ as isPathElement,
-  j as isShapeElement,
-  z as isTextElement,
-  x as productToRenderConfig,
-  N as readTemplateFields,
-  X as serializeState,
-  i as useArtboards,
-  o as useCanvasServices,
-  Y as useColorBinding,
-  q as useCommands,
-  y as useEditor,
-  H as useElementByName,
+  f as collectEmbedIssues,
+  t as createProxyGenerate,
+  r as createProxyImageSearch,
+  Z as customFontRegistry,
+  h as design,
+  G as editorElementKind,
+  $ as ensureCustomFontsLoaded,
+  x as formatBuyPrice,
+  k as isColorToken,
+  b as isEditorError,
+  K as isGroupElement,
+  _ as isImageElement,
+  D as isLayerToken,
+  j as isPathElement,
+  z as isShapeElement,
+  N as isTextElement,
+  ee as loadCustomFont,
+  S as productToRenderConfig,
+  Y as readTemplateFields,
+  se as registerCustomFonts,
+  te as serializeState,
+  o as useArtboards,
+  i as useCanvasServices,
+  q as useColorBinding,
+  H as useCommands,
+  L as useEditor,
+  J as useElementByName,
   n as useExport,
-  J as useFontBinding,
-  O as useImageBinding,
-  d as useLayers,
-  T as usePlacements,
-  v as useProductSelection,
-  C as useRealtimeMockups,
-  Q as useSelectedElement,
-  U as useTextBinding,
-  P as validateEmbed,
-  V as withTemplateFields
+  O as useFontBinding,
+  Q as useImageBinding,
+  m as useLayers,
+  C as usePlacements,
+  T as useProductSelection,
+  v as useRealtimeMockups,
+  U as useSelectedElement,
+  V as useTextBinding,
+  y as validateEmbed,
+  W as withTemplateFields
 };
 //# sourceMappingURL=embed.mjs.map

package/dist/embed.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"embed.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
+{"version":3,"file":"embed.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/dist/errors/editorError.d.ts

@@ -88,6 +88,14 @@ export type EditorErrorCode =
 /** `auditEditor()` called with no `<Editor.Root>` mounted — the imperative
  *  audit reads the most-recent mounted Root's registry (#10). */
  | 'E_AUDIT_NO_ROOT'
+/** A custom (brand) font failed to load from its hosted URL — the binary
+ *  fetch failed (CORS, 404, network) or FontFace rejected the bytes.
+ *  Custom fonts NEVER fall back silently to a system face: the design
+ *  would render with a different typeface/metrics everywhere it's
+ *  consumed. `data` carries `family`, `url`, `weight`, `style`. Fix the
+ *  URL (must serve the font file over a plain cross-origin GET) and
+ *  re-register. Dev AND prod. */
+ | 'E_FONT_LOAD_FAILED'
 /** `computeDistribute()` called with fewer than 3 movable elements —
  *  distributing needs something between the two ends. Gate the action on
  *  `useAlignDistribute().canDistribute` instead of calling below the

package/dist/{guards-BlbhM5MX.js → guards-BSoX73yg.js}

@@ -1,4 +1,4 @@
-import { G as n, I as t, P as a, S as s, T as i } from "./FontAnalyzer-PE6nysqE.js";
+import { G as n, I as t, P as a, S as s, T as i } from "./FontAnalyzer-DKG5JK0x.js";
 function r(e) {
   return e instanceof i;
 }
@@ -21,4 +21,4 @@ export {
   r as d,
   u as i
 };
-//# sourceMappingURL=guards-BlbhM5MX.js.map
+//# sourceMappingURL=guards-BSoX73yg.js.map

package/dist/{guards-BlbhM5MX.js.map → guards-BSoX73yg.js.map}

@@ -1 +1 @@
-{"version":3,"file":"guards-BlbhM5MX.js","sources":["../src/types/guards.ts"],"sourcesContent":["/**\n * Type guards for EditorElement discrimination\n *\n * These guards use instanceof checks against the concrete element classes,\n * matching the pattern established in EditorContext.tsx. They accept\n * BaseElement | EditorElement | undefined | null for maximum flexibility\n * at call sites.\n */\n\nimport { BaseElement } from '../core/BaseElement.js';\nimport { TextElement } from '../core/TextElement.js';\nimport { ImageElement } from '../core/ImageElement.js';\nimport { GroupElement } from '../core/GroupElement.js';\nimport { ShapeElement } from '../core/ShapeElement.js';\nimport { PathElement } from '../core/PathElement.js';\n\ntype Narrowable = BaseElement | TextElement | ImageElement | GroupElement | ShapeElement | PathElement | undefined | null;\n\n/**\n * Type guard: checks if an element is a TextElement (or any text-based transform subclass).\n *\n * TextElement is the base class for all text transforms (custom, circle, arch, wave, etc.),\n * so this returns true for any text-based element regardless of its specific transformType.\n */\nexport function isTextElement(element: Narrowable): element is TextElement {\n  return element instanceof TextElement;\n}\n\n/**\n * Type guard: checks if an element is an ImageElement.\n */\nexport function isImageElement(element: Narrowable): element is ImageElement {\n  return element instanceof ImageElement;\n}\n\n/**\n * Type guard: checks if an element is a GroupElement.\n */\nexport function isGroupElement(element: Narrowable): element is GroupElement {\n  return element instanceof GroupElement;\n}\n\n/**\n * Type guard: checks if an element is a ShapeElement.\n */\nexport function isShapeElement(element: Narrowable): element is ShapeElement {\n  return element instanceof ShapeElement;\n}\n\n/**\n * Type guard: checks if an element is a PathElement.\n */\nexport function isPathElement(element: Narrowable): element is PathElement {\n  return element instanceof PathElement;\n}\n"],"names":["isTextElement","element","TextElement","isImageElement","ImageElement","isGroupElement","GroupElement","isShapeElement","ShapeElement","isPathElement","PathElement"],"mappings":";AAwBO,SAASA,EAAcC,GAA6C;AACzE,SAAOA,aAAmBC;AAC5B;AAKO,SAASC,EAAeF,GAA8C;AAC3E,SAAOA,aAAmBG;AAC5B;AAKO,SAASC,EAAeJ,GAA8C;AAC3E,SAAOA,aAAmBK;AAC5B;AAKO,SAASC,EAAeN,GAA8C;AAC3E,SAAOA,aAAmBO;AAC5B;AAKO,SAASC,EAAcR,GAA6C;AACzE,SAAOA,aAAmBS;AAC5B;"}
+{"version":3,"file":"guards-BSoX73yg.js","sources":["../src/types/guards.ts"],"sourcesContent":["/**\n * Type guards for EditorElement discrimination\n *\n * These guards use instanceof checks against the concrete element classes,\n * matching the pattern established in EditorContext.tsx. They accept\n * BaseElement | EditorElement | undefined | null for maximum flexibility\n * at call sites.\n */\n\nimport { BaseElement } from '../core/BaseElement.js';\nimport { TextElement } from '../core/TextElement.js';\nimport { ImageElement } from '../core/ImageElement.js';\nimport { GroupElement } from '../core/GroupElement.js';\nimport { ShapeElement } from '../core/ShapeElement.js';\nimport { PathElement } from '../core/PathElement.js';\n\ntype Narrowable = BaseElement | TextElement | ImageElement | GroupElement | ShapeElement | PathElement | undefined | null;\n\n/**\n * Type guard: checks if an element is a TextElement (or any text-based transform subclass).\n *\n * TextElement is the base class for all text transforms (custom, circle, arch, wave, etc.),\n * so this returns true for any text-based element regardless of its specific transformType.\n */\nexport function isTextElement(element: Narrowable): element is TextElement {\n  return element instanceof TextElement;\n}\n\n/**\n * Type guard: checks if an element is an ImageElement.\n */\nexport function isImageElement(element: Narrowable): element is ImageElement {\n  return element instanceof ImageElement;\n}\n\n/**\n * Type guard: checks if an element is a GroupElement.\n */\nexport function isGroupElement(element: Narrowable): element is GroupElement {\n  return element instanceof GroupElement;\n}\n\n/**\n * Type guard: checks if an element is a ShapeElement.\n */\nexport function isShapeElement(element: Narrowable): element is ShapeElement {\n  return element instanceof ShapeElement;\n}\n\n/**\n * Type guard: checks if an element is a PathElement.\n */\nexport function isPathElement(element: Narrowable): element is PathElement {\n  return element instanceof PathElement;\n}\n"],"names":["isTextElement","element","TextElement","isImageElement","ImageElement","isGroupElement","GroupElement","isShapeElement","ShapeElement","isPathElement","PathElement"],"mappings":";AAwBO,SAASA,EAAcC,GAA6C;AACzE,SAAOA,aAAmBC;AAC5B;AAKO,SAASC,EAAeF,GAA8C;AAC3E,SAAOA,aAAmBG;AAC5B;AAKO,SAASC,EAAeJ,GAA8C;AAC3E,SAAOA,aAAmBK;AAC5B;AAKO,SAASC,EAAeN,GAA8C;AAC3E,SAAOA,aAAmBO;AAC5B;AAKO,SAASC,EAAcR,GAA6C;AACzE,SAAOA,aAAmBS;AAC5B;"}

package/dist/hooks/useKeyboardShortcuts.d.ts

@@ -1,7 +1,20 @@
+import { useEditor } from '../contexts/EditorContext.js';
 /**
- * useKeyboardShortcuts - Hook for handling keyboard shortcuts in the editor
- * Provides copy/paste and other keyboard shortcuts
+ * Select every element on the ACTIVE artboard (multi-selection).
+ *
+ * Shared implementation behind Cmd/Ctrl+A AND the canvas context menu's
+ * "Select All" entry — one definition so the two surfaces can't drift.
+ * Locked elements are included — locking gates manipulation, not selection
+ * (gotcha #20); hidden elements are skipped to mirror marquee selection.
+ * Same state path as marquee selection: the multi-selection array is the
+ * source of truth; single selection is cleared alongside it.
  */
+export declare function selectAllOnActiveArtboard(opts: {
+    elements: ReturnType<typeof useEditor>['elements'];
+    artboardManager: ReturnType<typeof useEditor>['artboardManager'];
+    handleSelectionChange: (id: string | null) => void;
+    setMultiSelection: (ids: string[]) => void;
+}): void;
 /**
  * Hook that sets up keyboard shortcuts for the editor
  * Handles copy/paste, delete, undo/redo, and other shortcuts

package/dist/hooks/useLayers.d.ts

@@ -40,6 +40,8 @@ export interface UseLayersReturn {
     reorderWithinGroup: (draggedId: string, targetId: string, position: 'before' | 'after', groupId: string) => void;
     moveLayerForward: (id: string) => void;
     moveLayerBackward: (id: string) => void;
+    bringToFront: (id: string) => void;
+    sendToBack: (id: string) => void;
     groupLayers: (ids: string[]) => void;
     ungroupLayer: (id: string) => void;
     addToGroup: (elementId: string, groupId: string) => void;

package/dist/hooks/useTextToolbar.d.ts

@@ -12,8 +12,16 @@ export interface UseTextToolbarReturn {
     italic: boolean;
     underline: boolean;
     letterCase: string;
+    /** Letter-spacing in px per character (element-level default; 0 = none). */
+    letterSpacing: number;
+    /** Line-height multiplier (1.2 = the layout default). */
+    lineHeight: number;
     handleFontSizeChange: (size: number) => void;
     handleFontSizeIncrement: (delta: number) => void;
+    /** Per-character aware (applies to the selection while editing text). */
+    handleLetterSpacingChange: (spacing: number) => void;
+    /** Element-level only (line layout is an element concern, not a span one). */
+    handleLineHeightChange: (lineHeight: number) => void;
     handleFontFamilyChange: (family: string) => void;
     handleFontColorChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
     handleBoldToggle: () => void;

package/dist/index.mjs

@@ -1,64 +1,69 @@
-import { e as u } from "./UnifiedFontService-BJzoqfBF.js";
-import { C as l, c as x, a as I, b as v, u as A, d as T, f as g, g as B } from "./UnifiedFontService-BJzoqfBF.js";
-import { E as _, S as y, S as L, u as O, a as M } from "./SnowconeCanvas-CQiFVR0X.js";
-import { u as d, a as m } from "./editorErrors-8uDRMhow.js";
-import { T as z, r as w, u as F, a as D, b as K, c as N, d as V, e as b, f as h, w as U } from "./template-fields-ai7vnW8g.js";
-import { A as Z, C as G, E as H, M as j, P as k, r as q, v as J } from "./validation-B8kIYutI.js";
-import { C as W, D as X, d as $, s as ee } from "./design-builder-bquxIHct.js";
-import { c as se, e as te } from "./compose-DtQL_oit.js";
-import { d as oe, m as ie, s as ne, v as ue } from "./CanvasStateV1-kL09wsAn.js";
-function C() {
-  const { isCanvasReady: e } = d();
+import { e as u } from "./UnifiedFontService-Co9tQ59z.js";
+import { C as p, c as x, a as I, b as v, u as A, d as g, f as T, g as B } from "./UnifiedFontService-Co9tQ59z.js";
+import { E as y, S as F, S as L, u as _, a as O } from "./SnowconeCanvas-BWPBngvI.js";
+import { u as m, a as d } from "./editorErrors-WzaNxU1Y.js";
+import { T as M, r as z, u as w, a as D, b as K, c as N, d as V, e as b, f as h, w as U } from "./template-fields-DYPW7bVU.js";
+import { A as Z, C as G, E as H, M as j, P as k, r as q, v as J } from "./validation-BGEl9rrE.js";
+import { c as W, e as X, l as $, r as ee } from "./ExportManager-DUdis6se.js";
+import { C as ae, D as te, d as oe, s as re } from "./design-builder-JYLO_Hyi.js";
+import { c as ie, e as ue } from "./compose-DtQL_oit.js";
+import { d as de, m as Ce, s as Se, v as Ee } from "./CanvasStateV1-BDSyYo4A.js";
+function E() {
+  const { isCanvasReady: e } = m();
   return e;
 }
-function f() {
-  const { zoom: e, panOffset: a, zoomIn: s, zoomOut: t, zoomToFit: r, resetView: o, setZoom: i, setPanOffset: n } = m();
-  return { zoom: e, panOffset: a, zoomIn: s, zoomOut: t, zoomToFit: r, resetView: o, setZoom: i, setPanOffset: n };
+function c() {
+  const { zoom: e, panOffset: s, zoomIn: a, zoomOut: t, zoomToFit: o, resetView: r, setZoom: n, setPanOffset: i } = d();
+  return { zoom: e, panOffset: s, zoomIn: a, zoomOut: t, zoomToFit: o, resetView: r, setZoom: n, setPanOffset: i };
 }
 u();
 export {
   Z as ALL_CAPABILITIES,
-  W as CANVAS_STATE_SCHEMA_VERSION,
+  ae as CANVAS_STATE_SCHEMA_VERSION,
   G as COMPACT_CUSTOMIZER,
-  l as CanvasServicesProvider,
-  X as DesignBuilder,
+  p as CanvasServicesProvider,
+  te as DesignBuilder,
   H as EMBED_ONLY,
-  _ as ErrorBoundary,
+  y as ErrorBoundary,
   j as MINIMAL_CAPABILITIES,
   k as PRO_STUDIO,
-  y as SnowconeCanvas,
-  z as TEMPLATE_FIELDS_KEY,
-  se as createKit,
+  F as SnowconeCanvas,
+  M as TEMPLATE_FIELDS_KEY,
+  ie as createKit,
   x as createProxyBgRemove,
   I as createProxyGenerate,
   v as createProxyImageSearch,
+  W as customFontRegistry,
   L as default,
-  oe as deserializeState,
-  $ as design,
-  te as extendKit,
-  ie as migrateState,
-  w as readTemplateFields,
+  de as deserializeState,
+  oe as design,
+  X as ensureCustomFontsLoaded,
+  ue as extendKit,
+  $ as loadCustomFont,
+  Ce as migrateState,
+  z as readTemplateFields,
+  ee as registerCustomFonts,
   q as resolveKit,
-  ne as serializeState,
-  ee as serializeStateForServer,
+  Se as serializeState,
+  re as serializeStateForServer,
   A as useArtboards,
-  O as useAutoExport,
-  C as useCanvasReady,
-  T as useCanvasServices,
-  F as useColorBinding,
+  _ as useAutoExport,
+  E as useCanvasReady,
+  g as useCanvasServices,
+  w as useColorBinding,
   D as useCommands,
-  M as useContentReady,
-  d as useEditor,
+  O as useContentReady,
+  m as useEditor,
   K as useElementByName,
-  g as useExport,
+  T as useExport,
   N as useFontBinding,
   V as useImageBinding,
   B as useLayers,
   b as useSelectedElement,
   h as useTextBinding,
-  f as useViewport,
+  c as useViewport,
   J as validateKit,
-  ue as validateState,
+  Ee as validateState,
   U as withTemplateFields
 };
 //# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../src/hooks/useCanvasReady.ts","../src/hooks/useViewport.ts"],"sourcesContent":["import { useEditor } from '../contexts/EditorContext.js';\n\n/**\n * Returns whether the canvas is fully initialized and ready for operations.\n *\n * The canvas is not ready until the underlying `<canvas>` element is mounted\n * and the editor has completed its initial setup. Use this to gate operations\n * like export or programmatic element manipulation that require a live canvas.\n *\n * @returns `true` when the canvas is mounted and ready, `false` otherwise.\n *\n * @example\n * ```tsx\n * function ExportButton() {\n *   const ready = useCanvasReady();\n *   return (\n *     <button disabled={!ready} onClick={handleExport}>\n *       Export PNG\n *     </button>\n *   );\n * }\n * ```\n */\nexport function useCanvasReady(): boolean {\n  const { isCanvasReady } = useEditor();\n  return isCanvasReady;\n}\n","import React from 'react';\nimport { useViewportContext } from '../contexts/ViewportContext.js';\nimport type { PanOffset } from '../contexts/ViewportContext.js';\n\n/**\n * Return type for {@link useViewport}.\n */\nexport interface UseViewportReturn {\n  /** Current zoom level (1.0 = 100%) */\n  zoom: number;\n  /** Current pan offset in world coordinates */\n  panOffset: PanOffset;\n  /** Increment zoom by one step */\n  zoomIn: () => void;\n  /** Decrement zoom by one step */\n  zoomOut: () => void;\n  /** Zoom to fit the active artboard in the viewport */\n  zoomToFit: () => void;\n  /** Reset zoom to 100% and pan offset to origin */\n  resetView: () => void;\n  /** Set zoom to an exact value */\n  setZoom: React.Dispatch<React.SetStateAction<number>>;\n  /** Set pan offset to an exact value */\n  setPanOffset: React.Dispatch<React.SetStateAction<PanOffset>>;\n}\n\n/**\n * Returns viewport state (zoom, pan) and control functions.\n *\n * This hook now reads directly from ViewportContext (instead of the full\n * EditorContext), so components using it will only re-render when viewport\n * state changes -- not when elements, selection, or other state changes.\n *\n * @example\n * ```tsx\n * function ZoomBar() {\n *   const { zoom, zoomIn, zoomOut, zoomToFit } = useViewport();\n *   return (\n *     <div>\n *       <button onClick={zoomOut}>-</button>\n *       <span>{Math.round(zoom * 100)}%</span>\n *       <button onClick={zoomIn}>+</button>\n *       <button onClick={zoomToFit}>Fit</button>\n *     </div>\n *   );\n * }\n * ```\n */\nexport function useViewport(): UseViewportReturn {\n  const { zoom, panOffset, zoomIn, zoomOut, zoomToFit, resetView, setZoom, setPanOffset } = useViewportContext();\n  return { zoom, panOffset, zoomIn, zoomOut, zoomToFit, resetView, setZoom, setPanOffset };\n}\n"],"names":["useCanvasReady","isCanvasReady","useEditor","useViewport","zoom","panOffset","zoomIn","zoomOut","zoomToFit","resetView","setZoom","setPanOffset","useViewportContext"],"mappings":";;;;;;;;;AAuBO,SAASA,IAA0B;AACxC,QAAM,EAAE,eAAAC,EAAA,IAAkBC,EAAA;AAC1B,SAAOD;AACT;ACsBO,SAASE,IAAiC;AAC/C,QAAM,EAAE,MAAAC,GAAM,WAAAC,GAAW,QAAAC,GAAQ,SAAAC,GAAS,WAAAC,GAAW,WAAAC,GAAW,SAAAC,GAAS,cAAAC,EAAA,IAAiBC,EAAA;AAC1F,SAAO,EAAE,MAAAR,GAAM,WAAAC,GAAW,QAAAC,GAAQ,SAAAC,GAAS,WAAAC,GAAW,WAAAC,GAAW,SAAAC,GAAS,cAAAC,EAAA;AAC5E;;"}
+{"version":3,"file":"index.mjs","sources":["../src/hooks/useCanvasReady.ts","../src/hooks/useViewport.ts"],"sourcesContent":["import { useEditor } from '../contexts/EditorContext.js';\n\n/**\n * Returns whether the canvas is fully initialized and ready for operations.\n *\n * The canvas is not ready until the underlying `<canvas>` element is mounted\n * and the editor has completed its initial setup. Use this to gate operations\n * like export or programmatic element manipulation that require a live canvas.\n *\n * @returns `true` when the canvas is mounted and ready, `false` otherwise.\n *\n * @example\n * ```tsx\n * function ExportButton() {\n *   const ready = useCanvasReady();\n *   return (\n *     <button disabled={!ready} onClick={handleExport}>\n *       Export PNG\n *     </button>\n *   );\n * }\n * ```\n */\nexport function useCanvasReady(): boolean {\n  const { isCanvasReady } = useEditor();\n  return isCanvasReady;\n}\n","import React from 'react';\nimport { useViewportContext } from '../contexts/ViewportContext.js';\nimport type { PanOffset } from '../contexts/ViewportContext.js';\n\n/**\n * Return type for {@link useViewport}.\n */\nexport interface UseViewportReturn {\n  /** Current zoom level (1.0 = 100%) */\n  zoom: number;\n  /** Current pan offset in world coordinates */\n  panOffset: PanOffset;\n  /** Increment zoom by one step */\n  zoomIn: () => void;\n  /** Decrement zoom by one step */\n  zoomOut: () => void;\n  /** Zoom to fit the active artboard in the viewport */\n  zoomToFit: () => void;\n  /** Reset zoom to 100% and pan offset to origin */\n  resetView: () => void;\n  /** Set zoom to an exact value */\n  setZoom: React.Dispatch<React.SetStateAction<number>>;\n  /** Set pan offset to an exact value */\n  setPanOffset: React.Dispatch<React.SetStateAction<PanOffset>>;\n}\n\n/**\n * Returns viewport state (zoom, pan) and control functions.\n *\n * This hook now reads directly from ViewportContext (instead of the full\n * EditorContext), so components using it will only re-render when viewport\n * state changes -- not when elements, selection, or other state changes.\n *\n * @example\n * ```tsx\n * function ZoomBar() {\n *   const { zoom, zoomIn, zoomOut, zoomToFit } = useViewport();\n *   return (\n *     <div>\n *       <button onClick={zoomOut}>-</button>\n *       <span>{Math.round(zoom * 100)}%</span>\n *       <button onClick={zoomIn}>+</button>\n *       <button onClick={zoomToFit}>Fit</button>\n *     </div>\n *   );\n * }\n * ```\n */\nexport function useViewport(): UseViewportReturn {\n  const { zoom, panOffset, zoomIn, zoomOut, zoomToFit, resetView, setZoom, setPanOffset } = useViewportContext();\n  return { zoom, panOffset, zoomIn, zoomOut, zoomToFit, resetView, setZoom, setPanOffset };\n}\n"],"names":["useCanvasReady","isCanvasReady","useEditor","useViewport","zoom","panOffset","zoomIn","zoomOut","zoomToFit","resetView","setZoom","setPanOffset","useViewportContext"],"mappings":";;;;;;;;;;AAuBO,SAASA,IAA0B;AACxC,QAAM,EAAE,eAAAC,EAAA,IAAkBC,EAAA;AAC1B,SAAOD;AACT;ACsBO,SAASE,IAAiC;AAC/C,QAAM,EAAE,MAAAC,GAAM,WAAAC,GAAW,QAAAC,GAAQ,SAAAC,GAAS,WAAAC,GAAW,WAAAC,GAAW,SAAAC,GAAS,cAAAC,EAAA,IAAiBC,EAAA;AAC1F,SAAO,EAAE,MAAAR,GAAM,WAAAC,GAAW,QAAAC,GAAQ,SAAAC,GAAS,WAAAC,GAAW,WAAAC,GAAW,SAAAC,GAAS,cAAAC,EAAA;AAC5E;;"}

package/dist/internals.mjs

@@ -1,8 +1,8 @@
-import { A as w, a as b, C as I, I as R, R as W, S as A, T as E } from "./CanvasRenderer-B_3GISlW.js";
-import { r as p } from "./ExportManager-J2xK86uq.js";
-import { D as O, E as F, I as L, W as X, a as z, b as K, c as Y, d as B, e as _, f as J, h as N, i as V, j, k as q, l as Q, m as U, n as Z, o as $, p as m, q as G, s as x, t as D, u as rr, v as or, w as sr, x as ir, y as er, z as ar, A as nr, B as tr, C as hr } from "./ExportManager-J2xK86uq.js";
-import { D as cr, E as fr, H as pr, J as gr, K as lr, L as ur, M as Tr, N as kr, O as Mr, Q as yr, W as Cr, V as vr, X as Sr, Y as Pr, c as wr, Z as br, _ as Ir, $ as Rr, a0 as Wr, a1 as Ar } from "./FontAnalyzer-PE6nysqE.js";
-import { A as Hr, e as Or, C as Fr, S as Lr } from "./CanvasStateV1-kL09wsAn.js";
+import { A as w, a as b, C as I, I as R, R as W, S as A, T as E } from "./CanvasRenderer-BEf0hXeF.js";
+import { a as p } from "./ExportManager-DUdis6se.js";
+import { D as O, E as F, I as L, W as X, b as z, d as K, f as Y, h as B, i as J, j as _, k as N, m as V, n as j, o as q, p as G, q as Q, s as U, t as Z, u as $, v as m, w as x, x as D, y as rr, z as or, A as sr, B as ir, C as ar, F as er, G as nr, H as tr, J as hr } from "./ExportManager-DUdis6se.js";
+import { J as cr, K as fr, L as pr, M as gr, N as lr, O as ur, Q as Tr, V as kr, W as Mr, X as yr, Y as Cr, Z as vr, _ as Sr, $ as Pr, c as wr, a0 as br, a1 as Ir, a2 as Rr, a3 as Wr, a4 as Ar } from "./FontAnalyzer-DKG5JK0x.js";
+import { A as Hr, e as Or, C as Fr, S as Lr } from "./CanvasStateV1-BDSyYo4A.js";
 function y(r, o) {
   return !r.needsCropPixelConversion || r.cropWidth === void 0 ? r : {
     ...r,
@@ -14,10 +14,10 @@ function y(r, o) {
   };
 }
 function C(r, o, c) {
-  var a, n;
+  var e, n;
   r.save(), r.translate(o.x, o.y), o.rotation && r.rotate(-o.rotation * Math.PI / 180);
-  let e = 1, h = 1;
-  if (o.flipHorizontal && (e = -1), o.flipVertical && (h = -1), (e !== 1 || h !== 1) && r.scale(e, h), o.opacity !== void 0 && o.opacity !== 1 && (r.globalAlpha = o.opacity), o.borderRadius && o.borderRadius > 0) {
+  let a = 1, h = 1;
+  if (o.flipHorizontal && (a = -1), o.flipVertical && (h = -1), (a !== 1 || h !== 1) && r.scale(a, h), o.opacity !== void 0 && o.opacity !== 1 && (r.globalAlpha = o.opacity), o.borderRadius && o.borderRadius > 0) {
     const i = Math.min(
       o.borderRadius / 100 * Math.min(o.width, o.height),
       o.width / 2,
@@ -37,7 +37,7 @@ function C(r, o, c) {
     -o.height / 2,
     o.width,
     o.height
-  ) : r.drawImage(c, -o.width / 2, -o.height / 2, o.width, o.height), r.restore(), (a = o.stroke) != null && a.enabled) {
+  ) : r.drawImage(c, -o.width / 2, -o.height / 2, o.width, o.height), r.restore(), (e = o.stroke) != null && e.enabled) {
     const i = ((n = o.knockoutParts) == null ? void 0 : n.stroke) === !0, s = {
       x: o.x,
       y: o.y,
@@ -79,13 +79,13 @@ function T(r, o) {
   return c.width = r, c.height = o, c;
 }
 function v(r, o) {
-  var a;
-  const c = o.opacity ?? 1, e = !!((a = o.stroke) != null && a.enabled);
-  c < 1 && e ? k(r, o, c) : g(r, o, c);
+  var e;
+  const c = o.opacity ?? 1, a = !!((e = o.stroke) != null && e.enabled);
+  c < 1 && a ? k(r, o, c) : g(r, o, c);
 }
 function k(r, o, c) {
   var f;
-  const e = o.transformData, a = (((f = o.stroke) == null ? void 0 : f.width) || 2) + 2, n = Math.ceil(e.width + a * 2), i = Math.ceil(e.height + a * 2), s = T(n, i), t = s.getContext("2d");
+  const a = o.transformData, e = (((f = o.stroke) == null ? void 0 : f.width) || 2) + 2, n = Math.ceil(a.width + e * 2), i = Math.ceil(a.height + e * 2), s = T(n, i), t = s.getContext("2d");
   if (!t) {
     g(r, o, c);
     return;
@@ -98,65 +98,65 @@ function k(r, o, c) {
   g(t, d, 1), r.save(), r.translate(o.x, o.y), o.rotation && r.rotate(-o.rotation * Math.PI / 180), r.globalAlpha = c, r.drawImage(s, -n / 2, -i / 2), r.restore();
 }
 function g(r, o, c) {
-  var a;
-  const e = o.transformData, h = e.fillOpacity ?? 1;
-  if (r.save(), r.translate(o.x, o.y), o.rotation && r.rotate(-o.rotation * Math.PI / 180), r.globalAlpha = c * h, r.fillStyle = e.fillColor || "#3b82f6", r.beginPath(), u(r, e), r.fill(), r.restore(), (a = o.stroke) != null && a.enabled) {
+  var e;
+  const a = o.transformData, h = a.fillOpacity ?? 1;
+  if (r.save(), r.translate(o.x, o.y), o.rotation && r.rotate(-o.rotation * Math.PI / 180), r.globalAlpha = c * h, r.fillStyle = a.fillColor || "#3b82f6", r.beginPath(), u(r, a), r.fill(), r.restore(), (e = o.stroke) != null && e.enabled) {
     r.save(), r.translate(o.x, o.y), o.rotation && r.rotate(-o.rotation * Math.PI / 180);
     const n = o.stroke;
-    r.globalAlpha = c * (n.opacity ?? 1), r.strokeStyle = n.color || "#000000", r.lineWidth = n.width || 2, r.lineCap = n.lineCap || "round", r.lineJoin = n.lineJoin || "round", r.beginPath(), u(r, e), r.stroke(), r.restore();
+    r.globalAlpha = c * (n.opacity ?? 1), r.strokeStyle = n.color || "#000000", r.lineWidth = n.width || 2, r.lineCap = n.lineCap || "round", r.lineJoin = n.lineJoin || "round", r.beginPath(), u(r, a), r.stroke(), r.restore();
   }
 }
 function u(r, o) {
-  const { shapeType: c, width: e, height: h } = o;
+  const { shapeType: c, width: a, height: h } = o;
   switch (c) {
     case "rectangle": {
-      const a = o.borderRadius || 0, n = -e / 2, i = -h / 2;
-      if (a > 0) {
-        const s = Math.min(a / 100 * Math.min(e, h), e / 2, h / 2);
-        r.roundRect(n, i, e, h, s);
+      const e = o.borderRadius || 0, n = -a / 2, i = -h / 2;
+      if (e > 0) {
+        const s = Math.min(e / 100 * Math.min(a, h), a / 2, h / 2);
+        r.roundRect(n, i, a, h, s);
       } else
-        r.rect(n, i, e, h);
+        r.rect(n, i, a, h);
       break;
     }
     case "circle": {
-      const a = Math.min(e, h) / 2;
-      r.arc(0, 0, a, 0, Math.PI * 2);
+      const e = Math.min(a, h) / 2;
+      r.arc(0, 0, e, 0, Math.PI * 2);
       break;
     }
     case "ellipse": {
-      r.ellipse(0, 0, e / 2, h / 2, 0, 0, Math.PI * 2);
+      r.ellipse(0, 0, a / 2, h / 2, 0, 0, Math.PI * 2);
       break;
     }
     case "triangle": {
-      const a = e / 2, n = h / 2;
-      r.moveTo(0, -n), r.lineTo(a, n), r.lineTo(-a, n), r.closePath();
+      const e = a / 2, n = h / 2;
+      r.moveTo(0, -n), r.lineTo(e, n), r.lineTo(-e, n), r.closePath();
       break;
     }
     case "polygon": {
-      const a = o.sides || 5, n = Math.min(e, h) / 2;
-      for (let i = 0; i < a; i++) {
-        const s = i * 2 * Math.PI / a - Math.PI / 2, t = n * Math.cos(s), d = n * Math.sin(s);
+      const e = o.sides || 5, n = Math.min(a, h) / 2;
+      for (let i = 0; i < e; i++) {
+        const s = i * 2 * Math.PI / e - Math.PI / 2, t = n * Math.cos(s), d = n * Math.sin(s);
         i === 0 ? r.moveTo(t, d) : r.lineTo(t, d);
       }
       r.closePath();
       break;
     }
     case "star": {
-      const a = o.points || 5, n = Math.min(e, h) / 2, i = n * (o.innerRadius || 0.4);
-      for (let s = 0; s < a * 2; s++) {
-        const t = s * Math.PI / a - Math.PI / 2, d = s % 2 === 0 ? n : i, f = d * Math.cos(t), l = d * Math.sin(t);
+      const e = o.points || 5, n = Math.min(a, h) / 2, i = n * (o.innerRadius || 0.4);
+      for (let s = 0; s < e * 2; s++) {
+        const t = s * Math.PI / e - Math.PI / 2, d = s % 2 === 0 ? n : i, f = d * Math.cos(t), l = d * Math.sin(t);
         s === 0 ? r.moveTo(f, l) : r.lineTo(f, l);
       }
       r.closePath();
       break;
     }
     case "line": {
-      const a = e / 2, n = h / 2;
-      r.rect(-a, -n, e, h);
+      const e = a / 2, n = h / 2;
+      r.rect(-e, -n, a, h);
       break;
     }
     default:
-      r.rect(-e / 2, -h / 2, e, h);
+      r.rect(-a / 2, -h / 2, a, h);
   }
 }
 export {
@@ -193,22 +193,22 @@ export {
   Sr as calculateResizeHandles,
   Pr as calculateRotationHandlePosition,
   B as clearImageBitmapCache,
-  _ as clearMaskCache,
-  J as clearRegisteredBitmapKeys,
+  J as clearMaskCache,
+  _ as clearRegisteredBitmapKeys,
   N as createCirclePath,
   V as createImagePath,
   wr as createLogger,
   j as createRectPath,
   q as createTextPath,
-  Q as getFontMetrics,
-  U as getSharedWorkerExportManager,
+  G as getFontMetrics,
+  Q as getSharedWorkerExportManager,
   br as hitTestCircle,
   Ir as hitTestRect,
-  Z as invalidateMaskCache,
+  U as invalidateMaskCache,
   Rr as logger,
-  $ as measureTextWidth,
-  m as removeFromImageBitmapCache,
-  G as renderCustomTransform,
+  Z as measureTextWidth,
+  $ as removeFromImageBitmapCache,
+  m as renderCustomTransform,
   C as renderImageElement,
   p as renderImageStroke,
   x as renderMultilineText,
@@ -218,8 +218,8 @@ export {
   or as renderTextElement,
   sr as renderTextFillOnly,
   ir as renderTextStroke,
-  er as renderWithKnockout,
-  ar as renderWithMasks,
+  ar as renderWithKnockout,
+  er as renderWithMasks,
   y as resolveServerCrop,
   Wr as splitRichTextIntoLines,
   nr as terminateSharedWorkerExportManager,

package/dist/rendering/renderer-types.d.ts

@@ -19,6 +19,10 @@ export interface SerializedTextElement {
     italic: boolean;
     underline: boolean;
     strikethrough: boolean;
+    /** Extra advance per character in px (custom transform only; spans may override). */
+    letterSpacing?: number;
+    /** Line-height multiplier; undefined = LINE_HEIGHT_MULTIPLIER (1.2). Custom transform only. */
+    lineHeight?: number;
     transformData: AnyTransformData;
     stroke?: StrokeConfig;
     openTypeFeatures?: OpenTypeFeatures;

package/dist/rendering/rich-text-renderer.d.ts

@@ -15,4 +15,8 @@ export declare function renderRichTextFillOnly(ctx: RenderContext, richText: Ric
     underline?: boolean;
     strikethrough?: boolean;
     textAlign?: TextAlign;
+    /** Element-level letter-spacing default (px/char); spans may override. */
+    letterSpacing?: number;
+    /** Line-height multiplier; undefined = LINE_HEIGHT_MULTIPLIER (1.2). */
+    lineHeight?: number;
 }, maxWidth?: number, lockedLineCount?: number): void;

package/dist/rendering/text-renderer.d.ts

@@ -6,8 +6,9 @@ import { RenderContext, SerializedTextElement } from './renderer-types.js';
 export declare function buildFontString(fontSize: number, fontFamily: string, bold?: boolean, italic?: boolean): string;
 /**
  * Measure text width
+ * @param letterSpacing - Extra advance per character in px (default 0 — legacy width)
  */
-export declare function measureTextWidth(text: string, fontSize: number, fontFamily: string, bold?: boolean, italic?: boolean): number;
+export declare function measureTextWidth(text: string, fontSize: number, fontFamily: string, bold?: boolean, italic?: boolean, letterSpacing?: number): number;
 /**
  * Get font metrics for accurate text positioning
  */
@@ -49,6 +50,8 @@ export declare function renderTextFillOnly(ctx: RenderContext, element: {
     italic?: boolean;
     textAlign?: TextAlign;
     color: string;
+    /** Extra advance per character in px (custom transform only). */
+    letterSpacing?: number;
 }): void;
 /**
  * Word wrap text to fit within a given width