@snowcone-app/canvas 0.13.1 → 0.15.0

package/dist/api/embed.d.ts

@@ -38,6 +38,7 @@ export { RealtimeEmbed } from '../components/embed-realtime/RealtimeEmbed.js';
 export type { RealtimeEmbedProps, GrantSource } from '../components/embed-realtime/RealtimeEmbed.js';
 export { RealtimeCanvas } from '../components/embed-realtime/RealtimeCanvas.js';
 export type { RealtimeCanvasProps } from '../components/embed-realtime/RealtimeCanvas.js';
+export type { SnowconeCanvasHandle, CanvasState } from '../components/embed/SnowconeCanvas.js';
 export { RealtimeMockup } from '../components/embed-realtime/RealtimeMockup.js';
 export type { RealtimeMockupProps } from '../components/embed-realtime/RealtimeMockup.js';
 export { useRealtimeMockups } from '../components/embed-realtime/useRealtimeMockups.js';
@@ -46,6 +47,19 @@ export { validateEmbed } from '../components/embed-realtime/validateEmbed.js';
 export type { ValidateEmbedInput } from '../components/embed-realtime/validateEmbed.js';
 export { design, DesignBuilder } from '../design/design-builder.js';
 export type { Anchor, ShapeKind, DesignArtboard } from '../design/design-builder.js';
+export { useEditor } from '../contexts/EditorContext.js';
+export type { EditorContextValue, EditorProviderProps } from '../contexts/EditorContext.js';
+export { useLayers } from '../hooks/useLayers.js';
+export type { LayerInfo, UseLayersOptions, UseLayersReturn } from '../hooks/useLayers.js';
+export { useCommands } from '../hooks/useCommands.js';
+export type { UseCommandsReturn } from '../hooks/useCommands.js';
+export { useArtboards } from '../hooks/useArtboards.js';
+export type { ArtboardInfo, UseArtboardsReturn } from '../hooks/useArtboards.js';
+export { useExport } from '../hooks/useExport.js';
+export type { ExportProgress, ContinuousExportOptions, UseExportReturn } from '../hooks/useExport.js';
+export { useSelectedElement } from '../hooks/useSelectedElement.js';
+export { serializeState } from '../state/index.js';
+export type { CanvasStateV1, SerializedArtboard, SerializedElement, } from '../state/index.js';
 export { useTextBinding } from '../hooks/useTextBinding.js';
 export { useImageBinding } from '../hooks/useImageBinding.js';
 export { useColorBinding } from '../hooks/useColorBinding.js';

package/dist/components/VisualGuideOverlay.d.ts

@@ -153,4 +153,4 @@ export interface VisualGuideOverlayProps {
     /** `className` applied to the wrapping SVG element. */
     className?: string;
 }
-export declare function VisualGuideOverlay({ artboardWidth, artboardHeight, canvasPadding, pieces, pieceGuides, show, style, className, }: VisualGuideOverlayProps): JSX.Element;
+export declare function VisualGuideOverlay({ artboardWidth, artboardHeight, canvasPadding, pieces, pieceGuides, show, style, className, }: VisualGuideOverlayProps): React.JSX.Element;

package/dist/components/embed-realtime/RealtimeCanvas.d.ts

@@ -1,4 +1,5 @@
 import { default as React, CSSProperties, ReactNode } from 'react';
