@elytracms/studio 0.0.60 → 0.0.61

package/dist/components/ai/proposal-card.js

@@ -1,10 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useMemo, useState } from 'react';
-import { createPortal } from 'react-dom';
+import { useMemo, useState } from 'react';
 import { ArrowUpRight, Check, Maximize2, Sparkles, X } from 'lucide-react';
 import { diffDocuments } from '@elytracms/core/content';
 import { resolveLabel } from '@elytracms/core/cms-core';
-import { Badge, Button, Heading, Row, Spacer, Stack, Text } from '@elytracms/studio/ui';
+import { Badge, Button, ExpandableSurface, Row, Spacer, Stack, Text } from '@elytracms/studio/ui';
 import { translate } from '@elytracms/studio/lib/i18n';
 import { proposalDocuments } from '@elytracms/studio/lib/ai';
 import { useCms } from '../cms/cms-store.js';
@@ -83,27 +82,19 @@ export function ProposalCardView({ proposal, collection, source, onApply, onDisc
  * REVIEW surface, not a form, so it stays lightly dismissible (backdrop click /
  * Escape / close button) rather than a trapping modal — the forms-never-modal
  * spirit, applied. Presentation only: Apply/Discard call the same handlers the
- * card does; it changes no proposal data. Rendered through a portal so it
- * escapes the narrow AI panel; the card default keeps it closed, so the SSR
- * smoke path never mounts the portal.
+ * card does; it changes no proposal data. Since EC-392 it renders through the
+ * shared {@link ExpandableSurface} primitive (portal-to-body, backdrop, header
+ * close, layer-stacked Escape) at the shipped 720px width, so it escapes the
+ * narrow AI panel; the card default keeps it closed, so the SSR smoke path
+ * never mounts the portal.
  */
 function ProposalReviewSheet({ title, diff, collection, source, columnHeaders, status, onApply, onDiscard, onClose, }) {
-    useEffect(() => {
-        const onKey = (e) => {
-            if (e.key === 'Escape')
-                onClose();
-        };
-        window.addEventListener('keydown', onKey);
-        return () => window.removeEventListener('keydown', onKey);
-    }, [onClose]);
-    if (typeof document === 'undefined')
-        return null;
-    return createPortal(_jsxs("div", { className: "fixed inset-0 z-50 flex", children: [_jsx("div", { className: "flex-1 bg-background/70 backdrop-blur-sm", "aria-hidden": true, onClick: onClose }), _jsxs("aside", { role: "dialog", "aria-label": title, className: "flex h-full w-[min(720px,92vw)] flex-col border-l border-border bg-card shadow-2xl", children: [_jsxs(Row, { gap: "2", align: "center", className: "h-12 shrink-0 border-b border-border px-4", children: [_jsx(Sparkles, { className: "size-4 shrink-0 text-primary" }), _jsx(Heading, { level: 2, size: "h4", className: "min-w-0 truncate", children: title }), _jsx(Spacer, {}), _jsx(Button, { size: "icon-sm", variant: "ghost", onClick: onClose, title: translate('ai.proposal.collapseReview'), "aria-label": translate('ai.proposal.collapseReview'), children: _jsx(X, {}) })] }), _jsx("div", { className: "min-h-0 flex-1 overflow-y-auto p-4 sm:p-6", children: _jsx("div", { className: "mx-auto w-full max-w-3xl", children: _jsx(CollectionViewProvider, { source: source, children: _jsx(DocumentDiffView, { diff: diff, collection: collection, columnHeaders: columnHeaders }) }) }) }), status === 'pending' ? (_jsxs(Row, { gap: "2", align: "center", className: "shrink-0 border-t border-border px-4 py-3", children: [_jsx(Text, { size: "xs", tone: "muted", className: "min-w-0 flex-1", children: translate('ai.proposal.reviewHint') }), _jsxs(Button, { size: "sm", variant: "ghost", onClick: () => {
-                                    onDiscard();
-                                    onClose();
-                                }, children: [_jsx(X, {}), " ", translate('ai.proposal.discard')] }), _jsxs(Button, { size: "sm", onClick: () => {
-                                    onApply();
-                                    onClose();
-                                }, children: [_jsx(Check, {}), " ", translate('ai.proposal.apply')] })] })) : null] })] }), document.body);
+    return (_jsxs(ExpandableSurface, { title: title, closeLabel: translate('ai.proposal.collapseReview'), width: "min(720px, 92vw)", onDismiss: onClose, headerLeading: _jsx(Sparkles, { className: "size-4 shrink-0 text-primary" }), children: [_jsx("div", { className: "min-h-0 flex-1 overflow-y-auto p-4 sm:p-6", children: _jsx("div", { className: "mx-auto w-full max-w-3xl", children: _jsx(CollectionViewProvider, { source: source, children: _jsx(DocumentDiffView, { diff: diff, collection: collection, columnHeaders: columnHeaders }) }) }) }), status === 'pending' ? (_jsxs(Row, { gap: "2", align: "center", className: "shrink-0 border-t border-border px-4 py-3", children: [_jsx(Text, { size: "xs", tone: "muted", className: "min-w-0 flex-1", children: translate('ai.proposal.reviewHint') }), _jsxs(Button, { size: "sm", variant: "ghost", onClick: () => {
+                            onDiscard();
+                            onClose();
+                        }, children: [_jsx(X, {}), " ", translate('ai.proposal.discard')] }), _jsxs(Button, { size: "sm", onClick: () => {
+                            onApply();
+                            onClose();
+                        }, children: [_jsx(Check, {}), " ", translate('ai.proposal.apply')] })] })) : null] }));
 }
 //# sourceMappingURL=proposal-card.js.map

package/dist/components/ai/proposal-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"proposal-card.js","sourceRoot":"","sources":["../../../src/components/ai/proposal-card.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useMemo, useState } from 'react'\nimport { createPortal } from 'react-dom'\nimport { ArrowUpRight, Check, Maximize2, Sparkles, X } from 'lucide-react'\nimport { diffDocuments } from '@elytracms/core/content'\nimport type { DocumentDiff } from '@elytracms/core/content'\nimport { resolveLabel } from '@elytracms/core/cms-core'\nimport type { CollectionDef } from '@elytracms/core/cms-core'\nimport { Badge, Button, Heading, Row, Spacer, Stack, Text } from '@elytracms/studio/ui'\nimport { translate } from '@elytracms/studio/lib/i18n'\nimport { proposalDocuments } from '@elytracms/studio/lib/ai'\nimport type { ProposalOrigin, ProposalReview } from '@elytracms/studio/lib/ai'\nimport type { CollectionViewSource } from '@elytracms/studio/lib/collection-view/collection-view-source'\nimport { useCms } from '../cms/cms-store'\nimport { useCmsCollectionViewSource } from '../collection-view/cms-collection-view-source'\nimport { CollectionViewProvider } from '../collection-view/collection-view-context'\nimport { DocumentDiffView } from '../cms/document-diff-view'\n\n/**\n * The AI proposal review (EC-199, extended by EC-332/EC-378): a valid,\n * leash-compliant proposal the editor reviews as a DIFF (the shared EC-317\n * {@link DocumentDiffView} — never a second renderer) before applying it as a\n * draft or discarding it. Create proposals diff `empty-before` vs\n * `proposed-after`; translate/update proposals diff the EXISTING document\n * (old → new). Apply/discard are handled by the panel (the operations write +\n * provenance snapshot happen there); this card is the surface.\n *\n * {@link ProposalCard} is the CMS-wired shell; {@link ProposalCardView} is the\n * presentational card over an injected collection + view source (node-smoked\n * with `renderToStaticMarkup`, house pattern).\n */\n\n/** The card's origin-dependent captions (title + diff column headers). */\nexport function proposalCaptions(\n  origin: ProposalOrigin,\n  collectionLabel: string,\n): { title: string; unified: string; before: string; after: string } {\n  if (origin === 'translate') {\n    return {\n      title: translate('ai.translate.proposalTitle', { collection: collectionLabel }),\n      unified: translate('ai.proposal.diffUnified'),\n      before: translate('ai.translate.diffBefore'),\n      after: translate('ai.translate.diffAfter'),\n    }\n  }\n  if (origin === 'update') {\n    return {\n      title: translate('ai.update.proposalTitle', { collection: collectionLabel }),\n      unified: translate('ai.proposal.diffUnified'),\n      before: translate('ai.update.diffBefore'),\n      after: translate('ai.update.diffAfter'),\n    }\n  }\n  return {\n    title: translate('ai.proposal.title', { collection: collectionLabel }),\n    unified: translate('ai.proposal.diffUnified'),\n    before: translate('ai.proposal.diffBefore'),\n    after: translate('ai.proposal.diffAfter'),\n  }\n}\n\nexport function ProposalCard({\n  proposal,\n  onApply,\n  onDiscard,\n  onOpen,\n}: {\n  proposal: ProposalReview\n  onApply: () => void\n  onDiscard: () => void\n  onOpen: () => void\n}) {\n  const cms = useCms()\n  const collection = cms.getCollection(proposal.collection)\n  const source = useCmsCollectionViewSource(proposal.collection)\n  return (\n    <ProposalCardView\n      proposal={proposal}\n      collection={collection}\n      source={source}\n      onApply={onApply}\n      onDiscard={onDiscard}\n      onOpen={onOpen}\n    />\n  )\n}\n\n/** The presentational proposal card over an injected collection + view source. */\nexport function ProposalCardView({\n  proposal,\n  collection,\n  source,\n  onApply,\n  onDiscard,\n  onOpen,\n}: {\n  proposal: ProposalReview\n  collection: CollectionDef | undefined\n  source: CollectionViewSource | null\n  onApply: () => void\n  onDiscard: () => void\n  onOpen: () => void\n}) {\n  const diff = useMemo(() => {\n    if (!collection) return null\n    const { before, after } = proposalDocuments(proposal.patch, proposal.before)\n    return diffDocuments(collection, before, after)\n  }, [collection, proposal.patch, proposal.before])\n\n  const collectionLabel =\n    (collection?.form?.labelSingular && resolveLabel(collection.form.labelSingular)) ??\n    (collection?.form?.label && resolveLabel(collection.form.label)) ??\n    proposal.collection\n\n  const captions = proposalCaptions(proposal.origin, collectionLabel)\n  const applied = proposal.status === 'applied'\n  const rejected = proposal.status === 'rejected'\n  const columnHeaders = { unified: captions.unified, before: captions.before, after: captions.after }\n\n  // EC-382 — the expandable review surface: the sidebar card stays stacked; a\n  // roomy full-height sheet is offered for a large proposal (never a modal form).\n  const [reviewOpen, setReviewOpen] = useState(false)\n  const reviewable = diff !== null && source !== null\n\n  return (\n    <Stack\n      gap=\"2\"\n      className=\"overflow-hidden rounded-xl border border-border bg-card\"\n    >\n      <Row gap=\"2\" align=\"center\" className=\"border-b border-border/60 bg-muted/30 px-3 py-2\">\n        <Sparkles className=\"size-4 shrink-0 text-primary\" />\n        <Text size=\"sm\" weight=\"medium\" className=\"min-w-0 truncate\">\n          {captions.title}\n        </Text>\n        <Spacer />\n        {applied ? <Badge variant=\"success\">{translate('ai.proposal.applied')}</Badge> : null}\n        {rejected ? <Badge variant=\"outline\">{translate('ai.proposal.discarded')}</Badge> : null}\n        {reviewable ? (\n          <Button\n            size=\"icon-sm\"\n            variant=\"ghost\"\n            onClick={() => setReviewOpen(true)}\n            title={translate('ai.proposal.expandReview')}\n            aria-label={translate('ai.proposal.expandReview')}\n          >\n            <Maximize2 />\n          </Button>\n        ) : null}\n      </Row>\n\n      <div className=\"px-3\">\n        {reviewable ? (\n          <CollectionViewProvider source={source!}>\n            <DocumentDiffView\n              diff={diff!}\n              collection={collection!}\n              columnHeaders={columnHeaders}\n              layout=\"stacked\"\n            />\n          </CollectionViewProvider>\n        ) : (\n          <Text size=\"xs\" tone=\"muted\" className=\"py-2\">\n            {translate('ai.proposal.unavailable')}\n          </Text>\n        )}\n      </div>\n\n      <Row gap=\"2\" align=\"center\" className=\"border-t border-border/60 px-3 py-2\">\n        {proposal.status === 'pending' ? (\n          <>\n            <Text size=\"xs\" tone=\"muted\" className=\"min-w-0 flex-1\">\n              {translate('ai.proposal.reviewHint')}\n            </Text>\n            <Button size=\"sm\" variant=\"ghost\" onClick={onDiscard}>\n              <X /> {translate('ai.proposal.discard')}\n            </Button>\n            <Button size=\"sm\" onClick={onApply}>\n              <Check /> {translate('ai.proposal.apply')}\n            </Button>\n          </>\n        ) : applied ? (\n          <>\n            <Spacer />\n            <Button size=\"sm\" variant=\"outline\" onClick={onOpen}>\n              <ArrowUpRight /> {translate('ai.proposal.open')}\n            </Button>\n          </>\n        ) : (\n          <Text size=\"xs\" tone=\"muted\">\n            {translate('ai.proposal.discardedNote')}\n          </Text>\n        )}\n      </Row>\n\n      {reviewable && reviewOpen ? (\n        <ProposalReviewSheet\n          title={captions.title}\n          diff={diff!}\n          collection={collection!}\n          source={source!}\n          columnHeaders={columnHeaders}\n          status={proposal.status}\n          onApply={onApply}\n          onDiscard={onDiscard}\n          onClose={() => setReviewOpen(false)}\n        />\n      ) : null}\n    </Stack>\n  )\n}\n\n/**\n * The expandable review surface (EC-382): the proposal's diff promoted into a\n * roomy, full-height right-anchored sheet where the wide `grid` layout is\n * comfortable — for a large proposal the 320px sidebar can only cramp. It is a\n * REVIEW surface, not a form, so it stays lightly dismissible (backdrop click /\n * Escape / close button) rather than a trapping modal — the forms-never-modal\n * spirit, applied. Presentation only: Apply/Discard call the same handlers the\n * card does; it changes no proposal data. Rendered through a portal so it\n * escapes the narrow AI panel; the card default keeps it closed, so the SSR\n * smoke path never mounts the portal.\n */\nfunction ProposalReviewSheet({\n  title,\n  diff,\n  collection,\n  source,\n  columnHeaders,\n  status,\n  onApply,\n  onDiscard,\n  onClose,\n}: {\n  title: string\n  diff: DocumentDiff\n  collection: CollectionDef\n  source: CollectionViewSource\n  columnHeaders: { unified: string; before: string; after: string }\n  status: ProposalReview['status']\n  onApply: () => void\n  onDiscard: () => void\n  onClose: () => void\n}) {\n  useEffect(() => {\n    const onKey = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') onClose()\n    }\n    window.addEventListener('keydown', onKey)\n    return () => window.removeEventListener('keydown', onKey)\n  }, [onClose])\n\n  if (typeof document === 'undefined') return null\n\n  return createPortal(\n    <div className=\"fixed inset-0 z-50 flex\">\n      <div className=\"flex-1 bg-background/70 backdrop-blur-sm\" aria-hidden onClick={onClose} />\n      <aside\n        role=\"dialog\"\n        aria-label={title}\n        className=\"flex h-full w-[min(720px,92vw)] flex-col border-l border-border bg-card shadow-2xl\"\n      >\n        <Row gap=\"2\" align=\"center\" className=\"h-12 shrink-0 border-b border-border px-4\">\n          <Sparkles className=\"size-4 shrink-0 text-primary\" />\n          <Heading level={2} size=\"h4\" className=\"min-w-0 truncate\">\n            {title}\n          </Heading>\n          <Spacer />\n          <Button\n            size=\"icon-sm\"\n            variant=\"ghost\"\n            onClick={onClose}\n            title={translate('ai.proposal.collapseReview')}\n            aria-label={translate('ai.proposal.collapseReview')}\n          >\n            <X />\n          </Button>\n        </Row>\n\n        <div className=\"min-h-0 flex-1 overflow-y-auto p-4 sm:p-6\">\n          <div className=\"mx-auto w-full max-w-3xl\">\n            <CollectionViewProvider source={source}>\n              <DocumentDiffView diff={diff} collection={collection} columnHeaders={columnHeaders} />\n            </CollectionViewProvider>\n          </div>\n        </div>\n\n        {status === 'pending' ? (\n          <Row gap=\"2\" align=\"center\" className=\"shrink-0 border-t border-border px-4 py-3\">\n            <Text size=\"xs\" tone=\"muted\" className=\"min-w-0 flex-1\">\n              {translate('ai.proposal.reviewHint')}\n            </Text>\n            <Button\n              size=\"sm\"\n              variant=\"ghost\"\n              onClick={() => {\n                onDiscard()\n                onClose()\n              }}\n            >\n              <X /> {translate('ai.proposal.discard')}\n            </Button>\n            <Button\n              size=\"sm\"\n              onClick={() => {\n                onApply()\n                onClose()\n              }}\n            >\n              <Check /> {translate('ai.proposal.apply')}\n            </Button>\n          </Row>\n        ) : null}\n      </aside>\n    </div>,\n    document.body,\n  )\n}\n"]}
+{"version":3,"file":"proposal-card.js","sourceRoot":"","sources":["../../../src/components/ai/proposal-card.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useMemo, useState } from 'react'\nimport { ArrowUpRight, Check, Maximize2, Sparkles, X } from 'lucide-react'\nimport { diffDocuments } from '@elytracms/core/content'\nimport type { DocumentDiff } from '@elytracms/core/content'\nimport { resolveLabel } from '@elytracms/core/cms-core'\nimport type { CollectionDef } from '@elytracms/core/cms-core'\nimport { Badge, Button, ExpandableSurface, Row, Spacer, Stack, Text } from '@elytracms/studio/ui'\nimport { translate } from '@elytracms/studio/lib/i18n'\nimport { proposalDocuments } from '@elytracms/studio/lib/ai'\nimport type { ProposalOrigin, ProposalReview } from '@elytracms/studio/lib/ai'\nimport type { CollectionViewSource } from '@elytracms/studio/lib/collection-view/collection-view-source'\nimport { useCms } from '../cms/cms-store'\nimport { useCmsCollectionViewSource } from '../collection-view/cms-collection-view-source'\nimport { CollectionViewProvider } from '../collection-view/collection-view-context'\nimport { DocumentDiffView } from '../cms/document-diff-view'\n\n/**\n * The AI proposal review (EC-199, extended by EC-332/EC-378): a valid,\n * leash-compliant proposal the editor reviews as a DIFF (the shared EC-317\n * {@link DocumentDiffView} — never a second renderer) before applying it as a\n * draft or discarding it. Create proposals diff `empty-before` vs\n * `proposed-after`; translate/update proposals diff the EXISTING document\n * (old → new). Apply/discard are handled by the panel (the operations write +\n * provenance snapshot happen there); this card is the surface.\n *\n * {@link ProposalCard} is the CMS-wired shell; {@link ProposalCardView} is the\n * presentational card over an injected collection + view source (node-smoked\n * with `renderToStaticMarkup`, house pattern).\n */\n\n/** The card's origin-dependent captions (title + diff column headers). */\nexport function proposalCaptions(\n  origin: ProposalOrigin,\n  collectionLabel: string,\n): { title: string; unified: string; before: string; after: string } {\n  if (origin === 'translate') {\n    return {\n      title: translate('ai.translate.proposalTitle', { collection: collectionLabel }),\n      unified: translate('ai.proposal.diffUnified'),\n      before: translate('ai.translate.diffBefore'),\n      after: translate('ai.translate.diffAfter'),\n    }\n  }\n  if (origin === 'update') {\n    return {\n      title: translate('ai.update.proposalTitle', { collection: collectionLabel }),\n      unified: translate('ai.proposal.diffUnified'),\n      before: translate('ai.update.diffBefore'),\n      after: translate('ai.update.diffAfter'),\n    }\n  }\n  return {\n    title: translate('ai.proposal.title', { collection: collectionLabel }),\n    unified: translate('ai.proposal.diffUnified'),\n    before: translate('ai.proposal.diffBefore'),\n    after: translate('ai.proposal.diffAfter'),\n  }\n}\n\nexport function ProposalCard({\n  proposal,\n  onApply,\n  onDiscard,\n  onOpen,\n}: {\n  proposal: ProposalReview\n  onApply: () => void\n  onDiscard: () => void\n  onOpen: () => void\n}) {\n  const cms = useCms()\n  const collection = cms.getCollection(proposal.collection)\n  const source = useCmsCollectionViewSource(proposal.collection)\n  return (\n    <ProposalCardView\n      proposal={proposal}\n      collection={collection}\n      source={source}\n      onApply={onApply}\n      onDiscard={onDiscard}\n      onOpen={onOpen}\n    />\n  )\n}\n\n/** The presentational proposal card over an injected collection + view source. */\nexport function ProposalCardView({\n  proposal,\n  collection,\n  source,\n  onApply,\n  onDiscard,\n  onOpen,\n}: {\n  proposal: ProposalReview\n  collection: CollectionDef | undefined\n  source: CollectionViewSource | null\n  onApply: () => void\n  onDiscard: () => void\n  onOpen: () => void\n}) {\n  const diff = useMemo(() => {\n    if (!collection) return null\n    const { before, after } = proposalDocuments(proposal.patch, proposal.before)\n    return diffDocuments(collection, before, after)\n  }, [collection, proposal.patch, proposal.before])\n\n  const collectionLabel =\n    (collection?.form?.labelSingular && resolveLabel(collection.form.labelSingular)) ??\n    (collection?.form?.label && resolveLabel(collection.form.label)) ??\n    proposal.collection\n\n  const captions = proposalCaptions(proposal.origin, collectionLabel)\n  const applied = proposal.status === 'applied'\n  const rejected = proposal.status === 'rejected'\n  const columnHeaders = { unified: captions.unified, before: captions.before, after: captions.after }\n\n  // EC-382 — the expandable review surface: the sidebar card stays stacked; a\n  // roomy full-height sheet is offered for a large proposal (never a modal form).\n  const [reviewOpen, setReviewOpen] = useState(false)\n  const reviewable = diff !== null && source !== null\n\n  return (\n    <Stack\n      gap=\"2\"\n      className=\"overflow-hidden rounded-xl border border-border bg-card\"\n    >\n      <Row gap=\"2\" align=\"center\" className=\"border-b border-border/60 bg-muted/30 px-3 py-2\">\n        <Sparkles className=\"size-4 shrink-0 text-primary\" />\n        <Text size=\"sm\" weight=\"medium\" className=\"min-w-0 truncate\">\n          {captions.title}\n        </Text>\n        <Spacer />\n        {applied ? <Badge variant=\"success\">{translate('ai.proposal.applied')}</Badge> : null}\n        {rejected ? <Badge variant=\"outline\">{translate('ai.proposal.discarded')}</Badge> : null}\n        {reviewable ? (\n          <Button\n            size=\"icon-sm\"\n            variant=\"ghost\"\n            onClick={() => setReviewOpen(true)}\n            title={translate('ai.proposal.expandReview')}\n            aria-label={translate('ai.proposal.expandReview')}\n          >\n            <Maximize2 />\n          </Button>\n        ) : null}\n      </Row>\n\n      <div className=\"px-3\">\n        {reviewable ? (\n          <CollectionViewProvider source={source!}>\n            <DocumentDiffView\n              diff={diff!}\n              collection={collection!}\n              columnHeaders={columnHeaders}\n              layout=\"stacked\"\n            />\n          </CollectionViewProvider>\n        ) : (\n          <Text size=\"xs\" tone=\"muted\" className=\"py-2\">\n            {translate('ai.proposal.unavailable')}\n          </Text>\n        )}\n      </div>\n\n      <Row gap=\"2\" align=\"center\" className=\"border-t border-border/60 px-3 py-2\">\n        {proposal.status === 'pending' ? (\n          <>\n            <Text size=\"xs\" tone=\"muted\" className=\"min-w-0 flex-1\">\n              {translate('ai.proposal.reviewHint')}\n            </Text>\n            <Button size=\"sm\" variant=\"ghost\" onClick={onDiscard}>\n              <X /> {translate('ai.proposal.discard')}\n            </Button>\n            <Button size=\"sm\" onClick={onApply}>\n              <Check /> {translate('ai.proposal.apply')}\n            </Button>\n          </>\n        ) : applied ? (\n          <>\n            <Spacer />\n            <Button size=\"sm\" variant=\"outline\" onClick={onOpen}>\n              <ArrowUpRight /> {translate('ai.proposal.open')}\n            </Button>\n          </>\n        ) : (\n          <Text size=\"xs\" tone=\"muted\">\n            {translate('ai.proposal.discardedNote')}\n          </Text>\n        )}\n      </Row>\n\n      {reviewable && reviewOpen ? (\n        <ProposalReviewSheet\n          title={captions.title}\n          diff={diff!}\n          collection={collection!}\n          source={source!}\n          columnHeaders={columnHeaders}\n          status={proposal.status}\n          onApply={onApply}\n          onDiscard={onDiscard}\n          onClose={() => setReviewOpen(false)}\n        />\n      ) : null}\n    </Stack>\n  )\n}\n\n/**\n * The expandable review surface (EC-382): the proposal's diff promoted into a\n * roomy, full-height right-anchored sheet where the wide `grid` layout is\n * comfortable — for a large proposal the 320px sidebar can only cramp. It is a\n * REVIEW surface, not a form, so it stays lightly dismissible (backdrop click /\n * Escape / close button) rather than a trapping modal — the forms-never-modal\n * spirit, applied. Presentation only: Apply/Discard call the same handlers the\n * card does; it changes no proposal data. 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 720px width, so it escapes the\n * narrow AI panel; the card default keeps it closed, so the SSR smoke path\n * never mounts the portal.\n */\nfunction ProposalReviewSheet({\n  title,\n  diff,\n  collection,\n  source,\n  columnHeaders,\n  status,\n  onApply,\n  onDiscard,\n  onClose,\n}: {\n  title: string\n  diff: DocumentDiff\n  collection: CollectionDef\n  source: CollectionViewSource\n  columnHeaders: { unified: string; before: string; after: string }\n  status: ProposalReview['status']\n  onApply: () => void\n  onDiscard: () => void\n  onClose: () => void\n}) {\n  return (\n    <ExpandableSurface\n      title={title}\n      closeLabel={translate('ai.proposal.collapseReview')}\n      width=\"min(720px, 92vw)\"\n      onDismiss={onClose}\n      headerLeading={<Sparkles className=\"size-4 shrink-0 text-primary\" />}\n    >\n      <div className=\"min-h-0 flex-1 overflow-y-auto p-4 sm:p-6\">\n        <div className=\"mx-auto w-full max-w-3xl\">\n          <CollectionViewProvider source={source}>\n            <DocumentDiffView diff={diff} collection={collection} columnHeaders={columnHeaders} />\n          </CollectionViewProvider>\n        </div>\n      </div>\n\n      {status === 'pending' ? (\n        <Row gap=\"2\" align=\"center\" className=\"shrink-0 border-t border-border px-4 py-3\">\n          <Text size=\"xs\" tone=\"muted\" className=\"min-w-0 flex-1\">\n            {translate('ai.proposal.reviewHint')}\n          </Text>\n          <Button\n            size=\"sm\"\n            variant=\"ghost\"\n            onClick={() => {\n              onDiscard()\n              onClose()\n            }}\n          >\n            <X /> {translate('ai.proposal.discard')}\n          </Button>\n          <Button\n            size=\"sm\"\n            onClick={() => {\n              onApply()\n              onClose()\n            }}\n          >\n            <Check /> {translate('ai.proposal.apply')}\n          </Button>\n        </Row>\n      ) : null}\n    </ExpandableSurface>\n  )\n}\n"]}

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

@@ -1,9 +1,8 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useRef, useState } from 'react';
-import { createPortal } from 'react-dom';
 import { EditorContent, useEditor } from '@tiptap/react';
