@snowcone-app/canvas 0.20.0 → 0.21.0

package/README.md

@@ -1,14 +1,24 @@
 # @snowcone-app/canvas
 
-> **Building with an AI agent?** Read the complete agent-facing docs in one fetch — <https://developers.snowcone.app/llms-full.txt> — before integrating. It's the source of truth; grep it before assuming a field or behavior is undocumented.
-
-**Embeddable design editor for print-on-demand and product customization.**
-
-`<SnowconeCanvas />` is a self-contained React component that lets your shoppers
-compose the artwork that goes onto a product — text, images, transforms, and
-effects across one or more print areas. It's the same editor that powers Edit and
-Remix on [snowcone.app](https://snowcone.app). Drop it in, get the design state and
-print-ready exports back out.
+> **Building with an AI agent?** This tarball is self-sufficient: start with
+> [`llms.txt`](./llms.txt) (the agent index), copy the canonical example in
+> [`example/`](./example/README.md), and restyle via the generated
+> [`STYLING_CONTRACT.md`](./STYLING_CONTRACT.md). The complete hosted docs are
+> one fetch — <https://developers.snowcone.app/llms-full.txt> — grep them
+> before assuming a field or behavior is undocumented.
+
+**Embeddable product personalization and design editing for e-commerce.**
+
+Two surfaces, one package:
+
+1. **`Editor.*` composable parts** (`@snowcone-app/canvas/embed`) — live
+   server-rendered product previews, layer-bound form fields, and smart
+   add-to-cart, composed in your own layout. The turnkey `SnowconeEditor` is
+   the same parts in our arrangement.
+2. **`SnowconeCanvas`** (`@snowcone-app/canvas`) — the standalone design
+   editor: text, images, transforms, and effects across one or more print
+   areas. The same editor that powers Edit and Remix on
+   [snowcone.app](https://snowcone.app).
 
 📖 **Full documentation: [developers.snowcone.app/canvas](https://developers.snowcone.app/canvas)**
 
@@ -21,7 +31,110 @@ npm install @snowcone-app/canvas
 
 `react` and `react-dom` (>=18) are peer dependencies.
 
-## Quick start
+## The canonical example — a personalization widget, no canvas
+
+The fastest path to a working integration. A live product preview, one
+personalized text layer, and a completeness-gated add-to-cart — the full
+design editor never loads. This file ships in this package at
+[`example/src/Widget.tsx`](./example/src/Widget.tsx); copy it and change the
+design, the product ids, and the parts.
+
+<!-- canonical-example (verbatim from example/src/Widget.tsx; drift-gated) -->
+
+```tsx
+import React from 'react';
+import { Editor, design, type EditorBuyPayload } from '@snowcone-app/canvas/embed';
+
+const SHOP_KEY = import.meta.env.VITE_SNOWCONE_SHOP ?? 'demo-shop';
+
+// The design is the single source of truth: it seeds the first render AND
+// mints the typed layer tokens the TextField binds with.
+const nameDrop = design({ name: 'Front', width: 1480, height: 2328 })
+  .background('https://dqMwU8Jct3.storage.snowcone.app/demo/demo-008.jpg', {
+    aspectRatio: 1480 / 2328,
+    name: 'art',
+  })
+  .text('YOUR NAME', { anchor: 'top', name: 'name' });
+
+const product = {
+  productId: 'BEEB77',
+  mockupIds: ['FV1qjO'],
+  placements: ['Front'],
+};
+
+export function PersonalizationWidget({
+  onAddToCart,
+}: {
+  /** Your cart handler. NOTE the payload's `designState` is the EDITOR shape
+   *  (flat `elements` + artboard metadata) — persist it as-is. It is NOT the
+   *  server render shape (`artboards[].elements`) the session pushes;
+   *  `payload.serverRequest` carries that one if you need it. */
+  onAddToCart?: (payload: EditorBuyPayload) => void;
+} = {}): React.ReactElement {
+  return (
+    <Editor.Root shop={SHOP_KEY} product={product} design={nameDrop} grantUrl="/api/realtime/grant">
+      <div style={{ display: 'grid', gap: 12, maxWidth: 320 }}>
+        <Editor.Preview alt="Your personalized tee" fallback={<div aria-busy="true">Rendering…</div>} />
+        <Editor.TextField layer={nameDrop.layer('name')} placeholder="Your name" />
+        <Editor.Buy
+          onAddToCart={
+            onAddToCart ??
+            (({ productId, quantity, designState }) => {
+              // The host's one line: persist the designState (the
+              // re-renderable source of truth) with the cart line.
+              console.log('add-to-cart', { productId, quantity, designState });
+            })
+          }
+        >
+          Add to cart · $24
+        </Editor.Buy>
+      </div>
+    </Editor.Root>
+  );
+}
+```
+
+Don't forget the stylesheet (once, anywhere in your app):
+
+```tsx
+import '@snowcone-app/canvas/style.css';
+```
+
+`grantUrl` points at a small route on YOUR server that mints a render grant
+(your keys never reach the browser). Framework variants (Next.js, Remix,
+Express) are in the docs: <https://developers.snowcone.app/primitives>.
+
+### The parts
+
+All from `@snowcone-app/canvas/embed`, all valid in any subset under one
+`Editor.Root` — the host owns the layout:
+
+| Part | What it carries |
+|------|-----------------|
+| `Editor.Root` | session, design state, error boundary — the one provider |
+| `Editor.Preview` | live product mockup (×N under one Root is valid) |
+| `Editor.TextField` | input bound to a design text layer by typed token |
+| `Editor.Buy` | completeness gating + cart payload; submit is your callback |
+| `Editor.Canvas` | the editable artboard (the one lazy-loaded heavy chunk) |
+| `Editor.Layers` / `Editor.Controls` / `Editor.History` / `Editor.Menu` / `Editor.Add` | editor chrome as parts |
+
+The turnkey default — the same parts in our arrangement:
+
+```tsx
+import { SnowconeEditor } from '@snowcone-app/canvas/embed';
+
+<SnowconeEditor shop={SHOP_KEY} product={product} design={d} grantUrl="/api/realtime/grant" onAddToCart={addLine} />
+```
+
+Every part renders minimal DOM tagged `data-sc-part` and themes through
+`.sc-root` CSS custom properties — the full generated reference is
+[`STYLING_CONTRACT.md`](./STYLING_CONTRACT.md). Composition mistakes throw
+structured `EditorError`s (stable `code` + `error.data`) in dev AND prod,
+contained by the Root's error boundary. Test with
+`@snowcone-app/canvas/testing`: `assertRenders` proves a design's bindings
+are alive; `expectNoEditorErrors()` makes contained errors fail your tests.
+
+## The standalone design editor
 
 ```tsx
 import { SnowconeCanvas } from '@snowcone-app/canvas';
@@ -45,8 +158,6 @@ That renders a working editor out of the box (toolbar, layers, text/image/effect
 Use the `kit` prop to switch presets (`'pro-studio'` default, `'compact-customizer'`,
 `'embed-only'`) or pass `layoutConfig` to go canvas-only.
 
-## Common recipes
-
 ### Multiple print areas (placements)
 
 ```tsx
@@ -95,7 +206,7 @@ const [state, setState] = useState<CanvasState | null>(null);
 
 Exports always produce transparent PNGs/WebP — the preview background is never baked in.
 
-## API at a glance
+### API at a glance
 
 `<SnowconeCanvas />` is the single entry point. Key props:
 

package/STYLING_CONTRACT.md

@@ -0,0 +1,427 @@
+# `Editor.*` styling contract
+
+<!-- GENERATED — do not edit. Derived from the parts themselves by
+     packages/canvas/src/components/editor/__tests__/stylingContract.test.tsx.
+     Regenerate: pnpm -C packages/canvas gen:styling-contract -->
+
+Every `Editor.*` part renders minimal styled DOM carrying a stable
+`data-sc-part` attribute, accepts `className`/`style`, and is themed by the
+`.sc-root` CSS custom properties below. Restyle by targeting
+`[data-sc-part="…"]` selectors and overriding `.sc-root` tokens — you never
+need this package's source. Attribute values shown are the stable enums;
+`<angle-bracket>` values are runtime data. `sc-*` classes are additional
+stable hooks; `sc:`-prefixed utility classes are internal and NOT contract.
+
+## Part index
+
+| `data-sc-part` | rendered by |
+|---|---|
+| `add` | Editor.Add |
+| `buy` | Editor.Buy |
+| `canvas` | Editor.Canvas |
+| `controls` | Editor.Controls |
+| `error` | Editor.Root |
+| `error-retry` | Editor.Root |
+| `history` | Editor.History |
+| `layers` | Editor.Layers |
+| `layers-item` | Editor.Layers |
+| `menu` | Editor.Menu |
+| `preview` | Editor.Preview |
+| `preview-error` | Editor.Preview |
+| `root` | Editor.Root |
+| `snowcone-editor` | SnowconeEditor |
+| `snowcone-editor-header` | SnowconeEditor |
+| `snowcone-editor-idle-dock` | SnowconeEditor |
+| `snowcone-editor-layer-thumb` | SnowconeEditor |
+| `snowcone-editor-menu` | SnowconeEditor |
+| `snowcone-editor-menu-item` | SnowconeEditor |
+| `snowcone-editor-menu-list` | SnowconeEditor |
+| `snowcone-editor-pip` | SnowconeEditor |
+| `snowcone-editor-stage` | SnowconeEditor |
+| `snowcone-editor-swap-back` | SnowconeEditor |
+| `snowcone-editor-swap-stage` | SnowconeEditor |
+| `snowcone-editor-zone` | SnowconeEditor |
+| `textfield` | Editor.TextField |
+
+## The DOM each part renders
+
+### `add` — Editor.Add
+
+```html
+<div data-sc-part="add">
+  <div>
+    <div>
+      <button aria-label=<label>>
+```
+
+### `buy` — Editor.Buy — incomplete (seed value untouched)
+
+```html
+<button data-sc-buy-missing=<reason-codes> data-sc-buy-state="incomplete" data-sc-part="buy" disabled type="button">
+```
+
+### `buy` — Editor.Buy — ready
+
+```html
+<button data-sc-buy-state="ready" data-sc-part="buy" type="button">
+```
+
+### `canvas` — Editor.Canvas
+
+```html
+<div class="sc-canvas-frame" data-sc-part="canvas">
+  <div class="sc-root">
+    <div>
+      <div>
+        <div role="status">
+        <canvas aria-label=<label> role="application">
+```
+
+### `controls` — Editor.Controls — placement="docked", element selected
+
+```html
+<div data-sc-part="controls" data-sc-placement="docked">
+  <div>
+    <div>
+      <div>
+        <div class="sc-toolbar" data-mode="embedded">
+          …
+    <div class="sc-secondary-toolbar-panel-wrapper">
+      <div> ×16
+```
+
+### `controls` — Editor.Controls — built-in floating toolbar (no Controls mounted; body portal)
+
+```html
+<div class="sc-toolbar" data-mode="floating" data-sc-part="controls">
+  <div class="sc-toolbar-slide-container">
+    <div class="sc-toolbar-regular-content">
+      <span>
+        <span>
+      <button aria-label=<label> aria-pressed="false">
+        <svg>
+          …
+      <div class="sc-toolbar-items">
+        <button aria-label=<label> title=<title>>
+          …
+        <button aria-label=<label> aria-pressed="false">
+          …
+        <button aria-label=<label> class="sc-toolbar-btn">
+          …
+        <button aria-label=<label> aria-pressed="false">
+          … ×5
+        <button aria-expanded="false" aria-label=<label> class="sc-toolbar-btn" type="button">
+        <button aria-label=<label> aria-pressed="false">
+          … ×6
+        <button aria-label=<label> aria-pressed="false" disabled>
+          …
+        <button aria-expanded="false" aria-label=<label> class="sc-toolbar-btn" type="button">
+    <div class="sc-toolbar-collapsed-header">
+```
+
+### `error` — Editor.Root — contained-error card (E_CHUNK_LOAD_FAILED shown)
+
+```html
+<div data-sc-part="error" role="alert">
+  <p> ×2
+  <button data-sc-part="error-retry" type="button">
+```
+
+### `error-retry` — Editor.Root — the retry affordance (retryable errors only)
+
+```html
+<button data-sc-part="error-retry" type="button">
+```
+
+### `history` — Editor.History
+
+```html
+<div data-sc-part="history">
+  <div class="sc-undo-redo">
+    <button aria-label=<label> aria-pressed="false" disabled>
+      <span class="sc-normalized-icon-responsive"> ×2
+```
+
+### `layers` — Editor.Layers — with a mounted Canvas (live document panel)
+
+```html
+<div data-sc-direction="vertical" data-sc-part="layers">
+  <div class="sc-layers-panel">
+    <div>
+      <span>
+    <div>
+      <div>
+        <div> ×2
+        <div>
+          … ×2
+```
+
+### `layers` — Editor.Layers — canvas-free (design layers from the store)
+
+```html
+<div data-sc-direction="vertical" data-sc-part="layers">
+  <div>
+    <div data-sc-layer-kind="custom" data-sc-part="layers-item">
+      <span>
+    <div data-sc-layer-kind="image" data-sc-part="layers-item">
+      <span>
+```
+
+### `layers-item` — Editor.Layers — one canvas-free layer row
+
+```html
+<div data-sc-layer-kind="custom" data-sc-part="layers-item">
+  <span>
+```
+
+### `menu` — Editor.Menu
+
+```html
+<div data-sc-part="menu">
+  <div>
+    <div>
+      <button aria-label=<label>>
+  <input type="file">
+```
+
+### `preview` — Editor.Preview — with a rendered mockup
+
+```html
+<img alt=<alt> data-sc-part="preview" src=<url>>
+```
+
+### `preview-error` — Editor.Preview — render/grant failure before any mockup
+
+```html
+<div data-sc-error=<message> data-sc-part="preview-error" role="alert">
+```
+
+### `root` — Editor.Root
+
+```html
+<div class="sc-root" data-sc-part="root">
+  <img alt=<alt> data-sc-part="preview" src=<url>>
+  <input aria-label=<label> data-sc-layer=<layer-name> data-sc-part="textfield" placeholder=<placeholder> type="text">
+  <button data-sc-buy-missing=<reason-codes> data-sc-buy-state="incomplete" data-sc-part="buy" disabled type="button">
+```
+
+### `snowcone-editor` — SnowconeEditor
+
+```html
+<div data-sc-part="snowcone-editor">
+  <div data-sc-part="snowcone-editor-header">
+    <span>
+    <div data-sc-part="history">
+      <div class="sc-undo-redo">
+        <button aria-label=<label> aria-pressed="false" disabled>
+          … ×2
+    <div>
+      <button aria-expanded="false" aria-label=<label> data-sc-part="snowcone-editor-menu" type="button">
+    <button data-sc-buy-state="ready" data-sc-part="buy" type="button">
+  <div data-sc-part="snowcone-editor-stage">
+    <div class="sc-canvas-frame" data-sc-part="canvas">
+      <div class="sc-root">
+        <div>
+          …
+    <button aria-label=<label> data-sc-part="snowcone-editor-pip" type="button">
+      <span aria-busy="true">
+  <div data-sc-part="snowcone-editor-zone" data-sc-zone-state="idle">
+    <div>
+      <div data-sc-part="controls" data-sc-placement="docked">
+        <div>
+          …
+    <div data-sc-part="snowcone-editor-idle-dock">
+      <div data-sc-part="add">
+        <div>
+          …
+      <div>
+      <button aria-label=<label> data-sc-part="snowcone-editor-layer-thumb" type="button">
+        <span> ×2
+```
+
+### `snowcone-editor-header` — SnowconeEditor — header
+
+```html
+<div data-sc-part="snowcone-editor-header">
+  <span>
+  <div data-sc-part="history">
+    <div class="sc-undo-redo">
+      <button aria-label=<label> aria-pressed="false" disabled>
+        <span class="sc-normalized-icon-responsive"> ×2
+  <div>
+    <button aria-expanded="false" aria-label=<label> data-sc-part="snowcone-editor-menu" type="button">
+  <button data-sc-buy-state="ready" data-sc-part="buy" type="button">
+```
+
+### `snowcone-editor-idle-dock` — SnowconeEditor — idle dock
+
+```html
+<div data-sc-part="snowcone-editor-idle-dock">
+  <div data-sc-part="add">
+    <div>
+      <div>
+        <button aria-label=<label>>
+  <div>
+  <button aria-label=<label> data-sc-part="snowcone-editor-layer-thumb" type="button">
+    <span> ×2
+```
+
+### `snowcone-editor-layer-thumb` — SnowconeEditor — one layer thumbnail
+
+```html
+<button aria-label=<label> data-sc-part="snowcone-editor-layer-thumb" type="button">
+  <span>
+```
+
+### `snowcone-editor-menu` — SnowconeEditor — the ⋯ menu button
+
+```html
+<button aria-expanded="false" aria-label=<label> data-sc-part="snowcone-editor-menu" type="button">
+```
+
+### `snowcone-editor-menu-item` — SnowconeEditor — one ⋯ menu item
+
+```html
+<button data-sc-part="snowcone-editor-menu-item" role="menuitem" type="button">
+```
+
+### `snowcone-editor-menu-list` — SnowconeEditor — open ⋯ menu
+
+```html
+<div data-sc-part="snowcone-editor-menu-list" role="menu">
+  <button data-sc-part="snowcone-editor-menu-item" role="menuitem" type="button"> ×2
+```
+
+### `snowcone-editor-pip` — SnowconeEditor — preview PiP
+
+```html
+<button aria-label=<label> data-sc-part="snowcone-editor-pip" type="button">
+  <span aria-busy="true">
+```
+
+### `snowcone-editor-stage` — SnowconeEditor — stage
+
+```html
+<div data-sc-part="snowcone-editor-stage">
+  <div class="sc-canvas-frame" data-sc-part="canvas">
+    <div class="sc-root">
+      <div>
+        <div>
+          …
+  <button aria-label=<label> data-sc-part="snowcone-editor-pip" type="button">
+    <span aria-busy="true">
+```
+
+### `snowcone-editor-swap-back` — SnowconeEditor — the "artwork" chip back to the canvas
+
+```html
+<button aria-label=<label> data-sc-part="snowcone-editor-swap-back" type="button">
+```
+
+### `snowcone-editor-swap-stage` — SnowconeEditor — mockup swapped onto the stage
+
+```html
+<div data-sc-part="snowcone-editor-swap-stage">
+  <div aria-busy="true">
+  <button aria-label=<label> data-sc-part="snowcone-editor-swap-back" type="button">
+```
+
+### `snowcone-editor-zone` — SnowconeEditor — morphing control zone (idle)
+
+```html
+<div data-sc-part="snowcone-editor-zone" data-sc-zone-state="idle">
+  <div>
+    <div data-sc-part="controls" data-sc-placement="docked">
+      <div>
+        <div>
+        <div>
+          …
+        <div class="sc-secondary-toolbar-panel-wrapper">
+          … ×16
+  <div data-sc-part="snowcone-editor-idle-dock">
+    <div data-sc-part="add">
+      <div>
+        <div>
+          …
+    <div>
+    <button aria-label=<label> data-sc-part="snowcone-editor-layer-thumb" type="button">
+      <span> ×2
+```
+
+### `textfield` — Editor.TextField
+
+```html
+<input aria-label=<label> data-sc-layer=<layer-name> data-sc-part="textfield" placeholder=<placeholder> type="text">
+```
+
+## `.sc-root` theming tokens
+
+Declared on `.sc-root` (applied once by `Editor.Root`); override any of
+them on your own wrapper around the Root to retheme every part. Portaled
+UI (the floating toolbar) carries its own `.sc-root` wrapper, so overrides
+on `:root` or above the widget apply there too.
+
+| group | token | default |
+|---|---|---|
+| Semantic Colors | `--color-primary` | `#000000` |
+| Semantic Colors | `--color-primary-foreground` | `#ffffff` |
+| Semantic Colors | `--color-secondary` | `#f4f4f5` |
+| Semantic Colors | `--color-secondary-foreground` | `#18181b` |
+| Semantic Colors | `--color-default` | `#f0f0f1` |
+| Semantic Colors | `--color-default-foreground` | `#18181b` |
+| Semantic Colors | `--color-danger` | `#ef4444` |
+| Semantic Colors | `--color-danger-foreground` | `#ffffff` |
+| Semantic Colors | `--color-success` | `#22c55e` |
+| Semantic Colors | `--color-success-foreground` | `#ffffff` |
+| Semantic Colors | `--color-warning` | `#f59e0b` |
+| Semantic Colors | `--color-warning-foreground` | `#000000` |
+| Layout Colors | `--color-background` | `#f8f8f8` |
+| Layout Colors | `--color-foreground` | `#0a0a0a` |
+| Layout Colors | `--color-surface` | `#ffffff` |
+| Layout Colors | `--color-surface-foreground` | `#0a0a0a` |
+| Layout Colors | `--color-muted` | `#f4f4f5` |
+| Layout Colors | `--color-muted-foreground` | `#71717a` |
+| Layout Colors | `--color-divider` | `#e4e4e7` |
+| Layout Colors | `--color-focus` | `#000000` |
+| Field/Input Colors | `--color-field` | `#ffffff` |
+| Field/Input Colors | `--color-field-foreground` | `#0a0a0a` |
+| Field/Input Colors | `--color-field-placeholder` | `#71717a` |
+| Field/Input Colors | `--color-field-border` | `transparent` |
+| Accent (backward compat) | `--color-accent` | `#000000` |
+| Accent (backward compat) | `--color-accent-foreground` | `#ffffff` |
+| Shadcn compatibility aliases | `--color-card` | `#ffffff` |
+| Shadcn compatibility aliases | `--color-card-foreground` | `#0a0a0a` |
+| Shadcn compatibility aliases | `--color-popover` | `#ffffff` |
+| Shadcn compatibility aliases | `--color-popover-foreground` | `#0a0a0a` |
+| Shadcn compatibility aliases | `--color-border` | `#e4e4e7` |
+| Shadcn compatibility aliases | `--color-destructive` | `#ef4444` |
+| Shadcn compatibility aliases | `--color-destructive-foreground` | `#ffffff` |
+| Shadcn compatibility aliases | `--color-ring` | `#000000` |
+| Shadcn compatibility aliases | `--color-input` | `transparent` |
+| Overlay/Surface | `--color-overlay` | `#ffffff` |
+| Overlay/Surface | `--color-overlay-foreground` | `#0a0a0a` |
+| Overlay/Surface | `--shadow-overlay` | `0 8px 30px rgb(0 0 0 / 0.12)` |
+| Overlay/Surface | `--shadow-surface` | `0 1px 3px rgb(0 0 0 / 0.1)` |
+| Overlay/Surface | `--shadow-soft` | `0 1px 2px rgb(0 0 0 / 0.06), 0 2px 4px rgb(0 0 0 / 0.04)` |
+| Semantic Font Families | `--font-family-heading` | `ui-sans-serif, system-ui, sans-serif` |
+| Semantic Font Families | `--font-family-body` | `ui-sans-serif, system-ui, sans-serif` |
+| Semantic Font Families | `--font-family-label` | `ui-sans-serif, system-ui, sans-serif` |
+| Semantic Font Families | `--font-family-button` | `ui-sans-serif, system-ui, sans-serif` |
+| Semantic Font Families | `--font-family-caption` | `ui-sans-serif, system-ui, sans-serif` |
+| Semantic Font Families | `--font-family-display` | `ui-sans-serif, system-ui, sans-serif` |
+| Semantic Font Families | `--font-family-accent` | `ui-sans-serif, system-ui, sans-serif` |
+| Semantic Radius | `--radius-button` | `4px` |
+| Semantic Radius | `--radius-input` | `4px` |
+| Semantic Radius | `--radius-card` | `6px` |
+| Semantic Radius | `--radius-modal` | `8px` |
+| Semantic Radius | `--radius-badge` | `9999px` |
+| Semantic Radius | `--radius-avatar` | `9999px` |
+| Semantic Radius | `--radius-tooltip` | `6px` |
+| Semantic Radius | `--radius-image` | `4px` |
+| Z-index scale | `--z-base` | `1` |
+| Z-index scale | `--z-sticky` | `1000` |
+| Z-index scale | `--z-dropdown` | `1001` |
+| Z-index scale | `--z-drawer` | `10002` |
+| Z-index scale | `--z-overlay` | `10001` |
+| Z-index scale | `--z-modal` | `10000` |
+| Z-index scale | `--z-tooltip` | `2147483647` |

package/dist/{EditorCanvasImpl-UBKdG0c0.js → EditorCanvasImpl-2ZgIUVpK.js}

@@ -1,9 +1,9 @@
 import { jsx as m, jsxs as R, Fragment as $ } from "react/jsx-runtime";
 import { forwardRef as j, useContext as E, useSyncExternalStore as D, useMemo as G, useRef as y, useLayoutEffect as I } from "react";
-import { S as N } from "./SnowconeCanvas-B01o5LmS.js";
+import { S as N } from "./SnowconeCanvas-DqZicdxK.js";
 import { d as U } from "./ContextualToolbars--vTtorNg.js";
-import { s as V } from "./design-builder-DMKx9UXD.js";
-import { u as k } from "./embed-uALcVSYN.js";
+import { s as V } from "./design-builder-CPF60RU2.js";
+import { u as k } from "./embed-2tp6Ue90.js";
 import { c as z, b as L } from "./editorErrors-CK1RISFa.js";
 import { T as O } from "./FontAnalyzer-BpsTYowD.js";
 import { p as h } from "./UnifiedFontService-B1PGVu8O.js";
@@ -79,4 +79,4 @@ const te = j(
 export {
   te as EditorCanvasImpl
 };
-//# sourceMappingURL=EditorCanvasImpl-UBKdG0c0.js.map
+//# sourceMappingURL=EditorCanvasImpl-2ZgIUVpK.js.map

package/dist/{EditorCanvasImpl-UBKdG0c0.js.map → EditorCanvasImpl-2ZgIUVpK.js.map}

@@ -1 +1 @@
-{"version":3,"file":"EditorCanvasImpl-UBKdG0c0.js","sources":["../src/components/editor/EditorCanvasImpl.tsx"],"sourcesContent":["'use client';\n\n/**\n * The heavy half of `Editor.Canvas` (and of the legacy `<RealtimeCanvas>`),\n * extracted from RealtimeCanvas's body. This module statically imports\n * `SnowconeCanvas` — i.e. the full rendering engine — and is therefore ONLY\n * ever reached through a dynamic `import()` (D9): the embed entry's static\n * import graph stays renderer-free, mechanically enforced by the\n * import-graph CI check.\n *\n * Beyond the original wiring (seed → SnowconeCanvas, edit →\n * `serializeStateForServer` → `pushRender`), this adds the ADR-0085 §3 store\n * wiring: every canvas change lands in the Root's {@link DesignStateStore}\n * (the ONE live design state), and a {@link CanvasBridge} is registered so\n * `Editor.TextField` writes route through the editor command path (undo/redo,\n * repaint) while a canvas is mounted — the editor document stays the single\n * write authority.\n */\n\nimport React, {\n  forwardRef,\n  useContext,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useSyncExternalStore,\n  type CSSProperties,\n  type ReactNode,\n} from 'react';\nimport { SnowconeCanvas } from '../embed/SnowconeCanvas.js';\nimport { ContextualToolbars } from '../ContextualToolbars.js';\nimport type { CanvasState, SnowconeCanvasHandle } from '../embed/SnowconeCanvas.js';\nimport { serializeStateForServer } from '../../rendering/serialize-for-server.js';\nimport type { KitPresetId, KitDefinition } from '../../kits/types.js';\nimport type { CanvasServices } from '../../contexts/CanvasServicesContext.js';\nimport { useEmbedContext } from '../embed-realtime/context.js';\nimport { useElementsContext } from '../../contexts/ElementsContext.js';\nimport { useCommandContext } from '../../contexts/CommandContext.js';\nimport { TextElement } from '../../core/TextElement.js';\nimport { EditorRootInternalsContext } from './RootInternals.js';\n\nexport interface EditorCanvasImplProps {\n  /** Your controls (toolbar, inputs). Rendered as an overlay inside the editor\n   *  context so binding hooks work. */\n  children?: ReactNode;\n  /** Editor chrome preset. `Editor.Canvas` pins the chrome-less `'embed-only'`;\n   *  the legacy `<RealtimeCanvas kit>` prop passes richer presets through. */\n  kit?: KitPresetId | KitDefinition;\n  /** Inherit the host app's theme instead of managing its own (default true). */\n  inheritTheme?: boolean;\n  /** Cap the canvas height in px. */\n  maxHeight?: number;\n  /** Privileged-service wiring override (usually inherited from Root). */\n  services?: CanvasServices;\n  /** Observe the live design state (the same {@link CanvasState} the Root's\n   *  state store tracks). Safe to pass inline — read through a ref. */\n  onChange?: (state: CanvasState) => void;\n  /** Whether the wrapping div self-applies `.sc-root`. The legacy\n   *  `<RealtimeCanvas>` always did (it could be the only Snowcone DOM on the\n   *  page); under `Editor.Root` the Root applies it once and parts never\n   *  self-apply (ADR-0085). Re-applying is harmless (same variables), so the\n   *  legacy wrapper keeps `true` for bit-identical back-compat. */\n  selfScope?: boolean;\n  /** `data-sc-part` value for the wrapping div (the parts contract). */\n  partAttr?: string;\n  /** Mount the built-in floating contextual toolbar (ADR-0085 §5: with no\n   *  `Editor.Controls` mounted, `Editor.Canvas` defaults to the floating\n   *  toolbar; a registered DOCKED Controls suppresses it). Set by\n   *  `Editor.Canvas` only — the legacy `<RealtimeCanvas>` wrapper keeps\n   *  today's chrome-less behavior. @internal */\n  builtinControls?: boolean;\n  className?: string;\n  style?: CSSProperties;\n}\n\nconst noopSubscribe = (): (() => void) => () => {};\n\n/**\n * Runs INSIDE the canvas's editor context (the overlay slot) and registers\n * the imperative bridge sibling parts use to edit by layer name through the\n * command path. Generalizes `useTextBinding`'s write mechanics to a dynamic\n * name (a hook can't take names at call time).\n */\nfunction CanvasBindingBridge(): null {\n  const { elementStore } = useElementsContext();\n  const { executeElementUpdate } = useCommandContext();\n  // Tolerant on purpose: the legacy <RealtimeCanvas> is supported inside a\n  // bare EmbedContext (advanced consumers provide their own); only under an\n  // <Editor.Root> is there a registry to bridge into.\n  const internals = useContext(EditorRootInternalsContext);\n\n  const latest = useRef({ elementStore, executeElementUpdate });\n  latest.current = { elementStore, executeElementUpdate };\n\n  const registry = internals?.registry ?? null;\n  useLayoutEffect(() => {\n    if (!registry) return;\n    return registry.registerCanvasBridge({\n      setTextByName(name: string, text: string): boolean {\n        const { elementStore: store, executeElementUpdate: execute } = latest.current;\n        const matches = store.getAllByName(name).filter((el): el is TextElement => el instanceof TextElement);\n        if (matches.length === 0) return false;\n        for (const el of matches) {\n          const cloned = el.clone() as TextElement;\n          cloned.setText(text);\n          execute(el, cloned);\n        }\n        return true;\n      },\n    });\n  }, [registry]);\n\n  return null;\n}\n\nexport const EditorCanvasImpl = forwardRef<SnowconeCanvasHandle, EditorCanvasImplProps>(\n  function EditorCanvasImpl(\n    {\n      children,\n      kit = 'embed-only',\n      inheritTheme = true,\n      maxHeight,\n      services,\n      onChange,\n      selfScope = false,\n      partAttr,\n      builtinControls = false,\n      className,\n      style,\n    }: EditorCanvasImplProps,\n    ref,\n  ): React.ReactElement {\n    const { placement, throttleMs, pieceGuides, pushRender, stateStore } = useEmbedContext();\n\n    // Under an <Editor.Root> the editor document is mounted by the ROOT (P1\n    // provider inversion, D9: state always) — SnowconeCanvas must write into\n    // that document instead of mounting its own, and a REMOUNT of this part\n    // must rebuild the (surviving) document from the live seed instead of\n    // accreting onto the previous mount's artboards/elements. The legacy\n    // <RealtimeCanvas> inside a bare EmbedContext (no Root) keeps mounting\n    // its own provider, exactly as before.\n    const rootInternals = useContext(EditorRootInternalsContext);\n    const underRoot = rootInternals !== null;\n\n    // ADR-0085 §5 (Controls placement resolution): with no Editor.Controls\n    // mounted — or a `placement=\"floating\"` one — the canvas owns the\n    // floating contextual toolbar; a registered DOCKED Controls suppresses\n    // it. Subscribed to the part registry so the zones swap live when a\n    // docked Controls mounts/unmounts.\n    const partsRegistry = rootInternals?.registry ?? null;\n    useSyncExternalStore(\n      partsRegistry ? partsRegistry.subscribe : noopSubscribe,\n      partsRegistry ? partsRegistry.getVersion : () => 0,\n      partsRegistry ? partsRegistry.getVersion : () => 0,\n    );\n    const showBuiltinFloatingControls =\n      builtinControls && underRoot && !(partsRegistry?.hasDockedControls() ?? false);\n\n    // Seed from the LIVE store, not the original design (ADR-0085 §3): the\n    // store starts as design.toJSON(), so a fresh mount is identical to the\n    // old behavior — but edits made while this chunk was loading (e.g. a\n    // TextField keystroke in the first second) survive instead of being\n    // clobbered by a stale seed. Captured once per store identity; later\n    // store changes flow through the editor document, not re-seeding.\n    const seed = useMemo(() => stateStore.getState(), [stateStore]);\n\n    // Latest-ref so a host's inline `onChange` identity never matters here\n    // (SnowconeCanvas already refs ITS callback; this keeps ours symmetric).\n    const onChangeRef = useRef(onChange);\n    onChangeRef.current = onChange;\n\n    const rootClass = selfScope ? 'sc-root' : 'sc-canvas-frame';\n\n    return (\n      <div className={`${rootClass}${className ? ` ${className}` : ''}`} style={style} data-sc-part={partAttr}>\n        <SnowconeCanvas\n          ref={ref}\n          kit={kit}\n          inheritTheme={inheritTheme}\n          services={services}\n          externalProvider={underRoot}\n          resetDocumentOnMount={underRoot}\n          artboards={seed.artboards}\n          activeArtboard={placement}\n          initialElements={seed.elements}\n          layoutConfig={maxHeight ? { maxHeight } : undefined}\n          overlay={\n            <>\n              <CanvasBindingBridge />\n              {showBuiltinFloatingControls ? <ContextualToolbars mode=\"floating\" partAttr=\"controls\" /> : null}\n              {children}\n            </>\n          }\n          // #566: the product's printable-area / dead-zone overlay, fetched and\n          // dims-gated by the Root — same overlay snowcone.app's editor\n          // shows, so a buyer can't unknowingly edit under a camera cutout.\n          pieceGuides={pieceGuides ?? undefined}\n          onChange={(state) => {\n            // ONE store, last-write-wins (ADR-0085 §3): the editor document is\n            // the write authority while mounted; the Root store derives from\n            // its onChange, then the render follows the store.\n            stateStore.setState(state);\n            pushRender(serializeStateForServer(state), throttleMs);\n            onChangeRef.current?.(state);\n          }}\n        />\n      </div>\n    );\n  },\n);\n\nexport type { CanvasState, SnowconeCanvasHandle };\n"],"names":["noopSubscribe","CanvasBindingBridge","elementStore","useElementsContext","executeElementUpdate","useCommandContext","internals","useContext","EditorRootInternalsContext","latest","useRef","registry","useLayoutEffect","name","text","store","execute","matches","el","TextElement","cloned","EditorCanvasImpl","forwardRef","children","kit","inheritTheme","maxHeight","services","onChange","selfScope","partAttr","builtinControls","className","style","ref","placement","throttleMs","pieceGuides","pushRender","stateStore","useEmbedContext","rootInternals","underRoot","partsRegistry","useSyncExternalStore","showBuiltinFloatingControls","seed","useMemo","onChangeRef","jsx","SnowconeCanvas","jsxs","Fragment","ContextualToolbars","state","serializeStateForServer","_a"],"mappings":"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"}
+{"version":3,"file":"EditorCanvasImpl-2ZgIUVpK.js","sources":["../src/components/editor/EditorCanvasImpl.tsx"],"sourcesContent":["'use client';\n\n/**\n * The heavy half of `Editor.Canvas` (and of the legacy `<RealtimeCanvas>`),\n * extracted from RealtimeCanvas's body. This module statically imports\n * `SnowconeCanvas` — i.e. the full rendering engine — and is therefore ONLY\n * ever reached through a dynamic `import()` (D9): the embed entry's static\n * import graph stays renderer-free, mechanically enforced by the\n * import-graph CI check.\n *\n * Beyond the original wiring (seed → SnowconeCanvas, edit →\n * `serializeStateForServer` → `pushRender`), this adds the ADR-0085 §3 store\n * wiring: every canvas change lands in the Root's {@link DesignStateStore}\n * (the ONE live design state), and a {@link CanvasBridge} is registered so\n * `Editor.TextField` writes route through the editor command path (undo/redo,\n * repaint) while a canvas is mounted — the editor document stays the single\n * write authority.\n */\n\nimport React, {\n  forwardRef,\n  useContext,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useSyncExternalStore,\n  type CSSProperties,\n  type ReactNode,\n} from 'react';\nimport { SnowconeCanvas } from '../embed/SnowconeCanvas.js';\nimport { ContextualToolbars } from '../ContextualToolbars.js';\nimport type { CanvasState, SnowconeCanvasHandle } from '../embed/SnowconeCanvas.js';\nimport { serializeStateForServer } from '../../rendering/serialize-for-server.js';\nimport type { KitPresetId, KitDefinition } from '../../kits/types.js';\nimport type { CanvasServices } from '../../contexts/CanvasServicesContext.js';\nimport { useEmbedContext } from '../embed-realtime/context.js';\nimport { useElementsContext } from '../../contexts/ElementsContext.js';\nimport { useCommandContext } from '../../contexts/CommandContext.js';\nimport { TextElement } from '../../core/TextElement.js';\nimport { EditorRootInternalsContext } from './RootInternals.js';\n\nexport interface EditorCanvasImplProps {\n  /** Your controls (toolbar, inputs). Rendered as an overlay inside the editor\n   *  context so binding hooks work. */\n  children?: ReactNode;\n  /** Editor chrome preset. `Editor.Canvas` pins the chrome-less `'embed-only'`;\n   *  the legacy `<RealtimeCanvas kit>` prop passes richer presets through. */\n  kit?: KitPresetId | KitDefinition;\n  /** Inherit the host app's theme instead of managing its own (default true). */\n  inheritTheme?: boolean;\n  /** Cap the canvas height in px. */\n  maxHeight?: number;\n  /** Privileged-service wiring override (usually inherited from Root). */\n  services?: CanvasServices;\n  /** Observe the live design state (the same {@link CanvasState} the Root's\n   *  state store tracks). Safe to pass inline — read through a ref. */\n  onChange?: (state: CanvasState) => void;\n  /** Whether the wrapping div self-applies `.sc-root`. The legacy\n   *  `<RealtimeCanvas>` always did (it could be the only Snowcone DOM on the\n   *  page); under `Editor.Root` the Root applies it once and parts never\n   *  self-apply (ADR-0085). Re-applying is harmless (same variables), so the\n   *  legacy wrapper keeps `true` for bit-identical back-compat. */\n  selfScope?: boolean;\n  /** `data-sc-part` value for the wrapping div (the parts contract). */\n  partAttr?: string;\n  /** Mount the built-in floating contextual toolbar (ADR-0085 §5: with no\n   *  `Editor.Controls` mounted, `Editor.Canvas` defaults to the floating\n   *  toolbar; a registered DOCKED Controls suppresses it). Set by\n   *  `Editor.Canvas` only — the legacy `<RealtimeCanvas>` wrapper keeps\n   *  today's chrome-less behavior. @internal */\n  builtinControls?: boolean;\n  className?: string;\n  style?: CSSProperties;\n}\n\nconst noopSubscribe = (): (() => void) => () => {};\n\n/**\n * Runs INSIDE the canvas's editor context (the overlay slot) and registers\n * the imperative bridge sibling parts use to edit by layer name through the\n * command path. Generalizes `useTextBinding`'s write mechanics to a dynamic\n * name (a hook can't take names at call time).\n */\nfunction CanvasBindingBridge(): null {\n  const { elementStore } = useElementsContext();\n  const { executeElementUpdate } = useCommandContext();\n  // Tolerant on purpose: the legacy <RealtimeCanvas> is supported inside a\n  // bare EmbedContext (advanced consumers provide their own); only under an\n  // <Editor.Root> is there a registry to bridge into.\n  const internals = useContext(EditorRootInternalsContext);\n\n  const latest = useRef({ elementStore, executeElementUpdate });\n  latest.current = { elementStore, executeElementUpdate };\n\n  const registry = internals?.registry ?? null;\n  useLayoutEffect(() => {\n    if (!registry) return;\n    return registry.registerCanvasBridge({\n      setTextByName(name: string, text: string): boolean {\n        const { elementStore: store, executeElementUpdate: execute } = latest.current;\n        const matches = store.getAllByName(name).filter((el): el is TextElement => el instanceof TextElement);\n        if (matches.length === 0) return false;\n        for (const el of matches) {\n          const cloned = el.clone() as TextElement;\n          cloned.setText(text);\n          execute(el, cloned);\n        }\n        return true;\n      },\n    });\n  }, [registry]);\n\n  return null;\n}\n\nexport const EditorCanvasImpl = forwardRef<SnowconeCanvasHandle, EditorCanvasImplProps>(\n  function EditorCanvasImpl(\n    {\n      children,\n      kit = 'embed-only',\n      inheritTheme = true,\n      maxHeight,\n      services,\n      onChange,\n      selfScope = false,\n      partAttr,\n      builtinControls = false,\n      className,\n      style,\n    }: EditorCanvasImplProps,\n    ref,\n  ): React.ReactElement {\n    const { placement, throttleMs, pieceGuides, pushRender, stateStore } = useEmbedContext();\n\n    // Under an <Editor.Root> the editor document is mounted by the ROOT (P1\n    // provider inversion, D9: state always) — SnowconeCanvas must write into\n    // that document instead of mounting its own, and a REMOUNT of this part\n    // must rebuild the (surviving) document from the live seed instead of\n    // accreting onto the previous mount's artboards/elements. The legacy\n    // <RealtimeCanvas> inside a bare EmbedContext (no Root) keeps mounting\n    // its own provider, exactly as before.\n    const rootInternals = useContext(EditorRootInternalsContext);\n    const underRoot = rootInternals !== null;\n\n    // ADR-0085 §5 (Controls placement resolution): with no Editor.Controls\n    // mounted — or a `placement=\"floating\"` one — the canvas owns the\n    // floating contextual toolbar; a registered DOCKED Controls suppresses\n    // it. Subscribed to the part registry so the zones swap live when a\n    // docked Controls mounts/unmounts.\n    const partsRegistry = rootInternals?.registry ?? null;\n    useSyncExternalStore(\n      partsRegistry ? partsRegistry.subscribe : noopSubscribe,\n      partsRegistry ? partsRegistry.getVersion : () => 0,\n      partsRegistry ? partsRegistry.getVersion : () => 0,\n    );\n    const showBuiltinFloatingControls =\n      builtinControls && underRoot && !(partsRegistry?.hasDockedControls() ?? false);\n\n    // Seed from the LIVE store, not the original design (ADR-0085 §3): the\n    // store starts as design.toJSON(), so a fresh mount is identical to the\n    // old behavior — but edits made while this chunk was loading (e.g. a\n    // TextField keystroke in the first second) survive instead of being\n    // clobbered by a stale seed. Captured once per store identity; later\n    // store changes flow through the editor document, not re-seeding.\n    const seed = useMemo(() => stateStore.getState(), [stateStore]);\n\n    // Latest-ref so a host's inline `onChange` identity never matters here\n    // (SnowconeCanvas already refs ITS callback; this keeps ours symmetric).\n    const onChangeRef = useRef(onChange);\n    onChangeRef.current = onChange;\n\n    const rootClass = selfScope ? 'sc-root' : 'sc-canvas-frame';\n\n    return (\n      <div className={`${rootClass}${className ? ` ${className}` : ''}`} style={style} data-sc-part={partAttr}>\n        <SnowconeCanvas\n          ref={ref}\n          kit={kit}\n          inheritTheme={inheritTheme}\n          services={services}\n          externalProvider={underRoot}\n          resetDocumentOnMount={underRoot}\n          artboards={seed.artboards}\n          activeArtboard={placement}\n          initialElements={seed.elements}\n          layoutConfig={maxHeight ? { maxHeight } : undefined}\n          overlay={\n            <>\n              <CanvasBindingBridge />\n              {showBuiltinFloatingControls ? <ContextualToolbars mode=\"floating\" partAttr=\"controls\" /> : null}\n              {children}\n            </>\n          }\n          // #566: the product's printable-area / dead-zone overlay, fetched and\n          // dims-gated by the Root — same overlay snowcone.app's editor\n          // shows, so a buyer can't unknowingly edit under a camera cutout.\n          pieceGuides={pieceGuides ?? undefined}\n          onChange={(state) => {\n            // ONE store, last-write-wins (ADR-0085 §3): the editor document is\n            // the write authority while mounted; the Root store derives from\n            // its onChange, then the render follows the store.\n            stateStore.setState(state);\n            pushRender(serializeStateForServer(state), throttleMs);\n            onChangeRef.current?.(state);\n          }}\n        />\n      </div>\n    );\n  },\n);\n\nexport type { CanvasState, SnowconeCanvasHandle };\n"],"names":["noopSubscribe","CanvasBindingBridge","elementStore","useElementsContext","executeElementUpdate","useCommandContext","internals","useContext","EditorRootInternalsContext","latest","useRef","registry","useLayoutEffect","name","text","store","execute","matches","el","TextElement","cloned","EditorCanvasImpl","forwardRef","children","kit","inheritTheme","maxHeight","services","onChange","selfScope","partAttr","builtinControls","className","style","ref","placement","throttleMs","pieceGuides","pushRender","stateStore","useEmbedContext","rootInternals","underRoot","partsRegistry","useSyncExternalStore","showBuiltinFloatingControls","seed","useMemo","onChangeRef","jsx","SnowconeCanvas","jsxs","Fragment","ContextualToolbars","state","serializeStateForServer","_a"],"mappings":"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"}