@snowcone-app/canvas 0.35.4 → 0.36.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,24 +1,24 @@
1
- import { E as Le, p as Ve, q as Be, C as Fe, r as H, t as J, v as Ue, w as Me, x as je, y as qe, z as ze, h as Ke, e as We } from "./useCommands-D16Tq-B-.js";
2
- import { E as T, y as be, z as L } from "./FontAnalyzer-CEYA_6fY.js";
3
- import { jsx as l, jsxs as N, Fragment as Ge } from "react/jsx-runtime";
4
- import { useContext as He, createContext as Je, useRef as x, useState as C, useMemo as O, useCallback as F, useLayoutEffect as Q, useEffect as $, useSyncExternalStore as z, Component as Qe, forwardRef as we, useId as de, memo as Ye, isValidElement as Ee } from "react";
5
- import { assertVariantSelected as Xe, RenderSession as Ze, createCartDetail as et } from "@snowcone-app/sdk";
6
- import { s as le, B as tt, E as nt, r as rt, i as ot } from "./design-builder-CqgTpp9B.js";
7
- import { u as it, p as st } from "./usePieceGuideBundle-BUQKb0Ja.js";
8
- import { D as at, C as dt, f as lt, d as ct } from "./template-fields-jgE6czak.js";
1
+ import { E as Ue, p as Me, q as qe, C as je, r as H, t as J, v as ze, w as Ke, x as We, y as Ge, z as He, h as Je, e as Qe } from "./useCommands-D16Tq-B-.js";
2
+ import { E as T, y as xe, z as V } from "./FontAnalyzer-CEYA_6fY.js";
3
+ import { jsx as l, jsxs as N, Fragment as Ye } from "react/jsx-runtime";
4
+ import { useContext as Xe, createContext as Ze, useRef as x, useState as C, useMemo as O, useCallback as U, useLayoutEffect as Q, useEffect as _, useSyncExternalStore as z, Component as et, forwardRef as Re, useId as ce, memo as tt, isValidElement as Se } from "react";
5
+ import { assertVariantSelected as nt, RenderSession as rt, createCartDetail as ot } from "@snowcone-app/sdk";
6
+ import { s as ue, B as it, E as st, r as at, i as dt } from "./design-builder-CqgTpp9B.js";
7
+ import { u as lt, p as ct } from "./usePieceGuideBundle-BUQKb0Ja.js";
8
+ import { D as ut, C as mt, f as ft, d as pt } from "./template-fields-jgE6czak.js";
9
9
  import "./ExportManager-D1PAlOiE.js";
10
10
  import "./CanvasStateV1-BoG8ld4D.js";
11
- const xe = Je(void 0);
11
+ const ke = Ze(void 0);
12
12
  function K() {
13
- const t = He(xe);
13
+ const t = Xe(ke);
14
14
  if (!t)
15
15
  throw new Error(
16
16
  "useRealtimeMockups / <RealtimeCanvas> / <RealtimeMockup> must be rendered inside <RealtimeEmbed>. Wrap them: <RealtimeEmbed shop=… product=… design=… grantUrl=…>…</RealtimeEmbed>"
17
17
  );
18
18
  return t;
19
19
  }
