@elytracms/studio 0.0.60 → 0.0.62

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.62",
   "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.62"
   },
   "peerDependencies": {
     "@tanstack/react-router": "^1.170.0",