@flanksource/clicky-ui 0.2.21 → 0.3.2

package/dist/overlay/modalStack.cjs

@@ -1,8 +1,11 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const react = require("react");
+const zIndex = require("./zIndex.cjs");
 const stack = [];
 const listeners = /* @__PURE__ */ new Set();
+const escapeStack = [];
+let escapeDocument = null;
 function emit() {
   for (const listener of listeners) listener();
 }
@@ -15,6 +18,30 @@ function subscribe(listener) {
 function getSnapshot() {
   return stack.join("\0");
 }
+function onEscapeKeyDown(event) {
+  if (event.defaultPrevented || event.key !== "Escape" || event.isComposing || event.keyCode === 229) {
+    return;
+  }
+  const top = escapeStack[escapeStack.length - 1];
+  if (!top) return;
+  event.preventDefault();
+  event.stopPropagation();
+  event.stopImmediatePropagation();
+  top.onEscape();
+}
+function ensureEscapeListener() {
+  if (escapeDocument || typeof document === "undefined") return;
+  escapeDocument = document;
+  escapeDocument.addEventListener("keydown", onEscapeKeyDown);
+}
+function removeEscapeLayer(id) {
+  const index = escapeStack.findIndex((entry) => entry.id === id);
+  if (index !== -1) escapeStack.splice(index, 1);
+  if (escapeStack.length === 0 && escapeDocument) {
+    escapeDocument.removeEventListener("keydown", onEscapeKeyDown);
+    escapeDocument = null;
+  }
+}
 function useModalStack(open) {
   const id = react.useId();
   react.useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
@@ -29,7 +56,32 @@ function useModalStack(open) {
     };
   }, [open, id]);
   const depth = stack.indexOf(id);
-  return { isTop: depth === stack.length - 1, depth: depth === -1 ? 0 : depth };
+  return {
+    isTop: depth !== -1 && depth === stack.length - 1,
+    depth: depth === -1 ? 0 : depth
+  };
+}
+function useEscapeLayer(open, onEscape, enabled = true) {
+  const id = react.useId();
+  const onEscapeRef = react.useRef(onEscape);
+  onEscapeRef.current = onEscape;
+  react.useEffect(() => {
+    if (!open || !enabled) return;
+    ensureEscapeListener();
+    escapeStack.push({
+      id,
+      onEscape: () => onEscapeRef.current()
+    });
+    return () => removeEscapeLayer(id);
+  }, [enabled, id, open]);
+}
+function useFloatingZIndex() {
+  react.useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+  if (stack.length === 0) return zIndex.zIndex.popover;
+  const topModalZ = zIndex.zIndex.modal + (stack.length - 1) * zIndex.zIndex.modalStep;
+  return topModalZ + zIndex.zIndex.popoverOverModalOffset;
 }
+exports.useEscapeLayer = useEscapeLayer;
+exports.useFloatingZIndex = useFloatingZIndex;
 exports.useModalStack = useModalStack;
 //# sourceMappingURL=modalStack.cjs.map