20
- const ut = "[RealtimeEmbed]";
21
- function mt(t) {
20
+ const ht = "[RealtimeEmbed]";
21
+ function Ce(t) {
22
22
  var r, i;
23
23
  if ((r = t == null ? void 0 : t.requiredPlacements) != null && r.length)
24
24
  return t.requiredPlacements.filter((s) => !s.autoFilledByVariant).map((s) => s.label);
@@ -27,7 +27,7 @@ function mt(t) {
27
27
  );
28
28
  return !!(t != null && t.variantId) || e.size > 1 ? [] : (t == null ? void 0 : t.placements) ?? [];
29
29
  }
30
- function Re({ shop: t, product: e, design: n, hasGrant: r }) {
30
+ function Ie({ shop: t, product: e, design: n, hasGrant: r }) {
31
31
  var y, b;
32
32
  const i = [];
33
33
  if (t || i.push({
@@ -44,7 +44,7 @@ function Re({ shop: t, product: e, design: n, hasGrant: r }) {
44
44
  message: 'product.mockupIds is empty — pass the catalog scene codes (product.mockups[].id) you want rendered, e.g. ["FV1qjO"].'
45
45
  }), e != null && e.options)
46
46
  try {
47
- Xe(e);
47
+ nt(e);
48
48
  } catch (o) {
49
49
  i.push({
50
50
  severity: "error",
@@ -52,8 +52,8 @@ function Re({ shop: t, product: e, design: n, hasGrant: r }) {
52
52
  message: o instanceof Error ? o.message : String(o)
53
53
  });
54
54
  }
55
- const s = n.toJSON(), d = s.artboards.map((o) => o.name), c = mt(e), u = c.filter((o) => !d.includes(o));
56
- c.length > 1 && u.length > 0 && i.push({
55
+ const s = n.toJSON(), d = s.artboards.map((o) => o.name), c = Ce(e), u = c.filter((o) => !d.includes(o));
56
+ c.length > 1 && d.length > 1 && u.length > 0 && i.push({
57
57
  severity: "error",
58
58
  issue: "multi-placement",
59
59
  message: `product ${e.productId} requires placements [${c.join(", ")}] but the design only has artboards [${d.join(", ")}] — missing [${u.join(", ")}]. The render would time out waiting for the missing canvas_states. Add each missing placement to the seed: design(…).artboard('` + u[0] + "', { width, height })… (ADR-0088), or use the eject path — see https://developers.snowcone.app/embed-mode#eject."
@@ -71,11 +71,11 @@ function Re({ shop: t, product: e, design: n, hasGrant: r }) {
71
71
  message: `duplicate layer name(s) [${[...new Set(m)].join(", ")}] — useTextBinding(name) / useImageBinding(name) bind to the FIRST match, so a duplicate name makes a control edit the wrong layer. Keep names unique.`
72
72
  }), i;
73
73
  }
74
- function ft(t) {
75
- for (const e of Re(t))
76
- (e.severity === "error" && e.issue !== "placement-mismatch" ? console.error : console.warn)(`${ut} ${e.message}`);
74
+ function gt(t) {
75
+ for (const e of Ie(t))
76
+ (e.severity === "error" && e.issue !== "placement-mismatch" ? console.error : console.warn)(`${ht} ${e.message}`);
77
77
  }
78
- function Se({ registry: t, store: e, product: n }) {
78
+ function Oe({ registry: t, store: e, product: n }) {
79
79
  const r = [], i = t.getParts(), s = t.getTextFields(), d = t.requiresCanvasPartNames();
80
80
  d.length > 0 && !t.hasCanvas() && r.push({
81
81
  code: "A_REQUIRES_CANVAS",
@@ -140,13 +140,13 @@ function Se({ registry: t, store: e, product: n }) {
140
140
  return { findings: r, parts: b };
141
141
  }
142
142
  const G = [];
143
- function pt(t) {
143
+ function yt(t) {
144
144
  return G.push(t), () => {
145
145
  const e = G.indexOf(t);
146
146
  e !== -1 && G.splice(e, 1);
147
147
  };
148
148
  }
149
- function rn() {
149
+ function an() {
150
150
  const t = G[G.length - 1];
151
151
  if (!t)
152
152
  throw new T(
@@ -156,18 +156,18 @@ function rn() {
156
156
  );
157
157
  return t.compute();
158
158
  }
159
- const ke = 8e3;
160
- function ht(t) {
161
- return `[RealtimeEmbed] No mockup after ${Math.round(ke / 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 "${t}" — 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 "${t}" not existing on the product. The render may still arrive — this is a heads-up, not a failure.`;
159
+ const Ne = 8e3;
160
+ function vt(t) {
161
+ return `[RealtimeEmbed] No mockup after ${Math.round(Ne / 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 "${t}" — 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 "${t}" not existing on the product. The render may still arrive — this is a heads-up, not a failure.`;
162
162
  }
163
- function gt(t) {
163
+ function bt(t) {
164
164
  if ("grantUrl" in t && t.grantUrl)
165
165
  return { grantUrl: t.grantUrl };
166
166
  const e = t.grant;
167
167
  return typeof e == "function" ? { getToken: e } : { getToken: () => Promise.resolve(e) };
168
168
  }
169
- function Ce({ error: t, onRetry: e }) {
170
- const n = be(t) ? t.code : "EDITOR_ERROR";
169
+ function Te({ error: t, onRetry: e }) {
170
+ const n = xe(t) ? t.code : "EDITOR_ERROR";
171
171
  return /* @__PURE__ */ N(
172
172
  "div",
173
173
  {
@@ -213,7 +213,7 @@ function Ce({ error: t, onRetry: e }) {
213
213
  }
214
214
  );
215
215
  }
216
- class yt extends Qe {
216
+ class wt extends et {
217
217
  constructor() {
218
218
  super(...arguments), this.state = { caught: null };
219
219
  }
@@ -222,20 +222,20 @@ class yt extends Qe {
222
222
  }
223
223
  componentDidCatch(e) {
224
224
  var n;
225
- rt(e), typeof L < "u" && ((n = L.env) == null ? void 0 : n.NODE_ENV) !== "production" && console.error("[Editor.Root] contained a composition error:", e);
225
+ at(e), typeof V < "u" && ((n = V.env) == null ? void 0 : n.NODE_ENV) !== "production" && console.error("[Editor.Root] contained a composition error:", e);
226
226
  }
227
227
  render() {
228
- return this.state.caught ? /* @__PURE__ */ l(Ce, { error: this.state.caught }) : this.props.children;
228
+ return this.state.caught ? /* @__PURE__ */ l(Te, { error: this.state.caught }) : this.props.children;
229
229
  }
230
230
  }
231
- function vt({ reportedError: t, onRetry: e, children: n }) {
231
+ function Et({ reportedError: t, onRetry: e, children: n }) {
232
232
  if (t) {
233
- const r = be(t) && t.code === "E_CHUNK_LOAD_FAILED";
234
- return /* @__PURE__ */ l(Ce, { error: t, onRetry: r ? e : void 0 });
233
+ const r = xe(t) && t.code === "E_CHUNK_LOAD_FAILED";
234
+ return /* @__PURE__ */ l(Te, { error: t, onRetry: r ? e : void 0 });
235
235
  }
236
- return /* @__PURE__ */ l(yt, { reportedError: null, onRetry: e, children: n });
236
+ return /* @__PURE__ */ l(wt, { reportedError: null, onRetry: e, children: n });
237
237
  }
238
- function bt(t) {
238
+ function xt(t) {
239
239
  const {
240
240
  shop: e,
241
241
  product: n,
@@ -261,7 +261,7 @@ function bt(t) {
261
261
  f({ design: r, label: h });
262
262
  },
263
263
  [r, g]
264
- ), V = O(() => {
264
+ ), B = O(() => {
265
265
  const h = r.toJSON().artboards[0];
266
266
  if (h)
267
267
  return {
@@ -276,107 +276,109 @@ function bt(t) {
276
276
  m.commerce.getVersion,
277
277
  m.commerce.getVersion
278
278
  );
279
- const R = m.commerce.renderVariantId(), _ = it(R ?? n.variantId ?? n.defaultGvid), D = O(() => {
280
- if (!_) return null;
279
+ const R = m.commerce.renderVariantId(), A = lt(R ?? n.variantId ?? n.defaultGvid), P = O(() => {
280
+ if (!A) return null;
281
281
  const h = r.toJSON().artboards[0];
282
- return st(_, h) ?? null;
283
- }, [_, r]), P = x(s), A = x(d), j = x(c);
284
- P.current = s, A.current = d, j.current = c;
285
- const [ce, _e] = C([]), [Y, W] = C(!0), [ue, X] = C(null), ne = !!("grantUrl" in t && t.grantUrl || "grant" in t && t.grant), re = gt(t), Ae = "grantUrl" in re ? re.grantUrl : "getToken", me = `${n.productId}|${n.mockupIds.join(",")}|${n.variantId ?? ""}`, q = `${e}|${me}|${o}|${ne}`, oe = O(() => {
282
+ return ct(A, h) ?? null;
283
+ }, [A, r]), L = x(s), D = x(d), q = x(c);
284
+ L.current = s, D.current = d, q.current = c;
285
+ const [me, Le] = C([]), [Y, W] = C(!0), [fe, X] = C(null), re = !!("grantUrl" in t && t.grantUrl || "grant" in t && t.grant), oe = bt(t), Ve = "grantUrl" in oe ? oe.grantUrl : "getToken", pe = `${n.productId}|${n.mockupIds.join(",")}|${n.variantId ?? ""}`, j = `${e}|${pe}|${o}|${re}`, ie = O(() => {
286
286
  var I;
287
- const h = Re({ shop: e, product: n, design: r, hasGrant: ne });
287
+ const h = Ie({ shop: e, product: n, design: r, hasGrant: re });
288
288
  if (b !== "throw") return h;
289
- const E = h.find((B) => B.severity === "error");
289
+ const E = h.find((F) => F.severity === "error");
290
290
  if (E)
291
291
  throw new T("E_EMBED_CONFIG", E.message, {
292
292
  issue: E.issue,
293
293
  docSlug: "embed-mode"
294
294
  });
295
- for (const B of h)
296
- typeof L < "u" && ((I = L.env) == null ? void 0 : I.NODE_ENV) !== "production" && console.warn(`[Editor.Root] ${B.message}`);
295
+ for (const F of h)
296
+ typeof V < "u" && ((I = V.env) == null ? void 0 : I.NODE_ENV) !== "production" && console.warn(`[Editor.Root] ${F.message}`);
297
297
  return h;
298
- }, [q, b]), fe = x(null);
299
- $(() => {
298
+ }, [j, b]), he = x(null);
299
+ _(() => {
300
300
  var h;
301
- if (oe.length !== 0 && fe.current !== q) {
302
- fe.current = q;
303
- for (const E of oe) (h = j.current) == null || h.call(j, E);
301
+ if (ie.length !== 0 && he.current !== j) {
302
+ he.current = j;
303
+ for (const E of ie) (h = q.current) == null || h.call(q, E);
304
304
  }
305
- }, [oe, q]);
306
- const pe = x(null);
307
- $(() => {
305
+ }, [ie, j]);
306
+ const ge = x(null);
307
+ _(() => {
308
308
  var h;
309
- if (b === "warn" && typeof L < "u" && ((h = L.env) == null ? void 0 : h.NODE_ENV) !== "production") {
310
- if (pe.current === q) return;
311
- pe.current = q, ft({ shop: e, product: n, design: r, hasGrant: ne });
309
+ if (b === "warn" && typeof V < "u" && ((h = V.env) == null ? void 0 : h.NODE_ENV) !== "production") {
310
+ if (ge.current === j) return;
311
+ ge.current = j, gt({ shop: e, product: n, design: r, hasGrant: re });
312
312
  }
313
- }, [q, b]);
313
+ }, [j, b]);
314
314
  const Z = O(
315
315
  () => {
316
316
  try {
317
- return { session: new Ze({ shop: e, product: n, wsUrl: u, ...re }) };
317
+ return { session: new rt({ shop: e, product: n, wsUrl: u, ...oe }) };
318
318
  } catch (h) {
319
319
  return { error: h instanceof Error ? h.message : String(h) };
320
320
  }
321
321
  },
322
322
  // eslint-disable-next-line react-hooks/exhaustive-deps
323
- [e, me, o, u, Ae]
323
+ [e, pe, o, u, Ve]
324
324
  ), k = "session" in Z ? Z.session : null, ee = "error" in Z ? Z.error : null, te = O(() => (h, E = i) => {
325
325
  if (!k) return;
326
326
  X(null), W(!0);
327
- const I = (U) => {
328
- var ye;
329
- const ge = U instanceof Error ? U.message : String(U);
330
- X(ge), W(!1), (ye = A.current) == null || ye.call(A, ge);
331
- }, B = h.artboards ?? [];
332
- if (B.length > 1) {
333
- for (const U of B)
334
- k.renderState(
335
- typeof U.name == "string" && U.name ? U.name : o,
336
- { schemaVersion: h.schemaVersion, artboards: [U] },
337
- E
338
- ).catch(I);
327
+ const I = ($) => {
328
+ var we;
329
+ const ne = $ instanceof Error ? $.message : String($);
330
+ X(ne), W(!1), (we = D.current) == null || we.call(D, ne);
331
+ }, F = ($, ne) => void k.renderState($, { schemaVersion: h.schemaVersion, artboards: [ne] }, E).catch(I), ae = h.artboards ?? [];
332
+ if (ae.length > 1) {
333
+ for (const $ of ae)
334
+ F(typeof $.name == "string" && $.name ? $.name : o, $);
335
+ return;
336
+ }
337
+ const ve = Ce(n), be = ae[0];
338
+ if (be && ve.length > 1) {
339
+ for (const $ of ve)
340
+ F($, { ...be, name: $ });
339
341
  return;
340
342
  }
341
343
  k.renderState(o, h, E).catch(I);
342
- }, [k, o, i]);
343
- $(() => {
344
+ }, [k, o, n, i]);
345
+ _(() => {
344
346
  var h;
345
347
  if (ee) {
346
- X(ee), W(!1), (h = A.current) == null || h.call(A, ee);
348
+ X(ee), W(!1), (h = D.current) == null || h.call(D, ee);
347
349
  return;
348
350
  }
349
351
  if (k)
350
352
  return k.onMockups((E) => {
351
353
  var I;
352
- _e(E), W(!1), (I = P.current) == null || I.call(P, E);
354
+ Le(E), W(!1), (I = L.current) == null || I.call(L, E);
353
355
  }), k.onError((E) => {
354
356
  var I;
355
- X(E), W(!1), (I = A.current) == null || I.call(A, E);
357
+ X(E), W(!1), (I = D.current) == null || I.call(D, E);
356
358
  }), te(r.toServerRequest()), () => k.close();
357
359
  }, [k, ee]);
358
- const ie = x({
360
+ const se = x({
359
361
  session: null,
360
362
  variantId: void 0
361
363
  });
362
- $(() => {
364
+ _(() => {
363
365
  if (!k || !R) return;
364
- const h = ie.current, E = h.session === k ? h.variantId : n.variantId;
366
+ const h = se.current, E = h.session === k ? h.variantId : n.variantId;
365
367
  if (R === E) {
366
- ie.current = { session: k, variantId: E };
368
+ se.current = { session: k, variantId: E };
367
369
  return;
368
370
  }
369
- ie.current = { session: k, variantId: R }, k.setProduct({ ...n, variantId: R }), te(le(m.store.getState()));
370
- }, [k, R]), $(() => {
371
+ se.current = { session: k, variantId: R }, k.setProduct({ ...n, variantId: R }), te(ue(m.store.getState()));
372
+ }, [k, R]), _(() => {
371
373
  if (!Y) return;
372
374
  const h = setTimeout(() => {
373
- var I, B;
374
- const E = ht(o);
375
- typeof L < "u" && ((I = L.env) == null ? void 0 : I.NODE_ENV) !== "production" && console.warn(E), (B = j.current) == null || B.call(j, { severity: "warn", issue: "slow-render", message: E });
376
- }, ke);
375
+ var I, F;
376
+ const E = vt(o);
377
+ typeof V < "u" && ((I = V.env) == null ? void 0 : I.NODE_ENV) !== "production" && console.warn(E), (F = q.current) == null || F.call(q, { severity: "warn", issue: "slow-render", message: E });
378
+ }, Ne);
377
379
  return () => clearTimeout(h);
378
380
  }, [Y, o]);
379
- const De = O(
381
+ const Be = O(
380
382
  () => ({
381
383
  session: k,
382
384
  design: r,
@@ -386,48 +388,48 @@ function bt(t) {
386
388
  placements: g,
387
389
  selectPlacement: v,
388
390
  product: n,
389
- mockups: ce,
391
+ mockups: me,
390
392
  isRendering: Y,
391
- error: ue,
393
+ error: fe,
392
394
  throttleMs: i,
393
- pieceGuides: D,
395
+ pieceGuides: P,
394
396
  pushRender: te,
395
397
  stateStore: m.store
396
398
  }),
397
- [k, r, S, g, v, n, ce, Y, ue, i, D, te, m.store]
398
- ), Pe = z(
399
+ [k, r, S, g, v, n, me, Y, fe, i, P, te, m.store]
400
+ ), Fe = z(
399
401
  m.registry.subscribe,
400
402
  m.registry.getVersion,
401
403
  m.registry.getVersion
402
404
  );
403
405
  O(() => {
404
406
  y(
405
- Se({ registry: m.registry, store: m.store, product: n })
407
+ Oe({ registry: m.registry, store: m.store, product: n })
406
408
  ), m.registry.validate();
407
- }, [m.registry, Pe]);
408
- const he = /* @__PURE__ */ l(Be.Provider, { value: m, children: /* @__PURE__ */ l(xe.Provider, { value: De, children: /* @__PURE__ */ l(tt.Provider, { value: m.registry, children: /* @__PURE__ */ l(
409
- nt,
409
+ }, [m.registry, Fe]);
410
+ const ye = /* @__PURE__ */ l(qe.Provider, { value: m, children: /* @__PURE__ */ l(ke.Provider, { value: Be, children: /* @__PURE__ */ l(it.Provider, { value: m.registry, children: /* @__PURE__ */ l(
411
+ st,
410
412
  {
411
- ...V ? { initialArtboardConfig: V } : {},
413
+ ...B ? { initialArtboardConfig: B } : {},
412
414
  children: p
413
415
  }
414
416
  ) }) }) });
415
- return a ? /* @__PURE__ */ l(Fe, { services: a, children: he }) : he;
417
+ return a ? /* @__PURE__ */ l(je, { services: a, children: ye }) : ye;
416
418
  }
417
- function Ie(t) {
419
+ function $e(t) {
418
420
  const { design: e, product: n, onAudit: r } = t, i = `${n.productId}|${n.variantId ?? ""}`, s = x(null), d = x(null), [c, u] = C(null);
419
421
  (s.current === null || s.current.design !== e) && (s.current = {
420
422
  design: e,
421
423
  internals: {
422
- store: new at(e.toJSON()),
423
- registry: new Le()
424
+ store: new ut(e.toJSON()),
425
+ registry: new Ue()
424
426
  }
425
- }), (d.current === null || d.current.productIdentity !== i) && (d.current = { productIdentity: i, commerce: new dt(n) });
427
+ }), (d.current === null || d.current.productIdentity !== i) && (d.current = { productIdentity: i, commerce: new mt(n) });
426
428
  const a = O(
427
429
  () => ({
428
430
  ...s.current.internals,
429
431
  commerce: d.current.commerce,
430
- ...Ve(u)
432
+ ...Me(u)
431
433
  }),
432
434
  // eslint-disable-next-line react-hooks/exhaustive-deps
433
435
  [s.current.internals, d.current.commerce]
@@ -435,19 +437,19 @@ function Ie(t) {
435
437
  p.current = n;
436
438
  const m = x(r);
437
439
  m.current = r;
438
- const y = x(null), b = F((w) => {
440
+ const y = x(null), b = U((w) => {
439
441
  y.current = w;
440
- }, []), o = F(
441
- () => Se({
442
+ }, []), o = U(
443
+ () => Oe({
442
444
  registry: s.current.internals.registry,
443
445
  store: s.current.internals.store,
444
446
  product: p.current
445
447
  }),
446
448
  []
447
449
  );
448
- Q(() => pt({ compute: o }), [o]);
450
+ Q(() => yt({ compute: o }), [o]);
449
451
  const g = x(!1);
450
- return $(() => {
452
+ return _(() => {
451
453
  let w = !1;
452
454
  return queueMicrotask(() => {
453
455
  var f;
@@ -458,21 +460,21 @@ function Ie(t) {
458
460
  }, [o]), // `display: contents` — the .sc-root scope without a layout box, so the
459
461
  // host's grid/flex sees the parts directly (and the legacy RealtimeEmbed
460
462
  // wrapper, which had no DOM at all, stays layout-identical).
461
- /* @__PURE__ */ l("div", { className: "sc-root", style: { display: "contents" }, "data-sc-part": "root", children: /* @__PURE__ */ l(vt, { reportedError: c, onRetry: () => u(null), children: /* @__PURE__ */ l(bt, { ...t, internals: a, recordAudit: b }) }) });
463
+ /* @__PURE__ */ l("div", { className: "sc-root", style: { display: "contents" }, "data-sc-part": "root", children: /* @__PURE__ */ l(Et, { reportedError: c, onRetry: () => u(null), children: /* @__PURE__ */ l(xt, { ...t, internals: a, recordAudit: b }) }) });
462
464
  }
463
- let wt = () => import("./EditorCanvasImpl-Dl75xnjk.js").then((t) => t.EditorCanvasImpl);
464
- function Oe() {
465
- return wt();
465
+ let Rt = () => import("./EditorCanvasImpl-Ba6Lj6yQ.js").then((t) => t.EditorCanvasImpl);
466
+ function _e() {
467
+ return Rt();
466
468
  }
467
- const Et = we(function({ children: e, maxHeight: n, floatingToolbar: r = !0, className: i, style: s }, d) {
469
+ const St = Re(function({ children: e, maxHeight: n, floatingToolbar: r = !0, className: i, style: s }, d) {
468
470
  const c = H("Editor.Canvas");
469
471
  J("Editor.Canvas", { floatingToolbar: r });
470
- const u = de();
472
+ const u = ce();
471
473
  Q(() => c.registry.registerCanvas(u), [c.registry, u]);
472
474
  const [a, p] = C(null);
473
- return $(() => {
475
+ return _(() => {
474
476
  let m = !1;
475
- return Oe().then(
477
+ return _e().then(
476
478
  (y) => {
477
479
  m || p(() => y);
478
480
  },
@@ -517,7 +519,7 @@ const Et = we(function({ children: e, maxHeight: n, floatingToolbar: r = !0, cla
517
519
  }
518
520
  );
519
521
  });
520
- function xt() {
522
+ function kt() {
521
523
  const { placements: t, placement: e, selectPlacement: n } = K();
522
524
  return O(
523
525
  () => ({
@@ -528,8 +530,8 @@ function xt() {
528
530
  [t, e, n]
529
531
  );
530
532
  }
531
- function Rt({ className: t, style: e }) {
532
- const { placements: n, select: r } = xt();
533
+ function Ct({ className: t, style: e }) {
534
+ const { placements: n, select: r } = kt();
533
535
  return n.length < 2 ? null : /* @__PURE__ */ l(
534
536
  "div",
535
537
  {
@@ -564,8 +566,8 @@ function Rt({ className: t, style: e }) {
564
566
  }
565
567
  );
566
568
  }
567
- const St = 200, kt = 400;
568
- function Ct() {
569
+ const It = 200, Ot = 400;
570
+ function Nt() {
569
571
  return Array.from({ length: 10 }, () => ({
570
572
  left: 2 + Math.random() * 96,
571
573
  top: 2 + Math.random() * 96,
@@ -574,10 +576,10 @@ function Ct() {
574
576
  size: 3 + Math.random() * 5
575
577
  }));
576
578
  }
577
- let ve = !1;
578
- function It() {
579
- if (!(ve || typeof CSS > "u" || typeof CSS.registerProperty != "function")) {
580
- ve = !0;
579
+ let Ee = !1;
580
+ function Tt() {
581
+ if (!(Ee || typeof CSS > "u" || typeof CSS.registerProperty != "function")) {
582
+ Ee = !0;
581
583
  try {
582
584
  CSS.registerProperty({ name: "--sc-prism-mount", syntax: "<number>", initialValue: "0", inherits: !0 });
583
585
  } catch {
@@ -588,22 +590,22 @@ function It() {
588
590
  }
589
591
  }
590
592
  }
591
- const Ne = Ye(function({
593
+ const Ae = tt(function({
592
594
  visible: e = !0,
593
595
  onExited: n,
594
596
  variant: r = "dark"
595
597
  }) {
596
- It();
598
+ Tt();
597
599
  const [i, s] = C([]);
598
- $(() => {
599
- s(Ct());
600
+ _(() => {
601
+ s(Nt());
600
602
  }, []);
601
603
  const [d, c] = C(!1);
602
- $(() => {
604
+ _(() => {
603
605
  const p = requestAnimationFrame(() => c(!0));
604
606
  return () => cancelAnimationFrame(p);
605
607
  }, []);
606
- const u = F(
608
+ const u = U(
607
609
  (p) => {
608
610
  p.propertyName === "background-color" && (e || n == null || n());
609
611
  },
@@ -638,39 +640,39 @@ const Ne = Ye(function({
638
640
  }
639
641
  );
640
642
  });
641
- function Te(t) {
643
+ function De(t) {
642
644
  const [e, n] = C(!1), [r, i] = C(!1), s = x(null), d = x(null), c = x(!1);
643
- c.current = e, $(() => (t ? (i(!1), d.current && clearTimeout(d.current), s.current = setTimeout(() => n(!0), St)) : (s.current && (clearTimeout(s.current), s.current = null), c.current && (i(!0), d.current = setTimeout(() => i(!1), kt))), () => {
645
+ c.current = e, _(() => (t ? (i(!1), d.current && clearTimeout(d.current), s.current = setTimeout(() => n(!0), It)) : (s.current && (clearTimeout(s.current), s.current = null), c.current && (i(!0), d.current = setTimeout(() => i(!1), Ot))), () => {
644
646
  s.current && clearTimeout(s.current), d.current && clearTimeout(d.current);
645
647
  }), [t]);
646
- const u = F(() => n(!1), []);
648
+ const u = U(() => n(!1), []);
647
649
  return {
648
650
  showOverlay: e,
649
651
  overlayVisible: t || r,
650
652
  handleExited: u
651
653
  };
652
654
  }
653
- const Ot = 1.2, se = [1200, 1400, 1600, 1800, 2e3, 2500, 3e3, 4e3];
654
- function Nt(t) {
655
- for (const e of se)
655
+ const $t = 1.2, de = [1200, 1400, 1600, 1800, 2e3, 2500, 3e3, 4e3];
656
+ function _t(t) {
657
+ for (const e of de)
656
658
  if (e >= t) return e;
657
- return se[se.length - 1];
659
+ return de[de.length - 1];
658
660
  }
659
- function Tt(t, e) {
660
- if (!(t > 0) || !(e > 0) || e <= t * Ot) return null;
661
- const n = Nt(e);
661
+ function At(t, e) {
662
+ if (!(t > 0) || !(e > 0) || e <= t * $t) return null;
663
+ const n = _t(e);
662
664
  return `[RealtimeMockup] mockup rendered at ${t}px but displayed at ~${e} device px — the preview will look soft. Pass \`product.width\` (e.g. ${n}) on the embed for a crisp preview.`;
663
665
  }
664
- function $t(t) {
666
+ function Dt(t) {
665
667
  if (t === void 0 || t === !0 || t === "dark") return "dark";
666
- if (t === "light" || t === "host-owned" || Ee(t)) return t;
668
+ if (t === "light" || t === "host-owned" || Se(t)) return t;
667
669
  throw new T(
668
670
  "E_PREVIEW_NO_LOADER",
669
671
  `Editor.Preview: invalid loadingOverlay value ${JSON.stringify(t)}. A mockup preview always has a render-in-flight treatment (the loader paints over the still-visible previous mockup). Omit the prop for the default rainbow overlay, pass "dark" | "light", pass a custom ReactElement, or declare "host-owned" if the host renders its own indicator off data-sc-preview-state / <Editor.LoadingOverlay>.`,
670
672
  { docSlug: "preview-loading-overlay" }
671
673
  );
672
674
  }
673
- function $e({
675
+ function Pe({
674
676
  mockupId: t,
675
677
  fallback: e = null,
676
678
  alt: n = "Live product mockup",
@@ -680,15 +682,15 @@ function $e({
680
682
  }) {
681
683
  const { mockups: d, error: c, isRendering: u } = K();
682
684
  J("Editor.Preview", { ...t !== void 0 ? { mockupId: t } : {} });
683
- const a = $t(r), p = a === "dark" || a === "light" ? a : null, m = Ee(a) ? a : null, y = a !== "host-owned", { showOverlay: b, overlayVisible: o, handleExited: g } = Te(
685
+ const a = Dt(r), p = a === "dark" || a === "light" ? a : null, m = Se(a) ? a : null, y = a !== "host-owned", { showOverlay: b, overlayVisible: o, handleExited: g } = De(
684
686
  y && u
685
687
  ), w = x(/* @__PURE__ */ new Set()), f = t ? d.find((v) => v.mockupId === t && v.imageUrl) : d.find((v) => v.imageUrl), S = (v) => {
686
- var P;
687
- if (!f || typeof L > "u" || ((P = L.env) == null ? void 0 : P.NODE_ENV) === "production" || typeof window > "u" || w.current.has(f.mockupId)) return;
688
- const V = v.currentTarget, R = V.getBoundingClientRect().width;
688
+ var L;
689
+ if (!f || typeof V > "u" || ((L = V.env) == null ? void 0 : L.NODE_ENV) === "production" || typeof window > "u" || w.current.has(f.mockupId)) return;
690
+ const B = v.currentTarget, R = B.getBoundingClientRect().width;
689
691
  if (R <= 0) return;
690
- const _ = Math.round(R * (window.devicePixelRatio || 1)), D = Tt(V.naturalWidth, _);
691
- D && (w.current.add(f.mockupId), console.warn(D));
692
+ const A = Math.round(R * (window.devicePixelRatio || 1)), P = At(B.naturalWidth, A);
693
+ P && (w.current.add(f.mockupId), console.warn(P));
692
694
  };
693
695
  if (y) {
694
696
  const v = f != null && f.imageUrl ? u ? "rendering" : "ready" : c ? "error" : "rendering";
@@ -719,7 +721,7 @@ function $e({
719
721
  }
720
722
  ) : null
721
723
  ) : b && p ? /* @__PURE__ */ l(
722
- Ne,
724
+ Ae,
723
725
  {
724
726
  visible: o,
725
727
  variant: p,
@@ -757,11 +759,11 @@ function $e({
757
759
  }
758
760
  ) : /* @__PURE__ */ l("div", { "data-sc-part": "preview", "data-sc-preview-state": "rendering", "aria-busy": "true", style: { display: "contents" }, children: e });
759
761
  }
760
- function _t(t) {
762
+ function Pt(t) {
761
763
  const { layer: e, optional: n = !1, placeholder: r, className: i, style: s } = t, d = H("Editor.TextField");
762
764
  J("Editor.TextField");
763
- const { pushRender: c, throttleMs: u, stateStore: a } = K(), p = de(), m = x(null);
764
- if (!ot(e))
765
+ const { pushRender: c, throttleMs: u, stateStore: a } = K(), p = ce(), m = x(null);
766
+ if (!dt(e))
765
767
  throw new T(
766
768
  "E_LAYER_TOKEN_REQUIRED",
767
769
  `the \`layer\` prop must be a token minted by the design — pass layer={design.layer("name")}, not ${typeof e == "string" ? `the bare string "${e}"` : "a plain value"}. Tokens validate the name against the design's layers at mint time.`,
@@ -788,7 +790,7 @@ function _t(t) {
788
790
  a.subscribe,
789
791
  () => a.textOf(e.name) ?? "",
790
792
  () => a.textOf(e.name) ?? ""
791
- ), b = F(
793
+ ), b = U(
792
794
  (o) => {
793
795
  const g = o.target.value, w = d.registry.getCanvasBridge();
794
796
  if (w) {
@@ -801,7 +803,7 @@ function _t(t) {
801
803
  );
802
804
  return;
803
805
  }
804
- a.updateTextLayer(e.name, g), c(le(a.getState()), u);
806
+ a.updateTextLayer(e.name, g), c(ue(a.getState()), u);
805
807
  },
806
808
  [d, e.name, a, c, u]
807
809
  );
@@ -820,7 +822,7 @@ function _t(t) {
820
822
  }
821
823
  );
822
824
  }
823
- function At(t) {
825
+ function Lt(t) {
824
826
  const e = [];
825
827
  for (const n of t.missingOptionKeys)
826
828
  e.push(`option:${n}`);
@@ -837,13 +839,13 @@ function At(t) {
837
839
  }
838
840
  return t.hasRenderableElement || e.push("empty-design"), (!Number.isInteger(t.quantity) || t.quantity < 1) && e.push("quantity"), e;
839
841
  }
840
- function Dt(t, e) {
842
+ function Vt(t, e) {
841
843
  const n = e.getCombinations(), r = e.getAttributes();
842
844
  if (Object.keys(r).length === 0 || n.length === 0) return null;
843
845
  const i = Object.fromEntries(
844
- Object.entries(r).map(([s, d]) => [s, { ...d, choices: lt(d) }])
846
+ Object.entries(r).map(([s, d]) => [s, { ...d, choices: ft(d) }])
845
847
  );
846
- return et({
848
+ return ot({
847
849
  productId: t.productId,
848
850
  quantity: e.getQuantity(),
849
851
  selection: e.getSelection(),
@@ -851,7 +853,7 @@ function Dt(t, e) {
851
853
  attributes: i
852
854
  });
853
855
  }
854
- function Pt(t) {
856
+ function Bt(t) {
855
857
  const { onAddToCart: e, defaultQuantity: n, children: r, className: i, style: s } = t, d = H("Editor.Buy");
856
858
  J("Editor.Buy");
857
859
  const { product: c, stateStore: u } = K(), a = d.commerce;
@@ -870,7 +872,7 @@ function Pt(t) {
870
872
  d.registry.getVersion,
871
873
  d.registry.getVersion
872
874
  ), o = a.getQuantity(), g = O(
873
- () => At({
875
+ () => Lt({
874
876
  quantity: o,
875
877
  missingOptionKeys: a.missingOptionKeys(),
876
878
  selectionValid: a.selectionValid(),
@@ -881,25 +883,25 @@ function Pt(t) {
881
883
  }),
882
884
  // eslint-disable-next-line react-hooks/exhaustive-deps
883
885
  [a, o, m, y, b]
884
- ), w = g.length === 0, [f, S] = C(!1), v = x(!1), V = F(() => {
886
+ ), w = g.length === 0, [f, S] = C(!1), v = x(!1), B = U(() => {
885
887
  if (v.current || !w) return;
886
888
  v.current = !0, S(!0);
887
- const R = u.getState(), _ = a.resolvedVariantId(), D = {
889
+ const R = u.getState(), A = a.resolvedVariantId(), P = {
888
890
  productId: c.productId,
889
- ..._ ? { variantId: _ } : {},
891
+ ...A ? { variantId: A } : {},
890
892
  quantity: a.getQuantity(),
891
893
  selection: a.getSelection(),
892
- cartDetail: Dt(c, a),
894
+ cartDetail: Vt(c, a),
893
895
  designState: R,
894
- serverRequest: le(R)
896
+ serverRequest: ue(R)
895
897
  };
896
- let P;
898
+ let L;
897
899
  try {
898
- P = e(D);
899
- } catch (A) {
900
- throw v.current = !1, S(!1), A;
900
+ L = e(P);
901
+ } catch (D) {
902
+ throw v.current = !1, S(!1), D;
901
903
  }
902
- Promise.resolve(P).finally(() => {
904
+ Promise.resolve(L).finally(() => {
903
905
  v.current = !1, S(!1);
904
906
  });
905
907
  }, [w, c, a, u, e]);
@@ -912,27 +914,27 @@ function Pt(t) {
912
914
  "data-sc-buy-missing": g.join(",") || void 0,
913
915
  disabled: !w || f,
914
916
  "aria-busy": f || void 0,
915
- onClick: V,
917
+ onClick: B,
916
918
  className: i,
917
919
  style: s,
918
920
  children: r ?? "Add to cart"
919
921
  }
920
922
  );
921
923
  }
922
- function Lt({
924
+ function Ft({
923
925
  placement: t = "docked",
924
926
  className: e,
925
927
  style: n
926
928
  }) {
927
929
  const r = H("Editor.Controls");
928
- Ue("Editor.Controls"), J("Editor.Controls");
929
- const i = de();
930
+ ze("Editor.Controls"), J("Editor.Controls");
931
+ const i = ce();
930
932
  Q(
931
933
  () => r.registry.registerControls(i, t),
932
934
  [r.registry, i, t]
933
935
  );
934
936
  const s = t === "docked", [d, c] = C(null);
935
- return $(() => {
937
+ return _(() => {
936
938
  if (!s) return;
937
939
  let u = !1;
938
940
  return import("./ContextualToolbars-TCO7dzu6.js").then((a) => a.s).then(
@@ -963,12 +965,12 @@ function Lt({
963
965
  }
964
966
  ) : null;
965
967
  }
966
- function Vt({
968
+ function Ut({
967
969
  variant: t = "dark",
968
970
  className: e,
969
971
  style: n
970
972
  }) {
971
- const { isRendering: r } = K(), { showOverlay: i, overlayVisible: s, handleExited: d } = Te(r);
973
+ const { isRendering: r } = K(), { showOverlay: i, overlayVisible: s, handleExited: d } = De(r);
972
974
  return i ? /* @__PURE__ */ l(
973
975
  "div",
974
976
  {
@@ -976,12 +978,12 @@ function Vt({
976
978
  className: `sc-loading-overlay-host${e ? ` ${e}` : ""}`,
977
979
  style: n,
978
980
  "aria-hidden": "true",
979
- children: /* @__PURE__ */ l(Ne, { visible: s, variant: t, onExited: d })
981
+ children: /* @__PURE__ */ l(Ae, { visible: s, variant: t, onExited: d })
980
982
  }
981
983
  ) : null;
982
984
  }
983
- function Bt() {
984
- const e = H("useProductSelection").commerce, n = z(e.subscribe, e.getVersion, e.getVersion), r = F((s, d) => e.select(s, d), [e]), i = F((s) => e.setQuantity(s), [e]);
985
+ function Mt() {
986
+ const e = H("useProductSelection").commerce, n = z(e.subscribe, e.getVersion, e.getVersion), r = U((s, d) => e.select(s, d), [e]), i = U((s) => e.setQuantity(s), [e]);
985
987
  return O(
986
988
  () => ({
987
989
  attributes: e.getAttributes(),
@@ -1001,41 +1003,41 @@ function Bt() {
1001
1003
  }
1002
1004
  const M = {
1003
1005
  /** The one provider boundary — session, design, live state, error boundary. */
1004
- Root: Ie,
1006
+ Root: $e,
1005
1007
  /** The editable artboard (the ONE lazy renderer boundary — D9). */
1006
- Canvas: Et,
1008
+ Canvas: St,
1007
1009
  /** Live product mockup. ×N under one Root is valid. */
1008
- Preview: $e,
1010
+ Preview: Pe,
1009
1011
  /** Placement switcher tabs (ADR-0088). Renders nothing for a
1010
1012
  * single-placement design; headless floor = usePlacements(). */
1011
- Placements: Rt,
1013
+ Placements: Ct,
1012
1014
  /** Form input bound to a design text layer by typed token (T1). */
1013
- TextField: _t,
1015
+ TextField: Pt,
1014
1016
  /** Smart commerce part: completeness + payload assembly; submit = host callback. */
1015
- Buy: Pt,
1017
+ Buy: Bt,
1016
1018
  /** Layer list. The one editor part that works canvas-free (ADR-0085 §4). */
1017
- Layers: ze,
1019
+ Layers: He,
1018
1020
  /** Morphing contextual zone — ONE coarse part; placement docked|floating (§5). */
1019
- Controls: Lt,
1021
+ Controls: Ft,
1020
1022
  /** Undo/redo controls. Requires Editor.Canvas. */
1021
- History: qe,
1023
+ History: Ge,
1022
1024
  /** The one ⋯ overflow menu. Requires Editor.Canvas. */
1023
- Menu: je,
1025
+ Menu: We,
1024
1026
  /** The ⊕ add-element menu. Requires Editor.Canvas. */
1025
- Add: Me,
1027
+ Add: Ke,
1026
1028
  /** Standalone render-in-flight rainbow for host-owned preview surfaces.
1027
1029
  * Fills its positioned parent; rides the session (canvas-free). */
1028
- LoadingOverlay: Vt
1030
+ LoadingOverlay: Ut
1029
1031
  };
1030
- function on(t) {
1031
- return /* @__PURE__ */ l(Ie, { ...t, __validation: "warn" });
1032
+ function dn(t) {
1033
+ return /* @__PURE__ */ l($e, { ...t, __validation: "warn" });
1032
1034
  }
1033
- const sn = we(
1035
+ const ln = Re(
1034
1036
  function(e, n) {
1035
1037
  const { children: r, className: i, style: s, maxHeight: d, ...c } = e, [u, a] = C(null);
1036
- return $(() => {
1038
+ return _(() => {
1037
1039
  let p = !1;
1038
- return Oe().then(
1040
+ return _e().then(
1039
1041
  (m) => {
1040
1042
  p || a(() => m);
1041
1043
  },
@@ -1055,19 +1057,19 @@ const sn = we(
1055
1057
  );
1056
1058
  }
1057
1059
  );
1058
- function an(t) {
1059
- return /* @__PURE__ */ l($e, { ...t });
1060
+ function cn(t) {
1061
+ return /* @__PURE__ */ l(Pe, { ...t });
1060
1062
  }
1061
- function dn() {
1063
+ function un() {
1062
1064
  const { mockups: t, isRendering: e, error: n } = K();
1063
1065
  return { mockups: t, isRendering: e, error: n };
1064
1066
  }
1065
- function Ft(t) {
1067
+ function qt(t) {
1066
1068
  return t.type !== "color" && typeof t.width == "number" && t.width > 0 && typeof t.height == "number" && t.height > 0;
1067
1069
  }
1068
- function ln(t, e = {}) {
1070
+ function mn(t, e = {}) {
1069
1071
  var y, b, o, g, w;
1070
- const n = (t.placements ?? []).filter(Ft), r = n.map((f) => f.label), i = e.placement ? n.find((f) => f.label === e.placement) : n[0];
1072
+ const n = (t.placements ?? []).filter(qt), r = n.map((f) => f.label), i = e.placement ? n.find((f) => f.label === e.placement) : n[0];
1071
1073
  if (!i)
1072
1074
  throw e.placement ? new T(
1073
1075
  "E_PRODUCT_NOT_RENDERABLE",
@@ -1124,7 +1126,7 @@ function ln(t, e = {}) {
1124
1126
  variantId: c
1125
1127
  };
1126
1128
  }
1127
- function Ut(t) {
1129
+ function jt(t) {
1128
1130
  return new Intl.NumberFormat("en-US", {
1129
1131
  style: "currency",
1130
1132
  currency: "USD",
@@ -1132,7 +1134,7 @@ function Ut(t) {
1132
1134
  maximumFractionDigits: t % 100 === 0 ? 0 : 2
1133
1135
  }).format(t / 100);
1134
1136
  }
1135
- const Mt = {
1137
+ const zt = {
1136
1138
  display: "inline-flex",
1137
1139
  alignItems: "center",
1138
1140
  justifyContent: "center",
@@ -1147,7 +1149,7 @@ const Mt = {
1147
1149
  fontSize: 16,
1148
1150
  lineHeight: 1,
1149
1151
  cursor: "pointer"
1150
- }, jt = {
1152
+ }, Kt = {
1151
1153
  display: "flex",
1152
1154
  alignItems: "center",
1153
1155
  gap: 10,
@@ -1163,7 +1165,7 @@ const Mt = {
1163
1165
  textAlign: "left",
1164
1166
  cursor: "pointer"
1165
1167
  };
1166
- function ae({
1168
+ function le({
1167
1169
  label: t,
1168
1170
  onSelect: e
1169
1171
  }) {
@@ -1173,13 +1175,13 @@ function ae({
1173
1175
  type: "button",
1174
1176
  role: "menuitem",
1175
1177
  "data-sc-part": "snowcone-editor-menu-item",
1176
- style: jt,
1178
+ style: Kt,
1177
1179
  onClick: e,
1178
1180
  children: t
1179
1181
  }
1180
1182
  );
1181
1183
  }
1182
- function qt({
1184
+ function Wt({
1183
1185
  fullscreen: t,
1184
1186
  onToggleFullscreen: e,
1185
1187
  viewCount: n,
@@ -1197,12 +1199,12 @@ function qt({
1197
1199
  "aria-haspopup": "menu",
1198
1200
  "aria-expanded": d,
1199
1201
  "data-sc-part": "snowcone-editor-menu",
1200
- style: Mt,
1202
+ style: zt,
1201
1203
  onClick: () => c((a) => !a),
1202
1204
  children: "⋮"
1203
1205
  }
1204
1206
  ),
1205
- d ? /* @__PURE__ */ N(Ge, { children: [
1207
+ d ? /* @__PURE__ */ N(Ye, { children: [
1206
1208
  /* @__PURE__ */ l(
1207
1209
  "div",
1208
1210
  {
@@ -1231,7 +1233,7 @@ function qt({
1231
1233
  },
1232
1234
  children: [
1233
1235
  /* @__PURE__ */ l(
1234
- ae,
1236
+ le,
1235
1237
  {
1236
1238
  label: t ? "Exit fullscreen" : "Fullscreen",
1237
1239
  onSelect: () => {
@@ -1240,7 +1242,7 @@ function qt({
1240
1242
  }
1241
1243
  ),
1242
1244
  n > 1 ? Array.from({ length: n }, (a, p) => /* @__PURE__ */ l(
1243
- ae,
1245
+ le,
1244
1246
  {
1245
1247
  label: `View ${p + 1}${p === r ? " ✓" : ""}`,
1246
1248
  onSelect: () => {
@@ -1250,7 +1252,7 @@ function qt({
1250
1252
  p
1251
1253
  )) : null,
1252
1254
  /* @__PURE__ */ l(
1253
- ae,
1255
+ le,
1254
1256
  {
1255
1257
  label: "Export PNG",
1256
1258
  onSelect: () => {
@@ -1264,9 +1266,9 @@ function qt({
1264
1266
  ] }) : null
1265
1267
  ] });
1266
1268
  }
1267
- function zt() {
1268
- const { flatLayers: t, selectLayer: e, generateAllPreviews: n } = Ke({ previewSize: 96 });
1269
- return $(() => {
1269
+ function Gt() {
1270
+ const { flatLayers: t, selectLayer: e, generateAllPreviews: n } = Je({ previewSize: 96 });
1271
+ return _(() => {
1270
1272
  t.length > 0 && n();
1271
1273
  }, [t.length, n]), /* @__PURE__ */ N(
1272
1274
  "div",
@@ -1321,11 +1323,11 @@ function zt() {
1321
1323
  }
1322
1324
  );
1323
1325
  }
1324
- function Kt({
1326
+ function Ht({
1325
1327
  onAddToCart: t,
1326
1328
  defaultQuantity: e
1327
1329
  }) {
1328
- const { price: n, complete: r } = Bt();
1330
+ const { price: n, complete: r } = Mt();
1329
1331
  return /* @__PURE__ */ N(
1330
1332
  M.Buy,
1331
1333
  {
@@ -1350,12 +1352,12 @@ function Kt({
1350
1352
  },
1351
1353
  children: [
1352
1354
  "Add to cart",
1353
- typeof n == "number" ? ` · ${Ut(n)}` : ""
1355
+ typeof n == "number" ? ` · ${jt(n)}` : ""
1354
1356
  ]
1355
1357
  }
1356
1358
  );
1357
1359
  }
1358
- function Wt({
1360
+ function Jt({
1359
1361
  title: t,
1360
1362
  height: e,
1361
1363
  mockupIds: n,
@@ -1364,14 +1366,14 @@ function Wt({
1364
1366
  className: s,
1365
1367
  style: d
1366
1368
  }) {
1367
- const [c, u] = C(!1), [a, p] = C(0), [m, y] = C(!1), b = x(null), o = ct(), g = n[Math.min(a, n.length - 1)], w = F(async () => {
1368
- var D;
1369
- const v = await ((D = b.current) == null ? void 0 : D.exportArtboards({ format: "dataUrl" }));
1369
+ const [c, u] = C(!1), [a, p] = C(0), [m, y] = C(!1), b = x(null), o = pt(), g = n[Math.min(a, n.length - 1)], w = U(async () => {
1370
+ var P;
1371
+ const v = await ((P = b.current) == null ? void 0 : P.exportArtboards({ format: "dataUrl" }));
1370
1372
  if (!v) return;
1371
- const [V, R] = Object.entries(v)[0] ?? [];
1373
+ const [B, R] = Object.entries(v)[0] ?? [];
1372
1374
  if (typeof R != "string") return;
1373
- const _ = document.createElement("a");
1374
- _.href = R, _.download = `${V ?? "design"}.png`, _.click();
1375
+ const A = document.createElement("a");
1376
+ A.href = R, A.download = `${B ?? "design"}.png`, A.click();
1375
1377
  }, []), f = {
1376
1378
  display: "flex",
1377
1379
  flexDirection: "column",
@@ -1431,7 +1433,7 @@ function Wt({
1431
1433
  /* @__PURE__ */ l("span", { style: { fontSize: 14, fontWeight: 700, marginRight: "auto" }, children: t }),
1432
1434
  /* @__PURE__ */ l(M.History, {}),
1433
1435
  /* @__PURE__ */ l(
1434
- qt,
1436
+ Wt,
1435
1437
  {
1436
1438
  fullscreen: c,
1437
1439
  onToggleFullscreen: () => u((v) => !v),
@@ -1441,7 +1443,7 @@ function Wt({
1441
1443
  onExport: () => void w()
1442
1444
  }
1443
1445
  ),
1444
- /* @__PURE__ */ l(Kt, { onAddToCart: r, defaultQuantity: i })
1446
+ /* @__PURE__ */ l(Ht, { onAddToCart: r, defaultQuantity: i })
1445
1447
  ]
1446
1448
  }
1447
1449
  ),
@@ -1535,7 +1537,7 @@ function Wt({
1535
1537
  style: { flexShrink: 0, padding: "4px 16px 14px" },
1536
1538
  children: [
1537
1539
  /* @__PURE__ */ l("div", { style: { display: o ? void 0 : "none" }, children: /* @__PURE__ */ l(M.Controls, { placement: "docked" }) }),
1538
- o ? null : /* @__PURE__ */ l(zt, {})
1540
+ o ? null : /* @__PURE__ */ l(Gt, {})
1539
1541
  ]
1540
1542
  }
1541
1543
  )
@@ -1543,7 +1545,7 @@ function Wt({
1543
1545
  }
1544
1546
  );
1545
1547
  }
1546
- function cn(t) {
1548
+ function fn(t) {
1547
1549
  const {
1548
1550
  onAddToCart: e,
1549
1551
  defaultQuantity: n,
@@ -1554,7 +1556,7 @@ function cn(t) {
1554
1556
  ...c
1555
1557
  } = t;
1556
1558
  return /* @__PURE__ */ l(M.Root, { ...c, children: /* @__PURE__ */ l(
1557
- Wt,
1559
+ Jt,
1558
1560
  {
1559
1561
  title: r,
1560
1562
  height: i,
@@ -1566,21 +1568,21 @@ function cn(t) {
1566
1568
  }
1567
1569
  ) });
1568
1570
  }
1569
- We();
1571
+ Qe();
1570
1572
  export {
1571
1573
  M as E,
1572
- sn as R,
1573
- cn as S,
1574
- on as a,
1575
- an as b,
1576
- rn as c,
1577
- Re as d,
1578
- xt as e,
1579
- Ut as f,
1580
- Bt as g,
1581
- dn as h,
1582
- ln as p,
1574
+ ln as R,
1575
+ fn as S,
1576
+ dn as a,
1577
+ cn as b,
1578
+ an as c,
1579
+ Ie as d,
1580
+ kt as e,
1581
+ jt as f,
1582
+ Mt as g,
1583
+ un as h,
1584
+ mn as p,
1583
1585
  K as u,
1584
- ft as v
1586
+ gt as v
1585
1587
  };
1586
- //# sourceMappingURL=embed-p_FskJ1G.js.map
1588
+ //# sourceMappingURL=embed-DWDEtP0_.js.map