@snowcone-app/canvas 0.28.0 → 0.30.0

package/dist/state/CanvasStateV1.d.ts

@@ -2,6 +2,7 @@ import { z } from 'zod';
 import { ArtboardManager } from '../core/ArtboardManager.js';
 import { ArtboardElement } from '../core/ArtboardElement.js';
 import { BaseElement } from '../core/BaseElement.js';
+import { CustomFont } from '../utils/custom-fonts.js';
 declare const StrokeConfigSchema: z.ZodObject<{
     enabled: z.ZodBoolean;
     color: z.ZodString;
@@ -74,6 +75,7 @@ declare const CharacterStyleSchema: z.ZodObject<{
     italic: z.ZodOptional<z.ZodBoolean>;
     underline: z.ZodOptional<z.ZodBoolean>;
     strikethrough: z.ZodOptional<z.ZodBoolean>;
+    letterSpacing: z.ZodOptional<z.ZodNumber>;
 }, z.core.$strip>;
 declare const TextSpanSchema: z.ZodObject<{
     text: z.ZodString;
@@ -85,6 +87,7 @@ declare const TextSpanSchema: z.ZodObject<{
         italic: z.ZodOptional<z.ZodBoolean>;
         underline: z.ZodOptional<z.ZodBoolean>;
         strikethrough: z.ZodOptional<z.ZodBoolean>;
+        letterSpacing: z.ZodOptional<z.ZodNumber>;
     }, z.core.$strip>;
 }, z.core.$strip>;
 declare const RichTextSchema: z.ZodObject<{
@@ -98,6 +101,7 @@ declare const RichTextSchema: z.ZodObject<{
             italic: z.ZodOptional<z.ZodBoolean>;
             underline: z.ZodOptional<z.ZodBoolean>;
             strikethrough: z.ZodOptional<z.ZodBoolean>;
+            letterSpacing: z.ZodOptional<z.ZodNumber>;
         }, z.core.$strip>;
     }, z.core.$strip>>;
 }, z.core.$strip>;
@@ -263,6 +267,15 @@ declare const SerializedArtboardSchema: z.ZodObject<{
     }>>;
     elementIds: z.ZodArray<z.ZodString>;
 }, z.core.$strip>;
+/**
+ * A custom (brand) font dependency of the design — `{ family, url }` of a
+ * host-stored font binary plus optional weight/style descriptors. Saved
+ * designs carry these so every consumer (live editor, export worker, server
+ * render) can load the exact file. Families are stored as-is; a family that
+ * collides with a Google Fonts family deterministically SHADOWS it (see
+ * `utils/custom-fonts.ts` for the resolution contract).
+ */
+declare const CustomFontSchema: z.ZodType<CustomFont>;
 /**
  * Top-level CanvasStateV1 schema.
  *
@@ -270,6 +283,7 @@ declare const SerializedArtboardSchema: z.ZodObject<{
  * - `artboards` contains serialized artboard configs with `elementIds`.
  * - `elements` is a flat array of all elements across all artboards.
  * - `activeArtboardId` identifies which artboard is currently active.
+ * - `customFonts` (optional) lists the design's custom-font dependencies.
  */
 declare const CanvasStateV1Schema: z.ZodObject<{
     version: z.ZodLiteral<1>;
@@ -321,6 +335,7 @@ declare const CanvasStateV1Schema: z.ZodObject<{
     }, z.core.$strip>>;
     elements: z.ZodArray<z.ZodType<unknown, unknown, z.core.$ZodTypeInternals<unknown, unknown>>>;
     activeArtboardId: z.ZodString;
+    customFonts: z.ZodOptional<z.ZodArray<z.ZodType<CustomFont, unknown, z.core.$ZodTypeInternals<CustomFont, unknown>>>>;
 }, z.core.$strip>;
 /** A serialized artboard (artboard config + elementIds, no nested elements). */
 type SerializedArtboard = z.infer<typeof SerializedArtboardSchema>;