package/dist/overlay/modalStack.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"modalStack.cjs","sources":["../../src/overlay/modalStack.ts"],"sourcesContent":["import { useEffect, useId, useSyncExternalStore } from \"react\";\n\n// A process-wide stack of the currently open modals, topmost last. Modals mount\n// independently (no shared provider), so the stack lives at module scope and is\n// shared through useSyncExternalStore. It lets nested modals cooperate: only the\n// topmost reacts to Escape, and each renders above the one it opened over.\nconst stack: string[] = [];\nconst listeners = new Set<() => void>();\n\nfunction emit() {\n  for (const listener of listeners) listener();\n}\n\nfunction subscribe(listener: () => void) {\n  listeners.add(listener);\n  return () => {\n    listeners.delete(listener);\n  };\n}\n\n// The snapshot is the stack identity; it only changes when an entry is pushed or\n// popped, so subscribers re-render exactly when their position could have moved.\nfunction getSnapshot() {\n  return stack.join(\"\u0000\");\n}\n\nexport type ModalStackPosition = {\n  /** Whether this modal is the topmost open one and should own global affordances. */\n  isTop: boolean;\n  /** Zero-based depth in the stack; drives the stacking order of nested modals. */\n  depth: number;\n};\n\n/**\n * Registers a modal in the global stack while `open`, returning its live\n * position. Used so a nested modal sits above its opener and only the topmost\n * modal closes on Escape.\n */\nexport function useModalStack(open: boolean): ModalStackPosition {\n  const id = useId();\n  useSyncExternalStore(subscribe, getSnapshot, getSnapshot);\n\n  useEffect(() => {\n    if (!open) return;\n    stack.push(id);\n    emit();\n    return () => {\n      const index = stack.indexOf(id);\n      if (index !== -1) stack.splice(index, 1);\n      emit();\n    };\n  }, [open, id]);\n\n  const depth = stack.indexOf(id);\n  return { isTop: depth === stack.length - 1, depth: depth === -1 ? 0 : depth };\n}\n"],"names":["useId","useSyncExternalStore","useEffect"],"mappings":";;;AAMA,MAAM,QAAkB,CAAA;AACxB,MAAM,gCAAgB,IAAA;AAEtB,SAAS,OAAO;AACd,aAAW,YAAY,UAAW,UAAA;AACpC;AAEA,SAAS,UAAU,UAAsB;AACvC,YAAU,IAAI,QAAQ;AACtB,SAAO,MAAM;AACX,cAAU,OAAO,QAAQ;AAAA,EAC3B;AACF;AAIA,SAAS,cAAc;AACrB,SAAO,MAAM,KAAK,IAAG;AACvB;AAcO,SAAS,cAAc,MAAmC;AAC/D,QAAM,KAAKA,MAAAA,MAAA;AACXC,6BAAqB,WAAW,aAAa,WAAW;AAExDC,QAAAA,UAAU,MAAM;AACd,QAAI,CAAC,KAAM;AACX,UAAM,KAAK,EAAE;AACb,SAAA;AACA,WAAO,MAAM;AACX,YAAM,QAAQ,MAAM,QAAQ,EAAE;AAC9B,UAAI,UAAU,GAAI,OAAM,OAAO,OAAO,CAAC;AACvC,WAAA;AAAA,IACF;AAAA,EACF,GAAG,CAAC,MAAM,EAAE,CAAC;AAEb,QAAM,QAAQ,MAAM,QAAQ,EAAE;AAC9B,SAAO,EAAE,OAAO,UAAU,MAAM,SAAS,GAAG,OAAO,UAAU,KAAK,IAAI,MAAA;AACxE;;"}
+{"version":3,"file":"modalStack.cjs","sources":["../../src/overlay/modalStack.ts"],"sourcesContent":["import { useEffect, useId, useRef, useSyncExternalStore } from \"react\";\nimport { zIndex } from \"./zIndex\";\n\n// A process-wide stack of the currently open modals, topmost last. Modals mount\n// independently (no shared provider), so the stack lives at module scope and is\n// shared through useSyncExternalStore. It lets nested modals cooperate: only the\n// topmost reacts to Escape, and each renders above the one it opened over.\nconst stack: string[] = [];\nconst listeners = new Set<() => void>();\nconst escapeStack: Array<{ id: string; onEscape: () => void }> = [];\nlet escapeDocument: Document | null = null;\n\nfunction emit() {\n  for (const listener of listeners) listener();\n}\n\nfunction subscribe(listener: () => void) {\n  listeners.add(listener);\n  return () => {\n    listeners.delete(listener);\n  };\n}\n\n// The snapshot is the stack identity; it only changes when an entry is pushed or\n// popped, so subscribers re-render exactly when their position could have moved.\nfunction getSnapshot() {\n  return stack.join(\"\\u0000\");\n}\n\nfunction onEscapeKeyDown(event: KeyboardEvent) {\n  if (\n    event.defaultPrevented ||\n    event.key !== \"Escape\" ||\n    event.isComposing ||\n    (event as KeyboardEvent & { keyCode?: number }).keyCode === 229\n  ) {\n    return;\n  }\n\n  const top = escapeStack[escapeStack.length - 1];\n  if (!top) return;\n\n  event.preventDefault();\n  event.stopPropagation();\n  event.stopImmediatePropagation();\n  top.onEscape();\n}\n\nfunction ensureEscapeListener() {\n  if (escapeDocument || typeof document === \"undefined\") return;\n  escapeDocument = document;\n  escapeDocument.addEventListener(\"keydown\", onEscapeKeyDown);\n}\n\nfunction removeEscapeLayer(id: string) {\n  const index = escapeStack.findIndex((entry) => entry.id === id);\n  if (index !== -1) escapeStack.splice(index, 1);\n\n  if (escapeStack.length === 0 && escapeDocument) {\n    escapeDocument.removeEventListener(\"keydown\", onEscapeKeyDown);\n    escapeDocument = null;\n  }\n}\n\nexport type ModalStackPosition = {\n  /** Whether this modal is the topmost open one and should own global affordances. */\n  isTop: boolean;\n  /** Zero-based depth in the stack; drives the stacking order of nested modals. */\n  depth: number;\n};\n\n/**\n * Registers a modal in the global stack while `open`, returning its live\n * position. Used so a nested modal sits above its opener and only the topmost\n * modal closes on Escape.\n */\nexport function useModalStack(open: boolean): ModalStackPosition {\n  const id = useId();\n  useSyncExternalStore(subscribe, getSnapshot, getSnapshot);\n\n  useEffect(() => {\n    if (!open) return;\n    stack.push(id);\n    emit();\n    return () => {\n      const index = stack.indexOf(id);\n      if (index !== -1) stack.splice(index, 1);\n      emit();\n    };\n  }, [open, id]);\n\n  const depth = stack.indexOf(id);\n  return {\n    isTop: depth !== -1 && depth === stack.length - 1,\n    depth: depth === -1 ? 0 : depth,\n  };\n}\n\n/**\n * Registers an Escape-closeable overlay while `open`. The topmost registered\n * layer owns Escape, so a keypress dismisses one dialog/menu layer at a time.\n */\nexport function useEscapeLayer(open: boolean, onEscape: () => void, enabled = true) {\n  const id = useId();\n  const onEscapeRef = useRef(onEscape);\n  onEscapeRef.current = onEscape;\n\n  useEffect(() => {\n    if (!open || !enabled) return;\n\n    ensureEscapeListener();\n    escapeStack.push({\n      id,\n      onEscape: () => onEscapeRef.current(),\n    });\n\n    return () => removeEscapeLayer(id);\n  }, [enabled, id, open]);\n}\n\n/**\n * z-index a floating layer (dropdown / combobox / tooltip / popover) should use\n * so it renders above any open modal — and below the next nested modal — or at\n * the popover floor when no modal is open. Subscribes to the modal stack so the\n * value tracks modals opening and closing.\n */\nexport function useFloatingZIndex(): number {\n  useSyncExternalStore(subscribe, getSnapshot, getSnapshot);\n  if (stack.length === 0) return zIndex.popover;\n  const topModalZ = zIndex.modal + (stack.length - 1) * zIndex.modalStep;\n  return topModalZ + zIndex.popoverOverModalOffset;\n}\n"],"names":["useId","useSyncExternalStore","useEffect","useRef","zIndex"],"mappings":";;;;AAOA,MAAM,QAAkB,CAAA;AACxB,MAAM,gCAAgB,IAAA;AACtB,MAAM,cAA2D,CAAA;AACjE,IAAI,iBAAkC;AAEtC,SAAS,OAAO;AACd,aAAW,YAAY,UAAW,UAAA;AACpC;AAEA,SAAS,UAAU,UAAsB;AACvC,YAAU,IAAI,QAAQ;AACtB,SAAO,MAAM;AACX,cAAU,OAAO,QAAQ;AAAA,EAC3B;AACF;AAIA,SAAS,cAAc;AACrB,SAAO,MAAM,KAAK,IAAQ;AAC5B;AAEA,SAAS,gBAAgB,OAAsB;AAC7C,MACE,MAAM,oBACN,MAAM,QAAQ,YACd,MAAM,eACL,MAA+C,YAAY,KAC5D;AACA;AAAA,EACF;AAEA,QAAM,MAAM,YAAY,YAAY,SAAS,CAAC;AAC9C,MAAI,CAAC,IAAK;AAEV,QAAM,eAAA;AACN,QAAM,gBAAA;AACN,QAAM,yBAAA;AACN,MAAI,SAAA;AACN;AAEA,SAAS,uBAAuB;AAC9B,MAAI,kBAAkB,OAAO,aAAa,YAAa;AACvD,mBAAiB;AACjB,iBAAe,iBAAiB,WAAW,eAAe;AAC5D;AAEA,SAAS,kBAAkB,IAAY;AACrC,QAAM,QAAQ,YAAY,UAAU,CAAC,UAAU,MAAM,OAAO,EAAE;AAC9D,MAAI,UAAU,GAAI,aAAY,OAAO,OAAO,CAAC;AAE7C,MAAI,YAAY,WAAW,KAAK,gBAAgB;AAC9C,mBAAe,oBAAoB,WAAW,eAAe;AAC7D,qBAAiB;AAAA,EACnB;AACF;AAcO,SAAS,cAAc,MAAmC;AAC/D,QAAM,KAAKA,MAAAA,MAAA;AACXC,6BAAqB,WAAW,aAAa,WAAW;AAExDC,QAAAA,UAAU,MAAM;AACd,QAAI,CAAC,KAAM;AACX,UAAM,KAAK,EAAE;AACb,SAAA;AACA,WAAO,MAAM;AACX,YAAM,QAAQ,MAAM,QAAQ,EAAE;AAC9B,UAAI,UAAU,GAAI,OAAM,OAAO,OAAO,CAAC;AACvC,WAAA;AAAA,IACF;AAAA,EACF,GAAG,CAAC,MAAM,EAAE,CAAC;AAEb,QAAM,QAAQ,MAAM,QAAQ,EAAE;AAC9B,SAAO;AAAA,IACL,OAAO,UAAU,MAAM,UAAU,MAAM,SAAS;AAAA,IAChD,OAAO,UAAU,KAAK,IAAI;AAAA,EAAA;AAE9B;AAMO,SAAS,eAAe,MAAe,UAAsB,UAAU,MAAM;AAClF,QAAM,KAAKF,MAAAA,MAAA;AACX,QAAM,cAAcG,MAAAA,OAAO,QAAQ;AACnC,cAAY,UAAU;AAEtBD,QAAAA,UAAU,MAAM;AACd,QAAI,CAAC,QAAQ,CAAC,QAAS;AAEvB,yBAAA;AACA,gBAAY,KAAK;AAAA,MACf;AAAA,MACA,UAAU,MAAM,YAAY,QAAA;AAAA,IAAQ,CACrC;AAED,WAAO,MAAM,kBAAkB,EAAE;AAAA,EACnC,GAAG,CAAC,SAAS,IAAI,IAAI,CAAC;AACxB;AAQO,SAAS,oBAA4B;AAC1CD,6BAAqB,WAAW,aAAa,WAAW;AACxD,MAAI,MAAM,WAAW,EAAG,QAAOG,OAAAA,OAAO;AACtC,QAAM,YAAYA,OAAAA,OAAO,SAAS,MAAM,SAAS,KAAKA,OAAAA,OAAO;AAC7D,SAAO,YAAYA,OAAAA,OAAO;AAC5B;;;;"}

