@elytracms/studio 0.0.66 → 0.0.68

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

@@ -1,14 +1,10 @@
 import type { ReactNode } from 'react';
-export interface ExpandableSurfaceProps {
-    /** Heading text; doubles as the sheet's `aria-label`. */
+import type { SurfaceGeometryProps } from './surface-geometry.js';
+export type ExpandableSurfaceProps = {
+    /** Heading text; doubles as the surface'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.
@@ -18,31 +14,45 @@ export interface ExpandableSurfaceProps {
     headerLeading?: ReactNode;
     /** Everything below the header. Callers own their scroll areas and footers. */
     children: ReactNode;
-}
+} & SurfaceGeometryProps;
 /**
- * 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.
+ * ExpandableSurface (EC-392, geometry variants EC-431) — the tier-2 answer to
+ * "an inline surface outgrows its slot": the SAME surface grown into a roomy
+ * takeover. 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.
+ *
+ * Two geometries, one mechanic set (ratified AD-A, 2026-07-16):
+ *
+ * - `variant="stage"` — CENTERED, near-full height, width from a per-surface
+ *   preset (`prose` rich-text expand EC-431 / `grid` media browser EC-432 /
+ *   `form` embed inspector EC-430). Primary-activity surfaces live here; the
+ *   entrance is a subtle motion-safe scale/opacity grow from center, never an
+ *   edge slide.
+ * - `variant="side"` (default) — the right-anchored sheet, reserved for
+ *   genuinely peripheral review next to a primary activity; today exactly one
+ *   caller: the AI proposal review card. Shipped shape unchanged, no motion.
  *
  * 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.
+ * surfaces 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.
+ * paint order — the topmost full-viewport container covers everything below it,
+ * for both geometries). 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 surface only on the next press. A
+ * second ExpandableSurface above a stage rides the same stack (later mount →
+ * later in DOM → paints above; `isTop` hands it Escape) — the EC-432
+ * stage-above-stage case needs no new mechanics.
  *
- * 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:`.
+ * Motion: only the stage variant has an entrance transition, and it is entirely
+ * `motion-safe:`-gated (see `surface-geometry.ts`) — under
+ * `prefers-reduced-motion` the stage appears instantly. The side sheet keeps
+ * its shipped no-transition behavior.
  */
-export declare function ExpandableSurface({ title, closeLabel, width, onDismiss, headerLeading, children, }: ExpandableSurfaceProps): import("react").ReactPortal | null;
+export declare function ExpandableSurface(props: ExpandableSurfaceProps): import("react").ReactPortal | null;

package/dist/ui/expandable-surface.js

@@ -6,41 +6,61 @@ import { Button } from './button.js';
 import { Heading } from './typography.js';
 import { Row, Spacer } from './layout.js';
 import { createLayerStack } from './layer-stack.js';
+import { surfaceGeometry } from './surface-geometry.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.
+ * no singleton/global surface slot — concurrent surfaces from different features
+ * are legal); only the *ordering* is shared, so that the topmost open surface
+ * 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.
+ * ExpandableSurface (EC-392, geometry variants EC-431) — the tier-2 answer to
+ * "an inline surface outgrows its slot": the SAME surface grown into a roomy
+ * takeover. 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.
+ *
+ * Two geometries, one mechanic set (ratified AD-A, 2026-07-16):
+ *
+ * - `variant="stage"` — CENTERED, near-full height, width from a per-surface
+ *   preset (`prose` rich-text expand EC-431 / `grid` media browser EC-432 /
+ *   `form` embed inspector EC-430). Primary-activity surfaces live here; the
+ *   entrance is a subtle motion-safe scale/opacity grow from center, never an
+ *   edge slide.
+ * - `variant="side"` (default) — the right-anchored sheet, reserved for
+ *   genuinely peripheral review next to a primary activity; today exactly one
+ *   caller: the AI proposal review card. Shipped shape unchanged, no motion.
  *
  * 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.
+ * surfaces 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.
+ * paint order — the topmost full-viewport container covers everything below it,
+ * for both geometries). 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 surface only on the next press. A
+ * second ExpandableSurface above a stage rides the same stack (later mount →
+ * later in DOM → paints above; `isTop` hands it Escape) — the EC-432
+ * stage-above-stage case needs no new mechanics.
  *