@@ -328,19 +343,35 @@ type SerializedArtboard = z.infer<typeof SerializedArtboardSchema>;
 type SerializedElement = z.infer<typeof AnyElementConfigSchema>;
 /** The full versioned state document. */
 type CanvasStateV1 = z.infer<typeof CanvasStateV1Schema>;
+/** Options for {@link serializeState}. */
+interface SerializeStateOptions {
+    /**
+     * Custom-font dependencies to embed in the document. When omitted, the
+     * default is CORRECT, not empty: the registered custom fonts whose family
+     * is actually used by the serialized elements are included automatically,
+     * so a host that uploaded a brand font cannot forget to persist it.
+     * Pass `[]` explicitly to serialize without custom fonts.
+     */
+    customFonts?: readonly CustomFont[];
+}
 /**
  * Serialize the current editor state into a `CanvasStateV1` document.
  *
  * @param artboardManager - The ArtboardManager instance (provides artboard list + active ID).
  * @param elements        - All elements currently in the editor (across all artboards).
+ * @param options         - See {@link SerializeStateOptions} (`customFonts` defaults to
+ *                          the registered custom fonts the elements actually use).
  * @returns A validated CanvasStateV1 object ready for JSON.stringify().
  */
-declare function serializeState(artboardManager: ArtboardManager, elements: BaseElement[]): CanvasStateV1;
+declare function serializeState(artboardManager: ArtboardManager, elements: BaseElement[], options?: SerializeStateOptions): CanvasStateV1;
 /** Result of deserializing a CanvasStateV1 document. */
 interface DeserializeResult {
     artboards: ArtboardElement[];
     elements: BaseElement[];
     activeArtboardId: string;
+    /** The design's custom-font dependencies (already registered with
+     *  `customFontRegistry` as a side effect of deserializing). */
+    customFonts: CustomFont[];
 }
 /**
  * Deserialize a validated `CanvasStateV1` document back into runtime objects.
@@ -381,5 +412,5 @@ declare function validateState(data: unknown): ValidationResult;
  * @throws Error if the data cannot be migrated.
  */
 declare function migrateState(data: unknown): CanvasStateV1;
-export { CanvasStateV1Schema, SerializedArtboardSchema, AnyElementConfigSchema, AnyTransformDataSchema, StrokeConfigSchema, KnockoutConfigSchema, DistressEffectSchema, MaskDefinitionSchema, CharacterStyleSchema, TextSpanSchema, RichTextSchema, ClipShapeSchema, serializeState, deserializeState, validateState, migrateState, };
-export type { CanvasStateV1, SerializedArtboard, SerializedElement, DeserializeResult, ValidationResult, };
+export { CanvasStateV1Schema, SerializedArtboardSchema, AnyElementConfigSchema, AnyTransformDataSchema, StrokeConfigSchema, KnockoutConfigSchema, DistressEffectSchema, MaskDefinitionSchema, CharacterStyleSchema, TextSpanSchema, RichTextSchema, ClipShapeSchema, CustomFontSchema, serializeState, deserializeState, validateState, migrateState, };
+export type { CanvasStateV1, SerializedArtboard, SerializedElement, DeserializeResult, ValidationResult, SerializeStateOptions, CustomFont, };

package/dist/state/index.d.ts

@@ -6,5 +6,5 @@
  *
  * @module
  */
-export { CanvasStateV1Schema, SerializedArtboardSchema, AnyElementConfigSchema, AnyTransformDataSchema, StrokeConfigSchema, KnockoutConfigSchema, DistressEffectSchema, MaskDefinitionSchema, CharacterStyleSchema, TextSpanSchema, RichTextSchema, ClipShapeSchema, serializeState, deserializeState, validateState, migrateState, } from './CanvasStateV1.js';
-export type { CanvasStateV1, SerializedArtboard, SerializedElement, DeserializeResult, ValidationResult, } from './CanvasStateV1.js';
+export { CanvasStateV1Schema, SerializedArtboardSchema, AnyElementConfigSchema, AnyTransformDataSchema, StrokeConfigSchema, KnockoutConfigSchema, DistressEffectSchema, MaskDefinitionSchema, CharacterStyleSchema, TextSpanSchema, RichTextSchema, ClipShapeSchema, CustomFontSchema, serializeState, deserializeState, validateState, migrateState, } from './CanvasStateV1.js';
+export type { CanvasStateV1, SerializedArtboard, SerializedElement, DeserializeResult, ValidationResult, SerializeStateOptions, CustomFont, } from './CanvasStateV1.js';