package/dist/overlay/modalStack.d.ts

@@ -10,4 +10,16 @@ export type ModalStackPosition = {
  * modal closes on Escape.
  */
 export declare function useModalStack(open: boolean): ModalStackPosition;
+/**
+ * Registers an Escape-closeable overlay while `open`. The topmost registered
+ * layer owns Escape, so a keypress dismisses one dialog/menu layer at a time.
+ */
+export declare function useEscapeLayer(open: boolean, onEscape: () => void, enabled?: boolean): void;
+/**
+ * z-index a floating layer (dropdown / combobox / tooltip / popover) should use
+ * so it renders above any open modal — and below the next nested modal — or at
+ * the popover floor when no modal is open. Subscribes to the modal stack so the
+ * value tracks modals opening and closing.
+ */
+export declare function useFloatingZIndex(): number;
 //# sourceMappingURL=modalStack.d.ts.map

package/dist/overlay/modalStack.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"modalStack.d.ts","sourceRoot":"","sources":["../../src/overlay/modalStack.ts"],"names":[],"mappings":"AA0BA,MAAM,MAAM,kBAAkB,GAAG;IAC/B,oFAAoF;IACpF,KAAK,EAAE,OAAO,CAAC;IACf,iFAAiF;IACjF,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,IAAI,EAAE,OAAO,GAAG,kBAAkB,CAiB/D"}
+{"version":3,"file":"modalStack.d.ts","sourceRoot":"","sources":["../../src/overlay/modalStack.ts"],"names":[],"mappings":"AAgEA,MAAM,MAAM,kBAAkB,GAAG;IAC/B,oFAAoF;IACpF,KAAK,EAAE,OAAO,CAAC;IACf,iFAAiF;IACjF,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,IAAI,EAAE,OAAO,GAAG,kBAAkB,CAoB/D;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAAC,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,IAAI,EAAE,OAAO,UAAO,QAgBjF;AAED;;;;;GAKG;AACH,wBAAgB,iBAAiB,IAAI,MAAM,CAK1C"}

package/dist/overlay/modalStack.js

@@ -1,6 +1,9 @@
-import { useId, useSyncExternalStore, useEffect } from "react";
+import { useId, useSyncExternalStore, useEffect, useRef } from "react";
+import { zIndex } from "./zIndex.js";
 const stack = [];
 const listeners = /* @__PURE__ */ new Set();
+const escapeStack = [];
+let escapeDocument = null;
 function emit() {
   for (const listener of listeners) listener();
 }
@@ -13,6 +16,30 @@ function subscribe(listener) {
 function getSnapshot() {
   return stack.join("\0");
 }
+function onEscapeKeyDown(event) {
+  if (event.defaultPrevented || event.key !== "Escape" || event.isComposing || event.keyCode === 229) {
+    return;
+  }
+  const top = escapeStack[escapeStack.length - 1];
+  if (!top) return;
+  event.preventDefault();
+  event.stopPropagation();
+  event.stopImmediatePropagation();
+  top.onEscape();
+}
+function ensureEscapeListener() {
+  if (escapeDocument || typeof document === "undefined") return;
+  escapeDocument = document;
+  escapeDocument.addEventListener("keydown", onEscapeKeyDown);
+}
+function removeEscapeLayer(id) {
+  const index = escapeStack.findIndex((entry) => entry.id === id);
+  if (index !== -1) escapeStack.splice(index, 1);
+  if (escapeStack.length === 0 && escapeDocument) {
+    escapeDocument.removeEventListener("keydown", onEscapeKeyDown);
+    escapeDocument = null;
+  }
+}
 function useModalStack(open) {
   const id = useId();
   useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
@@ -27,9 +54,34 @@ function useModalStack(open) {
     };
   }, [open, id]);
   const depth = stack.indexOf(id);
-  return { isTop: depth === stack.length - 1, depth: depth === -1 ? 0 : depth };
+  return {
+    isTop: depth !== -1 && depth === stack.length - 1,
+    depth: depth === -1 ? 0 : depth
+  };
+}
+function useEscapeLayer(open, onEscape, enabled = true) {
+  const id = useId();
+  const onEscapeRef = useRef(onEscape);
+  onEscapeRef.current = onEscape;
+  useEffect(() => {
+    if (!open || !enabled) return;
+    ensureEscapeListener();
+    escapeStack.push({
+      id,
+      onEscape: () => onEscapeRef.current()
+    });
+    return () => removeEscapeLayer(id);
+  }, [enabled, id, open]);
+}
+function useFloatingZIndex() {
+  useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+  if (stack.length === 0) return zIndex.popover;
+  const topModalZ = zIndex.modal + (stack.length - 1) * zIndex.modalStep;
+  return topModalZ + zIndex.popoverOverModalOffset;
 }
 export {
+  useEscapeLayer,
+  useFloatingZIndex,
   useModalStack
 };
 //# sourceMappingURL=modalStack.js.map

package/dist/overlay/modalStack.js.map