- * 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:`.
+ * Motion: only the stage variant has an entrance transition, and it is entirely
+ * `motion-safe:`-gated (see `surface-geometry.ts`) — under
+ * `prefers-reduced-motion` the stage appears instantly. The side sheet keeps
+ * its shipped no-transition behavior.
  */
-export function ExpandableSurface({ title, closeLabel, width, onDismiss, headerLeading, children, }) {
+export function ExpandableSurface(props) {
+    const { title, closeLabel, onDismiss, headerLeading, children } = props;
+    const geometry = surfaceGeometry(props);
+    // The stage IS the primary activity while open — a <section>; the side sheet
+    // is complementary content next to it — an <aside>.
+    const Panel = props.variant === 'stage' ? 'section' : 'aside';
     // Latest dismiss handler, read inside the once-per-mount listener.
     const onDismissRef = useRef(onDismiss);
     onDismissRef.current = onDismiss;
@@ -67,6 +87,6 @@ export function ExpandableSurface({ title, closeLabel, width, onDismiss, headerL
     }, []);
     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);
+    return createPortal(_jsxs("div", { className: geometry.container, children: [_jsx("div", { className: geometry.backdrop, "aria-hidden": true, onClick: onDismiss }), _jsxs(Panel, { role: "dialog", "aria-label": title, style: geometry.panelStyle, className: geometry.panel, 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

@@ -1 +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"]}
+{"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;AAChD,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAA;AAGpD;;;;;;GAMG;AACH,MAAM,aAAa,GAAG,gBAAgB,EAAE,CAAA;AAkBxC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,MAAM,UAAU,iBAAiB,CAAC,KAA6B;IAC7D,MAAM,EAAE,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAA;IACvE,MAAM,QAAQ,GAAG,eAAe,CAAC,KAAK,CAAC,CAAA;IACvC,6EAA6E;IAC7E,oDAAoD;IACpD,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,KAAK,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,CAAA;IAE7D,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,EAAE,QAAQ,CAAC,SAAS,aAChC,cAAK,SAAS,EAAE,QAAQ,CAAC,QAAQ,uBAAc,OAAO,EAAE,SAAS,GAAI,EACrE,MAAC,KAAK,IACJ,IAAI,EAAC,QAAQ,gBACD,KAAK,EACjB,KAAK,EAAE,QAAQ,CAAC,UAAU,EAC1B,SAAS,EAAE,QAAQ,CAAC,KAAK,aAEzB,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'\nimport { surfaceGeometry } from './surface-geometry'\nimport type { SurfaceGeometryProps } from './surface-geometry'\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 surface slot — concurrent surfaces from different features\n * are legal); only the *ordering* is shared, so that the topmost open surface\n * owns Escape while the ones below stay open.\n */\nconst surfaceLayers = createLayerStack()\n\nexport type ExpandableSurfaceProps = {\n  /** Heading text; doubles as the surface's `aria-label`. */\n  title: string\n  /** Accessible label + tooltip for the header close button (caller-translated). */\n  closeLabel: 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} & SurfaceGeometryProps\n\n/**\n * ExpandableSurface (EC-392, geometry variants EC-431) — the tier-2 answer to\n * \"an inline surface outgrows its slot\": the SAME surface grown into a roomy\n * takeover. It is never a second form — no save/cancel semantics of its own\n * (forms-never-modal) — and stays lightly dismissible: Escape, backdrop click,\n * header close.\n *\n * Two geometries, one mechanic set (ratified AD-A, 2026-07-16):\n *\n * - `variant=\"stage\"` — CENTERED, near-full height, width from a per-surface\n *   preset (`prose` rich-text expand EC-431 / `grid` media browser EC-432 /\n *   `form` embed inspector EC-430). Primary-activity surfaces live here; the\n *   entrance is a subtle motion-safe scale/opacity grow from center, never an\n *   edge slide.\n * - `variant=\"side\"` (default) — the right-anchored sheet, reserved for\n *   genuinely peripheral review next to a primary activity; today exactly one\n *   caller: the AI proposal review card. Shipped shape unchanged, no motion.\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 * surfaces 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 full-viewport container covers everything below it,\n * for both geometries). Foreign layers above (the immediate case: the asset\n * picker's Radix dialog opened from the expanded rich-text toolbar) are bridged\n * via the event itself: Radix consumes Escape on the document capture phase and\n * marks it `defaultPrevented`, which this surface treats as \"handled above me\" —\n * so Escape closes the picker first and the surface only on the next press. A\n * second ExpandableSurface above a stage rides the same stack (later mount →\n * later in DOM → paints above; `isTop` hands it Escape) — the EC-432\n * stage-above-stage case needs no new mechanics.\n *\n * Motion: only the stage variant has an entrance transition, and it is entirely\n * `motion-safe:`-gated (see `surface-geometry.ts`) — under\n * `prefers-reduced-motion` the stage appears instantly. The side sheet keeps\n * its shipped no-transition behavior.\n */\nexport function ExpandableSurface(props: ExpandableSurfaceProps) {\n  const { title, closeLabel, onDismiss, headerLeading, children } = props\n  const geometry = surfaceGeometry(props)\n  // The stage IS the primary activity while open — a <section>; the side sheet\n  // is complementary content next to it — an <aside>.\n  const Panel = props.variant === 'stage' ? 'section' : 'aside'\n\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={geometry.container}>\n      <div className={geometry.backdrop} aria-hidden onClick={onDismiss} />\n      <Panel\n        role=\"dialog\"\n        aria-label={title}\n        style={geometry.panelStyle}\n        className={geometry.panel}\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      </Panel>\n    </div>,\n    document.body,\n  )\n}\n"]}

package/dist/ui/index.d.ts

@@ -12,6 +12,7 @@ export * from './separator.js';
 export * from './toolbar.js';
 export * from './inspector.js';
 export * from './expandable-surface.js';
+export * from './surface-geometry.js';
 export * from './layer-stack.js';
 export * from './dialog.js';
 export * from './dropdown-menu.js';

package/dist/ui/index.js

@@ -12,6 +12,7 @@ export * from './separator.js';
 export * from './toolbar.js';
 export * from './inspector.js';
 export * from './expandable-surface.js';