package/dist/{template-fields-ai7vnW8g.js → template-fields-DYPW7bVU.js}

@@ -1,10 +1,10 @@
-import { g as C, u as ut, c as Y, b as W } from "./editorErrors-8uDRMhow.js";
-import { l as it, i as gt, a as Nt } from "./design-builder-bquxIHct.js";
-import { toOptionAttributes as St, toCombinations as It, getMissingSelections as wt, validateProductSelection as Ot, findBestCombination as J, computeDisabledChoices as At } from "@snowcone-app/sdk";
-import { useRef as E, useCallback as I, useEffect as Tt, useContext as ht, useId as kt, useLayoutEffect as Dt, useMemo as V, useState as ot } from "react";
-import { G as Bt, I as z, P as _t, S as Ft, T as K, z as yt, U as st, c as Ut, y as rt } from "./FontAnalyzer-PE6nysqE.js";
-import { p as pt, U as Rt } from "./UnifiedFontService-BJzoqfBF.js";
-import { a as Lt, o as R, b as d, n as Pt, l as b, u as at, c as Yt } from "./CanvasStateV1-kL09wsAn.js";
+import { E as C, G as Nt, I as W, P as St, S as It, T as Y, C as ut, U as it, c as wt, z as ot } from "./FontAnalyzer-DKG5JK0x.js";
+import { l as st, i as gt, a as Ot } from "./design-builder-JYLO_Hyi.js";
+import { toOptionAttributes as At, toCombinations as Tt, getMissingSelections as kt, validateProductSelection as Dt, findBestCombination as J, computeDisabledChoices as Bt } from "@snowcone-app/sdk";
+import { useRef as E, useCallback as I, useEffect as _t, useContext as ht, useId as Ft, useLayoutEffect as Ut, useMemo as V, useState as rt } from "react";
+import { u as yt, c as K, b as z } from "./editorErrors-WzaNxU1Y.js";
+import { p as pt, U as Rt } from "./UnifiedFontService-Co9tQ59z.js";
+import { a as Lt, o as R, b as d, n as Pt, l as b, u as at, c as Yt } from "./CanvasStateV1-BDSyYo4A.js";
 function X(e) {
   return e.text;
 }