@@ -1 +1 @@
-{"version":3,"file":"modalStack.js","sources":["../../src/overlay/modalStack.ts"],"sourcesContent":["import { useEffect, useId, useSyncExternalStore } from \"react\";\n\n// A process-wide stack of the currently open modals, topmost last. Modals mount\n// independently (no shared provider), so the stack lives at module scope and is\n// shared through useSyncExternalStore. It lets nested modals cooperate: only the\n// topmost reacts to Escape, and each renders above the one it opened over.\nconst stack: string[] = [];\nconst listeners = new Set<() => void>();\n\nfunction emit() {\n  for (const listener of listeners) listener();\n}\n\nfunction subscribe(listener: () => void) {\n  listeners.add(listener);\n  return () => {\n    listeners.delete(listener);\n  };\n}\n\n// The snapshot is the stack identity; it only changes when an entry is pushed or\n// popped, so subscribers re-render exactly when their position could have moved.\nfunction getSnapshot() {\n  return stack.join(\"\u0000\");\n}\n\nexport type ModalStackPosition = {\n  /** Whether this modal is the topmost open one and should own global affordances. */\n  isTop: boolean;\n  /** Zero-based depth in the stack; drives the stacking order of nested modals. */\n  depth: number;\n};\n\n/**\n * Registers a modal in the global stack while `open`, returning its live\n * position. Used so a nested modal sits above its opener and only the topmost\n * modal closes on Escape.\n */\nexport function useModalStack(open: boolean): ModalStackPosition {\n  const id = useId();\n  useSyncExternalStore(subscribe, getSnapshot, getSnapshot);\n\n  useEffect(() => {\n    if (!open) return;\n    stack.push(id);\n    emit();\n    return () => {\n      const index = stack.indexOf(id);\n      if (index !== -1) stack.splice(index, 1);\n      emit();\n    };\n  }, [open, id]);\n\n  const depth = stack.indexOf(id);\n  return { isTop: depth === stack.length - 1, depth: depth === -1 ? 0 : depth };\n}\n"],"names":[],"mappings":";AAMA,MAAM,QAAkB,CAAA;AACxB,MAAM,gCAAgB,IAAA;AAEtB,SAAS,OAAO;AACd,aAAW,YAAY,UAAW,UAAA;AACpC;AAEA,SAAS,UAAU,UAAsB;AACvC,YAAU,IAAI,QAAQ;AACtB,SAAO,MAAM;AACX,cAAU,OAAO,QAAQ;AAAA,EAC3B;AACF;AAIA,SAAS,cAAc;AACrB,SAAO,MAAM,KAAK,IAAG;AACvB;AAcO,SAAS,cAAc,MAAmC;AAC/D,QAAM,KAAK,MAAA;AACX,uBAAqB,WAAW,aAAa,WAAW;AAExD,YAAU,MAAM;AACd,QAAI,CAAC,KAAM;AACX,UAAM,KAAK,EAAE;AACb,SAAA;AACA,WAAO,MAAM;AACX,YAAM,QAAQ,MAAM,QAAQ,EAAE;AAC9B,UAAI,UAAU,GAAI,OAAM,OAAO,OAAO,CAAC;AACvC,WAAA;AAAA,IACF;AAAA,EACF,GAAG,CAAC,MAAM,EAAE,CAAC;AAEb,QAAM,QAAQ,MAAM,QAAQ,EAAE;AAC9B,SAAO,EAAE,OAAO,UAAU,MAAM,SAAS,GAAG,OAAO,UAAU,KAAK,IAAI,MAAA;AACxE;"}
+{"version":3,"file":"modalStack.js","sources":["../../src/overlay/modalStack.ts"],"sourcesContent":["import { useEffect, useId, useRef, useSyncExternalStore } from \"react\";\nimport { zIndex } from \"./zIndex\";\n\n// A process-wide stack of the currently open modals, topmost last. Modals mount\n// independently (no shared provider), so the stack lives at module scope and is\n// shared through useSyncExternalStore. It lets nested modals cooperate: only the\n// topmost reacts to Escape, and each renders above the one it opened over.\nconst stack: string[] = [];\nconst listeners = new Set<() => void>();\nconst escapeStack: Array<{ id: string; onEscape: () => void }> = [];\nlet escapeDocument: Document | null = null;\n\nfunction emit() {\n  for (const listener of listeners) listener();\n}\n\nfunction subscribe(listener: () => void) {\n  listeners.add(listener);\n  return () => {\n    listeners.delete(listener);\n  };\n}\n\n// The snapshot is the stack identity; it only changes when an entry is pushed or\n// popped, so subscribers re-render exactly when their position could have moved.\nfunction getSnapshot() {\n  return stack.join(\"\\u0000\");\n}\n\nfunction onEscapeKeyDown(event: KeyboardEvent) {\n  if (\n    event.defaultPrevented ||\n    event.key !== \"Escape\" ||\n    event.isComposing ||\n    (event as KeyboardEvent & { keyCode?: number }).keyCode === 229\n  ) {\n    return;\n  }\n\n  const top = escapeStack[escapeStack.length - 1];\n  if (!top) return;\n\n  event.preventDefault();\n  event.stopPropagation();\n  event.stopImmediatePropagation();\n  top.onEscape();\n}\n\nfunction ensureEscapeListener() {\n  if (escapeDocument || typeof document === \"undefined\") return;\n  escapeDocument = document;\n  escapeDocument.addEventListener(\"keydown\", onEscapeKeyDown);\n}\n\nfunction removeEscapeLayer(id: string) {\n  const index = escapeStack.findIndex((entry) => entry.id === id);\n  if (index !== -1) escapeStack.splice(index, 1);\n\n  if (escapeStack.length === 0 && escapeDocument) {\n    escapeDocument.removeEventListener(\"keydown\", onEscapeKeyDown);\n    escapeDocument = null;\n  }\n}\n\nexport type ModalStackPosition = {\n  /** Whether this modal is the topmost open one and should own global affordances. */\n  isTop: boolean;\n  /** Zero-based depth in the stack; drives the stacking order of nested modals. */\n  depth: number;\n};\n\n/**\n * Registers a modal in the global stack while `open`, returning its live\n * position. Used so a nested modal sits above its opener and only the topmost\n * modal closes on Escape.\n */\nexport function useModalStack(open: boolean): ModalStackPosition {\n  const id = useId();\n  useSyncExternalStore(subscribe, getSnapshot, getSnapshot);\n\n  useEffect(() => {\n    if (!open) return;\n    stack.push(id);\n    emit();\n    return () => {\n      const index = stack.indexOf(id);\n      if (index !== -1) stack.splice(index, 1);\n      emit();\n    };\n  }, [open, id]);\n\n  const depth = stack.indexOf(id);\n  return {\n    isTop: depth !== -1 && depth === stack.length - 1,\n    depth: depth === -1 ? 0 : depth,\n  };\n}\n\n/**\n * Registers an Escape-closeable overlay while `open`. The topmost registered\n * layer owns Escape, so a keypress dismisses one dialog/menu layer at a time.\n */\nexport function useEscapeLayer(open: boolean, onEscape: () => void, enabled = true) {\n  const id = useId();\n  const onEscapeRef = useRef(onEscape);\n  onEscapeRef.current = onEscape;\n\n  useEffect(() => {\n    if (!open || !enabled) return;\n\n    ensureEscapeListener();\n    escapeStack.push({\n      id,\n      onEscape: () => onEscapeRef.current(),\n    });\n\n    return () => removeEscapeLayer(id);\n  }, [enabled, id, open]);\n}\n\n/**\n * z-index a floating layer (dropdown / combobox / tooltip / popover) should use\n * so it renders above any open modal — and below the next nested modal — or at\n * the popover floor when no modal is open. Subscribes to the modal stack so the\n * value tracks modals opening and closing.\n */\nexport function useFloatingZIndex(): number {\n  useSyncExternalStore(subscribe, getSnapshot, getSnapshot);\n  if (stack.length === 0) return zIndex.popover;\n  const topModalZ = zIndex.modal + (stack.length - 1) * zIndex.modalStep;\n  return topModalZ + zIndex.popoverOverModalOffset;\n}\n"],"names":[],"mappings":";;AAOA,MAAM,QAAkB,CAAA;AACxB,MAAM,gCAAgB,IAAA;AACtB,MAAM,cAA2D,CAAA;AACjE,IAAI,iBAAkC;AAEtC,SAAS,OAAO;AACd,aAAW,YAAY,UAAW,UAAA;AACpC;AAEA,SAAS,UAAU,UAAsB;AACvC,YAAU,IAAI,QAAQ;AACtB,SAAO,MAAM;AACX,cAAU,OAAO,QAAQ;AAAA,EAC3B;AACF;AAIA,SAAS,cAAc;AACrB,SAAO,MAAM,KAAK,IAAQ;AAC5B;AAEA,SAAS,gBAAgB,OAAsB;AAC7C,MACE,MAAM,oBACN,MAAM,QAAQ,YACd,MAAM,eACL,MAA+C,YAAY,KAC5D;AACA;AAAA,EACF;AAEA,QAAM,MAAM,YAAY,YAAY,SAAS,CAAC;AAC9C,MAAI,CAAC,IAAK;AAEV,QAAM,eAAA;AACN,QAAM,gBAAA;AACN,QAAM,yBAAA;AACN,MAAI,SAAA;AACN;AAEA,SAAS,uBAAuB;AAC9B,MAAI,kBAAkB,OAAO,aAAa,YAAa;AACvD,mBAAiB;AACjB,iBAAe,iBAAiB,WAAW,eAAe;AAC5D;AAEA,SAAS,kBAAkB,IAAY;AACrC,QAAM,QAAQ,YAAY,UAAU,CAAC,UAAU,MAAM,OAAO,EAAE;AAC9D,MAAI,UAAU,GAAI,aAAY,OAAO,OAAO,CAAC;AAE7C,MAAI,YAAY,WAAW,KAAK,gBAAgB;AAC9C,mBAAe,oBAAoB,WAAW,eAAe;AAC7D,qBAAiB;AAAA,EACnB;AACF;AAcO,SAAS,cAAc,MAAmC;AAC/D,QAAM,KAAK,MAAA;AACX,uBAAqB,WAAW,aAAa,WAAW;AAExD,YAAU,MAAM;AACd,QAAI,CAAC,KAAM;AACX,UAAM,KAAK,EAAE;AACb,SAAA;AACA,WAAO,MAAM;AACX,YAAM,QAAQ,MAAM,QAAQ,EAAE;AAC9B,UAAI,UAAU,GAAI,OAAM,OAAO,OAAO,CAAC;AACvC,WAAA;AAAA,IACF;AAAA,EACF,GAAG,CAAC,MAAM,EAAE,CAAC;AAEb,QAAM,QAAQ,MAAM,QAAQ,EAAE;AAC9B,SAAO;AAAA,IACL,OAAO,UAAU,MAAM,UAAU,MAAM,SAAS;AAAA,IAChD,OAAO,UAAU,KAAK,IAAI;AAAA,EAAA;AAE9B;AAMO,SAAS,eAAe,MAAe,UAAsB,UAAU,MAAM;AAClF,QAAM,KAAK,MAAA;AACX,QAAM,cAAc,OAAO,QAAQ;AACnC,cAAY,UAAU;AAEtB,YAAU,MAAM;AACd,QAAI,CAAC,QAAQ,CAAC,QAAS;AAEvB,yBAAA;AACA,gBAAY,KAAK;AAAA,MACf;AAAA,MACA,UAAU,MAAM,YAAY,QAAA;AAAA,IAAQ,CACrC;AAED,WAAO,MAAM,kBAAkB,EAAE;AAAA,EACnC,GAAG,CAAC,SAAS,IAAI,IAAI,CAAC;AACxB;AAQO,SAAS,oBAA4B;AAC1C,uBAAqB,WAAW,aAAa,WAAW;AACxD,MAAI,MAAM,WAAW,EAAG,QAAO,OAAO;AACtC,QAAM,YAAY,OAAO,SAAS,MAAM,SAAS,KAAK,OAAO;AAC7D,SAAO,YAAY,OAAO;AAC5B;"}