+export * from './surface-geometry.js';
 export * from './layer-stack.js';
 export * from './dialog.js';
 export * from './dropdown-menu.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,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"]}
+{"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,oBAAoB,CAAA;AAClC,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 './surface-geometry'\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/surface-geometry.d.ts

@@ -0,0 +1,68 @@
+import type { CSSProperties } from 'react';
+/**
+ * EC-431 (AD-A) — the pure geometry core for {@link ExpandableSurface}: which
+ * classes/width a surface mounts with, per variant. Extracted (the EC-391
+ * class-contract pattern) so the geometry is pinnable in the node test env,
+ * where the portal itself renders `null`.
+ *
+ * Two geometries, one mechanic set (portal-to-body, backdrop, header close,
+ * layer-stacked Escape):
+ *
+ * - `side` — the right-anchored sheet. Reserved for genuinely PERIPHERAL review
+ *   surfaces (a side panel semantically means "detail next to the primary
+ *   activity"); today exactly one: the AI proposal review card. Byte-for-byte
+ *   the EC-392 shipped shape — no visual change for that caller.
+ * - `stage` — the centered takeover for PRIMARY-ACTIVITY surfaces (ratified
+ *   AD-A, 2026-07-16): centered, near-full height, growing from center with a
+ *   subtle scale/opacity entrance — never an edge slide. Width comes from a
+ *   per-surface preset ({@link STAGE_WIDTHS}).
+ *
+ * Motion: only the stage has an entrance transition, and every animated class
+ * is `motion-safe:`-gated — under `prefers-reduced-motion` the stage appears
+ * instantly (pinned by `surface-geometry.test.ts`). The side sheet keeps its
+ * shipped no-transition behavior.
+ */
+/**
+ * The stage width presets — one per surface family (ratified AD-A). Consumers
+ * pick a preset, never a raw width, so stage surfaces stay mutually consistent:
+ *
+ * - `prose` — distraction-free writing (the rich-text expand, EC-431/AD-B). The
+ *   ratified `min(920px, 92vw)`; the CONTENT column inside is constrained
+ *   further (~70ch) by the caller — the stage being wider than the text is the
+ *   point, not a defect.
+ * - `grid` — large centered browsing grids (the EC-432 media browser).
+ * - `form` — a single-column form measure (the EC-430 embed inspector).
+ */
+export declare const STAGE_WIDTHS: {
+    readonly prose: "min(920px, 92vw)";
+    readonly grid: "min(1240px, 94vw)";
+    readonly form: "min(720px, 92vw)";
+};
+export type StageWidthPreset = keyof typeof STAGE_WIDTHS;
+/**
+ * The geometry-discriminating props ({@link ExpandableSurface} spreads these
+ * into its own): `side` callers keep passing their shipped CSS width; `stage`
+ * callers pick a preset.
+ */
+export type SurfaceGeometryProps = {
+    /** The right-anchored sheet (default) — peripheral review surfaces only. */
+    variant?: 'side';
+    /** CSS width of the sheet panel (callers keep their shipped widths). */
+    width: string;
+} | {
+    /** The centered stage — primary-activity surfaces (ratified AD-A). */
+    variant: 'stage';
+    /** Per-surface stage width preset. */
+    preset: StageWidthPreset;
+};
+export interface SurfaceGeometry {
+    /** The fixed full-viewport container. */
+    container: string;
+    /** The dismiss backdrop (paint order keeps it under the panel). */
+    backdrop: string;
+    /** The `role="dialog"` panel. */
+    panel: string;
+    /** Inline style carrying the resolved panel width (deterministic, no class scanning). */
+    panelStyle: CSSProperties;
+}
+export declare function surfaceGeometry(props: SurfaceGeometryProps): SurfaceGeometry;

package/dist/ui/surface-geometry.js

@@ -0,0 +1,61 @@
+/**
+ * EC-431 (AD-A) — the pure geometry core for {@link ExpandableSurface}: which
+ * classes/width a surface mounts with, per variant. Extracted (the EC-391
+ * class-contract pattern) so the geometry is pinnable in the node test env,
+ * where the portal itself renders `null`.
+ *
+ * Two geometries, one mechanic set (portal-to-body, backdrop, header close,
+ * layer-stacked Escape):
+ *
+ * - `side` — the right-anchored sheet. Reserved for genuinely PERIPHERAL review
+ *   surfaces (a side panel semantically means "detail next to the primary
+ *   activity"); today exactly one: the AI proposal review card. Byte-for-byte
+ *   the EC-392 shipped shape — no visual change for that caller.
+ * - `stage` — the centered takeover for PRIMARY-ACTIVITY surfaces (ratified
+ *   AD-A, 2026-07-16): centered, near-full height, growing from center with a
+ *   subtle scale/opacity entrance — never an edge slide. Width comes from a
+ *   per-surface preset ({@link STAGE_WIDTHS}).
+ *
+ * Motion: only the stage has an entrance transition, and every animated class
+ * is `motion-safe:`-gated — under `prefers-reduced-motion` the stage appears
+ * instantly (pinned by `surface-geometry.test.ts`). The side sheet keeps its
+ * shipped no-transition behavior.
+ */
+/**
+ * The stage width presets — one per surface family (ratified AD-A). Consumers
+ * pick a preset, never a raw width, so stage surfaces stay mutually consistent:
+ *
+ * - `prose` — distraction-free writing (the rich-text expand, EC-431/AD-B). The
+ *   ratified `min(920px, 92vw)`; the CONTENT column inside is constrained
+ *   further (~70ch) by the caller — the stage being wider than the text is the
+ *   point, not a defect.
+ * - `grid` — large centered browsing grids (the EC-432 media browser).
+ * - `form` — a single-column form measure (the EC-430 embed inspector).
+ */
+export const STAGE_WIDTHS = {
+    prose: 'min(920px, 92vw)',
+    grid: 'min(1240px, 94vw)',
+    form: 'min(720px, 92vw)',
+};
+export function surfaceGeometry(props) {
+    if (props.variant === 'stage') {
+        return {
+            // Near-full height falls out of the container padding: the panel is
+            // `h-full` inside the padded fixed container, so it always keeps a
+            // breathing gutter to every viewport edge.
+            container: 'fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-6',
+            backdrop: 'absolute inset-0 bg-background/70 backdrop-blur-sm motion-safe:animate-ec-stage-fade',
+            panel: 'relative flex h-full flex-col overflow-hidden rounded-xl border border-border bg-card shadow-2xl motion-safe:animate-ec-stage-in',
+            panelStyle: { width: STAGE_WIDTHS[props.preset] },
+        };
+    }
+    // The EC-392 shipped sheet shape, byte-for-byte — the proposal card must not
+    // change visually (ratified: side survives for peripheral review).
+    return {
+        container: 'fixed inset-0 z-50 flex',
+        backdrop: 'flex-1 bg-background/70 backdrop-blur-sm',
+        panel: 'flex h-full flex-col border-l border-border bg-card shadow-2xl',
+        panelStyle: { width: props.width },
+    };
+}
+//# sourceMappingURL=surface-geometry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"surface-geometry.js","sourceRoot":"","sources":["../../src/ui/surface-geometry.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,KAAK,EAAE,kBAAkB;IACzB,IAAI,EAAE,mBAAmB;IACzB,IAAI,EAAE,kBAAkB;CAChB,CAAA;AAkCV,MAAM,UAAU,eAAe,CAAC,KAA2B;IACzD,IAAI,KAAK,CAAC,OAAO,KAAK,OAAO,EAAE,CAAC;QAC9B,OAAO;YACL,oEAAoE;YACpE,mEAAmE;YACnE,2CAA2C;YAC3C,SAAS,EAAE,gEAAgE;YAC3E,QAAQ,EACN,sFAAsF;YACxF,KAAK,EACH,kIAAkI;YACpI,UAAU,EAAE,EAAE,KAAK,EAAE,YAAY,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE;SAClD,CAAA;IACH,CAAC;IACD,6EAA6E;IAC7E,mEAAmE;IACnE,OAAO;QACL,SAAS,EAAE,yBAAyB;QACpC,QAAQ,EAAE,0CAA0C;QACpD,KAAK,EAAE,gEAAgE;QACvE,UAAU,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE;KACnC,CAAA;AACH,CAAC","sourcesContent":["import type { CSSProperties } from 'react'\n\n/**\n * EC-431 (AD-A) — the pure geometry core for {@link ExpandableSurface}: which\n * classes/width a surface mounts with, per variant. Extracted (the EC-391\n * class-contract pattern) so the geometry is pinnable in the node test env,\n * where the portal itself renders `null`.\n *\n * Two geometries, one mechanic set (portal-to-body, backdrop, header close,\n * layer-stacked Escape):\n *\n * - `side` — the right-anchored sheet. Reserved for genuinely PERIPHERAL review\n *   surfaces (a side panel semantically means \"detail next to the primary\n *   activity\"); today exactly one: the AI proposal review card. Byte-for-byte\n *   the EC-392 shipped shape — no visual change for that caller.\n * - `stage` — the centered takeover for PRIMARY-ACTIVITY surfaces (ratified\n *   AD-A, 2026-07-16): centered, near-full height, growing from center with a\n *   subtle scale/opacity entrance — never an edge slide. Width comes from a\n *   per-surface preset ({@link STAGE_WIDTHS}).\n *\n * Motion: only the stage has an entrance transition, and every animated class\n * is `motion-safe:`-gated — under `prefers-reduced-motion` the stage appears\n * instantly (pinned by `surface-geometry.test.ts`). The side sheet keeps its\n * shipped no-transition behavior.\n */\n\n/**\n * The stage width presets — one per surface family (ratified AD-A). Consumers\n * pick a preset, never a raw width, so stage surfaces stay mutually consistent:\n *\n * - `prose` — distraction-free writing (the rich-text expand, EC-431/AD-B). The\n *   ratified `min(920px, 92vw)`; the CONTENT column inside is constrained\n *   further (~70ch) by the caller — the stage being wider than the text is the\n *   point, not a defect.\n * - `grid` — large centered browsing grids (the EC-432 media browser).\n * - `form` — a single-column form measure (the EC-430 embed inspector).\n */\nexport const STAGE_WIDTHS = {\n  prose: 'min(920px, 92vw)',\n  grid: 'min(1240px, 94vw)',\n  form: 'min(720px, 92vw)',\n} as const\n\nexport type StageWidthPreset = keyof typeof STAGE_WIDTHS\n\n/**\n * The geometry-discriminating props ({@link ExpandableSurface} spreads these\n * into its own): `side` callers keep passing their shipped CSS width; `stage`\n * callers pick a preset.\n */\nexport type SurfaceGeometryProps =\n  | {\n      /** The right-anchored sheet (default) — peripheral review surfaces only. */\n      variant?: 'side'\n      /** CSS width of the sheet panel (callers keep their shipped widths). */\n      width: string\n    }\n  | {\n      /** The centered stage — primary-activity surfaces (ratified AD-A). */\n      variant: 'stage'\n      /** Per-surface stage width preset. */\n      preset: StageWidthPreset\n    }\n\nexport interface SurfaceGeometry {\n  /** The fixed full-viewport container. */\n  container: string\n  /** The dismiss backdrop (paint order keeps it under the panel). */\n  backdrop: string\n  /** The `role=\"dialog\"` panel. */\n  panel: string\n  /** Inline style carrying the resolved panel width (deterministic, no class scanning). */\n  panelStyle: CSSProperties\n}\n\nexport function surfaceGeometry(props: SurfaceGeometryProps): SurfaceGeometry {\n  if (props.variant === 'stage') {\n    return {\n      // Near-full height falls out of the container padding: the panel is\n      // `h-full` inside the padded fixed container, so it always keeps a\n      // breathing gutter to every viewport edge.\n      container: 'fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-6',\n      backdrop:\n        'absolute inset-0 bg-background/70 backdrop-blur-sm motion-safe:animate-ec-stage-fade',\n      panel:\n        'relative flex h-full flex-col overflow-hidden rounded-xl border border-border bg-card shadow-2xl motion-safe:animate-ec-stage-in',\n      panelStyle: { width: STAGE_WIDTHS[props.preset] },\n    }\n  }\n  // The EC-392 shipped sheet shape, byte-for-byte — the proposal card must not\n  // change visually (ratified: side survives for peripheral review).\n  return {\n    container: 'fixed inset-0 z-50 flex',\n    backdrop: 'flex-1 bg-background/70 backdrop-blur-sm',\n    panel: 'flex h-full flex-col border-l border-border bg-card shadow-2xl',\n    panelStyle: { width: props.width },\n  }\n}\n"]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elytracms/studio",
   "author": "finaldream <hi@finaldream.de>",
-  "version": "0.0.66",
+  "version": "0.0.68",
   "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",
@@ -146,7 +146,7 @@
     "lucide-react": "^1.23.0",
     "tailwind-merge": "^3.6.0",
     "zod": "^4.4.3",
-    "@elytracms/core": "^0.0.66"
+    "@elytracms/core": "^0.0.68"
   },
   "peerDependencies": {
     "@tanstack/react-router": "^1.170.0",

package/src/styles/studio.css

@@ -65,6 +65,36 @@
   --radius-xl: calc(var(--radius) + 4px);
 }
 
