@elytracms/studio 0.0.63 → 0.0.64

package/dist/components/builder/canvas-theme-notice.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvas-theme-notice.js","sourceRoot":"","sources":["../../../src/components/builder/canvas-theme-notice.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAChC,OAAO,EAAE,aAAa,EAAE,CAAC,EAAE,MAAM,cAAc,CAAA;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAA;AACtD,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAA;AAChE,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAA;AAGhD;;;;;;;;;;;;;;GAcG;AAEH,MAAM,cAAc,GAAG,IAAI,GAAG,EAA6B,CAAA;AAE3D,sDAAsD;AACtD,MAAM,UAAU,8BAA8B;IAC5C,cAAc,CAAC,KAAK,EAAE,CAAA;AACxB,CAAC;AAED,MAAM,WAAW,GAAuD;IACtE,MAAM,EAAE,kCAAkC;IAC1C,kBAAkB,EAAE,2CAA2C;IAC/D,iBAAiB,EAAE,yCAAyC;IAC5D,eAAe,EAAE,wCAAwC;CAC1D,CAAA;AAED,MAAM,UAAU,iBAAiB,CAAC,EAAE,MAAM,EAAwC;IAChF,+EAA+E;IAC/E,MAAM,CAAC,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAA;IACtC,IAAI,CAAC,MAAM,IAAI,CAAC,YAAY,EAAE;QAAE,OAAO,IAAI,CAAA;IAC3C,MAAM,UAAU,GAAG,WAAW,CAAC,MAAM,CAAC,IAAI,CAAC,CAAA;IAC3C,IAAI,CAAC,UAAU,IAAI,cAAc,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC;QAAE,OAAO,IAAI,CAAA;IAE/D,OAAO,CACL,6BACc,qBAAqB,sBACf,MAAM,CAAC,IAAI,EAC7B,SAAS,EAAC,4EAA4E,YAEtF,cAAK,SAAS,EAAC,kFAAkF,YAC/F,MAAC,GAAG,IAAC,GAAG,EAAC,GAAG,EAAC,KAAK,EAAC,OAAO,aACxB,KAAC,aAAa,IAAC,SAAS,EAAC,uCAAuC,wBAAe,EAC/E,KAAC,IAAI,IAAC,IAAI,EAAC,IAAI,EAAC,SAAS,EAAC,gBAAgB,YACvC,SAAS,CAAC,UAAU,CAAC,GACjB,EACP,iBACE,IAAI,EAAC,QAAQ,gBACD,SAAS,CAAC,gBAAgB,CAAC,EACvC,OAAO,EAAE,GAAG,EAAE;4BACZ,cAAc,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,CAAA;4BAC/B,cAAc,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,CAAA;wBAC5B,CAAC,EACD,SAAS,EAAC,mFAAmF,YAE7F,KAAC,CAAC,IAAC,SAAS,EAAC,UAAU,GAAG,GACnB,IACL,GACF,GACF,CACP,CAAA;AACH,CAAC","sourcesContent":["import { useState } from 'react'\nimport { AlertTriangle, X } from 'lucide-react'\nimport { translate } from '@elytracms/studio/lib/i18n'\nimport { isDevRuntime } from '@elytracms/studio/lib/persistence'\nimport { Row, Text } from '@elytracms/studio/ui'\nimport type { CanvasThemeStatus } from './canvas-chrome'\n\n/**\n * EC-414 AD-D item 2 — the canvas-theme runtime notice, in the established\n * validation-surface style (the `ClipboardNoticeOverlay` shape: a dismissible,\n * NEVER-blocking overlay above the canvas, in the STUDIO document — studio UI\n * primitives are fine here, this is not in-frame chrome). Dev builds only:\n *\n *   - `legacy`: the probe found the merged pre-EC-414 canvas.css — a one-time\n *     notice naming the migration (the canvas keeps working exactly as before).\n *   - `stylesheet-error` / `no-theme-tokens` / `no-stylesheet`: the canvas\n *     stylesheet is broken or missing — the invalid state is named explicitly\n *     instead of silently rendering unstyled blocks.\n *\n * \"One-time\": dismissing a kind suppresses it for the rest of the studio\n * session (module state survives canvas remounts/navigation).\n */\n\nconst dismissedKinds = new Set<CanvasThemeStatus['kind']>()\n\n/** Test hook: reset the session-sticky dismissals. */\nexport function resetCanvasThemeNoticeForTests(): void {\n  dismissedKinds.clear()\n}\n\nconst NOTICE_KEYS: Partial<Record<CanvasThemeStatus['kind'], string>> = {\n  legacy: 'builder.canvasTheme.legacyNotice',\n  'stylesheet-error': 'builder.canvasTheme.stylesheetErrorNotice',\n  'no-theme-tokens': 'builder.canvasTheme.noThemeTokensNotice',\n  'no-stylesheet': 'builder.canvasTheme.noStylesheetNotice',\n}\n\nexport function CanvasThemeNotice({ status }: { status: CanvasThemeStatus | null }) {\n  // Local state only forces the re-render on dismiss; the truth is module-level.\n  const [, setDismissedAt] = useState(0)\n  if (!status || !isDevRuntime()) return null\n  const messageKey = NOTICE_KEYS[status.kind]\n  if (!messageKey || dismissedKinds.has(status.kind)) return null\n\n  return (\n    <div\n      data-testid=\"canvas-theme-notice\"\n      data-notice-kind={status.kind}\n      className=\"absolute top-4 left-1/2 z-20 w-max max-w-[min(460px,90%)] -translate-x-1/2\"\n    >\n      <div className=\"rounded-lg border border-border bg-popover p-2 text-popover-foreground shadow-lg\">\n        <Row gap=\"2\" align=\"start\">\n          <AlertTriangle className=\"mt-0.5 size-3.5 shrink-0 text-warning\" aria-hidden />\n          <Text size=\"xs\" className=\"min-w-0 flex-1\">\n            {translate(messageKey)}\n          </Text>\n          <button\n            type=\"button\"\n            aria-label={translate('common.dismiss')}\n            onClick={() => {\n              dismissedKinds.add(status.kind)\n              setDismissedAt(Date.now())\n            }}\n            className=\"shrink-0 rounded p-0.5 text-muted-foreground hover:bg-muted hover:text-foreground\"\n          >\n            <X className=\"size-3.5\" />\n          </button>\n        </Row>\n      </div>\n    </div>\n  )\n}\n"]}

package/dist/components/builder/canvas.js

@@ -7,7 +7,8 @@ import { getStudioRegistry } from '@elytracms/studio/lib/registry';
 import { translate } from '@elytracms/studio/lib/i18n';
 import { getInstantiatedKit } from '@elytracms/studio/lib/starters/kit-session';
 import { resolveDeploymentCanvasTheme } from '@elytracms/studio/lib/workspace';
-import { applyCanvasChrome } from './canvas-chrome.js';
+import { wireCanvasChrome } from './canvas-chrome.js';
+import { CanvasThemeNotice } from './canvas-theme-notice.js';
 import { getCanvasStylesheetUrl } from './canvas-stylesheet.js';
 import { useBuilder } from './builder-store.js';
 import { useCanvasViewports, viewportWidth } from './canvas-breakpoints.js';
@@ -48,6 +49,9 @@ export function BuilderCanvas({ perspective = 'draft', } = {}) {
     // (EC-117) — injected after app.css so the kit's overrides win in the cascade.
     const params = useParams({ strict: false });
     const kitTokensCss = params.projectId ? getInstantiatedKit(params.projectId)?.tokensCss : undefined;
+    // EC-414 AD-D: the settled canvas-theme classification (legacy merged shape /
+    // broken stylesheet) drives the dev-only, never-blocking notice overlay.
+    const [themeStatus, setThemeStatus] = useState(null);
     const wireUp = useCallback(() => {
         const d = iframeRef.current?.contentDocument;
         if (!d || !d.body)
@@ -57,18 +61,21 @@ export function BuilderCanvas({ perspective = 'draft', } = {}) {
         // as a light, site-like page — never the studio chrome's current theme (a
         // black canvas is exactly what leaks through when the studio is
         // dark-themed and the iframe root inherits that class). The injected
-        // canvas stylesheet's `:root` (light) tokens supply that backdrop for free
-        // once `.dark` is never added here (mirrors the components-preview fix,
-        // `component-preview.tsx`). The editing chrome (selection/hover outlines,
+        // canvas stylesheet (new world: the chrome's neutral backdrop; legacy
+        // world: the studio `:root` tokens) supplies that backdrop once `.dark` is
+        // never added here (mirrors the components-preview surface, which wires
+        // through the same chrome). The editing chrome (selection/hover outlines,
         // drop indicators, the rich-text toolbar, locale-fallback chips) uses
-        // hardcoded colors rather than these tokens, so it stays visible against a
-        // light page regardless. The full injection — stylesheet link, editing
-        // chrome, kit tokens, and the consumer's `defineStudio({ canvas })` theme
-        // (EC-389, injected LAST so it wins) — lives in `applyCanvasChrome`.
-        applyCanvasChrome(d, {
+        // hardcoded colors rather than tokens, so it stays visible against a light
+        // page regardless. The full injection — stylesheet link, editing chrome,
+        // kit tokens, the consumer's `defineStudio({ canvas })` theme (EC-389,
+        // injected LAST so it wins), and the EC-414 world probe — lives in
+        // `wireCanvasChrome`/`applyCanvasChrome`.
+        wireCanvasChrome(d, {
             stylesheetUrl: getCanvasStylesheetUrl(),
             kitTokensCss,
             theme: resolveDeploymentCanvasTheme(),
+            onStatus: (status) => setThemeStatus((prev) => (prev?.kind === status.kind ? prev : status)),
         });
         setDoc(d);
     }, [kitTokensCss]);
@@ -146,7 +153,7 @@ export function BuilderCanvas({ perspective = 'draft', } = {}) {
     // (Tailwind defaults when unconfigured), the same resolved set the toolbar
     // switcher offers.
     const { viewports } = useCanvasViewports();
-    return (_jsxs("div", { className: "canvas-grid relative flex min-h-0 flex-1 items-stretch justify-center overflow-auto p-6", children: [_jsx(ClipboardNoticeOverlay, {}), _jsxs("div", { style: { width: viewportWidth(viewports, builder.viewport), maxWidth: '100%' }, className: "flex", children: [_jsx("iframe", { ref: iframeRef, onLoad: wireUp, title: translate('builder.canvas.pagePreview'), className: "min-h-[480px] w-full rounded-lg border border-border bg-background shadow-md", srcDoc: "<!doctype html><html><head></head><body></body></html>" }), doc
+    return (_jsxs("div", { className: "canvas-grid relative flex min-h-0 flex-1 items-stretch justify-center overflow-auto p-6", children: [_jsx(ClipboardNoticeOverlay, {}), _jsx(CanvasThemeNotice, { status: themeStatus }), _jsxs("div", { style: { width: viewportWidth(viewports, builder.viewport), maxWidth: '100%' }, className: "flex", children: [_jsx("iframe", { ref: iframeRef, onLoad: wireUp, title: translate('builder.canvas.pagePreview'), className: "min-h-[480px] w-full rounded-lg border border-border bg-background shadow-md", srcDoc: "<!doctype html><html><head></head><body></body></html>" }), doc
                         ? createPortal(
                         // Render the composition root directly (EC-287: no layout
                         // indirection — a page renders its blocks).

package/dist/components/builder/canvas.js.map

@@ -1 +1 @@
-{"version":3,"file":"canvas.js","sourceRoot":"","sources":["../../../src/components/builder/canvas.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAChE,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AACxC,OAAO,EAAE,qBAAqB,EAAE,MAAM,kCAAkC,CAAA;AAExE,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAA;AACpD,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAA;AAClE,OAAO,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAA;AAEtD,OAAO,EAAE,kBAAkB,EAAE,MAAM,4CAA4C,CAAA;AAC/E,OAAO,EAAE,4BAA4B,EAAE,MAAM,iCAAiC,CAAA;AAC9E,OAAO,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAA;AACnD,OAAO,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAA;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAC5C,OAAO,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAA;AACxE,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAA;AAC3C,OAAO,EAAE,sBAAsB,EAAE,MAAM,yBAAyB,CAAA;AAChE,OAAO,EAAE,sBAAsB,EAAE,MAAM,yBAAyB,CAAA;AAChE,OAAO,EACL,sBAAsB,EACtB,wBAAwB,EACxB,kBAAkB,GACnB,MAAM,qBAAqB,CAAA;AAC5B,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAA;AACrD,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAA;AAGrE;;;;;;;;;GASG;AACH,MAAM,UAAU,aAAa,CAAC,EAC5B,WAAW,GAAG,OAAO,MAMnB,EAAE;IACJ,MAAM,OAAO,GAAG,UAAU,EAAE,CAAA;IAC5B,MAAM,EAAE,QAAQ,EAAE,GAAG,OAAO,CAAA;IAC5B,MAAM,MAAM,GAAG,iBAAiB,EAAE,CAAA;IAElC,gFAAgF;IAChF,6EAA6E;IAC7E,uDAAuD;IACvD,MAAM,UAAU,GAAkB,OAAO,CAAC,OAAO,CAAA;IACjD,MAAM,SAAS,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAA;IACjD,MAAM,CAAC,GAAG,EAAE,MAAM,CAAC,GAAG,QAAQ,CAAkB,IAAI,CAAC,CAAA;IAErD,0EAA0E;IAC1E,8CAA8C;IAC9C,MAAM,UAAU,GAAG,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,CAAA;IAC1C,UAAU,CAAC,OAAO,GAAG,OAAO,CAAC,OAAO,CAAA;IACpC,MAAM,aAAa,GAAG,MAAM,CAAC,OAAO,CAAC,UAAU,CAAC,CAAA;IAChD,aAAa,CAAC,OAAO,GAAG,OAAO,CAAC,UAAU,CAAA;IAE1C,gGAAgG;IAChG,+EAA+E;IAC/E,MAAM,MAAM,GAAG,SAAS,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,CAA2B,CAAA;IACrE,MAAM,YAAY,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,kBAAkB,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC,SAAS,CAAA;IAEnG,MAAM,MAAM,GAAG,WAAW,CAAC,GAAG,EAAE;QAC9B,MAAM,CAAC,GAAG,SAAS,CAAC,OAAO,EAAE,eAAe,CAAA;QAC5C,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI;YAAE,OAAM;QACzB,wEAAwE;QACxE,2EAA2E;QAC3E,0EAA0E;QAC1E,gEAAgE;QAChE,qEAAqE;QACrE,2EAA2E;QAC3E,wEAAwE;QACxE,0EAA0E;QAC1E,sEAAsE;QACtE,2EAA2E;QAC3E,uEAAuE;QACvE,0EAA0E;QAC1E,qEAAqE;QACrE,iBAAiB,CAAC,CAAC,EAAE;YACnB,aAAa,EAAE,sBAAsB,EAAE;YACvC,YAAY;YACZ,KAAK,EAAE,4BAA4B,EAAE;SACtC,CAAC,CAAA;QACF,MAAM,CAAC,CAAC,CAAC,CAAA;IACX,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAA;IAElB,2EAA2E;IAC3E,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,SAAS,CAAC,OAAO,EAAE,eAAe,EAAE,UAAU,KAAK,UAAU;YAAE,MAAM,EAAE,CAAA;IAC7E,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAA;IAEZ,0EAA0E;IAC1E,qEAAqE;IACrE,6DAA6D;IAC7D,MAAM,MAAM,GAAG,sBAAsB,CAAC,GAAG,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,EAAE,CAAC,CAAA;IAC5E,MAAM,EAAE,UAAU,EAAE,YAAY,EAAE,cAAc,EAAE,GAAG,MAAM,CAAA;IAE3D,+DAA+D;IAC/D,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,GAAG;YAAE,OAAM;QAChB,MAAM,OAAO,GAAG,CAAC,CAAQ,EAAE,EAAE;YAC3B,yEAAyE;YACzE,IAAI,UAAU,CAAC,OAAO,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAc,CAAC;gBAAE,OAAM;YAC/D,MAAM,EAAE,GAAG,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAA;YAC7B,IAAI,EAAE,EAAE,CAAC;gBACP,CAAC,CAAC,cAAc,EAAE,CAAA;gBAClB,QAAQ,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAA;YAClC,CAAC;QACH,CAAC,CAAA;QACD,MAAM,MAAM,GAAG,CAAC,CAAQ,EAAE,EAAE,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,EAAE,CAAC,CAAA;QAChF,MAAM,OAAO,GAAG,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,IAAI,EAAE,CAAC,CAAA;QAC3D,GAAG,CAAC,gBAAgB,CAAC,OAAO,EAAE,OAAO,EAAE,IAAI,CAAC,CAAA;QAC5C,GAAG,CAAC,gBAAgB,CAAC,WAAW,EAAE,MAAM,CAAC,CAAA;QACzC,GAAG,CAAC,gBAAgB,CAAC,YAAY,EAAE,OAAO,EAAE,IAAI,CAAC,CAAA;QACjD,OAAO,GAAG,EAAE;YACV,GAAG,CAAC,mBAAmB,CAAC,OAAO,EAAE,OAAO,EAAE,IAAI,CAAC,CAAA;YAC/C,GAAG,CAAC,mBAAmB,CAAC,WAAW,EAAE,MAAM,CAAC,CAAA;YAC5C,GAAG,CAAC,mBAAmB,CAAC,YAAY,EAAE,OAAO,EAAE,IAAI,CAAC,CAAA;QACtD,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,GAAG,EAAE,QAAQ,EAAE,UAAU,CAAC,CAAC,CAAA;IAE/B,gEAAgE;IAChE,YAAY,CAAC,GAAG,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,CAAC,CAAA;IAE/D,4EAA4E;IAC5E,0EAA0E;IAC1E,4EAA4E;IAC5E,uEAAuE;IACvE,8DAA8D;IAC9D,MAAM,SAAS,GAAG,kBAAkB,EAAE,CAAA;IACtC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,GAAG;YAAE,OAAM;QAChB,OAAO,wBAAwB,CAAC,GAAG,EAAE;YACnC,SAAS;YACT,aAAa,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,OAAO;YAC1C,SAAS,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,OAAO,KAAK,IAAI;YAC5C,cAAc,EAAE,GAAG,CAAC,WAAW,EAAE,SAAS,CAAC,SAAS;YACpD,YAAY,EAAE,GAAG,EAAE,CAAC,GAAG,CAAC,YAAY,EAAE;SACvC,CAAC,CAAA;IACJ,CAAC,EAAE,CAAC,GAAG,EAAE,SAAS,EAAE,UAAU,CAAC,CAAC,CAAA;IAEhC,0EAA0E;IAC1E,0EAA0E;IAC1E,2BAA2B;IAC3B,MAAM,EAAE,GAAG,EAAE,WAAW,EAAE,GAAG,sBAAsB,CAAC;QAClD,OAAO,EAAE,OAAO,CAAC,OAAO;QACxB,UAAU,EAAE,OAAO,CAAC,UAAU;QAC9B,SAAS,EAAE,OAAO,CAAC,SAAS;QAC5B,MAAM;QACN,WAAW;QACX,cAAc;KACf,CAAC,CAAA;IAEF,6EAA6E;IAC7E,qEAAqE;IACrE,MAAM,aAAa,GACjB,GAAG,IAAI,iBAAiB,CAAC,OAAO,CAAC,YAAY,CAAC,IAAI,WAAW,CAAC,GAAG,CAAC,OAAO,CAAC,YAAY,CAAC,EAAE,CAAC;QACxF,CAAC,CAAC,OAAO,CAAC,YAAY;QACtB,CAAC,CAAC,IAAI,CAAA;IAEV,8EAA8E;IAC9E,2EAA2E;IAC3E,mBAAmB;IACnB,MAAM,EAAE,SAAS,EAAE,GAAG,kBAAkB,EAAE,CAAA;IAE1C,OAAO,CACL,eAAK,SAAS,EAAC,yFAAyF,aAEtG,KAAC,sBAAsB,KAAG,EAC1B,eAAK,KAAK,EAAE,EAAE,KAAK,EAAE,aAAa,CAAC,SAAS,EAAE,OAAO,CAAC,QAAQ,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,SAAS,EAAC,MAAM,aACnG,iBACE,GAAG,EAAE,SAAS,EACd,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,SAAS,CAAC,4BAA4B,CAAC,EAC9C,SAAS,EAAC,8EAA8E,EACxF,MAAM,EAAC,wDAAwD,GAC/D,EACD,GAAG;wBACF,CAAC,CAAC,YAAY;wBACV,0DAA0D;wBAC1D,4CAA4C;wBAC5C,qBAAqB,CAAC,UAAU,EAAE,GAAG,CAAC,EACtC,GAAG,CAAC,IAAI,CACT;wBACH,CAAC,CAAC,IAAI,EACP,aAAa,IAAI,GAAG,CAAC,CAAC,CAAC,CACtB,KAAC,cAAc,IAAwB,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,aAAa,IAA/C,aAAa,CAAC,EAAE,CAAmC,CACzE,CAAC,CAAC,CAAC,IAAI,EAEP,YAAY,IAAI,GAAG,CAAC,CAAC,CAAC,KAAC,eAAe,IAAC,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,YAAY,GAAI,CAAC,CAAC,CAAC,IAAI,IAC3E,IACF,CACP,CAAA;AACH,CAAC","sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react'\nimport { createPortal } from 'react-dom'\nimport { renderPageComposition } from '@elytracms/core/runtime-renderer'\nimport type { ComponentNode } from '@elytracms/core/project-graph'\nimport { useParams } from '@elytracms/studio/router'\nimport { getStudioRegistry } from '@elytracms/studio/lib/registry'\nimport { translate } from '@elytracms/studio/lib/i18n'\nimport type { CanvasPerspective } from '@elytracms/studio/lib/data'\nimport { getInstantiatedKit } from '@elytracms/studio/lib/starters/kit-session'\nimport { resolveDeploymentCanvasTheme } from '@elytracms/studio/lib/workspace'\nimport { applyCanvasChrome } from './canvas-chrome'\nimport { getCanvasStylesheetUrl } from './canvas-stylesheet'\nimport { useBuilder } from './builder-store'\nimport { useCanvasViewports, viewportWidth } from './canvas-breakpoints'\nimport { nodeIdAt } from './canvas-dom'\nimport { useCanvasDnd } from './canvas-dnd'\nimport { useCanvasInlineEditing } from './canvas-inline-editing'\nimport { useCanvasRenderContext } from './canvas-render-context'\nimport {\n  ClipboardNoticeOverlay,\n  attachClipboardListeners,\n  useStudioClipboard,\n} from './clipboard-actions'\nimport { RichTextToolbar } from './rich-text-toolbar'\nimport { SpacingHandles, hasSpacingHandles } from './spacing-handles'\n\n\n/**\n * Iframe-isolated page preview (brief §8.2, EC-061, EC-064). The graph renders\n * into a same-origin iframe via a React portal — true style isolation + true\n * responsive widths. Each node is wrapped with an editable marker so clicks\n * select and hover/selection draw outlines. Native listeners bridge the iframe\n * boundary (React's synthetic events don't cross frames); the two big gesture\n * state machines live in their own tested modules (EC-330): drag & drop in\n * `canvas-dnd`, inline text/rich-text editing in `canvas-inline-editing`, and\n * the render-context assembly in `canvas-render-context`.\n */\nexport function BuilderCanvas({\n  perspective = 'draft',\n}: {\n  /** Resolve references against this perspective (EC-300/AD-16). The editable Draft\n   *  view passes `'draft'` (a just-made reusable shows immediately); the read-only\n   *  Published view passes `'published'` (honest preview of what delivery serves). */\n  perspective?: CanvasPerspective\n} = {}) {\n  const builder = useBuilder()\n  const { dispatch } = builder\n  const studio = getStudioRegistry()\n\n  // The edited composition root, composed for preview. EC-287 retired the project\n  // graph and its published-graph preview; the canvas always renders the live,\n  // editable draft (content publishing is per document).\n  const activeRoot: ComponentNode = builder.present\n  const iframeRef = useRef<HTMLIFrameElement>(null)\n  const [doc, setDoc] = useState<Document | null>(null)\n\n  // Graph/selection refs let the native iframe listeners read the *current*\n  // state without re-subscribing on every edit.\n  const presentRef = useRef(builder.present)\n  presentRef.current = builder.present\n  const selectedIdRef = useRef(builder.selectedId)\n  selectedIdRef.current = builder.selectedId\n\n  // When the project was created from a starter kit, its brand token palette drives the canvas UI\n  // (EC-117) — injected after app.css so the kit's overrides win in the cascade.\n  const params = useParams({ strict: false }) as { projectId?: string }\n  const kitTokensCss = params.projectId ? getInstantiatedKit(params.projectId)?.tokensCss : undefined\n\n  const wireUp = useCallback(() => {\n    const d = iframeRef.current?.contentDocument\n    if (!d || !d.body) return\n    // Deliberately no `.dark` here: this iframe renders the REAL page (plus\n    // studio editing chrome portaled alongside it), and its backdrop must read\n    // as a light, site-like page — never the studio chrome's current theme (a\n    // black canvas is exactly what leaks through when the studio is\n    // dark-themed and the iframe root inherits that class). The injected\n    // canvas stylesheet's `:root` (light) tokens supply that backdrop for free\n    // once `.dark` is never added here (mirrors the components-preview fix,\n    // `component-preview.tsx`). The editing chrome (selection/hover outlines,\n    // drop indicators, the rich-text toolbar, locale-fallback chips) uses\n    // hardcoded colors rather than these tokens, so it stays visible against a\n    // light page regardless. The full injection — stylesheet link, editing\n    // chrome, kit tokens, and the consumer's `defineStudio({ canvas })` theme\n    // (EC-389, injected LAST so it wins) — lives in `applyCanvasChrome`.\n    applyCanvasChrome(d, {\n      stylesheetUrl: getCanvasStylesheetUrl(),\n      kitTokensCss,\n      theme: resolveDeploymentCanvasTheme(),\n    })\n    setDoc(d)\n  }, [kitTokensCss])\n\n  // Handle the already-loaded case (srcDoc may load before onLoad attaches).\n  useEffect(() => {\n    if (iframeRef.current?.contentDocument?.readyState === 'complete') wireUp()\n  }, [wireUp])\n\n  // Inline editing (EC-158/EC-159): the dblclick-to-edit state machine, the\n  // live session ref other listeners consult, the rich-text host (mark\n  // toolbar), and the per-node remount epochs (decorate keys).\n  const inline = useCanvasInlineEditing(doc, { presentRef, dispatch, studio })\n  const { editingRef, richEditHost, richEditEpochs } = inline\n\n  // Native selection/hover listeners inside the iframe document.\n  useEffect(() => {\n    if (!doc) return\n    const onClick = (e: Event) => {\n      // Clicks inside the active inline editor are caret moves, not selection.\n      if (editingRef.current?.host.contains(e.target as Node)) return\n      const id = nodeIdAt(e.target)\n      if (id) {\n        e.preventDefault()\n        dispatch({ type: 'select', id })\n      }\n    }\n    const onOver = (e: Event) => dispatch({ type: 'hover', id: nodeIdAt(e.target) })\n    const onLeave = () => dispatch({ type: 'hover', id: null })\n    doc.addEventListener('click', onClick, true)\n    doc.addEventListener('mouseover', onOver)\n    doc.addEventListener('mouseleave', onLeave, true)\n    return () => {\n      doc.removeEventListener('click', onClick, true)\n      doc.removeEventListener('mouseover', onOver)\n      doc.removeEventListener('mouseleave', onLeave, true)\n    }\n  }, [doc, dispatch, editingRef])\n\n  // Drag & drop on the canvas (EC-160/EC-162) — see `canvas-dnd`.\n  useCanvasDnd(doc, { presentRef, dispatch, studio, editingRef })\n\n  // Copy/cut/paste on the canvas (EC-175): the same studio clipboard the page\n  // tree and blocks panel use, wired to the *iframe* document (events never\n  // cross frames). Shortcuts stay inert while an inline editor is live and in\n  // form fields; the iframe's own navigator.clipboard does the async I/O\n  // (Chromium scopes clipboard access to the focused document).\n  const clipboard = useStudioClipboard()\n  useEffect(() => {\n    if (!doc) return\n    return attachClipboardListeners(doc, {\n      clipboard,\n      getSelectedId: () => selectedIdRef.current,\n      isBlocked: () => editingRef.current !== null,\n      asyncClipboard: doc.defaultView?.navigator.clipboard,\n      getSelection: () => doc.getSelection(),\n    })\n  }, [doc, clipboard, editingRef])\n\n  // The render context: the seven delivery-parity resolvers + the editable-\n  // wrapper decorator (selection/hover, locale chips, remount epochs) — see\n  // `canvas-render-context`.\n  const { ctx, pageNodeIds } = useCanvasRenderContext({\n    present: builder.present,\n    selectedId: builder.selectedId,\n    hoveredId: builder.hoveredId,\n    studio,\n    perspective,\n    richEditEpochs,\n  })\n\n  // Tokenized spacing handles (EC-163): a selected Stack/Grid with 2+ children\n  // gets draggable gap handles between them, portaled into the iframe.\n  const spacingTarget =\n    doc && hasSpacingHandles(builder.selectedNode) && pageNodeIds.has(builder.selectedNode.id)\n      ? builder.selectedNode\n      : null\n\n  // EC-250: the preview frame width derives from the config-sourced breakpoints\n  // (Tailwind defaults when unconfigured), the same resolved set the toolbar\n  // switcher offers.\n  const { viewports } = useCanvasViewports()\n\n  return (\n    <div className=\"canvas-grid relative flex min-h-0 flex-1 items-stretch justify-center overflow-auto p-6\">\n      {/* Copy/cut/paste outcomes (EC-175): non-blocking, with issue deep links. */}\n      <ClipboardNoticeOverlay />\n      <div style={{ width: viewportWidth(viewports, builder.viewport), maxWidth: '100%' }} className=\"flex\">\n        <iframe\n          ref={iframeRef}\n          onLoad={wireUp}\n          title={translate('builder.canvas.pagePreview')}\n          className=\"min-h-[480px] w-full rounded-lg border border-border bg-background shadow-md\"\n          srcDoc=\"<!doctype html><html><head></head><body></body></html>\"\n        />\n        {doc\n          ? createPortal(\n              // Render the composition root directly (EC-287: no layout\n              // indirection — a page renders its blocks).\n              renderPageComposition(activeRoot, ctx),\n              doc.body,\n            )\n          : null}\n        {spacingTarget && doc ? (\n          <SpacingHandles key={spacingTarget.id} doc={doc} node={spacingTarget} />\n        ) : null}\n        {/* Floating mark toolbar for the live rich-text session (EC-159). */}\n        {richEditHost && doc ? <RichTextToolbar doc={doc} host={richEditHost} /> : null}\n      </div>\n    </div>\n  )\n}\n"]}
+{"version":3,"file":"canvas.js","sourceRoot":"","sources":["../../../src/components/builder/canvas.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react'\nimport { createPortal } from 'react-dom'\nimport { renderPageComposition } from '@elytracms/core/runtime-renderer'\nimport type { ComponentNode } from '@elytracms/core/project-graph'\nimport { useParams } from '@elytracms/studio/router'\nimport { getStudioRegistry } from '@elytracms/studio/lib/registry'\nimport { translate } from '@elytracms/studio/lib/i18n'\nimport type { CanvasPerspective } from '@elytracms/studio/lib/data'\nimport { getInstantiatedKit } from '@elytracms/studio/lib/starters/kit-session'\nimport { resolveDeploymentCanvasTheme } from '@elytracms/studio/lib/workspace'\nimport { wireCanvasChrome } from './canvas-chrome'\nimport type { CanvasThemeStatus } from './canvas-chrome'\nimport { CanvasThemeNotice } from './canvas-theme-notice'\nimport { getCanvasStylesheetUrl } from './canvas-stylesheet'\nimport { useBuilder } from './builder-store'\nimport { useCanvasViewports, viewportWidth } from './canvas-breakpoints'\nimport { nodeIdAt } from './canvas-dom'\nimport { useCanvasDnd } from './canvas-dnd'\nimport { useCanvasInlineEditing } from './canvas-inline-editing'\nimport { useCanvasRenderContext } from './canvas-render-context'\nimport {\n  ClipboardNoticeOverlay,\n  attachClipboardListeners,\n  useStudioClipboard,\n} from './clipboard-actions'\nimport { RichTextToolbar } from './rich-text-toolbar'\nimport { SpacingHandles, hasSpacingHandles } from './spacing-handles'\n\n\n/**\n * Iframe-isolated page preview (brief §8.2, EC-061, EC-064). The graph renders\n * into a same-origin iframe via a React portal — true style isolation + true\n * responsive widths. Each node is wrapped with an editable marker so clicks\n * select and hover/selection draw outlines. Native listeners bridge the iframe\n * boundary (React's synthetic events don't cross frames); the two big gesture\n * state machines live in their own tested modules (EC-330): drag & drop in\n * `canvas-dnd`, inline text/rich-text editing in `canvas-inline-editing`, and\n * the render-context assembly in `canvas-render-context`.\n */\nexport function BuilderCanvas({\n  perspective = 'draft',\n}: {\n  /** Resolve references against this perspective (EC-300/AD-16). The editable Draft\n   *  view passes `'draft'` (a just-made reusable shows immediately); the read-only\n   *  Published view passes `'published'` (honest preview of what delivery serves). */\n  perspective?: CanvasPerspective\n} = {}) {\n  const builder = useBuilder()\n  const { dispatch } = builder\n  const studio = getStudioRegistry()\n\n  // The edited composition root, composed for preview. EC-287 retired the project\n  // graph and its published-graph preview; the canvas always renders the live,\n  // editable draft (content publishing is per document).\n  const activeRoot: ComponentNode = builder.present\n  const iframeRef = useRef<HTMLIFrameElement>(null)\n  const [doc, setDoc] = useState<Document | null>(null)\n\n  // Graph/selection refs let the native iframe listeners read the *current*\n  // state without re-subscribing on every edit.\n  const presentRef = useRef(builder.present)\n  presentRef.current = builder.present\n  const selectedIdRef = useRef(builder.selectedId)\n  selectedIdRef.current = builder.selectedId\n\n  // When the project was created from a starter kit, its brand token palette drives the canvas UI\n  // (EC-117) — injected after app.css so the kit's overrides win in the cascade.\n  const params = useParams({ strict: false }) as { projectId?: string }\n  const kitTokensCss = params.projectId ? getInstantiatedKit(params.projectId)?.tokensCss : undefined\n\n  // EC-414 AD-D: the settled canvas-theme classification (legacy merged shape /\n  // broken stylesheet) drives the dev-only, never-blocking notice overlay.\n  const [themeStatus, setThemeStatus] = useState<CanvasThemeStatus | null>(null)\n\n  const wireUp = useCallback(() => {\n    const d = iframeRef.current?.contentDocument\n    if (!d || !d.body) return\n    // Deliberately no `.dark` here: this iframe renders the REAL page (plus\n    // studio editing chrome portaled alongside it), and its backdrop must read\n    // as a light, site-like page — never the studio chrome's current theme (a\n    // black canvas is exactly what leaks through when the studio is\n    // dark-themed and the iframe root inherits that class). The injected\n    // canvas stylesheet (new world: the chrome's neutral backdrop; legacy\n    // world: the studio `:root` tokens) supplies that backdrop once `.dark` is\n    // never added here (mirrors the components-preview surface, which wires\n    // through the same chrome). The editing chrome (selection/hover outlines,\n    // drop indicators, the rich-text toolbar, locale-fallback chips) uses\n    // hardcoded colors rather than tokens, so it stays visible against a light\n    // page regardless. The full injection — stylesheet link, editing chrome,\n    // kit tokens, the consumer's `defineStudio({ canvas })` theme (EC-389,\n    // injected LAST so it wins), and the EC-414 world probe — lives in\n    // `wireCanvasChrome`/`applyCanvasChrome`.\n    wireCanvasChrome(d, {\n      stylesheetUrl: getCanvasStylesheetUrl(),\n      kitTokensCss,\n      theme: resolveDeploymentCanvasTheme(),\n      onStatus: (status) =>\n        setThemeStatus((prev) => (prev?.kind === status.kind ? prev : status)),\n    })\n    setDoc(d)\n  }, [kitTokensCss])\n\n  // Handle the already-loaded case (srcDoc may load before onLoad attaches).\n  useEffect(() => {\n    if (iframeRef.current?.contentDocument?.readyState === 'complete') wireUp()\n  }, [wireUp])\n\n  // Inline editing (EC-158/EC-159): the dblclick-to-edit state machine, the\n  // live session ref other listeners consult, the rich-text host (mark\n  // toolbar), and the per-node remount epochs (decorate keys).\n  const inline = useCanvasInlineEditing(doc, { presentRef, dispatch, studio })\n  const { editingRef, richEditHost, richEditEpochs } = inline\n\n  // Native selection/hover listeners inside the iframe document.\n  useEffect(() => {\n    if (!doc) return\n    const onClick = (e: Event) => {\n      // Clicks inside the active inline editor are caret moves, not selection.\n      if (editingRef.current?.host.contains(e.target as Node)) return\n      const id = nodeIdAt(e.target)\n      if (id) {\n        e.preventDefault()\n        dispatch({ type: 'select', id })\n      }\n    }\n    const onOver = (e: Event) => dispatch({ type: 'hover', id: nodeIdAt(e.target) })\n    const onLeave = () => dispatch({ type: 'hover', id: null })\n    doc.addEventListener('click', onClick, true)\n    doc.addEventListener('mouseover', onOver)\n    doc.addEventListener('mouseleave', onLeave, true)\n    return () => {\n      doc.removeEventListener('click', onClick, true)\n      doc.removeEventListener('mouseover', onOver)\n      doc.removeEventListener('mouseleave', onLeave, true)\n    }\n  }, [doc, dispatch, editingRef])\n\n  // Drag & drop on the canvas (EC-160/EC-162) — see `canvas-dnd`.\n  useCanvasDnd(doc, { presentRef, dispatch, studio, editingRef })\n\n  // Copy/cut/paste on the canvas (EC-175): the same studio clipboard the page\n  // tree and blocks panel use, wired to the *iframe* document (events never\n  // cross frames). Shortcuts stay inert while an inline editor is live and in\n  // form fields; the iframe's own navigator.clipboard does the async I/O\n  // (Chromium scopes clipboard access to the focused document).\n  const clipboard = useStudioClipboard()\n  useEffect(() => {\n    if (!doc) return\n    return attachClipboardListeners(doc, {\n      clipboard,\n      getSelectedId: () => selectedIdRef.current,\n      isBlocked: () => editingRef.current !== null,\n      asyncClipboard: doc.defaultView?.navigator.clipboard,\n      getSelection: () => doc.getSelection(),\n    })\n  }, [doc, clipboard, editingRef])\n\n  // The render context: the seven delivery-parity resolvers + the editable-\n  // wrapper decorator (selection/hover, locale chips, remount epochs) — see\n  // `canvas-render-context`.\n  const { ctx, pageNodeIds } = useCanvasRenderContext({\n    present: builder.present,\n    selectedId: builder.selectedId,\n    hoveredId: builder.hoveredId,\n    studio,\n    perspective,\n    richEditEpochs,\n  })\n\n  // Tokenized spacing handles (EC-163): a selected Stack/Grid with 2+ children\n  // gets draggable gap handles between them, portaled into the iframe.\n  const spacingTarget =\n    doc && hasSpacingHandles(builder.selectedNode) && pageNodeIds.has(builder.selectedNode.id)\n      ? builder.selectedNode\n      : null\n\n  // EC-250: the preview frame width derives from the config-sourced breakpoints\n  // (Tailwind defaults when unconfigured), the same resolved set the toolbar\n  // switcher offers.\n  const { viewports } = useCanvasViewports()\n\n  return (\n    <div className=\"canvas-grid relative flex min-h-0 flex-1 items-stretch justify-center overflow-auto p-6\">\n      {/* Copy/cut/paste outcomes (EC-175): non-blocking, with issue deep links. */}\n      <ClipboardNoticeOverlay />\n      {/* Canvas-theme classification notice (EC-414 AD-D): dev-only, never blocks. */}\n      <CanvasThemeNotice status={themeStatus} />\n      <div style={{ width: viewportWidth(viewports, builder.viewport), maxWidth: '100%' }} className=\"flex\">\n        <iframe\n          ref={iframeRef}\n          onLoad={wireUp}\n          title={translate('builder.canvas.pagePreview')}\n          className=\"min-h-[480px] w-full rounded-lg border border-border bg-background shadow-md\"\n          srcDoc=\"<!doctype html><html><head></head><body></body></html>\"\n        />\n        {doc\n          ? createPortal(\n              // Render the composition root directly (EC-287: no layout\n              // indirection — a page renders its blocks).\n              renderPageComposition(activeRoot, ctx),\n              doc.body,\n            )\n          : null}\n        {spacingTarget && doc ? (\n          <SpacingHandles key={spacingTarget.id} doc={doc} node={spacingTarget} />\n        ) : null}\n        {/* Floating mark toolbar for the live rich-text session (EC-159). */}\n        {richEditHost && doc ? <RichTextToolbar doc={doc} host={richEditHost} /> : null}\n      </div>\n    </div>\n  )\n}\n"]}

package/dist/components/builder/rich-text-toolbar.d.ts

@@ -1,3 +1,26 @@
+/** Everything the portal-free toolbar markup needs (chrome contract surface). */
+export interface RichTextToolbarViewProps {
+    left: number;
+    top: number;
+    bold: boolean;
+    italic: boolean;
+    hasLink: boolean;
+    /** Non-null → the link editor row is open with this draft value. */
+    linkDraft: string | null;
+    onToolbarMouseDown: (e: React.MouseEvent<HTMLDivElement>) => void;
+    onBold: () => void;
+    onItalic: () => void;
+    onOpenLink: () => void;
+    onUnlink: () => void;
+    onLinkDraftChange: (value: string) => void;
+    onLinkSubmit: () => void;
+    onLinkCancel: () => void;
+}
+/**
+ * The toolbar's rendered markup, portal-free so the AD-D chrome contract test
+ * can walk it with `renderToStaticMarkup`: every class here MUST be `ec-*`.
+ */
+export declare function RichTextToolbarView(props: RichTextToolbarViewProps): import("react").JSX.Element;
 export declare function RichTextToolbar({ doc, host }: {
     doc: Document;
     host: HTMLElement;

package/dist/components/builder/rich-text-toolbar.js

@@ -23,6 +23,28 @@ function selectionState(doc, host) {
         linkHref: link?.getAttribute('href') ?? null,
     };
 }
+/**
+ * The toolbar's rendered markup, portal-free so the AD-D chrome contract test
+ * can walk it with `renderToStaticMarkup`: every class here MUST be `ec-*`.
+ */
+export function RichTextToolbarView(props) {
+    return (_jsx("div", { "data-ec-rt-toolbar": "", role: "toolbar", "aria-label": translate('builder.richText.toolbarLabel'), className: "ec-chrome ec-rt-toolbar", style: {
+            position: 'fixed',
+            left: Math.max(8, props.left),
+            top: Math.max(8, props.top - TOOLBAR_OFFSET_PX),
+            transform: 'translate(-50%, -100%)',
+            zIndex: 50,
+        }, onMouseDown: props.onToolbarMouseDown, children: props.linkDraft !== null ? (_jsxs("form", { className: "ec-rt-toolbar-row", onSubmit: (e) => {
+                e.preventDefault();
+                props.onLinkSubmit();
+            }, children: [_jsx("input", { autoFocus: true, type: "text", value: props.linkDraft, placeholder: translate('builder.richText.linkPlaceholder'), "aria-label": translate('builder.richText.linkUrl'), onChange: (e) => props.onLinkDraftChange(e.target.value), onKeyDown: (e) => {
+                        if (e.key === 'Escape') {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            props.onLinkCancel();
+                        }
+                    }, className: "ec-rt-toolbar-input" }), _jsx("button", { type: "submit", className: "ec-rt-toolbar-btn", "aria-label": translate('builder.richText.applyLink'), children: translate('builder.richText.set') })] })) : (_jsxs("div", { className: "ec-rt-toolbar-row", children: [_jsx(MarkButton, { label: translate('builder.richText.bold'), active: props.bold, onClick: props.onBold, children: "B" }), _jsx(MarkButton, { label: translate('builder.richText.italic'), active: props.italic, onClick: props.onItalic, children: "I" }), _jsx(MarkButton, { label: translate('builder.richText.link'), active: props.hasLink, onClick: props.onOpenLink, children: translate('builder.richText.link') }), props.hasLink ? (_jsx(MarkButton, { label: translate('builder.richText.removeLink'), active: false, onClick: props.onUnlink, children: translate('builder.richText.unlink') })) : null] })) }));
+}
 export function RichTextToolbar({ doc, host }) {
     const [state, setState] = useState(null);
     const [linkOpen, setLinkOpen] = useState(false);
@@ -78,26 +100,11 @@ export function RichTextToolbar({ doc, host }) {
         return null;
     const left = state?.left ?? savedRangeRef.current?.getBoundingClientRect().left ?? 0;
     const top = state?.top ?? savedRangeRef.current?.getBoundingClientRect().top ?? 0;
-    return createPortal(_jsx("div", { "data-ec-rt-toolbar": "", role: "toolbar", "aria-label": translate('builder.richText.toolbarLabel'), className: "ec-rt-toolbar", style: {
-            position: 'fixed',
-            left: Math.max(8, left),
-            top: Math.max(8, top - TOOLBAR_OFFSET_PX),
-            transform: 'translate(-50%, -100%)',
-            zIndex: 50,
-        }, onMouseDown: (e) => {
+    return createPortal(_jsx(RichTextToolbarView, { left: left, top: top, bold: state?.bold ?? false, italic: state?.italic ?? false, hasLink: state !== null && state.linkHref !== null, linkDraft: linkOpen ? linkDraft : null, onToolbarMouseDown: (e) => {
             // Keep the host's selection/focus — except for the link input.
             if (!e.target.closest('input'))
                 e.preventDefault();
-        }, children: linkOpen ? (_jsxs("form", { className: "ec-rt-toolbar-row", onSubmit: (e) => {
-                e.preventDefault();
-                applyLink(linkDraft);
-            }, children: [_jsx("input", { autoFocus: true, type: "text", value: linkDraft, placeholder: translate('builder.richText.linkPlaceholder'), "aria-label": translate('builder.richText.linkUrl'), onChange: (e) => setLinkDraft(e.target.value), onKeyDown: (e) => {
-                        if (e.key === 'Escape') {
-                            e.preventDefault();
-                            e.stopPropagation();
-                            closeLinkEditor();
-                        }
-                    }, className: "ec-rt-toolbar-input" }), _jsx("button", { type: "submit", className: "ec-rt-toolbar-btn", "aria-label": translate('builder.richText.applyLink'), children: translate('builder.richText.set') })] })) : (_jsxs("div", { className: "ec-rt-toolbar-row", children: [_jsx(MarkButton, { label: translate('builder.richText.bold'), active: state?.bold ?? false, onClick: () => exec('bold'), children: "B" }), _jsx(MarkButton, { label: translate('builder.richText.italic'), active: state?.italic ?? false, onClick: () => exec('italic'), children: "I" }), _jsx(MarkButton, { label: translate('builder.richText.link'), active: state !== null && state.linkHref !== null, onClick: openLinkEditor, children: translate('builder.richText.link') }), state !== null && state.linkHref !== null ? (_jsx(MarkButton, { label: translate('builder.richText.removeLink'), active: false, onClick: () => exec('unlink'), children: translate('builder.richText.unlink') })) : null] })) }), doc.body);
+        }, onBold: () => exec('bold'), onItalic: () => exec('italic'), onOpenLink: openLinkEditor, onUnlink: () => exec('unlink'), onLinkDraftChange: setLinkDraft, onLinkSubmit: () => applyLink(linkDraft), onLinkCancel: closeLinkEditor }), doc.body);
 }
 function MarkButton({ label, active, onClick, children, }) {
     return (_jsx("button", { type: "button", "aria-label": label, "aria-pressed": active, title: label, onClick: onClick, className: "ec-rt-toolbar-btn", "data-active": active || undefined, children: children }));

package/dist/components/builder/rich-text-toolbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"rich-text-toolbar.js","sourceRoot":"","sources":["../../../src/components/builder/rich-text-toolbar.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react'\nimport { createPortal } from 'react-dom'\nimport { translate } from '@elytracms/studio/lib/i18n'\n\n/**\n * Floating mark toolbar for inline rich-text editing (EC-159): anchored to the\n * live text selection inside the canvas iframe, offering bold, italic, and\n * link (set + remove). Portaled into the *iframe* document — selection\n * rectangles are iframe-viewport coordinates, so the toolbar positions\n * `fixed` in that viewport and never needs cross-frame math.\n *\n * Mark application uses the document's native editing commands on the live\n * selection (`bold`/`italic`/`createLink`/`unlink`), which produce exactly the\n * tags the `@elytracms/core/rich-text` DOM parser inverts (`b/strong`, `i/em`,\n * `a[href]`). Pointer-down on the toolbar is swallowed so the host keeps its\n * selection; the link input is the one exception (it needs focus), and the\n * canvas blur handler ignores blurs into `[data-ec-rt-toolbar]`.\n */\n\ninterface ToolbarState {\n  left: number\n  top: number\n  bold: boolean\n  italic: boolean\n  /** The href of the link the selection sits inside, if any. */\n  linkHref: string | null\n}\n\nconst TOOLBAR_OFFSET_PX = 8\n\nfunction selectionState(doc: Document, host: HTMLElement): ToolbarState | null {\n  const selection = doc.getSelection()\n  if (!selection || selection.rangeCount === 0 || selection.isCollapsed) return null\n  if (!host.contains(selection.anchorNode) || !host.contains(selection.focusNode)) return null\n  const rect = selection.getRangeAt(0).getBoundingClientRect()\n  if (rect.width === 0 && rect.height === 0) return null\n  const anchor = selection.anchorNode\n  const anchorElement = anchor instanceof Element ? anchor : anchor?.parentElement\n  const link = anchorElement?.closest('a') ?? null\n  return {\n    left: rect.left + rect.width / 2,\n    top: rect.top,\n    bold: doc.queryCommandState('bold'),\n    italic: doc.queryCommandState('italic'),\n    linkHref: link?.getAttribute('href') ?? null,\n  }\n}\n\nexport function RichTextToolbar({ doc, host }: { doc: Document; host: HTMLElement }) {\n  const [state, setState] = useState<ToolbarState | null>(null)\n  const [linkOpen, setLinkOpen] = useState(false)\n  const [linkDraft, setLinkDraft] = useState('')\n  const savedRangeRef = useRef<Range | null>(null)\n\n  const refresh = useCallback(() => {\n    setState(selectionState(doc, host))\n  }, [doc, host])\n\n  useEffect(() => {\n    refresh()\n    doc.addEventListener('selectionchange', refresh)\n    return () => doc.removeEventListener('selectionchange', refresh)\n  }, [doc, refresh])\n\n  // Close a stale link editor when the selection leaves the host entirely.\n  useEffect(() => {\n    if (!state && !linkOpen) setLinkDraft('')\n  }, [state, linkOpen])\n\n  const exec = useCallback(\n    (command: string, value?: string) => {\n      doc.execCommand(command, false, value)\n      refresh()\n    },\n    [doc, refresh],\n  )\n\n  const openLinkEditor = useCallback(() => {\n    const selection = doc.getSelection()\n    if (selection && selection.rangeCount > 0) {\n      savedRangeRef.current = selection.getRangeAt(0).cloneRange()\n    }\n    setLinkDraft(state?.linkHref ?? '')\n    setLinkOpen(true)\n  }, [doc, state])\n\n  const applyLink = useCallback(\n    (href: string) => {\n      const selection = doc.getSelection()\n      const saved = savedRangeRef.current\n      if (saved && selection) {\n        selection.removeAllRanges()\n        selection.addRange(saved)\n      }\n      const trimmed = href.trim()\n      if (trimmed.length > 0) exec('createLink', trimmed)\n      else exec('unlink')\n      setLinkOpen(false)\n      savedRangeRef.current = null\n      host.focus({ preventScroll: true })\n    },\n    [doc, exec, host],\n  )\n\n  const closeLinkEditor = useCallback(() => {\n    setLinkOpen(false)\n    savedRangeRef.current = null\n    host.focus({ preventScroll: true })\n  }, [host])\n\n  if (!state && !linkOpen) return null\n  const left = state?.left ?? savedRangeRef.current?.getBoundingClientRect().left ?? 0\n  const top = state?.top ?? savedRangeRef.current?.getBoundingClientRect().top ?? 0\n\n  return createPortal(\n    <div\n      data-ec-rt-toolbar=\"\"\n      role=\"toolbar\"\n      aria-label={translate('builder.richText.toolbarLabel')}\n      className=\"ec-rt-toolbar\"\n      style={{\n        position: 'fixed',\n        left: Math.max(8, left),\n        top: Math.max(8, top - TOOLBAR_OFFSET_PX),\n        transform: 'translate(-50%, -100%)',\n        zIndex: 50,\n      }}\n      onMouseDown={(e) => {\n        // Keep the host's selection/focus — except for the link input.\n        if (!(e.target as HTMLElement).closest('input')) e.preventDefault()\n      }}\n    >\n      {linkOpen ? (\n        <form\n          className=\"ec-rt-toolbar-row\"\n          onSubmit={(e) => {\n            e.preventDefault()\n            applyLink(linkDraft)\n          }}\n        >\n          <input\n            autoFocus\n            type=\"text\"\n            value={linkDraft}\n            placeholder={translate('builder.richText.linkPlaceholder')}\n            aria-label={translate('builder.richText.linkUrl')}\n            onChange={(e) => setLinkDraft(e.target.value)}\n            onKeyDown={(e) => {\n              if (e.key === 'Escape') {\n                e.preventDefault()\n                e.stopPropagation()\n                closeLinkEditor()\n              }\n            }}\n            className=\"ec-rt-toolbar-input\"\n          />\n          <button type=\"submit\" className=\"ec-rt-toolbar-btn\" aria-label={translate('builder.richText.applyLink')}>\n            {translate('builder.richText.set')}\n          </button>\n        </form>\n      ) : (\n        <div className=\"ec-rt-toolbar-row\">\n          <MarkButton label={translate('builder.richText.bold')} active={state?.bold ?? false} onClick={() => exec('bold')}>\n            B\n          </MarkButton>\n          <MarkButton label={translate('builder.richText.italic')} active={state?.italic ?? false} onClick={() => exec('italic')}>\n            I\n          </MarkButton>\n          <MarkButton\n            label={translate('builder.richText.link')}\n            active={state !== null && state.linkHref !== null}\n            onClick={openLinkEditor}\n          >\n            {translate('builder.richText.link')}\n          </MarkButton>\n          {state !== null && state.linkHref !== null ? (\n            <MarkButton label={translate('builder.richText.removeLink')} active={false} onClick={() => exec('unlink')}>\n              {translate('builder.richText.unlink')}\n            </MarkButton>\n          ) : null}\n        </div>\n      )}\n    </div>,\n    doc.body,\n  )\n}\n\nfunction MarkButton({\n  label,\n  active,\n  onClick,\n  children,\n}: {\n  label: string\n  active: boolean\n  onClick: () => void\n  children: React.ReactNode\n}) {\n  return (\n    <button\n      type=\"button\"\n      aria-label={label}\n      aria-pressed={active}\n      title={label}\n      onClick={onClick}\n      className=\"ec-rt-toolbar-btn\"\n      data-active={active || undefined}\n    >\n      {children}\n    </button>\n  )\n}\n"]}
+{"version":3,"file":"rich-text-toolbar.js","sourceRoot":"","sources":["../../../src/components/builder/rich-text-toolbar.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react'\nimport { createPortal } from 'react-dom'\nimport { translate } from '@elytracms/studio/lib/i18n'\n\n/**\n * Floating mark toolbar for inline rich-text editing (EC-159): anchored to the\n * live text selection inside the canvas iframe, offering bold, italic, and\n * link (set + remove). Portaled into the *iframe* document — selection\n * rectangles are iframe-viewport coordinates, so the toolbar positions\n * `fixed` in that viewport and never needs cross-frame math.\n *\n * In-frame chrome contract (EC-414 AD-B): the toolbar is styled EXCLUSIVELY by\n * the chrome stylesheet's `ec-rt-*` rules plus inline positioning — no studio\n * utilities, no studio UI primitives — and its root carries the `.ec-chrome`\n * containment recipe. The portal-free {@link RichTextToolbarView} is the\n * contract-testable markup surface.\n *\n * Mark application uses the document's native editing commands on the live\n * selection (`bold`/`italic`/`createLink`/`unlink`), which produce exactly the\n * tags the `@elytracms/core/rich-text` DOM parser inverts (`b/strong`, `i/em`,\n * `a[href]`). Pointer-down on the toolbar is swallowed so the host keeps its\n * selection; the link input is the one exception (it needs focus), and the\n * canvas blur handler ignores blurs into `[data-ec-rt-toolbar]`.\n */\n\ninterface ToolbarState {\n  left: number\n  top: number\n  bold: boolean\n  italic: boolean\n  /** The href of the link the selection sits inside, if any. */\n  linkHref: string | null\n}\n\nconst TOOLBAR_OFFSET_PX = 8\n\nfunction selectionState(doc: Document, host: HTMLElement): ToolbarState | null {\n  const selection = doc.getSelection()\n  if (!selection || selection.rangeCount === 0 || selection.isCollapsed) return null\n  if (!host.contains(selection.anchorNode) || !host.contains(selection.focusNode)) return null\n  const rect = selection.getRangeAt(0).getBoundingClientRect()\n  if (rect.width === 0 && rect.height === 0) return null\n  const anchor = selection.anchorNode\n  const anchorElement = anchor instanceof Element ? anchor : anchor?.parentElement\n  const link = anchorElement?.closest('a') ?? null\n  return {\n    left: rect.left + rect.width / 2,\n    top: rect.top,\n    bold: doc.queryCommandState('bold'),\n    italic: doc.queryCommandState('italic'),\n    linkHref: link?.getAttribute('href') ?? null,\n  }\n}\n\n/** Everything the portal-free toolbar markup needs (chrome contract surface). */\nexport interface RichTextToolbarViewProps {\n  left: number\n  top: number\n  bold: boolean\n  italic: boolean\n  hasLink: boolean\n  /** Non-null → the link editor row is open with this draft value. */\n  linkDraft: string | null\n  onToolbarMouseDown: (e: React.MouseEvent<HTMLDivElement>) => void\n  onBold: () => void\n  onItalic: () => void\n  onOpenLink: () => void\n  onUnlink: () => void\n  onLinkDraftChange: (value: string) => void\n  onLinkSubmit: () => void\n  onLinkCancel: () => void\n}\n\n/**\n * The toolbar's rendered markup, portal-free so the AD-D chrome contract test\n * can walk it with `renderToStaticMarkup`: every class here MUST be `ec-*`.\n */\nexport function RichTextToolbarView(props: RichTextToolbarViewProps) {\n  return (\n    <div\n      data-ec-rt-toolbar=\"\"\n      role=\"toolbar\"\n      aria-label={translate('builder.richText.toolbarLabel')}\n      className=\"ec-chrome ec-rt-toolbar\"\n      style={{\n        position: 'fixed',\n        left: Math.max(8, props.left),\n        top: Math.max(8, props.top - TOOLBAR_OFFSET_PX),\n        transform: 'translate(-50%, -100%)',\n        zIndex: 50,\n      }}\n      onMouseDown={props.onToolbarMouseDown}\n    >\n      {props.linkDraft !== null ? (\n        <form\n          className=\"ec-rt-toolbar-row\"\n          onSubmit={(e) => {\n            e.preventDefault()\n            props.onLinkSubmit()\n          }}\n        >\n          <input\n            autoFocus\n            type=\"text\"\n            value={props.linkDraft}\n            placeholder={translate('builder.richText.linkPlaceholder')}\n            aria-label={translate('builder.richText.linkUrl')}\n            onChange={(e) => props.onLinkDraftChange(e.target.value)}\n            onKeyDown={(e) => {\n              if (e.key === 'Escape') {\n                e.preventDefault()\n                e.stopPropagation()\n                props.onLinkCancel()\n              }\n            }}\n            className=\"ec-rt-toolbar-input\"\n          />\n          <button type=\"submit\" className=\"ec-rt-toolbar-btn\" aria-label={translate('builder.richText.applyLink')}>\n            {translate('builder.richText.set')}\n          </button>\n        </form>\n      ) : (\n        <div className=\"ec-rt-toolbar-row\">\n          <MarkButton label={translate('builder.richText.bold')} active={props.bold} onClick={props.onBold}>\n            B\n          </MarkButton>\n          <MarkButton label={translate('builder.richText.italic')} active={props.italic} onClick={props.onItalic}>\n            I\n          </MarkButton>\n          <MarkButton label={translate('builder.richText.link')} active={props.hasLink} onClick={props.onOpenLink}>\n            {translate('builder.richText.link')}\n          </MarkButton>\n          {props.hasLink ? (\n            <MarkButton label={translate('builder.richText.removeLink')} active={false} onClick={props.onUnlink}>\n              {translate('builder.richText.unlink')}\n            </MarkButton>\n          ) : null}\n        </div>\n      )}\n    </div>\n  )\n}\n\nexport function RichTextToolbar({ doc, host }: { doc: Document; host: HTMLElement }) {\n  const [state, setState] = useState<ToolbarState | null>(null)\n  const [linkOpen, setLinkOpen] = useState(false)\n  const [linkDraft, setLinkDraft] = useState('')\n  const savedRangeRef = useRef<Range | null>(null)\n\n  const refresh = useCallback(() => {\n    setState(selectionState(doc, host))\n  }, [doc, host])\n\n  useEffect(() => {\n    refresh()\n    doc.addEventListener('selectionchange', refresh)\n    return () => doc.removeEventListener('selectionchange', refresh)\n  }, [doc, refresh])\n\n  // Close a stale link editor when the selection leaves the host entirely.\n  useEffect(() => {\n    if (!state && !linkOpen) setLinkDraft('')\n  }, [state, linkOpen])\n\n  const exec = useCallback(\n    (command: string, value?: string) => {\n      doc.execCommand(command, false, value)\n      refresh()\n    },\n    [doc, refresh],\n  )\n\n  const openLinkEditor = useCallback(() => {\n    const selection = doc.getSelection()\n    if (selection && selection.rangeCount > 0) {\n      savedRangeRef.current = selection.getRangeAt(0).cloneRange()\n    }\n    setLinkDraft(state?.linkHref ?? '')\n    setLinkOpen(true)\n  }, [doc, state])\n\n  const applyLink = useCallback(\n    (href: string) => {\n      const selection = doc.getSelection()\n      const saved = savedRangeRef.current\n      if (saved && selection) {\n        selection.removeAllRanges()\n        selection.addRange(saved)\n      }\n      const trimmed = href.trim()\n      if (trimmed.length > 0) exec('createLink', trimmed)\n      else exec('unlink')\n      setLinkOpen(false)\n      savedRangeRef.current = null\n      host.focus({ preventScroll: true })\n    },\n    [doc, exec, host],\n  )\n\n  const closeLinkEditor = useCallback(() => {\n    setLinkOpen(false)\n    savedRangeRef.current = null\n    host.focus({ preventScroll: true })\n  }, [host])\n\n  if (!state && !linkOpen) return null\n  const left = state?.left ?? savedRangeRef.current?.getBoundingClientRect().left ?? 0\n  const top = state?.top ?? savedRangeRef.current?.getBoundingClientRect().top ?? 0\n\n  return createPortal(\n    <RichTextToolbarView\n      left={left}\n      top={top}\n      bold={state?.bold ?? false}\n      italic={state?.italic ?? false}\n      hasLink={state !== null && state.linkHref !== null}\n      linkDraft={linkOpen ? linkDraft : null}\n      onToolbarMouseDown={(e) => {\n        // Keep the host's selection/focus — except for the link input.\n        if (!(e.target as HTMLElement).closest('input')) e.preventDefault()\n      }}\n      onBold={() => exec('bold')}\n      onItalic={() => exec('italic')}\n      onOpenLink={openLinkEditor}\n      onUnlink={() => exec('unlink')}\n      onLinkDraftChange={setLinkDraft}\n      onLinkSubmit={() => applyLink(linkDraft)}\n      onLinkCancel={closeLinkEditor}\n    />,\n    doc.body,\n  )\n}\n\nfunction MarkButton({\n  label,\n  active,\n  onClick,\n  children,\n}: {\n  label: string\n  active: boolean\n  onClick: () => void\n  children: React.ReactNode\n}) {\n  return (\n    <button\n      type=\"button\"\n      aria-label={label}\n      aria-pressed={active}\n      title={label}\n      onClick={onClick}\n      className=\"ec-rt-toolbar-btn\"\n      data-active={active || undefined}\n    >\n      {children}\n    </button>\n  )\n}\n"]}

package/dist/components/builder/spacing-handles.d.ts

@@ -14,8 +14,39 @@ import type { GapStep } from '@elytracms/studio/lib/dnd/gap-drag';
  */
 /** Plain-language label for a gap step — the inspector's vocabulary. */
 export declare function gapStepLabel(step: GapStep): string;
+export interface HandleSpotView {
+    index: number;
+    /** Document-coordinate position of the handle's center. */
+    x: number;
+    y: number;
+    crossStart: number;
+    crossLength: number;
+}
 /** True when the node is a container with at least two children to space. */
 export declare function hasSpacingHandles(node: ComponentNode | null): node is ComponentNode;
+/** Everything the portal-free handle markup needs (chrome contract surface). */
+export interface SpacingHandlesViewProps {
+    spots: HandleSpotView[];
+    horizontal: boolean;
+    /** The live drag, for the active-handle tint and the floating label. */
+    drag: {
+        index: number;
+        labelX: number;
+        labelY: number;
+        label: string;
+    } | null;
+    onPointerDown: (spot: HandleSpotView) => (e: React.PointerEvent<HTMLDivElement>) => void;
+    onPointerMove: (e: React.PointerEvent<HTMLDivElement>) => void;
+    onPointerUp: () => void;
+    onPointerCancel: () => void;
+}
+/**
+ * The spacing handles' rendered markup, portal-free so the AD-D chrome
+ * contract test can walk it with `renderToStaticMarkup`. In-frame chrome
+ * contract (EC-414 AD-B): `ec-*`/`data-ec-*` plus inline styles only; the root
+ * carries the `.ec-chrome` containment recipe.
+ */
+export declare function SpacingHandlesView(props: SpacingHandlesViewProps): import("react").JSX.Element;
 export declare function SpacingHandles({ doc, node }: {
     doc: Document;
     node: ComponentNode;

package/dist/components/builder/spacing-handles.js

@@ -63,6 +63,52 @@ export function hasSpacingHandles(node) {
 const HANDLE_THICKNESS = 14;
 const HANDLE_BAR = 4;
 const HANDLE_MAX_LENGTH = 48;
+/**
+ * The spacing handles' rendered markup, portal-free so the AD-D chrome
+ * contract test can walk it with `renderToStaticMarkup`. In-frame chrome
+ * contract (EC-414 AD-B): `ec-*`/`data-ec-*` plus inline styles only; the root
+ * carries the `.ec-chrome` containment recipe.
+ */
+export function SpacingHandlesView(props) {
+    const { spots, horizontal, drag } = props;
+    return (_jsxs("div", { "data-ec-spacing-handles": "", className: "ec-chrome", children: [spots.map((spot) => {
+                const length = Math.min(spot.crossLength, HANDLE_MAX_LENGTH);
+                const active = drag?.index === spot.index;
+                return (_jsx("div", { "data-ec-gap-handle": spot.index, role: "separator", "aria-label": translate('builder.spacing.gapAfterChild', { index: spot.index + 1 }), "aria-orientation": horizontal ? 'vertical' : 'horizontal', onPointerDown: props.onPointerDown(spot), onPointerMove: props.onPointerMove, onPointerUp: props.onPointerUp, onPointerCancel: props.onPointerCancel, style: {
+                        position: 'absolute',
+                        left: spot.x - (horizontal ? HANDLE_THICKNESS / 2 : length / 2),
+                        top: spot.y - (horizontal ? length / 2 : HANDLE_THICKNESS / 2),
+                        width: horizontal ? HANDLE_THICKNESS : length,
+                        height: horizontal ? length : HANDLE_THICKNESS,
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        cursor: horizontal ? 'col-resize' : 'row-resize',
+                        zIndex: 40,
+                        touchAction: 'none',
+                    }, children: _jsx("div", { style: {
+                            width: horizontal ? HANDLE_BAR : '100%',
+                            height: horizontal ? '100%' : HANDLE_BAR,
+                            borderRadius: 999,
+                            backgroundColor: active ? '#5b8cff' : 'rgba(91, 140, 255, 0.65)',
+                            boxShadow: '0 0 0 1px rgba(8, 12, 24, 0.55)',
+                        } }) }, spot.index));
+            }), drag ? (_jsx("div", { "data-ec-gap-label": "", style: {
+                    position: 'absolute',
+                    left: drag.labelX + 12,
+                    top: drag.labelY + 12,
+                    zIndex: 50,
+                    pointerEvents: 'none',
+                    padding: '2px 8px',
+                    borderRadius: 6,
+                    fontSize: 11,
+                    fontWeight: 600,
+                    whiteSpace: 'nowrap',
+                    color: '#fff',
+                    backgroundColor: '#5b8cff',
+                    boxShadow: '0 2px 8px rgba(8, 12, 24, 0.4)',
+                }, children: drag.label })) : null] }));
+}
 export function SpacingHandles({ doc, node }) {
     const builder = useBuilder();
     const { dispatch } = builder;
@@ -173,42 +219,8 @@ export function SpacingHandles({ doc, node }) {
         applyPreview(step);
     };
     const horizontal = axis === 'horizontal';
-    return createPortal(_jsxs("div", { "data-ec-spacing-handles": "", children: [spots.map((spot) => {
-                const length = Math.min(spot.crossLength, HANDLE_MAX_LENGTH);
-                const active = drag?.index === spot.index;
-                return (_jsx("div", { "data-ec-gap-handle": spot.index, role: "separator", "aria-label": translate('builder.spacing.gapAfterChild', { index: spot.index + 1 }), "aria-orientation": horizontal ? 'vertical' : 'horizontal', onPointerDown: onPointerDown(spot), onPointerMove: onPointerMove, onPointerUp: () => finish('commit'), onPointerCancel: () => finish('cancel'), style: {
-                        position: 'absolute',
-                        left: spot.x - (horizontal ? HANDLE_THICKNESS / 2 : length / 2),
-                        top: spot.y - (horizontal ? length / 2 : HANDLE_THICKNESS / 2),
-                        width: horizontal ? HANDLE_THICKNESS : length,
-                        height: horizontal ? length : HANDLE_THICKNESS,
-                        display: 'flex',
-                        alignItems: 'center',
-                        justifyContent: 'center',
-                        cursor: horizontal ? 'col-resize' : 'row-resize',
-                        zIndex: 40,
-                        touchAction: 'none',
-                    }, children: _jsx("div", { style: {
-                            width: horizontal ? HANDLE_BAR : '100%',
-                            height: horizontal ? '100%' : HANDLE_BAR,
-                            borderRadius: 999,
-                            backgroundColor: active ? '#5b8cff' : 'rgba(91, 140, 255, 0.65)',
-                            boxShadow: '0 0 0 1px rgba(8, 12, 24, 0.55)',
-                        } }) }, spot.index));
-            }), drag ? (_jsx("div", { "data-ec-gap-label": "", style: {
-                    position: 'absolute',
-                    left: drag.labelX + 12,
-                    top: drag.labelY + 12,
-                    zIndex: 50,
-                    pointerEvents: 'none',
-                    padding: '2px 8px',
-                    borderRadius: 6,
-                    fontSize: 11,
-                    fontWeight: 600,
-                    whiteSpace: 'nowrap',
-                    color: '#fff',
-                    backgroundColor: '#5b8cff',
-                    boxShadow: '0 2px 8px rgba(8, 12, 24, 0.4)',
-                }, children: gapStepLabel(drag.step) })) : null] }), doc.body);
+    return createPortal(_jsx(SpacingHandlesView, { spots: spots, horizontal: horizontal, drag: drag
+            ? { index: drag.index, labelX: drag.labelX, labelY: drag.labelY, label: gapStepLabel(drag.step) }
+            : null, onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: () => finish('commit'), onPointerCancel: () => finish('cancel') }), doc.body);
 }
 //# sourceMappingURL=spacing-handles.js.map

package/dist/components/builder/spacing-handles.js.map

@@ -1 +1 @@
-{"version":3,"file":"spacing-handles.js","sourceRoot":"","sources":["../../../src/components/builder/spacing-handles.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react'\nimport { createPortal } from 'react-dom'\nimport { DEFAULT_SLOT, isLayoutContainerNode, staticProp } from '@elytracms/core/project-graph'\nimport type { ComponentNode } from '@elytracms/core/project-graph'\nimport { containerFlowAxis } from '@elytracms/studio/lib/dnd/drop-rules'\nimport type { FlowAxis } from '@elytracms/studio/lib/dnd/drop-rules'\nimport {\n  containerGapStep,\n  gapHandleSpots,\n  gapStepCss,\n  gapStepFromDrag,\n} from '@elytracms/studio/lib/dnd/gap-drag'\nimport type { GapStep } from '@elytracms/studio/lib/dnd/gap-drag'\nimport { translate } from '@elytracms/studio/lib/i18n'\nimport { useBuilder } from './builder-store'\nimport { GAP_LABEL_KEYS, GAP_NONE_LABEL_KEY } from './layout-inspector'\n\n/**\n * Tokenized spacing handles (EC-163, vision §3.1 / AD-10): when a Stack/Grid\n * container is selected on the canvas, draggable gap handles appear between\n * its children, axis-aware via the shared `containerFlowAxis`. Dragging snaps\n * through the EC-161 spacing-token scale (`lib/dnd/gap-drag` — pure math, no\n * pixel value can escape it) with a live plain-language label (the layout\n * inspector's vocabulary). The drag previews imperatively on the rendered\n * element; releasing commits exactly ONE builder dispatch — `setProp` with the\n * token, or `removeProp` for \"no gap\", the identical values the inspector's\n * gap select writes — so one undo restores, and the graph stays the single\n * source of truth. Esc mid-drag cancels: preview reverts, nothing dispatches.\n */\n\n/** Plain-language label for a gap step — the inspector's vocabulary. */\nexport function gapStepLabel(step: GapStep): string {\n  return step === null ? translate(GAP_NONE_LABEL_KEY) : translate(GAP_LABEL_KEYS[step])\n}\n\ninterface HandleSpotView {\n  index: number\n  /** Document-coordinate position of the handle's center. */\n  x: number\n  y: number\n  crossStart: number\n  crossLength: number\n}\n\ninterface ActiveDrag {\n  index: number\n  startStep: GapStep\n  step: GapStep\n  /** Pointer start along the flow axis (client coords). */\n  startCoord: number\n  /** Live pointer position (document coords) for the floating label. */\n  labelX: number\n  labelY: number\n}\n\n/** The container's rendered element (the Stack/Grid div carrying the gap style). */\nfunction containerElementFor(doc: Document, nodeId: string): HTMLElement | null {\n  const wrapper = doc.querySelector(`[data-ec-node-id=\"${nodeId}\"]`)\n  return (wrapper?.querySelector(':scope > [data-ec-primitive]') as HTMLElement | null) ?? null\n}\n\ninterface Measured {\n  spots: HandleSpotView[]\n  /** The axis the children are *rendered* along (drag direction follows it). */\n  axis: FlowAxis\n}\n\n/**\n * Measure the handle spots between the container's rendered children. The\n * graph-level flow axis (`containerFlowAxis`) is tried first; when the\n * rendered layout disagrees — a stacking Grid below the mobile breakpoint\n * lays its \"columns\" out vertically — the cross axis is measured instead, so\n * handles always sit in the gaps the editor actually sees.\n */\nfunction measureSpots(doc: Document, nodeId: string, flowAxis: FlowAxis): Measured {\n  const container = containerElementFor(doc, nodeId)\n  const win = doc.defaultView\n  if (!container || !win) return { spots: [], axis: flowAxis }\n  const children = Array.from(\n    container.querySelectorAll(':scope > [data-ec-node-id]'),\n  ) as HTMLElement[]\n  if (children.length < 2) return { spots: [], axis: flowAxis }\n  const rects = children.map((el) => {\n    const r = el.getBoundingClientRect()\n    return { left: r.left + win.scrollX, top: r.top + win.scrollY, width: r.width, height: r.height }\n  })\n  const along = gapHandleSpots(rects, flowAxis)\n  if (along.length > 0) return { spots: along, axis: flowAxis }\n  const cross: FlowAxis = flowAxis === 'horizontal' ? 'vertical' : 'horizontal'\n  const across = gapHandleSpots(rects, cross)\n  return across.length > 0 ? { spots: across, axis: cross } : { spots: [], axis: flowAxis }\n}\n\n/** True when the node is a container with at least two children to space. */\nexport function hasSpacingHandles(node: ComponentNode | null): node is ComponentNode {\n  return (\n    node !== null &&\n    isLayoutContainerNode(node) &&\n    (node.slots?.[DEFAULT_SLOT]?.length ?? 0) >= 2\n  )\n}\n\nconst HANDLE_THICKNESS = 14\nconst HANDLE_BAR = 4\nconst HANDLE_MAX_LENGTH = 48\n\nexport function SpacingHandles({ doc, node }: { doc: Document; node: ComponentNode }) {\n  const builder = useBuilder()\n  const { dispatch } = builder\n  const flowAxis = containerFlowAxis(node)\n  const [measured, setMeasured] = useState<Measured>({ spots: [], axis: flowAxis })\n  const [drag, setDrag] = useState<ActiveDrag | null>(null)\n  const dragRef = useRef<ActiveDrag | null>(null)\n  // The container's pre-drag inline gap, restored on cancel/commit (the graph\n  // re-render owns the committed value; the preview is imperative-only).\n  const inlineGapRef = useRef<string>('')\n\n  // Re-measure when the graph, selection, drag preview, or iframe size change.\n  useLayoutEffect(() => {\n    const measure = () => setMeasured(measureSpots(doc, node.id, flowAxis))\n    measure()\n    const win = doc.defaultView\n    win?.addEventListener('resize', measure)\n    return () => win?.removeEventListener('resize', measure)\n  }, [doc, node, flowAxis, builder.present, builder.viewport, drag?.step])\n  const { spots, axis } = measured\n\n  const applyPreview = useCallback(\n    (step: GapStep) => {\n      const container = containerElementFor(doc, node.id)\n      if (container) container.style.gap = gapStepCss(step)\n    },\n    [doc, node.id],\n  )\n\n  const finish = useCallback(\n    (mode: 'commit' | 'cancel') => {\n      const active = dragRef.current\n      if (!active) return\n      dragRef.current = null\n      setDrag(null)\n      // Drop the imperative preview; the rendered graph value takes over.\n      const container = containerElementFor(doc, node.id)\n      if (container) container.style.gap = inlineGapRef.current\n      if (mode === 'commit' && active.step !== active.startStep) {\n        // Exactly one dispatch — one operations command, one undo step — and\n        // the identical prop value the inspector's gap select produces.\n        if (active.step === null) {\n          dispatch({ type: 'removeProp', id: node.id, name: 'gap' })\n        } else {\n          dispatch({ type: 'setProp', id: node.id, name: 'gap', value: staticProp(active.step) })\n        }\n      }\n    },\n    [doc, node.id, dispatch],\n  )\n\n  // Esc cancels mid-drag — listen on both documents (focus may sit either side\n  // of the iframe boundary while the pointer is captured).\n  useEffect(() => {\n    if (!drag) return\n    const onKeyDown = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        e.preventDefault()\n        e.stopPropagation()\n        finish('cancel')\n      }\n    }\n    doc.addEventListener('keydown', onKeyDown, true)\n    document.addEventListener('keydown', onKeyDown, true)\n    return () => {\n      doc.removeEventListener('keydown', onKeyDown, true)\n      document.removeEventListener('keydown', onKeyDown, true)\n    }\n  }, [drag, doc, finish])\n\n  // Cleanup on unmount/selection change mid-drag: revert, never dispatch.\n  useEffect(() => () => finish('cancel'), [finish])\n\n  const onPointerDown = (spot: HandleSpotView) => (e: React.PointerEvent<HTMLDivElement>) => {\n    if (e.button !== 0) return\n    e.preventDefault()\n    e.stopPropagation()\n    const startStep = containerGapStep(node)\n    const container = containerElementFor(doc, node.id)\n    inlineGapRef.current = container?.style.gap ?? ''\n    try {\n      e.currentTarget.setPointerCapture(e.pointerId)\n    } catch {\n      // Synthetic pointer events (tests, automation) have no active pointer\n      // to capture; move/up still arrive via the handle's own listeners.\n    }\n    const next: ActiveDrag = {\n      index: spot.index,\n      startStep,\n      step: startStep,\n      startCoord: axis === 'horizontal' ? e.clientX : e.clientY,\n      labelX: spot.x,\n      labelY: spot.y,\n    }\n    dragRef.current = next\n    setDrag(next)\n  }\n\n  const onPointerMove = (e: React.PointerEvent<HTMLDivElement>) => {\n    const active = dragRef.current\n    if (!active) return\n    const win = doc.defaultView\n    const coord = axis === 'horizontal' ? e.clientX : e.clientY\n    const step = gapStepFromDrag(active.startStep, coord - active.startCoord)\n    const next: ActiveDrag = {\n      ...active,\n      step,\n      labelX: e.clientX + (win?.scrollX ?? 0),\n      labelY: e.clientY + (win?.scrollY ?? 0),\n    }\n    dragRef.current = next\n    setDrag(next)\n    applyPreview(step)\n  }\n\n  const horizontal = axis === 'horizontal'\n\n  return createPortal(\n    <div data-ec-spacing-handles=\"\">\n      {spots.map((spot) => {\n        const length = Math.min(spot.crossLength, HANDLE_MAX_LENGTH)\n        const active = drag?.index === spot.index\n        return (\n          <div\n            key={spot.index}\n            data-ec-gap-handle={spot.index}\n            role=\"separator\"\n            aria-label={translate('builder.spacing.gapAfterChild', { index: spot.index + 1 })}\n            aria-orientation={horizontal ? 'vertical' : 'horizontal'}\n            onPointerDown={onPointerDown(spot)}\n            onPointerMove={onPointerMove}\n            onPointerUp={() => finish('commit')}\n            onPointerCancel={() => finish('cancel')}\n            style={{\n              position: 'absolute',\n              left: spot.x - (horizontal ? HANDLE_THICKNESS / 2 : length / 2),\n              top: spot.y - (horizontal ? length / 2 : HANDLE_THICKNESS / 2),\n              width: horizontal ? HANDLE_THICKNESS : length,\n              height: horizontal ? length : HANDLE_THICKNESS,\n              display: 'flex',\n              alignItems: 'center',\n              justifyContent: 'center',\n              cursor: horizontal ? 'col-resize' : 'row-resize',\n              zIndex: 40,\n              touchAction: 'none',\n            }}\n          >\n            <div\n              style={{\n                width: horizontal ? HANDLE_BAR : '100%',\n                height: horizontal ? '100%' : HANDLE_BAR,\n                borderRadius: 999,\n                backgroundColor: active ? '#5b8cff' : 'rgba(91, 140, 255, 0.65)',\n                boxShadow: '0 0 0 1px rgba(8, 12, 24, 0.55)',\n              }}\n            />\n          </div>\n        )\n      })}\n      {drag ? (\n        <div\n          data-ec-gap-label=\"\"\n          style={{\n            position: 'absolute',\n            left: drag.labelX + 12,\n            top: drag.labelY + 12,\n            zIndex: 50,\n            pointerEvents: 'none',\n            padding: '2px 8px',\n            borderRadius: 6,\n            fontSize: 11,\n            fontWeight: 600,\n            whiteSpace: 'nowrap',\n            color: '#fff',\n            backgroundColor: '#5b8cff',\n            boxShadow: '0 2px 8px rgba(8, 12, 24, 0.4)',\n          }}\n        >\n          {gapStepLabel(drag.step)}\n        </div>\n      ) : null}\n    </div>,\n    doc.body,\n  )\n}\n"]}
+{"version":3,"file":"spacing-handles.js","sourceRoot":"","sources":["../../../src/components/builder/spacing-handles.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACjF,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AACxC,OAAO,EAAE,YAAY,EAAE,qBAAqB,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAA;AAE/F,OAAO,EAAE,iBAAiB,EAAE,MAAM,sCAAsC,CAAA;AAExE,OAAO,EACL,gBAAgB,EAChB,cAAc,EACd,UAAU,EACV,eAAe,GAChB,MAAM,oCAAoC,CAAA;AAE3C,OAAO,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAA;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAC5C,OAAO,EAAE,cAAc,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAA;AAEvE;;;;;;;;;;;GAWG;AAEH,wEAAwE;AACxE,MAAM,UAAU,YAAY,CAAC,IAAa;IACxC,OAAO,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC,CAAA;AACxF,CAAC;AAsBD,oFAAoF;AACpF,SAAS,mBAAmB,CAAC,GAAa,EAAE,MAAc;IACxD,MAAM,OAAO,GAAG,GAAG,CAAC,aAAa,CAAC,qBAAqB,MAAM,IAAI,CAAC,CAAA;IAClE,OAAQ,OAAO,EAAE,aAAa,CAAC,8BAA8B,CAAwB,IAAI,IAAI,CAAA;AAC/F,CAAC;AAQD;;;;;;GAMG;AACH,SAAS,YAAY,CAAC,GAAa,EAAE,MAAc,EAAE,QAAkB;IACrE,MAAM,SAAS,GAAG,mBAAmB,CAAC,GAAG,EAAE,MAAM,CAAC,CAAA;IAClD,MAAM,GAAG,GAAG,GAAG,CAAC,WAAW,CAAA;IAC3B,IAAI,CAAC,SAAS,IAAI,CAAC,GAAG;QAAE,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAA;IAC5D,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CACzB,SAAS,CAAC,gBAAgB,CAAC,4BAA4B,CAAC,CACxC,CAAA;IAClB,IAAI,QAAQ,CAAC,MAAM,GAAG,CAAC;QAAE,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAA;IAC7D,MAAM,KAAK,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE;QAChC,MAAM,CAAC,GAAG,EAAE,CAAC,qBAAqB,EAAE,CAAA;QACpC,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,GAAG,GAAG,CAAC,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,GAAG,GAAG,GAAG,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC,CAAC,KAAK,EAAE,MAAM,EAAE,CAAC,CAAC,MAAM,EAAE,CAAA;IACnG,CAAC,CAAC,CAAA;IACF,MAAM,KAAK,GAAG,cAAc,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAA;IAC7C,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC;QAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAA;IAC7D,MAAM,KAAK,GAAa,QAAQ,KAAK,YAAY,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,YAAY,CAAA;IAC7E,MAAM,MAAM,GAAG,cAAc,CAAC,KAAK,EAAE,KAAK,CAAC,CAAA;IAC3C,OAAO,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAA;AAC3F,CAAC;AAED,6EAA6E;AAC7E,MAAM,UAAU,iBAAiB,CAAC,IAA0B;IAC1D,OAAO,CACL,IAAI,KAAK,IAAI;QACb,qBAAqB,CAAC,IAAI,CAAC;QAC3B,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC,CAAC,IAAI,CAAC,CAC/C,CAAA;AACH,CAAC;AAED,MAAM,gBAAgB,GAAG,EAAE,CAAA;AAC3B,MAAM,UAAU,GAAG,CAAC,CAAA;AACpB,MAAM,iBAAiB,GAAG,EAAE,CAAA;AAc5B;;;;;GAKG;AACH,MAAM,UAAU,kBAAkB,CAAC,KAA8B;IAC/D,MAAM,EAAE,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,KAAK,CAAA;IACzC,OAAO,CACL,0CAA6B,EAAE,EAAC,SAAS,EAAC,WAAW,aAClD,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;gBAClB,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,WAAW,EAAE,iBAAiB,CAAC,CAAA;gBAC5D,MAAM,MAAM,GAAG,IAAI,EAAE,KAAK,KAAK,IAAI,CAAC,KAAK,CAAA;gBACzC,OAAO,CACL,oCAEsB,IAAI,CAAC,KAAK,EAC9B,IAAI,EAAC,WAAW,gBACJ,SAAS,CAAC,+BAA+B,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,GAAG,CAAC,EAAE,CAAC,sBAC/D,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,YAAY,EACxD,aAAa,EAAE,KAAK,CAAC,aAAa,CAAC,IAAI,CAAC,EACxC,aAAa,EAAE,KAAK,CAAC,aAAa,EAClC,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,eAAe,EAAE,KAAK,CAAC,eAAe,EACtC,KAAK,EAAE;wBACL,QAAQ,EAAE,UAAU;wBACpB,IAAI,EAAE,IAAI,CAAC,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC,CAAC,gBAAgB,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC;wBAC/D,GAAG,EAAE,IAAI,CAAC,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,gBAAgB,GAAG,CAAC,CAAC;wBAC9D,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,MAAM;wBAC7C,MAAM,EAAE,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,gBAAgB;wBAC9C,OAAO,EAAE,MAAM;wBACf,UAAU,EAAE,QAAQ;wBACpB,cAAc,EAAE,QAAQ;wBACxB,MAAM,EAAE,UAAU,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,YAAY;wBAChD,MAAM,EAAE,EAAE;wBACV,WAAW,EAAE,MAAM;qBACpB,YAED,cACE,KAAK,EAAE;4BACL,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM;4BACvC,MAAM,EAAE,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,UAAU;4BACxC,YAAY,EAAE,GAAG;4BACjB,eAAe,EAAE,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,0BAA0B;4BAChE,SAAS,EAAE,iCAAiC;yBAC7C,GACD,IA/BG,IAAI,CAAC,KAAK,CAgCX,CACP,CAAA;YACH,CAAC,CAAC,EACD,IAAI,CAAC,CAAC,CAAC,CACN,mCACoB,EAAE,EACpB,KAAK,EAAE;oBACL,QAAQ,EAAE,UAAU;oBACpB,IAAI,EAAE,IAAI,CAAC,MAAM,GAAG,EAAE;oBACtB,GAAG,EAAE,IAAI,CAAC,MAAM,GAAG,EAAE;oBACrB,MAAM,EAAE,EAAE;oBACV,aAAa,EAAE,MAAM;oBACrB,OAAO,EAAE,SAAS;oBAClB,YAAY,EAAE,CAAC;oBACf,QAAQ,EAAE,EAAE;oBACZ,UAAU,EAAE,GAAG;oBACf,UAAU,EAAE,QAAQ;oBACpB,KAAK,EAAE,MAAM;oBACb,eAAe,EAAE,SAAS;oBAC1B,SAAS,EAAE,gCAAgC;iBAC5C,YAEA,IAAI,CAAC,KAAK,GACP,CACP,CAAC,CAAC,CAAC,IAAI,IACJ,CACP,CAAA;AACH,CAAC;AAED,MAAM,UAAU,cAAc,CAAC,EAAE,GAAG,EAAE,IAAI,EAA0C;IAClF,MAAM,OAAO,GAAG,UAAU,EAAE,CAAA;IAC5B,MAAM,EAAE,QAAQ,EAAE,GAAG,OAAO,CAAA;IAC5B,MAAM,QAAQ,GAAG,iBAAiB,CAAC,IAAI,CAAC,CAAA;IACxC,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAW,EAAE,KAAK,EAAE,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,CAAA;IACjF,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAoB,IAAI,CAAC,CAAA;IACzD,MAAM,OAAO,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAA;IAC/C,4EAA4E;IAC5E,uEAAuE;IACvE,MAAM,YAAY,GAAG,MAAM,CAAS,EAAE,CAAC,CAAA;IAEvC,6EAA6E;IAC7E,eAAe,CAAC,GAAG,EAAE;QACnB,MAAM,OAAO,GAAG,GAAG,EAAE,CAAC,WAAW,CAAC,YAAY,CAAC,GAAG,EAAE,IAAI,CAAC,EAAE,EAAE,QAAQ,CAAC,CAAC,CAAA;QACvE,OAAO,EAAE,CAAA;QACT,MAAM,GAAG,GAAG,GAAG,CAAC,WAAW,CAAA;QAC3B,GAAG,EAAE,gBAAgB,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAA;QACxC,OAAO,GAAG,EAAE,CAAC,GAAG,EAAE,mBAAmB,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAA;IAC1D,CAAC,EAAE,CAAC,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,CAAC,OAAO,EAAE,OAAO,CAAC,QAAQ,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC,CAAA;IACxE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,QAAQ,CAAA;IAEhC,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,IAAa,EAAE,EAAE;QAChB,MAAM,SAAS,GAAG,mBAAmB,CAAC,GAAG,EAAE,IAAI,CAAC,EAAE,CAAC,CAAA;QACnD,IAAI,SAAS;YAAE,SAAS,CAAC,KAAK,CAAC,GAAG,GAAG,UAAU,CAAC,IAAI,CAAC,CAAA;IACvD,CAAC,EACD,CAAC,GAAG,EAAE,IAAI,CAAC,EAAE,CAAC,CACf,CAAA;IAED,MAAM,MAAM,GAAG,WAAW,CACxB,CAAC,IAAyB,EAAE,EAAE;QAC5B,MAAM,MAAM,GAAG,OAAO,CAAC,OAAO,CAAA;QAC9B,IAAI,CAAC,MAAM;YAAE,OAAM;QACnB,OAAO,CAAC,OAAO,GAAG,IAAI,CAAA;QACtB,OAAO,CAAC,IAAI,CAAC,CAAA;QACb,oEAAoE;QACpE,MAAM,SAAS,GAAG,mBAAmB,CAAC,GAAG,EAAE,IAAI,CAAC,EAAE,CAAC,CAAA;QACnD,IAAI,SAAS;YAAE,SAAS,CAAC,KAAK,CAAC,GAAG,GAAG,YAAY,CAAC,OAAO,CAAA;QACzD,IAAI,IAAI,KAAK,QAAQ,IAAI,MAAM,CAAC,IAAI,KAAK,MAAM,CAAC,SAAS,EAAE,CAAC;YAC1D,qEAAqE;YACrE,gEAAgE;YAChE,IAAI,MAAM,CAAC,IAAI,KAAK,IAAI,EAAE,CAAC;gBACzB,QAAQ,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,CAAA;YAC5D,CAAC;iBAAM,CAAC;gBACN,QAAQ,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,UAAU,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;YACzF,CAAC;QACH,CAAC;IACH,CAAC,EACD,CAAC,GAAG,EAAE,IAAI,CAAC,EAAE,EAAE,QAAQ,CAAC,CACzB,CAAA;IAED,6EAA6E;IAC7E,yDAAyD;IACzD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,IAAI;YAAE,OAAM;QACjB,MAAM,SAAS,GAAG,CAAC,CAAgB,EAAE,EAAE;YACrC,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,EAAE,CAAC;gBACvB,CAAC,CAAC,cAAc,EAAE,CAAA;gBAClB,CAAC,CAAC,eAAe,EAAE,CAAA;gBACnB,MAAM,CAAC,QAAQ,CAAC,CAAA;YAClB,CAAC;QACH,CAAC,CAAA;QACD,GAAG,CAAC,gBAAgB,CAAC,SAAS,EAAE,SAAS,EAAE,IAAI,CAAC,CAAA;QAChD,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,SAAS,EAAE,IAAI,CAAC,CAAA;QACrD,OAAO,GAAG,EAAE;YACV,GAAG,CAAC,mBAAmB,CAAC,SAAS,EAAE,SAAS,EAAE,IAAI,CAAC,CAAA;YACnD,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,SAAS,EAAE,IAAI,CAAC,CAAA;QAC1D,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,EAAE,MAAM,CAAC,CAAC,CAAA;IAEvB,wEAAwE;IACxE,SAAS,CAAC,GAAG,EAAE,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAA;IAEjD,MAAM,aAAa,GAAG,CAAC,IAAoB,EAAE,EAAE,CAAC,CAAC,CAAqC,EAAE,EAAE;QACxF,IAAI,CAAC,CAAC,MAAM,KAAK,CAAC;YAAE,OAAM;QAC1B,CAAC,CAAC,cAAc,EAAE,CAAA;QAClB,CAAC,CAAC,eAAe,EAAE,CAAA;QACnB,MAAM,SAAS,GAAG,gBAAgB,CAAC,IAAI,CAAC,CAAA;QACxC,MAAM,SAAS,GAAG,mBAAmB,CAAC,GAAG,EAAE,IAAI,CAAC,EAAE,CAAC,CAAA;QACnD,YAAY,CAAC,OAAO,GAAG,SAAS,EAAE,KAAK,CAAC,GAAG,IAAI,EAAE,CAAA;QACjD,IAAI,CAAC;YACH,CAAC,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAA;QAChD,CAAC;QAAC,MAAM,CAAC;YACP,sEAAsE;YACtE,mEAAmE;QACrE,CAAC;QACD,MAAM,IAAI,GAAe;YACvB,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,SAAS;YACT,IAAI,EAAE,SAAS;YACf,UAAU,EAAE,IAAI,KAAK,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO;YACzD,MAAM,EAAE,IAAI,CAAC,CAAC;YACd,MAAM,EAAE,IAAI,CAAC,CAAC;SACf,CAAA;QACD,OAAO,CAAC,OAAO,GAAG,IAAI,CAAA;QACtB,OAAO,CAAC,IAAI,CAAC,CAAA;IACf,CAAC,CAAA;IAED,MAAM,aAAa,GAAG,CAAC,CAAqC,EAAE,EAAE;QAC9D,MAAM,MAAM,GAAG,OAAO,CAAC,OAAO,CAAA;QAC9B,IAAI,CAAC,MAAM;YAAE,OAAM;QACnB,MAAM,GAAG,GAAG,GAAG,CAAC,WAAW,CAAA;QAC3B,MAAM,KAAK,GAAG,IAAI,KAAK,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAA;QAC3D,MAAM,IAAI,GAAG,eAAe,CAAC,MAAM,CAAC,SAAS,EAAE,KAAK,GAAG,MAAM,CAAC,UAAU,CAAC,CAAA;QACzE,MAAM,IAAI,GAAe;YACvB,GAAG,MAAM;YACT,IAAI;YACJ,MAAM,EAAE,CAAC,CAAC,OAAO,GAAG,CAAC,GAAG,EAAE,OAAO,IAAI,CAAC,CAAC;YACvC,MAAM,EAAE,CAAC,CAAC,OAAO,GAAG,CAAC,GAAG,EAAE,OAAO,IAAI,CAAC,CAAC;SACxC,CAAA;QACD,OAAO,CAAC,OAAO,GAAG,IAAI,CAAA;QACtB,OAAO,CAAC,IAAI,CAAC,CAAA;QACb,YAAY,CAAC,IAAI,CAAC,CAAA;IACpB,CAAC,CAAA;IAED,MAAM,UAAU,GAAG,IAAI,KAAK,YAAY,CAAA;IAExC,OAAO,YAAY,CACjB,KAAC,kBAAkB,IACjB,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,UAAU,EACtB,IAAI,EACF,IAAI;YACF,CAAC,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE;YACjG,CAAC,CAAC,IAAI,EAEV,aAAa,EAAE,aAAa,EAC5B,aAAa,EAAE,aAAa,EAC5B,WAAW,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,EACnC,eAAe,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,GACvC,EACF,GAAG,CAAC,IAAI,CACT,CAAA;AACH,CAAC","sourcesContent":["import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react'\nimport { createPortal } from 'react-dom'\nimport { DEFAULT_SLOT, isLayoutContainerNode, staticProp } from '@elytracms/core/project-graph'\nimport type { ComponentNode } from '@elytracms/core/project-graph'\nimport { containerFlowAxis } from '@elytracms/studio/lib/dnd/drop-rules'\nimport type { FlowAxis } from '@elytracms/studio/lib/dnd/drop-rules'\nimport {\n  containerGapStep,\n  gapHandleSpots,\n  gapStepCss,\n  gapStepFromDrag,\n} from '@elytracms/studio/lib/dnd/gap-drag'\nimport type { GapStep } from '@elytracms/studio/lib/dnd/gap-drag'\nimport { translate } from '@elytracms/studio/lib/i18n'\nimport { useBuilder } from './builder-store'\nimport { GAP_LABEL_KEYS, GAP_NONE_LABEL_KEY } from './layout-inspector'\n\n/**\n * Tokenized spacing handles (EC-163, vision §3.1 / AD-10): when a Stack/Grid\n * container is selected on the canvas, draggable gap handles appear between\n * its children, axis-aware via the shared `containerFlowAxis`. Dragging snaps\n * through the EC-161 spacing-token scale (`lib/dnd/gap-drag` — pure math, no\n * pixel value can escape it) with a live plain-language label (the layout\n * inspector's vocabulary). The drag previews imperatively on the rendered\n * element; releasing commits exactly ONE builder dispatch — `setProp` with the\n * token, or `removeProp` for \"no gap\", the identical values the inspector's\n * gap select writes — so one undo restores, and the graph stays the single\n * source of truth. Esc mid-drag cancels: preview reverts, nothing dispatches.\n */\n\n/** Plain-language label for a gap step — the inspector's vocabulary. */\nexport function gapStepLabel(step: GapStep): string {\n  return step === null ? translate(GAP_NONE_LABEL_KEY) : translate(GAP_LABEL_KEYS[step])\n}\n\nexport interface HandleSpotView {\n  index: number\n  /** Document-coordinate position of the handle's center. */\n  x: number\n  y: number\n  crossStart: number\n  crossLength: number\n}\n\ninterface ActiveDrag {\n  index: number\n  startStep: GapStep\n  step: GapStep\n  /** Pointer start along the flow axis (client coords). */\n  startCoord: number\n  /** Live pointer position (document coords) for the floating label. */\n  labelX: number\n  labelY: number\n}\n\n/** The container's rendered element (the Stack/Grid div carrying the gap style). */\nfunction containerElementFor(doc: Document, nodeId: string): HTMLElement | null {\n  const wrapper = doc.querySelector(`[data-ec-node-id=\"${nodeId}\"]`)\n  return (wrapper?.querySelector(':scope > [data-ec-primitive]') as HTMLElement | null) ?? null\n}\n\ninterface Measured {\n  spots: HandleSpotView[]\n  /** The axis the children are *rendered* along (drag direction follows it). */\n  axis: FlowAxis\n}\n\n/**\n * Measure the handle spots between the container's rendered children. The\n * graph-level flow axis (`containerFlowAxis`) is tried first; when the\n * rendered layout disagrees — a stacking Grid below the mobile breakpoint\n * lays its \"columns\" out vertically — the cross axis is measured instead, so\n * handles always sit in the gaps the editor actually sees.\n */\nfunction measureSpots(doc: Document, nodeId: string, flowAxis: FlowAxis): Measured {\n  const container = containerElementFor(doc, nodeId)\n  const win = doc.defaultView\n  if (!container || !win) return { spots: [], axis: flowAxis }\n  const children = Array.from(\n    container.querySelectorAll(':scope > [data-ec-node-id]'),\n  ) as HTMLElement[]\n  if (children.length < 2) return { spots: [], axis: flowAxis }\n  const rects = children.map((el) => {\n    const r = el.getBoundingClientRect()\n    return { left: r.left + win.scrollX, top: r.top + win.scrollY, width: r.width, height: r.height }\n  })\n  const along = gapHandleSpots(rects, flowAxis)\n  if (along.length > 0) return { spots: along, axis: flowAxis }\n  const cross: FlowAxis = flowAxis === 'horizontal' ? 'vertical' : 'horizontal'\n  const across = gapHandleSpots(rects, cross)\n  return across.length > 0 ? { spots: across, axis: cross } : { spots: [], axis: flowAxis }\n}\n\n/** True when the node is a container with at least two children to space. */\nexport function hasSpacingHandles(node: ComponentNode | null): node is ComponentNode {\n  return (\n    node !== null &&\n    isLayoutContainerNode(node) &&\n    (node.slots?.[DEFAULT_SLOT]?.length ?? 0) >= 2\n  )\n}\n\nconst HANDLE_THICKNESS = 14\nconst HANDLE_BAR = 4\nconst HANDLE_MAX_LENGTH = 48\n\n/** Everything the portal-free handle markup needs (chrome contract surface). */\nexport interface SpacingHandlesViewProps {\n  spots: HandleSpotView[]\n  horizontal: boolean\n  /** The live drag, for the active-handle tint and the floating label. */\n  drag: { index: number; labelX: number; labelY: number; label: string } | null\n  onPointerDown: (spot: HandleSpotView) => (e: React.PointerEvent<HTMLDivElement>) => void\n  onPointerMove: (e: React.PointerEvent<HTMLDivElement>) => void\n  onPointerUp: () => void\n  onPointerCancel: () => void\n}\n\n/**\n * The spacing handles' rendered markup, portal-free so the AD-D chrome\n * contract test can walk it with `renderToStaticMarkup`. In-frame chrome\n * contract (EC-414 AD-B): `ec-*`/`data-ec-*` plus inline styles only; the root\n * carries the `.ec-chrome` containment recipe.\n */\nexport function SpacingHandlesView(props: SpacingHandlesViewProps) {\n  const { spots, horizontal, drag } = props\n  return (\n    <div data-ec-spacing-handles=\"\" className=\"ec-chrome\">\n      {spots.map((spot) => {\n        const length = Math.min(spot.crossLength, HANDLE_MAX_LENGTH)\n        const active = drag?.index === spot.index\n        return (\n          <div\n            key={spot.index}\n            data-ec-gap-handle={spot.index}\n            role=\"separator\"\n            aria-label={translate('builder.spacing.gapAfterChild', { index: spot.index + 1 })}\n            aria-orientation={horizontal ? 'vertical' : 'horizontal'}\n            onPointerDown={props.onPointerDown(spot)}\n            onPointerMove={props.onPointerMove}\n            onPointerUp={props.onPointerUp}\n            onPointerCancel={props.onPointerCancel}\n            style={{\n              position: 'absolute',\n              left: spot.x - (horizontal ? HANDLE_THICKNESS / 2 : length / 2),\n              top: spot.y - (horizontal ? length / 2 : HANDLE_THICKNESS / 2),\n              width: horizontal ? HANDLE_THICKNESS : length,\n              height: horizontal ? length : HANDLE_THICKNESS,\n              display: 'flex',\n              alignItems: 'center',\n              justifyContent: 'center',\n              cursor: horizontal ? 'col-resize' : 'row-resize',\n              zIndex: 40,\n              touchAction: 'none',\n            }}\n          >\n            <div\n              style={{\n                width: horizontal ? HANDLE_BAR : '100%',\n                height: horizontal ? '100%' : HANDLE_BAR,\n                borderRadius: 999,\n                backgroundColor: active ? '#5b8cff' : 'rgba(91, 140, 255, 0.65)',\n                boxShadow: '0 0 0 1px rgba(8, 12, 24, 0.55)',\n              }}\n            />\n          </div>\n        )\n      })}\n      {drag ? (\n        <div\n          data-ec-gap-label=\"\"\n          style={{\n            position: 'absolute',\n            left: drag.labelX + 12,\n            top: drag.labelY + 12,\n            zIndex: 50,\n            pointerEvents: 'none',\n            padding: '2px 8px',\n            borderRadius: 6,\n            fontSize: 11,\n            fontWeight: 600,\n            whiteSpace: 'nowrap',\n            color: '#fff',\n            backgroundColor: '#5b8cff',\n            boxShadow: '0 2px 8px rgba(8, 12, 24, 0.4)',\n          }}\n        >\n          {drag.label}\n        </div>\n      ) : null}\n    </div>\n  )\n}\n\nexport function SpacingHandles({ doc, node }: { doc: Document; node: ComponentNode }) {\n  const builder = useBuilder()\n  const { dispatch } = builder\n  const flowAxis = containerFlowAxis(node)\n  const [measured, setMeasured] = useState<Measured>({ spots: [], axis: flowAxis })\n  const [drag, setDrag] = useState<ActiveDrag | null>(null)\n  const dragRef = useRef<ActiveDrag | null>(null)\n  // The container's pre-drag inline gap, restored on cancel/commit (the graph\n  // re-render owns the committed value; the preview is imperative-only).\n  const inlineGapRef = useRef<string>('')\n\n  // Re-measure when the graph, selection, drag preview, or iframe size change.\n  useLayoutEffect(() => {\n    const measure = () => setMeasured(measureSpots(doc, node.id, flowAxis))\n    measure()\n    const win = doc.defaultView\n    win?.addEventListener('resize', measure)\n    return () => win?.removeEventListener('resize', measure)\n  }, [doc, node, flowAxis, builder.present, builder.viewport, drag?.step])\n  const { spots, axis } = measured\n\n  const applyPreview = useCallback(\n    (step: GapStep) => {\n      const container = containerElementFor(doc, node.id)\n      if (container) container.style.gap = gapStepCss(step)\n    },\n    [doc, node.id],\n  )\n\n  const finish = useCallback(\n    (mode: 'commit' | 'cancel') => {\n      const active = dragRef.current\n      if (!active) return\n      dragRef.current = null\n      setDrag(null)\n      // Drop the imperative preview; the rendered graph value takes over.\n      const container = containerElementFor(doc, node.id)\n      if (container) container.style.gap = inlineGapRef.current\n      if (mode === 'commit' && active.step !== active.startStep) {\n        // Exactly one dispatch — one operations command, one undo step — and\n        // the identical prop value the inspector's gap select produces.\n        if (active.step === null) {\n          dispatch({ type: 'removeProp', id: node.id, name: 'gap' })\n        } else {\n          dispatch({ type: 'setProp', id: node.id, name: 'gap', value: staticProp(active.step) })\n        }\n      }\n    },\n    [doc, node.id, dispatch],\n  )\n\n  // Esc cancels mid-drag — listen on both documents (focus may sit either side\n  // of the iframe boundary while the pointer is captured).\n  useEffect(() => {\n    if (!drag) return\n    const onKeyDown = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        e.preventDefault()\n        e.stopPropagation()\n        finish('cancel')\n      }\n    }\n    doc.addEventListener('keydown', onKeyDown, true)\n    document.addEventListener('keydown', onKeyDown, true)\n    return () => {\n      doc.removeEventListener('keydown', onKeyDown, true)\n      document.removeEventListener('keydown', onKeyDown, true)\n    }\n  }, [drag, doc, finish])\n\n  // Cleanup on unmount/selection change mid-drag: revert, never dispatch.\n  useEffect(() => () => finish('cancel'), [finish])\n\n  const onPointerDown = (spot: HandleSpotView) => (e: React.PointerEvent<HTMLDivElement>) => {\n    if (e.button !== 0) return\n    e.preventDefault()\n    e.stopPropagation()\n    const startStep = containerGapStep(node)\n    const container = containerElementFor(doc, node.id)\n    inlineGapRef.current = container?.style.gap ?? ''\n    try {\n      e.currentTarget.setPointerCapture(e.pointerId)\n    } catch {\n      // Synthetic pointer events (tests, automation) have no active pointer\n      // to capture; move/up still arrive via the handle's own listeners.\n    }\n    const next: ActiveDrag = {\n      index: spot.index,\n      startStep,\n      step: startStep,\n      startCoord: axis === 'horizontal' ? e.clientX : e.clientY,\n      labelX: spot.x,\n      labelY: spot.y,\n    }\n    dragRef.current = next\n    setDrag(next)\n  }\n\n  const onPointerMove = (e: React.PointerEvent<HTMLDivElement>) => {\n    const active = dragRef.current\n    if (!active) return\n    const win = doc.defaultView\n    const coord = axis === 'horizontal' ? e.clientX : e.clientY\n    const step = gapStepFromDrag(active.startStep, coord - active.startCoord)\n    const next: ActiveDrag = {\n      ...active,\n      step,\n      labelX: e.clientX + (win?.scrollX ?? 0),\n      labelY: e.clientY + (win?.scrollY ?? 0),\n    }\n    dragRef.current = next\n    setDrag(next)\n    applyPreview(step)\n  }\n\n  const horizontal = axis === 'horizontal'\n\n  return createPortal(\n    <SpacingHandlesView\n      spots={spots}\n      horizontal={horizontal}\n      drag={\n        drag\n          ? { index: drag.index, labelX: drag.labelX, labelY: drag.labelY, label: gapStepLabel(drag.step) }\n          : null\n      }\n      onPointerDown={onPointerDown}\n      onPointerMove={onPointerMove}\n      onPointerUp={() => finish('commit')}\n      onPointerCancel={() => finish('cancel')}\n    />,\n    doc.body,\n  )\n}\n"]}

package/dist/components/components/component-preview.d.ts

@@ -69,7 +69,8 @@ export declare class PreviewErrorBoundary extends Component<{
  * The EC-191 fallback panel — component name + "preview unavailable" + the error.
  * Rendered INTO the preview iframe (which carries only the project stylesheet, and
  * may carry none in tests), so it uses inline styles rather than studio UI classes
- * — matching the canvas's own in-iframe placeholder convention.
+ * — the EC-414 AD-B chrome contract, with the `.ec-chrome` containment recipe on
+ * its root (walked by the chrome contract test).
  */
 export declare function PreviewUnavailable({ displayName, error }: {
     displayName: string;