+import { CanvasState, SnowconeCanvasHandle } from '../embed/SnowconeCanvas.js';
 import { KitPresetId, KitDefinition } from '../../kits/types.js';
 import { CanvasServices } from '../../contexts/CanvasServicesContext.js';
 export interface RealtimeCanvasProps {
@@ -35,7 +36,29 @@ export interface RealtimeCanvasProps {
      * server — your vendor keys live there.
      */
     services?: CanvasServices;
+    /**
+     * Observe the live design state. Fires with the full {@link CanvasState}
+     * (elements stamped with their artboard name) whenever the canvas content
+     * changes — including once after the initial seed loads — in addition to the
+     * embed's internal edit→server-render flow, which is unaffected. This is the
+     * state you persist at add-to-cart / checkout so the purchased design can be
+     * re-rendered server-side later.
+     *
+     * Safe to pass inline: the underlying canvas reads the callback from a ref,
+     * so a new identity each render never re-fires or loops.
+     */
+    onChange?: (state: CanvasState) => void;
     className?: string;
     style?: CSSProperties;
 }
-export declare function RealtimeCanvas({ children, kit, inheritTheme, maxHeight, services, className, style, }: RealtimeCanvasProps): React.ReactElement;
+/**
+ * Note the export naming wart, kept for backwards compatibility:
+ * - The ref handle's {@link SnowconeCanvasHandle.exportArtboards} resolves a
+ *   record keyed by artboard **name** (e.g. `'Front'`) — names match the
+ *   `placements` you configured on the embed.
+ * - The lower-level `useExport().exportArtboard(id)` hook takes an artboard
+ *   **ID** (get one from `useArtboards()`).
+ * For print-res exports at checkout, the ref handle is the intended path:
+ * `ref.current.exportArtboards({ all: true, scale: 4, format: 'blob' })`.
+ */
+export declare const RealtimeCanvas: React.ForwardRefExoticComponent<RealtimeCanvasProps & React.RefAttributes<SnowconeCanvasHandle>>;

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

@@ -1,37 +1,37 @@
-export { Label } from '@snowcone-app/ui';
-export { Switch } from '@snowcone-app/ui';
-export { Separator } from '@snowcone-app/ui';
-export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent } from '@snowcone-app/ui';
-export { Spinner, spinnerVariants } from '@snowcone-app/ui';
-export type { SpinnerProps } from '@snowcone-app/ui';
-export { Surface, surfaceVariants, useSurface, SurfaceContext } from '@snowcone-app/ui';
-export type { SurfaceProps } from '@snowcone-app/ui';
-export { TextField } from '@snowcone-app/ui';
-export type { TextFieldProps } from '@snowcone-app/ui';
-export { Kbd, kbdVariants } from '@snowcone-app/ui';
-export type { KbdProps } from '@snowcone-app/ui';
-export { Fieldset, Legend } from '@snowcone-app/ui';
-export type { FieldsetProps, LegendProps } from '@snowcone-app/ui';
-export { Link, LinkIcon, linkVariants } from '@snowcone-app/ui';
-export type { LinkProps } from '@snowcone-app/ui';
-export { Tabs, TabsList, TabsTrigger, TabsContent, TabsRoot } from '@snowcone-app/ui';
-export { RadioGroup, RadioGroupItem, Radio } from '@snowcone-app/ui';
-export { Collapsible, CollapsibleTrigger, CollapsibleContent, CollapsibleRoot, Disclosure, DisclosureTrigger, DisclosureContent, } from '@snowcone-app/ui';
-export { Textarea, TextArea } from '@snowcone-app/ui';
-export type { TextareaProps } from '@snowcone-app/ui';
-export { Input } from '@snowcone-app/ui';
-export type { InputProps } from '@snowcone-app/ui';
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider, TooltipRoot } from '@snowcone-app/ui';
-export { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@snowcone-app/ui';
-export { Checkbox } from '@snowcone-app/ui';
-export { Badge, Chip, badgeVariants } from '@snowcone-app/ui';
-export type { BadgeProps } from '@snowcone-app/ui';
-export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuGroup, DropdownMenuPortal, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuRadioGroup, } from '@snowcone-app/ui';
-export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, SelectSeparator, SelectScrollUpButton, SelectScrollDownButton, } from '@snowcone-app/ui';
-export { Button, buttonVariants } from '@snowcone-app/ui';
-export type { ButtonProps } from '@snowcone-app/ui';
-export { Slider, SliderTrack, SliderThumb, SliderFill, SliderOutput } from '@snowcone-app/ui';
-export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor, PopoverRoot } from '@snowcone-app/ui';
+export { Label } from '../../vendor/ui';
+export { Switch } from '../../vendor/ui';
+export { Separator } from '../../vendor/ui';
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent } from '../../vendor/ui';
+export { Spinner, spinnerVariants } from '../../vendor/ui';
+export type { SpinnerProps } from '../../vendor/ui';
+export { Surface, surfaceVariants, useSurface, SurfaceContext } from '../../vendor/ui';
+export type { SurfaceProps } from '../../vendor/ui';
+export { TextField } from '../../vendor/ui';
+export type { TextFieldProps } from '../../vendor/ui';
+export { Kbd, kbdVariants } from '../../vendor/ui';
+export type { KbdProps } from '../../vendor/ui';
+export { Fieldset, Legend } from '../../vendor/ui';
+export type { FieldsetProps, LegendProps } from '../../vendor/ui';
+export { Link, LinkIcon, linkVariants } from '../../vendor/ui';
+export type { LinkProps } from '../../vendor/ui';
+export { Tabs, TabsList, TabsTrigger, TabsContent, TabsRoot } from '../../vendor/ui';
+export { RadioGroup, RadioGroupItem, Radio } from '../../vendor/ui';
+export { Collapsible, CollapsibleTrigger, CollapsibleContent, CollapsibleRoot, Disclosure, DisclosureTrigger, DisclosureContent, } from '../../vendor/ui';
+export { Textarea, TextArea } from '../../vendor/ui';
+export type { TextareaProps } from '../../vendor/ui';
+export { Input } from '../../vendor/ui';
+export type { InputProps } from '../../vendor/ui';
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider, TooltipRoot } from '../../vendor/ui';
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '../../vendor/ui';
+export { Checkbox } from '../../vendor/ui';
+export { Badge, Chip, badgeVariants } from '../../vendor/ui';
+export type { BadgeProps } from '../../vendor/ui';
+export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuGroup, DropdownMenuPortal, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuRadioGroup, } from '../../vendor/ui';
+export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, SelectSeparator, SelectScrollUpButton, SelectScrollDownButton, } from '../../vendor/ui';
+export { Button, buttonVariants } from '../../vendor/ui';
+export type { ButtonProps } from '../../vendor/ui';
+export { Slider, SliderTrack, SliderThumb, SliderFill, SliderOutput } from '../../vendor/ui';
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor, PopoverRoot } from '../../vendor/ui';
 export { ToolbarButton } from './toolbar-button';
 export type { ToolbarButtonProps } from './toolbar-button';
 export { NormalizedIcon, getIconSet, getScaleFactor, getNormalizedSize, SET_SCALE_FACTORS, SIZE_PRESETS, } from './normalized-icon';