@@ -38,11 +38,11 @@ class $e {
    *  for unbindable), or undefined when no layer has the name. */
   layerKindOf(t) {
     const n = this.state.elements.find((o) => L(o) === t);
-    return n ? it(n) : void 0;
+    return n ? st(n) : void 0;
   }
   /** Names of bindable layers in the current state, for error messages. */
   bindableLayerNames() {
-    return this.state.elements.filter((t) => it(t) !== null).map(L).filter((t) => !!t);
+    return this.state.elements.filter((t) => st(t) !== null).map(L).filter((t) => !!t);
   }
   /**
    * Direct write path for `Editor.TextField` when NO canvas is mounted (with
@@ -90,7 +90,7 @@ function Kt(e, t) {
 }
 class Ce {
   constructor(t) {
-    this.quantity = 1, this.version = 0, this.listeners = /* @__PURE__ */ new Set(), this.getVersion = () => this.version, this.subscribe = (n) => (this.listeners.add(n), () => this.listeners.delete(n)), this.product = t, this.attrs = St({ options: t.options }), this.combos = It({ options: t.options }), this.selection = Kt(t, this.combos);
+    this.quantity = 1, this.version = 0, this.listeners = /* @__PURE__ */ new Set(), this.getVersion = () => this.version, this.subscribe = (n) => (this.listeners.add(n), () => this.listeners.delete(n)), this.product = t, this.attrs = At({ options: t.options }), this.combos = Tt({ options: t.options }), this.selection = Kt(t, this.combos);
   }
   getAttributes() {
     return this.attrs;
@@ -130,12 +130,12 @@ class Ce {
   /** Attribute keys still required (non-optional) but unselected — Buy's
    *  `option:<key>` reason codes. */
   missingOptionKeys() {
-    return Object.keys(this.attrs).length === 0 ? [] : wt(this.attrs, this.selection);
+    return Object.keys(this.attrs).length === 0 ? [] : kt(this.attrs, this.selection);
   }
   /** Full selection resolution (the C1 amendment): true when every required
    *  attribute is selected AND the selection matches a valid combination. */
   selectionValid() {
-    return Object.keys(this.attrs).length === 0 ? !0 : Ot(this.attrs, this.selection, this.combos);
+    return Object.keys(this.attrs).length === 0 ? !0 : Dt(this.attrs, this.selection, this.combos);
   }
   /** The variant (gvid) the current selection resolves to. Falls back to the
    *  product's initial `variantId` while nothing has been selected. */
@@ -176,7 +176,7 @@ class Ce {
     const t = {};
     for (const [n, o] of Object.entries(this.attrs))
       t[n] = { ...o, choices: lt(o) };
-    return At(this.selection, t, this.combos);
+    return Bt(this.selection, t, this.combos);
   }
   /** The combinations (for payload assembly via `createCartDetail`). */
   getCombinations() {
@@ -188,19 +188,19 @@ class Ce {
   }
 }
 function bt(e) {
-  return e instanceof K;
+  return e instanceof Y;
 }
 function Mt(e) {
-  return e instanceof z;
+  return e instanceof W;
 }
 function Ht(e) {
-  return e instanceof Ft;
+  return e instanceof It;
 }
 function jt(e) {
-  return e instanceof Bt;
+  return e instanceof Nt;
 }
 function Wt(e) {
-  return e instanceof _t;
+  return e instanceof St;
 }
 function Vt(e) {
   return bt(e) ? "text" : Mt(e) ? "image" : Ht(e) ? "shape" : jt(e) ? "group" : Wt(e) ? "path" : null;
@@ -304,7 +304,7 @@ function Qt(e, t) {
 function Zt(e, t) {
   let n = !1;
   if (t.x !== void 0 && (e.x = t.x), t.y !== void 0 && (e.y = t.y), t.rotation !== void 0 && e.setRotation(t.rotation), t.opacity !== void 0 && (e.opacity = t.opacity), t.name !== void 0 && (e.name = t.name), t.visible !== void 0 && (e.visible = t.visible), t.locked !== void 0 && (e.locked = t.locked), bt(e))
-    return t.text !== void 0 && e.setText(t.text), t.fontSize !== void 0 && e.setFontSize(t.fontSize), t.color !== void 0 && e.setColor(t.color), t.fontFamily !== void 0 && t.fontFamily !== e.fontFamily && (yt.clearCache(e.fontFamily), e.fontFamily = t.fontFamily), t.bold !== void 0 && (e.bold = t.bold), t.italic !== void 0 && (e.italic = t.italic), t.textAlign !== void 0 && (e.textAlign = t.textAlign), { needsImageLoad: n };
+    return t.text !== void 0 && e.setText(t.text), t.fontSize !== void 0 && e.setFontSize(t.fontSize), t.color !== void 0 && e.setColor(t.color), t.fontFamily !== void 0 && t.fontFamily !== e.fontFamily && (ut.clearCache(e.fontFamily), e.fontFamily = t.fontFamily), t.bold !== void 0 && (e.bold = t.bold), t.italic !== void 0 && (e.italic = t.italic), t.textAlign !== void 0 && (e.textAlign = t.textAlign), { needsImageLoad: n };
   const o = e;
   if (t.width !== void 0 && (o.transformData.width = t.width), t.height !== void 0 && (o.transformData.height = t.height), t.fillColor !== void 0 && (e.transformData.fillColor = t.fillColor), t.imageUrl !== void 0) {
     const i = e;
@@ -312,9 +312,9 @@ function Zt(e, t) {
   }
   return { needsImageLoad: n };
 }
-const mt = Ut("useCommands");
+const mt = wt("useCommands");
 function Ne() {
-  const e = ut(), {
+  const e = yt(), {
     undo: t,
     redo: n,
     canUndo: o,
@@ -340,7 +340,7 @@ function Ne() {
       const Et = _.current;
       let p = qt(Et, g);
       const M = O.getArtboardIdForElement(p.id) ?? O.getActiveArtboardId(), F = M ? x.peekArtboard(M) : null;
-      F instanceof st && F.elementId === p.id && F.newElement && (p = F.newElement), Qt(p, k);
+      F instanceof it && F.elementId === p.id && F.newElement && (p = F.newElement), Qt(p, k);
       const H = p.clone(), { needsImageLoad: $t } = Zt(H, k);
       if ($t) {
         const B = H;
@@ -356,7 +356,7 @@ function Ne() {
       }
       if (A.current(p, H), D != null && D.coalesce && M) {
         const B = x.peekArtboard(M);
-        N.current = B instanceof st ? { elementId: p.id, command: B } : null;
+        N.current = B instanceof it ? { elementId: p.id, command: B } : null;
       } else
         N.current = null;
     },
@@ -391,7 +391,7 @@ function Ne() {
   };
 }
 function Se() {
-  const { selectedElement: e } = ut();
+  const { selectedElement: e } = yt();
   return e ?? null;
 }
 const te = 3e3, ft = {
@@ -408,7 +408,7 @@ const te = 3e3, ft = {
   font: "text"
 }, Z = /* @__PURE__ */ new Set();
 function dt(e) {
-  return e instanceof K ? "text" : e instanceof z ? "image" : "other";
+  return e instanceof Y ? "text" : e instanceof W ? "image" : "other";
 }
 function ie(e, t, n) {
   const o = `[${ft[e]}]`, i = `the binding is dead (isConnected: false, ${ee[e]} is a no-op)`, s = ne[e], a = n.getAllByName(t);
@@ -420,9 +420,9 @@ function ie(e, t, n) {
   return `${o} no ${s} layer named "${t}" exists — ${i}. ${c}`;
 }
 function et(e, t, n, o) {
-  Tt(() => {
+  _t(() => {
     var a;
-    if (o || typeof rt > "u" || ((a = rt.env) == null ? void 0 : a.NODE_ENV) === "production") return;
+    if (o || typeof ot > "u" || ((a = ot.env) == null ? void 0 : a.NODE_ENV) === "production") return;
     const i = `${e}:${t}`;
     if (Z.has(i)) return;
     const s = setTimeout(() => {
@@ -432,14 +432,14 @@ function et(e, t, n, o) {
   }, [e, t, n, o]);
 }
 function G(e) {
-  const t = ht(pt), n = kt();
-  Dt(() => {
+  const t = ht(pt), n = Ft();
+  Ut(() => {
     if (t)
       return t.registry.requireCanvas(n, e);
   }, [t, n, e]);
 }
 function tt(e) {
-  return e instanceof K ? "text" : e instanceof z ? "image" : null;
+  return e instanceof Y ? "text" : e instanceof W ? "image" : null;
 }
 const oe = {
   text: "useTextBinding / useFontBinding",
@@ -481,9 +481,9 @@ function nt(e, t, n) {
 const se = () => {
 }, re = [];
 function Ie(e) {
-  const { elementStore: t } = Y();
+  const { elementStore: t } = K();
   G("useTextBinding()");
-  const n = nt(e, "text", t), { executeElementUpdate: o } = W(), i = V(() => t.getAllByName(n).filter((r) => r instanceof K), [t, n]), s = I(
+  const n = nt(e, "text", t), { executeElementUpdate: o } = z(), i = V(() => t.getAllByName(n).filter((r) => r instanceof Y), [t, n]), s = I(
     (a) => {
       for (const r of i) {
         const c = r.clone();
@@ -528,7 +528,7 @@ function ce(e, t, n) {
 }
 function we(e, t) {
   G("useImageBinding()");
-  const n = (t == null ? void 0 : t.fit) ?? "cover", { elementStore: o, setElements: i } = Y(), s = nt(e, "image", o), { executeElementUpdate: a } = W(), r = V(() => o.getAllByName(s).filter((h) => h instanceof z), [o, s]), c = E(/* @__PURE__ */ new Map());
+  const n = (t == null ? void 0 : t.fit) ?? "cover", { elementStore: o, setElements: i } = K(), s = nt(e, "image", o), { executeElementUpdate: a } = z(), r = V(() => o.getAllByName(s).filter((h) => h instanceof W), [o, s]), c = E(/* @__PURE__ */ new Map());
   for (const u of r)
     if (!c.current.has(u.id)) {
       const h = u.transformData;
@@ -590,9 +590,9 @@ function fe(e, t, n) {
   return $(i.color, t) && (typeof s.setColor == "function" ? s.setColor(n) : s.color = n), $((a = i.transformData) == null ? void 0 : a.fillColor, t) && (s.transformData = { ...s.transformData, fillColor: n }), $((r = i.transformData) == null ? void 0 : r.strokeColor, t) && (s.transformData = { ...s.transformData, strokeColor: n }), ((c = i.stroke) == null ? void 0 : c.enabled) === !0 && $(i.stroke.color, t) && (s.stroke = { ...s.stroke, color: n }), o;
 }
 function Oe(e) {
-  const t = Nt(e) ? e.value : e, { elementStore: n } = Y(), { executeElementUpdate: o } = W();
+  const t = Ot(e) ? e.value : e, { elementStore: n } = K(), { executeElementUpdate: o } = z();
   G("useColorBinding()");
-  const [i, s] = ot(() => j(t)), [a, r] = ot(t);
+  const [i, s] = rt(() => j(t)), [a, r] = rt(t);
   t !== a && (r(t), s(j(t)));
   const c = V(
     () => n.getAll().filter((m) => vt(m, i)),
@@ -615,14 +615,14 @@ function Oe(e) {
 const de = () => {
 }, ue = [];
 function Ae(e) {
-  const { elementStore: t } = Y();
+  const { elementStore: t } = K();
   G("useFontBinding()");
-  const n = nt(e, "text", t), { executeElementUpdate: o } = W(), i = V(() => t.getAllByName(n).filter((r) => r instanceof K), [t, n]), s = I(
+  const n = nt(e, "text", t), { executeElementUpdate: o } = z(), i = V(() => t.getAllByName(n).filter((r) => r instanceof Y), [t, n]), s = I(
     (a) => {
       Rt.loadGoogleFontByName(a);
       for (const r of i) {
         if (r.fontFamily === a) continue;
-        yt.clearCache(r.fontFamily);
+        ut.clearCache(r.fontFamily);
         const c = r.clone();
         c.fontFamily = a, o(r, c);
       }
@@ -638,7 +638,7 @@ function Ae(e) {
   };
 }
 function Te(e) {
-  const { elementStore: t } = Y();
+  const { elementStore: t } = K();
   return e ? t.getByName(e) ?? null : null;
 }
 const xt = "personalization", ge = Lt("type", [
@@ -713,4 +713,4 @@ export {
   Oe as u,
   De as w
 };
-//# sourceMappingURL=template-fields-ai7vnW8g.js.map
+//# sourceMappingURL=template-fields-DYPW7bVU.js.map