@snowcone-app/canvas 0.18.1 → 0.19.1

package/dist/api/embed.d.ts

@@ -34,8 +34,8 @@
  *
  * @packageDocumentation
  */
-export { Editor, DesignStateStore } from '../components/editor/index.js';
-export type { EditorRootProps, EditorRootBaseProps, EditorCanvasProps, EditorPreviewProps, EditorTextFieldProps, EditorBuyProps, EditorBuyPayload, BuyMissingReason, DesignState, EditorLayersProps, EditorControlsProps, EditorHistoryProps, EditorMenuProps, EditorAddProps, } from '../components/editor/index.js';
+export { Editor, DesignStateStore, useProductSelection } from '../components/editor/index.js';
+export type { EditorRootProps, EditorRootBaseProps, EditorCanvasProps, EditorPreviewProps, EditorTextFieldProps, EditorBuyProps, EditorBuyPayload, BuyMissingReason, DesignState, EditorLayersProps, EditorControlsProps, EditorHistoryProps, EditorMenuProps, EditorAddProps, ProductSelectionApi, ProductOptionChoice, ProductSelectionAttribute, } from '../components/editor/index.js';
 export { EditorError, isEditorError } from '../errors/editorError.js';
 export type { EditorErrorCode, EditorErrorData } from '../errors/editorError.js';
 export { RealtimeEmbed } from '../components/embed-realtime/RealtimeEmbed.js';

package/dist/api/testing.d.ts

@@ -24,3 +24,6 @@
 export { MockEditorProvider, MockEditorProviderWithState, createMockElement, createMockImageElement, createMockArtboard, waitFor, waitForExport, simulateKeyPress, createMockCanvas, assertElementProperties, getElementBounds, } from '../testing/index.js';
 export type { MockEditorProviderProps, MockEditorElement, } from '../testing/index.js';
 export { expectNoEditorErrors, getContainedEditorErrors, resetContainedEditorErrors, } from '../testing/editorErrors.js';
+export { assertRenders, mutateNamedTextLayers } from '../testing/assertRenders.js';
+export type { AssertRendersOptions, AssertRendersResult, RenderableDesign } from '../testing/assertRenders.js';
+export { test403Design, testIncompleteDesign, failingGrant, TEST_403_ASSET_URL, } from '../testing/failureFixtures.js';

package/dist/components/editor/EditorBuy.d.ts

@@ -1,14 +1,17 @@
 import { default as React, CSSProperties, ReactNode } from 'react';
-import { CartDetail, RenderProduct } from '@snowcone-app/sdk';
+import { CartDetail, OptionSelection } from '@snowcone-app/sdk';
 import { ServerRenderRequest } from '../../rendering/serialize-for-server.js';
 import { DesignState } from './designStateStore.js';
 /** A structured incompleteness reason — also serialized (comma-joined) into
  *  the button's `data-sc-buy-missing` attribute for agents and styling. */