-import { Minimize2, X } from 'lucide-react';
-import { Button, Heading, Row, Spacer, Text } from '@elytracms/studio/ui';
+import { Minimize2 } from 'lucide-react';
+import { ExpandableSurface, Text } from '@elytracms/studio/ui';
 import { cn } from '@elytracms/studio/lib/utils';
 import { localizedLabel, translate } from '@elytracms/studio/lib/i18n';
 import { useOptionalCollectionView } from '../../collection-view/collection-view-context.js';
@@ -149,25 +148,18 @@ export function RichTextExpandPlaceholder({ onCollapse }) {
 /**
  * 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. Rendered through a portal (per EC-382's
- * `ProposalReviewSheet`) so it escapes narrow inspectors/sidebars and any
- * transformed ancestor. 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.
+ * 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, }) {
-    useEffect(() => {
-        const onKey = (e) => {
-            if (e.key === 'Escape')
-                onCollapse();
-        };
-        window.addEventListener('keydown', onKey);
-        return () => window.removeEventListener('keydown', onKey);
-    }, [onCollapse]);
-    if (typeof document === 'undefined')
-        return null;
-    return createPortal(_jsxs("div", { className: "fixed inset-0 z-50 flex", children: [_jsx("div", { className: "flex-1 bg-background/70 backdrop-blur-sm", "aria-hidden": true, onClick: onCollapse }), _jsxs("aside", { role: "dialog", "aria-label": translate('richText.expand.title'), className: "flex h-full w-[min(820px,92vw)] flex-col border-l border-border bg-card shadow-2xl", children: [_jsxs(Row, { gap: "2", align: "center", className: "h-12 shrink-0 border-b border-border px-4", children: [_jsx(Heading, { level: 2, size: "h4", className: "min-w-0 truncate", children: translate('richText.expand.title') }), _jsx(Spacer, {}), _jsx(Button, { size: "icon-sm", variant: "ghost", onClick: onCollapse, title: translate('richText.expand.collapse'), "aria-label": translate('richText.expand.collapse'), children: _jsx(X, {}) })] }), _jsx("div", { className: "ec-rte flex min-h-0 flex-1 flex-col overflow-hidden bg-background", children: children })] })] }), document.body);
+    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 type { ReactNode } from 'react'\nimport { createPortal } from 'react-dom'\nimport { EditorContent, useEditor } from '@tiptap/react'\nimport { Minimize2, X } from 'lucide-react'\nimport type { RichTextDoc } from '@elytracms/core/rich-text'\nimport { Button, Heading, Row, Spacer, 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. Rendered through a portal (per EC-382's\n * `ProposalReviewSheet`) so it escapes narrow inspectors/sidebars and any\n * transformed ancestor. It is the same edit surface, not a second form: no\n * save/cancel of its own — edits flow through the editor's existing value contract,\n * and it is lightly dismissible (Escape / backdrop / the toolbar's collapse toggle\n * / the header close), the forms-never-modal spirit applied. The `children` are the\n * live toolbar + `EditorContent`; unmounting them here returns the editor inline.\n */\nfunction RichTextExpandSheet({\n  children,\n  onCollapse,\n}: {\n  children: ReactNode\n  onCollapse: () => void\n}) {\n  useEffect(() => {\n    const onKey = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') onCollapse()\n    }\n    window.addEventListener('keydown', onKey)\n    return () => window.removeEventListener('keydown', onKey)\n  }, [onCollapse])\n\n  if (typeof document === 'undefined') return null\n\n  return createPortal(\n    <div className=\"fixed inset-0 z-50 flex\">\n      <div className=\"flex-1 bg-background/70 backdrop-blur-sm\" aria-hidden onClick={onCollapse} />\n      <aside\n        role=\"dialog\"\n        aria-label={translate('richText.expand.title')}\n        className=\"flex h-full w-[min(820px,92vw)] flex-col border-l border-border bg-card shadow-2xl\"\n      >\n        <Row gap=\"2\" align=\"center\" className=\"h-12 shrink-0 border-b border-border px-4\">\n          <Heading level={2} size=\"h4\" className=\"min-w-0 truncate\">\n            {translate('richText.expand.title')}\n          </Heading>\n          <Spacer />\n          <Button\n            size=\"icon-sm\"\n            variant=\"ghost\"\n            onClick={onCollapse}\n            title={translate('richText.expand.collapse')}\n            aria-label={translate('richText.expand.collapse')}\n          >\n            <X />\n          </Button>\n        </Row>\n        <div className=\"ec-rte flex min-h-0 flex-1 flex-col overflow-hidden bg-background\">\n          {children}\n        </div>\n      </aside>\n    </div>,\n    document.body,\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). */

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

@@ -7,6 +7,17 @@ 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
@@ -26,6 +37,6 @@ export function RichTextToolbar({ editor, targets, onOpenImage, onOpenEmbed, exp
     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" }) })] }), 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] }));
+    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

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

@@ -1 +1 @@
-{"version":3,"file":"toolbar.js","sourceRoot":"","sources":["../../../../src/components/cms/rich-text/toolbar.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEditorState } from '@tiptap/react'\nimport type { Editor } from '@tiptap/react'\nimport {\n  Blocks,\n  Bold,\n  ChevronDown,\n  Code,\n  ImagePlus,\n  Italic,\n  Maximize2,\n  Minimize2,\n  Pilcrow,\n  Redo2,\n  Strikethrough,\n  Underline,\n  Undo2,\n} from 'lucide-react'\nimport {\n  Button,\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n  Toolbar,\n  ToolbarGroup,\n  ToolbarSeparator,\n} from '@elytracms/studio/ui'\nimport { translate } from '@elytracms/studio/lib/i18n'\nimport { ToolbarButton } from './toolbar-button'\nimport { LinkControl } from './link-control'\nimport type { LinkTarget } from './link-control'\nimport { toolbarStateFromEditor } from './toolbar-state'\nimport { BLOCK_COMMANDS, isBlockCommandActive } from './block-commands'\n\ninterface RichTextToolbarProps {\n  editor: Editor\n  /** Internal-link destinations across the workspace (empty ⇒ external-only). */\n  targets: LinkTarget[]\n  /** Open the shared image picker (omitted ⇒ no image button). */\n  onOpenImage?: () => void\n  /** Open the shared component-embed picker (omitted ⇒ no embed button). */\n  onOpenEmbed?: () => void\n  /** EC-388: whether the editor is currently in its expanded (sheet) surface. */\n  expanded?: boolean\n  /** EC-388: toggle the expanded editing surface (omitted ⇒ no expand affordance). */\n  onToggleExpand?: () => void\n}\n\n/**\n * The CMS rich-text toolbar (EC-314) — a compact, Notion-grade control strip that\n * reads its active/enabled state reactively from the editor (`useEditorState`) so a\n * pressed control always mirrors the caret. Every button prevents the default\n * mousedown so clicking it never steals the editor selection.\n */\nexport function RichTextToolbar({\n  editor,\n  targets,\n  onOpenImage,\n  onOpenEmbed,\n  expanded = false,\n  onToggleExpand,\n}: RichTextToolbarProps) {\n  // The selector delegates to a pure, NULL-SAFE projection: `useEditorState` runs\n  // it through an external store that React can fire against a destroyed/pre-init\n  // editor (concurrent teardown, the EC-322 lazy boundary), where `editor.can()`\n  // would throw on TipTap v3's nulled `commandManager`. `toolbarStateFromEditor`\n  // returns the disabled shape in that window instead of crashing the toolbar.\n  const state = useEditorState({\n    editor,\n    selector: ({ editor }) => toolbarStateFromEditor(editor),\n  })\n\n  const styleLabel =\n    state.headingLevel != null\n      ? translate('richText.heading', { level: state.headingLevel })\n      : translate('richText.paragraph')\n\n  return (\n    <Toolbar className=\"h-10 flex-wrap gap-0.5 rounded-none border-x-0 border-t-0 bg-muted/30 px-1.5\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button\n            type=\"button\"\n            variant=\"ghost\"\n            size=\"sm\"\n            className=\"h-7 gap-1 px-2 font-medium\"\n            onMouseDown={(e) => e.preventDefault()}\n          >\n            {styleLabel}\n            <ChevronDown className=\"size-3 opacity-60\" />\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"start\" className=\"min-w-40\">\n          <DropdownMenuItem onSelect={() => editor.chain().focus().setParagraph().run()}>\n            <Pilcrow className=\"size-3.5\" /> {translate('richText.paragraph')}\n          </DropdownMenuItem>\n          {([1, 2, 3] as const).map((level) => (\n            <DropdownMenuItem\n              key={level}\n              onSelect={() => editor.chain().focus().toggleHeading({ level }).run()}\n            >\n              <span className=\"w-3.5 text-center text-xs font-semibold\">H{level}</span>{' '}\n              {translate('richText.heading', { level })}\n            </DropdownMenuItem>\n          ))}\n        </DropdownMenuContent>\n      </DropdownMenu>\n\n      <ToolbarSeparator />\n\n      <ToolbarGroup>\n        <ToolbarButton\n          active={state.bold}\n          label={translate('richText.bold')}\n          onClick={() => editor.chain().focus().toggleBold().run()}\n        >\n          <Bold className=\"size-3.5\" />\n        </ToolbarButton>\n        <ToolbarButton\n          active={state.italic}\n          label={translate('richText.italic')}\n          onClick={() => editor.chain().focus().toggleItalic().run()}\n        >\n          <Italic className=\"size-3.5\" />\n        </ToolbarButton>\n        <ToolbarButton\n          active={state.underline}\n          label={translate('richText.underline')}\n          onClick={() => editor.chain().focus().toggleUnderline().run()}\n        >\n          <Underline className=\"size-3.5\" />\n        </ToolbarButton>\n        <ToolbarButton\n          active={state.strike}\n          label={translate('richText.strike')}\n          onClick={() => editor.chain().focus().toggleStrike().run()}\n        >\n          <Strikethrough className=\"size-3.5\" />\n        </ToolbarButton>\n        <ToolbarButton\n          active={state.code}\n          label={translate('richText.code')}\n          onClick={() => editor.chain().focus().toggleCode().run()}\n        >\n          <Code className=\"size-3.5\" />\n        </ToolbarButton>\n      </ToolbarGroup>\n\n      <ToolbarSeparator />\n\n      <ToolbarGroup>\n        {/* The shared table (EC-328) — the SAME descriptors `buildSlashItems`\n            derives its bulletList/orderedList/blockquote/codeBlock/divider items from. */}\n        {BLOCK_COMMANDS.map((cmd) => (\n          <ToolbarButton\n            key={cmd.key}\n            active={isBlockCommandActive(cmd, state)}\n            label={translate(cmd.labelKey)}\n            onClick={() => cmd.chain(editor.chain().focus()).run()}\n          >\n            <cmd.icon className=\"size-3.5\" />\n          </ToolbarButton>\n        ))}\n      </ToolbarGroup>\n\n      <ToolbarSeparator />\n\n      <ToolbarGroup>\n        <LinkControl editor={editor} targets={targets} />\n        {onOpenImage ? (\n          <ToolbarButton label={translate('richText.image.add')} onClick={onOpenImage}>\n            <ImagePlus className=\"size-3.5\" />\n          </ToolbarButton>\n        ) : null}\n        {onOpenEmbed ? (\n          <ToolbarButton label={translate('richText.embed.add')} onClick={onOpenEmbed}>\n            <Blocks className=\"size-3.5\" />\n          </ToolbarButton>\n        ) : null}\n      </ToolbarGroup>\n\n      <div className=\"flex-1\" />\n\n      <ToolbarGroup>\n        <ToolbarButton\n          active={false}\n          disabled={!state.canUndo}\n          label={translate('richText.undo')}\n          onClick={() => editor.chain().focus().undo().run()}\n        >\n          <Undo2 className=\"size-3.5\" />\n        </ToolbarButton>\n        <ToolbarButton\n          active={false}\n          disabled={!state.canRedo}\n          label={translate('richText.redo')}\n          onClick={() => editor.chain().focus().redo().run()}\n        >\n          <Redo2 className=\"size-3.5\" />\n        </ToolbarButton>\n      </ToolbarGroup>\n\n      {/* EC-388: the expand/collapse affordance — moves with the toolbar into the\n          expanded sheet (where it reads as \"collapse\") and back to the inline\n          editor (where it reads as \"expand\"). Same editor instance, same value\n          flow; no separate save/cancel. */}\n      {onToggleExpand ? (\n        <>\n          <ToolbarSeparator />\n          <ToolbarGroup>\n            <ToolbarButton\n              active={expanded}\n              label={\n                expanded ? translate('richText.expand.collapse') : translate('richText.expand.expand')\n              }\n              onClick={onToggleExpand}\n            >\n              {expanded ? <Minimize2 className=\"size-3.5\" /> : <Maximize2 className=\"size-3.5\" />}\n            </ToolbarButton>\n          </ToolbarGroup>\n        </>\n      ) : null}\n    </Toolbar>\n  )\n}\n"]}
+{"version":3,"file":"toolbar.js","sourceRoot":"","sources":["../../../../src/components/cms/rich-text/toolbar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAE9C,OAAO,EACL,MAAM,EACN,IAAI,EACJ,WAAW,EACX,IAAI,EACJ,SAAS,EACT,MAAM,EACN,SAAS,EACT,SAAS,EACT,OAAO,EACP,KAAK,EACL,aAAa,EACb,SAAS,EACT,KAAK,GACN,MAAM,cAAc,CAAA;AACrB,OAAO,EACL,MAAM,EACN,YAAY,EACZ,mBAAmB,EACnB,gBAAgB,EAChB,mBAAmB,EACnB,OAAO,EACP,YAAY,EACZ,gBAAgB,GACjB,MAAM,sBAAsB,CAAA;AAC7B,OAAO,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAA;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAA;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAE5C,OAAO,EAAE,sBAAsB,EAAE,MAAM,iBAAiB,CAAA;AACxD,OAAO,EAAE,cAAc,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAA;AAEvE;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAClC,8FAA8F,CAAA;AAgBhG;;;;;GAKG;AACH,MAAM,UAAU,eAAe,CAAC,EAC9B,MAAM,EACN,OAAO,EACP,WAAW,EACX,WAAW,EACX,QAAQ,GAAG,KAAK,EAChB,cAAc,GACO;IACrB,gFAAgF;IAChF,gFAAgF;IAChF,+EAA+E;IAC/E,+EAA+E;IAC/E,6EAA6E;IAC7E,MAAM,KAAK,GAAG,cAAc,CAAC;QAC3B,MAAM;QACN,QAAQ,EAAE,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,sBAAsB,CAAC,MAAM,CAAC;KACzD,CAAC,CAAA;IAEF,MAAM,UAAU,GACd,KAAK,CAAC,YAAY,IAAI,IAAI;QACxB,CAAC,CAAC,SAAS,CAAC,kBAAkB,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,YAAY,EAAE,CAAC;QAC9D,CAAC,CAAC,SAAS,CAAC,oBAAoB,CAAC,CAAA;IAErC,OAAO,CACL,MAAC,OAAO,IAAC,SAAS,EAAE,uBAAuB,aACzC,MAAC,YAAY,eACX,KAAC,mBAAmB,IAAC,OAAO,kBAC1B,MAAC,MAAM,IACL,IAAI,EAAC,QAAQ,EACb,OAAO,EAAC,OAAO,EACf,IAAI,EAAC,IAAI,EACT,SAAS,EAAC,4BAA4B,EACtC,WAAW,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,EAAE,aAErC,UAAU,EACX,KAAC,WAAW,IAAC,SAAS,EAAC,mBAAmB,GAAG,IACtC,GACW,EACtB,MAAC,mBAAmB,IAAC,KAAK,EAAC,OAAO,EAAC,SAAS,EAAC,UAAU,aACrD,MAAC,gBAAgB,IAAC,QAAQ,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,KAAK,EAAE,CAAC,YAAY,EAAE,CAAC,GAAG,EAAE,aAC3E,KAAC,OAAO,IAAC,SAAS,EAAC,UAAU,GAAG,OAAE,SAAS,CAAC,oBAAoB,CAAC,IAChD,EACjB,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAW,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CACnC,MAAC,gBAAgB,IAEf,QAAQ,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,KAAK,EAAE,CAAC,aAAa,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,GAAG,EAAE,aAErE,gBAAM,SAAS,EAAC,yCAAyC,kBAAG,KAAK,IAAQ,EAAC,GAAG,EAC5E,SAAS,CAAC,kBAAkB,EAAE,EAAE,KAAK,EAAE,CAAC,KAJpC,KAAK,CAKO,CACpB,CAAC,IACkB,IACT,EAEf,KAAC,gBAAgB,KAAG,EAEpB,MAAC,YAAY,eACX,KAAC,aAAa,IACZ,MAAM,EAAE,KAAK,CAAC,IAAI,EAClB,KAAK,EAAE,SAAS,CAAC,eAAe,CAAC,EACjC,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,KAAK,EAAE,CAAC,UAAU,EAAE,CAAC,GAAG,EAAE,YAExD,KAAC,IAAI,IAAC,SAAS,EAAC,UAAU,GAAG,GACf,EAChB,KAAC,aAAa,IACZ,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,KAAK,EAAE,SAAS,CAAC,iBAAiB,CAAC,EACnC,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,KAAK,EAAE,CAAC,YAAY,EAAE,CAAC,GAAG,EAAE,YAE1D,KAAC,MAAM,IAAC,SAAS,EAAC,UAAU,GAAG,GACjB,EAChB,KAAC,aAAa,IACZ,MAAM,EAAE,KAAK,CAAC,SAAS,EACvB,KAAK,EAAE,SAAS,CAAC,oBAAoB,CAAC,EACtC,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,KAAK,EAAE,CAAC,eAAe,EAAE,CAAC,GAAG,EAAE,YAE7D,KAAC,SAAS,IAAC,SAAS,EAAC,UAAU,GAAG,GACpB,EAChB,KAAC,aAAa,IACZ,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,KAAK,EAAE,SAAS,CAAC,iBAAiB,CAAC,EACnC,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,KAAK,EAAE,CAAC,YAAY,EAAE,CAAC,GAAG,EAAE,YAE1D,KAAC,aAAa,IAAC,SAAS,EAAC,UAAU,GAAG,GACxB,EAChB,KAAC,aAAa,IACZ,MAAM,EAAE,KAAK,CAAC,IAAI,EAClB,KAAK,EAAE,SAAS,CAAC,eAAe,CAAC,EACjC,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,KAAK,EAAE,CAAC,UAAU,EAAE,CAAC,GAAG,EAAE,YAExD,KAAC,IAAI,IAAC,SAAS,EAAC,UAAU,GAAG,GACf,IACH,EAEf,KAAC,gBAAgB,KAAG,EAEpB,KAAC,YAAY,cAGV,cAAc,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAC3B,KAAC,aAAa,IAEZ,MAAM,EAAE,oBAAoB,CAAC,GAAG,EAAE,KAAK,CAAC,EACxC,KAAK,EAAE,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,EAC9B,OAAO,EAAE,GAAG,EAAE,CAAC,GAAG,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,KAAK,EAAE,CAAC,CAAC,GAAG,EAAE,YAEtD,KAAC,GAAG,CAAC,IAAI,IAAC,SAAS,EAAC,UAAU,GAAG,IAL5B,GAAG,CAAC,GAAG,CAME,CACjB,CAAC,GACW,EAEf,KAAC,gBAAgB,KAAG,EAEpB,MAAC,YAAY,eACX,KAAC,WAAW,IAAC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,GAAI,EAChD,WAAW,CAAC,CAAC,CAAC,CACb,KAAC,aAAa,IAAC,KAAK,EAAE,SAAS,CAAC,oBAAoB,CAAC,EAAE,OAAO,EAAE,WAAW,YACzE,KAAC,SAAS,IAAC,SAAS,EAAC,UAAU,GAAG,GACpB,CACjB,CAAC,CAAC,CAAC,IAAI,EACP,WAAW,CAAC,CAAC,CAAC,CACb,KAAC,aAAa,IAAC,KAAK,EAAE,SAAS,CAAC,oBAAoB,CAAC,EAAE,OAAO,EAAE,WAAW,YACzE,KAAC,MAAM,IAAC,SAAS,EAAC,UAAU,GAAG,GACjB,CACjB,CAAC,CAAC,CAAC,IAAI,IACK,EAEf,cAAK,SAAS,EAAC,QAAQ,GAAG,EAE1B,MAAC,YAAY,eACX,KAAC,aAAa,IACZ,MAAM,EAAE,KAAK,EACb,QAAQ,EAAE,CAAC,KAAK,CAAC,OAAO,EACxB,KAAK,EAAE,SAAS,CAAC,eAAe,CAAC,EACjC,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,KAAK,EAAE,CAAC,IAAI,EAAE,CAAC,GAAG,EAAE,YAElD,KAAC,KAAK,IAAC,SAAS,EAAC,UAAU,GAAG,GAChB,EAChB,KAAC,aAAa,IACZ,MAAM,EAAE,KAAK,EACb,QAAQ,EAAE,CAAC,KAAK,CAAC,OAAO,EACxB,KAAK,EAAE,SAAS,CAAC,eAAe,CAAC,EACjC,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,KAAK,EAAE,CAAC,IAAI,EAAE,CAAC,GAAG,EAAE,YAElD,KAAC,KAAK,IAAC,SAAS,EAAC,UAAU,GAAG,GAChB,IACH,EAMd,cAAc,CAAC,CAAC,CAAC,CAChB,8BACE,KAAC,gBAAgB,KAAG,EACpB,KAAC,YAAY,cACX,KAAC,aAAa,IACZ,MAAM,EAAE,QAAQ,EAChB,KAAK,EACH,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,0BAA0B,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,wBAAwB,CAAC,EAExF,OAAO,EAAE,cAAc,YAEtB,QAAQ,CAAC,CAAC,CAAC,KAAC,SAAS,IAAC,SAAS,EAAC,UAAU,GAAG,CAAC,CAAC,CAAC,KAAC,SAAS,IAAC,SAAS,EAAC,UAAU,GAAG,GACrE,GACH,IACd,CACJ,CAAC,CAAC,CAAC,IAAI,IACA,CACX,CAAA;AACH,CAAC","sourcesContent":["import { useEditorState } from '@tiptap/react'\nimport type { Editor } from '@tiptap/react'\nimport {\n  Blocks,\n  Bold,\n  ChevronDown,\n  Code,\n  ImagePlus,\n  Italic,\n  Maximize2,\n  Minimize2,\n  Pilcrow,\n  Redo2,\n  Strikethrough,\n  Underline,\n  Undo2,\n} from 'lucide-react'\nimport {\n  Button,\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n  Toolbar,\n  ToolbarGroup,\n  ToolbarSeparator,\n} from '@elytracms/studio/ui'\nimport { translate } from '@elytracms/studio/lib/i18n'\nimport { ToolbarButton } from './toolbar-button'\nimport { LinkControl } from './link-control'\nimport type { LinkTarget } from './link-control'\nimport { toolbarStateFromEditor } from './toolbar-state'\nimport { BLOCK_COMMANDS, isBlockCommandActive } from './block-commands'\n\n/**\n * The toolbar container classes (EC-391). The load-bearing part is the height\n * contract: `h-auto min-h-10` (NOT a fixed `h-10`/`h-11`) so that when the many\n * controls wrap at narrow inspector widths the strip GROWS and reserves its real\n * layout height — the editable content always starts below it. A fixed height plus\n * `flex-wrap` was the bug: wrapped rows overflowed the locked box and painted over\n * the prose, so the buttons were un-hittable. `py-1` only bites once wrapped (a\n * single row is governed by `min-h-10` + `items-center`), padding the stacked rows.\n * Pinned by `toolbar-layout.test.ts`.\n */\nexport const RICH_TEXT_TOOLBAR_CLASS =\n  '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'\n\ninterface RichTextToolbarProps {\n  editor: Editor\n  /** Internal-link destinations across the workspace (empty ⇒ external-only). */\n  targets: LinkTarget[]\n  /** Open the shared image picker (omitted ⇒ no image button). */\n  onOpenImage?: () => void\n  /** Open the shared component-embed picker (omitted ⇒ no embed button). */\n  onOpenEmbed?: () => void\n  /** EC-388: whether the editor is currently in its expanded (sheet) surface. */\n  expanded?: boolean\n  /** EC-388: toggle the expanded editing surface (omitted ⇒ no expand affordance). */\n  onToggleExpand?: () => void\n}\n\n/**\n * The CMS rich-text toolbar (EC-314) — a compact, Notion-grade control strip that\n * reads its active/enabled state reactively from the editor (`useEditorState`) so a\n * pressed control always mirrors the caret. Every button prevents the default\n * mousedown so clicking it never steals the editor selection.\n */\nexport function RichTextToolbar({\n  editor,\n  targets,\n  onOpenImage,\n  onOpenEmbed,\n  expanded = false,\n  onToggleExpand,\n}: RichTextToolbarProps) {\n  // The selector delegates to a pure, NULL-SAFE projection: `useEditorState` runs\n  // it through an external store that React can fire against a destroyed/pre-init\n  // editor (concurrent teardown, the EC-322 lazy boundary), where `editor.can()`\n  // would throw on TipTap v3's nulled `commandManager`. `toolbarStateFromEditor`\n  // returns the disabled shape in that window instead of crashing the toolbar.\n  const state = useEditorState({\n    editor,\n    selector: ({ editor }) => toolbarStateFromEditor(editor),\n  })\n\n  const styleLabel =\n    state.headingLevel != null\n      ? translate('richText.heading', { level: state.headingLevel })\n      : translate('richText.paragraph')\n\n  return (\n    <Toolbar className={RICH_TEXT_TOOLBAR_CLASS}>\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button\n            type=\"button\"\n            variant=\"ghost\"\n            size=\"sm\"\n            className=\"h-7 gap-1 px-2 font-medium\"\n            onMouseDown={(e) => e.preventDefault()}\n          >\n            {styleLabel}\n            <ChevronDown className=\"size-3 opacity-60\" />\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"start\" className=\"min-w-40\">\n          <DropdownMenuItem onSelect={() => editor.chain().focus().setParagraph().run()}>\n            <Pilcrow className=\"size-3.5\" /> {translate('richText.paragraph')}\n          </DropdownMenuItem>\n          {([1, 2, 3] as const).map((level) => (\n            <DropdownMenuItem\n              key={level}\n              onSelect={() => editor.chain().focus().toggleHeading({ level }).run()}\n            >\n              <span className=\"w-3.5 text-center text-xs font-semibold\">H{level}</span>{' '}\n              {translate('richText.heading', { level })}\n            </DropdownMenuItem>\n          ))}\n        </DropdownMenuContent>\n      </DropdownMenu>\n\n      <ToolbarSeparator />\n\n      <ToolbarGroup>\n        <ToolbarButton\n          active={state.bold}\n          label={translate('richText.bold')}\n          onClick={() => editor.chain().focus().toggleBold().run()}\n        >\n          <Bold className=\"size-3.5\" />\n        </ToolbarButton>\n        <ToolbarButton\n          active={state.italic}\n          label={translate('richText.italic')}\n          onClick={() => editor.chain().focus().toggleItalic().run()}\n        >\n          <Italic className=\"size-3.5\" />\n        </ToolbarButton>\n        <ToolbarButton\n          active={state.underline}\n          label={translate('richText.underline')}\n          onClick={() => editor.chain().focus().toggleUnderline().run()}\n        >\n          <Underline className=\"size-3.5\" />\n        </ToolbarButton>\n        <ToolbarButton\n          active={state.strike}\n          label={translate('richText.strike')}\n          onClick={() => editor.chain().focus().toggleStrike().run()}\n        >\n          <Strikethrough className=\"size-3.5\" />\n        </ToolbarButton>\n        <ToolbarButton\n          active={state.code}\n          label={translate('richText.code')}\n          onClick={() => editor.chain().focus().toggleCode().run()}\n        >\n          <Code className=\"size-3.5\" />\n        </ToolbarButton>\n      </ToolbarGroup>\n\n      <ToolbarSeparator />\n\n      <ToolbarGroup>\n        {/* The shared table (EC-328) — the SAME descriptors `buildSlashItems`\n            derives its bulletList/orderedList/blockquote/codeBlock/divider items from. */}\n        {BLOCK_COMMANDS.map((cmd) => (\n          <ToolbarButton\n            key={cmd.key}\n            active={isBlockCommandActive(cmd, state)}\n            label={translate(cmd.labelKey)}\n            onClick={() => cmd.chain(editor.chain().focus()).run()}\n          >\n            <cmd.icon className=\"size-3.5\" />\n          </ToolbarButton>\n        ))}\n      </ToolbarGroup>\n\n      <ToolbarSeparator />\n\n      <ToolbarGroup>\n        <LinkControl editor={editor} targets={targets} />\n        {onOpenImage ? (\n          <ToolbarButton label={translate('richText.image.add')} onClick={onOpenImage}>\n            <ImagePlus className=\"size-3.5\" />\n          </ToolbarButton>\n        ) : null}\n        {onOpenEmbed ? (\n          <ToolbarButton label={translate('richText.embed.add')} onClick={onOpenEmbed}>\n            <Blocks className=\"size-3.5\" />\n          </ToolbarButton>\n        ) : null}\n      </ToolbarGroup>\n\n      <div className=\"flex-1\" />\n\n      <ToolbarGroup>\n        <ToolbarButton\n          active={false}\n          disabled={!state.canUndo}\n          label={translate('richText.undo')}\n          onClick={() => editor.chain().focus().undo().run()}\n        >\n          <Undo2 className=\"size-3.5\" />\n        </ToolbarButton>\n        <ToolbarButton\n          active={false}\n          disabled={!state.canRedo}\n          label={translate('richText.redo')}\n          onClick={() => editor.chain().focus().redo().run()}\n        >\n          <Redo2 className=\"size-3.5\" />\n        </ToolbarButton>\n      </ToolbarGroup>\n\n      {/* EC-388: the expand/collapse affordance — moves with the toolbar into the\n          expanded sheet (where it reads as \"collapse\") and back to the inline\n          editor (where it reads as \"expand\"). Same editor instance, same value\n          flow; no separate save/cancel. */}\n      {onToggleExpand ? (\n        <>\n          <ToolbarSeparator />\n          <ToolbarGroup>\n            <ToolbarButton\n              active={expanded}\n              label={\n                expanded ? translate('richText.expand.collapse') : translate('richText.expand.expand')\n              }\n              onClick={onToggleExpand}\n            >\n              {expanded ? <Minimize2 className=\"size-3.5\" /> : <Maximize2 className=\"size-3.5\" />}\n            </ToolbarButton>\n          </ToolbarGroup>\n        </>\n      ) : null}\n    </Toolbar>\n  )\n}\n"]}

package/dist/ui/expandable-surface.d.ts

@@ -0,0 +1,48 @@
+import type { ReactNode } from 'react';
+export interface ExpandableSurfaceProps {
+    /** Heading text; doubles as the sheet's `aria-label`. */
+    title: string;
+    /** Accessible label + tooltip for the header close button (caller-translated). */
+    closeLabel: string;
+    /**
+     * CSS width of the sheet panel — callers keep their shipped widths
+     * (e.g. `min(820px, 92vw)` rich text, `min(720px, 92vw)` proposal review).
+     */
+    width: string;
+    /**
+     * Dismiss request: Escape (only while this surface is the topmost layer),
+     * backdrop click, or the header close button. The caller owns the open state.
+     */
+    onDismiss: () => void;
+    /** Optional leading header adornment (an icon) rendered before the title. */
+    headerLeading?: ReactNode;
+    /** Everything below the header. Callers own their scroll areas and footers. */
+    children: ReactNode;
+}
+/**
+ * ExpandableSurface (EC-392) — the tier-2 answer to "an inline surface outgrows
+ * its slot": the SAME surface grown into a roomy, full-height right-anchored
+ * sheet (rich-text expand editing EC-388, AI proposal review EC-382; future:
+ * object arrays, JSON/code fields). It is never a second form — no save/cancel
+ * semantics of its own (forms-never-modal) — and stays lightly dismissible:
+ * Escape, backdrop click, header close.
+ *
+ * Rendered through a `createPortal` to `document.body` so it escapes narrow
+ * inspectors/sidebars and any transformed ancestor; without a DOM (the
+ * `renderToStaticMarkup` smoke path) it renders `null`, so callers keep their
+ * sheets closed by default on SSR paths.
+ *
+ * Stacking (ratified semantics): all instances register on the shared layer
+ * stack; only the TOPMOST layer acts on Escape (backdrop ownership falls out of
+ * paint order — the topmost backdrop covers everything below it). Foreign layers
+ * above (the immediate case: the asset picker's Radix dialog opened from the
+ * expanded rich-text toolbar) are bridged via the event itself: Radix consumes
+ * Escape on the document capture phase and marks it `defaultPrevented`, which
+ * this surface treats as "handled above me" — so Escape closes the picker first
+ * and the sheet only on the next press.
+ *
+ * Motion: the sheet deliberately has NO open/close transition today, so there is
+ * nothing to gate on `prefers-reduced-motion` — if a transition is ever added it
+ * must be wrapped in `motion-safe:`.
+ */
+export declare function ExpandableSurface({ title, closeLabel, width, onDismiss, headerLeading, children, }: ExpandableSurfaceProps): import("react").ReactPortal | null;

package/dist/ui/expandable-surface.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { createPortal } from 'react-dom';
+import { X } from 'lucide-react';
+import { Button } from './button.js';
+import { Heading } from './typography.js';
+import { Row, Spacer } from './layout.js';
+import { createLayerStack } from './layer-stack.js';
+/**
+ * The ONE shared open-layer stack all {@link ExpandableSurface} instances
+ * coordinate through. The surfaces themselves are instance-per-caller (ratified:
+ * no singleton/global sheet slot — concurrent sheets from different features are
+ * legal); only the *ordering* is shared, so that the topmost open sheet owns
+ * Escape while the ones below stay open.
+ */
+const surfaceLayers = createLayerStack();
+/**
+ * ExpandableSurface (EC-392) — the tier-2 answer to "an inline surface outgrows
+ * its slot": the SAME surface grown into a roomy, full-height right-anchored
+ * sheet (rich-text expand editing EC-388, AI proposal review EC-382; future:
+ * object arrays, JSON/code fields). It is never a second form — no save/cancel
+ * semantics of its own (forms-never-modal) — and stays lightly dismissible:
+ * Escape, backdrop click, header close.
+ *
+ * Rendered through a `createPortal` to `document.body` so it escapes narrow
+ * inspectors/sidebars and any transformed ancestor; without a DOM (the
+ * `renderToStaticMarkup` smoke path) it renders `null`, so callers keep their
+ * sheets closed by default on SSR paths.
+ *
+ * Stacking (ratified semantics): all instances register on the shared layer
+ * stack; only the TOPMOST layer acts on Escape (backdrop ownership falls out of
+ * paint order — the topmost backdrop covers everything below it). Foreign layers
+ * above (the immediate case: the asset picker's Radix dialog opened from the
+ * expanded rich-text toolbar) are bridged via the event itself: Radix consumes
+ * Escape on the document capture phase and marks it `defaultPrevented`, which
+ * this surface treats as "handled above me" — so Escape closes the picker first
+ * and the sheet only on the next press.
+ *
+ * Motion: the sheet deliberately has NO open/close transition today, so there is
+ * nothing to gate on `prefers-reduced-motion` — if a transition is ever added it
+ * must be wrapped in `motion-safe:`.
+ */
+export function ExpandableSurface({ title, closeLabel, width, onDismiss, headerLeading, children, }) {
+    // Latest dismiss handler, read inside the once-per-mount listener.
+    const onDismissRef = useRef(onDismiss);
+    onDismissRef.current = onDismiss;
+    useEffect(() => {
+        const layer = surfaceLayers.push();
+        const onKey = (event) => {
+            if (event.key !== 'Escape')
+                return;
+            // A layer above already consumed this Escape — a Radix dialog (asset
+            // picker) preventDefaults on dismiss, and a sibling surface that handled
+            // it marks it the same way. Layers below stay open.
+            if (event.defaultPrevented)
+                return;
+            if (!surfaceLayers.isTop(layer))
+                return;
+            event.preventDefault();
+            onDismissRef.current();
+        };
+        window.addEventListener('keydown', onKey);
+        return () => {
+            window.removeEventListener('keydown', onKey);
+            surfaceLayers.remove(layer);
+        };
+    }, []);
+    if (typeof document === 'undefined')
+        return null;
+    return createPortal(_jsxs("div", { className: "fixed inset-0 z-50 flex", children: [_jsx("div", { className: "flex-1 bg-background/70 backdrop-blur-sm", "aria-hidden": true, onClick: onDismiss }), _jsxs("aside", { role: "dialog", "aria-label": title, style: { width }, className: "flex h-full flex-col border-l border-border bg-card shadow-2xl", children: [_jsxs(Row, { gap: "2", align: "center", className: "h-12 shrink-0 border-b border-border px-4", children: [headerLeading, _jsx(Heading, { level: 2, size: "h4", className: "min-w-0 truncate", children: title }), _jsx(Spacer, {}), _jsx(Button, { size: "icon-sm", variant: "ghost", onClick: onDismiss, title: closeLabel, "aria-label": closeLabel, children: _jsx(X, {}) })] }), children] })] }), document.body);
+}
+//# sourceMappingURL=expandable-surface.js.map

package/dist/ui/expandable-surface.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"expandable-surface.js","sourceRoot":"","sources":["../../src/ui/expandable-surface.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AACxC,OAAO,EAAE,CAAC,EAAE,MAAM,cAAc,CAAA;AAChC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAA;AACtC,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACtC,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAA;AAEhD;;;;;;GAMG;AACH,MAAM,aAAa,GAAG,gBAAgB,EAAE,CAAA;AAuBxC;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,UAAU,iBAAiB,CAAC,EAChC,KAAK,EACL,UAAU,EACV,KAAK,EACL,SAAS,EACT,aAAa,EACb,QAAQ,GACe;IACvB,mEAAmE;IACnE,MAAM,YAAY,GAAG,MAAM,CAAC,SAAS,CAAC,CAAA;IACtC,YAAY,CAAC,OAAO,GAAG,SAAS,CAAA;IAEhC,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,KAAK,GAAG,aAAa,CAAC,IAAI,EAAE,CAAA;QAClC,MAAM,KAAK,GAAG,CAAC,KAAoB,EAAE,EAAE;YACrC,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ;gBAAE,OAAM;YAClC,qEAAqE;YACrE,yEAAyE;YACzE,oDAAoD;YACpD,IAAI,KAAK,CAAC,gBAAgB;gBAAE,OAAM;YAClC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,KAAK,CAAC;gBAAE,OAAM;YACvC,KAAK,CAAC,cAAc,EAAE,CAAA;YACtB,YAAY,CAAC,OAAO,EAAE,CAAA;QACxB,CAAC,CAAA;QACD,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,KAAK,CAAC,CAAA;QACzC,OAAO,GAAG,EAAE;YACV,MAAM,CAAC,mBAAmB,CAAC,SAAS,EAAE,KAAK,CAAC,CAAA;YAC5C,aAAa,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;QAC7B,CAAC,CAAA;IACH,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,IAAI,OAAO,QAAQ,KAAK,WAAW;QAAE,OAAO,IAAI,CAAA;IAEhD,OAAO,YAAY,CACjB,eAAK,SAAS,EAAC,yBAAyB,aACtC,cAAK,SAAS,EAAC,0CAA0C,uBAAa,OAAO,EAAE,SAAS,GAAI,EAC5F,iBACE,IAAI,EAAC,QAAQ,gBACD,KAAK,EACjB,KAAK,EAAE,EAAE,KAAK,EAAE,EAChB,SAAS,EAAC,gEAAgE,aAE1E,MAAC,GAAG,IAAC,GAAG,EAAC,GAAG,EAAC,KAAK,EAAC,QAAQ,EAAC,SAAS,EAAC,2CAA2C,aAC9E,aAAa,EACd,KAAC,OAAO,IAAC,KAAK,EAAE,CAAC,EAAE,IAAI,EAAC,IAAI,EAAC,SAAS,EAAC,kBAAkB,YACtD,KAAK,GACE,EACV,KAAC,MAAM,KAAG,EACV,KAAC,MAAM,IACL,IAAI,EAAC,SAAS,EACd,OAAO,EAAC,OAAO,EACf,OAAO,EAAE,SAAS,EAClB,KAAK,EAAE,UAAU,gBACL,UAAU,YAEtB,KAAC,CAAC,KAAG,GACE,IACL,EACL,QAAQ,IACH,IACJ,EACN,QAAQ,CAAC,IAAI,CACd,CAAA;AACH,CAAC","sourcesContent":["import { useEffect, useRef } from 'react'\nimport type { ReactNode } from 'react'\nimport { createPortal } from 'react-dom'\nimport { X } from 'lucide-react'\nimport { Button } from './button'\nimport { Heading } from './typography'\nimport { Row, Spacer } from './layout'\nimport { createLayerStack } from './layer-stack'\n\n/**\n * The ONE shared open-layer stack all {@link ExpandableSurface} instances\n * coordinate through. The surfaces themselves are instance-per-caller (ratified:\n * no singleton/global sheet slot — concurrent sheets from different features are\n * legal); only the *ordering* is shared, so that the topmost open sheet owns\n * Escape while the ones below stay open.\n */\nconst surfaceLayers = createLayerStack()\n\nexport interface ExpandableSurfaceProps {\n  /** Heading text; doubles as the sheet's `aria-label`. */\n  title: string\n  /** Accessible label + tooltip for the header close button (caller-translated). */\n  closeLabel: string\n  /**\n   * CSS width of the sheet panel — callers keep their shipped widths\n   * (e.g. `min(820px, 92vw)` rich text, `min(720px, 92vw)` proposal review).\n   */\n  width: string\n  /**\n   * Dismiss request: Escape (only while this surface is the topmost layer),\n   * backdrop click, or the header close button. The caller owns the open state.\n   */\n  onDismiss: () => void\n  /** Optional leading header adornment (an icon) rendered before the title. */\n  headerLeading?: ReactNode\n  /** Everything below the header. Callers own their scroll areas and footers. */\n  children: ReactNode\n}\n\n/**\n * ExpandableSurface (EC-392) — the tier-2 answer to \"an inline surface outgrows\n * its slot\": the SAME surface grown into a roomy, full-height right-anchored\n * sheet (rich-text expand editing EC-388, AI proposal review EC-382; future:\n * object arrays, JSON/code fields). It is never a second form — no save/cancel\n * semantics of its own (forms-never-modal) — and stays lightly dismissible:\n * Escape, backdrop click, header close.\n *\n * Rendered through a `createPortal` to `document.body` so it escapes narrow\n * inspectors/sidebars and any transformed ancestor; without a DOM (the\n * `renderToStaticMarkup` smoke path) it renders `null`, so callers keep their\n * sheets closed by default on SSR paths.\n *\n * Stacking (ratified semantics): all instances register on the shared layer\n * stack; only the TOPMOST layer acts on Escape (backdrop ownership falls out of\n * paint order — the topmost backdrop covers everything below it). Foreign layers\n * above (the immediate case: the asset picker's Radix dialog opened from the\n * expanded rich-text toolbar) are bridged via the event itself: Radix consumes\n * Escape on the document capture phase and marks it `defaultPrevented`, which\n * this surface treats as \"handled above me\" — so Escape closes the picker first\n * and the sheet only on the next press.\n *\n * Motion: the sheet deliberately has NO open/close transition today, so there is\n * nothing to gate on `prefers-reduced-motion` — if a transition is ever added it\n * must be wrapped in `motion-safe:`.\n */\nexport function ExpandableSurface({\n  title,\n  closeLabel,\n  width,\n  onDismiss,\n  headerLeading,\n  children,\n}: ExpandableSurfaceProps) {\n  // Latest dismiss handler, read inside the once-per-mount listener.\n  const onDismissRef = useRef(onDismiss)\n  onDismissRef.current = onDismiss\n\n  useEffect(() => {\n    const layer = surfaceLayers.push()\n    const onKey = (event: KeyboardEvent) => {\n      if (event.key !== 'Escape') return\n      // A layer above already consumed this Escape — a Radix dialog (asset\n      // picker) preventDefaults on dismiss, and a sibling surface that handled\n      // it marks it the same way. Layers below stay open.\n      if (event.defaultPrevented) return\n      if (!surfaceLayers.isTop(layer)) return\n      event.preventDefault()\n      onDismissRef.current()\n    }\n    window.addEventListener('keydown', onKey)\n    return () => {\n      window.removeEventListener('keydown', onKey)\n      surfaceLayers.remove(layer)\n    }\n  }, [])\n\n  if (typeof document === 'undefined') return null\n\n  return createPortal(\n    <div className=\"fixed inset-0 z-50 flex\">\n      <div className=\"flex-1 bg-background/70 backdrop-blur-sm\" aria-hidden onClick={onDismiss} />\n      <aside\n        role=\"dialog\"\n        aria-label={title}\n        style={{ width }}\n        className=\"flex h-full flex-col border-l border-border bg-card shadow-2xl\"\n      >\n        <Row gap=\"2\" align=\"center\" className=\"h-12 shrink-0 border-b border-border px-4\">\n          {headerLeading}\n          <Heading level={2} size=\"h4\" className=\"min-w-0 truncate\">\n            {title}\n          </Heading>\n          <Spacer />\n          <Button\n            size=\"icon-sm\"\n            variant=\"ghost\"\n            onClick={onDismiss}\n            title={closeLabel}\n            aria-label={closeLabel}\n          >\n            <X />\n          </Button>\n        </Row>\n        {children}\n      </aside>\n    </div>,\n    document.body,\n  )\n}\n"]}

package/dist/ui/index.d.ts

@@ -11,6 +11,8 @@ export * from './collapsible-section.js';
 export * from './separator.js';
 export * from './toolbar.js';
 export * from './inspector.js';
+export * from './expandable-surface.js';
+export * from './layer-stack.js';
 export * from './dialog.js';
 export * from './dropdown-menu.js';
 export * from './popover.js';

package/dist/ui/index.js

@@ -11,6 +11,8 @@ export * from './collapsible-section.js';
 export * from './separator.js';
 export * from './toolbar.js';
 export * from './inspector.js';
+export * from './expandable-surface.js';
+export * from './layer-stack.js';
 export * from './dialog.js';
 export * from './dropdown-menu.js';
 export * from './popover.js';

package/dist/ui/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/ui/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA;AAC5B,cAAc,UAAU,CAAA;AACxB,cAAc,UAAU,CAAA;AACxB,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,QAAQ,CAAA;AACtB,cAAc,SAAS,CAAA;AACvB,cAAc,YAAY,CAAA;AAC1B,cAAc,uBAAuB,CAAA;AACrC,cAAc,aAAa,CAAA;AAC3B,cAAc,WAAW,CAAA;AACzB,cAAc,aAAa,CAAA;AAC3B,cAAc,UAAU,CAAA;AACxB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,WAAW,CAAA;AACzB,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,qBAAqB,CAAA","sourcesContent":["export * from './typography'\nexport * from './layout'\nexport * from './avatar'\nexport * from './button'\nexport * from './input'\nexport * from './badge'\nexport * from './card'\nexport * from './panel'\nexport * from './row-item'\nexport * from './collapsible-section'\nexport * from './separator'\nexport * from './toolbar'\nexport * from './inspector'\nexport * from './dialog'\nexport * from './dropdown-menu'\nexport * from './popover'\nexport * from './field'\nexport * from './toast'\nexport * from './segmented-control'\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/ui/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA;AAC5B,cAAc,UAAU,CAAA;AACxB,cAAc,UAAU,CAAA;AACxB,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,QAAQ,CAAA;AACtB,cAAc,SAAS,CAAA;AACvB,cAAc,YAAY,CAAA;AAC1B,cAAc,uBAAuB,CAAA;AACrC,cAAc,aAAa,CAAA;AAC3B,cAAc,WAAW,CAAA;AACzB,cAAc,aAAa,CAAA;AAC3B,cAAc,sBAAsB,CAAA;AACpC,cAAc,eAAe,CAAA;AAC7B,cAAc,UAAU,CAAA;AACxB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,WAAW,CAAA;AACzB,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,qBAAqB,CAAA","sourcesContent":["export * from './typography'\nexport * from './layout'\nexport * from './avatar'\nexport * from './button'\nexport * from './input'\nexport * from './badge'\nexport * from './card'\nexport * from './panel'\nexport * from './row-item'\nexport * from './collapsible-section'\nexport * from './separator'\nexport * from './toolbar'\nexport * from './inspector'\nexport * from './expandable-surface'\nexport * from './layer-stack'\nexport * from './dialog'\nexport * from './dropdown-menu'\nexport * from './popover'\nexport * from './field'\nexport * from './toast'\nexport * from './segmented-control'\n"]}

package/dist/ui/layer-stack.d.ts

@@ -0,0 +1,36 @@
+/**
+ * EC-392 — the open-layer stack behind stacked dismissible surfaces.
+ *
+ * A tiny, framework-free core managing which transient surfaces (expand-in-place
+ * sheets, {@link ExpandableSurface}) are currently open and — crucially — which of
+ * them is the TOPMOST. The ratified stacking contract (EC-392 design gate):
+ * multiple layers may be open at once; the topmost layer owns Escape and
+ * backdrop-dismiss; layers below stay open and take ownership only when everything
+ * above them is gone.
+ *
+ * The stack knows nothing about React or the DOM: layers register on mount
+ * ({@link LayerStack.push}), release on unmount ({@link LayerStack.remove}, which
+ * tolerates mid-stack removal — a lower layer may unmount while a higher one stays
+ * open), and consult {@link LayerStack.isTop} before acting on a dismiss gesture.
+ * Foreign layer systems (e.g. Radix dialogs, which run their own dismissable-layer
+ * stack) are bridged at the event level, not here: a Radix layer consumes Escape
+ * on the document capture phase and marks the event `defaultPrevented`, which the
+ * surface's handler treats as "a layer above me already handled this".
+ */
+/** An opaque handle identifying one open layer. Hold it; never inspect it. */
+export type LayerToken = object;
+export interface LayerStack {
+    /** Register a new topmost layer; returns its token. */
+    push(): LayerToken;
+    /**
+     * Remove a layer wherever it sits (topmost or mid-stack). Idempotent —
+     * removing an already-removed token is a no-op.
+     */
+    remove(token: LayerToken): void;
+    /** Whether this token is the current topmost open layer. */
+    isTop(token: LayerToken): boolean;
+    /** How many layers are open. */
+    readonly size: number;
+}
+/** Create an isolated layer stack (the shared instance lives with the surface). */
+export declare function createLayerStack(): LayerStack;

package/dist/ui/layer-stack.js

@@ -0,0 +1,42 @@
+/**
+ * EC-392 — the open-layer stack behind stacked dismissible surfaces.
+ *
+ * A tiny, framework-free core managing which transient surfaces (expand-in-place
+ * sheets, {@link ExpandableSurface}) are currently open and — crucially — which of
+ * them is the TOPMOST. The ratified stacking contract (EC-392 design gate):
+ * multiple layers may be open at once; the topmost layer owns Escape and
+ * backdrop-dismiss; layers below stay open and take ownership only when everything
+ * above them is gone.
+ *
+ * The stack knows nothing about React or the DOM: layers register on mount
+ * ({@link LayerStack.push}), release on unmount ({@link LayerStack.remove}, which
+ * tolerates mid-stack removal — a lower layer may unmount while a higher one stays
+ * open), and consult {@link LayerStack.isTop} before acting on a dismiss gesture.
+ * Foreign layer systems (e.g. Radix dialogs, which run their own dismissable-layer
+ * stack) are bridged at the event level, not here: a Radix layer consumes Escape
+ * on the document capture phase and marks the event `defaultPrevented`, which the
+ * surface's handler treats as "a layer above me already handled this".
+ */
+/** Create an isolated layer stack (the shared instance lives with the surface). */
+export function createLayerStack() {
+    const layers = [];
+    return {
+        push() {
+            const token = {};
+            layers.push(token);
+            return token;
+        },
+        remove(token) {
+            const index = layers.indexOf(token);
+            if (index !== -1)
+                layers.splice(index, 1);
+        },
+        isTop(token) {
+            return layers.length > 0 && layers[layers.length - 1] === token;
+        },
+        get size() {
+            return layers.length;
+        },
+    };
+}
+//# sourceMappingURL=layer-stack.js.map

package/dist/ui/layer-stack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"layer-stack.js","sourceRoot":"","sources":["../../src/ui/layer-stack.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AAmBH,mFAAmF;AACnF,MAAM,UAAU,gBAAgB;IAC9B,MAAM,MAAM,GAAiB,EAAE,CAAA;IAC/B,OAAO;QACL,IAAI;YACF,MAAM,KAAK,GAAe,EAAE,CAAA;YAC5B,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;YAClB,OAAO,KAAK,CAAA;QACd,CAAC;QACD,MAAM,CAAC,KAAK;YACV,MAAM,KAAK,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,CAAA;YACnC,IAAI,KAAK,KAAK,CAAC,CAAC;gBAAE,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CAAA;QAC3C,CAAC;QACD,KAAK,CAAC,KAAK;YACT,OAAO,MAAM,CAAC,MAAM,GAAG,CAAC,IAAI,MAAM,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,KAAK,KAAK,CAAA;QACjE,CAAC;QACD,IAAI,IAAI;YACN,OAAO,MAAM,CAAC,MAAM,CAAA;QACtB,CAAC;KACF,CAAA;AACH,CAAC","sourcesContent":["/**\n * EC-392 — the open-layer stack behind stacked dismissible surfaces.\n *\n * A tiny, framework-free core managing which transient surfaces (expand-in-place\n * sheets, {@link ExpandableSurface}) are currently open and — crucially — which of\n * them is the TOPMOST. The ratified stacking contract (EC-392 design gate):\n * multiple layers may be open at once; the topmost layer owns Escape and\n * backdrop-dismiss; layers below stay open and take ownership only when everything\n * above them is gone.\n *\n * The stack knows nothing about React or the DOM: layers register on mount\n * ({@link LayerStack.push}), release on unmount ({@link LayerStack.remove}, which\n * tolerates mid-stack removal — a lower layer may unmount while a higher one stays\n * open), and consult {@link LayerStack.isTop} before acting on a dismiss gesture.\n * Foreign layer systems (e.g. Radix dialogs, which run their own dismissable-layer\n * stack) are bridged at the event level, not here: a Radix layer consumes Escape\n * on the document capture phase and marks the event `defaultPrevented`, which the\n * surface's handler treats as \"a layer above me already handled this\".\n */\n\n/** An opaque handle identifying one open layer. Hold it; never inspect it. */\nexport type LayerToken = object\n\nexport interface LayerStack {\n  /** Register a new topmost layer; returns its token. */\n  push(): LayerToken\n  /**\n   * Remove a layer wherever it sits (topmost or mid-stack). Idempotent —\n   * removing an already-removed token is a no-op.\n   */\n  remove(token: LayerToken): void\n  /** Whether this token is the current topmost open layer. */\n  isTop(token: LayerToken): boolean\n  /** How many layers are open. */\n  readonly size: number\n}\n\n/** Create an isolated layer stack (the shared instance lives with the surface). */\nexport function createLayerStack(): LayerStack {\n  const layers: LayerToken[] = []\n  return {\n    push() {\n      const token: LayerToken = {}\n      layers.push(token)\n      return token\n    },\n    remove(token) {\n      const index = layers.indexOf(token)\n      if (index !== -1) layers.splice(index, 1)\n    },\n    isTop(token) {\n      return layers.length > 0 && layers[layers.length - 1] === token\n    },\n    get size() {\n      return layers.length\n    },\n  }\n}\n"]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elytracms/studio",
   "author": "finaldream <hi@finaldream.de>",
-  "version": "0.0.60",
+  "version": "0.0.61",
   "private": false,
   "description": "The Elytra studio engine (UI + lib + routes + data-only Convex schema) as an importable package. Extraction staged in EXTRACTION.md (EC-223); Stages 1-2 = UI primitives + router-free lib leaves.",
   "license": "MIT",
@@ -142,7 +142,7 @@
     "lucide-react": "^1.23.0",
     "tailwind-merge": "^3.6.0",
     "zod": "^4.4.3",
-    "@elytracms/core": "^0.0.60"
+    "@elytracms/core": "^0.0.61"
   },
   "peerDependencies": {
     "@tanstack/react-router": "^1.170.0",