@elytracms/studio 0.0.59 → 0.0.61

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 { PRESERVE_NODE_ATTR } from '@elytracms/core/rich-text'\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 { 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/** Selection/hover outlines, scoped to the per-node editable wrappers. */\nconst OUTLINE_CSS = `\n  /* The canvas backdrop is deliberately always light/site-like (see the\n     wireUp note below) — force the native form-control/scrollbar theme to\n     match, so a page with real inputs never shows dark native chrome floating\n     on a light page. */\n  html { color-scheme: light; }\n  body { margin: 0; padding: 16px; }\n  .ec-editable { outline-offset: -1px; cursor: default; }\n  .ec-editable[data-hovered]:not([data-selected]) { outline: 1px dashed rgba(130,150,190,0.75); }\n  .ec-editable[data-selected] { outline: 2px solid #5b8cff; }\n  /* Inline editing (EC-158 text, EC-159 rich text): the rendered element\n     itself becomes the editor — no overlay, no replacement input — so\n     typography, alignment, and layout are pixel-identical between edit and\n     render states. The wrapper keeps the selection outline; the host only\n     gets a caret. pre-wrap applies to PLAIN text hosts only — rich-text\n     markup must keep its rendered whitespace handling (no layout shift). */\n  .ec-editable[data-ec-editing] { outline: 2px solid #5b8cff; }\n  .ec-editable [data-ec-edit] { outline: none; cursor: text; }\n  .ec-editable [data-ec-edit='text'] { white-space: pre-wrap; }\n  /* Preserved atoms during a rich-text session (custom blocks, unknown nodes,\n     images, embeds): visible and rendered, but not text-editable. */\n  .ec-editable [data-ec-edit='rich'] [${PRESERVE_NODE_ATTR}] { user-select: none; }\n  /* Floating mark toolbar (EC-159), portaled into the iframe. */\n  .ec-rt-toolbar { color-scheme: dark; }\n  .ec-rt-toolbar-row { display: flex; align-items: center; gap: 2px; padding: 3px;\n    border: 1px solid rgba(130,150,190,0.4); border-radius: 8px;\n    background: rgb(24,26,32); box-shadow: 0 4px 16px rgba(0,0,0,0.4); }\n  .ec-rt-toolbar-btn { min-width: 26px; height: 24px; padding: 0 7px; border: 0; border-radius: 5px;\n    background: transparent; color: rgb(225,228,236); font: 600 12px/1 ui-sans-serif, system-ui, sans-serif;\n    cursor: pointer; }\n  .ec-rt-toolbar-btn:hover { background: rgba(130,150,190,0.25); }\n  .ec-rt-toolbar-btn[data-active] { background: #5b8cff; color: white; }\n  .ec-rt-toolbar-input { width: 200px; height: 24px; padding: 0 7px; border-radius: 5px;\n    border: 1px solid rgba(130,150,190,0.4); background: rgb(16,18,22); color: rgb(225,228,236);\n    font: 12px/1 ui-sans-serif, system-ui, sans-serif; outline: none; }\n  /* Locale-fallback chips (EC-176): a node whose bound content is currently\n     served via locale fallback wears a small corner chip naming the locale it\n     actually came from — the canvas never silently mixes locales. */\n  .ec-editable[data-ec-locale-fallback] { position: relative; }\n  .ec-editable[data-ec-locale-fallback]::after {\n    content: attr(data-ec-locale-fallback);\n    position: absolute; top: 2px; right: 2px; z-index: 5; pointer-events: none;\n    padding: 0 4px; border-radius: 4px;\n    font: 600 9px/1.5 ui-sans-serif, system-ui, sans-serif;\n    letter-spacing: 0.05em; text-transform: uppercase;\n    color: #fbbf24; background: rgba(180,83,9,0.25); border: 1px solid rgba(245,158,11,0.45);\n  }\n  /* Drag & drop states (EC-160/EC-162): eligibility comes from the shared pure\n     rules (lib/dnd/drop-rules); these classes only *show* the resolution.\n     Rejection is explicit and visible during the drag — never a silent failed\n     drop. Before/after bars follow the parent's flow axis (data-ec-drop-axis);\n     left/right are the wrap-into-columns gesture (violet, paired highlight). */\n  .ec-editable[data-ec-drop='into'] { outline: 2px solid #34d399; outline-offset: -2px; background-color: rgba(52, 211, 153, 0.08); }\n  .ec-editable[data-ec-drop='before'] { box-shadow: 0 -3px 0 0 #38bdf8; }\n  .ec-editable[data-ec-drop='after'] { box-shadow: 0 3px 0 0 #38bdf8; }\n  .ec-editable[data-ec-drop='before'][data-ec-drop-axis='x'] { box-shadow: -3px 0 0 0 #38bdf8; }\n  .ec-editable[data-ec-drop='after'][data-ec-drop-axis='x'] { box-shadow: 3px 0 0 0 #38bdf8; }\n  .ec-editable[data-ec-drop='left'] { box-shadow: -3px 0 0 0 #a78bfa; background-color: rgba(167, 139, 250, 0.1); }\n  .ec-editable[data-ec-drop='right'] { box-shadow: 3px 0 0 0 #a78bfa; background-color: rgba(167, 139, 250, 0.1); }\n  .ec-editable[data-ec-drop='blocked'] { outline: 2px solid #ef4444; outline-offset: -2px; background-color: rgba(239, 68, 68, 0.08); cursor: not-allowed; }\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 below (selection/hover\n    // outlines, drop indicators, the rich-text toolbar, locale-fallback chips)\n    // uses hardcoded colors rather than these tokens, so it stays visible\n    // against a light page regardless.\n    const appCss = getCanvasStylesheetUrl()\n    if (appCss && !d.getElementById('ec-app-css')) {\n      const link = d.createElement('link')\n      link.id = 'ec-app-css'\n      link.rel = 'stylesheet'\n      link.href = appCss\n      d.head.appendChild(link)\n    }\n    if (!d.getElementById('ec-outline-css')) {\n      const style = d.createElement('style')\n      style.id = 'ec-outline-css'\n      style.textContent = OUTLINE_CSS\n      d.head.appendChild(style)\n    }\n    if (kitTokensCss) {\n      const existing = d.getElementById('ec-kit-tokens')\n      if (existing) existing.remove()\n      const style = d.createElement('style')\n      style.id = 'ec-kit-tokens'\n      style.textContent = kitTokensCss\n      d.head.appendChild(style)\n    }\n    d.body.className = 'bg-background text-foreground font-sans'\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 { 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"]}

package/dist/components/cms/prop-fields.d.ts

@@ -21,6 +21,21 @@ import type { PropField } from '@elytracms/core/component-registry';
  */
 export type ControlKind = 'text' | 'textarea' | 'number' | 'boolean' | 'select' | 'json' | 'color' | 'richtext' | 'asset' | 'object' | 'relation';
 export declare function controlKind(spec: PropField): ControlKind;
+/**
+ * EC-387: route a rich-text editor emission to the prop value callbacks.
+ *
+ * The shared {@link RichTextEditor} emits either an emptied-editor `undefined`, the
+ * exact stored envelope (an untouched/reverted edit), or a fresh `{ version, doc }`
+ * value — never a plain string. An `undefined` clears the prop (reverting to the
+ * manifest default, matching the asset/relation/object controls); anything else is a
+ * structured `JsonValue` envelope set verbatim. Extracted pure so the wiring — the
+ * exact bug the retired textarea stub had (it wrote a bare string over the envelope) —
+ * is regression-pinned without driving TipTap.
+ */
+export declare function applyRichTextPropChange(next: unknown, handlers: {
+    onSet: (value: JsonValue) => void;
+    onClear: () => void;
+}): void;
 export interface PropValueControlProps {
     /** DOM id for the control's primary input (label `htmlFor` target). */
     id: string;

package/dist/components/cms/prop-fields.js

@@ -6,6 +6,7 @@ import { Input, Row, Select, Stack, Text } from '@elytracms/studio/ui';
 import { localizedLabel, translate } from '@elytracms/studio/lib/i18n';
 import { FieldControl } from './field-control.js';
 import { FieldDensityProvider } from './field-density.js';
+import { RichTextEditor } from './rich-text/index.js';
 import { useOptionalCollectionView } from '../collection-view/collection-view-context.js';
 export function controlKind(spec) {
     switch (spec.type) {
@@ -42,6 +43,23 @@ export function controlKind(spec) {
             return 'text';
     }
 }
+/**
+ * EC-387: route a rich-text editor emission to the prop value callbacks.
+ *
+ * The shared {@link RichTextEditor} emits either an emptied-editor `undefined`, the
+ * exact stored envelope (an untouched/reverted edit), or a fresh `{ version, doc }`
+ * value — never a plain string. An `undefined` clears the prop (reverting to the
+ * manifest default, matching the asset/relation/object controls); anything else is a
+ * structured `JsonValue` envelope set verbatim. Extracted pure so the wiring — the
+ * exact bug the retired textarea stub had (it wrote a bare string over the envelope) —
+ * is regression-pinned without driving TipTap.
+ */
+export function applyRichTextPropChange(next, handlers) {
+    if (next === undefined)
+        handlers.onClear();
+    else
+        handlers.onSet(next);
+}
 /**
  * Render + edit a single manifest prop value. Store-agnostic: emits through
  * `onSet`/`onClear`. Shows a validation issue when the current value fails the
@@ -82,7 +100,26 @@ export function PropValueControl({ id, name, spec, value, onSet, onClear }) {
     else if (kind === 'color') {
         control = (_jsxs(Row, { gap: "2", children: [_jsx("input", { id: id, type: "color", value: typeof current === 'string' && /^#[0-9a-f]{6}$/i.test(current) ? current : '#000000', onChange: (e) => onSet(e.target.value), className: "h-8 w-10 shrink-0 rounded-md border border-input bg-background" }), _jsx(Input, { value: typeof current === 'string' ? current : '', onChange: (e) => onSet(e.target.value) })] }));
     }
-    else if (kind === 'textarea' || kind === 'richtext') {
+    else if (kind === 'richtext') {
+        // EC-387: a richText PROP now uses the SAME real editor as the collection-field
+        // path (`field-control.tsx` `case 'richText'`) — one editing surface, one
+        // `{ version, doc }` value contract, never a second implementation. The retired
+        // textarea stub read `typeof current === 'string'`, so a stored envelope showed
+        // EMPTY and any edit clobbered the structured document with a bare string
+        // (silent data destruction). The editor reads the envelope (or a legacy string,
+        // or empty), always emits an envelope, and routes an emptied editor's `undefined`
+        // to a prop clear via {@link applyRichTextPropChange}.
+        //
+        // Like the asset/relation/object controls below, the editor needs the ambient
+        // workspace — its asset-image picker reads the REQUIRED collection-view context.
+        // The block property inspector (the EC-387 target) is inside the detail editor's
+        // `CollectionViewProvider`, so it gets the full editor; the component-registry
+        // preview surface (no provider, nothing to edit against) degrades to the same
+        // read-only value display the sibling controls use, instead of crashing with
+        // "useCollectionView must be used within a <CollectionViewProvider>".
+        control = hasWorkspaceContext ? (_jsx(RichTextEditor, { id: id, value: current, onChange: (next) => applyRichTextPropChange(next, { onSet, onClear }), allow: spec.type === 'richText' ? spec.allow : undefined })) : (_jsx(WorkspaceValueFallback, { value: current }));
+    }
+    else if (kind === 'textarea') {
         control = (_jsx("textarea", { id: id, rows: 2, value: typeof current === 'string' ? current : '', onChange: (e) => onSet(e.target.value), className: "flex w-full rounded-md border border-input bg-background px-2.5 py-1.5 text-sm text-foreground shadow-sm focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/40 outline-none" }));
     }
     else if (kind === 'asset' || kind === 'object' || kind === 'relation') {

package/dist/components/cms/prop-fields.js.map

@@ -1 +1 @@
-{"version":3,"file":"prop-fields.js","sourceRoot":"","sources":["../../../src/components/cms/prop-fields.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useState } from 'react'\nimport { isStaticProp } from '@elytracms/core/project-graph'\nimport type { JsonValue, PropValue } from '@elytracms/core/project-graph'\nimport type { PropField } from '@elytracms/core/component-registry'\nimport { fieldValueValidator } from '@elytracms/core/cms-core'\nimport type { FieldDef, SelectOption } from '@elytracms/core/cms-core'\nimport { Input, Row, Select, Stack, Text } from '@elytracms/studio/ui'\nimport { localizedLabel, translate } from '@elytracms/studio/lib/i18n'\nimport { FieldControl } from './field-control'\nimport { FieldDensityProvider } from './field-density'\nimport { useOptionalCollectionView } from '../collection-view/collection-view-context'\n\n/**\n * The EC-190 \"props-as-fields\" value control — the single renderer for a\n * manifest-declared prop field, shared by the canvas property inspector\n * (`builder/property-inspector.tsx`) and the rich-text component-embed prop editor\n * (`rich-text/embed-props.tsx`). Extracted here so both surfaces render prop fields\n * through *one* control set (asset → library picker, relation → document picker,\n * object → nested form, …) rather than two parallel form systems.\n *\n * It is deliberately store-agnostic: it reads a prop's current value and reports\n * edits through `onSet(rawValue)` / `onClear()`. The caller owns *where* the value\n * lands — the inspector dispatches a builder command; the embed editor rewrites a\n * ProseMirror node attr — and is responsible for wrapping the raw value in a\n * `staticProp` envelope.\n */\n\n/**\n * The inspector control to render for a prop field-def. The `control.kind`\n * vocabulary derives from the field `type` plus the optional `form.control`\n * presentation hint on `text` fields.\n */\nexport type ControlKind =\n  | 'text'\n  | 'textarea'\n  | 'number'\n  | 'boolean'\n  | 'select'\n  | 'json'\n  | 'color'\n  | 'richtext'\n  | 'asset'\n  | 'object'\n  | 'relation'\n\nexport function controlKind(spec: PropField): ControlKind {\n  switch (spec.type) {\n    case 'boolean':\n      return 'boolean'\n    case 'number':\n      return 'number'\n    case 'select':\n      return 'select'\n    case 'richText':\n      return 'richtext'\n    // EC-195: an `asset`-typed prop (e.g. the Image `src`) picks from the asset\n    // library — never a raw asset id typed into a text box (the EC-192 persona).\n    case 'asset':\n      return 'asset'\n    // EC-253: an `object`/repeater prop reuses the CMS repeater control below.\n    case 'object':\n      return 'object'\n    // EC-262: a `relation`-typed prop (e.g. a ProductGrid's `category`) reuses the\n    // CMS relation picker — never a text box that stringifies the ref to \"[object Object]\".\n    case 'relation':\n      return 'relation'\n    case 'text': {\n      const c = spec.form?.control\n      if (c === 'textarea') return 'textarea'\n      if (c === 'color') return 'color'\n      if (c === 'json') return 'json'\n      return 'text'\n    }\n    default:\n      return 'text'\n  }\n}\n\nexport interface PropValueControlProps {\n  /** DOM id for the control's primary input (label `htmlFor` target). */\n  id: string\n  /** The prop's field name — needed to synthesize the `FieldDef` for reused controls. */\n  name: string\n  /** The manifest prop field-def driving the control kind + validation. */\n  spec: PropField\n  /** The prop's current value envelope (or `undefined` when unset). */\n  value: PropValue | undefined\n  /** Commit a new raw value (the caller wraps it in a `staticProp`). */\n  onSet: (value: JsonValue) => void\n  /** Remove the prop (revert to the manifest default). */\n  onClear: () => void\n}\n\n/**\n * Render + edit a single manifest prop value. Store-agnostic: emits through\n * `onSet`/`onClear`. Shows a validation issue when the current value fails the\n * prop's field-def validator.\n */\nexport function PropValueControl({ id, name, spec, value, onSet, onClear }: PropValueControlProps) {\n  const current = isStaticProp(value) ? value.value : (spec.default as JsonValue | undefined)\n  // The `asset`/`relation`/`object` controls delegate to the CMS `FieldControl`,\n  // which reads the ambient `CollectionViewSource` (asset library, relation\n  // candidates, nested form). The component-registry preview surface has no\n  // document/collection context, so outside a provider those controls must degrade\n  // to a read-only value display instead of throwing \"useCollectionView must be\n  // used within a <CollectionViewProvider>\" (the Konditorei Components-view crash).\n  const hasWorkspaceContext = useOptionalCollectionView() != null\n\n  // EC-190: validate with the prop's field-def value validator.\n  const valid = current === undefined || fieldValueValidator({ ...spec, name } as FieldDef)(current)\n  // EC-190: derive the editor control from the field `type` + optional `form.control`.\n  const kind = controlKind(spec)\n  // Select options live on the `select` field-def.\n  const options: readonly SelectOption[] = spec.type === 'select' ? spec.options : []\n\n  let control\n  if (kind === 'boolean') {\n    control = (\n      <label className=\"flex h-8 items-center gap-2 text-sm\">\n        <input\n          id={id}\n          type=\"checkbox\"\n          checked={current === true}\n          onChange={(e) => onSet(e.target.checked)}\n          className=\"size-4 accent-primary\"\n        />\n        <Text size=\"sm\" tone=\"muted\">\n          {current === true ? translate('common.true') : translate('common.false')}\n        </Text>\n      </label>\n    )\n  } else if (kind === 'select') {\n    control = (\n      <Select\n        id={id}\n        value={String(current ?? '')}\n        onChange={(e) => {\n          // EC-190: select option values are strings (field-def `options`).\n          const opt = options.find((o) => o.value === e.target.value)\n          onSet(opt ? opt.value : e.target.value)\n        }}\n      >\n        {options.map((opt) => (\n          <option key={opt.value} value={opt.value}>\n            {localizedLabel(opt.label, opt.value)}\n          </option>\n        ))}\n      </Select>\n    )\n  } else if (kind === 'number') {\n    control = <NumberControl id={id} current={current} onSet={onSet} onClear={onClear} />\n  } else if (kind === 'json') {\n    control = <JsonControl id={id} current={current} onSet={onSet} />\n  } else if (kind === 'color') {\n    control = (\n      <Row gap=\"2\">\n        <input\n          id={id}\n          type=\"color\"\n          value={typeof current === 'string' && /^#[0-9a-f]{6}$/i.test(current) ? current : '#000000'}\n          onChange={(e) => onSet(e.target.value)}\n          className=\"h-8 w-10 shrink-0 rounded-md border border-input bg-background\"\n        />\n        <Input value={typeof current === 'string' ? current : ''} onChange={(e) => onSet(e.target.value)} />\n      </Row>\n    )\n  } else if (kind === 'textarea' || kind === 'richtext') {\n    control = (\n      <textarea\n        id={id}\n        rows={2}\n        value={typeof current === 'string' ? current : ''}\n        onChange={(e) => onSet(e.target.value)}\n        className=\"flex w-full rounded-md border border-input bg-background px-2.5 py-1.5 text-sm text-foreground shadow-sm focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/40 outline-none\"\n      />\n    )\n  } else if (kind === 'asset' || kind === 'object' || kind === 'relation') {\n    // EC-195/EC-253/EC-262: reuse the CMS field control. `asset` = library picker +\n    // preview; `object` = the nested/repeater form; `relation` = the document picker\n    // (resolves the ref to its title, instead of stringifying it to \"[object Object]\").\n    // All edit a structured static prop value through the same shared control documents use.\n    // Without a workspace context (the Components preview), degrade to a read-only\n    // value display so the pane renders instead of throwing.\n    control = hasWorkspaceContext ? (\n      <FieldDensityProvider density=\"compact\">\n        <FieldControl\n          id={id}\n          field={{ ...spec, name } as FieldDef}\n          value={current}\n          onChange={(v) => (v === undefined || v === null ? onClear() : onSet(v as JsonValue))}\n          readOnly={false}\n        />\n      </FieldDensityProvider>\n    ) : (\n      <WorkspaceValueFallback value={current} />\n    )\n  } else {\n    control = (\n      <Input\n        id={id}\n        value={typeof current === 'string' ? current : String(current ?? '')}\n        onChange={(e) => onSet(e.target.value)}\n      />\n    )\n  }\n\n  return (\n    <Stack gap=\"1\">\n      {control}\n      {!valid ? (\n        <Text size=\"xs\" className=\"text-destructive\">\n          {translate('builder.inspector.invalidValue')}\n        </Text>\n      ) : null}\n    </Stack>\n  )\n}\n\n/**\n * Read-only stand-in for an `asset`/`relation`/`object` prop when there is no\n * ambient `CollectionViewSource` (the component-registry preview, which has no\n * document/collection context). Shows the current value and a hint that it is\n * editable inside a document — never the live picker, which needs a workspace.\n */\nfunction WorkspaceValueFallback({ value }: { value: JsonValue | undefined }) {\n  const text =\n    value === undefined || value === null\n      ? '—'\n      : typeof value === 'string'\n        ? value\n        : JSON.stringify(value)\n  return (\n    <Stack gap=\"1\">\n      <div className=\"truncate rounded-md border border-input bg-muted/30 px-2.5 py-1.5 text-sm text-muted-foreground\">\n        {text}\n      </div>\n      <Text size=\"xs\" tone=\"muted\">\n        {translate('components.preview.propNeedsDocument')}\n      </Text>\n    </Stack>\n  )\n}\n\n/** Number input with a local buffer: commits only finite values, never NaN; empty clears the prop. */\nfunction NumberControl({\n  id,\n  current,\n  onSet,\n  onClear,\n}: {\n  id: string\n  current: JsonValue | undefined\n  onSet: (v: number) => void\n  onClear: () => void\n}) {\n  const [raw, setRaw] = useState(typeof current === 'number' ? String(current) : '')\n  useEffect(() => {\n    setRaw(typeof current === 'number' ? String(current) : '')\n  }, [current])\n  return (\n    <Input\n      id={id}\n      type=\"number\"\n      value={raw}\n      onChange={(e) => {\n        const v = e.target.value\n        setRaw(v)\n        if (v.trim() === '') {\n          onClear()\n          return\n        }\n        const n = Number(v)\n        if (Number.isFinite(n)) onSet(n)\n      }}\n    />\n  )\n}\n\n/** JSON textarea with a local buffer: commits only when the text parses; flags parse errors. */\nfunction JsonControl({\n  id,\n  current,\n  onSet,\n}: {\n  id: string\n  current: JsonValue | undefined\n  onSet: (v: JsonValue) => void\n}) {\n  const [raw, setRaw] = useState(() => JSON.stringify(current ?? null))\n  const [error, setError] = useState<string | null>(null)\n  useEffect(() => {\n    setRaw(JSON.stringify(current ?? null))\n    setError(null)\n  }, [current])\n  return (\n    <Stack gap=\"1\">\n      <textarea\n        id={id}\n        rows={3}\n        value={raw}\n        onChange={(e) => {\n          const v = e.target.value\n          setRaw(v)\n          try {\n            onSet(JSON.parse(v) as JsonValue)\n            setError(null)\n          } catch {\n            setError(translate('builder.inspector.invalidJson'))\n          }\n        }}\n        className=\"flex w-full rounded-md border border-input bg-background px-2.5 py-1.5 font-mono text-xs text-foreground shadow-sm focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/40 outline-none\"\n      />\n      {error ? (\n        <Text size=\"xs\" className=\"text-destructive\">\n          {error}\n        </Text>\n      ) : null}\n    </Stack>\n  )\n}\n"]}
+{"version":3,"file":"prop-fields.js","sourceRoot":"","sources":["../../../src/components/cms/prop-fields.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAC3C,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAA;AAG5D,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAA;AAE9D,OAAO,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAA;AACtE,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAA;AACtE,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAC9C,OAAO,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAA;AACtD,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAA;AAC5C,OAAO,EAAE,yBAAyB,EAAE,MAAM,4CAA4C,CAAA;AAmCtF,MAAM,UAAU,WAAW,CAAC,IAAe;IACzC,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC;QAClB,KAAK,SAAS;YACZ,OAAO,SAAS,CAAA;QAClB,KAAK,QAAQ;YACX,OAAO,QAAQ,CAAA;QACjB,KAAK,QAAQ;YACX,OAAO,QAAQ,CAAA;QACjB,KAAK,UAAU;YACb,OAAO,UAAU,CAAA;QACnB,4EAA4E;QAC5E,6EAA6E;QAC7E,KAAK,OAAO;YACV,OAAO,OAAO,CAAA;QAChB,2EAA2E;QAC3E,KAAK,QAAQ;YACX,OAAO,QAAQ,CAAA;QACjB,+EAA+E;QAC/E,wFAAwF;QACxF,KAAK,UAAU;YACb,OAAO,UAAU,CAAA;QACnB,KAAK,MAAM,CAAC,CAAC,CAAC;YACZ,MAAM,CAAC,GAAG,IAAI,CAAC,IAAI,EAAE,OAAO,CAAA;YAC5B,IAAI,CAAC,KAAK,UAAU;gBAAE,OAAO,UAAU,CAAA;YACvC,IAAI,CAAC,KAAK,OAAO;gBAAE,OAAO,OAAO,CAAA;YACjC,IAAI,CAAC,KAAK,MAAM;gBAAE,OAAO,MAAM,CAAA;YAC/B,OAAO,MAAM,CAAA;QACf,CAAC;QACD;YACE,OAAO,MAAM,CAAA;IACjB,CAAC;AACH,CAAC;AAED;;;;;;;;;;GAUG;AACH,MAAM,UAAU,uBAAuB,CACrC,IAAa,EACb,QAAoE;IAEpE,IAAI,IAAI,KAAK,SAAS;QAAE,QAAQ,CAAC,OAAO,EAAE,CAAA;;QACrC,QAAQ,CAAC,KAAK,CAAC,IAAiB,CAAC,CAAA;AACxC,CAAC;AAiBD;;;;GAIG;AACH,MAAM,UAAU,gBAAgB,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAyB;IAC/F,MAAM,OAAO,GAAG,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAE,IAAI,CAAC,OAAiC,CAAA;IAC3F,+EAA+E;IAC/E,0EAA0E;IAC1E,0EAA0E;IAC1E,iFAAiF;IACjF,8EAA8E;IAC9E,kFAAkF;IAClF,MAAM,mBAAmB,GAAG,yBAAyB,EAAE,IAAI,IAAI,CAAA;IAE/D,8DAA8D;IAC9D,MAAM,KAAK,GAAG,OAAO,KAAK,SAAS,IAAI,mBAAmB,CAAC,EAAE,GAAG,IAAI,EAAE,IAAI,EAAc,CAAC,CAAC,OAAO,CAAC,CAAA;IAClG,qFAAqF;IACrF,MAAM,IAAI,GAAG,WAAW,CAAC,IAAI,CAAC,CAAA;IAC9B,iDAAiD;IACjD,MAAM,OAAO,GAA4B,IAAI,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAA;IAEnF,IAAI,OAAO,CAAA;IACX,IAAI,IAAI,KAAK,SAAS,EAAE,CAAC;QACvB,OAAO,GAAG,CACR,iBAAO,SAAS,EAAC,qCAAqC,aACpD,gBACE,EAAE,EAAE,EAAE,EACN,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,OAAO,KAAK,IAAI,EACzB,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,EACxC,SAAS,EAAC,uBAAuB,GACjC,EACF,KAAC,IAAI,IAAC,IAAI,EAAC,IAAI,EAAC,IAAI,EAAC,OAAO,YACzB,OAAO,KAAK,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,cAAc,CAAC,GACnE,IACD,CACT,CAAA;IACH,CAAC;SAAM,IAAI,IAAI,KAAK,QAAQ,EAAE,CAAC;QAC7B,OAAO,GAAG,CACR,KAAC,MAAM,IACL,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,MAAM,CAAC,OAAO,IAAI,EAAE,CAAC,EAC5B,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;gBACd,kEAAkE;gBAClE,MAAM,GAAG,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;gBAC3D,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;YACzC,CAAC,YAEA,OAAO,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CACpB,iBAAwB,KAAK,EAAE,GAAG,CAAC,KAAK,YACrC,cAAc,CAAC,GAAG,CAAC,KAAK,EAAE,GAAG,CAAC,KAAK,CAAC,IAD1B,GAAG,CAAC,KAAK,CAEb,CACV,CAAC,GACK,CACV,CAAA;IACH,CAAC;SAAM,IAAI,IAAI,KAAK,QAAQ,EAAE,CAAC;QAC7B,OAAO,GAAG,KAAC,aAAa,IAAC,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,GAAI,CAAA;IACvF,CAAC;SAAM,IAAI,IAAI,KAAK,MAAM,EAAE,CAAC;QAC3B,OAAO,GAAG,KAAC,WAAW,IAAC,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAI,CAAA;IACnE,CAAC;SAAM,IAAI,IAAI,KAAK,OAAO,EAAE,CAAC;QAC5B,OAAO,GAAG,CACR,MAAC,GAAG,IAAC,GAAG,EAAC,GAAG,aACV,gBACE,EAAE,EAAE,EAAE,EACN,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,OAAO,OAAO,KAAK,QAAQ,IAAI,iBAAiB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,EAC3F,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EACtC,SAAS,EAAC,gEAAgE,GAC1E,EACF,KAAC,KAAK,IAAC,KAAK,EAAE,OAAO,OAAO,KAAK,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,GAAI,IAChG,CACP,CAAA;IACH,CAAC;SAAM,IAAI,IAAI,KAAK,UAAU,EAAE,CAAC;QAC/B,gFAAgF;QAChF,0EAA0E;QAC1E,gFAAgF;QAChF,gFAAgF;QAChF,0EAA0E;QAC1E,gFAAgF;QAChF,kFAAkF;QAClF,uDAAuD;QACvD,EAAE;QACF,8EAA8E;QAC9E,iFAAiF;QACjF,iFAAiF;QACjF,+EAA+E;QAC/E,8EAA8E;QAC9E,6EAA6E;QAC7E,sEAAsE;QACtE,OAAO,GAAG,mBAAmB,CAAC,CAAC,CAAC,CAC9B,KAAC,cAAc,IACb,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,OAAO,EACd,QAAQ,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,uBAAuB,CAAC,IAAI,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC,EACrE,KAAK,EAAE,IAAI,CAAC,IAAI,KAAK,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,GACxD,CACH,CAAC,CAAC,CAAC,CACF,KAAC,sBAAsB,IAAC,KAAK,EAAE,OAAO,GAAI,CAC3C,CAAA;IACH,CAAC;SAAM,IAAI,IAAI,KAAK,UAAU,EAAE,CAAC;QAC/B,OAAO,GAAG,CACR,mBACE,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,CAAC,EACP,KAAK,EAAE,OAAO,OAAO,KAAK,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EACjD,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EACtC,SAAS,EAAC,iMAAiM,GAC3M,CACH,CAAA;IACH,CAAC;SAAM,IAAI,IAAI,KAAK,OAAO,IAAI,IAAI,KAAK,QAAQ,IAAI,IAAI,KAAK,UAAU,EAAE,CAAC;QACxE,gFAAgF;QAChF,iFAAiF;QACjF,oFAAoF;QACpF,yFAAyF;QACzF,+EAA+E;QAC/E,yDAAyD;QACzD,OAAO,GAAG,mBAAmB,CAAC,CAAC,CAAC,CAC9B,KAAC,oBAAoB,IAAC,OAAO,EAAC,SAAS,YACrC,KAAC,YAAY,IACX,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,EAAE,GAAG,IAAI,EAAE,IAAI,EAAc,EACpC,KAAK,EAAE,OAAO,EACd,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,SAAS,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAc,CAAC,CAAC,EACpF,QAAQ,EAAE,KAAK,GACf,GACmB,CACxB,CAAC,CAAC,CAAC,CACF,KAAC,sBAAsB,IAAC,KAAK,EAAE,OAAO,GAAI,CAC3C,CAAA;IACH,CAAC;SAAM,CAAC;QACN,OAAO,GAAG,CACR,KAAC,KAAK,IACJ,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,OAAO,OAAO,KAAK,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,IAAI,EAAE,CAAC,EACpE,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,GACtC,CACH,CAAA;IACH,CAAC;IAED,OAAO,CACL,MAAC,KAAK,IAAC,GAAG,EAAC,GAAG,aACX,OAAO,EACP,CAAC,KAAK,CAAC,CAAC,CAAC,CACR,KAAC,IAAI,IAAC,IAAI,EAAC,IAAI,EAAC,SAAS,EAAC,kBAAkB,YACzC,SAAS,CAAC,gCAAgC,CAAC,GACvC,CACR,CAAC,CAAC,CAAC,IAAI,IACF,CACT,CAAA;AACH,CAAC;AAED;;;;;GAKG;AACH,SAAS,sBAAsB,CAAC,EAAE,KAAK,EAAoC;IACzE,MAAM,IAAI,GACR,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,IAAI;QACnC,CAAC,CAAC,GAAG;QACL,CAAC,CAAC,OAAO,KAAK,KAAK,QAAQ;YACzB,CAAC,CAAC,KAAK;YACP,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAA;IAC7B,OAAO,CACL,MAAC,KAAK,IAAC,GAAG,EAAC,GAAG,aACZ,cAAK,SAAS,EAAC,iGAAiG,YAC7G,IAAI,GACD,EACN,KAAC,IAAI,IAAC,IAAI,EAAC,IAAI,EAAC,IAAI,EAAC,OAAO,YACzB,SAAS,CAAC,sCAAsC,CAAC,GAC7C,IACD,CACT,CAAA;AACH,CAAC;AAED,sGAAsG;AACtG,SAAS,aAAa,CAAC,EACrB,EAAE,EACF,OAAO,EACP,KAAK,EACL,OAAO,GAMR;IACC,MAAM,CAAC,GAAG,EAAE,MAAM,CAAC,GAAG,QAAQ,CAAC,OAAO,OAAO,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAA;IAClF,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,CAAC,OAAO,OAAO,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAA;IAC5D,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAA;IACb,OAAO,CACL,KAAC,KAAK,IACJ,EAAE,EAAE,EAAE,EACN,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,GAAG,EACV,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;YACd,MAAM,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAA;YACxB,MAAM,CAAC,CAAC,CAAC,CAAA;YACT,IAAI,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC;gBACpB,OAAO,EAAE,CAAA;gBACT,OAAM;YACR,CAAC;YACD,MAAM,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC,CAAA;YACnB,IAAI,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC;gBAAE,KAAK,CAAC,CAAC,CAAC,CAAA;QAClC,CAAC,GACD,CACH,CAAA;AACH,CAAC;AAED,gGAAgG;AAChG,SAAS,WAAW,CAAC,EACnB,EAAE,EACF,OAAO,EACP,KAAK,GAKN;IACC,MAAM,CAAC,GAAG,EAAE,MAAM,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,OAAO,IAAI,IAAI,CAAC,CAAC,CAAA;IACrE,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAgB,IAAI,CAAC,CAAA;IACvD,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,OAAO,IAAI,IAAI,CAAC,CAAC,CAAA;QACvC,QAAQ,CAAC,IAAI,CAAC,CAAA;IAChB,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAA;IACb,OAAO,CACL,MAAC,KAAK,IAAC,GAAG,EAAC,GAAG,aACZ,mBACE,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,CAAC,EACP,KAAK,EAAE,GAAG,EACV,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;oBACd,MAAM,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAA;oBACxB,MAAM,CAAC,CAAC,CAAC,CAAA;oBACT,IAAI,CAAC;wBACH,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAc,CAAC,CAAA;wBACjC,QAAQ,CAAC,IAAI,CAAC,CAAA;oBAChB,CAAC;oBAAC,MAAM,CAAC;wBACP,QAAQ,CAAC,SAAS,CAAC,+BAA+B,CAAC,CAAC,CAAA;oBACtD,CAAC;gBACH,CAAC,EACD,SAAS,EAAC,2MAA2M,GACrN,EACD,KAAK,CAAC,CAAC,CAAC,CACP,KAAC,IAAI,IAAC,IAAI,EAAC,IAAI,EAAC,SAAS,EAAC,kBAAkB,YACzC,KAAK,GACD,CACR,CAAC,CAAC,CAAC,IAAI,IACF,CACT,CAAA;AACH,CAAC","sourcesContent":["import { useEffect, useState } from 'react'\nimport { isStaticProp } from '@elytracms/core/project-graph'\nimport type { JsonValue, PropValue } from '@elytracms/core/project-graph'\nimport type { PropField } from '@elytracms/core/component-registry'\nimport { fieldValueValidator } from '@elytracms/core/cms-core'\nimport type { FieldDef, SelectOption } from '@elytracms/core/cms-core'\nimport { Input, Row, Select, Stack, Text } from '@elytracms/studio/ui'\nimport { localizedLabel, translate } from '@elytracms/studio/lib/i18n'\nimport { FieldControl } from './field-control'\nimport { FieldDensityProvider } from './field-density'\nimport { RichTextEditor } from './rich-text'\nimport { useOptionalCollectionView } from '../collection-view/collection-view-context'\n\n/**\n * The EC-190 \"props-as-fields\" value control — the single renderer for a\n * manifest-declared prop field, shared by the canvas property inspector\n * (`builder/property-inspector.tsx`) and the rich-text component-embed prop editor\n * (`rich-text/embed-props.tsx`). Extracted here so both surfaces render prop fields\n * through *one* control set (asset → library picker, relation → document picker,\n * object → nested form, …) rather than two parallel form systems.\n *\n * It is deliberately store-agnostic: it reads a prop's current value and reports\n * edits through `onSet(rawValue)` / `onClear()`. The caller owns *where* the value\n * lands — the inspector dispatches a builder command; the embed editor rewrites a\n * ProseMirror node attr — and is responsible for wrapping the raw value in a\n * `staticProp` envelope.\n */\n\n/**\n * The inspector control to render for a prop field-def. The `control.kind`\n * vocabulary derives from the field `type` plus the optional `form.control`\n * presentation hint on `text` fields.\n */\nexport type ControlKind =\n  | 'text'\n  | 'textarea'\n  | 'number'\n  | 'boolean'\n  | 'select'\n  | 'json'\n  | 'color'\n  | 'richtext'\n  | 'asset'\n  | 'object'\n  | 'relation'\n\nexport function controlKind(spec: PropField): ControlKind {\n  switch (spec.type) {\n    case 'boolean':\n      return 'boolean'\n    case 'number':\n      return 'number'\n    case 'select':\n      return 'select'\n    case 'richText':\n      return 'richtext'\n    // EC-195: an `asset`-typed prop (e.g. the Image `src`) picks from the asset\n    // library — never a raw asset id typed into a text box (the EC-192 persona).\n    case 'asset':\n      return 'asset'\n    // EC-253: an `object`/repeater prop reuses the CMS repeater control below.\n    case 'object':\n      return 'object'\n    // EC-262: a `relation`-typed prop (e.g. a ProductGrid's `category`) reuses the\n    // CMS relation picker — never a text box that stringifies the ref to \"[object Object]\".\n    case 'relation':\n      return 'relation'\n    case 'text': {\n      const c = spec.form?.control\n      if (c === 'textarea') return 'textarea'\n      if (c === 'color') return 'color'\n      if (c === 'json') return 'json'\n      return 'text'\n    }\n    default:\n      return 'text'\n  }\n}\n\n/**\n * EC-387: route a rich-text editor emission to the prop value callbacks.\n *\n * The shared {@link RichTextEditor} emits either an emptied-editor `undefined`, the\n * exact stored envelope (an untouched/reverted edit), or a fresh `{ version, doc }`\n * value — never a plain string. An `undefined` clears the prop (reverting to the\n * manifest default, matching the asset/relation/object controls); anything else is a\n * structured `JsonValue` envelope set verbatim. Extracted pure so the wiring — the\n * exact bug the retired textarea stub had (it wrote a bare string over the envelope) —\n * is regression-pinned without driving TipTap.\n */\nexport function applyRichTextPropChange(\n  next: unknown,\n  handlers: { onSet: (value: JsonValue) => void; onClear: () => void },\n): void {\n  if (next === undefined) handlers.onClear()\n  else handlers.onSet(next as JsonValue)\n}\n\nexport interface PropValueControlProps {\n  /** DOM id for the control's primary input (label `htmlFor` target). */\n  id: string\n  /** The prop's field name — needed to synthesize the `FieldDef` for reused controls. */\n  name: string\n  /** The manifest prop field-def driving the control kind + validation. */\n  spec: PropField\n  /** The prop's current value envelope (or `undefined` when unset). */\n  value: PropValue | undefined\n  /** Commit a new raw value (the caller wraps it in a `staticProp`). */\n  onSet: (value: JsonValue) => void\n  /** Remove the prop (revert to the manifest default). */\n  onClear: () => void\n}\n\n/**\n * Render + edit a single manifest prop value. Store-agnostic: emits through\n * `onSet`/`onClear`. Shows a validation issue when the current value fails the\n * prop's field-def validator.\n */\nexport function PropValueControl({ id, name, spec, value, onSet, onClear }: PropValueControlProps) {\n  const current = isStaticProp(value) ? value.value : (spec.default as JsonValue | undefined)\n  // The `asset`/`relation`/`object` controls delegate to the CMS `FieldControl`,\n  // which reads the ambient `CollectionViewSource` (asset library, relation\n  // candidates, nested form). The component-registry preview surface has no\n  // document/collection context, so outside a provider those controls must degrade\n  // to a read-only value display instead of throwing \"useCollectionView must be\n  // used within a <CollectionViewProvider>\" (the Konditorei Components-view crash).\n  const hasWorkspaceContext = useOptionalCollectionView() != null\n\n  // EC-190: validate with the prop's field-def value validator.\n  const valid = current === undefined || fieldValueValidator({ ...spec, name } as FieldDef)(current)\n  // EC-190: derive the editor control from the field `type` + optional `form.control`.\n  const kind = controlKind(spec)\n  // Select options live on the `select` field-def.\n  const options: readonly SelectOption[] = spec.type === 'select' ? spec.options : []\n\n  let control\n  if (kind === 'boolean') {\n    control = (\n      <label className=\"flex h-8 items-center gap-2 text-sm\">\n        <input\n          id={id}\n          type=\"checkbox\"\n          checked={current === true}\n          onChange={(e) => onSet(e.target.checked)}\n          className=\"size-4 accent-primary\"\n        />\n        <Text size=\"sm\" tone=\"muted\">\n          {current === true ? translate('common.true') : translate('common.false')}\n        </Text>\n      </label>\n    )\n  } else if (kind === 'select') {\n    control = (\n      <Select\n        id={id}\n        value={String(current ?? '')}\n        onChange={(e) => {\n          // EC-190: select option values are strings (field-def `options`).\n          const opt = options.find((o) => o.value === e.target.value)\n          onSet(opt ? opt.value : e.target.value)\n        }}\n      >\n        {options.map((opt) => (\n          <option key={opt.value} value={opt.value}>\n            {localizedLabel(opt.label, opt.value)}\n          </option>\n        ))}\n      </Select>\n    )\n  } else if (kind === 'number') {\n    control = <NumberControl id={id} current={current} onSet={onSet} onClear={onClear} />\n  } else if (kind === 'json') {\n    control = <JsonControl id={id} current={current} onSet={onSet} />\n  } else if (kind === 'color') {\n    control = (\n      <Row gap=\"2\">\n        <input\n          id={id}\n          type=\"color\"\n          value={typeof current === 'string' && /^#[0-9a-f]{6}$/i.test(current) ? current : '#000000'}\n          onChange={(e) => onSet(e.target.value)}\n          className=\"h-8 w-10 shrink-0 rounded-md border border-input bg-background\"\n        />\n        <Input value={typeof current === 'string' ? current : ''} onChange={(e) => onSet(e.target.value)} />\n      </Row>\n    )\n  } else if (kind === 'richtext') {\n    // EC-387: a richText PROP now uses the SAME real editor as the collection-field\n    // path (`field-control.tsx` `case 'richText'`) — one editing surface, one\n    // `{ version, doc }` value contract, never a second implementation. The retired\n    // textarea stub read `typeof current === 'string'`, so a stored envelope showed\n    // EMPTY and any edit clobbered the structured document with a bare string\n    // (silent data destruction). The editor reads the envelope (or a legacy string,\n    // or empty), always emits an envelope, and routes an emptied editor's `undefined`\n    // to a prop clear via {@link applyRichTextPropChange}.\n    //\n    // Like the asset/relation/object controls below, the editor needs the ambient\n    // workspace — its asset-image picker reads the REQUIRED collection-view context.\n    // The block property inspector (the EC-387 target) is inside the detail editor's\n    // `CollectionViewProvider`, so it gets the full editor; the component-registry\n    // preview surface (no provider, nothing to edit against) degrades to the same\n    // read-only value display the sibling controls use, instead of crashing with\n    // \"useCollectionView must be used within a <CollectionViewProvider>\".\n    control = hasWorkspaceContext ? (\n      <RichTextEditor\n        id={id}\n        value={current}\n        onChange={(next) => applyRichTextPropChange(next, { onSet, onClear })}\n        allow={spec.type === 'richText' ? spec.allow : undefined}\n      />\n    ) : (\n      <WorkspaceValueFallback value={current} />\n    )\n  } else if (kind === 'textarea') {\n    control = (\n      <textarea\n        id={id}\n        rows={2}\n        value={typeof current === 'string' ? current : ''}\n        onChange={(e) => onSet(e.target.value)}\n        className=\"flex w-full rounded-md border border-input bg-background px-2.5 py-1.5 text-sm text-foreground shadow-sm focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/40 outline-none\"\n      />\n    )\n  } else if (kind === 'asset' || kind === 'object' || kind === 'relation') {\n    // EC-195/EC-253/EC-262: reuse the CMS field control. `asset` = library picker +\n    // preview; `object` = the nested/repeater form; `relation` = the document picker\n    // (resolves the ref to its title, instead of stringifying it to \"[object Object]\").\n    // All edit a structured static prop value through the same shared control documents use.\n    // Without a workspace context (the Components preview), degrade to a read-only\n    // value display so the pane renders instead of throwing.\n    control = hasWorkspaceContext ? (\n      <FieldDensityProvider density=\"compact\">\n        <FieldControl\n          id={id}\n          field={{ ...spec, name } as FieldDef}\n          value={current}\n          onChange={(v) => (v === undefined || v === null ? onClear() : onSet(v as JsonValue))}\n          readOnly={false}\n        />\n      </FieldDensityProvider>\n    ) : (\n      <WorkspaceValueFallback value={current} />\n    )\n  } else {\n    control = (\n      <Input\n        id={id}\n        value={typeof current === 'string' ? current : String(current ?? '')}\n        onChange={(e) => onSet(e.target.value)}\n      />\n    )\n  }\n\n  return (\n    <Stack gap=\"1\">\n      {control}\n      {!valid ? (\n        <Text size=\"xs\" className=\"text-destructive\">\n          {translate('builder.inspector.invalidValue')}\n        </Text>\n      ) : null}\n    </Stack>\n  )\n}\n\n/**\n * Read-only stand-in for an `asset`/`relation`/`object` prop when there is no\n * ambient `CollectionViewSource` (the component-registry preview, which has no\n * document/collection context). Shows the current value and a hint that it is\n * editable inside a document — never the live picker, which needs a workspace.\n */\nfunction WorkspaceValueFallback({ value }: { value: JsonValue | undefined }) {\n  const text =\n    value === undefined || value === null\n      ? '—'\n      : typeof value === 'string'\n        ? value\n        : JSON.stringify(value)\n  return (\n    <Stack gap=\"1\">\n      <div className=\"truncate rounded-md border border-input bg-muted/30 px-2.5 py-1.5 text-sm text-muted-foreground\">\n        {text}\n      </div>\n      <Text size=\"xs\" tone=\"muted\">\n        {translate('components.preview.propNeedsDocument')}\n      </Text>\n    </Stack>\n  )\n}\n\n/** Number input with a local buffer: commits only finite values, never NaN; empty clears the prop. */\nfunction NumberControl({\n  id,\n  current,\n  onSet,\n  onClear,\n}: {\n  id: string\n  current: JsonValue | undefined\n  onSet: (v: number) => void\n  onClear: () => void\n}) {\n  const [raw, setRaw] = useState(typeof current === 'number' ? String(current) : '')\n  useEffect(() => {\n    setRaw(typeof current === 'number' ? String(current) : '')\n  }, [current])\n  return (\n    <Input\n      id={id}\n      type=\"number\"\n      value={raw}\n      onChange={(e) => {\n        const v = e.target.value\n        setRaw(v)\n        if (v.trim() === '') {\n          onClear()\n          return\n        }\n        const n = Number(v)\n        if (Number.isFinite(n)) onSet(n)\n      }}\n    />\n  )\n}\n\n/** JSON textarea with a local buffer: commits only when the text parses; flags parse errors. */\nfunction JsonControl({\n  id,\n  current,\n  onSet,\n}: {\n  id: string\n  current: JsonValue | undefined\n  onSet: (v: JsonValue) => void\n}) {\n  const [raw, setRaw] = useState(() => JSON.stringify(current ?? null))\n  const [error, setError] = useState<string | null>(null)\n  useEffect(() => {\n    setRaw(JSON.stringify(current ?? null))\n    setError(null)\n  }, [current])\n  return (\n    <Stack gap=\"1\">\n      <textarea\n        id={id}\n        rows={3}\n        value={raw}\n        onChange={(e) => {\n          const v = e.target.value\n          setRaw(v)\n          try {\n            onSet(JSON.parse(v) as JsonValue)\n            setError(null)\n          } catch {\n            setError(translate('builder.inspector.invalidJson'))\n          }\n        }}\n        className=\"flex w-full rounded-md border border-input bg-background px-2.5 py-1.5 font-mono text-xs text-foreground shadow-sm focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/40 outline-none\"\n      />\n      {error ? (\n        <Text size=\"xs\" className=\"text-destructive\">\n          {error}\n        </Text>\n      ) : null}\n    </Stack>\n  )\n}\n"]}

package/dist/components/cms/rich-text/editor.d.ts

@@ -24,4 +24,12 @@ interface RichTextEditorProps {
  * toolbar buttons and the `/` slash menu open the same modal — one insertion path.
  */
 export declare function RichTextEditor({ value, onChange, readOnly, id, allow }: RichTextEditorProps): import("react").JSX.Element | null;
+/**
+ * The inline strip shown in the field row while the editor is expanded into its
+ * sheet (the real editing surface lives in the sheet then). Clicking it returns —
+ * so the collapsed field never appears as a broken empty box.
+ */
+export declare function RichTextExpandPlaceholder({ onCollapse }: {
+    onCollapse: () => void;
+}): import("react").JSX.Element;
 export {};

package/dist/components/cms/rich-text/editor.js

@@ -1,8 +1,10 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { EditorContent, useEditor } from '@tiptap/react';
+import { Minimize2 } from 'lucide-react';
+import { ExpandableSurface, Text } from '@elytracms/studio/ui';
 import { cn } from '@elytracms/studio/lib/utils';
-import { localizedLabel } from '@elytracms/studio/lib/i18n';
+import { localizedLabel, translate } from '@elytracms/studio/lib/i18n';
 import { useOptionalCollectionView } from '../../collection-view/collection-view-context.js';
 import { useOptionalAssets } from '../../assets/assets-store.js';
 import { AssetPicker } from '../asset-picker.js';
@@ -35,6 +37,8 @@ export function RichTextEditor({ value, onChange, readOnly = false, id, allow })
     const assets = useOptionalAssets();
     const [imageOpen, setImageOpen] = useState(false);
     const [embedOpen, setEmbedOpen] = useState(false);
+    // EC-388: whether the editor is promoted to its roomy expand sheet.
+    const [expanded, setExpanded] = useState(false);
     const canImage = assets != null;
     // The `allow`-gated components this field may embed — drives both the toolbar
     // picker and the slash menu's direct per-component items (0.0.41).
@@ -121,10 +125,41 @@ export function RichTextEditor({ value, onChange, readOnly = false, id, allow })
     }, [editor, readOnly]);
     if (!editor)
         return null;
-    return (_jsxs("div", { className: cn('ec-rte overflow-hidden rounded-md border border-input bg-background shadow-sm', 'focus-within:border-ring focus-within:ring-2 focus-within:ring-ring/40', readOnly && 'opacity-70'), children: [!readOnly ? (_jsx(RichTextToolbar, { editor: editor, targets: linkTargets, onOpenImage: openImage, onOpenEmbed: openEmbed })) : null, _jsx(EditorContent, { editor: editor }), canImage ? (_jsx(AssetPicker, { open: imageOpen, onOpenChange: setImageOpen, value: null, accept: "image/*", onChange: (assetId) => {
+    // The editing surface — the toolbar (which carries the expand toggle) + the
+    // editable content. Mounted inline OR inside the expand sheet, never both. TipTap
+    // preserves the editor instance across `EditorContent` remounts (its view DOM is
+    // carried onto the new element), so relocating this surface keeps ONE editor
+    // document and ONE value flow — the same instance, grown, not a second form.
+    const surface = (_jsxs(_Fragment, { children: [!readOnly ? (_jsx(RichTextToolbar, { editor: editor, targets: linkTargets, onOpenImage: openImage, onOpenEmbed: openEmbed, expanded: expanded, onToggleExpand: () => setExpanded((v) => !v) })) : null, _jsx(EditorContent, { editor: editor, className: cn(expanded && 'min-h-0 flex-1 overflow-y-auto') })] }));
+    return (_jsxs("div", { className: cn('ec-rte overflow-hidden rounded-md border border-input bg-background shadow-sm', 'focus-within:border-ring focus-within:ring-2 focus-within:ring-ring/40', readOnly && 'opacity-70'), children: [expanded ? (_jsxs(_Fragment, { children: [_jsx(RichTextExpandPlaceholder, { onCollapse: () => setExpanded(false) }), _jsx(RichTextExpandSheet, { onCollapse: () => setExpanded(false), children: surface })] })) : (surface), canImage ? (_jsx(AssetPicker, { open: imageOpen, onOpenChange: setImageOpen, value: null, accept: "image/*", onChange: (assetId) => {
                     setImageOpen(false);
                     if (assetId)
                         insertAssetImage(editor, assetId, assets);
                 } })) : null, canEmbed ? (_jsx(EmbedPicker, { open: embedOpen, onOpenChange: setEmbedOpen, allow: allow, onSelect: (manifest) => insertComponentEmbed(editor, manifest, { select: true }) })) : null] }));
 }
+/**
+ * The inline strip shown in the field row while the editor is expanded into its
+ * sheet (the real editing surface lives in the sheet then). Clicking it returns —
+ * so the collapsed field never appears as a broken empty box.
+ */
+export function RichTextExpandPlaceholder({ onCollapse }) {
+    return (_jsxs("button", { type: "button", onClick: onCollapse, className: "flex min-h-[8rem] w-full items-center justify-center gap-2 px-3 py-6 text-sm text-muted-foreground transition-colors hover:bg-muted/40", children: [_jsx(Minimize2, { className: "size-4" }), _jsx(Text, { size: "sm", tone: "muted", children: translate('richText.expand.editingInSheet') })] }));
+}
+/**
+ * EC-388 — the expanded editing surface: the SAME editor, grown into a roomy,
+ * full-height right-anchored sheet where long prose (a privacy statement, a
+ * Freeform block) is comfortable to edit. Since EC-392 it renders through the
+ * shared {@link ExpandableSurface} primitive (portal-to-body, backdrop, header
+ * close, layer-stacked Escape) at the shipped 820px width. It is the same edit
+ * surface, not a second form: no save/cancel of its own — edits flow through the
+ * editor's existing value contract, and it is lightly dismissible (Escape /
+ * backdrop / the toolbar's collapse toggle / the header close), the
+ * forms-never-modal spirit applied. The `children` are the live toolbar +
+ * `EditorContent`; unmounting them here returns the editor inline. The asset
+ * picker opened from the sheet's toolbar is a Radix dialog ABOVE the sheet — it
+ * consumes Escape first (the sheet stays), per the EC-392 stacking rules.
+ */
+function RichTextExpandSheet({ children, onCollapse, }) {
+    return (_jsx(ExpandableSurface, { title: translate('richText.expand.title'), closeLabel: translate('richText.expand.collapse'), width: "min(820px, 92vw)", onDismiss: onCollapse, children: _jsx("div", { className: "ec-rte flex min-h-0 flex-1 flex-col overflow-hidden bg-background", children: children }) }));
+}
 //# sourceMappingURL=editor.js.map

package/dist/components/cms/rich-text/editor.js.map

@@ -1 +1 @@
-{"version":3,"file":"editor.js","sourceRoot":"","sources":["../../../../src/components/cms/rich-text/editor.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useMemo, useRef, useState } from 'react'\nimport { EditorContent, useEditor } from '@tiptap/react'\nimport type { RichTextDoc } from '@elytracms/core/rich-text'\nimport { cn } from '@elytracms/studio/lib/utils'\nimport { localizedLabel } from '@elytracms/studio/lib/i18n'\nimport { useOptionalCollectionView } from '../../collection-view/collection-view-context'\nimport { useOptionalAssets } from '../../assets/assets-store'\nimport { AssetPicker } from '../asset-picker'\nimport { buildRichTextExtensions } from './extensions'\nimport {\n  isEffectivelyEmpty,\n  isEquivalentToStored,\n  normalizeEditorDoc,\n  richTextValueFromDoc,\n  toEditorDoc,\n} from './value'\nimport { insertAssetImage, insertComponentEmbed, listEmbeddable } from './insert'\nimport { EmbedPicker } from './embed-picker'\nimport { getStudioRegistry } from '@elytracms/studio/lib/registry'\nimport { RichTextToolbar } from './toolbar'\nimport type { LinkTarget } from './link-control'\n\ninterface RichTextEditorProps {\n  /** The stored `richText` value (`{ version, doc }`, legacy string, or empty). */\n  value: unknown\n  onChange: (value: unknown) => void\n  readOnly?: boolean\n  id?: string\n  /** The field's embed `allow` list (component ids editors may embed). */\n  allow?: string[]\n}\n\n/**\n * The CMS rich-text field editor (EC-314) — a real TipTap editor over the shared\n * `@elytracms/core/rich-text` storage, replacing the plaintext textarea stub.\n *\n * It stays *controlled without churn*: the editor is created once from the initial\n * value; the stored value is only re-pushed into ProseMirror when it changes\n * externally (locale switch, reset, compare) and is not already equivalent to what\n * is on screen. On edit, output is pruned to the lean storage convention\n * ({@link normalizeEditorDoc}) and — crucially — when an edit lands the document back\n * on its stored meaning, the *exact stored value* is re-emitted so the field never\n * shows a spurious dirty state (the same \"commit-nothing-when-equivalent\" contract\n * the canvas inline editor uses).\n *\n * The image and component-embed pickers are owned here (not the toolbar) so both the\n * toolbar buttons and the `/` slash menu open the same modal — one insertion path.\n */\nexport function RichTextEditor({ value, onChange, readOnly = false, id, allow }: RichTextEditorProps) {\n  // Ambient context for reference-aware insertion (null outside a collection view /\n  // asset backend — the editor then degrades to external links and no image insert).\n  const source = useOptionalCollectionView()\n  const assets = useOptionalAssets()\n\n  const [imageOpen, setImageOpen] = useState(false)\n  const [embedOpen, setEmbedOpen] = useState(false)\n\n  const canImage = assets != null\n  // The `allow`-gated components this field may embed — drives both the toolbar\n  // picker and the slash menu's direct per-component items (0.0.41).\n  const embeddable = useMemo(\n    () => listEmbeddable(allow, getStudioRegistry().registry.list()),\n    [allow],\n  )\n  const canEmbed = embeddable.length > 0\n\n  // Every linkable document across the workspace (excluding the asset rail — you link\n  // to content, not to raw files). Recomputed only when the source changes.\n  const linkTargets = useMemo<LinkTarget[]>(() => {\n    if (!source) return []\n    const out: LinkTarget[] = []\n    for (const collection of source.collections) {\n      if (collection.id === source.assetCollectionId) continue\n      const collectionLabel = localizedLabel(collection.form?.labelSingular, collection.id)\n      for (const doc of source.referenceCandidates(collection.id)) {\n        const ref = { collection: collection.id, id: doc.id }\n        out.push({ ref, label: source.titleOf(ref), collectionLabel })\n      }\n    }\n    return out\n  }, [source])\n\n  // Latest value/onChange, read inside the stable onUpdate closure.\n  const valueRef = useRef(value)\n  valueRef.current = value\n  const onChangeRef = useRef(onChange)\n  onChangeRef.current = onChange\n  // What we last emitted upward — lets the sync effect ignore our own echoes.\n  const lastEmitted = useRef<unknown>(value)\n\n  // Media openers for the toolbar + slash menu. setState fns are stable, so these\n  // stay valid for the life of the editor even though it's built once.\n  const openImage = canImage ? () => setImageOpen(true) : undefined\n  const openEmbed = canEmbed ? () => setEmbedOpen(true) : undefined\n\n  const editor = useEditor({\n    extensions: buildRichTextExtensions({\n      slash: {\n        onImage: openImage,\n        // Direct per-component slash items (0.0.41) — insert with manifest defaults\n        // and select, so the embed inspector opens onto the new node's props.\n        embed: canEmbed\n          ? {\n              components: embeddable,\n              insert: (ed, range, manifest) => {\n                ed.chain().focus().deleteRange(range).run()\n                insertComponentEmbed(ed, manifest, { select: true })\n              },\n            }\n          : undefined,\n      },\n    }),\n    content: toEditorDoc(value),\n    editable: !readOnly,\n    editorProps: {\n      attributes: { class: 'ec-rte-content', ...(id ? { id } : {}) },\n    },\n    onUpdate: ({ editor }) => {\n      const current = normalizeEditorDoc(editor.getJSON() as unknown as RichTextDoc)\n      const stored = valueRef.current\n      // Three outcomes: unchanged → re-emit the stored value verbatim (no dirty);\n      // emptied → clear the field (undefined); otherwise → the new stamped value.\n      const next = isEquivalentToStored(current, stored)\n        ? stored\n        : isEffectivelyEmpty(current)\n          ? undefined\n          : richTextValueFromDoc(current)\n      lastEmitted.current = next\n      onChangeRef.current(next)\n    },\n  })\n\n  // Reflect external value changes into the editor, never echoing our own emits.\n  useEffect(() => {\n    if (!editor) return\n    if (value === lastEmitted.current) return\n    const current = normalizeEditorDoc(editor.getJSON() as unknown as RichTextDoc)\n    if (isEquivalentToStored(current, value)) return\n    editor.commands.setContent(toEditorDoc(value), { emitUpdate: false })\n  }, [editor, value])\n\n  // Toggle editability without rebuilding the editor (preserves history/selection).\n  useEffect(() => {\n    editor?.setEditable(!readOnly)\n  }, [editor, readOnly])\n\n  if (!editor) return null\n\n  return (\n    <div\n      className={cn(\n        'ec-rte overflow-hidden rounded-md border border-input bg-background shadow-sm',\n        'focus-within:border-ring focus-within:ring-2 focus-within:ring-ring/40',\n        readOnly && 'opacity-70',\n      )}\n    >\n      {!readOnly ? (\n        <RichTextToolbar\n          editor={editor}\n          targets={linkTargets}\n          onOpenImage={openImage}\n          onOpenEmbed={openEmbed}\n        />\n      ) : null}\n      <EditorContent editor={editor} />\n      {canImage ? (\n        <AssetPicker\n          open={imageOpen}\n          onOpenChange={setImageOpen}\n          value={null}\n          accept=\"image/*\"\n          onChange={(assetId) => {\n            setImageOpen(false)\n            if (assetId) insertAssetImage(editor, assetId, assets)\n          }}\n        />\n      ) : null}\n      {canEmbed ? (\n        <EmbedPicker\n          open={embedOpen}\n          onOpenChange={setEmbedOpen}\n          allow={allow}\n          onSelect={(manifest) => insertComponentEmbed(editor, manifest, { select: true })}\n        />\n      ) : null}\n    </div>\n  )\n}\n"]}
+{"version":3,"file":"editor.js","sourceRoot":"","sources":["../../../../src/components/cms/rich-text/editor.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useMemo, useRef, useState } from 'react'\nimport type { ReactNode } from 'react'\nimport { EditorContent, useEditor } from '@tiptap/react'\nimport { Minimize2 } from 'lucide-react'\nimport type { RichTextDoc } from '@elytracms/core/rich-text'\nimport { ExpandableSurface, Text } from '@elytracms/studio/ui'\nimport { cn } from '@elytracms/studio/lib/utils'\nimport { localizedLabel, translate } from '@elytracms/studio/lib/i18n'\nimport { useOptionalCollectionView } from '../../collection-view/collection-view-context'\nimport { useOptionalAssets } from '../../assets/assets-store'\nimport { AssetPicker } from '../asset-picker'\nimport { buildRichTextExtensions } from './extensions'\nimport {\n  isEffectivelyEmpty,\n  isEquivalentToStored,\n  normalizeEditorDoc,\n  richTextValueFromDoc,\n  toEditorDoc,\n} from './value'\nimport { insertAssetImage, insertComponentEmbed, listEmbeddable } from './insert'\nimport { EmbedPicker } from './embed-picker'\nimport { getStudioRegistry } from '@elytracms/studio/lib/registry'\nimport { RichTextToolbar } from './toolbar'\nimport type { LinkTarget } from './link-control'\n\ninterface RichTextEditorProps {\n  /** The stored `richText` value (`{ version, doc }`, legacy string, or empty). */\n  value: unknown\n  onChange: (value: unknown) => void\n  readOnly?: boolean\n  id?: string\n  /** The field's embed `allow` list (component ids editors may embed). */\n  allow?: string[]\n}\n\n/**\n * The CMS rich-text field editor (EC-314) — a real TipTap editor over the shared\n * `@elytracms/core/rich-text` storage, replacing the plaintext textarea stub.\n *\n * It stays *controlled without churn*: the editor is created once from the initial\n * value; the stored value is only re-pushed into ProseMirror when it changes\n * externally (locale switch, reset, compare) and is not already equivalent to what\n * is on screen. On edit, output is pruned to the lean storage convention\n * ({@link normalizeEditorDoc}) and — crucially — when an edit lands the document back\n * on its stored meaning, the *exact stored value* is re-emitted so the field never\n * shows a spurious dirty state (the same \"commit-nothing-when-equivalent\" contract\n * the canvas inline editor uses).\n *\n * The image and component-embed pickers are owned here (not the toolbar) so both the\n * toolbar buttons and the `/` slash menu open the same modal — one insertion path.\n */\nexport function RichTextEditor({ value, onChange, readOnly = false, id, allow }: RichTextEditorProps) {\n  // Ambient context for reference-aware insertion (null outside a collection view /\n  // asset backend — the editor then degrades to external links and no image insert).\n  const source = useOptionalCollectionView()\n  const assets = useOptionalAssets()\n\n  const [imageOpen, setImageOpen] = useState(false)\n  const [embedOpen, setEmbedOpen] = useState(false)\n  // EC-388: whether the editor is promoted to its roomy expand sheet.\n  const [expanded, setExpanded] = useState(false)\n\n  const canImage = assets != null\n  // The `allow`-gated components this field may embed — drives both the toolbar\n  // picker and the slash menu's direct per-component items (0.0.41).\n  const embeddable = useMemo(\n    () => listEmbeddable(allow, getStudioRegistry().registry.list()),\n    [allow],\n  )\n  const canEmbed = embeddable.length > 0\n\n  // Every linkable document across the workspace (excluding the asset rail — you link\n  // to content, not to raw files). Recomputed only when the source changes.\n  const linkTargets = useMemo<LinkTarget[]>(() => {\n    if (!source) return []\n    const out: LinkTarget[] = []\n    for (const collection of source.collections) {\n      if (collection.id === source.assetCollectionId) continue\n      const collectionLabel = localizedLabel(collection.form?.labelSingular, collection.id)\n      for (const doc of source.referenceCandidates(collection.id)) {\n        const ref = { collection: collection.id, id: doc.id }\n        out.push({ ref, label: source.titleOf(ref), collectionLabel })\n      }\n    }\n    return out\n  }, [source])\n\n  // Latest value/onChange, read inside the stable onUpdate closure.\n  const valueRef = useRef(value)\n  valueRef.current = value\n  const onChangeRef = useRef(onChange)\n  onChangeRef.current = onChange\n  // What we last emitted upward — lets the sync effect ignore our own echoes.\n  const lastEmitted = useRef<unknown>(value)\n\n  // Media openers for the toolbar + slash menu. setState fns are stable, so these\n  // stay valid for the life of the editor even though it's built once.\n  const openImage = canImage ? () => setImageOpen(true) : undefined\n  const openEmbed = canEmbed ? () => setEmbedOpen(true) : undefined\n\n  const editor = useEditor({\n    extensions: buildRichTextExtensions({\n      slash: {\n        onImage: openImage,\n        // Direct per-component slash items (0.0.41) — insert with manifest defaults\n        // and select, so the embed inspector opens onto the new node's props.\n        embed: canEmbed\n          ? {\n              components: embeddable,\n              insert: (ed, range, manifest) => {\n                ed.chain().focus().deleteRange(range).run()\n                insertComponentEmbed(ed, manifest, { select: true })\n              },\n            }\n          : undefined,\n      },\n    }),\n    content: toEditorDoc(value),\n    editable: !readOnly,\n    editorProps: {\n      attributes: { class: 'ec-rte-content', ...(id ? { id } : {}) },\n    },\n    onUpdate: ({ editor }) => {\n      const current = normalizeEditorDoc(editor.getJSON() as unknown as RichTextDoc)\n      const stored = valueRef.current\n      // Three outcomes: unchanged → re-emit the stored value verbatim (no dirty);\n      // emptied → clear the field (undefined); otherwise → the new stamped value.\n      const next = isEquivalentToStored(current, stored)\n        ? stored\n        : isEffectivelyEmpty(current)\n          ? undefined\n          : richTextValueFromDoc(current)\n      lastEmitted.current = next\n      onChangeRef.current(next)\n    },\n  })\n\n  // Reflect external value changes into the editor, never echoing our own emits.\n  useEffect(() => {\n    if (!editor) return\n    if (value === lastEmitted.current) return\n    const current = normalizeEditorDoc(editor.getJSON() as unknown as RichTextDoc)\n    if (isEquivalentToStored(current, value)) return\n    editor.commands.setContent(toEditorDoc(value), { emitUpdate: false })\n  }, [editor, value])\n\n  // Toggle editability without rebuilding the editor (preserves history/selection).\n  useEffect(() => {\n    editor?.setEditable(!readOnly)\n  }, [editor, readOnly])\n\n  if (!editor) return null\n\n  // The editing surface — the toolbar (which carries the expand toggle) + the\n  // editable content. Mounted inline OR inside the expand sheet, never both. TipTap\n  // preserves the editor instance across `EditorContent` remounts (its view DOM is\n  // carried onto the new element), so relocating this surface keeps ONE editor\n  // document and ONE value flow — the same instance, grown, not a second form.\n  const surface = (\n    <>\n      {!readOnly ? (\n        <RichTextToolbar\n          editor={editor}\n          targets={linkTargets}\n          onOpenImage={openImage}\n          onOpenEmbed={openEmbed}\n          expanded={expanded}\n          onToggleExpand={() => setExpanded((v) => !v)}\n        />\n      ) : null}\n      <EditorContent editor={editor} className={cn(expanded && 'min-h-0 flex-1 overflow-y-auto')} />\n    </>\n  )\n\n  return (\n    <div\n      className={cn(\n        'ec-rte overflow-hidden rounded-md border border-input bg-background shadow-sm',\n        'focus-within:border-ring focus-within:ring-2 focus-within:ring-ring/40',\n        readOnly && 'opacity-70',\n      )}\n    >\n      {expanded ? (\n        <>\n          <RichTextExpandPlaceholder onCollapse={() => setExpanded(false)} />\n          <RichTextExpandSheet onCollapse={() => setExpanded(false)}>{surface}</RichTextExpandSheet>\n        </>\n      ) : (\n        surface\n      )}\n      {canImage ? (\n        <AssetPicker\n          open={imageOpen}\n          onOpenChange={setImageOpen}\n          value={null}\n          accept=\"image/*\"\n          onChange={(assetId) => {\n            setImageOpen(false)\n            if (assetId) insertAssetImage(editor, assetId, assets)\n          }}\n        />\n      ) : null}\n      {canEmbed ? (\n        <EmbedPicker\n          open={embedOpen}\n          onOpenChange={setEmbedOpen}\n          allow={allow}\n          onSelect={(manifest) => insertComponentEmbed(editor, manifest, { select: true })}\n        />\n      ) : null}\n    </div>\n  )\n}\n\n/**\n * The inline strip shown in the field row while the editor is expanded into its\n * sheet (the real editing surface lives in the sheet then). Clicking it returns —\n * so the collapsed field never appears as a broken empty box.\n */\nexport function RichTextExpandPlaceholder({ onCollapse }: { onCollapse: () => void }) {\n  return (\n    <button\n      type=\"button\"\n      onClick={onCollapse}\n      className=\"flex min-h-[8rem] w-full items-center justify-center gap-2 px-3 py-6 text-sm text-muted-foreground transition-colors hover:bg-muted/40\"\n    >\n      <Minimize2 className=\"size-4\" />\n      <Text size=\"sm\" tone=\"muted\">\n        {translate('richText.expand.editingInSheet')}\n      </Text>\n    </button>\n  )\n}\n\n/**\n * EC-388 — the expanded editing surface: the SAME editor, grown into a roomy,\n * full-height right-anchored sheet where long prose (a privacy statement, a\n * Freeform block) is comfortable to edit. Since EC-392 it renders through the\n * shared {@link ExpandableSurface} primitive (portal-to-body, backdrop, header\n * close, layer-stacked Escape) at the shipped 820px width. It is the same edit\n * surface, not a second form: no save/cancel of its own — edits flow through the\n * editor's existing value contract, and it is lightly dismissible (Escape /\n * backdrop / the toolbar's collapse toggle / the header close), the\n * forms-never-modal spirit applied. The `children` are the live toolbar +\n * `EditorContent`; unmounting them here returns the editor inline. The asset\n * picker opened from the sheet's toolbar is a Radix dialog ABOVE the sheet — it\n * consumes Escape first (the sheet stays), per the EC-392 stacking rules.\n */\nfunction RichTextExpandSheet({\n  children,\n  onCollapse,\n}: {\n  children: ReactNode\n  onCollapse: () => void\n}) {\n  return (\n    <ExpandableSurface\n      title={translate('richText.expand.title')}\n      closeLabel={translate('richText.expand.collapse')}\n      width=\"min(820px, 92vw)\"\n      onDismiss={onCollapse}\n    >\n      <div className=\"ec-rte flex min-h-0 flex-1 flex-col overflow-hidden bg-background\">\n        {children}\n      </div>\n    </ExpandableSurface>\n  )\n}\n"]}

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

@@ -1,5 +1,16 @@
 import type { Editor } from '@tiptap/react';
 import type { LinkTarget } from './link-control.js';
+/**
+ * The toolbar container classes (EC-391). The load-bearing part is the height
+ * contract: `h-auto min-h-10` (NOT a fixed `h-10`/`h-11`) so that when the many
+ * controls wrap at narrow inspector widths the strip GROWS and reserves its real
+ * layout height — the editable content always starts below it. A fixed height plus
+ * `flex-wrap` was the bug: wrapped rows overflowed the locked box and painted over
+ * the prose, so the buttons were un-hittable. `py-1` only bites once wrapped (a
+ * single row is governed by `min-h-10` + `items-center`), padding the stacked rows.
+ * Pinned by `toolbar-layout.test.ts`.
+ */
+export declare const RICH_TEXT_TOOLBAR_CLASS = "h-auto min-h-10 flex-wrap gap-0.5 rounded-none border-x-0 border-t-0 bg-muted/30 px-1.5 py-1";
 interface RichTextToolbarProps {
     editor: Editor;
     /** Internal-link destinations across the workspace (empty ⇒ external-only). */
@@ -8,6 +19,10 @@ interface RichTextToolbarProps {
     onOpenImage?: () => void;
     /** Open the shared component-embed picker (omitted ⇒ no embed button). */
     onOpenEmbed?: () => void;
+    /** EC-388: whether the editor is currently in its expanded (sheet) surface. */
+    expanded?: boolean;
+    /** EC-388: toggle the expanded editing surface (omitted ⇒ no expand affordance). */
+    onToggleExpand?: () => void;
 }
 /**
  * The CMS rich-text toolbar (EC-314) — a compact, Notion-grade control strip that
@@ -15,5 +30,5 @@ interface RichTextToolbarProps {
  * pressed control always mirrors the caret. Every button prevents the default
  * mousedown so clicking it never steals the editor selection.
  */
-export declare function RichTextToolbar({ editor, targets, onOpenImage, onOpenEmbed }: RichTextToolbarProps): import("react").JSX.Element;
+export declare function RichTextToolbar({ editor, targets, onOpenImage, onOpenEmbed, expanded, onToggleExpand, }: RichTextToolbarProps): import("react").JSX.Element;
 export {};

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

@@ -1,19 +1,30 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEditorState } from '@tiptap/react';
-import { Blocks, Bold, ChevronDown, Code, ImagePlus, Italic, Pilcrow, Redo2, Strikethrough, Underline, Undo2, } from 'lucide-react';
+import { Blocks, Bold, ChevronDown, Code, ImagePlus, Italic, Maximize2, Minimize2, Pilcrow, Redo2, Strikethrough, Underline, Undo2, } from 'lucide-react';
 import { Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, Toolbar, ToolbarGroup, ToolbarSeparator, } from '@elytracms/studio/ui';
 import { translate } from '@elytracms/studio/lib/i18n';
 import { ToolbarButton } from './toolbar-button.js';
 import { LinkControl } from './link-control.js';
 import { toolbarStateFromEditor } from './toolbar-state.js';
 import { BLOCK_COMMANDS, isBlockCommandActive } from './block-commands.js';
+/**
+ * The toolbar container classes (EC-391). The load-bearing part is the height
+ * contract: `h-auto min-h-10` (NOT a fixed `h-10`/`h-11`) so that when the many
+ * controls wrap at narrow inspector widths the strip GROWS and reserves its real
+ * layout height — the editable content always starts below it. A fixed height plus
+ * `flex-wrap` was the bug: wrapped rows overflowed the locked box and painted over
+ * the prose, so the buttons were un-hittable. `py-1` only bites once wrapped (a
+ * single row is governed by `min-h-10` + `items-center`), padding the stacked rows.
+ * Pinned by `toolbar-layout.test.ts`.
+ */
+export const RICH_TEXT_TOOLBAR_CLASS = 'h-auto min-h-10 flex-wrap gap-0.5 rounded-none border-x-0 border-t-0 bg-muted/30 px-1.5 py-1';
 /**
  * The CMS rich-text toolbar (EC-314) — a compact, Notion-grade control strip that
  * reads its active/enabled state reactively from the editor (`useEditorState`) so a
  * pressed control always mirrors the caret. Every button prevents the default
  * mousedown so clicking it never steals the editor selection.
  */
-export function RichTextToolbar({ editor, targets, onOpenImage, onOpenEmbed }) {
+export function RichTextToolbar({ editor, targets, onOpenImage, onOpenEmbed, expanded = false, onToggleExpand, }) {
     // The selector delegates to a pure, NULL-SAFE projection: `useEditorState` runs
     // it through an external store that React can fire against a destroyed/pre-init
     // editor (concurrent teardown, the EC-322 lazy boundary), where `editor.can()`
@@ -26,6 +37,6 @@ export function RichTextToolbar({ editor, targets, onOpenImage, onOpenEmbed }) {
     const styleLabel = state.headingLevel != null
         ? translate('richText.heading', { level: state.headingLevel })
         : translate('richText.paragraph');
-    return (_jsxs(Toolbar, { className: "h-10 flex-wrap gap-0.5 rounded-none border-x-0 border-t-0 bg-muted/30 px-1.5", children: [_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { type: "button", variant: "ghost", size: "sm", className: "h-7 gap-1 px-2 font-medium", onMouseDown: (e) => e.preventDefault(), children: [styleLabel, _jsx(ChevronDown, { className: "size-3 opacity-60" })] }) }), _jsxs(DropdownMenuContent, { align: "start", className: "min-w-40", children: [_jsxs(DropdownMenuItem, { onSelect: () => editor.chain().focus().setParagraph().run(), children: [_jsx(Pilcrow, { className: "size-3.5" }), " ", translate('richText.paragraph')] }), [1, 2, 3].map((level) => (_jsxs(DropdownMenuItem, { onSelect: () => editor.chain().focus().toggleHeading({ level }).run(), children: [_jsxs("span", { className: "w-3.5 text-center text-xs font-semibold", children: ["H", level] }), ' ', translate('richText.heading', { level })] }, level)))] })] }), _jsx(ToolbarSeparator, {}), _jsxs(ToolbarGroup, { children: [_jsx(ToolbarButton, { active: state.bold, label: translate('richText.bold'), onClick: () => editor.chain().focus().toggleBold().run(), children: _jsx(Bold, { className: "size-3.5" }) }), _jsx(ToolbarButton, { active: state.italic, label: translate('richText.italic'), onClick: () => editor.chain().focus().toggleItalic().run(), children: _jsx(Italic, { className: "size-3.5" }) }), _jsx(ToolbarButton, { active: state.underline, label: translate('richText.underline'), onClick: () => editor.chain().focus().toggleUnderline().run(), children: _jsx(Underline, { className: "size-3.5" }) }), _jsx(ToolbarButton, { active: state.strike, label: translate('richText.strike'), onClick: () => editor.chain().focus().toggleStrike().run(), children: _jsx(Strikethrough, { className: "size-3.5" }) }), _jsx(ToolbarButton, { active: state.code, label: translate('richText.code'), onClick: () => editor.chain().focus().toggleCode().run(), children: _jsx(Code, { className: "size-3.5" }) })] }), _jsx(ToolbarSeparator, {}), _jsx(ToolbarGroup, { children: BLOCK_COMMANDS.map((cmd) => (_jsx(ToolbarButton, { active: isBlockCommandActive(cmd, state), label: translate(cmd.labelKey), onClick: () => cmd.chain(editor.chain().focus()).run(), children: _jsx(cmd.icon, { className: "size-3.5" }) }, cmd.key))) }), _jsx(ToolbarSeparator, {}), _jsxs(ToolbarGroup, { children: [_jsx(LinkControl, { editor: editor, targets: targets }), onOpenImage ? (_jsx(ToolbarButton, { label: translate('richText.image.add'), onClick: onOpenImage, children: _jsx(ImagePlus, { className: "size-3.5" }) })) : null, onOpenEmbed ? (_jsx(ToolbarButton, { label: translate('richText.embed.add'), onClick: onOpenEmbed, children: _jsx(Blocks, { className: "size-3.5" }) })) : null] }), _jsx("div", { className: "flex-1" }), _jsxs(ToolbarGroup, { children: [_jsx(ToolbarButton, { active: false, disabled: !state.canUndo, label: translate('richText.undo'), onClick: () => editor.chain().focus().undo().run(), children: _jsx(Undo2, { className: "size-3.5" }) }), _jsx(ToolbarButton, { active: false, disabled: !state.canRedo, label: translate('richText.redo'), onClick: () => editor.chain().focus().redo().run(), children: _jsx(Redo2, { className: "size-3.5" }) })] })] }));
+    return (_jsxs(Toolbar, { className: RICH_TEXT_TOOLBAR_CLASS, children: [_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { type: "button", variant: "ghost", size: "sm", className: "h-7 gap-1 px-2 font-medium", onMouseDown: (e) => e.preventDefault(), children: [styleLabel, _jsx(ChevronDown, { className: "size-3 opacity-60" })] }) }), _jsxs(DropdownMenuContent, { align: "start", className: "min-w-40", children: [_jsxs(DropdownMenuItem, { onSelect: () => editor.chain().focus().setParagraph().run(), children: [_jsx(Pilcrow, { className: "size-3.5" }), " ", translate('richText.paragraph')] }), [1, 2, 3].map((level) => (_jsxs(DropdownMenuItem, { onSelect: () => editor.chain().focus().toggleHeading({ level }).run(), children: [_jsxs("span", { className: "w-3.5 text-center text-xs font-semibold", children: ["H", level] }), ' ', translate('richText.heading', { level })] }, level)))] })] }), _jsx(ToolbarSeparator, {}), _jsxs(ToolbarGroup, { children: [_jsx(ToolbarButton, { active: state.bold, label: translate('richText.bold'), onClick: () => editor.chain().focus().toggleBold().run(), children: _jsx(Bold, { className: "size-3.5" }) }), _jsx(ToolbarButton, { active: state.italic, label: translate('richText.italic'), onClick: () => editor.chain().focus().toggleItalic().run(), children: _jsx(Italic, { className: "size-3.5" }) }), _jsx(ToolbarButton, { active: state.underline, label: translate('richText.underline'), onClick: () => editor.chain().focus().toggleUnderline().run(), children: _jsx(Underline, { className: "size-3.5" }) }), _jsx(ToolbarButton, { active: state.strike, label: translate('richText.strike'), onClick: () => editor.chain().focus().toggleStrike().run(), children: _jsx(Strikethrough, { className: "size-3.5" }) }), _jsx(ToolbarButton, { active: state.code, label: translate('richText.code'), onClick: () => editor.chain().focus().toggleCode().run(), children: _jsx(Code, { className: "size-3.5" }) })] }), _jsx(ToolbarSeparator, {}), _jsx(ToolbarGroup, { children: BLOCK_COMMANDS.map((cmd) => (_jsx(ToolbarButton, { active: isBlockCommandActive(cmd, state), label: translate(cmd.labelKey), onClick: () => cmd.chain(editor.chain().focus()).run(), children: _jsx(cmd.icon, { className: "size-3.5" }) }, cmd.key))) }), _jsx(ToolbarSeparator, {}), _jsxs(ToolbarGroup, { children: [_jsx(LinkControl, { editor: editor, targets: targets }), onOpenImage ? (_jsx(ToolbarButton, { label: translate('richText.image.add'), onClick: onOpenImage, children: _jsx(ImagePlus, { className: "size-3.5" }) })) : null, onOpenEmbed ? (_jsx(ToolbarButton, { label: translate('richText.embed.add'), onClick: onOpenEmbed, children: _jsx(Blocks, { className: "size-3.5" }) })) : null] }), _jsx("div", { className: "flex-1" }), _jsxs(ToolbarGroup, { children: [_jsx(ToolbarButton, { active: false, disabled: !state.canUndo, label: translate('richText.undo'), onClick: () => editor.chain().focus().undo().run(), children: _jsx(Undo2, { className: "size-3.5" }) }), _jsx(ToolbarButton, { active: false, disabled: !state.canRedo, label: translate('richText.redo'), onClick: () => editor.chain().focus().redo().run(), children: _jsx(Redo2, { className: "size-3.5" }) })] }), onToggleExpand ? (_jsxs(_Fragment, { children: [_jsx(ToolbarSeparator, {}), _jsx(ToolbarGroup, { children: _jsx(ToolbarButton, { active: expanded, label: expanded ? translate('richText.expand.collapse') : translate('richText.expand.expand'), onClick: onToggleExpand, children: expanded ? _jsx(Minimize2, { className: "size-3.5" }) : _jsx(Maximize2, { className: "size-3.5" }) }) })] })) : null] }));
 }
 //# sourceMappingURL=toolbar.js.map