-export type BuyMissingReason = 'variant' | `layer:${string}` | `layer-seed:${string}` | 'empty-design' | 'quantity';
+export type BuyMissingReason = `option:${string}` | 'variant' | `layer:${string}` | `layer-seed:${string}` | 'empty-design' | 'quantity';
 export interface EditorBuyPayload {
     productId: string;
+    /** The variant (gvid) the selection resolves to. */
     variantId?: string;
     quantity: number;
+    /** The variant choices at click time, e.g. `{ Color: 'Black', Size: 'M' }`. */
+    selection: OptionSelection;
     /** SDK cart detail (variant resolution + price) when the product carries
      *  catalog `options`; `null` for option-less products. */
     cartDetail: CartDetail | null;
@@ -22,8 +25,13 @@ export interface EditorBuyProps {
     /** The final submit — the host's one line. Everything before it (variant,
      *  quantity, completeness, payload assembly) is this part's job. */
     onAddToCart: (payload: EditorBuyPayload) => void | Promise<void>;
-    /** Initial quantity (integer ≥ 1; default 1). */
-    quantity?: number;
+    /**
+     * Seeds the Buy-owned quantity once on mount (integer ≥ 1; the store
+     * defaults to 1). Live reads/writes go through `useProductSelection()` —
+     * this is deliberately NOT a controlled prop, so two Buy parts under one
+     * Root can never disagree about quantity.
+     */
+    defaultQuantity?: number;
     /** Button label. Defaults to "Add to cart". */
     children?: ReactNode;
     className?: string;
@@ -31,8 +39,11 @@ export interface EditorBuyProps {
 }
 /** Pure completeness evaluation — exported for tests. @internal */
 export declare function evaluateBuyCompleteness(input: {
-    product: RenderProduct;
     quantity: number;
+    /** Required attribute keys still unselected (C1 — `option:<key>`). */
+    missingOptionKeys: string[];
+    /** Full-resolution validity of the selection (C1 — `variant`). */
+    selectionValid: boolean;
     textFields: Array<{
         name: string;
         optional: boolean;

package/dist/components/editor/RootInternals.d.ts

@@ -1,5 +1,6 @@
 import { EditorError } from '../../errors/editorError.js';
 import { DesignStateStore } from './designStateStore.js';
+import { CommerceStateStore } from './commerceStore.js';
 /** Imperative ops a mounted `Editor.Canvas` offers sibling parts. Routes
  *  TextField writes through the editor command path (undo/redo, repaint) so
  *  the editor document stays the single write authority while a canvas is
@@ -57,6 +58,10 @@ export declare class EditorPartsRegistry {
 export interface EditorRootInternals {
     /** The one live design state under this Root (ADR-0085 §3 / T2). */
     store: DesignStateStore;
+    /** The one commerce-selection state under this Root (ADR-0085 §2 / P2):
+     *  variant selection + quantity. `Editor.Buy` owns the contract; the host
+     *  reads/writes it through `useProductSelection()`. */
+    commerce: CommerceStateStore;
     registry: EditorPartsRegistry;
     /**
      * Handler/async-time invariant channel (ADR-0085, D11 containment): React

package/dist/components/editor/commerceStore.d.ts

@@ -0,0 +1,68 @@
+import { Combination, OptionAttribute, OptionSelection, RenderProduct } from '@snowcone-app/sdk';
+/**
+ * One choice of a variant attribute as the commerce store HANDS IT OUT —
+ * always the catalog's choice OBJECT (`toOptionAttributes` normalizes bare
+ * strings to `{ label }`). A `hex` marks a color-axis choice (render it as a
+ * swatch). NOTE the currency mismatch this type exists to make honest: the
+ * SDK's `OptionAttribute` declares `choices: string[]` for its selection
+ * math, but the runtime objects flowing through this store are these.
+ */
+export interface ProductOptionChoice {
+    label?: string;
+    hex?: string;
+    [key: string]: unknown;
+}
+/** An attribute as `useProductSelection().attributes` returns it: the SDK
+ *  shape with the choices typed as the objects they actually are. The
+ *  CURRENCY for `select()` / `selection` / `disabledChoices` is the choice's
+ *  `label` STRING — pass `choice.label`, never the object. */
+export interface ProductSelectionAttribute extends Omit<OptionAttribute, 'choices'> {
+    choices: ProductOptionChoice[];
+}
+/** The label strings of an attribute's choices (legacy attrs may carry bare
+ *  strings; normalized attrs carry `{ label, hex?, … }` objects). */
+export declare function choiceLabelsOf(attr: OptionAttribute | ProductSelectionAttribute): string[];
+/** Derive the seed selection from the product's initial `variantId` — the
+ *  combination it resolves to pins one value per variant-affecting attribute.
+ *  No `variantId` (or no match) seeds an empty selection. */
+export declare function seedSelectionOf(product: RenderProduct, combinations: Combination[]): OptionSelection;
+export declare class CommerceStateStore {
+    private product;
+    private attrs;
+    private combos;
+    private selection;
+    private quantity;
+    private version;
+    private readonly listeners;
+    constructor(product: RenderProduct);
+    getVersion: () => number;
+    subscribe: (listener: () => void) => (() => void);
+    getAttributes(): Record<string, ProductSelectionAttribute>;
+    getSelection(): OptionSelection;
+    getQuantity(): number;
+    /**
+     * Select a choice for a variant attribute. Strict + loud (D4/E3): an
+     * attribute key or choice that doesn't exist on the product is a wiring
+     * mistake, not user state — throws `E_UNKNOWN_OPTION` listing what IS valid.
+     */
+    select(key: string, choice: string): void;
+    /** Quantity is USER state (completeness rule C5 gates on it) — never throws. */
+    setQuantity(quantity: number): void;
+    /** Attribute keys still required (non-optional) but unselected — Buy's
+     *  `option:<key>` reason codes. */
+    missingOptionKeys(): string[];
+    /** Full selection resolution (the C1 amendment): true when every required
+     *  attribute is selected AND the selection matches a valid combination. */
+    selectionValid(): boolean;
+    /** The variant (gvid) the current selection resolves to. Falls back to the
+     *  product's initial `variantId` while nothing has been selected. */
+    resolvedVariantId(): string | undefined;
+    /** Price of the resolved combination, when the catalog carries one. */
+    resolvedPrice(): number | undefined;
+    /** Choices invalid given the rest of the current selection — for hosts to
+     *  disable/grey out in their variant UI. */
+    disabledChoices(): Record<string, string[]>;
+    /** The combinations (for payload assembly via `createCartDetail`). */
+    getCombinations(): Combination[];
+    private bump;
+}

package/dist/components/editor/index.d.ts

@@ -36,6 +36,10 @@ export type { EditorTextFieldProps } from './EditorTextField.js';
 export type { EditorBuyProps, EditorBuyPayload, BuyMissingReason } from './EditorBuy.js';
 export type { DesignState } from './designStateStore.js';
 export { DesignStateStore } from './designStateStore.js';
+export { useProductSelection } from './useProductSelection.js';
+export type { ProductSelectionApi } from './useProductSelection.js';
+export { CommerceStateStore } from './commerceStore.js';
+export type { ProductOptionChoice, ProductSelectionAttribute } from './commerceStore.js';
 export type { EditorLayersProps } from './EditorLayers.js';
 export type { EditorControlsProps } from './EditorControls.js';
 export type { EditorHistoryProps } from './EditorHistory.js';

package/dist/components/editor/useProductSelection.d.ts

@@ -0,0 +1,39 @@
+import { OptionSelection } from '@snowcone-app/sdk';
+import { ProductSelectionAttribute } from './commerceStore.js';
+export interface ProductSelectionApi {
+    /** The product's variant attributes (normalized catalog `options.attributes`).
+     *  Choices are ALWAYS `{ label, hex?, … }` OBJECTS — render `choice.label`,
+     *  use `hex` for color swatches. Empty object for an option-less product. */
+    attributes: Record<string, ProductSelectionAttribute>;
+    /** Current choices BY LABEL STRING, e.g. `{ Color: 'Black', Size: 'M' }` —
+     *  the label is the currency everywhere selection is read or written.
+     *  Seeded from the Root product's `variantId` combination when present. */
+    selection: OptionSelection;
+    /** Select a choice by its LABEL string (`select('Color', choice.label)`).
+     *  Unknown key/choice → throws `E_UNKNOWN_OPTION` listing the valid ones. */
+    select: (key: string, choice: string) => void;
+    /** Choice LABELS invalid given the rest of the selection — disable these. */
+    disabledChoices: Record<string, string[]>;
+    /** The variant (gvid) the selection resolves to; `undefined` while
+     *  incomplete/invalid. This is what renders and what Buy submits. */
+    variantId: string | undefined;
+    /** Resolved combination's price, when the catalog carries one. */
+    price: number | undefined;
+    /** Buy-owned quantity (completeness rule C5 gates on it). */
+    quantity: number;
+    /** Set the Buy-owned quantity. Values that are not integers ≥ 1 are stored
+     *  as-is and GATE Buy with the `quantity` reason code (user state, never a
+     *  throw) — clamp in your stepper if you never want that state. */
+    setQuantity: (quantity: number) => void;
+    /** True when every required attribute is selected and the combination is
+     *  valid — the C1 component of Buy's completeness. */
+    complete: boolean;
+    /** Required attribute keys still unselected (Buy's `option:<key>` codes). */
+    missing: string[];
+}
+/**
+ * Read/write the Buy-owned product selection under this `Editor.Root`.
+ *
+ * @experimental ADR-0085; subject to change until the P4 gate.
+ */
+export declare function useProductSelection(): ProductSelectionApi;

package/dist/design-builder-v4935TeS.js

@@ -0,0 +1,343 @@
+import { g as l } from "./EditorContext-5QpqAhjh.js";
+const k = 1;
+function d(t) {
+  return typeof t == "number" && Number.isFinite(t) ? Math.round(t * 100) / 100 : t;
+}
+function p(t) {
+  return {
+    ...t,
+    ...t.x !== void 0 && { x: d(t.x) },
+    ...t.y !== void 0 && { y: d(t.y) },
+    ...t.width !== void 0 && { width: d(t.width) },
+    ...t.height !== void 0 && { height: d(t.height) },
+    ...t.rotation !== void 0 && { rotation: d(t.rotation) }
+  };
+}
+function x(t) {
+  var a;
+  const i = (a = t.artboards) != null && a.length ? t.artboards : [{ name: "Front", width: 800, height: 800 }], e = i.map(() => []);
+  for (const r of t.elements || []) {
+    const o = r == null ? void 0 : r.artboard, s = typeof o == "string" ? i.findIndex((n) => (n.name || "Front") === o) : -1;
+    e[s >= 0 ? s : 0].push(R(r));
+  }
+  return {
+    schemaVersion: k,
+    artboards: i.map((r, o) => ({
+      id: `artboard-${o + 1}`,
+      name: r.name || "Front",
+      x: 0,
+      y: 0,
+      width: d(r.width || 800),
+      height: d(r.height || 800),
+      backgroundColor: r.backgroundColor || "transparent",
+      // Pass the artboard's flag through — the server worker only paints the
+      // background when this is true. Hardcoding `false` here silently dropped
+      // explicitly-set artboard backgrounds from every realtime mockup while
+      // the editor kept showing them (WYSIWYG drift).
+      exportBackground: r.exportBackground ?? !1,
+      elements: e[o],
+      distressTexture: r.distressTexture,
+      imageMask: r.imageMask
+    }))
+  };
+}
+function R(t) {
+  const i = t.type || t.transformType;
+  if (i === "image")
+    return C(t);
+  const { artboard: e, ...a } = t;
+  return p({
+    ...a,
+    type: i
+  });
+}
+function C(t) {
+  var c;
+  const i = t.transformData || {}, e = t.masks && t.masks.length > 0, a = i.width || 0, r = i.height || 0, o = e ? a : a * (i.cropWidth ?? 1), s = e ? r : r * (i.cropHeight ?? 1), n = {
+    id: t.id,
+    type: "image",
+    x: t.x || 0,
+    y: t.y || 0,
+    width: o,
+    height: s,
+    rotation: t.rotation || 0,
+    imageUrl: t.imageUrl,
+    imageAspectRatio: t.imageAspectRatio
+  };
+  return !e && (i.cropX !== 0 || i.cropY !== 0 || i.cropWidth !== 1 || i.cropHeight !== 1) && (n.cropX = i.cropX, n.cropY = i.cropY, n.cropWidth = i.cropWidth, n.cropHeight = i.cropHeight, n.needsCropPixelConversion = !0), i.flipHorizontal && (n.flipHorizontal = i.flipHorizontal), i.flipVertical && (n.flipVertical = i.flipVertical), i.borderRadius && (n.borderRadius = i.borderRadius), t.opacity !== void 0 && (n.opacity = t.opacity), t.distressEffect && (n.distressEffect = t.distressEffect), ((c = t.masks) == null ? void 0 : c.length) > 0 && (n.masks = t.masks), t.blendMode && (n.blendMode = t.blendMode), t.knockoutParts && (n.knockoutParts = t.knockoutParts), t.stroke && (n.stroke = t.stroke), p(n);
+}
+const u = "center", y = Symbol.for("snowcone.canvas.layerToken");
+function S(t) {
+  return typeof t == "object" && t !== null && t[y] === !0 && typeof t.name == "string" && (t.kind === "text" || t.kind === "image");
+}
+function N(t, i) {
+  return Object.freeze({ kind: t, name: i, [y]: !0 });
+}
+function m(t) {
+  const i = t.transformType;
+  return i === "image" ? "image" : i === "shape" || i === "group" || i === "path" ? null : "text";
+}
+function T(t) {
+  return t === "top-left" || t === "left" || t === "bottom-left" ? "left" : t === "top-right" || t === "right" || t === "bottom-right" ? "right" : "center";
+}
+function E(t) {
+  return t === "top-left" || t === "top" || t === "top-right" ? "top" : t === "bottom-left" || t === "bottom" || t === "bottom-right" ? "bottom" : "middle";
+}
+function f(t, i, e, a, r, o) {
+  const s = T(t), n = E(t), h = s === "left" ? i / 2 + o : s === "right" ? a - i / 2 - o : a / 2, c = n === "top" ? e / 2 + o : n === "bottom" ? r - e / 2 - o : r / 2;
+  return { x: h, y: c };
+}
+function H(t, i, e) {
+  const a = i / e;
+  if (t >= a) {
+    const s = e * t, n = i / s;
+    return {
+      width: s,
+      height: e,
+      cropX: (1 - n) / 2,
+      cropY: 0,
+      cropWidth: n,
+      cropHeight: 1
+    };
+  }
+  const r = i / t, o = e / r;
+  return {
+    width: i,
+    height: r,
+    cropX: 0,
+    cropY: (1 - o) / 2,
+    cropWidth: 1,
+    cropHeight: o
+  };
+}
+class g {
+  constructor(i) {
+    if (this.els = [], this.idCounter = 0, !(i.width > 0) || !(i.height > 0))
+      throw new Error("design(): artboard width and height must be positive numbers");
+    this.artboard = {
+      name: i.name || "Front",
+      width: i.width,
+      height: i.height,
+      backgroundColor: i.backgroundColor
+    };
+  }
+  /**
+   * Seed a builder from a previously saved canvas state — the editor shape
+   * `<SnowconeCanvas onChange>` emits (and `toJSON()` produces).
+   *
+   * This is how a saved editable template re-enters the turnkey embed path:
+   * load the template's state JSON, lift it back into a `DesignBuilder`, and
+   * hand it to `<RealtimeEmbed design={…}>`. The active artboard becomes the
+   * builder's artboard; elements tagged for other artboards are skipped
+   * (untagged elements are assumed to belong to the active one).
+   */
+  static fromState(i) {
+    const e = i.artboards.find((r) => r.name === i.activeArtboard) ?? i.artboards[0];
+    if (!e)
+      throw new Error("DesignBuilder.fromState(): state has no artboards");
+    const a = new g({
+      name: e.name,
+      width: e.width,
+      height: e.height,
+      backgroundColor: e.backgroundColor
+    });
+    for (const r of i.elements)
+      r.artboard && r.artboard !== e.name || a.els.push({ ...r });
+    return a;
+  }
+  nextId(i) {
+    return `${i}-${++this.idCounter}`;
+  }
+  background(i, e = {}) {
+    const { width: a, height: r } = this.artboard;
+    let o;
+    if (e.aspectRatio && e.aspectRatio > 0) {
+      const n = H(e.aspectRatio, a, r);
+      o = {
+        type: "image",
+        width: n.width,
+        height: n.height,
+        cropX: n.cropX,
+        cropY: n.cropY,
+        cropWidth: n.cropWidth,
+        cropHeight: n.cropHeight,
+        flipHorizontal: !1,
+        flipVertical: !1,
+        borderRadius: 0
+      };
+    } else
+      o = {
+        type: "image",
+        width: a,
+        height: r,
+        cropX: 0,
+        cropY: 0,
+        cropWidth: 1,
+        cropHeight: 1,
+        flipHorizontal: !1,
+        flipVertical: !1,
+        borderRadius: 0
+      };
+    const s = {
+      id: this.nextId("bg"),
+      transformType: "image",
+      x: a / 2,
+      y: r / 2,
+      rotation: 0,
+      opacity: e.opacity ?? 1,
+      imageUrl: i,
+      imageAspectRatio: e.aspectRatio,
+      transformData: o,
+      name: e.name ?? "Background"
+    };
+    return this.els.unshift(s), this;
+  }
+  image(i, e = {}) {
+    const { width: a, height: r } = this.artboard, o = e.width ?? Math.round(a / 3), s = e.height ?? (e.aspectRatio ? Math.round(o / e.aspectRatio) : o), { x: n, y: h } = f(e.anchor ?? u, o, s, a, r, e.padding ?? 0), c = {
+      id: this.nextId("img"),
+      transformType: "image",
+      x: n,
+      y: h,
+      rotation: e.rotation ?? 0,
+      opacity: e.opacity ?? 1,
+      imageUrl: i,
+      imageAspectRatio: e.aspectRatio,
+      transformData: {
+        type: "image",
+        width: o,
+        height: s,
+        cropX: 0,
+        cropY: 0,
+        cropWidth: 1,
+        cropHeight: 1,
+        flipHorizontal: !1,
+        flipVertical: !1,
+        borderRadius: 0
+      },
+      ...e.name ? { name: e.name } : {}
+    };
+    return this.els.push(c), this;
+  }
+  text(i, e = {}) {
+    const { width: a, height: r } = this.artboard, o = e.fontSize ?? Math.round(this.artboard.height / 12), { x: s, y: n } = f(e.anchor ?? "top", 0, o, a, r, e.padding ?? Math.round(r / 20)), h = {
+      id: this.nextId("text"),
+      transformType: "custom",
+      x: s,
+      y: n,
+      rotation: e.rotation ?? 0,
+      text: i,
+      fontSize: o,
+      fontFamily: e.fontFamily ?? "Anton",
+      color: e.color ?? "#ffffff",
+      textAlign: e.textAlign ?? "center",
+      bold: e.bold ?? !1,
+      italic: e.italic ?? !1,
+      transformData: { type: "custom" },
+      ...e.name ? { name: e.name } : {}
+    };
+    return this.els.push(h), this;
+  }
+  /**
+   * Mint a {@link LayerToken} for a named layer — the only currency
+   * `Editor.TextField` accepts (ADR-0085 §1). Compile time: `name` is
+   * constrained to this design's declared layer names, kind inferred from
+   * which per-kind union it falls in. Runtime: validated EAGERLY against the
+   * built elements (nearest the mistake), so CMS/JSON-loaded designs get the
+   * same protection with `string` typing.
+   *
+   * @throws EditorError `E_LAYER_NOT_FOUND` — no layer with this name; lists
+   *   the valid names per kind.
+   * @throws EditorError `E_LAYER_WRONG_KIND` — the name matches a layer that
+   *   is not bindable (shape/group/path).
+   * @experimental ADR-0085; subject to change until the P4 gate.
+   */
+  layer(i) {
+    const e = this.els.find((r) => r.name === i);
+    if (!e) {
+      const r = this.layerNamesOfKind("text"), o = this.layerNamesOfKind("image");
+      throw new l(
+        "E_LAYER_NOT_FOUND",
+        `no layer "${i}" in this design. Text layers: ${JSON.stringify(r)}; image layers: ${JSON.stringify(o)}. Fix the name, or add the layer first — e.g. design(…).text('…', { name: '${i}' }).`,
+        { layerName: i, validNames: [...r, ...o], textNames: r, imageNames: o, docSlug: "embed-mode" }
+      );
+    }
+    const a = m(e);
+    if (!a)
+      throw new l(
+        "E_LAYER_WRONG_KIND",
+        `layer "${i}" is a ${e.transformType} element — only text and image layers are bindable. Bindable layers: ${JSON.stringify([...this.layerNamesOfKind("text"), ...this.layerNamesOfKind("image")])}.`,
+        { layerName: i, actualType: e.transformType, docSlug: "embed-mode" }
+      );
+    return N(a, i);
+  }
+  /** Names of bindable layers of one kind, in stack order. @internal */
+  layerNamesOfKind(i) {
+    return this.els.filter((e) => m(e) === i).map((e) => e.name).filter((e) => !!e);
+  }
+  /** An anchored vector shape. */
+  shape(i, e = {}) {
+    const { width: a, height: r } = this.artboard, o = e.size ?? Math.round(a / 6), s = typeof o == "number" ? o : o.width, n = typeof o == "number" ? o : o.height, { x: h, y: c } = f(e.anchor ?? u, s, n, a, r, e.padding ?? 0), b = {
+      type: "shape",
+      shapeType: i,
+      width: s,
+      height: n,
+      fillColor: e.fill ?? "#000000",
+      fillOpacity: e.opacity ?? 1,
+      ...e.points !== void 0 ? { points: e.points } : {},
+      ...e.sides !== void 0 ? { sides: e.sides } : {}
+    }, w = {
+      id: this.nextId("shape"),
+      transformType: "shape",
+      x: h,
+      y: c,
+      rotation: e.rotation ?? 0,
+      transformData: b,
+      ...e.name ? { name: e.name } : {}
+    };
+    return this.els.push(w), this;
+  }
+  /** The composed elements, in render order (background first). Editor shape. */
+  get elements() {
+    return this.els.map((i) => ({ ...i }));
+  }
+  /** Editor-shape canvas state for `<SnowconeCanvas initialElements=… />` and
+   *  `serializeStateForServer`. `activeArtboard` is the artboard name. */
+  toJSON() {
+    return {
+      elements: this.elements,
+      artboards: [{
+        name: this.artboard.name,
+        width: this.artboard.width,
+        height: this.artboard.height,
+        // A background set on a design is part of the design: flag it
+        // renderable so exports and server renders paint it, matching the
+        // editor (the export worker skips it without `exportBackground`).
+        ...this.artboard.backgroundColor ? {
+          backgroundColor: this.artboard.backgroundColor,
+          exportBackground: this.artboard.backgroundColor !== "transparent"
+        } : {}
+      }],
+      activeArtboard: this.artboard.name
+    };
+  }
+  /** Server-render payload for `RenderSession.renderState(placement, …)`.
+   *  Equivalent to `serializeStateForServer(design.toJSON())`. */
+  toServerRequest() {
+    return x(this.toJSON());
+  }
+}
+function v(t) {
+  return new g(t);
+}
+function z(t) {
+  return m(t);
+}
+export {
+  k as C,
+  g as D,
+  v as d,
+  S as i,
+  z as l,
+  x as s
+};
+//# sourceMappingURL=design-builder-v4935TeS.js.map