package/dist/overlay/zIndex.cjs

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const zIndex = {
+  /** Persistent chat launcher. */
+  chatFab: 60,
+  /** Floating chat windows; `ChatWindowManager` increments from this base. */
+  chatWindow: 61,
+  /** Floating transient content when NO modal is open (above app chrome). */
+  popover: 9e3,
+  /** Modal/dialog at depth 0; nested modals add `modalStep` per level. */
+  modal: 1e4,
+  /** Per-level step between stacked modals. */
+  modalStep: 10,
+  /** How far above the top modal floating content sits (below the next nest). */
+  popoverOverModalOffset: 5,
+  /** Toasts / notifications — always the topmost layer. */
+  toast: 1e5
+};
+exports.zIndex = zIndex;
+//# sourceMappingURL=zIndex.cjs.map

package/dist/overlay/zIndex.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"zIndex.cjs","sources":["../../src/overlay/zIndex.ts"],"sourcesContent":["/**\n * Centralized z-index scale for clicky-ui overlays — the single source of truth\n * so stacking conflicts (e.g. a dropdown opened inside a modal rendering behind\n * it) cannot recur.\n *\n * These are applied as inline `style={{ zIndex }}`, never as arbitrary `z-[N]`\n * Tailwind classes: a consumer's Tailwind build only generates the arbitrary\n * classes it can scan from clicky-ui's published dist, so a freshly chosen\n * `z-[N]` may silently emit no rule. Inline styles are immune to that.\n *\n * Floating, transient content (dropdown / combobox / menu / tooltip / popover)\n * must clear whatever modal is open, so its z-index is computed relative to the\n * active modal via `useFloatingZIndex` (see ./modalStack) rather than taken from\n * a constant here.\n *\n * Layers NOT listed here are intentionally local: they live inside their own\n * stacking context and never participate in the global ordering —\n * `Timeline` (`z-[1]`), `RangeSlider` thumbs (20/30), and `Modal`'s\n * `ConfirmClosePrompt` (`z-10`, relative to the modal panel).\n */\nexport const zIndex = {\n  /** In-flow raised affordances (sticky bits). */\n  raised: 30,\n  /** Persistent chat launcher. */\n  chatFab: 60,\n  /** Floating chat windows; `ChatWindowManager` increments from this base. */\n  chatWindow: 61,\n  /** Floating transient content when NO modal is open (above app chrome). */\n  popover: 9000,\n  /** Modal/dialog at depth 0; nested modals add `modalStep` per level. */\n  modal: 10000,\n  /** Per-level step between stacked modals. */\n  modalStep: 10,\n  /** How far above the top modal floating content sits (below the next nest). */\n  popoverOverModalOffset: 5,\n  /** Toasts / notifications — always the topmost layer. */\n  toast: 100000,\n} as const;\n"],"names":[],"mappings":";;AAoBO,MAAM,SAAS;AAAA;AAAA,EAIpB,SAAS;AAAA;AAAA,EAET,YAAY;AAAA;AAAA,EAEZ,SAAS;AAAA;AAAA,EAET,OAAO;AAAA;AAAA,EAEP,WAAW;AAAA;AAAA,EAEX,wBAAwB;AAAA;AAAA,EAExB,OAAO;AACT;;"}

