@elytracms/studio 0.0.62 → 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":"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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 { 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/fixture-thumbnail.d.ts

@@ -1,5 +1,20 @@
 import type { ComponentNode } from '@elytracms/core/project-graph';
 import type { StudioRegistry } from '@elytracms/studio/lib/registry';
+/**
+ * Curated preview-image tile (EC-409): renders `manifest.previewImage` in the
+ * SAME 16/10 tile frame as {@link ScaledFixtureThumbnail}, object-fit cover.
+ * The escape hatch for components whose live render needs data/context the
+ * tile can't have — fixtures stay the primary curation lever. `alt` is the
+ * component title (already-localized manifest data); the image is never a
+ * fetch the engine performs, just an `<img>` with the consumer's URL string.
+ */
+export declare function PreviewImageThumbnail({ src, alt, className, }: {
+    /** The manifest's `previewImage` URL string, passed through verbatim. */
+    src: string;
+    /** The component title (localized manifest data — no new catalog string). */
+    alt: string;
+    className?: string;
+}): import("react").JSX.Element;
 export declare function ScaledFixtureThumbnail({ node, studio, designWidth, eager, className, }: {
     /** The preview subtree to render live (deterministic ids). */
     node: ComponentNode;

package/dist/components/builder/fixture-thumbnail.js

@@ -41,6 +41,20 @@ class ThumbnailErrorBoundary extends Component {
         return this.props.children;
     }
 }
+/**
+ * Curated preview-image tile (EC-409): renders `manifest.previewImage` in the
+ * SAME 16/10 tile frame as {@link ScaledFixtureThumbnail}, object-fit cover.
+ * The escape hatch for components whose live render needs data/context the
+ * tile can't have — fixtures stay the primary curation lever. `alt` is the
+ * component title (already-localized manifest data); the image is never a
+ * fetch the engine performs, just an `<img>` with the consumer's URL string.
+ */
+export function PreviewImageThumbnail({ src, alt, className, }) {
+    return (_jsx("div", { "data-block-thumbnail": true, "data-block-thumbnail-image": true, className: cn('relative w-full overflow-hidden rounded-md border border-border bg-background', className), style: { aspectRatio: '16 / 10' }, children: _jsx("img", { src: src, alt: alt, 
+            // The surrounding tile is the drag source; a natively draggable <img>
+            // would hijack the tile drag.
+            draggable: false, className: "pointer-events-none h-full w-full select-none object-cover" }) }));
+}
 export function ScaledFixtureThumbnail({ node, studio, designWidth = DESIGN_WIDTH, eager = false, className, }) {
     const registry = studio ?? getStudioRegistry();
     const ref = useRef(null);

package/dist/components/builder/fixture-thumbnail.js.map

@@ -1 +1 @@
-{"version":3,"file":"fixture-thumbnail.js","sourceRoot":"","sources":["../../../src/components/builder/fixture-thumbnail.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, useEffect, useMemo, useRef, useState } from 'react'\nimport type { ReactNode } from 'react'\nimport { AlertTriangle } from 'lucide-react'\nimport { renderNode } from '@elytracms/core/runtime-renderer'\nimport type { ComponentNode } from '@elytracms/core/project-graph'\nimport { getStudioRegistry, previewContext } from '@elytracms/studio/lib/registry'\nimport type { StudioRegistry } from '@elytracms/studio/lib/registry'\nimport { cn } from '@elytracms/studio/lib/utils'\nimport { translate } from '@elytracms/studio/lib/i18n'\n\n/**\n * Live, scaled fixture thumbnail (EC-164). Renders a preview node through the\n * runtime renderer — the exact render path the canvas, fixture runner, and\n * export use — inside a fixed-aspect tile, scaled down with a CSS transform.\n * Never a screenshot, never interactive (pointer events are disabled), and\n * never a crash: render errors degrade to a visible fallback inside the tile.\n *\n * Off-screen thumbnails mount lazily via IntersectionObserver so a large\n * registry doesn't render its whole library up front; pass `eager` to render\n * immediately (first-fold tiles, non-DOM tests).\n */\n\n/** Width the preview is laid out at before being scaled into the tile. */\nconst DESIGN_WIDTH = 420\n/** Fallback scale used for the single frame before the tile is measured. */\nconst FALLBACK_SCALE = 0.45\n\nfunction LiveRender({ node, studio }: { node: ComponentNode; studio: StudioRegistry }) {\n  const ctx = useMemo(() => previewContext(studio), [studio])\n  // Called inside a component render so the boundary catches sync throws too.\n  return <>{renderNode(node, ctx)}</>\n}\n\nfunction ThumbnailFallback({ message }: { message: string }) {\n  return (\n    <div\n      data-block-thumbnail-fallback\n      className=\"flex h-full w-full items-start gap-1.5 p-2 text-[0.7rem] leading-snug text-amber-700 dark:text-amber-400\"\n    >\n      <AlertTriangle aria-hidden className=\"mt-px size-3 shrink-0\" />\n      <span className=\"line-clamp-3\">{message}</span>\n    </div>\n  )\n}\n\ninterface BoundaryState {\n  error: Error | null\n}\n\n/** Tile-local error boundary: one broken fixture never takes down the panel. */\nclass ThumbnailErrorBoundary extends Component<{ children: ReactNode }, BoundaryState> {\n  override state: BoundaryState = { error: null }\n\n  static getDerivedStateFromError(error: Error): BoundaryState {\n    return { error }\n  }\n\n  override render(): ReactNode {\n    if (this.state.error) {\n      return (\n        <ThumbnailFallback\n          message={translate('builder.blocksPanel.previewFailed', { error: this.state.error.message })}\n        />\n      )\n    }\n    return this.props.children\n  }\n}\n\nexport function ScaledFixtureThumbnail({\n  node,\n  studio,\n  designWidth = DESIGN_WIDTH,\n  eager = false,\n  className,\n}: {\n  /** The preview subtree to render live (deterministic ids). */\n  node: ComponentNode\n  /**\n   * Registry the preview renders against. Defaults to the active project's live\n   * registry (`getStudioRegistry()`) — the blocks panel's tiles and their\n   * thumbnails share one registry. Pass an explicit registry to render against a\n   * specific component set (deterministic previews/tests).\n   */\n  studio?: StudioRegistry\n  /** Layout width of the unscaled preview, in CSS pixels. */\n  designWidth?: number\n  /** Mount the live render immediately instead of waiting for visibility. */\n  eager?: boolean\n  className?: string\n}) {\n  const registry = studio ?? getStudioRegistry()\n  const ref = useRef<HTMLDivElement>(null)\n  const [inView, setInView] = useState(eager)\n  const [scale, setScale] = useState<number | null>(null)\n\n  // Lazy mount: render the live preview only once the tile scrolls into view.\n  // IntersectionObserver always delivers an initial report (intersecting or\n  // not) within a rendering frame — when no report arrives at all the page\n  // isn't producing frames (occluded/headless automation windows), so a\n  // safety-net timer mounts the preview rather than leaving tiles blank.\n  // Frame-producing browsers report long before the timer and keep laziness.\n  useEffect(() => {\n    if (inView) return\n    const el = ref.current\n    if (!el || typeof IntersectionObserver === 'undefined') {\n      setInView(true)\n      return\n    }\n    let reported = false\n    const observer = new IntersectionObserver((entries) => {\n      reported = true\n      if (entries.some((entry) => entry.isIntersecting)) setInView(true)\n    })\n    observer.observe(el)\n    const fallback = setTimeout(() => {\n      if (!reported) setInView(true)\n    }, 400)\n    return () => {\n      observer.disconnect()\n      clearTimeout(fallback)\n    }\n  }, [inView])\n\n  // Fit-to-tile scale, kept in sync with the tile's measured width.\n  useEffect(() => {\n    const el = ref.current\n    if (!el) return\n    const update = () => {\n      const width = el.clientWidth\n      if (width > 0) setScale(width / designWidth)\n    }\n    update()\n    if (typeof ResizeObserver === 'undefined') return\n    const observer = new ResizeObserver(update)\n    observer.observe(el)\n    return () => observer.disconnect()\n  }, [designWidth])\n\n  return (\n    <div\n      ref={ref}\n      aria-hidden\n      data-block-thumbnail\n      className={cn(\n        'relative w-full overflow-hidden rounded-md border border-border bg-background',\n        className,\n      )}\n      style={{ aspectRatio: '16 / 10' }}\n    >\n      {inView ? (\n        <ThumbnailErrorBoundary>\n          <div\n            className=\"pointer-events-none absolute left-0 top-0 origin-top-left select-none p-3\"\n            style={{ width: designWidth, transform: `scale(${scale ?? FALLBACK_SCALE})` }}\n          >\n            <LiveRender node={node} studio={registry} />\n          </div>\n        </ThumbnailErrorBoundary>\n      ) : null}\n    </div>\n  )\n}\n"]}
+{"version":3,"file":"fixture-thumbnail.js","sourceRoot":"","sources":["../../../src/components/builder/fixture-thumbnail.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, useEffect, useMemo, useRef, useState } from 'react'\nimport type { ReactNode } from 'react'\nimport { AlertTriangle } from 'lucide-react'\nimport { renderNode } from '@elytracms/core/runtime-renderer'\nimport type { ComponentNode } from '@elytracms/core/project-graph'\nimport { getStudioRegistry, previewContext } from '@elytracms/studio/lib/registry'\nimport type { StudioRegistry } from '@elytracms/studio/lib/registry'\nimport { cn } from '@elytracms/studio/lib/utils'\nimport { translate } from '@elytracms/studio/lib/i18n'\n\n/**\n * Live, scaled fixture thumbnail (EC-164). Renders a preview node through the\n * runtime renderer — the exact render path the canvas, fixture runner, and\n * export use — inside a fixed-aspect tile, scaled down with a CSS transform.\n * Never a screenshot, never interactive (pointer events are disabled), and\n * never a crash: render errors degrade to a visible fallback inside the tile.\n *\n * Off-screen thumbnails mount lazily via IntersectionObserver so a large\n * registry doesn't render its whole library up front; pass `eager` to render\n * immediately (first-fold tiles, non-DOM tests).\n */\n\n/** Width the preview is laid out at before being scaled into the tile. */\nconst DESIGN_WIDTH = 420\n/** Fallback scale used for the single frame before the tile is measured. */\nconst FALLBACK_SCALE = 0.45\n\nfunction LiveRender({ node, studio }: { node: ComponentNode; studio: StudioRegistry }) {\n  const ctx = useMemo(() => previewContext(studio), [studio])\n  // Called inside a component render so the boundary catches sync throws too.\n  return <>{renderNode(node, ctx)}</>\n}\n\nfunction ThumbnailFallback({ message }: { message: string }) {\n  return (\n    <div\n      data-block-thumbnail-fallback\n      className=\"flex h-full w-full items-start gap-1.5 p-2 text-[0.7rem] leading-snug text-amber-700 dark:text-amber-400\"\n    >\n      <AlertTriangle aria-hidden className=\"mt-px size-3 shrink-0\" />\n      <span className=\"line-clamp-3\">{message}</span>\n    </div>\n  )\n}\n\ninterface BoundaryState {\n  error: Error | null\n}\n\n/** Tile-local error boundary: one broken fixture never takes down the panel. */\nclass ThumbnailErrorBoundary extends Component<{ children: ReactNode }, BoundaryState> {\n  override state: BoundaryState = { error: null }\n\n  static getDerivedStateFromError(error: Error): BoundaryState {\n    return { error }\n  }\n\n  override render(): ReactNode {\n    if (this.state.error) {\n      return (\n        <ThumbnailFallback\n          message={translate('builder.blocksPanel.previewFailed', { error: this.state.error.message })}\n        />\n      )\n    }\n    return this.props.children\n  }\n}\n\n/**\n * Curated preview-image tile (EC-409): renders `manifest.previewImage` in the\n * SAME 16/10 tile frame as {@link ScaledFixtureThumbnail}, object-fit cover.\n * The escape hatch for components whose live render needs data/context the\n * tile can't have — fixtures stay the primary curation lever. `alt` is the\n * component title (already-localized manifest data); the image is never a\n * fetch the engine performs, just an `<img>` with the consumer's URL string.\n */\nexport function PreviewImageThumbnail({\n  src,\n  alt,\n  className,\n}: {\n  /** The manifest's `previewImage` URL string, passed through verbatim. */\n  src: string\n  /** The component title (localized manifest data — no new catalog string). */\n  alt: string\n  className?: string\n}) {\n  return (\n    <div\n      data-block-thumbnail\n      data-block-thumbnail-image\n      className={cn(\n        'relative w-full overflow-hidden rounded-md border border-border bg-background',\n        className,\n      )}\n      style={{ aspectRatio: '16 / 10' }}\n    >\n      {/* Deliberately NOT loading=\"lazy\": native lazy images need rendering\n          frames to trigger (occluded/headless windows never load them — the\n          same hazard the live thumbnail's safety-net timer covers), and a\n          curated preview is a small asset on a handful of tiles. */}\n      <img\n        src={src}\n        alt={alt}\n        // The surrounding tile is the drag source; a natively draggable <img>\n        // would hijack the tile drag.\n        draggable={false}\n        className=\"pointer-events-none h-full w-full select-none object-cover\"\n      />\n    </div>\n  )\n}\n\nexport function ScaledFixtureThumbnail({\n  node,\n  studio,\n  designWidth = DESIGN_WIDTH,\n  eager = false,\n  className,\n}: {\n  /** The preview subtree to render live (deterministic ids). */\n  node: ComponentNode\n  /**\n   * Registry the preview renders against. Defaults to the active project's live\n   * registry (`getStudioRegistry()`) — the blocks panel's tiles and their\n   * thumbnails share one registry. Pass an explicit registry to render against a\n   * specific component set (deterministic previews/tests).\n   */\n  studio?: StudioRegistry\n  /** Layout width of the unscaled preview, in CSS pixels. */\n  designWidth?: number\n  /** Mount the live render immediately instead of waiting for visibility. */\n  eager?: boolean\n  className?: string\n}) {\n  const registry = studio ?? getStudioRegistry()\n  const ref = useRef<HTMLDivElement>(null)\n  const [inView, setInView] = useState(eager)\n  const [scale, setScale] = useState<number | null>(null)\n\n  // Lazy mount: render the live preview only once the tile scrolls into view.\n  // IntersectionObserver always delivers an initial report (intersecting or\n  // not) within a rendering frame — when no report arrives at all the page\n  // isn't producing frames (occluded/headless automation windows), so a\n  // safety-net timer mounts the preview rather than leaving tiles blank.\n  // Frame-producing browsers report long before the timer and keep laziness.\n  useEffect(() => {\n    if (inView) return\n    const el = ref.current\n    if (!el || typeof IntersectionObserver === 'undefined') {\n      setInView(true)\n      return\n    }\n    let reported = false\n    const observer = new IntersectionObserver((entries) => {\n      reported = true\n      if (entries.some((entry) => entry.isIntersecting)) setInView(true)\n    })\n    observer.observe(el)\n    const fallback = setTimeout(() => {\n      if (!reported) setInView(true)\n    }, 400)\n    return () => {\n      observer.disconnect()\n      clearTimeout(fallback)\n    }\n  }, [inView])\n\n  // Fit-to-tile scale, kept in sync with the tile's measured width.\n  useEffect(() => {\n    const el = ref.current\n    if (!el) return\n    const update = () => {\n      const width = el.clientWidth\n      if (width > 0) setScale(width / designWidth)\n    }\n    update()\n    if (typeof ResizeObserver === 'undefined') return\n    const observer = new ResizeObserver(update)\n    observer.observe(el)\n    return () => observer.disconnect()\n  }, [designWidth])\n\n  return (\n    <div\n      ref={ref}\n      aria-hidden\n      data-block-thumbnail\n      className={cn(\n        'relative w-full overflow-hidden rounded-md border border-border bg-background',\n        className,\n      )}\n      style={{ aspectRatio: '16 / 10' }}\n    >\n      {inView ? (\n        <ThumbnailErrorBoundary>\n          <div\n            className=\"pointer-events-none absolute left-0 top-0 origin-top-left select-none p-3\"\n            style={{ width: designWidth, transform: `scale(${scale ?? FALLBACK_SCALE})` }}\n          >\n            <LiveRender node={node} studio={registry} />\n          </div>\n        </ThumbnailErrorBoundary>\n      ) : null}\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