package/dist/embed.mjs

@@ -1,218 +1,233 @@
-import { a as J, e as z } from "./validation-BpmNOvuY.js";
-import { b as Re, d as Ie, f as Te } from "./validation-BpmNOvuY.js";
-import { y as w } from "./HybridHistoryManager-NL3zyEl4.js";
-import { jsx as y, Fragment as Y } from "react/jsx-runtime";
-import { createContext as Q, useContext as X, useMemo as S, useRef as x, useState as N, useEffect as G } from "react";
-import { assertVariantSelected as Z, RenderSession as ee } from "@snowcone-app/sdk";
-import { u as ne, p as te } from "./usePieceGuideBundle-Cyl695jv.js";
-import { S as re, s as se } from "./template-fields-IgDV7PRY.js";
-import { D as Me, T as Ue, d as Be, r as Ce, a as Ne, e as Ge, f as Oe, g as qe, h as Fe, w as Pe } from "./template-fields-IgDV7PRY.js";
-const L = Q(void 0);
-function q() {
-  const e = X(L);
+import { a as H, e as J } from "./validation-BahKiJWj.js";
+import { b as Ie, d as Te, u as xe, f as Me, g as Ue, h as Be } from "./validation-BahKiJWj.js";
+import { y as R } from "./HybridHistoryManager-NL3zyEl4.js";
+import { jsx as $, Fragment as Y } from "react/jsx-runtime";
+import { createContext as Q, useContext as X, useMemo as k, useRef as T, useState as O, useEffect as q, forwardRef as Z } from "react";
+import { assertVariantSelected as ee, RenderSession as ne } from "@snowcone-app/sdk";
+import { u as te, p as re } from "./usePieceGuideBundle-Cyl695jv.js";
+import { S as se, s as ae } from "./template-fields-coO73lV3.js";
+import { D as Ne, T as Ge, d as Oe, r as qe, a as Ae, b as Fe, e as Pe, f as _e, g as je, h as Le, i as De, w as Ve } from "./template-fields-coO73lV3.js";
+import { u as We } from "./ThemeContext-Cl1JPVLZ.js";
+import { s as He } from "./CanvasStateV1-BQD8fCBU.js";
+const V = Q(void 0);
+function F() {
+  const e = X(V);
   if (!e)
     throw new Error(
       "useRealtimeMockups / <RealtimeCanvas> / <RealtimeMockup> must be rendered inside <RealtimeEmbed>. Wrap them: <RealtimeEmbed shop=… product=… design=… grantUrl=…>…</RealtimeEmbed>"
     );
   return e;
 }
-const E = "[RealtimeEmbed]";
-function ae(e) {
-  var s, l;
-  if ((s = e == null ? void 0 : e.requiredPlacements) != null && s.length)
-    return e.requiredPlacements.filter((t) => !t.autoFilledByVariant).map((t) => t.label);
+const w = "[RealtimeEmbed]";
+function oe(e) {
+  var o, i;
+  if ((o = e == null ? void 0 : e.requiredPlacements) != null && o.length)
+    return e.requiredPlacements.filter((r) => !r.autoFilledByVariant).map((r) => r.label);
   const n = new Set(
-    (((l = e == null ? void 0 : e.options) == null ? void 0 : l.combinations) ?? []).map((t) => t.variantId).filter((t) => typeof t == "string" && t !== "")
+    (((i = e == null ? void 0 : e.options) == null ? void 0 : i.combinations) ?? []).map((r) => r.variantId).filter((r) => typeof r == "string" && r !== "")
   );
   return !!(e != null && e.variantId) || n.size > 1 ? [] : (e == null ? void 0 : e.placements) ?? [];
 }
-function oe({ shop: e, product: n, design: r, hasGrant: s }) {
-  var u, o;
-  if (e || console.error(`${E} \`shop\` is required (your publishable shop id).`), s || console.error(
-    `${E} no grant source — pass \`grantUrl\` (a proxy to mintRealtimeGrant) or \`grant\`. Without it the session can never authorize and no mockup renders.`
-  ), (u = n == null ? void 0 : n.mockupIds) != null && u.length || console.error(
-    `${E} product.mockupIds is empty — pass the catalog scene codes (product.mockups[].id) you want rendered, e.g. ["FV1qjO"].`
+function ie({ shop: e, product: n, design: t, hasGrant: o }) {
+  var d, s;
+  if (e || console.error(`${w} \`shop\` is required (your publishable shop id).`), o || console.error(
+    `${w} no grant source — pass \`grantUrl\` (a proxy to mintRealtimeGrant) or \`grant\`. Without it the session can never authorize and no mockup renders.`
+  ), (d = n == null ? void 0 : n.mockupIds) != null && d.length || console.error(
+    `${w} product.mockupIds is empty — pass the catalog scene codes (product.mockups[].id) you want rendered, e.g. ["FV1qjO"].`
   ), n != null && n.options)
     try {
-      Z(n);
+      ee(n);
     } catch (a) {
-      console.error(`${E} ${a instanceof Error ? a.message : String(a)}`);
+      console.error(`${w} ${a instanceof Error ? a.message : String(a)}`);
     }
-  const l = r.toJSON(), t = l.activeArtboard, f = ae(n);
+  const i = t.toJSON(), r = i.activeArtboard, f = oe(n);
   f.length > 1 && console.error(
-    `${E} product ${n.productId} requires placements [${f.join(", ")}] but <RealtimeEmbed> renders a single placement ("${t}"). The render will time out waiting for the others. This product needs the eject path — see https://developers.snowcone.app/embed-mode#eject.`
-  ), (o = n == null ? void 0 : n.placements) != null && o.length && !n.placements.includes(t) && console.warn(
-    `${E} the design's placement "${t}" is not in product.placements [${n.placements.join(", ")}]. The canvas artboard name and renderState placement must equal a real product placement label, or the server renders a blank mockup. Fix the \`name\` passed to design({ name }).`
+    `${w} product ${n.productId} requires placements [${f.join(", ")}] but <RealtimeEmbed> renders a single placement ("${r}"). The render will time out waiting for the others. This product needs the eject path — see https://developers.snowcone.app/embed-mode#eject.`
+  ), (s = n == null ? void 0 : n.placements) != null && s.length && !n.placements.includes(r) && console.warn(
+    `${w} the design's placement "${r}" is not in product.placements [${n.placements.join(", ")}]. The canvas artboard name and renderState placement must equal a real product placement label, or the server renders a blank mockup. Fix the \`name\` passed to design({ name }).`
   );
-  const i = l.elements.map((a) => a.name).filter((a) => !!a), h = i.filter((a, p) => i.indexOf(a) !== p);
+  const c = i.elements.map((a) => a.name).filter((a) => !!a), h = c.filter((a, b) => c.indexOf(a) !== b);
   h.length && console.warn(
-    `${E} duplicate layer name(s) [${[...new Set(h)].join(", ")}] — useTextBinding(name) / useImageBinding(name) bind to the FIRST match, so a duplicate name makes a control edit the wrong layer. Keep names unique.`
+    `${w} duplicate layer name(s) [${[...new Set(h)].join(", ")}] — useTextBinding(name) / useImageBinding(name) bind to the FIRST match, so a duplicate name makes a control edit the wrong layer. Keep names unique.`
   );
 }
-function ie(e) {
+function ce(e) {
   if ("grantUrl" in e && e.grantUrl)
     return { grantUrl: e.grantUrl };
   const n = e.grant;
   return typeof n == "function" ? { getToken: n } : { getToken: () => Promise.resolve(n) };
 }
-const V = 8e3;
-function ce(e) {
-  return `[RealtimeEmbed] No mockup after ${Math.round(V / 1e3)}s. Common causes: a variant product missing \`variantId\` (pass \`product.options\` so the embed can flag it up front), a multi-placement product (the server waits for every required placement but <RealtimeEmbed> sends only "${e}" — pass \`product.requiredPlacements\` so this is flagged at mount; such products need the eject path), an unreachable or non-public asset URL in the design, or the placement "${e}" not existing on the product. The render may still arrive — this is a heads-up, not a failure.`;
+const K = 8e3;
+function le(e) {
+  return `[RealtimeEmbed] No mockup after ${Math.round(K / 1e3)}s. Common causes: a variant product missing \`variantId\` (pass \`product.options\` so the embed can flag it up front), a multi-placement product (the server waits for every required placement but <RealtimeEmbed> sends only "${e}" — pass \`product.requiredPlacements\` so this is flagged at mount; such products need the eject path), an unreachable or non-public asset URL in the design, or the placement "${e}" not existing on the product. The render may still arrive — this is a heads-up, not a failure.`;
 }
-function Ee(e) {
-  const { shop: n, product: r, design: s, throttleMs: l = 200, onMockups: t, onRenderError: f, wsUrl: i, services: h, children: u } = e, o = S(() => s.toJSON().activeArtboard, [s]), a = ne(r.variantId ?? r.defaultGvid), p = S(() => {
+function Se(e) {
+  const { shop: n, product: t, design: o, throttleMs: i = 200, onMockups: r, onRenderError: f, wsUrl: c, services: h, children: d } = e, s = k(() => o.toJSON().activeArtboard, [o]), a = te(t.variantId ?? t.defaultGvid), b = k(() => {
     if (!a) return null;
-    const c = s.toJSON().artboards[0];
-    return te(a, c) ?? null;
-  }, [a, s]), v = x(t), d = x(f);
-  v.current = t, d.current = f;
-  const [F, K] = N([]), [$, k] = N(!0), [P, R] = N(null), M = !!("grantUrl" in e && e.grantUrl || "grant" in e && e.grant), U = ie(e), W = "grantUrl" in U ? U.grantUrl : "getToken", B = `${r.productId}|${r.mockupIds.join(",")}|${r.variantId ?? ""}`, I = S(
+    const u = o.toJSON().artboards[0];
+    return re(a, u) ?? null;
+  }, [a, o]), p = T(r), l = T(f);
+  p.current = r, l.current = f;
+  const [I, y] = O([]), [S, E] = O(!0), [P, x] = O(null), B = !!("grantUrl" in e && e.grantUrl || "grant" in e && e.grant), C = ce(e), W = "grantUrl" in C ? C.grantUrl : "getToken", N = `${t.productId}|${t.mockupIds.join(",")}|${t.variantId ?? ""}`, M = k(
     () => {
       try {
-        return { session: new ee({ shop: n, product: r, wsUrl: i, ...U }) };
-      } catch (c) {
-        return { error: c instanceof Error ? c.message : String(c) };
+        return { session: new ne({ shop: n, product: t, wsUrl: c, ...C }) };
+      } catch (u) {
+        return { error: u instanceof Error ? u.message : String(u) };
       }
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [n, B, o, i, W]
-  ), g = "session" in I ? I.session : null, T = "error" in I ? I.error : null, _ = x(null);
-  G(() => {
-    var c;
-    if (typeof w < "u" && ((c = w.env) == null ? void 0 : c.NODE_ENV) !== "production") {
-      const m = `${n}|${B}|${o}|${M}`;
+    [n, N, s, c, W]
+  ), g = "session" in M ? M.session : null, U = "error" in M ? M.error : null, _ = T(null);
+  q(() => {
+    var u;
+    if (typeof R < "u" && ((u = R.env) == null ? void 0 : u.NODE_ENV) !== "production") {
+      const m = `${n}|${N}|${s}|${B}`;
       if (_.current === m) return;
-      _.current = m, oe({ shop: n, product: r, design: s, hasGrant: M });
+      _.current = m, ie({ shop: n, product: t, design: o, hasGrant: B });
     }
-  }, [n, B, o, M]);
-  const C = S(() => (c, m = l) => {
-    g && (R(null), k(!0), g.renderState(o, c, m).catch((b) => {
+  }, [n, N, s, B]);
+  const G = k(() => (u, m = i) => {
+    g && (x(null), E(!0), g.renderState(s, u, m).catch((v) => {
       var D;
-      const A = b instanceof Error ? b.message : String(b);
-      R(A), k(!1), (D = d.current) == null || D.call(d, A);
+      const L = v instanceof Error ? v.message : String(v);
+      x(L), E(!1), (D = l.current) == null || D.call(l, L);
     }));
-  }, [g, o, l]);
-  G(() => {
-    var c;
-    if (T) {
-      R(T), k(!1), (c = d.current) == null || c.call(d, T);
+  }, [g, s, i]);
+  q(() => {
+    var u;
+    if (U) {
+      x(U), E(!1), (u = l.current) == null || u.call(l, U);
       return;
     }
     if (g)
       return g.onMockups((m) => {
-        var b;
-        K(m), k(!1), (b = v.current) == null || b.call(v, m);
+        var v;
+        y(m), E(!1), (v = p.current) == null || v.call(p, m);
       }), g.onError((m) => {
-        var b;
-        R(m), k(!1), (b = d.current) == null || b.call(d, m);
-      }), C(s.toServerRequest()), () => g.close();
-  }, [g, T]), G(() => {
+        var v;
+        x(m), E(!1), (v = l.current) == null || v.call(l, m);
+      }), G(o.toServerRequest()), () => g.close();
+  }, [g, U]), q(() => {
     var m;
-    if (!$ || typeof w > "u" || ((m = w.env) == null ? void 0 : m.NODE_ENV) === "production") return;
-    const c = setTimeout(() => console.warn(ce(o)), V);
-    return () => clearTimeout(c);
-  }, [$, o]);
-  const H = S(
+    if (!S || typeof R > "u" || ((m = R.env) == null ? void 0 : m.NODE_ENV) === "production") return;
+    const u = setTimeout(() => console.warn(le(s)), K);
+    return () => clearTimeout(u);
+  }, [S, s]);
+  const z = k(
     () => ({
       session: g,
-      design: s,
-      placement: o,
-      product: r,
-      mockups: F,
-      isRendering: $,
+      design: o,
+      placement: s,
+      product: t,
+      mockups: I,
+      isRendering: S,
       error: P,
-      throttleMs: l,
-      pieceGuides: p,
-      pushRender: C
+      throttleMs: i,
+      pieceGuides: b,
+      pushRender: G
     }),
-    [g, s, o, r, F, $, P, l, p, C]
-  ), j = /* @__PURE__ */ y(L.Provider, { value: H, children: u });
-  return h ? /* @__PURE__ */ y(J, { services: h, children: j }) : j;
-}
-function Se({
-  children: e,
-  kit: n = "embed-only",
-  inheritTheme: r = !0,
-  maxHeight: s,
-  services: l,
-  className: t,
-  style: f
-}) {
-  const { design: i, placement: h, throttleMs: u, pieceGuides: o, pushRender: a } = q(), p = S(() => i.toJSON(), [i]);
-  return /* @__PURE__ */ y("div", { className: `app-modern${t ? ` ${t}` : ""}`, style: f, children: /* @__PURE__ */ y(
-    re,
-    {
-      kit: n,
-      inheritTheme: r,
-      services: l,
-      artboards: p.artboards,
-      activeArtboard: h,
-      initialElements: p.elements,
-      layoutConfig: s ? { maxHeight: s } : void 0,
-      overlay: e,
-      pieceGuides: o ?? void 0,
-      onChange: (v) => a(se(v), u)
-    }
-  ) });
+    [g, o, s, t, I, S, P, i, b, G]
+  ), j = /* @__PURE__ */ $(V.Provider, { value: z, children: d });
+  return h ? /* @__PURE__ */ $(H, { services: h, children: j }) : j;
 }
-const le = 1.2, O = [1200, 1400, 1600, 1800, 2e3, 2500, 3e3, 4e3];
-function ue(e) {
-  for (const n of O)
+const we = Z(
+  function({
+    children: n,
+    kit: t = "embed-only",
+    inheritTheme: o = !0,
+    maxHeight: i,
+    services: r,
+    onChange: f,
+    className: c,
+    style: h
+  }, d) {
+    const { design: s, placement: a, throttleMs: b, pieceGuides: p, pushRender: l } = F(), I = k(() => s.toJSON(), [s]), y = T(f);
+    return y.current = f, /* @__PURE__ */ $("div", { className: `sc-root${c ? ` ${c}` : ""}`, style: h, children: /* @__PURE__ */ $(
+      se,
+      {
+        ref: d,
+        kit: t,
+        inheritTheme: o,
+        services: r,
+        artboards: I.artboards,
+        activeArtboard: a,
+        initialElements: I.elements,
+        layoutConfig: i ? { maxHeight: i } : void 0,
+        overlay: n,
+        pieceGuides: p ?? void 0,
+        onChange: (S) => {
+          var E;
+          l(ae(S), b), (E = y.current) == null || E.call(y, S);
+        }
+      }
+    ) });
+  }
+), ue = 1.2, A = [1200, 1400, 1600, 1800, 2e3, 2500, 3e3, 4e3];
+function de(e) {
+  for (const n of A)
     if (n >= e) return n;
-  return O[O.length - 1];
+  return A[A.length - 1];
 }
-function de(e, n) {
-  if (!(e > 0) || !(n > 0) || n <= e * le) return null;
-  const r = ue(n);
-  return `[RealtimeMockup] mockup rendered at ${e}px but displayed at ~${n} device px — the preview will look soft. Pass \`product.width\` (e.g. ${r}) on <RealtimeEmbed> for a crisp preview.`;
+function me(e, n) {
+  if (!(e > 0) || !(n > 0) || n <= e * ue) return null;
+  const t = de(n);
+  return `[RealtimeMockup] mockup rendered at ${e}px but displayed at ~${n} device px — the preview will look soft. Pass \`product.width\` (e.g. ${t}) on <RealtimeEmbed> for a crisp preview.`;
 }
-function we({
+function ye({
   mockupId: e,
   fallback: n = null,
-  alt: r = "Live product mockup",
-  className: s,
-  style: l
+  alt: t = "Live product mockup",
+  className: o,
+  style: i
 }) {
-  const { mockups: t } = q(), f = x(/* @__PURE__ */ new Set()), i = e ? t.find((u) => u.mockupId === e && u.imageUrl) : t.find((u) => u.imageUrl);
-  if (!(i != null && i.imageUrl))
-    return /* @__PURE__ */ y(Y, { children: n });
-  const h = (u) => {
-    var d;
-    if (typeof w > "u" || ((d = w.env) == null ? void 0 : d.NODE_ENV) === "production" || typeof window > "u" || f.current.has(i.mockupId)) return;
-    const o = u.currentTarget, a = o.getBoundingClientRect().width;
+  const { mockups: r } = F(), f = T(/* @__PURE__ */ new Set()), c = e ? r.find((d) => d.mockupId === e && d.imageUrl) : r.find((d) => d.imageUrl);
+  if (!(c != null && c.imageUrl))
+    return /* @__PURE__ */ $(Y, { children: n });
+  const h = (d) => {
+    var l;
+    if (typeof R > "u" || ((l = R.env) == null ? void 0 : l.NODE_ENV) === "production" || typeof window > "u" || f.current.has(c.mockupId)) return;
+    const s = d.currentTarget, a = s.getBoundingClientRect().width;
     if (a <= 0) return;
-    const p = Math.round(a * (window.devicePixelRatio || 1)), v = de(o.naturalWidth, p);
-    v && (f.current.add(i.mockupId), console.warn(v));
+    const b = Math.round(a * (window.devicePixelRatio || 1)), p = me(s.naturalWidth, b);
+    p && (f.current.add(c.mockupId), console.warn(p));
   };
   return (
     // eslint-disable-next-line @next/next/no-img-element
-    /* @__PURE__ */ y("img", { src: i.imageUrl, alt: r, className: s, style: l, onLoad: h })
+    /* @__PURE__ */ $("img", { src: c.imageUrl, alt: t, className: o, style: i, onLoad: h })
   );
 }
-function ye() {
-  const { mockups: e, isRendering: n, error: r } = q();
-  return { mockups: e, isRendering: n, error: r };
+function ke() {
+  const { mockups: e, isRendering: n, error: t } = F();
+  return { mockups: e, isRendering: n, error: t };
 }
-z();
+J();
 export {
-  J as CanvasServicesProvider,
-  Me as DesignBuilder,
-  Se as RealtimeCanvas,
-  Ee as RealtimeEmbed,
-  we as RealtimeMockup,
-  Ue as TEMPLATE_FIELDS_KEY,
-  Re as createProxyGenerate,
-  Ie as createProxyImageSearch,
-  Be as design,
-  Ce as readTemplateFields,
-  Te as useCanvasServices,
-  Ne as useColorBinding,
-  Ge as useElementByName,
-  Oe as useFontBinding,
-  qe as useImageBinding,
-  ye as useRealtimeMockups,
-  Fe as useTextBinding,
-  oe as validateEmbed,
-  Pe as withTemplateFields
+  H as CanvasServicesProvider,
+  Ne as DesignBuilder,
+  we as RealtimeCanvas,
+  Se as RealtimeEmbed,
+  ye as RealtimeMockup,
+  Ge as TEMPLATE_FIELDS_KEY,
+  Ie as createProxyGenerate,
+  Te as createProxyImageSearch,
+  Oe as design,
+  qe as readTemplateFields,
+  He as serializeState,
+  xe as useArtboards,
+  Me as useCanvasServices,
+  Ae as useColorBinding,
+  Fe as useCommands,
+  We as useEditor,
+  Pe as useElementByName,
+  Ue as useExport,
+  _e as useFontBinding,
+  je as useImageBinding,
+  Be as useLayers,
+  ke as useRealtimeMockups,
+  Le as useSelectedElement,
+  De as useTextBinding,
+  ie as validateEmbed,
+  Ve as withTemplateFields
 };
 //# sourceMappingURL=embed.mjs.map