package/dist/overlay/zIndex.d.ts

@@ -0,0 +1,39 @@
+/**
+ * Centralized z-index scale for clicky-ui overlays — the single source of truth
+ * so stacking conflicts (e.g. a dropdown opened inside a modal rendering behind
+ * it) cannot recur.
+ *
+ * These are applied as inline `style={{ zIndex }}`, never as arbitrary `z-[N]`
+ * Tailwind classes: a consumer's Tailwind build only generates the arbitrary
+ * classes it can scan from clicky-ui's published dist, so a freshly chosen
+ * `z-[N]` may silently emit no rule. Inline styles are immune to that.
+ *
+ * Floating, transient content (dropdown / combobox / menu / tooltip / popover)
+ * must clear whatever modal is open, so its z-index is computed relative to the
+ * active modal via `useFloatingZIndex` (see ./modalStack) rather than taken from
+ * a constant here.
+ *
+ * Layers NOT listed here are intentionally local: they live inside their own
+ * stacking context and never participate in the global ordering —
+ * `Timeline` (`z-[1]`), `RangeSlider` thumbs (20/30), and `Modal`'s
+ * `ConfirmClosePrompt` (`z-10`, relative to the modal panel).
+ */
+export declare const zIndex: {
+    /** In-flow raised affordances (sticky bits). */
+    readonly raised: 30;
+    /** Persistent chat launcher. */
+    readonly chatFab: 60;
+    /** Floating chat windows; `ChatWindowManager` increments from this base. */
+    readonly chatWindow: 61;
+    /** Floating transient content when NO modal is open (above app chrome). */
+    readonly popover: 9000;
+    /** Modal/dialog at depth 0; nested modals add `modalStep` per level. */
+    readonly modal: 10000;
+    /** Per-level step between stacked modals. */
+    readonly modalStep: 10;
+    /** How far above the top modal floating content sits (below the next nest). */
+    readonly popoverOverModalOffset: 5;
+    /** Toasts / notifications — always the topmost layer. */
+    readonly toast: 100000;
+};
+//# sourceMappingURL=zIndex.d.ts.map

package/dist/overlay/zIndex.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"zIndex.d.ts","sourceRoot":"","sources":["../../src/overlay/zIndex.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,MAAM;IACjB,gDAAgD;;IAEhD,gCAAgC;;IAEhC,4EAA4E;;IAE5E,2EAA2E;;IAE3E,wEAAwE;;IAExE,6CAA6C;;IAE7C,+EAA+E;;IAE/E,yDAAyD;;CAEjD,CAAC"}

package/dist/overlay/zIndex.js

@@ -0,0 +1,20 @@
+const zIndex = {
+  /** Persistent chat launcher. */
+  chatFab: 60,
+  /** Floating chat windows; `ChatWindowManager` increments from this base. */
+  chatWindow: 61,
+  /** Floating transient content when NO modal is open (above app chrome). */
+  popover: 9e3,
+  /** Modal/dialog at depth 0; nested modals add `modalStep` per level. */
+  modal: 1e4,
+  /** Per-level step between stacked modals. */
+  modalStep: 10,
+  /** How far above the top modal floating content sits (below the next nest). */
+  popoverOverModalOffset: 5,
+  /** Toasts / notifications — always the topmost layer. */
+  toast: 1e5
+};
+export {
+  zIndex
+};
+//# sourceMappingURL=zIndex.js.map

package/dist/overlay/zIndex.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"zIndex.js","sources":["../../src/overlay/zIndex.ts"],"sourcesContent":["/**\n * Centralized z-index scale for clicky-ui overlays — the single source of truth\n * so stacking conflicts (e.g. a dropdown opened inside a modal rendering behind\n * it) cannot recur.\n *\n * These are applied as inline `style={{ zIndex }}`, never as arbitrary `z-[N]`\n * Tailwind classes: a consumer's Tailwind build only generates the arbitrary\n * classes it can scan from clicky-ui's published dist, so a freshly chosen\n * `z-[N]` may silently emit no rule. Inline styles are immune to that.\n *\n * Floating, transient content (dropdown / combobox / menu / tooltip / popover)\n * must clear whatever modal is open, so its z-index is computed relative to the\n * active modal via `useFloatingZIndex` (see ./modalStack) rather than taken from\n * a constant here.\n *\n * Layers NOT listed here are intentionally local: they live inside their own\n * stacking context and never participate in the global ordering —\n * `Timeline` (`z-[1]`), `RangeSlider` thumbs (20/30), and `Modal`'s\n * `ConfirmClosePrompt` (`z-10`, relative to the modal panel).\n */\nexport const zIndex = {\n  /** In-flow raised affordances (sticky bits). */\n  raised: 30,\n  /** Persistent chat launcher. */\n  chatFab: 60,\n  /** Floating chat windows; `ChatWindowManager` increments from this base. */\n  chatWindow: 61,\n  /** Floating transient content when NO modal is open (above app chrome). */\n  popover: 9000,\n  /** Modal/dialog at depth 0; nested modals add `modalStep` per level. */\n  modal: 10000,\n  /** Per-level step between stacked modals. */\n  modalStep: 10,\n  /** How far above the top modal floating content sits (below the next nest). */\n  popoverOverModalOffset: 5,\n  /** Toasts / notifications — always the topmost layer. */\n  toast: 100000,\n} as const;\n"],"names":[],"mappings":"AAoBO,MAAM,SAAS;AAAA;AAAA,EAIpB,SAAS;AAAA;AAAA,EAET,YAAY;AAAA;AAAA,EAEZ,SAAS;AAAA;AAAA,EAET,OAAO;AAAA;AAAA,EAEP,WAAW;AAAA;AAAA,EAEX,wBAAwB;AAAA;AAAA,EAExB,OAAO;AACT;"}