+/*
+ * EC-431 — the centered stage surface (ExpandableSurface variant="stage") grows
+ * from center with a subtle scale/opacity entrance; the backdrop fades in. Both
+ * are consumed ONLY through `motion-safe:` variants, so `prefers-reduced-motion`
+ * gets an instant appearance (no transition at all).
+ */
+@theme {
+  --animate-ec-stage-in: ec-stage-in 180ms cubic-bezier(0.22, 1, 0.36, 1);
+  --animate-ec-stage-fade: ec-stage-fade 180ms ease-out;
+
+  @keyframes ec-stage-in {
+    from {
+      opacity: 0;
+      transform: scale(0.97);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+  @keyframes ec-stage-fade {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+}
+
 @layer base {
   * {
     border-color: var(--color-border);

package/dist/components/cms/rich-text/embed-inspector-context.d.ts

@@ -1,50 +0,0 @@
-import type { ComponentNode } from '@elytracms/core/project-graph';
-import type { ComponentManifest } from '@elytracms/core/component-registry';
-/**
- * Selection-driven embed inspector plumbing (0.0.41) — a deliberately **TipTap-free**
- * seam between the rich-text editor and the CMS detail editor's right sidebar.
- *
- * When a `componentEmbed` node is selected inside a rich-text field, the field pushes
- * an {@link EmbedInspectorPayload} through this context; the detail editor swaps its
- * inspector sidebar for the embed's prop form (the same EC-190 controls the old modal
- * used). Deselecting clears it and the normal sidebar returns.
- *
- * It carries only plain data + callbacks (no `@tiptap/*` imports) so the detail
- * editor — which sits on the critical path and must NOT statically pull TipTap
- * (EC-322) — can consume it while the editor subtree stays behind `rich-text/lazy`.
- */
-export interface EmbedInspectorPayload {
-    /**
-     * Stable identity of the embedded node (its `ComponentNode.id`). Dedupes selection
-     * races: when the selection moves from embed A to embed B, B's "open" and A's
-     * "close" can interleave — clearing keys on this id so A never wipes B.
-     */
-    nodeId: string;
-    /** The embedded component node whose props the inspector edits. */
-    node: ComponentNode;
-    /** Its manifest — drives which prop fields render. */
-    manifest: ComponentManifest;
-    /** Render the inspector read-only (mirrors the field's `readOnly`). */
-    readOnly: boolean;
-    /**
-     * Commit an edited node. The field writes it back through one ProseMirror
-     * `updateAttributes` transaction (undoable); the caller has already applied the
-     * no-dirty guard, so this only fires on a real structural change.
-     */
-    onChange: (node: ComponentNode) => void;
-    /** Move the editor selection off this node — the inspector's back affordance. */
-    onDeselect: () => void;
-}
-export interface EmbedInspectorApi {
-    /** Show (or refocus) the inspector for the currently-selected embed. */
-    setActiveEmbed: (payload: EmbedInspectorPayload) => void;
-    /** Hide the inspector, but only when `nodeId` is the one currently shown. */
-    clearActiveEmbed: (nodeId: string) => void;
-}
-export declare const EmbedInspectorProvider: import("react").Provider<EmbedInspectorApi | null>;
-/**
- * The ambient embed-inspector sink, or `null` when the rich-text field is mounted
- * outside a host that provides one (the builder property inspector, the asset detail
- * pane). A `null` return is the signal to fall back to the modal prop editor.
- */
-export declare function useOptionalEmbedInspector(): EmbedInspectorApi | null;

package/dist/components/cms/rich-text/embed-inspector-context.js

@@ -1,12 +0,0 @@
-import { createContext, useContext } from 'react';
-const EmbedInspectorContext = createContext(null);
-export const EmbedInspectorProvider = EmbedInspectorContext.Provider;
-/**
- * The ambient embed-inspector sink, or `null` when the rich-text field is mounted
- * outside a host that provides one (the builder property inspector, the asset detail
- * pane). A `null` return is the signal to fall back to the modal prop editor.
- */
-export function useOptionalEmbedInspector() {
-    return useContext(EmbedInspectorContext);
-}
-//# sourceMappingURL=embed-inspector-context.js.map

package/dist/components/cms/rich-text/embed-inspector-context.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"embed-inspector-context.js","sourceRoot":"","sources":["../../../../src/components/cms/rich-text/embed-inspector-context.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AA+CjD,MAAM,qBAAqB,GAAG,aAAa,CAA2B,IAAI,CAAC,CAAA;AAE3E,MAAM,CAAC,MAAM,sBAAsB,GAAG,qBAAqB,CAAC,QAAQ,CAAA;AAEpE;;;;GAIG;AACH,MAAM,UAAU,yBAAyB;IACvC,OAAO,UAAU,CAAC,qBAAqB,CAAC,CAAA;AAC1C,CAAC","sourcesContent":["import { createContext, useContext } from 'react'\nimport type { ComponentNode } from '@elytracms/core/project-graph'\nimport type { ComponentManifest } from '@elytracms/core/component-registry'\n\n/**\n * Selection-driven embed inspector plumbing (0.0.41) — a deliberately **TipTap-free**\n * seam between the rich-text editor and the CMS detail editor's right sidebar.\n *\n * When a `componentEmbed` node is selected inside a rich-text field, the field pushes\n * an {@link EmbedInspectorPayload} through this context; the detail editor swaps its\n * inspector sidebar for the embed's prop form (the same EC-190 controls the old modal\n * used). Deselecting clears it and the normal sidebar returns.\n *\n * It carries only plain data + callbacks (no `@tiptap/*` imports) so the detail\n * editor — which sits on the critical path and must NOT statically pull TipTap\n * (EC-322) — can consume it while the editor subtree stays behind `rich-text/lazy`.\n */\nexport interface EmbedInspectorPayload {\n  /**\n   * Stable identity of the embedded node (its `ComponentNode.id`). Dedupes selection\n   * races: when the selection moves from embed A to embed B, B's \"open\" and A's\n   * \"close\" can interleave — clearing keys on this id so A never wipes B.\n   */\n  nodeId: string\n  /** The embedded component node whose props the inspector edits. */\n  node: ComponentNode\n  /** Its manifest — drives which prop fields render. */\n  manifest: ComponentManifest\n  /** Render the inspector read-only (mirrors the field's `readOnly`). */\n  readOnly: boolean\n  /**\n   * Commit an edited node. The field writes it back through one ProseMirror\n   * `updateAttributes` transaction (undoable); the caller has already applied the\n   * no-dirty guard, so this only fires on a real structural change.\n   */\n  onChange: (node: ComponentNode) => void\n  /** Move the editor selection off this node — the inspector's back affordance. */\n  onDeselect: () => void\n}\n\nexport interface EmbedInspectorApi {\n  /** Show (or refocus) the inspector for the currently-selected embed. */\n  setActiveEmbed: (payload: EmbedInspectorPayload) => void\n  /** Hide the inspector, but only when `nodeId` is the one currently shown. */\n  clearActiveEmbed: (nodeId: string) => void\n}\n\nconst EmbedInspectorContext = createContext<EmbedInspectorApi | null>(null)\n\nexport const EmbedInspectorProvider = EmbedInspectorContext.Provider\n\n/**\n * The ambient embed-inspector sink, or `null` when the rich-text field is mounted\n * outside a host that provides one (the builder property inspector, the asset detail\n * pane). A `null` return is the signal to fall back to the modal prop editor.\n */\nexport function useOptionalEmbedInspector(): EmbedInspectorApi | null {\n  return useContext(EmbedInspectorContext)\n}\n"]}

package/dist/components/cms/rich-text/embed-inspector.d.ts

@@ -1,25 +0,0 @@
-import type { EmbedInspectorPayload } from './embed-inspector-context.js';
-/**
- * The selection-driven embed prop inspector (0.0.41) — the detail editor's right
- * sidebar swaps to this when a `componentEmbed` node is selected in a rich-text
- * field. It replaces the retired-for-this-surface {@link EmbedPropsDialog} modal so
- * embed props are edited in the SAME place document fields are, not a third form
- * surface (the product-owner feedback that motivated the change).
- *
- * It reuses the exact modal machinery — the EC-190 {@link PropValueControl} stack and
- * the {@link editableEmbedProps}/{@link blocksEmbedProps} manifest partitioning — so
- * `blocks`-typed composition props are excluded (edited on the canvas) with a visible
- * note, and asset/relation/object props open their real pickers.
- *
- * Write-back is **immediate per prop change** (like the builder inspector): each edit
- * commits through the payload's `onChange` (one ProseMirror transaction upstream),
- * guarded by {@link resolveEmbedWrite} so an unchanged write never dirties the field.
- * There is no draft+Apply — the sidebar always reflects the committed node.
- *
- * TipTap-free by construction (see {@link EmbedInspectorPayload}) so the detail editor
- * can import it without pulling the editor runtime onto the critical path (EC-322).
- */
-export declare function EmbedInspector({ payload, className, }: {
-    payload: EmbedInspectorPayload;
-    className?: string;
-}): import("react").JSX.Element;

package/dist/components/cms/rich-text/embed-inspector.js

@@ -1,48 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { ChevronLeft } from 'lucide-react';
-import { Button, Field, Row, Separator, Stack, Text } from '@elytracms/studio/ui';
-import { localizedLabel, translate } from '@elytracms/studio/lib/i18n';
-import { componentDisplayName } from '@elytracms/studio/lib/persona/labels';
-import { cn } from '@elytracms/studio/lib/utils';
-import { PropValueControl } from '../prop-fields.js';
-import { blocksEmbedProps, clearComponentNodeProp, editableEmbedProps, resolveEmbedWrite, setComponentNodeProp, } from './embed-props.js';
-/**
- * The selection-driven embed prop inspector (0.0.41) — the detail editor's right
- * sidebar swaps to this when a `componentEmbed` node is selected in a rich-text
- * field. It replaces the retired-for-this-surface {@link EmbedPropsDialog} modal so
- * embed props are edited in the SAME place document fields are, not a third form
- * surface (the product-owner feedback that motivated the change).
- *
- * It reuses the exact modal machinery — the EC-190 {@link PropValueControl} stack and
- * the {@link editableEmbedProps}/{@link blocksEmbedProps} manifest partitioning — so
- * `blocks`-typed composition props are excluded (edited on the canvas) with a visible
- * note, and asset/relation/object props open their real pickers.
- *
- * Write-back is **immediate per prop change** (like the builder inspector): each edit
- * commits through the payload's `onChange` (one ProseMirror transaction upstream),
- * guarded by {@link resolveEmbedWrite} so an unchanged write never dirties the field.
- * There is no draft+Apply — the sidebar always reflects the committed node.
- *
- * TipTap-free by construction (see {@link EmbedInspectorPayload}) so the detail editor
- * can import it without pulling the editor runtime onto the critical path (EC-322).
- */
-export function EmbedInspector({ payload, className, }) {
-    const { node, manifest, readOnly, onChange, onDeselect } = payload;
-    const editable = editableEmbedProps(manifest);
-    const blocks = blocksEmbedProps(manifest);
-    function set(name, value) {
-        const next = resolveEmbedWrite(node, setComponentNodeProp(node, name, value));
-        if (next)
-            onChange(next);
-    }
-    function clear(name) {
-        const next = resolveEmbedWrite(node, clearComponentNodeProp(node, name));
-        if (next)
-            onChange(next);
-    }
-    return (_jsxs("div", { className: cn('flex h-full min-h-0 flex-col bg-card', className), children: [_jsxs(Row, { gap: "1", align: "center", className: "shrink-0 border-b border-border p-1.5", children: [_jsx(Button, { type: "button", variant: "ghost", size: "icon-sm", "aria-label": translate('richText.embed.inspectorBack'), onClick: onDeselect, children: _jsx(ChevronLeft, { className: "size-4" }) }), _jsx(Text, { as: "span", size: "xs", weight: "semibold", className: "min-w-0 flex-1 truncate", children: componentDisplayName(node.componentId, manifest) })] }), _jsx("div", { className: "min-h-0 flex-1 overflow-auto p-3", children: _jsxs(Stack, { gap: "4", "aria-disabled": readOnly || undefined, className: cn(readOnly && 'pointer-events-none opacity-70'), children: [editable.length === 0 ? (_jsx(Text, { size: "sm", tone: "muted", children: translate('richText.embed.noProps') })) : (editable.map(([name, spec]) => {
-                            const id = `embed-${node.id}-${name}`;
-                            return (_jsx(Field, { label: localizedLabel(spec.form?.label, name), htmlFor: id, children: _jsx(PropValueControl, { id: id, name: name, spec: spec, value: node.props?.[name], onSet: (v) => set(name, v), onClear: () => clear(name) }) }, name));
-                        })), blocks.length > 0 ? (_jsxs(_Fragment, { children: [_jsx(Separator, {}), _jsx(Text, { size: "xs", tone: "subtle", children: translate('richText.embed.blocksNote') })] })) : null] }) })] }));
-}
-//# sourceMappingURL=embed-inspector.js.map

package/dist/components/cms/rich-text/embed-inspector.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"embed-inspector.js","sourceRoot":"","sources":["../../../../src/components/cms/rich-text/embed-inspector.tsx"],"names":[],"mappings":"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","sourcesContent":["import { ChevronLeft } from 'lucide-react'\nimport type { JsonValue } from '@elytracms/core/project-graph'\nimport { Button, Field, Row, Separator, Stack, Text } from '@elytracms/studio/ui'\nimport { localizedLabel, translate } from '@elytracms/studio/lib/i18n'\nimport { componentDisplayName } from '@elytracms/studio/lib/persona/labels'\nimport { cn } from '@elytracms/studio/lib/utils'\nimport { PropValueControl } from '../prop-fields'\nimport {\n  blocksEmbedProps,\n  clearComponentNodeProp,\n  editableEmbedProps,\n  resolveEmbedWrite,\n  setComponentNodeProp,\n} from './embed-props'\nimport type { EmbedInspectorPayload } from './embed-inspector-context'\n\n/**\n * The selection-driven embed prop inspector (0.0.41) — the detail editor's right\n * sidebar swaps to this when a `componentEmbed` node is selected in a rich-text\n * field. It replaces the retired-for-this-surface {@link EmbedPropsDialog} modal so\n * embed props are edited in the SAME place document fields are, not a third form\n * surface (the product-owner feedback that motivated the change).\n *\n * It reuses the exact modal machinery — the EC-190 {@link PropValueControl} stack and\n * the {@link editableEmbedProps}/{@link blocksEmbedProps} manifest partitioning — so\n * `blocks`-typed composition props are excluded (edited on the canvas) with a visible\n * note, and asset/relation/object props open their real pickers.\n *\n * Write-back is **immediate per prop change** (like the builder inspector): each edit\n * commits through the payload's `onChange` (one ProseMirror transaction upstream),\n * guarded by {@link resolveEmbedWrite} so an unchanged write never dirties the field.\n * There is no draft+Apply — the sidebar always reflects the committed node.\n *\n * TipTap-free by construction (see {@link EmbedInspectorPayload}) so the detail editor\n * can import it without pulling the editor runtime onto the critical path (EC-322).\n */\nexport function EmbedInspector({\n  payload,\n  className,\n}: {\n  payload: EmbedInspectorPayload\n  className?: string\n}) {\n  const { node, manifest, readOnly, onChange, onDeselect } = payload\n  const editable = editableEmbedProps(manifest)\n  const blocks = blocksEmbedProps(manifest)\n\n  function set(name: string, value: JsonValue) {\n    const next = resolveEmbedWrite(node, setComponentNodeProp(node, name, value))\n    if (next) onChange(next)\n  }\n  function clear(name: string) {\n    const next = resolveEmbedWrite(node, clearComponentNodeProp(node, name))\n    if (next) onChange(next)\n  }\n\n  return (\n    <div className={cn('flex h-full min-h-0 flex-col bg-card', className)}>\n      <Row gap=\"1\" align=\"center\" className=\"shrink-0 border-b border-border p-1.5\">\n        <Button\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          aria-label={translate('richText.embed.inspectorBack')}\n          onClick={onDeselect}\n        >\n          <ChevronLeft className=\"size-4\" />\n        </Button>\n        <Text as=\"span\" size=\"xs\" weight=\"semibold\" className=\"min-w-0 flex-1 truncate\">\n          {componentDisplayName(node.componentId, manifest)}\n        </Text>\n      </Row>\n      <div className=\"min-h-0 flex-1 overflow-auto p-3\">\n        <Stack\n          gap=\"4\"\n          aria-disabled={readOnly || undefined}\n          className={cn(readOnly && 'pointer-events-none opacity-70')}\n        >\n          {editable.length === 0 ? (\n            <Text size=\"sm\" tone=\"muted\">\n              {translate('richText.embed.noProps')}\n            </Text>\n          ) : (\n            editable.map(([name, spec]) => {\n              const id = `embed-${node.id}-${name}`\n              return (\n                <Field key={name} label={localizedLabel(spec.form?.label, name)} htmlFor={id}>\n                  <PropValueControl\n                    id={id}\n                    name={name}\n                    spec={spec}\n                    value={node.props?.[name]}\n                    onSet={(v) => set(name, v)}\n                    onClear={() => clear(name)}\n                  />\n                </Field>\n              )\n            })\n          )}\n          {blocks.length > 0 ? (\n            <>\n              <Separator />\n              <Text size=\"xs\" tone=\"subtle\">\n                {translate('richText.embed.blocksNote')}\n              </Text>\n            </>\n          ) : null}\n        </Stack>\n      </div>\n    </div>\n  )\n}\n"]}