package/dist/rpc/EntityExplorerApp.cjs

@@ -3,47 +3,30 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
 const themeSwitcher = require("../components/theme-switcher.cjs");
+const AppShell = require("../layout/AppShell.cjs");
 const clickyMetadata = require("./clickyMetadata.cjs");
 const commandHref = require("./commandHref.cjs");
 const router = require("./router.cjs");
 const OperationCatalog = require("./OperationCatalog.cjs");
 const OperationCommandPage = require("./OperationCommandPage.cjs");
 const OperationEntityPage = require("./OperationEntityPage.cjs");
+const surfaceIconMap = require("./surfaceIconMap.cjs");
 const useOperations = require("./useOperations.cjs");
-const SURFACE_GROUP_STATE_KEY = "clicky-ui:sidebar:groupCollapsed";
+const SIDEBAR_COLLAPSED_KEY = "clicky-ui:sidebar:collapsed";
 function EntityExplorerApp({
   client,
   basePath = "",
   showApiExplorer = true,
-  surfaceIcons
+  formExtensions,
+  formActions,
+  resultRenderer
 }) {
+  const formPre = formExtensions == null ? void 0 : formExtensions.pre;
+  const formPost = formExtensions == null ? void 0 : formExtensions.post;
   const { pathname, renderLink, navigate } = router.useRouter();
-  const { operations, spec } = useOperations.useOperations(client);
+  const { spec } = useOperations.useOperations(client);
   const surfaces = react.useMemo(() => clickyMetadata.getClickySurfaces(spec), [spec]);
   const surfaceGroups = react.useMemo(() => groupSurfacesByParent(surfaces), [surfaces]);
-  const listHrefBySurface = react.useMemo(() => {
-    const out = {};
-    for (const surface of surfaces) {
-      const listOp = clickyMetadata.findSurfaceListOperation(operations, surface.key);
-      if (!(listOp == null ? void 0 : listOp.operation.operationId)) continue;
-      const href = commandHref.buildCommandHref(basePath, {
-        operation: listOp,
-        request: { command: listOp.operation.operationId, autoRun: true }
-      });
-      if (href) out[surface.key] = href;
-    }
-    return out;
-  }, [basePath, operations, surfaces]);
-  const [collapsedGroups, setCollapsedGroups] = react.useState(
-    () => readCollapsedGroups()
-  );
-  const toggleGroup = react.useCallback((parent) => {
-    setCollapsedGroups((prev) => {
-      const next = { ...prev, [parent]: !prev[parent] };
-      writeCollapsedGroups(next);
-      return next;
-    });
-  }, []);
   const defaultSurface = react.useMemo(
     () => surfaces.find((surface) => !surface.admin) ?? surfaces[0],
     [surfaces]
@@ -75,104 +58,104 @@ function EntityExplorerApp({
     }),
     []
   );
+  const navSections = react.useMemo(() => {
+    const sections = surfaceGroups.map((group) => ({
+      label: group.label,
+      items: group.surfaces.map((surface) => {
+        const icon = surfaceIconMap.resolveSurfaceIcon(surface.icon);
+        return {
+          key: surface.key,
+          label: surface.title,
+          ...icon ? { icon } : {},
+          active: isSurfaceRouteActive(resolvedRoute, surface.key),
+          to: commandHref.withBasePath(basePath, `/${surface.key}`)
+        };
+      })
+    }));
+    if (showApiExplorer) {
+      sections.push({
+        items: [
+          {
+            key: explorerDefinition.key,
+            label: explorerDefinition.title,
+            active: resolvedRoute.kind === "explorer" || resolvedRoute.kind === "command",
+            to: commandHref.withBasePath(basePath, "/explorer")
+          }
+        ]
+      });
+    }
+    return sections;
+  }, [surfaceGroups, basePath, resolvedRoute, showApiExplorer, explorerDefinition]);
   react.useEffect(() => {
     if (defaultSurface == null || relativePath !== "/") return;
     navigate(commandHref.withBasePath(basePath, `/${defaultSurface.key}`), { replace: true });
   }, [basePath, defaultSurface, relativePath, navigate]);
-  const content = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("aside", { className: "flex w-64 shrink-0 flex-col border-r border-border bg-muted/30 p-4", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-6", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-semibold", children: (spec == null ? void 0 : spec.info.title) ?? "Clicky Explorer" }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-muted-foreground", children: "Metadata-driven entity explorer" })
+  const content = /* @__PURE__ */ jsxRuntime.jsx(
+    AppShell.AppShell,
+    {
+      brand: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "truncate text-sm font-semibold", children: (spec == null ? void 0 : spec.info.title) ?? "Clicky Explorer" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "truncate text-xs text-sidebar-foreground/60", children: "Metadata-driven entity explorer" })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("nav", { className: "flex flex-col gap-2", children: [
-        surfaceGroups.map((group) => {
-          const collapsed = collapsedGroups[group.parent] ?? false;
-          return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(
-              "button",
-              {
-                type: "button",
-                onClick: () => toggleGroup(group.parent),
-                "aria-expanded": !collapsed,
-                className: "flex items-center gap-2 rounded-md px-2 py-1.5 text-xs font-semibold uppercase tracking-wide text-muted-foreground transition-colors hover:bg-accent/40",
-                children: [
-                  (surfaceIcons == null ? void 0 : surfaceIcons[group.parent]) != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-4 w-4 items-center justify-center text-current", children: surfaceIcons[group.parent] }),
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 text-left", children: group.label }),
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "text-[0.65rem] opacity-60", children: collapsed ? "▸" : "▾" })
-                ]
-              }
-            ),
-            !collapsed && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-2 mt-1 flex flex-col gap-1 border-l border-border/60 pl-2", children: group.surfaces.map(
-              (surface) => renderLink({
-                key: surface.key,
-                to: listHrefBySurface[surface.key] ?? commandHref.withBasePath(basePath, `/${surface.key}`),
-                className: navLinkClassName(
-                  isSurfaceRouteActive(resolvedRoute, surface.key)
-                ),
-                children: surface.title
-              })
-            ) })
-          ] }, group.parent);
-        }),
-        showApiExplorer && renderLink({
-          key: explorerDefinition.key,
-          to: commandHref.withBasePath(basePath, "/explorer"),
-          className: navLinkClassName(
-            resolvedRoute.kind === "explorer" || resolvedRoute.kind === "command"
-          ),
-          children: explorerDefinition.title
-        })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-auto pt-4", children: /* @__PURE__ */ jsxRuntime.jsx(themeSwitcher.ThemeSwitcher, {}) })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("main", { className: "flex-1 overflow-auto p-6", children: resolvedRoute.kind === "surface" ? resolvedRoute.surface ? /* @__PURE__ */ jsxRuntime.jsx(
-      OperationCatalog.OperationCatalog,
-      {
-        definition: clickyMetadata.makeSurfaceDefinition(resolvedRoute.surface),
-        entities: [resolvedRoute.surface.entity],
-        client,
-        renderLink,
-        surfaceKey: resolvedRoute.surface.key,
-        commandRuntime
-      }
-    ) : /* @__PURE__ */ jsxRuntime.jsx(UnknownSurface, { surfaceKey: resolvedRoute.surfaceKey }) : resolvedRoute.kind === "entity" ? resolvedRoute.surface ? /* @__PURE__ */ jsxRuntime.jsx(
-      OperationEntityPage.OperationEntityPage,
-      {
-        definition: clickyMetadata.makeSurfaceDefinition(resolvedRoute.surface),
-        entities: [resolvedRoute.surface.entity],
-        client,
-        renderLink,
-        surfaceKey: resolvedRoute.surface.key,
-        backHref: commandHref.withBasePath(basePath, `/${resolvedRoute.surface.key}`),
-        backLabel: `Back to ${resolvedRoute.surface.title}`,
-        commandRuntime,
-        ...resolvedRoute.id ? { id: resolvedRoute.id } : {}
-      }
-    ) : /* @__PURE__ */ jsxRuntime.jsx(UnknownSurface, { surfaceKey: resolvedRoute.surfaceKey }) : resolvedRoute.kind === "command" ? /* @__PURE__ */ jsxRuntime.jsx(
-      OperationCommandPage.OperationCommandPage,
-      {
-        client,
-        backHref: commandHref.withBasePath(basePath, "/explorer"),
-        backLabel: "Back to API Explorer",
-        renderLink,
-        commandRuntime,
-        initialValues: commandInitialValues,
-        autoRun: true,
-        ...resolvedRoute.operationId ? { operationId: resolvedRoute.operationId } : {}
-      }
-    ) : resolvedRoute.kind === "explorer" ? /* @__PURE__ */ jsxRuntime.jsx(
-      OperationCatalog.OperationCatalog,
-      {
-        definition: explorerDefinition,
-        entities: [],
-        allOperations: true,
-        client,
-        renderLink,
-        commandRuntime
-      }
-    ) : defaultSurface == null ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-muted-foreground", children: "Loading surfaces…" }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-muted-foreground", children: "Redirecting…" }) })
-  ] });
+      navSections,
+      sidebarFooter: /* @__PURE__ */ jsxRuntime.jsx(themeSwitcher.ThemeSwitcher, {}),
+      collapsedStorageKey: SIDEBAR_COLLAPSED_KEY,
+      contentClassName: "p-6",
+      children: resolvedRoute.kind === "surface" ? resolvedRoute.surface ? /* @__PURE__ */ jsxRuntime.jsx(
+        OperationCatalog.OperationCatalog,
+        {
+          definition: clickyMetadata.makeSurfaceDefinition(resolvedRoute.surface),
+          entities: [resolvedRoute.surface.entity],
+          client,
+          renderLink,
+          surfaceKey: resolvedRoute.surface.key,
+          commandRuntime,
+          ...formPre ? { formPre } : {},
+          ...formPost ? { formPost } : {},
+          ...formActions ? { formActions } : {},
+          ...resultRenderer ? { resultRenderer } : {}
+        }
+      ) : /* @__PURE__ */ jsxRuntime.jsx(UnknownSurface, { surfaceKey: resolvedRoute.surfaceKey }) : resolvedRoute.kind === "entity" ? resolvedRoute.surface ? /* @__PURE__ */ jsxRuntime.jsx(
+        OperationEntityPage.OperationEntityPage,
+        {
+          definition: clickyMetadata.makeSurfaceDefinition(resolvedRoute.surface),
+          entities: [resolvedRoute.surface.entity],
+          client,
+          renderLink,
+          surfaceKey: resolvedRoute.surface.key,
+          backHref: commandHref.withBasePath(basePath, `/${resolvedRoute.surface.key}`),
+          backLabel: `Back to ${resolvedRoute.surface.title}`,
+          commandRuntime,
+          ...formPre ? { formPre } : {},
+          ...formPost ? { formPost } : {},
+          ...formActions ? { formActions } : {},
+          ...resolvedRoute.id ? { id: resolvedRoute.id } : {}
+        }
+      ) : /* @__PURE__ */ jsxRuntime.jsx(UnknownSurface, { surfaceKey: resolvedRoute.surfaceKey }) : resolvedRoute.kind === "command" ? /* @__PURE__ */ jsxRuntime.jsx(
+        OperationCommandPage.OperationCommandPage,
+        {
+          client,
+          backHref: commandHref.withBasePath(basePath, "/explorer"),
+          backLabel: "Back to API Explorer",
+          renderLink,
+          commandRuntime,
+          initialValues: commandInitialValues,
+          autoRun: true,
+          ...resolvedRoute.operationId ? { operationId: resolvedRoute.operationId } : {}
+        }
+      ) : resolvedRoute.kind === "explorer" ? /* @__PURE__ */ jsxRuntime.jsx(
+        OperationCatalog.OperationCatalog,
+        {
+          definition: explorerDefinition,
+          entities: [],
+          allOperations: true,
+          client,
+          renderLink,
+          commandRuntime
+        }
+      ) : defaultSurface == null ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-muted-foreground", children: "Loading surfaces…" }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-muted-foreground", children: "Redirecting…" })
+    }
+  );
   return content;
 }
 function parseExplorerRoute(pathname) {
@@ -207,12 +190,6 @@ function resolveRouteSurface(route, surfaces) {
 function isSurfaceRouteActive(route, surfaceKey) {
   return route.kind === "surface" && route.surfaceKey === surfaceKey || route.kind === "entity" && route.surfaceKey === surfaceKey;
 }
-function navLinkClassName(active) {
-  return [
-    "rounded-md px-2 py-1.5 text-sm transition-colors",
-    active ? "bg-accent text-accent-foreground" : "text-foreground hover:bg-accent"
-  ].join(" ");
-}
 function stripBasePath(pathname, basePath) {
   const base = commandHref.trimTrailingSlash(basePath);
   if (!base || base === "/") {
@@ -254,24 +231,6 @@ function titleCase(value) {
   if (!value) return value;
   return value.charAt(0).toUpperCase() + value.slice(1);
 }
-function readCollapsedGroups() {
-  if (typeof window === "undefined") return {};
-  try {
-    const raw = window.localStorage.getItem(SURFACE_GROUP_STATE_KEY);
-    if (!raw) return {};
-    const parsed = JSON.parse(raw);
-    return parsed && typeof parsed === "object" ? parsed : {};
-  } catch {
-    return {};
-  }
-}
-function writeCollapsedGroups(state) {
-  if (typeof window === "undefined") return;
-  try {
-    window.localStorage.setItem(SURFACE_GROUP_STATE_KEY, JSON.stringify(state));
-  } catch {
-  }
-}
 function readCommandQueryParams() {
   if (typeof window === "undefined") {
     return { initialValues: {}, autoRun: false };