@cloudvoyant/helical-react 0.20.1 → 0.21.1

package/dist/index.js

@@ -213,76 +213,333 @@ import {
   windowResizeTriggerBase,
   cn as cn6
 } from "@cloudvoyant/helical-ui";
+
+// src/which-key/context.tsx
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useId,
+  useRef,
+  useSyncExternalStore
+} from "react";
+import { useEnvironmentContext } from "@ark-ui/react/environment";
+import { HotkeysProvider } from "@tanstack/react-hotkeys";
+import {
+  createWhichKeyController,
+  getDocumentWhichKeyController,
+  subscribeDocumentWhichKeyController
+} from "@cloudvoyant/helical-ui";
 import { jsx as jsx6 } from "react/jsx-runtime";
-function Window({ className, positionerClassName, children, ...props }) {
-  return /* @__PURE__ */ jsx6(ArkWindowRoot, { ...props, children: /* @__PURE__ */ jsx6(Portal4, { children: /* @__PURE__ */ jsx6(ArkWindowPositioner, { className: cn6(windowPositionerBase, positionerClassName), children: /* @__PURE__ */ jsx6(ArkWindowContent, { className: cn6(windowContentBase, className), children }) }) }) });
+var WhichKeyContext = createContext(null);
+function WhichKeyProvider({
+  preset,
+  defaultMode = "normal",
+  leaderKey = "Space",
+  jumpAction,
+  jumpAlphabet,
+  storageKey,
+  keymap,
+  commands,
+  enabled = true,
+  disableOnMobile = true,
+  scoped = true,
+  onPresetChange,
+  onModeChange,
+  onJumpActionChange,
+  onCommand,
+  onYank,
+  children
+}) {
+  const env = useEnvironmentContext();
+  const scopeRef = useRef(null);
+  const controllerRef = useRef(null);
+  if (!controllerRef.current) {
+    controllerRef.current = createWhichKeyController({
+      preset,
+      defaultMode,
+      leaderKey,
+      jumpAction,
+      jumpAlphabet,
+      storageKey,
+      keymap,
+      commands,
+      enabled,
+      disableOnMobile,
+      getDocument: () => env.getDocument(),
+      getScopeElement: () => scoped ? scopeRef.current : null,
+      onPresetChange,
+      onModeChange,
+      onJumpActionChange,
+      onCommand,
+      onYank
+    });
+  }
+  const controller = controllerRef.current;
+  useEffect(() => {
+    if (preset !== void 0) {
+      controller.setPreset(preset);
+    }
+  }, [controller, preset]);
+  useEffect(() => {
+    if (jumpAction !== void 0) {
+      controller.setJumpAction(jumpAction);
+    }
+  }, [controller, jumpAction]);
+  useEffect(() => {
+    if (!enabled) return;
+    const doc = env.getDocument();
+    return controller.attach(doc);
+  }, [controller, enabled, env]);
+  useEffect(() => {
+    if (!keymap) return;
+    return controller.registerKeymap("__provider_keymap__", keymap, {
+      enabled: true
+    });
+  }, [controller, keymap]);
+  useEffect(() => {
+    if (!commands) return;
+    const cleanups = Object.entries(commands).map(
+      ([cmdId, handler]) => controller.registerCommand(cmdId, handler)
+    );
+    return () => {
+      cleanups.forEach((fn) => fn());
+    };
+  }, [controller, commands]);
+  return /* @__PURE__ */ jsx6(HotkeysProvider, { children: /* @__PURE__ */ jsx6(WhichKeyContext.Provider, { value: controller, children: scoped ? /* @__PURE__ */ jsx6("div", { ref: scopeRef, "data-which-key-scope": true, className: "contents", children }) : children }) });
+}
+function useOptionalWhichKeyController() {
+  const contextController = useContext(WhichKeyContext);
+  const docController = useSyncExternalStore(
+    (listener) => contextController ? () => {
+    } : subscribeDocumentWhichKeyController(
+      typeof document !== "undefined" ? document : void 0,
+      listener
+    ),
+    () => contextController ? null : getDocumentWhichKeyController(),
+    () => null
+  );
+  return contextController ?? docController;
+}
+function useWhichKeyController() {
+  const controller = useOptionalWhichKeyController();
+  const fallbackRef = useRef(null);
+  if (controller) return controller;
+  if (!fallbackRef.current) {
+    fallbackRef.current = createWhichKeyController();
+  }
+  return fallbackRef.current;
+}
+function useWhichKey() {
+  const controller = useWhichKeyController();
+  const state = useSyncExternalStore(
+    controller.subscribe,
+    controller.getState,
+    controller.getState
+  );
+  return {
+    ...state,
+    controller,
+    setPreset: controller.setPreset,
+    setMode: controller.setMode,
+    setJumpAction: controller.setJumpAction,
+    openExplorer: controller.openExplorer,
+    closeExplorer: controller.closeExplorer,
+    setExplorerQuery: controller.setExplorerQuery,
+    openPrefix: controller.openPrefix,
+    closePrefix: controller.closePrefix,
+    stepBackPrefix: controller.stepBackPrefix,
+    triggerKey: controller.triggerKey,
+    focusPane: controller.focusPane,
+    startJumpMode: controller.startJumpMode,
+    cancelJumpMode: controller.cancelJumpMode,
+    jumpBack: controller.jumpBack,
+    jumpForward: controller.jumpForward,
+    executeCommand: controller.executeCommand
+  };
+}
+function useKeymap(nodes, options) {
+  const controller = useOptionalWhichKeyController();
+  const layerId = useId();
+  useEffect(() => {
+    if (!controller || options?.enabled === false) return;
+    return controller.registerKeymap(layerId, nodes, options);
+  }, [controller, layerId, nodes, options]);
+}
+function useKeymapScope(scopeId, nodes, enabled = true) {
+  useKeymap(nodes, { scope: scopeId, enabled });
+}
+function useOptionalPaneRegistration(options) {
+  const controller = useOptionalWhichKeyController();
+  const reactId = useId();
+  const resolvedId = options.paneId ?? `pane-${reactId.replace(/:/g, "")}`;
+  const resolvedTitle = options.paneTitle ?? options.defaultTitle;
+  const elementRef = useRef(null);
+  const cleanupRef = useRef(null);
+  const activePaneId = useSyncExternalStore(
+    controller ? controller.subscribe : () => () => {
+    },
+    () => controller ? controller.getState().activePaneId : null,
+    () => null
+  );
+  const setRef = useCallback((node) => {
+    elementRef.current = node;
+  }, []);
+  useEffect(() => {
+    if (!controller || !elementRef.current || options.paneDisabled) {
+      cleanupRef.current?.();
+      cleanupRef.current = null;
+      return;
+    }
+    cleanupRef.current?.();
+    cleanupRef.current = controller.registerPane({
+      id: resolvedId,
+      title: resolvedTitle,
+      element: elementRef.current,
+      disabled: options.paneDisabled,
+      order: options.paneOrder
+    });
+    return () => {
+      cleanupRef.current?.();
+      cleanupRef.current = null;
+    };
+  }, [
+    controller,
+    resolvedId,
+    resolvedTitle,
+    options.paneDisabled,
+    options.paneOrder
+  ]);
+  if (options.paneDisabled) {
+    return {
+      ref: () => {
+      },
+      paneId: resolvedId,
+      isActive: false,
+      dataAttributes: {}
+    };
+  }
+  if (!controller) {
+    return {
+      ref: () => {
+      },
+      paneId: resolvedId,
+      isActive: false,
+      dataAttributes: options.paneId ? {
+        "data-pane-id": options.paneId,
+        "data-pane-title": resolvedTitle,
+        ...options.paneOrder !== void 0 ? { "data-pane-order": String(options.paneOrder) } : {}
+      } : {}
+    };
+  }
+  const isActive = activePaneId === resolvedId;
+  return {
+    ref: setRef,
+    paneId: resolvedId,
+    isActive,
+    dataAttributes: {
+      "data-pane-id": resolvedId,
+      "data-pane-title": resolvedTitle,
+      ...options.paneOrder !== void 0 ? { "data-pane-order": String(options.paneOrder) } : {},
+      "data-pane-active": isActive ? "true" : "false"
+    }
+  };
+}
+
+// src/window.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+function Window({
+  paneId,
+  paneTitle,
+  paneDisabled,
+  className,
+  positionerClassName,
+  children,
+  ...props
+}) {
+  const pane = useOptionalPaneRegistration({
+    paneId,
+    paneTitle,
+    paneDisabled: paneDisabled || props.open === false,
+    defaultTitle: "Window"
+  });
+  return /* @__PURE__ */ jsx7(ArkWindowRoot, { ...props, children: /* @__PURE__ */ jsx7(Portal4, { children: /* @__PURE__ */ jsx7(ArkWindowPositioner, { className: cn6(windowPositionerBase, positionerClassName), children: /* @__PURE__ */ jsx7(
+    ArkWindowContent,
+    {
+      ref: pane.ref,
+      ...pane.dataAttributes,
+      className: cn6(windowContentBase, className),
+      children
+    }
+  ) }) }) });
 }
 function WindowProvider(props) {
-  return /* @__PURE__ */ jsx6(ArkWindowRootProvider, { ...props });
+  return /* @__PURE__ */ jsx7(ArkWindowRootProvider, { ...props });
 }
 function WindowDragTrigger({ className, ...props }) {
-  return /* @__PURE__ */ jsx6(ArkWindowDragTrigger, { className: cn6(windowDragTriggerBase, className), ...props });
+  return /* @__PURE__ */ jsx7(ArkWindowDragTrigger, { className: cn6(windowDragTriggerBase, className), ...props });
 }
 function WindowHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx6(ArkWindowHeader, { className: cn6(windowHeaderBase, className), ...props });
+  return /* @__PURE__ */ jsx7(ArkWindowHeader, { className: cn6(windowHeaderBase, className), ...props });
 }
 function WindowTitle({ className, ...props }) {
-  return /* @__PURE__ */ jsx6(ArkWindowTitle, { className: cn6(windowTitleBase, className), ...props });
+  return /* @__PURE__ */ jsx7(ArkWindowTitle, { className: cn6(windowTitleBase, className), ...props });
 }
 function WindowControl({ className, ...props }) {
-  return /* @__PURE__ */ jsx6(ArkWindowControl, { className: cn6(windowControlBase, className), ...props });
+  return /* @__PURE__ */ jsx7(ArkWindowControl, { className: cn6(windowControlBase, className), ...props });
 }
 function WindowStageTrigger({ className, ...props }) {
-  return /* @__PURE__ */ jsx6(ArkWindowStageTrigger, { className: cn6(windowStageTriggerBase, className), ...props });
+  return /* @__PURE__ */ jsx7(ArkWindowStageTrigger, { className: cn6(windowStageTriggerBase, className), ...props });
 }
 function WindowDismiss({ className, ...props }) {
-  return /* @__PURE__ */ jsx6(ArkWindowCloseTrigger, { "aria-label": "Close", className: cn6(windowCloseTriggerBase, className), ...props });
+  return /* @__PURE__ */ jsx7(ArkWindowCloseTrigger, { "aria-label": "Close", className: cn6(windowCloseTriggerBase, className), ...props });
 }
 function WindowBody({ className, ...props }) {
-  return /* @__PURE__ */ jsx6(ArkWindowBody, { className: cn6(windowBodyBase, className), ...props });
+  return /* @__PURE__ */ jsx7(ArkWindowBody, { className: cn6(windowBodyBase, className), ...props });
 }
 function WindowResizeTrigger({ axis = "se", className, ...props }) {
-  return /* @__PURE__ */ jsx6(ArkWindowResizeTrigger, { axis, className: cn6(windowResizeTriggerBase, className), ...props });
+  return /* @__PURE__ */ jsx7(ArkWindowResizeTrigger, { axis, className: cn6(windowResizeTriggerBase, className), ...props });
 }
 
 // src/badge.tsx
 import { ark as ark2 } from "@ark-ui/react/factory";
 import { badgeVariants, cn as cn7 } from "@cloudvoyant/helical-ui";
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx8 } from "react/jsx-runtime";
 function Badge({ className, variant, color, size, ...props }) {
-  return /* @__PURE__ */ jsx7(ark2.span, { className: cn7(badgeVariants({ variant, color, size }), className), ...props });
+  return /* @__PURE__ */ jsx8(ark2.span, { className: cn7(badgeVariants({ variant, color, size }), className), ...props });
 }
 
 // src/container.tsx
 import { ark as ark3 } from "@ark-ui/react/factory";
 import { containerBase, cn as cn8 } from "@cloudvoyant/helical-ui";
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx9 } from "react/jsx-runtime";
 function Container({ className, ...props }) {
-  return /* @__PURE__ */ jsx8(ark3.div, { className: cn8(containerBase, className), ...props });
+  return /* @__PURE__ */ jsx9(ark3.div, { className: cn8(containerBase, className), ...props });
 }
 
 // src/row.tsx
 import { ark as ark4 } from "@ark-ui/react/factory";
 import { rowBase, cn as cn9 } from "@cloudvoyant/helical-ui";
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { jsx as jsx10 } from "react/jsx-runtime";
 function Row({ className, ...props }) {
-  return /* @__PURE__ */ jsx9(ark4.div, { className: cn9(rowBase, className), ...props });
+  return /* @__PURE__ */ jsx10(ark4.div, { className: cn9(rowBase, className), ...props });
 }
 
 // src/col.tsx
 import { ark as ark5 } from "@ark-ui/react/factory";
 import { colBase, cn as cn10 } from "@cloudvoyant/helical-ui";
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 function Col({ className, ...props }) {
-  return /* @__PURE__ */ jsx10(ark5.div, { className: cn10(colBase, className), ...props });
+  return /* @__PURE__ */ jsx11(ark5.div, { className: cn10(colBase, className), ...props });
 }
 
 // src/center.tsx
 import { ark as ark6 } from "@ark-ui/react/factory";
 import { centerBase, cn as cn11 } from "@cloudvoyant/helical-ui";
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 function Center({ className, ...props }) {
-  return /* @__PURE__ */ jsx11(ark6.div, { className: cn11(centerBase, className), ...props });
+  return /* @__PURE__ */ jsx12(ark6.div, { className: cn11(centerBase, className), ...props });
 }
 
 // src/portal.tsx
@@ -291,9 +548,9 @@ import { Portal as Portal5 } from "@ark-ui/react/portal";
 // src/item.tsx
 import { ark as ark7 } from "@ark-ui/react/factory";
 import { itemVariants, cn as cn12 } from "@cloudvoyant/helical-ui";
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx13 } from "react/jsx-runtime";
 function Item({ className, variant, ...props }) {
-  return /* @__PURE__ */ jsx12(ark7.div, { className: cn12(itemVariants({ variant }), className), ...props });
+  return /* @__PURE__ */ jsx13(ark7.div, { className: cn12(itemVariants({ variant }), className), ...props });
 }
 
 // src/card/root.tsx
@@ -301,66 +558,66 @@ import { ark as ark8 } from "@ark-ui/react/factory";
 import { cardVariants, cn as cn13 } from "@cloudvoyant/helical-ui";
 
 // src/card/context.ts
-import { createContext, useContext } from "react";
-var CardOrientationContext = createContext("vertical");
+import { createContext as createContext2, useContext as useContext2 } from "react";
+var CardOrientationContext = createContext2("vertical");
 function useCardOrientation() {
-  return useContext(CardOrientationContext);
+  return useContext2(CardOrientationContext);
 }
 
 // src/card/root.tsx
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx14 } from "react/jsx-runtime";
 function Card({ className, variant, size, orientation, children, ...props }) {
   const resolvedOrientation = orientation ?? "vertical";
-  return /* @__PURE__ */ jsx13(CardOrientationContext.Provider, { value: resolvedOrientation, children: /* @__PURE__ */ jsx13(ark8.div, { className: cn13(cardVariants({ variant, size, orientation: resolvedOrientation }), className), ...props, children }) });
+  return /* @__PURE__ */ jsx14(CardOrientationContext.Provider, { value: resolvedOrientation, children: /* @__PURE__ */ jsx14(ark8.div, { className: cn13(cardVariants({ variant, size, orientation: resolvedOrientation }), className), ...props, children }) });
 }
 
 // src/card/header.tsx
 import { ark as ark9 } from "@ark-ui/react/factory";
 import { cardHeaderBase, cn as cn14 } from "@cloudvoyant/helical-ui";
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { jsx as jsx15 } from "react/jsx-runtime";
 function CardHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx14(ark9.div, { className: cn14(cardHeaderBase, className), ...props });
+  return /* @__PURE__ */ jsx15(ark9.div, { className: cn14(cardHeaderBase, className), ...props });
 }
 
 // src/card/body.tsx
 import { ark as ark10 } from "@ark-ui/react/factory";
 import { cardBodyBase, cn as cn15 } from "@cloudvoyant/helical-ui";
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 function CardBody({ className, ...props }) {
-  return /* @__PURE__ */ jsx15(ark10.div, { className: cn15(cardBodyBase, className), ...props });
+  return /* @__PURE__ */ jsx16(ark10.div, { className: cn15(cardBodyBase, className), ...props });
 }
 
 // src/card/footer.tsx
 import { ark as ark11 } from "@ark-ui/react/factory";
 import { cardFooterBase, cn as cn16 } from "@cloudvoyant/helical-ui";
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 function CardFooter({ className, ...props }) {
-  return /* @__PURE__ */ jsx16(ark11.div, { className: cn16(cardFooterBase, className), ...props });
+  return /* @__PURE__ */ jsx17(ark11.div, { className: cn16(cardFooterBase, className), ...props });
 }
 
 // src/card/title.tsx
 import { ark as ark12 } from "@ark-ui/react/factory";
 import { cardTitleBase, cn as cn17 } from "@cloudvoyant/helical-ui";
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 function CardTitle({ className, ...props }) {
-  return /* @__PURE__ */ jsx17(ark12.h3, { className: cn17(cardTitleBase, className), ...props });
+  return /* @__PURE__ */ jsx18(ark12.h3, { className: cn17(cardTitleBase, className), ...props });
 }
 
 // src/card/description.tsx
 import { ark as ark13 } from "@ark-ui/react/factory";
 import { cardDescriptionBase, cn as cn18 } from "@cloudvoyant/helical-ui";
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 function CardDescription({ className, ...props }) {
-  return /* @__PURE__ */ jsx18(ark13.p, { className: cn18(cardDescriptionBase, className), ...props });
+  return /* @__PURE__ */ jsx19(ark13.p, { className: cn18(cardDescriptionBase, className), ...props });
 }
 
 // src/card/cover.tsx
 import { ark as ark14 } from "@ark-ui/react/factory";
 import { cardCoverVariants, cn as cn19 } from "@cloudvoyant/helical-ui";
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { jsx as jsx20 } from "react/jsx-runtime";
 function CardCover({ className, variant, orientation, ...props }) {
   const contextOrientation = useCardOrientation();
-  return /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsx20(
     ark14.div,
     {
       className: cn19(cardCoverVariants({ variant, orientation: orientation ?? contextOrientation }), className),
@@ -372,15 +629,15 @@ function CardCover({ className, variant, orientation, ...props }) {
 // src/stack.tsx
 import { ark as ark15 } from "@ark-ui/react/factory";
 import { stackBase, hstackBase, vstackBase, cn as cn20 } from "@cloudvoyant/helical-ui";
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { jsx as jsx21 } from "react/jsx-runtime";
 function Stack({ className, ...props }) {
-  return /* @__PURE__ */ jsx20(ark15.div, { className: cn20(stackBase, className), ...props });
+  return /* @__PURE__ */ jsx21(ark15.div, { className: cn20(stackBase, className), ...props });
 }
 function HStack({ className, ...props }) {
-  return /* @__PURE__ */ jsx20(ark15.div, { className: cn20(hstackBase, className), ...props });
+  return /* @__PURE__ */ jsx21(ark15.div, { className: cn20(hstackBase, className), ...props });
 }
 function VStack({ className, ...props }) {
-  return /* @__PURE__ */ jsx20(ark15.div, { className: cn20(vstackBase, className), ...props });
+  return /* @__PURE__ */ jsx21(ark15.div, { className: cn20(vstackBase, className), ...props });
 }
 
 // src/scroll.tsx
@@ -401,7 +658,7 @@ import {
   scrollCornerBase,
   cn as cn21
 } from "@cloudvoyant/helical-ui";
-import { Fragment, jsx as jsx21, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx22, jsxs as jsxs3 } from "react/jsx-runtime";
 function Scroll({
   className,
   orientation = "vertical",
@@ -413,11 +670,11 @@ function Scroll({
   ...props
 }) {
   return /* @__PURE__ */ jsxs3(ArkRoot, { className: cn21(scrollRootBase, className), ...props, children: [
-    /* @__PURE__ */ jsx21(ArkViewport, { className: cn21(scrollViewportBase, viewportClassName), children: /* @__PURE__ */ jsx21(ArkContent, { className: cn21(scrollContentBase, contentClassName), children }) }),
+    /* @__PURE__ */ jsx22(ArkViewport, { className: cn21(scrollViewportBase, viewportClassName), children: /* @__PURE__ */ jsx22(ArkContent, { className: cn21(scrollContentBase, contentClassName), children }) }),
     variant === "hidden" ? null : /* @__PURE__ */ jsxs3(Fragment, { children: [
-      (orientation === "vertical" || orientation === "both") && /* @__PURE__ */ jsx21(ArkScrollbar, { orientation: "vertical", className: scrollScrollbarBase, children: /* @__PURE__ */ jsx21(ArkThumb, { className: cn21(scrollThumbBase, thumbClassName) }) }),
-      (orientation === "horizontal" || orientation === "both") && /* @__PURE__ */ jsx21(ArkScrollbar, { orientation: "horizontal", className: scrollScrollbarBase, children: /* @__PURE__ */ jsx21(ArkThumb, { className: cn21(scrollThumbBase, thumbClassName) }) }),
-      orientation === "both" && /* @__PURE__ */ jsx21(ArkCorner, { className: scrollCornerBase })
+      (orientation === "vertical" || orientation === "both") && /* @__PURE__ */ jsx22(ArkScrollbar, { orientation: "vertical", className: scrollScrollbarBase, children: /* @__PURE__ */ jsx22(ArkThumb, { className: cn21(scrollThumbBase, thumbClassName) }) }),
+      (orientation === "horizontal" || orientation === "both") && /* @__PURE__ */ jsx22(ArkScrollbar, { orientation: "horizontal", className: scrollScrollbarBase, children: /* @__PURE__ */ jsx22(ArkThumb, { className: cn21(scrollThumbBase, thumbClassName) }) }),
+      orientation === "both" && /* @__PURE__ */ jsx22(ArkCorner, { className: scrollCornerBase })
     ] })
   ] });
 }
@@ -434,28 +691,125 @@ import {
   pageSectionBase,
   cn as cn22
 } from "@cloudvoyant/helical-ui";
-import { jsx as jsx22 } from "react/jsx-runtime";
-function Page({ variant = "default", className, children, ...props }) {
-  return /* @__PURE__ */ jsx22(ark16.div, { "data-slot": "page", className: cn22(pageVariants({ variant }), className), ...props, children });
+import { jsx as jsx23 } from "react/jsx-runtime";
+function Page({
+  variant = "default",
+  paneId,
+  paneTitle,
+  paneDisabled,
+  paneOrder,
+  className,
+  children,
+  ...props
+}) {
+  const pane = useOptionalPaneRegistration({
+    paneId,
+    paneTitle,
+    paneDisabled: paneDisabled ?? !paneId,
+    paneOrder,
+    defaultTitle: "Page"
+  });
+  return /* @__PURE__ */ jsx23(
+    ark16.div,
+    {
+      ref: pane.ref,
+      "data-slot": "page",
+      ...pane.dataAttributes,
+      className: cn22(pageVariants({ variant }), className),
+      ...props,
+      children
+    }
+  );
 }
 function PageGutter({
   side = "left",
   align = "start",
   contentClassName,
+  paneId,
+  paneTitle,
+  paneDisabled,
+  paneOrder,
   className,
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsx22(ark16.div, { "data-slot": "page-gutter-area", className: cn22(pageGutterAreaBase, side === "right" && "[grid-area:right]"), children: /* @__PURE__ */ jsx22(ark16.div, { "data-slot": "page-gutter", className: cn22(pageGutterVariants({ side }), className), ...props, children: /* @__PURE__ */ jsx22(ark16.div, { "data-slot": "page-gutter-content", className: cn22(pageGutterContentVariants({ align }), contentClassName), children }) }) });
+  const pane = useOptionalPaneRegistration({
+    paneId,
+    paneTitle,
+    paneDisabled,
+    paneOrder,
+    defaultTitle: side === "right" ? "Right Gutter" : "Left Gutter"
+  });
+  return /* @__PURE__ */ jsx23(ark16.div, { "data-slot": "page-gutter-area", className: cn22(pageGutterAreaBase, side === "right" && "[grid-area:right]"), children: /* @__PURE__ */ jsx23(
+    ark16.div,
+    {
+      ref: pane.ref,
+      "data-slot": "page-gutter",
+      ...pane.dataAttributes,
+      className: cn22(pageGutterVariants({ side }), className),
+      ...props,
+      children: /* @__PURE__ */ jsx23(ark16.div, { "data-slot": "page-gutter-content", className: cn22(pageGutterContentVariants({ align }), contentClassName), children })
+    }
+  ) });
 }
-function PageContent({ className, children, ...props }) {
-  return /* @__PURE__ */ jsx22(ark16.main, { "data-slot": "page-content", className: cn22(pageContentBase, className), ...props, children });
+function PageContent({
+  paneId,
+  paneTitle,
+  paneDisabled,
+  paneOrder,
+  className,
+  children,
+  ...props
+}) {
+  const pane = useOptionalPaneRegistration({
+    paneId,
+    paneTitle,
+    paneDisabled,
+    paneOrder,
+    defaultTitle: "Main Content"
+  });
+  return /* @__PURE__ */ jsx23(
+    ark16.main,
+    {
+      ref: pane.ref,
+      "data-slot": "page-content",
+      ...pane.dataAttributes,
+      className: cn22(pageContentBase, className),
+      ...props,
+      children
+    }
+  );
 }
 function PageFooter({ className, children, ...props }) {
-  return /* @__PURE__ */ jsx22(ark16.footer, { "data-slot": "page-footer", className: cn22(pageFooterBase, className), ...props, children });
+  return /* @__PURE__ */ jsx23(ark16.footer, { "data-slot": "page-footer", className: cn22(pageFooterBase, className), ...props, children });
 }
-function PageSection({ className, children, ...props }) {
-  return /* @__PURE__ */ jsx22(ark16.section, { "data-slot": "page-section", className: cn22(pageSectionBase, className), ...props, children });
+function PageSection({
+  paneId,
+  paneTitle,
+  paneDisabled,
+  paneOrder,
+  className,
+  children,
+  ...props
+}) {
+  const pane = useOptionalPaneRegistration({
+    paneId,
+    paneTitle,
+    paneDisabled: paneDisabled ?? !paneId,
+    paneOrder,
+    defaultTitle: "Section"
+  });
+  return /* @__PURE__ */ jsx23(
+    ark16.section,
+    {
+      ref: pane.ref,
+      "data-slot": "page-section",
+      ...pane.dataAttributes,
+      className: cn22(pageSectionBase, className),
+      ...props,
+      children
+    }
+  );
 }
 
 // src/splitter.tsx
@@ -473,21 +827,41 @@ import {
   splitterResizeTriggerIndicatorBase,
   cn as cn23
 } from "@cloudvoyant/helical-ui";
-import { jsx as jsx23, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs4 } from "react/jsx-runtime";
 function Splitter({ className, ...props }) {
-  return /* @__PURE__ */ jsx23(ArkSplitterRoot, { className: cn23(splitterRootBase, className), ...props });
+  return /* @__PURE__ */ jsx24(ArkSplitterRoot, { className: cn23(splitterRootBase, className), ...props });
 }
-function SplitterPanel({ className, ...props }) {
-  return /* @__PURE__ */ jsx23(ArkSplitterPanel, { className: cn23(splitterPanelBase, className), ...props });
+function SplitterPanel({
+  paneId,
+  paneTitle,
+  paneDisabled,
+  className,
+  ...props
+}) {
+  const pane = useOptionalPaneRegistration({
+    paneId: paneId ?? (typeof props.id === "string" ? `splitter-${props.id}` : void 0),
+    paneTitle: paneTitle ?? (typeof props.id === "string" ? `Panel ${props.id}` : "Splitter Panel"),
+    paneDisabled,
+    defaultTitle: "Splitter Panel"
+  });
+  return /* @__PURE__ */ jsx24(
+    ArkSplitterPanel,
+    {
+      ref: pane.ref,
+      ...pane.dataAttributes,
+      className: cn23(splitterPanelBase, className),
+      ...props
+    }
+  );
 }
 function SplitterResizeTrigger({ className, children, ...props }) {
   return /* @__PURE__ */ jsxs4(ArkSplitterResizeTrigger, { className: cn23(splitterResizeTriggerBase, className), ...props, children: [
-    /* @__PURE__ */ jsx23("span", { "aria-hidden": true, "data-part": "separator", className: splitterResizeTriggerSeparatorBase }),
+    /* @__PURE__ */ jsx24("span", { "aria-hidden": true, "data-part": "separator", className: splitterResizeTriggerSeparatorBase }),
     children
   ] });
 }
 function SplitterResizeTriggerIndicator({ className, ...props }) {
-  return /* @__PURE__ */ jsx23(ArkSplitterResizeTriggerIndicator, { className: cn23(splitterResizeTriggerIndicatorBase, className), ...props });
+  return /* @__PURE__ */ jsx24(ArkSplitterResizeTriggerIndicator, { className: cn23(splitterResizeTriggerIndicatorBase, className), ...props });
 }
 
 // src/sidebar/Provider.tsx
@@ -512,7 +886,7 @@ function useSidebar() {
 }
 
 // src/sidebar/Provider.tsx
-import { jsx as jsx24 } from "react/jsx-runtime";
+import { jsx as jsx25 } from "react/jsx-runtime";
 var SIDEBAR_COOKIE_NAME = "sidebar_state";
 var SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
 function useIsMobile() {
@@ -594,7 +968,7 @@ function Provider({
     }),
     [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar, isControlled]
   );
-  return /* @__PURE__ */ jsx24(SidebarContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsx25(SidebarContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx25(
     Row,
     {
       "data-slot": "sidebar-wrapper",
@@ -629,22 +1003,33 @@ import {
   sidebarStyles as sidebarStyles2,
   cn as cn25
 } from "@cloudvoyant/helical-ui";
-import { jsx as jsx25, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs5 } from "react/jsx-runtime";
 function Root({
   side = "left",
   variant = "sidebar",
   collapsible = "offcanvas",
+  paneId,
+  paneTitle,
+  paneDisabled,
   className,
   children,
   ...props
 }) {
   const { isMobile, state, open, setOpen, openMobile, setOpenMobile, isControlled } = useSidebar();
+  const pane = useOptionalPaneRegistration({
+    paneId,
+    paneTitle,
+    paneDisabled: paneDisabled || state === "collapsed",
+    defaultTitle: "Sidebar"
+  });
   if (collapsible === "none") {
-    return /* @__PURE__ */ jsx25(
+    return /* @__PURE__ */ jsx26(
       Col,
       {
+        ref: pane.ref,
         "data-slot": "sidebar",
         "data-sidebar": "sidebar",
+        ...pane.dataAttributes,
         className: cn25("h-full w-(--sidebar-width) bg-sidebar text-sidebar-foreground", className),
         ...props,
         children
@@ -671,8 +1056,8 @@ function Root({
         preventDragOnScroll: false,
         ...props,
         children: [
-          !isBottomWidgetSheet && /* @__PURE__ */ jsx25(DrawerBackdrop, { className: sidebarStyles2.mobileBackdropClass }),
-          /* @__PURE__ */ jsx25(DrawerPositioner, { className: sidebarStyles2.mobilePositionerClass, children: /* @__PURE__ */ jsxs5(
+          !isBottomWidgetSheet && /* @__PURE__ */ jsx26(DrawerBackdrop, { className: sidebarStyles2.mobileBackdropClass }),
+          /* @__PURE__ */ jsx26(DrawerPositioner, { className: sidebarStyles2.mobilePositionerClass, children: /* @__PURE__ */ jsxs5(
             DrawerContent,
             {
               "data-sidebar": "sidebar",
@@ -681,11 +1066,11 @@ function Root({
               className: cn25(sidebarStyles2.mobileContentClass, className),
               style: { "--sidebar-width": SIDEBAR_WIDTH_MOBILE },
               children: [
-                /* @__PURE__ */ jsx25(DrawerTitle, { className: "sr-only", children: "Sidebar" }),
-                /* @__PURE__ */ jsx25(DrawerDescription, { className: "sr-only", children: "Displays the mobile sidebar." }),
-                /* @__PURE__ */ jsx25(DrawerCloseTrigger, { className: "hidden" }),
-                isBottomWidgetSheet && /* @__PURE__ */ jsx25(DrawerGrabber, { className: sidebarStyles2.mobileGrabberClass, children: /* @__PURE__ */ jsx25(DrawerGrabberIndicator, { className: sidebarStyles2.mobileGrabberIndicatorClass }) }),
-                /* @__PURE__ */ jsx25("div", { "data-no-drag": true, className: "flex min-h-0 flex-1 flex-col", children: /* @__PURE__ */ jsx25(Col, { className: "h-full w-full", children }) })
+                /* @__PURE__ */ jsx26(DrawerTitle, { className: "sr-only", children: "Sidebar" }),
+                /* @__PURE__ */ jsx26(DrawerDescription, { className: "sr-only", children: "Displays the mobile sidebar." }),
+                /* @__PURE__ */ jsx26(DrawerCloseTrigger, { className: "hidden" }),
+                isBottomWidgetSheet && /* @__PURE__ */ jsx26(DrawerGrabber, { className: sidebarStyles2.mobileGrabberClass, children: /* @__PURE__ */ jsx26(DrawerGrabberIndicator, { className: sidebarStyles2.mobileGrabberIndicatorClass }) }),
+                /* @__PURE__ */ jsx26("div", { "data-no-drag": true, className: "flex min-h-0 flex-1 flex-col", children: /* @__PURE__ */ jsx26(Col, { className: "h-full w-full", children }) })
               ]
             }
           ) })
@@ -703,7 +1088,7 @@ function Root({
       "data-side": side,
       "data-slot": "sidebar",
       children: [
-        /* @__PURE__ */ jsx25(
+        /* @__PURE__ */ jsx26(
           "div",
           {
             "data-slot": "sidebar-gap",
@@ -714,10 +1099,12 @@ function Root({
             )
           }
         ),
-        /* @__PURE__ */ jsx25(
+        /* @__PURE__ */ jsx26(
           "div",
           {
+            ref: pane.ref,
             "data-slot": "sidebar-container",
+            ...pane.dataAttributes,
             className: cn25(
               sidebarStyles2.containerClass,
               side === "left" ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]" : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
@@ -725,7 +1112,7 @@ function Root({
               className
             ),
             ...props,
-            children: /* @__PURE__ */ jsx25(
+            children: /* @__PURE__ */ jsx26(
               "div",
               {
                 "data-sidebar": "sidebar",
@@ -744,9 +1131,9 @@ function Root({
 
 // src/sidebar/Header.tsx
 import { sidebarStyles as sidebarStyles3, cn as cn26 } from "@cloudvoyant/helical-ui";
-import { jsx as jsx26 } from "react/jsx-runtime";
+import { jsx as jsx27 } from "react/jsx-runtime";
 function Header({ className, ...props }) {
-  return /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsx27(
     Col,
     {
       "data-slot": "sidebar-header",
@@ -759,9 +1146,9 @@ function Header({ className, ...props }) {
 
 // src/sidebar/Footer.tsx
 import { sidebarStyles as sidebarStyles4, cn as cn27 } from "@cloudvoyant/helical-ui";
-import { jsx as jsx27 } from "react/jsx-runtime";
+import { jsx as jsx28 } from "react/jsx-runtime";
 function Footer({ className, ...props }) {
-  return /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsx28(
     Col,
     {
       "data-slot": "sidebar-footer",
@@ -775,9 +1162,9 @@ function Footer({ className, ...props }) {
 // src/sidebar/Separator.tsx
 import { ark as ark17 } from "@ark-ui/react/factory";
 import { sidebarStyles as sidebarStyles5, cn as cn28 } from "@cloudvoyant/helical-ui";
-import { jsx as jsx28 } from "react/jsx-runtime";
+import { jsx as jsx29 } from "react/jsx-runtime";
 function Separator({ className, ...props }) {
-  return /* @__PURE__ */ jsx28(
+  return /* @__PURE__ */ jsx29(
     ark17.div,
     {
       "data-slot": "sidebar-separator",
@@ -791,9 +1178,9 @@ function Separator({ className, ...props }) {
 
 // src/sidebar/Content.tsx
 import { sidebarStyles as sidebarStyles6, cn as cn29 } from "@cloudvoyant/helical-ui";
-import { jsx as jsx29 } from "react/jsx-runtime";
+import { jsx as jsx30 } from "react/jsx-runtime";
 function Content({ className, ...props }) {
-  return /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsx30(
     Col,
     {
       "data-slot": "sidebar-content",
@@ -806,11 +1193,11 @@ function Content({ className, ...props }) {
 
 // src/sidebar/Group.tsx
 import { sidebarStyles as sidebarStyles7, cn as cn30 } from "@cloudvoyant/helical-ui";
-import { jsx as jsx30, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs6 } from "react/jsx-runtime";
 function Group({ label, className, children, ...props }) {
   return /* @__PURE__ */ jsxs6(Col, { "data-slot": "sidebar-group", "data-sidebar": "group", className: cn30(sidebarStyles7.groupClass, className), ...props, children: [
-    label && /* @__PURE__ */ jsx30("div", { "data-slot": "sidebar-group-label", "data-sidebar": "group-label", className: cn30(sidebarStyles7.groupLabelClass), children: label }),
-    /* @__PURE__ */ jsx30(
+    label && /* @__PURE__ */ jsx31("div", { "data-slot": "sidebar-group-label", "data-sidebar": "group-label", className: cn30(sidebarStyles7.groupLabelClass), children: label }),
+    /* @__PURE__ */ jsx31(
       "div",
       {
         "data-slot": "sidebar-group-content",
@@ -825,9 +1212,9 @@ function Group({ label, className, children, ...props }) {
 // src/sidebar/GroupAction.tsx
 import { ark as ark18 } from "@ark-ui/react/factory";
 import { sidebarStyles as sidebarStyles8, cn as cn31 } from "@cloudvoyant/helical-ui";
-import { jsx as jsx31 } from "react/jsx-runtime";
+import { jsx as jsx32 } from "react/jsx-runtime";
 function GroupAction({ className, asChild = false, ...props }) {
-  return /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsx32(
     ark18.button,
     {
       "data-slot": "sidebar-group-action",
@@ -843,9 +1230,9 @@ function GroupAction({ className, asChild = false, ...props }) {
 // src/sidebar/Menu.tsx
 import { ark as ark19 } from "@ark-ui/react/factory";
 import { sidebarStyles as sidebarStyles9, cn as cn32 } from "@cloudvoyant/helical-ui";
-import { jsx as jsx32 } from "react/jsx-runtime";
+import { jsx as jsx33 } from "react/jsx-runtime";
 function Menu({ className, ...props }) {
-  return /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsx33(
     ark19.ul,
     {
       "data-slot": "sidebar-menu",
@@ -859,9 +1246,9 @@ function Menu({ className, ...props }) {
 // src/sidebar/MenuItem.tsx
 import { ark as ark20 } from "@ark-ui/react/factory";
 import { sidebarStyles as sidebarStyles10, cn as cn33 } from "@cloudvoyant/helical-ui";
-import { jsx as jsx33 } from "react/jsx-runtime";
+import { jsx as jsx34 } from "react/jsx-runtime";
 function MenuItem({ className, ...props }) {
-  return /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsx34(
     ark20.li,
     {
       "data-slot": "sidebar-menu-item",
@@ -881,7 +1268,7 @@ import {
   TooltipContent as ArkTooltipContent2
 } from "@ark-ui/react/tooltip";
 import { sidebarMenuButtonVariants, sidebarStyles as sidebarStyles11, cn as cn34 } from "@cloudvoyant/helical-ui";
-import { jsx as jsx34, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs7 } from "react/jsx-runtime";
 function MenuButton({
   asChild = false,
   isActive = false,
@@ -893,7 +1280,7 @@ function MenuButton({
   ...props
 }) {
   const { isMobile, state } = useSidebar();
-  const button = /* @__PURE__ */ jsx34(
+  const button = /* @__PURE__ */ jsx35(
     ark21.button,
     {
       "data-slot": "sidebar-menu-button",
@@ -912,14 +1299,14 @@ function MenuButton({
   }
   const tooltipContent = typeof tooltip === "string" ? { children: tooltip } : tooltip;
   return /* @__PURE__ */ jsxs7(TooltipRoot, { openDelay: 0, positioning: { placement: "right", gutter: 8 }, children: [
-    /* @__PURE__ */ jsx34(TooltipTrigger2, { asChild: true, children: button }),
-    /* @__PURE__ */ jsx34(TooltipPositioner, { children: /* @__PURE__ */ jsx34(ArkTooltipContent2, { className: cn34(sidebarStyles11.tooltipContentClass), ...tooltipContent }) })
+    /* @__PURE__ */ jsx35(TooltipTrigger2, { asChild: true, children: button }),
+    /* @__PURE__ */ jsx35(TooltipPositioner, { children: /* @__PURE__ */ jsx35(ArkTooltipContent2, { className: cn34(sidebarStyles11.tooltipContentClass), ...tooltipContent }) })
   ] });
 }
 
 // src/sidebar/MenuLink.tsx
 import { sidebarStyles as sidebarStyles12, cn as cn35 } from "@cloudvoyant/helical-ui";
-import { Fragment as Fragment2, jsx as jsx35, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx36, jsxs as jsxs8 } from "react/jsx-runtime";
 function MenuLink({
   icon,
   href,
@@ -933,9 +1320,9 @@ function MenuLink({
 }) {
   const content = /* @__PURE__ */ jsxs8(Fragment2, { children: [
     icon,
-    children != null && /* @__PURE__ */ jsx35("span", { children })
+    children != null && /* @__PURE__ */ jsx36("span", { children })
   ] });
-  return /* @__PURE__ */ jsx35("li", { "data-slot": "sidebar-menu-item", "data-sidebar": "menu-item", className: cn35(sidebarStyles12.menuItemClass), children: href == null ? /* @__PURE__ */ jsx35(
+  return /* @__PURE__ */ jsx36("li", { "data-slot": "sidebar-menu-item", "data-sidebar": "menu-item", className: cn35(sidebarStyles12.menuItemClass), children: href == null ? /* @__PURE__ */ jsx36(
     MenuButton,
     {
       isActive,
@@ -946,20 +1333,20 @@ function MenuLink({
       onClick,
       children: content
     }
-  ) : /* @__PURE__ */ jsx35(MenuButton, { asChild: true, isActive, variant, size, tooltip, className, children: /* @__PURE__ */ jsx35("a", { href, onClick, children: content }) }) });
+  ) : /* @__PURE__ */ jsx36(MenuButton, { asChild: true, isActive, variant, size, tooltip, className, children: /* @__PURE__ */ jsx36("a", { href, onClick, children: content }) }) });
 }
 
 // src/sidebar/MenuAction.tsx
 import { ark as ark22 } from "@ark-ui/react/factory";
 import { sidebarStyles as sidebarStyles13, cn as cn36 } from "@cloudvoyant/helical-ui";
-import { jsx as jsx36 } from "react/jsx-runtime";
+import { jsx as jsx37 } from "react/jsx-runtime";
 function MenuAction({
   className,
   asChild = false,
   showOnHover = false,
   ...props
 }) {
-  return /* @__PURE__ */ jsx36(
+  return /* @__PURE__ */ jsx37(
     ark22.button,
     {
       "data-slot": "sidebar-menu-action",
@@ -979,9 +1366,9 @@ function MenuAction({
 // src/sidebar/MenuBadge.tsx
 import { ark as ark23 } from "@ark-ui/react/factory";
 import { sidebarStyles as sidebarStyles14, cn as cn37 } from "@cloudvoyant/helical-ui";
-import { jsx as jsx37 } from "react/jsx-runtime";
+import { jsx as jsx38 } from "react/jsx-runtime";
 function MenuBadge({ className, ...props }) {
-  return /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsx38(
     ark23.div,
     {
       "data-slot": "sidebar-menu-badge",
@@ -996,7 +1383,7 @@ function MenuBadge({ className, ...props }) {
 import * as React3 from "react";
 import { ark as ark24 } from "@ark-ui/react/factory";
 import { sidebarStyles as sidebarStyles15, cn as cn38 } from "@cloudvoyant/helical-ui";
-import { jsx as jsx38, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx39, jsxs as jsxs9 } from "react/jsx-runtime";
 function MenuSkeleton({ className, showIcon = false, ...props }) {
   const width = React3.useMemo(() => `${Math.floor(Math.random() * 40) + 50}%`, []);
   return /* @__PURE__ */ jsxs9(
@@ -1007,14 +1394,14 @@ function MenuSkeleton({ className, showIcon = false, ...props }) {
       className: cn38(sidebarStyles15.menuSkeletonClass, className),
       ...props,
       children: [
-        showIcon && /* @__PURE__ */ jsx38(
+        showIcon && /* @__PURE__ */ jsx39(
           ark24.div,
           {
             className: "size-4 shrink-0 animate-pulse rounded-md bg-sidebar-accent",
             "data-sidebar": "menu-skeleton-icon"
           }
         ),
-        /* @__PURE__ */ jsx38(
+        /* @__PURE__ */ jsx39(
           ark24.div,
           {
             className: "h-4 max-w-(--skeleton-width) flex-1 animate-pulse rounded-md bg-sidebar-accent",
@@ -1030,9 +1417,9 @@ function MenuSkeleton({ className, showIcon = false, ...props }) {
 // src/sidebar/MenuSub.tsx
 import { ark as ark25 } from "@ark-ui/react/factory";
 import { sidebarStyles as sidebarStyles16, cn as cn39 } from "@cloudvoyant/helical-ui";
-import { jsx as jsx39 } from "react/jsx-runtime";
+import { jsx as jsx40 } from "react/jsx-runtime";
 function MenuSub({ className, ...props }) {
-  return /* @__PURE__ */ jsx39(
+  return /* @__PURE__ */ jsx40(
     ark25.ul,
     {
       "data-slot": "sidebar-menu-sub",
@@ -1046,9 +1433,9 @@ function MenuSub({ className, ...props }) {
 // src/sidebar/MenuSubItem.tsx
 import { ark as ark26 } from "@ark-ui/react/factory";
 import { sidebarStyles as sidebarStyles17, cn as cn40 } from "@cloudvoyant/helical-ui";
-import { jsx as jsx40 } from "react/jsx-runtime";
+import { jsx as jsx41 } from "react/jsx-runtime";
 function MenuSubItem({ className, ...props }) {
-  return /* @__PURE__ */ jsx40(
+  return /* @__PURE__ */ jsx41(
     ark26.li,
     {
       "data-slot": "sidebar-menu-sub-item",
@@ -1062,7 +1449,7 @@ function MenuSubItem({ className, ...props }) {
 // src/sidebar/MenuSubButton.tsx
 import { ark as ark27 } from "@ark-ui/react/factory";
 import { sidebarStyles as sidebarStyles18, cn as cn41 } from "@cloudvoyant/helical-ui";
-import { jsx as jsx41 } from "react/jsx-runtime";
+import { jsx as jsx42 } from "react/jsx-runtime";
 function MenuSubButton({
   asChild = false,
   size = "md",
@@ -1070,7 +1457,7 @@ function MenuSubButton({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx41(
+  return /* @__PURE__ */ jsx42(
     ark27.a,
     {
       "data-slot": "sidebar-menu-sub-button",
@@ -1087,10 +1474,10 @@ function MenuSubButton({
 // src/sidebar/Trigger.tsx
 import { ark as ark28 } from "@ark-ui/react/factory";
 import { sidebarStyles as sidebarStyles19, cn as cn42 } from "@cloudvoyant/helical-ui";
-import { jsx as jsx42 } from "react/jsx-runtime";
+import { jsx as jsx43 } from "react/jsx-runtime";
 function Trigger({ className, onClick, children, ...props }) {
   const { toggleSidebar } = useSidebar();
-  return /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsx43(
     ark28.button,
     {
       "data-sidebar": "trigger",
@@ -1111,10 +1498,10 @@ function Trigger({ className, onClick, children, ...props }) {
 // src/sidebar/Rail.tsx
 import { ark as ark29 } from "@ark-ui/react/factory";
 import { sidebarStyles as sidebarStyles20, cn as cn43 } from "@cloudvoyant/helical-ui";
-import { jsx as jsx43 } from "react/jsx-runtime";
+import { jsx as jsx44 } from "react/jsx-runtime";
 function Rail({ className, ...props }) {
   const { toggleSidebar } = useSidebar();
-  return /* @__PURE__ */ jsx43(
+  return /* @__PURE__ */ jsx44(
     ark29.button,
     {
       "data-sidebar": "rail",
@@ -1133,17 +1520,17 @@ function Rail({ className, ...props }) {
 // src/sidebar/Inset.tsx
 import { ark as ark30 } from "@ark-ui/react/factory";
 import { sidebarStyles as sidebarStyles21, cn as cn44 } from "@cloudvoyant/helical-ui";
-import { jsx as jsx44 } from "react/jsx-runtime";
+import { jsx as jsx45 } from "react/jsx-runtime";
 function Inset({ className, ...props }) {
-  return /* @__PURE__ */ jsx44(ark30.main, { "data-slot": "sidebar-inset", className: cn44(sidebarStyles21.insetClass, className), ...props });
+  return /* @__PURE__ */ jsx45(ark30.main, { "data-slot": "sidebar-inset", className: cn44(sidebarStyles21.insetClass, className), ...props });
 }
 
 // src/sidebar/Input.tsx
 import { ark as ark31 } from "@ark-ui/react/factory";
 import { sidebarStyles as sidebarStyles22, cn as cn45 } from "@cloudvoyant/helical-ui";
-import { jsx as jsx45 } from "react/jsx-runtime";
+import { jsx as jsx46 } from "react/jsx-runtime";
 function Input({ className, ...props }) {
-  return /* @__PURE__ */ jsx45(
+  return /* @__PURE__ */ jsx46(
     ark31.input,
     {
       "data-slot": "sidebar-input",
@@ -1173,21 +1560,21 @@ import {
   tabsContentBase,
   cn as cn46
 } from "@cloudvoyant/helical-ui";
-import { jsx as jsx46, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx47, jsxs as jsxs10 } from "react/jsx-runtime";
 function Tabs({ className, lazyMount = true, unmountOnExit = true, ...props }) {
-  return /* @__PURE__ */ jsx46(TabsRoot, { lazyMount, unmountOnExit, className: cn46(tabsRootBase, className), ...props });
+  return /* @__PURE__ */ jsx47(TabsRoot, { lazyMount, unmountOnExit, className: cn46(tabsRootBase, className), ...props });
 }
 function TabsList({ variant = "default", className, children, ...props }) {
   return /* @__PURE__ */ jsxs10(TabList, { className: cn46(tabsListBase, tabsListVariants({ variant }), className), ...props, children: [
     children,
-    /* @__PURE__ */ jsx46(TabIndicator, { className: cn46(tabsIndicatorBase, tabsIndicatorVariants({ variant })) })
+    /* @__PURE__ */ jsx47(TabIndicator, { className: cn46(tabsIndicatorBase, tabsIndicatorVariants({ variant })) })
   ] });
 }
 function TabsTrigger({ className, ...props }) {
-  return /* @__PURE__ */ jsx46(TabTrigger, { className: cn46(tabsTriggerBase, className), ...props });
+  return /* @__PURE__ */ jsx47(TabTrigger, { className: cn46(tabsTriggerBase, className), ...props });
 }
 function TabsContent({ className, ...props }) {
-  return /* @__PURE__ */ jsx46(TabContent, { className: cn46(tabsContentBase, className), ...props });
+  return /* @__PURE__ */ jsx47(TabContent, { className: cn46(tabsContentBase, className), ...props });
 }
 var useTabs = useTabsContext;
 
@@ -1208,13 +1595,13 @@ import {
   paginationEllipsisBase,
   cn as cn47
 } from "@cloudvoyant/helical-ui";
-import { jsx as jsx47, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx48, jsxs as jsxs11 } from "react/jsx-runtime";
 function Pagination({ className, ...props }) {
-  return /* @__PURE__ */ jsx47(ArkPaginationRoot, { className: cn47(paginationRootBase, className), ...props });
+  return /* @__PURE__ */ jsx48(ArkPaginationRoot, { className: cn47(paginationRootBase, className), ...props });
 }
 function PaginationPrevious(props) {
-  return /* @__PURE__ */ jsx47(PaginationPrevTrigger, { asChild: true, ...props, children: /* @__PURE__ */ jsxs11(ark32.button, { className: cn47(paginationTriggerBase), children: [
-    /* @__PURE__ */ jsx47(
+  return /* @__PURE__ */ jsx48(PaginationPrevTrigger, { asChild: true, ...props, children: /* @__PURE__ */ jsxs11(ark32.button, { className: cn47(paginationTriggerBase), children: [
+    /* @__PURE__ */ jsx48(
       "svg",
       {
         viewBox: "0 0 24 24",
@@ -1224,16 +1611,16 @@ function PaginationPrevious(props) {
         strokeLinecap: "round",
         strokeLinejoin: "round",
         "aria-hidden": "true",
-        children: /* @__PURE__ */ jsx47("path", { d: "m15 18-6-6 6-6" })
+        children: /* @__PURE__ */ jsx48("path", { d: "m15 18-6-6 6-6" })
       }
     ),
     "Previous"
   ] }) });
 }
 function PaginationNext(props) {
-  return /* @__PURE__ */ jsx47(PaginationNextTrigger, { asChild: true, ...props, children: /* @__PURE__ */ jsxs11(ark32.button, { className: cn47(paginationTriggerBase), children: [
+  return /* @__PURE__ */ jsx48(PaginationNextTrigger, { asChild: true, ...props, children: /* @__PURE__ */ jsxs11(ark32.button, { className: cn47(paginationTriggerBase), children: [
     "Next",
-    /* @__PURE__ */ jsx47(
+    /* @__PURE__ */ jsx48(
       "svg",
       {
         viewBox: "0 0 24 24",
@@ -1243,21 +1630,21 @@ function PaginationNext(props) {
         strokeLinecap: "round",
         strokeLinejoin: "round",
         "aria-hidden": "true",
-        children: /* @__PURE__ */ jsx47("path", { d: "m9 18 6-6-6-6" })
+        children: /* @__PURE__ */ jsx48("path", { d: "m9 18 6-6-6-6" })
       }
     )
   ] }) });
 }
 function PaginationItem({ className, children, ...rest }) {
-  return /* @__PURE__ */ jsx47(ArkPaginationItem, { asChild: true, ...rest, children: /* @__PURE__ */ jsx47(ark32.button, { className: cn47(paginationItemBase, className), children }) });
+  return /* @__PURE__ */ jsx48(ArkPaginationItem, { asChild: true, ...rest, children: /* @__PURE__ */ jsx48(ark32.button, { className: cn47(paginationItemBase, className), children }) });
 }
 function PaginationItems() {
-  return /* @__PURE__ */ jsx47(ArkPaginationContext, { children: ({ pages }) => pages.map(
-    (page, index) => page.type === "page" ? /* @__PURE__ */ jsx47(PaginationItem, { type: "page", value: page.value, children: page.value }, page.value) : /* @__PURE__ */ jsx47(PaginationEllipsis, { index }, `ellipsis-${index}`)
+  return /* @__PURE__ */ jsx48(ArkPaginationContext, { children: ({ pages }) => pages.map(
+    (page, index) => page.type === "page" ? /* @__PURE__ */ jsx48(PaginationItem, { type: "page", value: page.value, children: page.value }, page.value) : /* @__PURE__ */ jsx48(PaginationEllipsis, { index }, `ellipsis-${index}`)
   ) });
 }
 function PaginationEllipsis({ className, ...rest }) {
-  return /* @__PURE__ */ jsx47(ArkPaginationEllipsis, { className: cn47(paginationEllipsisBase, className), ...rest, children: /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsx48(ArkPaginationEllipsis, { className: cn47(paginationEllipsisBase, className), ...rest, children: /* @__PURE__ */ jsxs11(
     "svg",
     {
       viewBox: "0 0 24 24",
@@ -1268,9 +1655,9 @@ function PaginationEllipsis({ className, ...rest }) {
       strokeLinejoin: "round",
       "aria-hidden": "true",
       children: [
-        /* @__PURE__ */ jsx47("circle", { cx: "12", cy: "12", r: "1" }),
-        /* @__PURE__ */ jsx47("circle", { cx: "19", cy: "12", r: "1" }),
-        /* @__PURE__ */ jsx47("circle", { cx: "5", cy: "12", r: "1" })
+        /* @__PURE__ */ jsx48("circle", { cx: "12", cy: "12", r: "1" }),
+        /* @__PURE__ */ jsx48("circle", { cx: "19", cy: "12", r: "1" }),
+        /* @__PURE__ */ jsx48("circle", { cx: "5", cy: "12", r: "1" })
       ]
     }
   ) });
@@ -1330,7 +1717,7 @@ import {
   cn as cn48
 } from "@cloudvoyant/helical-ui";
 import { navbarMenuTriggerStyle as navbarMenuTriggerStyle2 } from "@cloudvoyant/helical-ui";
-import { Fragment as Fragment3, jsx as jsx48, jsxs as jsxs12 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx49, jsxs as jsxs12 } from "react/jsx-runtime";
 var SCROLL_THRESHOLD = 24;
 function resolveScrollContainer(el) {
   for (let n = el; n; n = n.parentElement) {
@@ -1390,7 +1777,7 @@ function NavbarProvider({ defaultOpen = false, children }) {
     }),
     [id, open, scrolled, hovered, slots, setSlot]
   );
-  return /* @__PURE__ */ jsx48(NavbarContext.Provider, { value: contextValue, children });
+  return /* @__PURE__ */ jsx49(NavbarContext.Provider, { value: contextValue, children });
 }
 function Navbar({
   variant = "sticky",
@@ -1426,7 +1813,7 @@ function Navbar({
       el.style.overflow = prev;
     };
   }, [base.open]);
-  return /* @__PURE__ */ jsx48(NavbarContext.Provider, { value, children: /* @__PURE__ */ jsx48(
+  return /* @__PURE__ */ jsx49(NavbarContext.Provider, { value, children: /* @__PURE__ */ jsx49(
     "header",
     {
       ref: headerRef,
@@ -1450,7 +1837,7 @@ function Navbar({
 }
 function NavbarActivationArea({ className, children, ...props }) {
   const { setHovered } = useNavbar();
-  return /* @__PURE__ */ jsx48(
+  return /* @__PURE__ */ jsx49(
     ark33.div,
     {
       "data-slot": "navbar-activation-area",
@@ -1464,7 +1851,7 @@ function NavbarActivationArea({ className, children, ...props }) {
 }
 function NavbarBrand({ className, children, ...props }) {
   useNavbarSlot("brand", children);
-  return /* @__PURE__ */ jsx48(ark33.div, { "data-slot": "navbar-brand", className: cn48(navbarBrandBase, className), ...props, children });
+  return /* @__PURE__ */ jsx49(ark33.div, { "data-slot": "navbar-brand", className: cn48(navbarBrandBase, className), ...props, children });
 }
 function NavbarMenu({
   placement = "center",
@@ -1474,7 +1861,7 @@ function NavbarMenu({
 }) {
   const { scrolled, density, variant } = useNavbar();
   const menuDensity = density === "compact" || variant === "shrink" && scrolled ? "compact" : "relaxed";
-  return /* @__PURE__ */ jsx48(NavbarMenuStyleContext.Provider, { value: { density: menuDensity, variant: "default", inContent: false }, children: /* @__PURE__ */ jsx48(
+  return /* @__PURE__ */ jsx49(NavbarMenuStyleContext.Provider, { value: { density: menuDensity, variant: "default", inContent: false }, children: /* @__PURE__ */ jsx49(
     ark33.div,
     {
       "data-slot": "navbar-menu",
@@ -1482,13 +1869,13 @@ function NavbarMenu({
       className: cn48(navbarMenuBase, navbarMenuPlacementVariants({ placement }), className),
       children: /* @__PURE__ */ jsxs12(ArkNavMenuRoot, { "data-density": menuDensity, className: cn48(navbarMenuRootBase), ...props, children: [
         children,
-        /* @__PURE__ */ jsx48(ArkNavMenuViewportPositioner, { className: cn48(navbarMenuViewportPositionerBase), children: /* @__PURE__ */ jsx48(ArkNavMenuViewport, { className: cn48(navbarMenuViewportBase) }) })
+        /* @__PURE__ */ jsx49(ArkNavMenuViewportPositioner, { className: cn48(navbarMenuViewportPositionerBase), children: /* @__PURE__ */ jsx49(ArkNavMenuViewport, { className: cn48(navbarMenuViewportBase) }) })
       ] })
     }
   ) });
 }
 function NavbarMenuList({ className, children, ...props }) {
-  return /* @__PURE__ */ jsx48(ArkNavMenuList, { className: cn48(navbarMenuListBase, className), ...props, children });
+  return /* @__PURE__ */ jsx49(ArkNavMenuList, { className: cn48(navbarMenuListBase, className), ...props, children });
 }
 function NavbarMenuItem({
   variant = "default",
@@ -1496,11 +1883,11 @@ function NavbarMenuItem({
   ...props
 }) {
   const { density } = React4.useContext(NavbarMenuStyleContext);
-  return /* @__PURE__ */ jsx48(NavbarMenuStyleContext.Provider, { value: { density, variant, inContent: false }, children: /* @__PURE__ */ jsx48(ArkNavMenuItem, { "data-variant": variant, className: cn48(navbarMenuItemBase, className), ...props }) });
+  return /* @__PURE__ */ jsx49(NavbarMenuStyleContext.Provider, { value: { density, variant, inContent: false }, children: /* @__PURE__ */ jsx49(ArkNavMenuItem, { "data-variant": variant, className: cn48(navbarMenuItemBase, className), ...props }) });
 }
 function NavbarMenuTrigger({ asChild, className, children, ...props }) {
   const { density, variant } = React4.useContext(NavbarMenuStyleContext);
-  const chevron = /* @__PURE__ */ jsx48(
+  const chevron = /* @__PURE__ */ jsx49(
     "svg",
     {
       className: "relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180",
@@ -1511,10 +1898,10 @@ function NavbarMenuTrigger({ asChild, className, children, ...props }) {
       strokeWidth: "2",
       strokeLinecap: "round",
       strokeLinejoin: "round",
-      children: /* @__PURE__ */ jsx48("path", { d: "m6 9 6 6 6-6" })
+      children: /* @__PURE__ */ jsx49("path", { d: "m6 9 6 6 6-6" })
     }
   );
-  return /* @__PURE__ */ jsx48(
+  return /* @__PURE__ */ jsx49(
     ArkNavMenuTrigger,
     {
       asChild,
@@ -1528,18 +1915,18 @@ function NavbarMenuTrigger({ asChild, className, children, ...props }) {
   );
 }
 function NavbarMenuContent({ className, children, ...props }) {
-  return /* @__PURE__ */ jsx48(NavbarMenuStyleContext.Provider, { value: { density: "relaxed", variant: "default", inContent: true }, children: /* @__PURE__ */ jsx48(ArkNavMenuContent, { className: cn48(navbarMenuContentBase, className), ...props, children }) });
+  return /* @__PURE__ */ jsx49(NavbarMenuStyleContext.Provider, { value: { density: "relaxed", variant: "default", inContent: true }, children: /* @__PURE__ */ jsx49(ArkNavMenuContent, { className: cn48(navbarMenuContentBase, className), ...props, children }) });
 }
 function NavbarMenuLink({ className, children, ...props }) {
   const { density, variant, inContent } = React4.useContext(NavbarMenuStyleContext);
   const classes = inContent ? cn48(navbarMenuLinkBase, className) : cn48(navbarMenuTriggerStyle({ density, variant }), className);
-  return /* @__PURE__ */ jsx48(ArkNavMenuLink, { className: classes, ...props, children });
+  return /* @__PURE__ */ jsx49(ArkNavMenuLink, { className: classes, ...props, children });
 }
 function NavbarMobileMenu({ className, children, ...props }) {
-  return /* @__PURE__ */ jsx48(CollapsibleRoot, { "data-slot": "navbar-mobile-menu", className: cn48("group", className), ...props, children });
+  return /* @__PURE__ */ jsx49(CollapsibleRoot, { "data-slot": "navbar-mobile-menu", className: cn48("group", className), ...props, children });
 }
 function NavbarMobileMenuTrigger({ className, children, ...props }) {
-  return /* @__PURE__ */ jsx48(CollapsibleTrigger, { asChild: true, children: /* @__PURE__ */ jsxs12(
+  return /* @__PURE__ */ jsx49(CollapsibleTrigger, { asChild: true, children: /* @__PURE__ */ jsxs12(
     "button",
     {
       type: "button",
@@ -1548,7 +1935,7 @@ function NavbarMobileMenuTrigger({ className, children, ...props }) {
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsx48(
+        /* @__PURE__ */ jsx49(
           "svg",
           {
             className: "size-4 transition-transform duration-200 group-data-[state=open]:rotate-180",
@@ -1559,7 +1946,7 @@ function NavbarMobileMenuTrigger({ className, children, ...props }) {
             strokeWidth: "2",
             strokeLinecap: "round",
             strokeLinejoin: "round",
-            children: /* @__PURE__ */ jsx48("path", { d: "m6 9 6 6 6-6" })
+            children: /* @__PURE__ */ jsx49("path", { d: "m6 9 6 6 6-6" })
           }
         )
       ]
@@ -1567,17 +1954,17 @@ function NavbarMobileMenuTrigger({ className, children, ...props }) {
   ) });
 }
 function NavbarMobileMenuContent({ className, children, ...props }) {
-  return /* @__PURE__ */ jsx48(CollapsibleContent, { children: /* @__PURE__ */ jsx48("div", { "data-slot": "navbar-mobile-menu-content", className: cn48(navbarMobileMenuContentBase, className), ...props, children }) });
+  return /* @__PURE__ */ jsx49(CollapsibleContent, { children: /* @__PURE__ */ jsx49("div", { "data-slot": "navbar-mobile-menu-content", className: cn48(navbarMobileMenuContentBase, className), ...props, children }) });
 }
 function NavbarMenuViewport({ className, ...props }) {
-  return /* @__PURE__ */ jsx48(ArkNavMenuViewport, { className: cn48(navbarMenuViewportBase, className), ...props });
+  return /* @__PURE__ */ jsx49(ArkNavMenuViewport, { className: cn48(navbarMenuViewportBase, className), ...props });
 }
 function NavbarMenuIndicator({ className, ...props }) {
-  return /* @__PURE__ */ jsx48(ArkNavMenuIndicator, { className: cn48(navbarMenuIndicatorBase, className), ...props });
+  return /* @__PURE__ */ jsx49(ArkNavMenuIndicator, { className: cn48(navbarMenuIndicatorBase, className), ...props });
 }
 function NavbarActions({ className, children, ...props }) {
   useNavbarSlot("actions", children);
-  return /* @__PURE__ */ jsx48(ark33.div, { "data-slot": "navbar-actions", className: cn48(navbarActionsBase, className), ...props, children });
+  return /* @__PURE__ */ jsx49(ark33.div, { "data-slot": "navbar-actions", className: cn48(navbarActionsBase, className), ...props, children });
 }
 function NavbarTrigger({
   className,
@@ -1586,7 +1973,7 @@ function NavbarTrigger({
   ...props
 }) {
   const { id, open, setOpen, floating } = useNavbar();
-  return /* @__PURE__ */ jsx48(
+  return /* @__PURE__ */ jsx49(
     "button",
     {
       type: "button",
@@ -1609,9 +1996,9 @@ function NavbarTrigger({
           strokeLinejoin: "round",
           "aria-hidden": "true",
           children: [
-            /* @__PURE__ */ jsx48("line", { x1: "4", x2: "20", y1: "6", y2: "6" }),
-            /* @__PURE__ */ jsx48("line", { x1: "4", x2: "20", y1: "12", y2: "12" }),
-            /* @__PURE__ */ jsx48("line", { x1: "4", x2: "20", y1: "18", y2: "18" })
+            /* @__PURE__ */ jsx49("line", { x1: "4", x2: "20", y1: "6", y2: "6" }),
+            /* @__PURE__ */ jsx49("line", { x1: "4", x2: "20", y1: "12", y2: "12" }),
+            /* @__PURE__ */ jsx49("line", { x1: "4", x2: "20", y1: "18", y2: "18" })
           ]
         }
       )
@@ -1628,9 +2015,9 @@ function NavbarMobileOverlay({ className, children, ...props }) {
     document.addEventListener("keydown", onKeydown);
     return () => document.removeEventListener("keydown", onKeydown);
   }, [open, setOpen]);
-  return /* @__PURE__ */ jsx48(Portal6, { container: portalRef, children: /* @__PURE__ */ jsxs12(DialogRoot, { open, lazyMount: true, unmountOnExit: true, onOpenChange: ({ open: open2 }) => setOpen(open2), preventScroll: false, children: [
-    /* @__PURE__ */ jsx48(DialogBackdrop2, { className: "absolute inset-0 z-[100] bg-background/60 backdrop-blur-sm" }),
-    /* @__PURE__ */ jsx48(DialogPositioner, { className: "absolute inset-0 z-[100]", children: /* @__PURE__ */ jsxs12(
+  return /* @__PURE__ */ jsx49(Portal6, { container: portalRef, children: /* @__PURE__ */ jsxs12(DialogRoot, { open, lazyMount: true, unmountOnExit: true, onOpenChange: ({ open: open2 }) => setOpen(open2), preventScroll: false, children: [
+    /* @__PURE__ */ jsx49(DialogBackdrop2, { className: "absolute inset-0 z-[100] bg-background/60 backdrop-blur-sm" }),
+    /* @__PURE__ */ jsx49(DialogPositioner, { className: "absolute inset-0 z-[100]", children: /* @__PURE__ */ jsxs12(
       DialogContent2,
       {
         id,
@@ -1638,17 +2025,17 @@ function NavbarMobileOverlay({ className, children, ...props }) {
         className: cn48(navbarMobileContentBase, className),
         ...props,
         children: [
-          /* @__PURE__ */ jsx48(DialogTitle2, { className: "sr-only", children: "Navigation menu" }),
-          /* @__PURE__ */ jsx48(DialogDescription2, { className: "sr-only", children: "Mobile navigation menu" }),
+          /* @__PURE__ */ jsx49(DialogTitle2, { className: "sr-only", children: "Navigation menu" }),
+          /* @__PURE__ */ jsx49(DialogDescription2, { className: "sr-only", children: "Mobile navigation menu" }),
           /* @__PURE__ */ jsxs12("div", { className: navbarMobileHeaderBase, children: [
             slots.brand,
-            /* @__PURE__ */ jsx48(DialogCloseTrigger, { asChild: true, children: /* @__PURE__ */ jsx48(
+            /* @__PURE__ */ jsx49(DialogCloseTrigger, { asChild: true, children: /* @__PURE__ */ jsx49(
               "button",
               {
                 type: "button",
                 "aria-label": "Close navigation menu",
                 className: cn48(navbarTriggerVariants({ floating })),
-                children: /* @__PURE__ */ jsx48(
+                children: /* @__PURE__ */ jsx49(
                   "svg",
                   {
                     className: "size-4",
@@ -1659,14 +2046,14 @@ function NavbarMobileOverlay({ className, children, ...props }) {
                     strokeLinecap: "round",
                     strokeLinejoin: "round",
                     "aria-hidden": "true",
-                    children: /* @__PURE__ */ jsx48("path", { d: "M18 6 6 18M6 6l12 12" })
+                    children: /* @__PURE__ */ jsx49("path", { d: "M18 6 6 18M6 6l12 12" })
                   }
                 )
               }
             ) })
           ] }),
-          /* @__PURE__ */ jsx48("div", { className: navbarMobileMenuBase, children }),
-          slots.actions ? /* @__PURE__ */ jsx48("div", { className: navbarMobileActionsBase, children: slots.actions }) : null
+          /* @__PURE__ */ jsx49("div", { className: navbarMobileMenuBase, children }),
+          slots.actions ? /* @__PURE__ */ jsx49("div", { className: navbarMobileActionsBase, children: slots.actions }) : null
         ]
       }
     ) })
@@ -1700,50 +2087,50 @@ import {
   fieldsetErrorBase,
   cn as cn49
 } from "@cloudvoyant/helical-ui";
-import { jsx as jsx49 } from "react/jsx-runtime";
+import { jsx as jsx50 } from "react/jsx-runtime";
 function Field({ className, ...props }) {
-  return /* @__PURE__ */ jsx49(ArkFieldRoot, { className: cn49(fieldRootBase, className), ...props });
+  return /* @__PURE__ */ jsx50(ArkFieldRoot, { className: cn49(fieldRootBase, className), ...props });
 }
 function FieldLabel({ className, ...props }) {
-  return /* @__PURE__ */ jsx49(ArkFieldLabel, { className: cn49(fieldLabelBase, className), ...props });
+  return /* @__PURE__ */ jsx50(ArkFieldLabel, { className: cn49(fieldLabelBase, className), ...props });
 }
 function FieldHelper({ className, ...props }) {
-  return /* @__PURE__ */ jsx49(ArkFieldHelperText, { className: cn49(fieldHelperBase, className), ...props });
+  return /* @__PURE__ */ jsx50(ArkFieldHelperText, { className: cn49(fieldHelperBase, className), ...props });
 }
 function FieldError({ className, ...props }) {
-  return /* @__PURE__ */ jsx49(ArkFieldErrorText, { className: cn49(fieldErrorBase, className), ...props });
+  return /* @__PURE__ */ jsx50(ArkFieldErrorText, { className: cn49(fieldErrorBase, className), ...props });
 }
 function FieldRequiredIndicator({ className, ...props }) {
-  return /* @__PURE__ */ jsx49(ArkFieldRequiredIndicator, { className: cn49(fieldRequiredIndicatorBase, className), ...props });
+  return /* @__PURE__ */ jsx50(ArkFieldRequiredIndicator, { className: cn49(fieldRequiredIndicatorBase, className), ...props });
 }
 function FieldSet({ className, ...props }) {
-  return /* @__PURE__ */ jsx49(ArkFieldsetRoot, { className: cn49(fieldsetRootBase, className), ...props });
+  return /* @__PURE__ */ jsx50(ArkFieldsetRoot, { className: cn49(fieldsetRootBase, className), ...props });
 }
 function FieldSetLegend({ className, ...props }) {
-  return /* @__PURE__ */ jsx49(ArkFieldsetLegend, { className: cn49(fieldsetLegendBase, className), ...props });
+  return /* @__PURE__ */ jsx50(ArkFieldsetLegend, { className: cn49(fieldsetLegendBase, className), ...props });
 }
 function FieldSetHelper({ className, ...props }) {
-  return /* @__PURE__ */ jsx49(ArkFieldsetHelperText, { className: cn49(fieldsetHelperBase, className), ...props });
+  return /* @__PURE__ */ jsx50(ArkFieldsetHelperText, { className: cn49(fieldsetHelperBase, className), ...props });
 }
 function FieldSetError({ className, ...props }) {
-  return /* @__PURE__ */ jsx49(ArkFieldsetErrorText, { className: cn49(fieldsetErrorBase, className), ...props });
+  return /* @__PURE__ */ jsx50(ArkFieldsetErrorText, { className: cn49(fieldsetErrorBase, className), ...props });
 }
 var useField = useFieldContext;
 
 // src/input.tsx
 import { FieldInput } from "@ark-ui/react/field";
 import { inputVariants, cn as cn50 } from "@cloudvoyant/helical-ui";
-import { jsx as jsx50 } from "react/jsx-runtime";
+import { jsx as jsx51 } from "react/jsx-runtime";
 function Input2({ className, size, ...props }) {
-  return /* @__PURE__ */ jsx50(FieldInput, { className: cn50(inputVariants({ size }), className), ...props });
+  return /* @__PURE__ */ jsx51(FieldInput, { className: cn50(inputVariants({ size }), className), ...props });
 }
 
 // src/textarea.tsx
 import { FieldTextarea } from "@ark-ui/react/field";
 import { textareaBase, cn as cn51 } from "@cloudvoyant/helical-ui";
-import { jsx as jsx51 } from "react/jsx-runtime";
+import { jsx as jsx52 } from "react/jsx-runtime";
 function Textarea({ className, ...props }) {
-  return /* @__PURE__ */ jsx51(FieldTextarea, { className: cn51(textareaBase, className), ...props });
+  return /* @__PURE__ */ jsx52(FieldTextarea, { className: cn51(textareaBase, className), ...props });
 }
 
 // src/number-input.tsx
@@ -1762,18 +2149,18 @@ import {
   numberInputTriggerBase,
   cn as cn52
 } from "@cloudvoyant/helical-ui";
-import { jsx as jsx52 } from "react/jsx-runtime";
+import { jsx as jsx53 } from "react/jsx-runtime";
 function NumberInput({ className, ...props }) {
-  return /* @__PURE__ */ jsx52(ArkNumberInputRoot, { className: cn52(numberInputRootBase, className), ...props });
+  return /* @__PURE__ */ jsx53(ArkNumberInputRoot, { className: cn52(numberInputRootBase, className), ...props });
 }
 function NumberInputControl({ className, ...props }) {
-  return /* @__PURE__ */ jsx52(ArkNumberInputControl, { className: cn52(numberInputControlBase, className), ...props });
+  return /* @__PURE__ */ jsx53(ArkNumberInputControl, { className: cn52(numberInputControlBase, className), ...props });
 }
 function NumberInputInput({ className, ...props }) {
-  return /* @__PURE__ */ jsx52(ArkNumberInputInput, { className: cn52(numberInputInputBase, className), ...props });
+  return /* @__PURE__ */ jsx53(ArkNumberInputInput, { className: cn52(numberInputInputBase, className), ...props });
 }
 function NumberInputDecrement({ className, ...props }) {
-  return /* @__PURE__ */ jsx52(
+  return /* @__PURE__ */ jsx53(
     ArkNumberInputDecrementTrigger,
     {
       "aria-label": "Decrement",
@@ -1783,7 +2170,7 @@ function NumberInputDecrement({ className, ...props }) {
   );
 }
 function NumberInputIncrement({ className, ...props }) {
-  return /* @__PURE__ */ jsx52(
+  return /* @__PURE__ */ jsx53(
     ArkNumberInputIncrementTrigger,
     {
       "aria-label": "Increment",
@@ -1795,7 +2182,7 @@ function NumberInputIncrement({ className, ...props }) {
 var useNumberInput = useNumberInputContext;
 
 // src/checkbox.tsx
-import { createContext as createContext4, useContext as useContext4 } from "react";
+import { createContext as createContext5, useContext as useContext5 } from "react";
 import {
   CheckboxRoot as ArkCheckboxRoot,
   CheckboxControl as ArkCheckboxControl,
@@ -1812,31 +2199,31 @@ import {
   checkboxGroupBase,
   cn as cn53
 } from "@cloudvoyant/helical-ui";
-import { jsx as jsx53, jsxs as jsxs13 } from "react/jsx-runtime";
-var CheckboxSizeContext = createContext4("md");
+import { jsx as jsx54, jsxs as jsxs13 } from "react/jsx-runtime";
+var CheckboxSizeContext = createContext5("md");
 function Checkbox({ className, size = "md", children, ...props }) {
-  return /* @__PURE__ */ jsx53(CheckboxSizeContext.Provider, { value: size, children: /* @__PURE__ */ jsxs13(ArkCheckboxRoot, { className: cn53("flex items-center gap-2", className), ...props, children: [
+  return /* @__PURE__ */ jsx54(CheckboxSizeContext.Provider, { value: size, children: /* @__PURE__ */ jsxs13(ArkCheckboxRoot, { className: cn53("flex items-center gap-2", className), ...props, children: [
     children,
-    /* @__PURE__ */ jsx53(ArkCheckboxHiddenInput, {})
+    /* @__PURE__ */ jsx54(ArkCheckboxHiddenInput, {})
   ] }) });
 }
 function CheckboxControl({ className, ...props }) {
-  const size = useContext4(CheckboxSizeContext);
-  return /* @__PURE__ */ jsx53(ArkCheckboxControl, { className: cn53(checkboxVariants({ size }), className), ...props });
+  const size = useContext5(CheckboxSizeContext);
+  return /* @__PURE__ */ jsx54(ArkCheckboxControl, { className: cn53(checkboxVariants({ size }), className), ...props });
 }
 function CheckboxIndicator({ className, ...props }) {
-  return /* @__PURE__ */ jsx53(ArkCheckboxIndicator, { className: cn53(checkboxIndicatorBase, className), ...props });
+  return /* @__PURE__ */ jsx54(ArkCheckboxIndicator, { className: cn53(checkboxIndicatorBase, className), ...props });
 }
 function CheckboxLabel({ className, ...props }) {
-  return /* @__PURE__ */ jsx53(ArkCheckboxLabel, { className: cn53(checkboxLabelBase, className), ...props });
+  return /* @__PURE__ */ jsx54(ArkCheckboxLabel, { className: cn53(checkboxLabelBase, className), ...props });
 }
 function CheckboxGroup({ className, ...props }) {
-  return /* @__PURE__ */ jsx53(ArkCheckboxGroup, { className: cn53(checkboxGroupBase, className), ...props });
+  return /* @__PURE__ */ jsx54(ArkCheckboxGroup, { className: cn53(checkboxGroupBase, className), ...props });
 }
 var useCheckbox = useCheckboxContext;
 
 // src/switch.tsx
-import { createContext as createContext5, useContext as useContext5 } from "react";
+import { createContext as createContext6, useContext as useContext6 } from "react";
 import {
   SwitchRoot as ArkSwitchRoot,
   SwitchControl as ArkSwitchControl,
@@ -1846,23 +2233,23 @@ import {
   useSwitchContext
 } from "@ark-ui/react/switch";
 import { switchVariants, switchControlBase, switchThumbBase, switchLabelBase, cn as cn54 } from "@cloudvoyant/helical-ui";
-import { jsx as jsx54, jsxs as jsxs14 } from "react/jsx-runtime";
-var SwitchSizeContext = createContext5("md");
+import { jsx as jsx55, jsxs as jsxs14 } from "react/jsx-runtime";
+var SwitchSizeContext = createContext6("md");
 function Switch({ className, size = "md", children, ...props }) {
-  return /* @__PURE__ */ jsx54(SwitchSizeContext.Provider, { value: size, children: /* @__PURE__ */ jsxs14(ArkSwitchRoot, { className: cn54("flex items-center gap-2", className), ...props, children: [
+  return /* @__PURE__ */ jsx55(SwitchSizeContext.Provider, { value: size, children: /* @__PURE__ */ jsxs14(ArkSwitchRoot, { className: cn54("flex items-center gap-2", className), ...props, children: [
     children,
-    /* @__PURE__ */ jsx54(ArkSwitchHiddenInput, {})
+    /* @__PURE__ */ jsx55(ArkSwitchHiddenInput, {})
   ] }) });
 }
 function SwitchControl({ className, ...props }) {
-  const size = useContext5(SwitchSizeContext);
-  return /* @__PURE__ */ jsx54(ArkSwitchControl, { className: cn54(switchVariants({ size }), switchControlBase, className), ...props });
+  const size = useContext6(SwitchSizeContext);
+  return /* @__PURE__ */ jsx55(ArkSwitchControl, { className: cn54(switchVariants({ size }), switchControlBase, className), ...props });
 }
 function SwitchThumb({ className, ...props }) {
-  return /* @__PURE__ */ jsx54(ArkSwitchThumb, { className: cn54(switchThumbBase, className), ...props });
+  return /* @__PURE__ */ jsx55(ArkSwitchThumb, { className: cn54(switchThumbBase, className), ...props });
 }
 function SwitchLabel({ className, ...props }) {
-  return /* @__PURE__ */ jsx54(ArkSwitchLabel, { className: cn54(switchLabelBase, className), ...props });
+  return /* @__PURE__ */ jsx55(ArkSwitchLabel, { className: cn54(switchLabelBase, className), ...props });
 }
 var useSwitch = useSwitchContext;
 
@@ -1906,9 +2293,9 @@ import {
 } from "@cloudvoyant/helical-ui";
 
 // src/use-media-query.ts
-import { useSyncExternalStore } from "react";
+import { useSyncExternalStore as useSyncExternalStore2 } from "react";
 function useMediaQuery(query) {
-  return useSyncExternalStore(
+  return useSyncExternalStore2(
     (onStoreChange) => {
       const mql = window.matchMedia(query);
       mql.addEventListener("change", onStoreChange);
@@ -1920,7 +2307,7 @@ function useMediaQuery(query) {
 }
 
 // src/select.tsx
-import { jsx as jsx55, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx56, jsxs as jsxs15 } from "react/jsx-runtime";
 function Select({ items, collection, size, children, ...props }) {
   const isCoarse = useMediaQuery("(pointer: coarse)");
   const resolvedCollection = useMemo4(
@@ -1928,7 +2315,7 @@ function Select({ items, collection, size, children, ...props }) {
     [collection, items]
   );
   if (isCoarse && items) {
-    return /* @__PURE__ */ jsx55(
+    return /* @__PURE__ */ jsx56(
       SelectNative,
       {
         items,
@@ -1946,42 +2333,42 @@ function Select({ items, collection, size, children, ...props }) {
   }
   return /* @__PURE__ */ jsxs15(ArkSelectRoot, { collection: resolvedCollection, ...props, children: [
     children,
-    /* @__PURE__ */ jsx55(ArkSelectHiddenSelect, {})
+    /* @__PURE__ */ jsx56(ArkSelectHiddenSelect, {})
   ] });
 }
 function SelectTrigger({ size = "md", className, ...props }) {
-  return /* @__PURE__ */ jsx55(ArkSelectTrigger, { className: cn55(inputVariants2({ size }), selectTriggerBase, className), ...props });
+  return /* @__PURE__ */ jsx56(ArkSelectTrigger, { className: cn55(inputVariants2({ size }), selectTriggerBase, className), ...props });
 }
 function SelectValue({ className, ...props }) {
-  return /* @__PURE__ */ jsx55(ArkSelectValueText, { className: cn55(selectValueBase, className), ...props });
+  return /* @__PURE__ */ jsx56(ArkSelectValueText, { className: cn55(selectValueBase, className), ...props });
 }
 function SelectIndicator({ className, ...props }) {
-  return /* @__PURE__ */ jsx55(ArkSelectIndicator, { className: cn55(selectIndicatorBase, className), ...props });
+  return /* @__PURE__ */ jsx56(ArkSelectIndicator, { className: cn55(selectIndicatorBase, className), ...props });
 }
 function SelectClearTrigger({ className, ...props }) {
-  return /* @__PURE__ */ jsx55(ArkSelectClearTrigger, { "aria-label": "Clear selection", className: cn55(selectClearTriggerBase, className), ...props });
+  return /* @__PURE__ */ jsx56(ArkSelectClearTrigger, { "aria-label": "Clear selection", className: cn55(selectClearTriggerBase, className), ...props });
 }
 function SelectContent({ className, ...props }) {
-  return /* @__PURE__ */ jsx55(Portal7, { children: /* @__PURE__ */ jsx55(ArkSelectPositioner, { className: selectPositionerBase, children: /* @__PURE__ */ jsx55(ArkSelectContent, { className: cn55(selectContentBase, className), ...props }) }) });
+  return /* @__PURE__ */ jsx56(Portal7, { children: /* @__PURE__ */ jsx56(ArkSelectPositioner, { className: selectPositionerBase, children: /* @__PURE__ */ jsx56(ArkSelectContent, { className: cn55(selectContentBase, className), ...props }) }) });
 }
 function SelectItemGroup({ className, ...props }) {
-  return /* @__PURE__ */ jsx55(ArkSelectItemGroup, { className, ...props });
+  return /* @__PURE__ */ jsx56(ArkSelectItemGroup, { className, ...props });
 }
 function SelectItemGroupLabel({ className, ...props }) {
-  return /* @__PURE__ */ jsx55(ArkSelectItemGroupLabel, { className: cn55(selectItemGroupLabelBase, className), ...props });
+  return /* @__PURE__ */ jsx56(ArkSelectItemGroupLabel, { className: cn55(selectItemGroupLabelBase, className), ...props });
 }
 function SelectItem({ item, className, ...props }) {
-  return /* @__PURE__ */ jsx55(ArkSelectItem, { item, className: cn55(selectItemBase, className), ...props });
+  return /* @__PURE__ */ jsx56(ArkSelectItem, { item, className: cn55(selectItemBase, className), ...props });
 }
 function SelectItemText({ className, ...props }) {
-  return /* @__PURE__ */ jsx55(ArkSelectItemText, { className: cn55(selectItemTextBase, className), ...props });
+  return /* @__PURE__ */ jsx56(ArkSelectItemText, { className: cn55(selectItemTextBase, className), ...props });
 }
 function SelectItemIndicator({ className, ...props }) {
-  return /* @__PURE__ */ jsx55(ArkSelectItemIndicator, { className: cn55(selectItemIndicatorBase, className), ...props });
+  return /* @__PURE__ */ jsx56(ArkSelectItemIndicator, { className: cn55(selectItemIndicatorBase, className), ...props });
 }
 var useSelect = useSelectContext;
 function ChevronDownIcon() {
-  return /* @__PURE__ */ jsx55(
+  return /* @__PURE__ */ jsx56(
     "svg",
     {
       viewBox: "0 0 24 24",
@@ -1991,7 +2378,7 @@ function ChevronDownIcon() {
       strokeLinecap: "round",
       strokeLinejoin: "round",
       "aria-hidden": true,
-      children: /* @__PURE__ */ jsx55("path", { d: "m6 9 6 6 6-6" })
+      children: /* @__PURE__ */ jsx56("path", { d: "m6 9 6 6 6-6" })
     }
   );
 }
@@ -2007,7 +2394,7 @@ function SelectNative({
   ...props
 }) {
   return /* @__PURE__ */ jsxs15(ark34.div, { className: cn55(nativeSelectWrapperBase, className), children: [
-    /* @__PURE__ */ jsx55(
+    /* @__PURE__ */ jsx56(
       ark34.select,
       {
         className: nativeSelectVariants({ size }),
@@ -2016,10 +2403,10 @@ function SelectNative({
         onChange: (event) => onValueChange?.(event.currentTarget.value),
         "aria-invalid": invalid,
         ...props,
-        children: items.map((item) => /* @__PURE__ */ jsx55(ark34.option, { value: item.value, disabled: item.disabled, children: item.label }, item.value))
+        children: items.map((item) => /* @__PURE__ */ jsx56(ark34.option, { value: item.value, disabled: item.disabled, children: item.label }, item.value))
       }
     ),
-    /* @__PURE__ */ jsx55(ark34.span, { className: nativeSelectIconBase, "aria-hidden": true, children: icon ?? /* @__PURE__ */ jsx55(ChevronDownIcon, {}) })
+    /* @__PURE__ */ jsx56(ark34.span, { className: nativeSelectIconBase, "aria-hidden": true, children: icon ?? /* @__PURE__ */ jsx56(ChevronDownIcon, {}) })
   ] });
 }
 
@@ -2059,7 +2446,7 @@ import {
   comboboxEmptyBase,
   cn as cn56
 } from "@cloudvoyant/helical-ui";
-import { jsx as jsx56 } from "react/jsx-runtime";
+import { jsx as jsx57 } from "react/jsx-runtime";
 function Combobox({
   items,
   collection,
@@ -2072,7 +2459,7 @@ function Combobox({
     () => collection ?? createListCollection2({ items: items ?? [] }),
     [collection, items]
   );
-  return /* @__PURE__ */ jsx56(
+  return /* @__PURE__ */ jsx57(
     ArkComboboxRoot,
     {
       collection: resolvedCollection,
@@ -2084,28 +2471,28 @@ function Combobox({
   );
 }
 function ComboboxControl({ className, ...props }) {
-  return /* @__PURE__ */ jsx56(ArkComboboxControl, { className: cn56(comboboxControlBase, className), ...props });
+  return /* @__PURE__ */ jsx57(ArkComboboxControl, { className: cn56(comboboxControlBase, className), ...props });
 }
 function ComboboxInput({ size = "md", className, ...props }) {
-  return /* @__PURE__ */ jsx56(ArkComboboxInput, { className: cn56(inputVariants3({ size }), comboboxInputBase, className), ...props });
+  return /* @__PURE__ */ jsx57(ArkComboboxInput, { className: cn56(inputVariants3({ size }), comboboxInputBase, className), ...props });
 }
 function ComboboxTrigger({ className, ...props }) {
-  return /* @__PURE__ */ jsx56(ArkComboboxTrigger, { className: cn56(comboboxTriggerBase, className), ...props });
+  return /* @__PURE__ */ jsx57(ArkComboboxTrigger, { className: cn56(comboboxTriggerBase, className), ...props });
 }
 function ComboboxClear({ className, ...props }) {
-  return /* @__PURE__ */ jsx56(ArkComboboxClearTrigger, { "aria-label": "Clear", className: cn56(comboboxClearTriggerBase, className), ...props });
+  return /* @__PURE__ */ jsx57(ArkComboboxClearTrigger, { "aria-label": "Clear", className: cn56(comboboxClearTriggerBase, className), ...props });
 }
 function ComboboxContent({ className, ...props }) {
-  return /* @__PURE__ */ jsx56(Portal8, { children: /* @__PURE__ */ jsx56(ArkComboboxPositioner, { className: comboboxPositionerBase, children: /* @__PURE__ */ jsx56(ArkComboboxContent, { className: cn56(comboboxContentBase, className), ...props }) }) });
+  return /* @__PURE__ */ jsx57(Portal8, { children: /* @__PURE__ */ jsx57(ArkComboboxPositioner, { className: comboboxPositionerBase, children: /* @__PURE__ */ jsx57(ArkComboboxContent, { className: cn56(comboboxContentBase, className), ...props }) }) });
 }
 function ComboboxItemGroup({ className, ...props }) {
-  return /* @__PURE__ */ jsx56(ArkComboboxItemGroup, { className, ...props });
+  return /* @__PURE__ */ jsx57(ArkComboboxItemGroup, { className, ...props });
 }
 function ComboboxItemGroupLabel({ className, ...props }) {
-  return /* @__PURE__ */ jsx56(ArkComboboxItemGroupLabel, { className: cn56(comboboxItemGroupLabelBase, className), ...props });
+  return /* @__PURE__ */ jsx57(ArkComboboxItemGroupLabel, { className: cn56(comboboxItemGroupLabelBase, className), ...props });
 }
 function ComboboxItem({ item, showIndicator = true, className, ...props }) {
-  return /* @__PURE__ */ jsx56(
+  return /* @__PURE__ */ jsx57(
     ArkComboboxItem,
     {
       item,
@@ -2116,16 +2503,16 @@ function ComboboxItem({ item, showIndicator = true, className, ...props }) {
   );
 }
 function ComboboxItemText({ className, ...props }) {
-  return /* @__PURE__ */ jsx56(ArkComboboxItemText, { className, ...props });
+  return /* @__PURE__ */ jsx57(ArkComboboxItemText, { className, ...props });
 }
 function ComboboxItemIndicator({ className, ...props }) {
-  return /* @__PURE__ */ jsx56(ArkComboboxItemIndicator, { className: cn56(comboboxItemIndicatorBase, className), ...props });
+  return /* @__PURE__ */ jsx57(ArkComboboxItemIndicator, { className: cn56(comboboxItemIndicatorBase, className), ...props });
 }
 function ComboboxList({ className, ...props }) {
-  return /* @__PURE__ */ jsx56(ArkComboboxList, { className: cn56(comboboxListBase, className), ...props });
+  return /* @__PURE__ */ jsx57(ArkComboboxList, { className: cn56(comboboxListBase, className), ...props });
 }
 function ComboboxEmpty({ className, children, ...props }) {
-  return /* @__PURE__ */ jsx56(ArkComboboxEmpty, { className: cn56(comboboxEmptyBase, className), ...props, children: children ?? "No results found." });
+  return /* @__PURE__ */ jsx57(ArkComboboxEmpty, { className: cn56(comboboxEmptyBase, className), ...props, children: children ?? "No results found." });
 }
 var useCombobox = useComboboxContext;
 
@@ -2155,33 +2542,33 @@ import {
   tagsInputClearTriggerBase,
   cn as cn57
 } from "@cloudvoyant/helical-ui";
-import { jsx as jsx57, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx58, jsxs as jsxs16 } from "react/jsx-runtime";
 function TagInput({ className, editable = false, children, ...props }) {
   return /* @__PURE__ */ jsxs16(ArkTagsInputRoot, { className: cn57(tagsInputRootBase, className), editable, ...props, children: [
     children,
-    /* @__PURE__ */ jsx57(ArkTagsInputHiddenInput, {})
+    /* @__PURE__ */ jsx58(ArkTagsInputHiddenInput, {})
   ] });
 }
 function TagInputControl({ className, ...props }) {
-  return /* @__PURE__ */ jsx57(ArkTagsInputControl, { className: cn57(tagsInputControlBase, className), ...props });
+  return /* @__PURE__ */ jsx58(ArkTagsInputControl, { className: cn57(tagsInputControlBase, className), ...props });
 }
 function TagInputInput({ className, ...props }) {
-  return /* @__PURE__ */ jsx57(ArkTagsInputInput, { className: cn57(tagsInputInputBase, className), ...props });
+  return /* @__PURE__ */ jsx58(ArkTagsInputInput, { className: cn57(tagsInputInputBase, className), ...props });
 }
 function TagInputItem({ className, ...props }) {
-  return /* @__PURE__ */ jsx57(ArkTagsInputItem, { className: cn57(tagsInputItemBase, className), ...props });
+  return /* @__PURE__ */ jsx58(ArkTagsInputItem, { className: cn57(tagsInputItemBase, className), ...props });
 }
 function TagInputItemPreview({ className, ...props }) {
-  return /* @__PURE__ */ jsx57(ArkTagsInputItemPreview, { className, ...props });
+  return /* @__PURE__ */ jsx58(ArkTagsInputItemPreview, { className, ...props });
 }
 function TagInputItemText({ className, ...props }) {
-  return /* @__PURE__ */ jsx57(ArkTagsInputItemText, { className: cn57(tagsInputItemTextBase, className), ...props });
+  return /* @__PURE__ */ jsx58(ArkTagsInputItemText, { className: cn57(tagsInputItemTextBase, className), ...props });
 }
 function TagInputItemInput({ className, ...props }) {
-  return /* @__PURE__ */ jsx57(ArkTagsInputItemInput, { className: cn57(tagsInputItemInputBase, className), ...props });
+  return /* @__PURE__ */ jsx58(ArkTagsInputItemInput, { className: cn57(tagsInputItemInputBase, className), ...props });
 }
 function TagInputItemDeleteTrigger({ className, ...props }) {
-  return /* @__PURE__ */ jsx57(
+  return /* @__PURE__ */ jsx58(
     ArkTagsInputItemDeleteTrigger,
     {
       "aria-label": "Remove tag",
@@ -2191,7 +2578,7 @@ function TagInputItemDeleteTrigger({ className, ...props }) {
   );
 }
 function TagInputClearTrigger({ className, ...props }) {
-  return /* @__PURE__ */ jsx57(
+  return /* @__PURE__ */ jsx58(
     ArkTagsInputClearTrigger,
     {
       "aria-label": "Clear all tags",
@@ -2204,7 +2591,7 @@ var TagInputContext = ArkTagsInputContext;
 var useTagInput = useTagsInputContext;
 
 // src/mermaid.tsx
-import { useEffect as useEffect3, useState as useState3 } from "react";
+import { useEffect as useEffect4, useState as useState3 } from "react";
 import { ark as ark35 } from "@ark-ui/react/factory";
 import {
   mermaidRootBase,
@@ -2215,12 +2602,12 @@ import {
   mermaidSvgAspectRatio,
   cn as cn58
 } from "@cloudvoyant/helical-ui";
-import { Fragment as Fragment4, jsx as jsx58, jsxs as jsxs17 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx59, jsxs as jsxs17 } from "react/jsx-runtime";
 function Mermaid({ code, svg, className, ...props }) {
   const [status, setStatus] = useState3(svg === void 0 ? "loading" : "done");
   const [rendered, setRendered] = useState3(svg ?? null);
   const aspectRatio = rendered === null ? void 0 : mermaidSvgAspectRatio(rendered);
-  useEffect3(() => {
+  useEffect4(() => {
     if (svg !== void 0) return;
     let cancelled = false;
     setStatus("loading");
@@ -2237,7 +2624,7 @@ function Mermaid({ code, svg, className, ...props }) {
       cancelled = true;
     };
   }, [code, svg]);
-  return /* @__PURE__ */ jsx58(
+  return /* @__PURE__ */ jsx59(
     ark35.div,
     {
       ...props,
@@ -2246,22 +2633,22 @@ function Mermaid({ code, svg, className, ...props }) {
       "data-mermaid-state": status,
       style: aspectRatio === void 0 ? props.style : { ...props.style, aspectRatio },
       className: cn58(mermaidRootBase, className),
-      children: rendered === null ? status === "error" ? /* @__PURE__ */ jsx58("pre", { className: mermaidSourceBase, children: code }) : /* @__PURE__ */ jsxs17(Fragment4, { children: [
+      children: rendered === null ? status === "error" ? /* @__PURE__ */ jsx59("pre", { className: mermaidSourceBase, children: code }) : /* @__PURE__ */ jsxs17(Fragment4, { children: [
         /* @__PURE__ */ jsxs17("div", { className: mermaidLoadingBase, role: "status", "aria-label": "Rendering diagram", "data-mermaid-loading": true, children: [
-          /* @__PURE__ */ jsx58(
+          /* @__PURE__ */ jsx59(
             "span",
             {
               "aria-hidden": "true",
               className: "h-5 w-5 shrink-0 animate-spin rounded-full border-2 border-muted-foreground/25 border-t-muted-foreground"
             }
           ),
-          /* @__PURE__ */ jsx58("span", { className: "text-sm text-muted-foreground", children: "Rendering diagram" })
+          /* @__PURE__ */ jsx59("span", { className: "text-sm text-muted-foreground", children: "Rendering diagram" })
         ] }),
         /* @__PURE__ */ jsxs17("noscript", { children: [
-          /* @__PURE__ */ jsx58("style", { children: "[data-mermaid-loading]{display:none}" }),
-          /* @__PURE__ */ jsx58("pre", { className: mermaidSourceBase, children: code })
+          /* @__PURE__ */ jsx59("style", { children: "[data-mermaid-loading]{display:none}" }),
+          /* @__PURE__ */ jsx59("pre", { className: mermaidSourceBase, children: code })
         ] })
-      ] }) : /* @__PURE__ */ jsx58("div", { className: mermaidSvgBase, dangerouslySetInnerHTML: { __html: rendered } })
+      ] }) : /* @__PURE__ */ jsx59("div", { className: mermaidSvgBase, dangerouslySetInnerHTML: { __html: rendered } })
     }
   );
 }
@@ -2269,7 +2656,7 @@ function Mermaid({ code, svg, className, ...props }) {
 // src/clipboard.tsx
 import { ClipboardRoot, ClipboardTrigger, ClipboardIndicator } from "@ark-ui/react/clipboard";
 import { clipboardTriggerBase, cn as cn59 } from "@cloudvoyant/helical-ui";
-import { jsx as jsx59, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx60, jsxs as jsxs18 } from "react/jsx-runtime";
 function CopyIcon() {
   return /* @__PURE__ */ jsxs18(
     "svg",
@@ -2283,14 +2670,14 @@ function CopyIcon() {
       strokeLinejoin: "round",
       "aria-hidden": "true",
       children: [
-        /* @__PURE__ */ jsx59("rect", { width: "14", height: "14", x: "8", y: "8", rx: "2", ry: "2" }),
-        /* @__PURE__ */ jsx59("path", { d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" })
+        /* @__PURE__ */ jsx60("rect", { width: "14", height: "14", x: "8", y: "8", rx: "2", ry: "2" }),
+        /* @__PURE__ */ jsx60("path", { d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" })
       ]
     }
   );
 }
 function CheckIcon() {
-  return /* @__PURE__ */ jsx59(
+  return /* @__PURE__ */ jsx60(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -2301,12 +2688,12 @@ function CheckIcon() {
       strokeLinecap: "round",
       strokeLinejoin: "round",
       "aria-hidden": "true",
-      children: /* @__PURE__ */ jsx59("path", { d: "M20 6 9 17l-5-5" })
+      children: /* @__PURE__ */ jsx60("path", { d: "M20 6 9 17l-5-5" })
     }
   );
 }
 function CopyButton({ value, label = "Copy", className, ...props }) {
-  return /* @__PURE__ */ jsx59(ClipboardRoot, { value, ...props, children: /* @__PURE__ */ jsx59(ClipboardTrigger, { className: cn59(clipboardTriggerBase, className), "aria-label": label, children: /* @__PURE__ */ jsx59(ClipboardIndicator, { copied: /* @__PURE__ */ jsx59(CheckIcon, {}), children: /* @__PURE__ */ jsx59(CopyIcon, {}) }) }) });
+  return /* @__PURE__ */ jsx60(ClipboardRoot, { value, ...props, children: /* @__PURE__ */ jsx60(ClipboardTrigger, { className: cn59(clipboardTriggerBase, className), "aria-label": label, children: /* @__PURE__ */ jsx60(ClipboardIndicator, { copied: /* @__PURE__ */ jsx60(CheckIcon, {}), children: /* @__PURE__ */ jsx60(CopyIcon, {}) }) }) });
 }
 
 // src/radio-group.tsx
@@ -2320,15 +2707,15 @@ import {
   useRadioGroupItemContext
 } from "@ark-ui/react/radio-group";
 import { radioGroupRootBase, radioGroupItemControlBase, radioGroupItemTextBase, cn as cn60 } from "@cloudvoyant/helical-ui";
-import { jsx as jsx60, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx61, jsxs as jsxs19 } from "react/jsx-runtime";
 function RadioGroup({ className, ...props }) {
-  return /* @__PURE__ */ jsx60(RadioGroupRoot, { className: cn60(radioGroupRootBase, className), ...props });
+  return /* @__PURE__ */ jsx61(RadioGroupRoot, { className: cn60(radioGroupRootBase, className), ...props });
 }
 function RadioGroupItem({ className, children, ...props }) {
   return /* @__PURE__ */ jsxs19(ArkRadioGroupItem, { className: cn60("flex cursor-pointer items-center gap-2.5", className), ...props, children: [
-    /* @__PURE__ */ jsx60(RadioGroupItemControl, { className: radioGroupItemControlBase, children: /* @__PURE__ */ jsx60("span", { className: "size-1.5 rounded-full bg-current hidden [[data-state=checked]>&]:block" }) }),
-    /* @__PURE__ */ jsx60(RadioGroupItemText, { className: radioGroupItemTextBase, children }),
-    /* @__PURE__ */ jsx60(RadioGroupItemHiddenInput, {})
+    /* @__PURE__ */ jsx61(RadioGroupItemControl, { className: radioGroupItemControlBase, children: /* @__PURE__ */ jsx61("span", { className: "size-1.5 rounded-full bg-current hidden [[data-state=checked]>&]:block" }) }),
+    /* @__PURE__ */ jsx61(RadioGroupItemText, { className: radioGroupItemTextBase, children }),
+    /* @__PURE__ */ jsx61(RadioGroupItemHiddenInput, {})
   ] });
 }
 var useRadioGroup = useRadioGroupContext;
@@ -2336,7 +2723,7 @@ var useRadioGroup = useRadioGroupContext;
 // src/notice.tsx
 import { ark as ark36 } from "@ark-ui/react/factory";
 import { noticeVariants, noticeTitleBase, noticeDescriptionBase, cn as cn61 } from "@cloudvoyant/helical-ui";
-import { jsx as jsx61, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx62, jsxs as jsxs20 } from "react/jsx-runtime";
 function InfoIcon() {
   return /* @__PURE__ */ jsxs20(
     "svg",
@@ -2350,9 +2737,9 @@ function InfoIcon() {
       strokeLinejoin: "round",
       "aria-hidden": "true",
       children: [
-        /* @__PURE__ */ jsx61("circle", { cx: "12", cy: "12", r: "10" }),
-        /* @__PURE__ */ jsx61("path", { d: "M12 16v-4" }),
-        /* @__PURE__ */ jsx61("path", { d: "M12 8h.01" })
+        /* @__PURE__ */ jsx62("circle", { cx: "12", cy: "12", r: "10" }),
+        /* @__PURE__ */ jsx62("path", { d: "M12 16v-4" }),
+        /* @__PURE__ */ jsx62("path", { d: "M12 8h.01" })
       ]
     }
   );
@@ -2370,8 +2757,8 @@ function CheckCircleIcon() {
       strokeLinejoin: "round",
       "aria-hidden": "true",
       children: [
-        /* @__PURE__ */ jsx61("circle", { cx: "12", cy: "12", r: "10" }),
-        /* @__PURE__ */ jsx61("path", { d: "m9 12 2 2 4-4" })
+        /* @__PURE__ */ jsx62("circle", { cx: "12", cy: "12", r: "10" }),
+        /* @__PURE__ */ jsx62("path", { d: "m9 12 2 2 4-4" })
       ]
     }
   );
@@ -2389,9 +2776,9 @@ function TriangleAlertIcon() {
       strokeLinejoin: "round",
       "aria-hidden": "true",
       children: [
-        /* @__PURE__ */ jsx61("path", { d: "m21.73 18-8-14a2 2 0 0 0-3.46 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" }),
-        /* @__PURE__ */ jsx61("path", { d: "M12 9v4" }),
-        /* @__PURE__ */ jsx61("path", { d: "M12 17h.01" })
+        /* @__PURE__ */ jsx62("path", { d: "m21.73 18-8-14a2 2 0 0 0-3.46 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" }),
+        /* @__PURE__ */ jsx62("path", { d: "M12 9v4" }),
+        /* @__PURE__ */ jsx62("path", { d: "M12 17h.01" })
       ]
     }
   );
@@ -2409,9 +2796,9 @@ function CircleXIcon() {
       strokeLinejoin: "round",
       "aria-hidden": "true",
       children: [
-        /* @__PURE__ */ jsx61("circle", { cx: "12", cy: "12", r: "10" }),
-        /* @__PURE__ */ jsx61("path", { d: "m15 9-6 6" }),
-        /* @__PURE__ */ jsx61("path", { d: "m9 9 6 6" })
+        /* @__PURE__ */ jsx62("circle", { cx: "12", cy: "12", r: "10" }),
+        /* @__PURE__ */ jsx62("path", { d: "m15 9-6 6" }),
+        /* @__PURE__ */ jsx62("path", { d: "m9 9 6 6" })
       ]
     }
   );
@@ -2426,29 +2813,29 @@ function Notice({ variant = "info", title, children, className, ...props }) {
   const Icon = variant !== null && variant !== void 0 && variant !== "none" ? noticeIcons[variant] : null;
   const role = variant === "error" ? "alert" : variant === "none" ? void 0 : "status";
   return /* @__PURE__ */ jsxs20(ark36.div, { role, className: cn61(noticeVariants({ variant }), className), ...props, children: [
-    Icon ? /* @__PURE__ */ jsx61(Icon, {}) : null,
-    title ? /* @__PURE__ */ jsx61(ark36.div, { className: noticeTitleBase, children: title }) : null,
-    children ? /* @__PURE__ */ jsx61(ark36.div, { className: noticeDescriptionBase, children }) : null
+    Icon ? /* @__PURE__ */ jsx62(Icon, {}) : null,
+    title ? /* @__PURE__ */ jsx62(ark36.div, { className: noticeTitleBase, children: title }) : null,
+    children ? /* @__PURE__ */ jsx62(ark36.div, { className: noticeDescriptionBase, children }) : null
   ] });
 }
 
 // src/figure.tsx
 import { ark as ark37 } from "@ark-ui/react/factory";
 import { figureRootBase, figureImageBase, figureCaptionBase, cn as cn62 } from "@cloudvoyant/helical-ui";
-import { jsx as jsx62, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx63, jsxs as jsxs21 } from "react/jsx-runtime";
 function Figure({ src, alt, img, caption, className, ...props }) {
   return /* @__PURE__ */ jsxs21(ark37.figure, { className: cn62(figureRootBase, className), ...props, children: [
-    img ?? (src ? /* @__PURE__ */ jsx62(ark37.img, { src, alt, loading: "lazy", className: figureImageBase }) : null),
-    caption ? /* @__PURE__ */ jsx62(ark37.figcaption, { className: figureCaptionBase, children: caption }) : null
+    img ?? (src ? /* @__PURE__ */ jsx63(ark37.img, { src, alt, loading: "lazy", className: figureImageBase }) : null),
+    caption ? /* @__PURE__ */ jsx63(ark37.figcaption, { className: figureCaptionBase, children: caption }) : null
   ] });
 }
 
 // src/reveal.tsx
 import { CollapsibleRoot as CollapsibleRoot2, CollapsibleTrigger as CollapsibleTrigger2, CollapsibleContent as CollapsibleContent2 } from "@ark-ui/react/collapsible";
 import { revealRootBase, revealTriggerBase, revealChevronBase, revealContentBase, cn as cn63 } from "@cloudvoyant/helical-ui";
-import { jsx as jsx63, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx64, jsxs as jsxs22 } from "react/jsx-runtime";
 function ChevronRightIcon({ className }) {
-  return /* @__PURE__ */ jsx63(
+  return /* @__PURE__ */ jsx64(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -2460,17 +2847,17 @@ function ChevronRightIcon({ className }) {
       strokeLinejoin: "round",
       "aria-hidden": "true",
       className,
-      children: /* @__PURE__ */ jsx63("path", { d: "m9 18 6-6-6-6" })
+      children: /* @__PURE__ */ jsx64("path", { d: "m9 18 6-6-6-6" })
     }
   );
 }
 function Reveal({ question, children, className, ...props }) {
   return /* @__PURE__ */ jsxs22(CollapsibleRoot2, { className: cn63(revealRootBase, className), ...props, children: [
     /* @__PURE__ */ jsxs22(CollapsibleTrigger2, { className: revealTriggerBase, children: [
-      /* @__PURE__ */ jsx63(ChevronRightIcon, { className: revealChevronBase }),
-      /* @__PURE__ */ jsx63("span", { children: question })
+      /* @__PURE__ */ jsx64(ChevronRightIcon, { className: revealChevronBase }),
+      /* @__PURE__ */ jsx64("span", { children: question })
     ] }),
-    /* @__PURE__ */ jsx63(CollapsibleContent2, { className: revealContentBase, children })
+    /* @__PURE__ */ jsx64(CollapsibleContent2, { className: revealContentBase, children })
   ] });
 }
 
@@ -2485,31 +2872,31 @@ import {
   prevNextSpacerBase,
   cn as cn64
 } from "@cloudvoyant/helical-ui";
-import { jsx as jsx64, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx65, jsxs as jsxs23 } from "react/jsx-runtime";
 function PrevNext({ prev, next, className, ...props }) {
   if (!prev && !next) return null;
   return /* @__PURE__ */ jsxs23(ark38.nav, { className: cn64(prevNextRootBase, className), "aria-label": "Previous and next pages", ...props, children: [
     prev ? /* @__PURE__ */ jsxs23(ark38.a, { href: prev.href, className: prevNextLinkBase, children: [
-      /* @__PURE__ */ jsx64(ark38.span, { className: prevNextDirectionBase, children: "Previous" }),
+      /* @__PURE__ */ jsx65(ark38.span, { className: prevNextDirectionBase, children: "Previous" }),
       /* @__PURE__ */ jsxs23(ark38.span, { className: prevNextTitleBase, children: [
         "\u2190 ",
         prev.title
       ] })
-    ] }) : /* @__PURE__ */ jsx64(ark38.span, { className: prevNextSpacerBase }),
+    ] }) : /* @__PURE__ */ jsx65(ark38.span, { className: prevNextSpacerBase }),
     next ? /* @__PURE__ */ jsxs23(ark38.a, { href: next.href, className: cn64(prevNextLinkBase, prevNextLinkNextBase), children: [
-      /* @__PURE__ */ jsx64(ark38.span, { className: prevNextDirectionBase, children: "Next" }),
+      /* @__PURE__ */ jsx65(ark38.span, { className: prevNextDirectionBase, children: "Next" }),
       /* @__PURE__ */ jsxs23(ark38.span, { className: prevNextTitleBase, children: [
         next.title,
         " \u2192"
       ] })
-    ] }) : /* @__PURE__ */ jsx64(ark38.span, { className: prevNextSpacerBase })
+    ] }) : /* @__PURE__ */ jsx65(ark38.span, { className: prevNextSpacerBase })
   ] });
 }
 
 // src/latex.tsx
 import { ark as ark39 } from "@ark-ui/react/factory";
 import { latexRootBase, latexDisplayBase, latexInlineBase, latexErrorBase, toLaTeX, cn as cn65 } from "@cloudvoyant/helical-ui";
-import { jsx as jsx65 } from "react/jsx-runtime";
+import { jsx as jsx66 } from "react/jsx-runtime";
 function LaTeX({ latex, html, className, ...props }) {
   let markup;
   let error = false;
@@ -2523,13 +2910,13 @@ function LaTeX({ latex, html, className, ...props }) {
   } else {
     markup = html;
   }
-  return /* @__PURE__ */ jsx65(
+  return /* @__PURE__ */ jsx66(
     ark39.div,
     {
       ...props,
       "data-latex-state": error ? "error" : "done",
       className: cn65(latexRootBase, latexDisplayBase, className),
-      children: error ? /* @__PURE__ */ jsx65("code", { className: latexErrorBase, children: latex }) : /* @__PURE__ */ jsx65("span", { dangerouslySetInnerHTML: { __html: markup } })
+      children: error ? /* @__PURE__ */ jsx66("code", { className: latexErrorBase, children: latex }) : /* @__PURE__ */ jsx66("span", { dangerouslySetInnerHTML: { __html: markup } })
     }
   );
 }
@@ -2546,19 +2933,19 @@ function InlineLaTeX({ latex, html, className, ...props }) {
   } else {
     markup = html;
   }
-  return /* @__PURE__ */ jsx65(
+  return /* @__PURE__ */ jsx66(
     ark39.span,
     {
       ...props,
       "data-latex-state": error ? "error" : "done",
       className: cn65(latexRootBase, latexInlineBase, className),
-      children: error ? /* @__PURE__ */ jsx65("code", { className: latexErrorBase, children: latex }) : /* @__PURE__ */ jsx65("span", { dangerouslySetInnerHTML: { __html: markup } })
+      children: error ? /* @__PURE__ */ jsx66("code", { className: latexErrorBase, children: latex }) : /* @__PURE__ */ jsx66("span", { dangerouslySetInnerHTML: { __html: markup } })
     }
   );
 }
 
 // src/code-block.tsx
-import { createContext as createContext6, useContext as useContext6, useEffect as useEffect4, useState as useState4 } from "react";
+import { createContext as createContext7, useContext as useContext7, useEffect as useEffect5, useState as useState4 } from "react";
 import { ark as ark40 } from "@ark-ui/react/factory";
 import {
   codeBlockRootBase,
@@ -2576,10 +2963,10 @@ import {
   renderCodeToHtml,
   cn as cn66
 } from "@cloudvoyant/helical-ui";
-import { Fragment as Fragment5, jsx as jsx66, jsxs as jsxs24 } from "react/jsx-runtime";
-var CodeBlockContext = createContext6(null);
+import { Fragment as Fragment5, jsx as jsx67, jsxs as jsxs24 } from "react/jsx-runtime";
+var CodeBlockContext = createContext7(null);
 function useCodeBlock() {
-  const ctx = useContext6(CodeBlockContext);
+  const ctx = useContext7(CodeBlockContext);
   if (!ctx) throw new Error("CodeBlock parts must be rendered inside a <CodeBlock>.");
   return ctx;
 }
@@ -2593,11 +2980,11 @@ function CodeRenderer({
   highlightLines
 }) {
   const [rendered, setRendered] = useState4(html ?? null);
-  useEffect4(() => {
+  useEffect5(() => {
     injectCodeBlockStyles();
   }, []);
   const highlightKey = highlightLines?.join(",");
-  useEffect4(() => {
+  useEffect5(() => {
     if (html !== void 0) return;
     let cancelled = false;
     setRendered(null);
@@ -2608,12 +2995,12 @@ function CodeRenderer({
       cancelled = true;
     };
   }, [code, language, html, highlightKey]);
-  return /* @__PURE__ */ jsx66(
+  return /* @__PURE__ */ jsx67(
     "div",
     {
       className: cn66(codeBlockBodyBase, scrollable && codeBlockBodyScrollableBase),
       style: scrollable ? { maxHeight: `${maxHeight}px` } : void 0,
-      children: rendered === null ? /* @__PURE__ */ jsx66("div", { className: codeBlockLoadingBase, children: /* @__PURE__ */ jsx66("div", { className: codeBlockSpinnerBase }) }) : /* @__PURE__ */ jsx66(
+      children: rendered === null ? /* @__PURE__ */ jsx67("div", { className: codeBlockLoadingBase, children: /* @__PURE__ */ jsx67("div", { className: codeBlockSpinnerBase }) }) : /* @__PURE__ */ jsx67(
         "div",
         {
           dangerouslySetInnerHTML: { __html: rendered },
@@ -2641,27 +3028,27 @@ function CodeBlock({
   ...props
 }) {
   const ctx = { code, language, html, showLineNumbers, scrollable, maxHeight, highlightLines };
-  return /* @__PURE__ */ jsx66(CodeBlockContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx66(ark40.div, { "data-code-block": true, className: cn66(codeBlockRootBase, className), ...props, children: children ?? /* @__PURE__ */ jsxs24(Fragment5, { children: [
+  return /* @__PURE__ */ jsx67(CodeBlockContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx67(ark40.div, { "data-code-block": true, className: cn66(codeBlockRootBase, className), ...props, children: children ?? /* @__PURE__ */ jsxs24(Fragment5, { children: [
     /* @__PURE__ */ jsxs24(CodeBlockHeader, { children: [
-      /* @__PURE__ */ jsx66(CodeBlockTitle, { children: filename ?? language }),
-      /* @__PURE__ */ jsx66("div", { className: "ml-auto", children: /* @__PURE__ */ jsx66(CodeBlockCopyButton, {}) })
+      /* @__PURE__ */ jsx67(CodeBlockTitle, { children: filename ?? language }),
+      /* @__PURE__ */ jsx67("div", { className: "ml-auto", children: /* @__PURE__ */ jsx67(CodeBlockCopyButton, {}) })
     ] }),
-    /* @__PURE__ */ jsx66(CodeBlockContent, {})
+    /* @__PURE__ */ jsx67(CodeBlockContent, {})
   ] }) }) });
 }
 function CodeBlockHeader({ className, children, ...props }) {
-  return /* @__PURE__ */ jsx66(ark40.div, { className: cn66(codeBlockHeaderBase, className), ...props, children });
+  return /* @__PURE__ */ jsx67(ark40.div, { className: cn66(codeBlockHeaderBase, className), ...props, children });
 }
 function CodeBlockTitle({ className, children, ...props }) {
-  return /* @__PURE__ */ jsx66(ark40.span, { className: cn66(codeBlockTitleBase, className), ...props, children });
+  return /* @__PURE__ */ jsx67(ark40.span, { className: cn66(codeBlockTitleBase, className), ...props, children });
 }
 function CodeBlockCopyButton({ label = "Copy code", className, ...props }) {
   const { code } = useCodeBlock();
-  return /* @__PURE__ */ jsx66(ark40.div, { className, ...props, children: /* @__PURE__ */ jsx66(CopyButton, { value: code, label }) });
+  return /* @__PURE__ */ jsx67(ark40.div, { className, ...props, children: /* @__PURE__ */ jsx67(CopyButton, { value: code, label }) });
 }
 function CodeBlockContent({ className, html, ...props }) {
   const ctx = useCodeBlock();
-  return /* @__PURE__ */ jsx66(ark40.div, { className, ...props, children: /* @__PURE__ */ jsx66(CodeRenderer, { ...ctx, html: html ?? ctx.html }) });
+  return /* @__PURE__ */ jsx67(ark40.div, { className, ...props, children: /* @__PURE__ */ jsx67(CodeRenderer, { ...ctx, html: html ?? ctx.html }) });
 }
 function MultiFileCodeBlock({
   files,
@@ -2673,14 +3060,14 @@ function MultiFileCodeBlock({
 }) {
   const [active, setActive] = useState4(files[0]?.filename ?? "");
   const file = files.find((f) => f.filename === active) ?? files[0];
-  useEffect4(() => {
+  useEffect5(() => {
     if (!files.some((f) => f.filename === active)) {
       setActive(files[0]?.filename ?? "");
     }
   }, [files, active]);
   return /* @__PURE__ */ jsxs24(ark40.div, { "data-code-block": true, className: cn66(codeBlockRootBase, className), ...props, children: [
     /* @__PURE__ */ jsxs24("div", { className: "flex items-center justify-between border-b bg-muted/50", children: [
-      /* @__PURE__ */ jsx66("div", { role: "tablist", "aria-label": "Files", className: "flex overflow-x-auto no-scrollbar pl-1", children: files.map((f) => /* @__PURE__ */ jsx66(
+      /* @__PURE__ */ jsx67("div", { role: "tablist", "aria-label": "Files", className: "flex overflow-x-auto no-scrollbar pl-1", children: files.map((f) => /* @__PURE__ */ jsx67(
         "button",
         {
           role: "tab",
@@ -2694,9 +3081,9 @@ function MultiFileCodeBlock({
         },
         f.filename
       )) }),
-      file ? /* @__PURE__ */ jsx66("div", { className: "shrink-0 pr-3", children: /* @__PURE__ */ jsx66(CopyButton, { value: file.code, label: "Copy code" }) }) : null
+      file ? /* @__PURE__ */ jsx67("div", { className: "shrink-0 pr-3", children: /* @__PURE__ */ jsx67(CopyButton, { value: file.code, label: "Copy code" }) }) : null
     ] }),
-    file ? /* @__PURE__ */ jsx66(
+    file ? /* @__PURE__ */ jsx67(
       CodeRenderer,
       {
         code: file.code,
@@ -2719,15 +3106,15 @@ function LanguageTabsCodeBlock({
 }) {
   const [active, setActive] = useState4(tabs[0]?.label ?? "");
   const tab = tabs.find((t) => t.label === active) ?? tabs[0];
-  useEffect4(() => {
+  useEffect5(() => {
     if (!tabs.some((t) => t.label === active)) {
       setActive(tabs[0]?.label ?? "");
     }
   }, [tabs, active]);
   return /* @__PURE__ */ jsxs24(ark40.div, { "data-code-block": true, className: cn66(codeBlockRootBase, className), ...props, children: [
     /* @__PURE__ */ jsxs24(CodeBlockHeader, { children: [
-      /* @__PURE__ */ jsx66(CodeBlockTitle, { children: tab?.filename }),
-      /* @__PURE__ */ jsx66("div", { className: "ml-auto", children: /* @__PURE__ */ jsxs24(
+      /* @__PURE__ */ jsx67(CodeBlockTitle, { children: tab?.filename }),
+      /* @__PURE__ */ jsx67("div", { className: "ml-auto", children: /* @__PURE__ */ jsxs24(
         Select,
         {
           items: tabs.map((t) => ({ value: t.label, label: t.label })),
@@ -2736,8 +3123,8 @@ function LanguageTabsCodeBlock({
           "aria-label": "Language",
           children: [
             /* @__PURE__ */ jsxs24(SelectTrigger, { size: "sm", className: "min-w-28 justify-between font-mono text-xs", children: [
-              /* @__PURE__ */ jsx66(SelectValue, {}),
-              /* @__PURE__ */ jsx66(SelectIndicator, { children: /* @__PURE__ */ jsx66(
+              /* @__PURE__ */ jsx67(SelectValue, {}),
+              /* @__PURE__ */ jsx67(SelectIndicator, { children: /* @__PURE__ */ jsx67(
                 "svg",
                 {
                   xmlns: "http://www.w3.org/2000/svg",
@@ -2748,13 +3135,13 @@ function LanguageTabsCodeBlock({
                   strokeLinecap: "round",
                   strokeLinejoin: "round",
                   "aria-hidden": "true",
-                  children: /* @__PURE__ */ jsx66("path", { d: "m6 9 6 6 6-6" })
+                  children: /* @__PURE__ */ jsx67("path", { d: "m6 9 6 6 6-6" })
                 }
               ) })
             ] }),
-            /* @__PURE__ */ jsx66(SelectContent, { children: tabs.map((t) => /* @__PURE__ */ jsxs24(SelectItem, { item: { value: t.label, label: t.label }, children: [
-              /* @__PURE__ */ jsx66(SelectItemText, { children: t.label }),
-              /* @__PURE__ */ jsx66(SelectItemIndicator, { children: /* @__PURE__ */ jsx66(
+            /* @__PURE__ */ jsx67(SelectContent, { children: tabs.map((t) => /* @__PURE__ */ jsxs24(SelectItem, { item: { value: t.label, label: t.label }, children: [
+              /* @__PURE__ */ jsx67(SelectItemText, { children: t.label }),
+              /* @__PURE__ */ jsx67(SelectItemIndicator, { children: /* @__PURE__ */ jsx67(
                 "svg",
                 {
                   xmlns: "http://www.w3.org/2000/svg",
@@ -2765,7 +3152,7 @@ function LanguageTabsCodeBlock({
                   strokeLinecap: "round",
                   strokeLinejoin: "round",
                   "aria-hidden": "true",
-                  children: /* @__PURE__ */ jsx66("path", { d: "M20 6 9 17l-5-5" })
+                  children: /* @__PURE__ */ jsx67("path", { d: "M20 6 9 17l-5-5" })
                 }
               ) })
             ] }, t.label)) })
@@ -2774,7 +3161,7 @@ function LanguageTabsCodeBlock({
       ) })
     ] }),
     tab ? /* @__PURE__ */ jsxs24("div", { className: "relative", children: [
-      /* @__PURE__ */ jsx66(
+      /* @__PURE__ */ jsx67(
         CodeRenderer,
         {
           code: tab.code,
@@ -2785,13 +3172,13 @@ function LanguageTabsCodeBlock({
           maxHeight
         }
       ),
-      /* @__PURE__ */ jsx66("div", { className: codeBlockCopyFloatBase, children: /* @__PURE__ */ jsx66(CopyButton, { value: tab.code, label: "Copy code" }) })
+      /* @__PURE__ */ jsx67("div", { className: codeBlockCopyFloatBase, children: /* @__PURE__ */ jsx67(CopyButton, { value: tab.code, label: "Copy code" }) })
     ] }) : null
   ] });
 }
 
 // src/manim.tsx
-import { useEffect as useEffect5, useRef as useRef2, useState as useState5 } from "react";
+import { useEffect as useEffect6, useRef as useRef3, useState as useState5 } from "react";
 import { ark as ark41 } from "@ark-ui/react/factory";
 import {
   manimRootBase,
@@ -2802,13 +3189,13 @@ import {
   manimCaptionBase,
   cn as cn67
 } from "@cloudvoyant/helical-ui";
-import { jsx as jsx67, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx68, jsxs as jsxs25 } from "react/jsx-runtime";
 function Manim({ build, width = 800, height = 450, caption, className, ...props }) {
-  const wrapperRef = useRef2(null);
-  const containerRef = useRef2(null);
+  const wrapperRef = useRef3(null);
+  const containerRef = useRef3(null);
   const [state, setState] = useState5("loading");
   const [errorMsg, setErrorMsg] = useState5("");
-  useEffect5(() => {
+  useEffect6(() => {
     const wrapper = wrapperRef.current;
     if (!wrapper) return;
     let disposed = false;
@@ -2873,16 +3260,16 @@ function Manim({ build, width = 800, height = 450, caption, className, ...props
   }, [build, width, height]);
   return /* @__PURE__ */ jsxs25(ark41.figure, { "data-manim-state": state, className: cn67(manimRootBase, className), ...props, children: [
     /* @__PURE__ */ jsxs25("div", { ref: wrapperRef, className: manimContainerBase, children: [
-      /* @__PURE__ */ jsx67("div", { ref: containerRef, className: "w-full" }),
-      state === "loading" && /* @__PURE__ */ jsx67("div", { className: manimPlaceholderBase, style: { aspectRatio: `${width} / ${height}` }, children: /* @__PURE__ */ jsx67("span", { className: manimPlaceholderLabelBase, children: "Loading animation\u2026" }) }),
-      state === "error" && /* @__PURE__ */ jsx67("div", { className: manimErrorBase, children: errorMsg })
+      /* @__PURE__ */ jsx68("div", { ref: containerRef, className: "w-full" }),
+      state === "loading" && /* @__PURE__ */ jsx68("div", { className: manimPlaceholderBase, style: { aspectRatio: `${width} / ${height}` }, children: /* @__PURE__ */ jsx68("span", { className: manimPlaceholderLabelBase, children: "Loading animation\u2026" }) }),
+      state === "error" && /* @__PURE__ */ jsx68("div", { className: manimErrorBase, children: errorMsg })
     ] }),
-    caption ? /* @__PURE__ */ jsx67(ark41.figcaption, { className: manimCaptionBase, children: caption }) : null
+    caption ? /* @__PURE__ */ jsx68(ark41.figcaption, { className: manimCaptionBase, children: caption }) : null
   ] });
 }
 
 // src/youtube.tsx
-import { createContext as createContext7, useContext as useContext7, useEffect as useEffect6, useState as useState6 } from "react";
+import { createContext as createContext8, useContext as useContext8, useEffect as useEffect7, useState as useState6 } from "react";
 import { ark as ark42 } from "@ark-ui/react/factory";
 import { ChevronRight, Play } from "lucide-react";
 import {
@@ -2905,10 +3292,10 @@ import {
   fetchYouTubeMetadata,
   cn as cn68
 } from "@cloudvoyant/helical-ui";
-import { jsx as jsx68, jsxs as jsxs26 } from "react/jsx-runtime";
-var YouTubeContext = createContext7(null);
+import { jsx as jsx69, jsxs as jsxs26 } from "react/jsx-runtime";
+var YouTubeContext = createContext8(null);
 function useYouTube() {
-  const ctx = useContext7(YouTubeContext);
+  const ctx = useContext8(YouTubeContext);
   if (!ctx) throw new Error("YoutubeTimestamps must be rendered inside a <YouTube>.");
   return ctx;
 }
@@ -2922,9 +3309,9 @@ function YouTube({ url, title, description, poster, className, children, ...prop
     setPlaying(true);
   };
   const src = `https://www.youtube-nocookie.com/embed/${videoId}?autoplay=1${startAt == null ? "" : `&start=${startAt}`}`;
-  return /* @__PURE__ */ jsx68(YouTubeContext.Provider, { value: { url, videoId, seek }, children: /* @__PURE__ */ jsxs26(ark42.div, { "data-youtube-id": videoId, className: cn68(youtubeRootBase, className), ...props, children: [
-    title ? /* @__PURE__ */ jsx68(ark42.h3, { className: youtubeTitleBase, children: title }) : null,
-    playing ? /* @__PURE__ */ jsx68(
+  return /* @__PURE__ */ jsx69(YouTubeContext.Provider, { value: { url, videoId, seek }, children: /* @__PURE__ */ jsxs26(ark42.div, { "data-youtube-id": videoId, className: cn68(youtubeRootBase, className), ...props, children: [
+    title ? /* @__PURE__ */ jsx69(ark42.h3, { className: youtubeTitleBase, children: title }) : null,
+    playing ? /* @__PURE__ */ jsx69(
       "iframe",
       {
         src,
@@ -2941,7 +3328,7 @@ function YouTube({ url, title, description, poster, className, children, ...prop
         onClick: () => setPlaying(true),
         "aria-label": title ? `Play video: ${title}` : "Play video",
         children: [
-          /* @__PURE__ */ jsx68(
+          /* @__PURE__ */ jsx69(
             ark42.img,
             {
               src: posterUrl,
@@ -2950,26 +3337,26 @@ function YouTube({ url, title, description, poster, className, children, ...prop
               className: "h-full w-full object-cover"
             }
           ),
-          /* @__PURE__ */ jsx68(ark42.span, { className: youtubePlayButtonBase, "aria-hidden": "true", children: /* @__PURE__ */ jsx68(ark42.span, { className: youtubePlayButtonInnerBase, children: /* @__PURE__ */ jsx68(Play, { className: "size-8 fill-current", "aria-hidden": "true", "data-youtube-logo": true }) }) })
+          /* @__PURE__ */ jsx69(ark42.span, { className: youtubePlayButtonBase, "aria-hidden": "true", children: /* @__PURE__ */ jsx69(ark42.span, { className: youtubePlayButtonInnerBase, children: /* @__PURE__ */ jsx69(Play, { className: "size-8 fill-current", "aria-hidden": "true", "data-youtube-logo": true }) }) })
         ]
       }
     ),
-    description ? /* @__PURE__ */ jsx68(ark42.p, { className: youtubeDescriptionBase, children: description }) : null,
+    description ? /* @__PURE__ */ jsx69(ark42.p, { className: youtubeDescriptionBase, children: description }) : null,
     children
   ] }) });
 }
 function YoutubeTimestampAt({ t, children, className, ...props }) {
   const { seek } = useYouTube();
-  return /* @__PURE__ */ jsx68(ark42.li, { className, ...props, children: /* @__PURE__ */ jsxs26(ark42.button, { type: "button", onClick: () => seek(t), className: youtubeChapterButtonBase, children: [
-    /* @__PURE__ */ jsx68(ark42.span, { className: youtubeChapterTimeBase, children: formatTime(t) }),
-    /* @__PURE__ */ jsx68(ark42.span, { className: youtubeChapterLabelBase, children })
+  return /* @__PURE__ */ jsx69(ark42.li, { className, ...props, children: /* @__PURE__ */ jsxs26(ark42.button, { type: "button", onClick: () => seek(t), className: youtubeChapterButtonBase, children: [
+    /* @__PURE__ */ jsx69(ark42.span, { className: youtubeChapterTimeBase, children: formatTime(t) }),
+    /* @__PURE__ */ jsx69(ark42.span, { className: youtubeChapterLabelBase, children })
   ] }) });
 }
 function YoutubeTimestamps({ chapters, children, className, ...props }) {
   const { url } = useYouTube();
   const [inferred, setInferred] = useState6([]);
   const [loading, setLoading] = useState6(chapters === void 0);
-  useEffect6(() => {
+  useEffect7(() => {
     if (chapters !== void 0) return;
     let cancelled = false;
     setLoading(true);
@@ -2988,13 +3375,13 @@ function YoutubeTimestamps({ chapters, children, className, ...props }) {
   const resolved = chapters ?? inferred;
   const hasChildren = children !== void 0 && children !== null;
   if (!loading && resolved.length === 0 && !hasChildren) return null;
-  return /* @__PURE__ */ jsx68(ark42.div, { className: cn68(youtubeChaptersBase, className), ...props, children: /* @__PURE__ */ jsxs26("details", { className: "group", open: true, children: [
+  return /* @__PURE__ */ jsx69(ark42.div, { className: cn68(youtubeChaptersBase, className), ...props, children: /* @__PURE__ */ jsxs26("details", { className: "group", open: true, children: [
     /* @__PURE__ */ jsxs26(ark42.summary, { className: youtubeChaptersSummaryBase, children: [
-      /* @__PURE__ */ jsx68(ChevronRight, { className: youtubeChaptersChevronBase, "aria-hidden": "true" }),
-      /* @__PURE__ */ jsx68("span", { children: "Timestamps" })
+      /* @__PURE__ */ jsx69(ChevronRight, { className: youtubeChaptersChevronBase, "aria-hidden": "true" }),
+      /* @__PURE__ */ jsx69("span", { children: "Timestamps" })
     ] }),
-    /* @__PURE__ */ jsx68(ark42.nav, { "aria-label": "Video timestamps", className: youtubeChaptersListBase, children: /* @__PURE__ */ jsxs26(ark42.ul, { className: "space-y-1", children: [
-      resolved.map((ch) => /* @__PURE__ */ jsx68(YoutubeTimestampAt, { t: ch.t, children: ch.label }, ch.t)),
+    /* @__PURE__ */ jsx69(ark42.nav, { "aria-label": "Video timestamps", className: youtubeChaptersListBase, children: /* @__PURE__ */ jsxs26(ark42.ul, { className: "space-y-1", children: [
+      resolved.map((ch) => /* @__PURE__ */ jsx69(YoutubeTimestampAt, { t: ch.t, children: ch.label }, ch.t)),
       children
     ] }) })
   ] }) });
@@ -3004,18 +3391,18 @@ function YoutubeTimestamps({ chapters, children, className, ...props }) {
 import { ark as ark43 } from "@ark-ui/react/factory";
 import { Chart as TanStackChart } from "@tanstack/charts/react";
 import { chartRootBase, buildChartDefinition, cn as cn69 } from "@cloudvoyant/helical-ui";
-import { jsx as jsx69 } from "react/jsx-runtime";
+import { jsx as jsx70 } from "react/jsx-runtime";
 function Chart({ svg, className, ...props }) {
   const { type, height = 320 } = props;
   if (svg !== void 0) {
-    return /* @__PURE__ */ jsx69(ark43.div, { "data-chart-state": "prerendered", "data-chart-type": type, className: cn69(chartRootBase, className), children: /* @__PURE__ */ jsx69("div", { className: "flex w-full justify-center [&>svg]:max-w-full", dangerouslySetInnerHTML: { __html: svg } }) });
+    return /* @__PURE__ */ jsx70(ark43.div, { "data-chart-state": "prerendered", "data-chart-type": type, className: cn69(chartRootBase, className), children: /* @__PURE__ */ jsx70("div", { className: "flex w-full justify-center [&>svg]:max-w-full", dangerouslySetInnerHTML: { __html: svg } }) });
   }
   const definition = buildChartDefinition(props);
-  return /* @__PURE__ */ jsx69(ark43.div, { "data-chart-state": "ready", "data-chart-type": type, className: cn69(chartRootBase, className), children: /* @__PURE__ */ jsx69(TanStackChart, { definition, height, ariaLabel: type === "pie" ? "Pie chart" : "Chart" }) });
+  return /* @__PURE__ */ jsx70(ark43.div, { "data-chart-state": "ready", "data-chart-type": type, className: cn69(chartRootBase, className), children: /* @__PURE__ */ jsx70(TanStackChart, { definition, height, ariaLabel: type === "pie" ? "Pie chart" : "Chart" }) });
 }
 
 // src/questions.tsx
-import { useEffect as useEffect7, useState as useState7 } from "react";
+import { useEffect as useEffect8, useState as useState7 } from "react";
 import { ark as ark44 } from "@ark-ui/react/factory";
 import {
   questionCardBase,
@@ -3041,7 +3428,7 @@ import {
   quizResetButtonBase,
   cn as cn70
 } from "@cloudvoyant/helical-ui";
-import { Fragment as Fragment6, jsx as jsx70, jsxs as jsxs27 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx71, jsxs as jsxs27 } from "react/jsx-runtime";
 function CheckCircleIcon2() {
   return /* @__PURE__ */ jsxs27(
     "svg",
@@ -3056,8 +3443,8 @@ function CheckCircleIcon2() {
       "aria-hidden": "true",
       className: "size-4 shrink-0",
       children: [
-        /* @__PURE__ */ jsx70("circle", { cx: "12", cy: "12", r: "10" }),
-        /* @__PURE__ */ jsx70("path", { d: "m9 12 2 2 4-4" })
+        /* @__PURE__ */ jsx71("circle", { cx: "12", cy: "12", r: "10" }),
+        /* @__PURE__ */ jsx71("path", { d: "m9 12 2 2 4-4" })
       ]
     }
   );
@@ -3076,15 +3463,15 @@ function CircleXIcon2() {
       "aria-hidden": "true",
       className: "size-4 shrink-0",
       children: [
-        /* @__PURE__ */ jsx70("circle", { cx: "12", cy: "12", r: "10" }),
-        /* @__PURE__ */ jsx70("path", { d: "m15 9-6 6" }),
-        /* @__PURE__ */ jsx70("path", { d: "m9 9 6 6" })
+        /* @__PURE__ */ jsx71("circle", { cx: "12", cy: "12", r: "10" }),
+        /* @__PURE__ */ jsx71("path", { d: "m15 9-6 6" }),
+        /* @__PURE__ */ jsx71("path", { d: "m9 9 6 6" })
       ]
     }
   );
 }
 function CheckIcon2() {
-  return /* @__PURE__ */ jsx70(
+  return /* @__PURE__ */ jsx71(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -3095,14 +3482,14 @@ function CheckIcon2() {
       strokeLinecap: "round",
       strokeLinejoin: "round",
       "aria-hidden": "true",
-      children: /* @__PURE__ */ jsx70("path", { d: "M20 6 9 17l-5-5" })
+      children: /* @__PURE__ */ jsx71("path", { d: "M20 6 9 17l-5-5" })
     }
   );
 }
 function Feedback({ correct, explanation }) {
   if (correct === null) return null;
   return /* @__PURE__ */ jsxs27("div", { "aria-live": "polite", role: "status", className: "mt-3", children: [
-    /* @__PURE__ */ jsx70(
+    /* @__PURE__ */ jsx71(
       "div",
       {
         className: cn70(
@@ -3110,15 +3497,15 @@ function Feedback({ correct, explanation }) {
           correct ? feedbackCorrectBase : feedbackIncorrectBase
         ),
         children: correct ? /* @__PURE__ */ jsxs27(Fragment6, { children: [
-          /* @__PURE__ */ jsx70(CheckCircleIcon2, {}),
-          /* @__PURE__ */ jsx70("span", { children: "Correct" })
+          /* @__PURE__ */ jsx71(CheckCircleIcon2, {}),
+          /* @__PURE__ */ jsx71("span", { children: "Correct" })
         ] }) : /* @__PURE__ */ jsxs27(Fragment6, { children: [
-          /* @__PURE__ */ jsx70(CircleXIcon2, {}),
-          /* @__PURE__ */ jsx70("span", { children: "Incorrect" })
+          /* @__PURE__ */ jsx71(CircleXIcon2, {}),
+          /* @__PURE__ */ jsx71("span", { children: "Incorrect" })
         ] })
       }
     ),
-    explanation ? /* @__PURE__ */ jsx70("p", { className: feedbackExplanationBase, children: explanation }) : null
+    explanation ? /* @__PURE__ */ jsx71("p", { className: feedbackExplanationBase, children: explanation }) : null
   ] });
 }
 function SingleChoiceRenderer({
@@ -3135,7 +3522,7 @@ function SingleChoiceRenderer({
 }) {
   const [selected, setSelected] = useState7(null);
   const [result, setResult] = useState7(null);
-  useEffect7(() => {
+  useEffect8(() => {
     if (quiz) {
       const isAnswered = selected !== null;
       onAnswerChange?.({ answered: isAnswered, correct: isAnswered && selected === correct });
@@ -3149,8 +3536,8 @@ function SingleChoiceRenderer({
     onGraded?.(isCorrect);
   };
   return /* @__PURE__ */ jsxs27("div", { className: cn70(questionCardBase, className), ...rest, children: [
-    /* @__PURE__ */ jsx70("p", { className: questionPromptBase, children: prompt }),
-    /* @__PURE__ */ jsx70(
+    /* @__PURE__ */ jsx71("p", { className: questionPromptBase, children: prompt }),
+    /* @__PURE__ */ jsx71(
       RadioGroup,
       {
         orientation: "vertical",
@@ -3161,7 +3548,7 @@ function SingleChoiceRenderer({
         },
         disabled: quiz ? submitted : result !== null,
         className: questionGroupBase,
-        children: choices.map((choice, i) => /* @__PURE__ */ jsx70(
+        children: choices.map((choice, i) => /* @__PURE__ */ jsx71(
           RadioGroupItem,
           {
             value: String(i),
@@ -3176,7 +3563,7 @@ function SingleChoiceRenderer({
         ))
       }
     ),
-    !quiz && result === null && /* @__PURE__ */ jsx70(
+    !quiz && result === null && /* @__PURE__ */ jsx71(
       ark44.button,
       {
         type: "button",
@@ -3186,7 +3573,7 @@ function SingleChoiceRenderer({
         children: "Check"
       }
     ),
-    /* @__PURE__ */ jsx70(Feedback, { correct: displayResult, explanation: displayResult === null ? void 0 : explanation })
+    /* @__PURE__ */ jsx71(Feedback, { correct: displayResult, explanation: displayResult === null ? void 0 : explanation })
   ] });
 }
 function MultipleChoiceRenderer({
@@ -3207,7 +3594,7 @@ function MultipleChoiceRenderer({
     const correctSet = new Set(correct);
     return selected.size === correctSet.size && [...selected].every((v) => correctSet.has(v));
   };
-  useEffect7(() => {
+  useEffect8(() => {
     if (quiz) {
       const isAnswered = selected.size > 0;
       onAnswerChange?.({ answered: isAnswered, correct: isAnswered && computeCorrect() });
@@ -3230,8 +3617,8 @@ function MultipleChoiceRenderer({
     onGraded?.(isCorrect);
   };
   return /* @__PURE__ */ jsxs27("div", { className: cn70(questionCardBase, className), ...rest, children: [
-    /* @__PURE__ */ jsx70("p", { className: questionPromptBase, children: prompt }),
-    /* @__PURE__ */ jsx70("div", { role: "group", className: questionGroupBase, children: choices.map((choice, i) => {
+    /* @__PURE__ */ jsx71("p", { className: questionPromptBase, children: prompt }),
+    /* @__PURE__ */ jsx71("div", { role: "group", className: questionGroupBase, children: choices.map((choice, i) => {
       const isCorrectOption = correct.includes(i);
       return /* @__PURE__ */ jsxs27(
         Checkbox,
@@ -3245,14 +3632,14 @@ function MultipleChoiceRenderer({
             displayResult !== null && selected.has(i) && !isCorrectOption && questionOptionIncorrectBase
           ),
           children: [
-            /* @__PURE__ */ jsx70(CheckboxControl, { children: /* @__PURE__ */ jsx70(CheckboxIndicator, { children: /* @__PURE__ */ jsx70(CheckIcon2, {}) }) }),
-            /* @__PURE__ */ jsx70(CheckboxLabel, { children: choice })
+            /* @__PURE__ */ jsx71(CheckboxControl, { children: /* @__PURE__ */ jsx71(CheckboxIndicator, { children: /* @__PURE__ */ jsx71(CheckIcon2, {}) }) }),
+            /* @__PURE__ */ jsx71(CheckboxLabel, { children: choice })
           ]
         },
         i
       );
     }) }),
-    !quiz && result === null && /* @__PURE__ */ jsx70(
+    !quiz && result === null && /* @__PURE__ */ jsx71(
       ark44.button,
       {
         type: "button",
@@ -3262,7 +3649,7 @@ function MultipleChoiceRenderer({
         children: "Check"
       }
     ),
-    /* @__PURE__ */ jsx70(Feedback, { correct: displayResult, explanation: displayResult === null ? void 0 : explanation })
+    /* @__PURE__ */ jsx71(Feedback, { correct: displayResult, explanation: displayResult === null ? void 0 : explanation })
   ] });
 }
 function NumericRenderer({
@@ -3286,7 +3673,7 @@ function NumericRenderer({
     const parsed = parseFloat(value);
     return !Number.isNaN(parsed) && Math.abs(parsed - answer) <= tolerance;
   };
-  useEffect7(() => {
+  useEffect8(() => {
     if (quiz) {
       const parsed = parseFloat(value);
       const isAnswered = value.trim() !== "" && !Number.isNaN(parsed);
@@ -3302,9 +3689,9 @@ function NumericRenderer({
     onGraded?.(isCorrect);
   };
   return /* @__PURE__ */ jsxs27("div", { className: cn70(questionCardBase, className), ...rest, children: [
-    /* @__PURE__ */ jsx70(ark44.label, { htmlFor: inputId, className: questionPromptBase, children: prompt }),
+    /* @__PURE__ */ jsx71(ark44.label, { htmlFor: inputId, className: questionPromptBase, children: prompt }),
     /* @__PURE__ */ jsxs27("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsx70(
+      /* @__PURE__ */ jsx71(
         ark44.input,
         {
           id: inputId,
@@ -3319,9 +3706,9 @@ function NumericRenderer({
           className: questionInputBase
         }
       ),
-      unit ? /* @__PURE__ */ jsx70(ark44.span, { className: questionUnitBase, children: unit }) : null
+      unit ? /* @__PURE__ */ jsx71(ark44.span, { className: questionUnitBase, children: unit }) : null
     ] }),
-    !quiz && result === null && /* @__PURE__ */ jsx70(
+    !quiz && result === null && /* @__PURE__ */ jsx71(
       ark44.button,
       {
         type: "button",
@@ -3331,17 +3718,17 @@ function NumericRenderer({
         children: "Check"
       }
     ),
-    /* @__PURE__ */ jsx70(Feedback, { correct: displayResult, explanation: displayResult === null ? void 0 : explanation })
+    /* @__PURE__ */ jsx71(Feedback, { correct: displayResult, explanation: displayResult === null ? void 0 : explanation })
   ] });
 }
 function SingleChoiceQuestion(props) {
-  return /* @__PURE__ */ jsx70(SingleChoiceRenderer, { ...props });
+  return /* @__PURE__ */ jsx71(SingleChoiceRenderer, { ...props });
 }
 function MultipleChoiceQuestion(props) {
-  return /* @__PURE__ */ jsx70(MultipleChoiceRenderer, { ...props });
+  return /* @__PURE__ */ jsx71(MultipleChoiceRenderer, { ...props });
 }
 function NumericQuestion(props) {
-  return /* @__PURE__ */ jsx70(NumericRenderer, { ...props });
+  return /* @__PURE__ */ jsx71(NumericRenderer, { ...props });
 }
 function Quiz({ id, title, questions, className, ...props }) {
   const [answers, setAnswers] = useState7({});
@@ -3368,7 +3755,7 @@ function Quiz({ id, title, questions, className, ...props }) {
     };
     switch (q.type) {
       case "single":
-        return /* @__PURE__ */ jsx70(
+        return /* @__PURE__ */ jsx71(
           SingleChoiceRenderer,
           {
             id: q.id,
@@ -3381,7 +3768,7 @@ function Quiz({ id, title, questions, className, ...props }) {
           key
         );
       case "multiple":
-        return /* @__PURE__ */ jsx70(
+        return /* @__PURE__ */ jsx71(
           MultipleChoiceRenderer,
           {
             id: q.id,
@@ -3394,7 +3781,7 @@ function Quiz({ id, title, questions, className, ...props }) {
           key
         );
       case "numeric":
-        return /* @__PURE__ */ jsx70(
+        return /* @__PURE__ */ jsx71(
           NumericRenderer,
           {
             id: q.id,
@@ -3412,10 +3799,10 @@ function Quiz({ id, title, questions, className, ...props }) {
     }
   };
   return /* @__PURE__ */ jsxs27("div", { "data-quiz-id": id, className: cn70(quizRootBase, className), ...props, children: [
-    /* @__PURE__ */ jsx70("div", { className: quizHeaderBase, children: title ? /* @__PURE__ */ jsx70(ark44.h3, { className: quizTitleBase, children: title }) : null }),
+    /* @__PURE__ */ jsx71("div", { className: quizHeaderBase, children: title ? /* @__PURE__ */ jsx71(ark44.h3, { className: quizTitleBase, children: title }) : null }),
     questions.map(renderQuestion),
     /* @__PURE__ */ jsxs27("div", { className: "mt-4 flex items-center gap-3", children: [
-      submitted ? /* @__PURE__ */ jsx70(ark44.button, { type: "button", onClick: handleReset, className: quizResetButtonBase, children: "Reset" }) : /* @__PURE__ */ jsx70(
+      submitted ? /* @__PURE__ */ jsx71(ark44.button, { type: "button", onClick: handleReset, className: quizResetButtonBase, children: "Reset" }) : /* @__PURE__ */ jsx71(
         ark44.button,
         {
           type: "button",
@@ -3425,9 +3812,9 @@ function Quiz({ id, title, questions, className, ...props }) {
           children: "Submit"
         }
       ),
-      /* @__PURE__ */ jsx70(ark44.span, { role: "status", className: quizScoreBase, children: submitted ? `${score}/${total} (${pct}%)` : `${total} question${total === 1 ? "" : "s"}` })
+      /* @__PURE__ */ jsx71(ark44.span, { role: "status", className: quizScoreBase, children: submitted ? `${score}/${total} (${pct}%)` : `${total} question${total === 1 ? "" : "s"}` })
     ] }),
-    submitted && /* @__PURE__ */ jsx70("div", { className: quizResultBase, children: /* @__PURE__ */ jsxs27("div", { "aria-live": "polite", role: "status", className: "text-center", children: [
+    submitted && /* @__PURE__ */ jsx71("div", { className: quizResultBase, children: /* @__PURE__ */ jsxs27("div", { "aria-live": "polite", role: "status", className: "text-center", children: [
       /* @__PURE__ */ jsxs27("p", { className: quizResultTitleBase, children: [
         score,
         "/",
@@ -3436,16 +3823,16 @@ function Quiz({ id, title, questions, className, ...props }) {
         pct,
         "%)"
       ] }),
-      /* @__PURE__ */ jsx70("p", { className: quizResultTextBase, children: pct >= 70 ? "Well done!" : "Keep studying and try again." })
+      /* @__PURE__ */ jsx71("p", { className: quizResultTextBase, children: pct >= 70 ? "Well done!" : "Keep studying and try again." })
     ] }) })
   ] });
 }
 
 // src/prose.tsx
 import { proseVariants, cn as cn71 } from "@cloudvoyant/helical-ui";
-import { jsx as jsx71 } from "react/jsx-runtime";
+import { jsx as jsx72 } from "react/jsx-runtime";
 function Prose({ as: Tag = "div", size, className, children, ...props }) {
-  return /* @__PURE__ */ jsx71(Tag, { className: cn71(proseVariants({ size }), "prose", className), ...props, children });
+  return /* @__PURE__ */ jsx72(Tag, { className: cn71(proseVariants({ size }), "prose", className), ...props, children });
 }
 
 // src/toggle-group.tsx
@@ -3458,9 +3845,9 @@ import {
   toggleButtonVariants as toggleButtonVariants2,
   cn as cn72
 } from "@cloudvoyant/helical-ui";
-import { jsx as jsx72 } from "react/jsx-runtime";
+import { jsx as jsx73 } from "react/jsx-runtime";
 function ToggleGroup({ orientation, attached, className, ...props }) {
-  return /* @__PURE__ */ jsx72(
+  return /* @__PURE__ */ jsx73(
     ToggleGroupRoot,
     {
       orientation: orientation ?? "horizontal",
@@ -3470,7 +3857,7 @@ function ToggleGroup({ orientation, attached, className, ...props }) {
   );
 }
 function ToggleGroupItem({ variant, size, className, ...props }) {
-  return /* @__PURE__ */ jsx72(ArkToggleGroupItem, { className: cn72(toggleButtonVariants2({ variant, size }), className), ...props });
+  return /* @__PURE__ */ jsx73(ArkToggleGroupItem, { className: cn72(toggleButtonVariants2({ variant, size }), className), ...props });
 }
 
 // src/listbox.tsx
@@ -3484,6 +3871,8 @@ import {
   ListboxInput as ArkListboxInput,
   ListboxEmpty as ArkListboxEmpty,
   ListboxLabel as ArkListboxLabel,
+  ListboxItemGroup as ArkListboxItemGroup,
+  ListboxItemGroupLabel as ArkListboxItemGroupLabel,
   createListCollection as createListCollection3,
   useListboxContext
 } from "@ark-ui/react/listbox";
@@ -3496,41 +3885,645 @@ import {
   listboxInputBase,
   listboxEmptyBase,
   listboxLabelBase,
+  listboxItemGroupBase,
+  listboxItemGroupLabelBase,
   cn as cn73
 } from "@cloudvoyant/helical-ui";
-import { jsx as jsx73 } from "react/jsx-runtime";
+import { jsx as jsx74 } from "react/jsx-runtime";
 var useListbox = useListboxContext;
 function Listbox({ items, collection, className, children, ...rest }) {
   const resolvedCollection = useMemo6(
     () => collection ?? createListCollection3({ items: items ?? [] }),
     [collection, items]
   );
-  return /* @__PURE__ */ jsx73(ListboxRoot, { collection: resolvedCollection, className: cn73(listboxRootBase, className), ...rest, children });
+  return /* @__PURE__ */ jsx74(ListboxRoot, { collection: resolvedCollection, className: cn73(listboxRootBase, className), ...rest, children });
 }
 function ListboxContent({ className, children, ...rest }) {
-  return /* @__PURE__ */ jsx73(ArkListboxContent, { className: cn73(listboxContentBase, className), ...rest, children });
+  return /* @__PURE__ */ jsx74(ArkListboxContent, { className: cn73(listboxContentBase, className), ...rest, children });
 }
 function ListboxItem({ item, className, children, ...rest }) {
-  return /* @__PURE__ */ jsx73(ArkListboxItem, { item, className: cn73(listboxItemBase, className), ...rest, children });
+  return /* @__PURE__ */ jsx74(ArkListboxItem, { item, className: cn73(listboxItemBase, className), ...rest, children });
 }
 function ListboxItemText({ className, children, ...rest }) {
-  return /* @__PURE__ */ jsx73(ArkListboxItemText, { className: cn73(listboxItemTextBase, className), ...rest, children });
+  return /* @__PURE__ */ jsx74(ArkListboxItemText, { className: cn73(listboxItemTextBase, className), ...rest, children });
 }
 function ListboxItemIndicator({ className, children, ...rest }) {
-  return /* @__PURE__ */ jsx73(ArkListboxItemIndicator, { className: cn73(listboxItemIndicatorBase, className), ...rest, children });
+  return /* @__PURE__ */ jsx74(ArkListboxItemIndicator, { className: cn73(listboxItemIndicatorBase, className), ...rest, children });
 }
 function ListboxInput({ className, ...rest }) {
-  return /* @__PURE__ */ jsx73(ArkListboxInput, { className: cn73(listboxInputBase, className), ...rest });
+  return /* @__PURE__ */ jsx74(ArkListboxInput, { className: cn73(listboxInputBase, className), ...rest });
 }
 function ListboxEmpty({ className, children, ...rest }) {
-  return /* @__PURE__ */ jsx73(ArkListboxEmpty, { className: cn73(listboxEmptyBase, className), ...rest, children: children ?? "No results." });
+  return /* @__PURE__ */ jsx74(ArkListboxEmpty, { className: cn73(listboxEmptyBase, className), ...rest, children: children ?? "No results." });
 }
 function ListboxLabel({ className, children, ...rest }) {
-  return /* @__PURE__ */ jsx73(ArkListboxLabel, { className: cn73(listboxLabelBase, className), ...rest, children });
+  return /* @__PURE__ */ jsx74(ArkListboxLabel, { className: cn73(listboxLabelBase, className), ...rest, children });
+}
+function ListboxItemGroup({ className, children, ...rest }) {
+  return /* @__PURE__ */ jsx74(ArkListboxItemGroup, { className: cn73(listboxItemGroupBase, className), ...rest, children });
+}
+function ListboxItemGroupLabel({ className, children, ...rest }) {
+  return /* @__PURE__ */ jsx74(ArkListboxItemGroupLabel, { className: cn73(listboxItemGroupLabelBase, className), ...rest, children });
+}
+
+// src/kbd.tsx
+import { ark as ark45 } from "@ark-ui/react/factory";
+import {
+  cn as cn74,
+  formatKeyChord,
+  formatKeySequence,
+  kbdGroupBase,
+  kbdVariants
+} from "@cloudvoyant/helical-ui";
+import { jsx as jsx75 } from "react/jsx-runtime";
+function Kbd({
+  variant = "outline",
+  size = "md",
+  hotkey,
+  platform,
+  useSymbols = true,
+  className,
+  children,
+  ...props
+}) {
+  if (hotkey && !children) {
+    if (Array.isArray(hotkey) || typeof hotkey === "string" && /\s+/.test(hotkey.trim())) {
+      const steps = formatKeySequence(hotkey, { platform, useSymbols });
+      return /* @__PURE__ */ jsx75("span", { "data-slot": "kbd-sequence", className: cn74(kbdGroupBase, className), children: steps.map((step, idx) => /* @__PURE__ */ jsx75(
+        ark45.kbd,
+        {
+          "data-slot": "kbd",
+          "data-variant": variant,
+          "data-size": size,
+          className: cn74(kbdVariants({ variant, size })),
+          ...props,
+          children: step
+        },
+        `${step}-${idx}`
+      )) });
+    }
+    const formatted = formatKeyChord(hotkey, { platform, useSymbols });
+    return /* @__PURE__ */ jsx75(
+      ark45.kbd,
+      {
+        "data-slot": "kbd",
+        "data-variant": variant,
+        "data-size": size,
+        className: cn74(kbdVariants({ variant, size }), className),
+        ...props,
+        children: formatted
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx75(
+    ark45.kbd,
+    {
+      "data-slot": "kbd",
+      "data-variant": variant,
+      "data-size": size,
+      className: cn74(kbdVariants({ variant, size }), className),
+      ...props,
+      children
+    }
+  );
+}
+
+// src/which-key/Pane.tsx
+import { ark as ark46 } from "@ark-ui/react/factory";
+import { cn as cn75, paneVariants } from "@cloudvoyant/helical-ui";
+import { jsx as jsx76 } from "react/jsx-runtime";
+function Pane({
+  paneId,
+  paneTitle = "Pane",
+  paneDisabled = false,
+  paneOrder,
+  className,
+  children,
+  ...props
+}) {
+  const pane = useOptionalPaneRegistration({
+    paneId,
+    paneTitle,
+    paneDisabled,
+    paneOrder,
+    defaultTitle: paneTitle
+  });
+  return /* @__PURE__ */ jsx76(
+    ark46.div,
+    {
+      ref: pane.ref,
+      "data-slot": "pane",
+      ...pane.dataAttributes,
+      className: cn75(paneVariants({ active: pane.isActive }), className),
+      ...props,
+      children
+    }
+  );
+}
+
+// src/which-key/WhichKey.tsx
+import { useEffect as useEffect10, useRef as useRef4 } from "react";
+import { Portal as Portal9 } from "@ark-ui/react/portal";
+import { Presence } from "@ark-ui/react/presence";
+import {
+  cn as cn78,
+  isGroupNode,
+  jumpBadgeMatchedPrefixBase,
+  jumpBadgeVariants,
+  jumpOverlayRootBase,
+  whichKeyBodyVariants,
+  whichKeyBreadcrumbBase,
+  whichKeyFooterBase,
+  whichKeyHeaderBase,
+  whichKeyItemBase,
+  whichKeyItemLabelBase,
+  whichKeyTitleBase,
+  whichKeyVariants
+} from "@cloudvoyant/helical-ui";
+
+// src/which-key/WhichKeyExplorer.tsx
+import { useEffect as useEffect9, useMemo as useMemo7, useState as useState8 } from "react";
+import { Highlight } from "@ark-ui/react/highlight";
+import { createListCollection as createListCollection4 } from "@ark-ui/react/listbox";
+import {
+  cn as cn76,
+  whichKeyExplorerContentBase,
+  whichKeyExplorerHeaderBase,
+  whichKeyExplorerHighlightMarkBase,
+  whichKeyExplorerInputBase,
+  whichKeyExplorerItemBase,
+  whichKeyExplorerListboxBase,
+  whichKeyExplorerListContentBase,
+  whichKeyModeBadgeVariants
+} from "@cloudvoyant/helical-ui";
+import { jsx as jsx77, jsxs as jsxs28 } from "react/jsx-runtime";
+function WhichKeyExplorer({
+  open: controlledOpen,
+  onOpenChange,
+  placeholder = "Search keybindings...",
+  className
+}) {
+  const controller = useOptionalWhichKeyController();
+  if (!controller) return null;
+  return /* @__PURE__ */ jsx77(
+    WhichKeyExplorerInner,
+    {
+      open: controlledOpen,
+      onOpenChange,
+      placeholder,
+      className
+    }
+  );
+}
+function WhichKeyExplorerInner({
+  open: controlledOpen,
+  onOpenChange,
+  placeholder,
+  className
+}) {
+  const {
+    preset,
+    explorerOpen,
+    explorerQuery,
+    explorerEntries,
+    openExplorer,
+    closeExplorer,
+    setExplorerQuery,
+    controller
+  } = useWhichKey();
+  const isOpen = controlledOpen ?? explorerOpen;
+  const [highlightedId, setHighlightedId] = useState8(null);
+  const handleOpenChange = (nextOpen) => {
+    if (nextOpen) {
+      openExplorer();
+    } else {
+      closeExplorer();
+    }
+    onOpenChange?.(nextOpen);
+  };
+  const groupedEntries = useMemo7(() => {
+    const groups = /* @__PURE__ */ new Map();
+    for (const entry of explorerEntries) {
+      const groupName = entry.group || "General";
+      const list = groups.get(groupName) ?? [];
+      list.push(entry);
+      groups.set(groupName, list);
+    }
+    return Array.from(groups.entries());
+  }, [explorerEntries]);
+  const orderedEntries = useMemo7(
+    () => groupedEntries.flatMap(([, entries]) => entries),
+    [groupedEntries]
+  );
+  const effectiveHighlightedId = useMemo7(() => {
+    if (orderedEntries.length === 0) return null;
+    if (highlightedId && orderedEntries.some((e) => e.id === highlightedId)) {
+      return highlightedId;
+    }
+    return orderedEntries[0].id;
+  }, [highlightedId, orderedEntries]);
+  const collection = useMemo7(
+    () => createListCollection4({
+      items: orderedEntries.map((entry) => ({
+        value: entry.id,
+        label: entry.label,
+        entry
+      }))
+    }),
+    [orderedEntries]
+  );
+  useEffect9(() => {
+    if (!isOpen || typeof document === "undefined") return;
+    const focusInput = () => {
+      const input = document.querySelector(
+        '[data-which-key-explorer] [data-testid="which-key-explorer-input"]'
+      );
+      input?.focus();
+    };
+    focusInput();
+    const raf = requestAnimationFrame(focusInput);
+    return () => cancelAnimationFrame(raf);
+  }, [isOpen]);
+  const scrollItemIntoView = (id) => {
+    requestAnimationFrame(() => {
+      if (typeof document === "undefined") return;
+      const items = Array.from(
+        document.querySelectorAll(
+          '[data-which-key-explorer] [data-part="item"]'
+        )
+      );
+      for (const el of items) {
+        if (el.getAttribute("data-value") === id) {
+          el.scrollIntoView({ block: "nearest" });
+          break;
+        }
+      }
+    });
+  };
+  if (!isOpen) return null;
+  return /* @__PURE__ */ jsxs28(
+    Dialog,
+    {
+      open: isOpen,
+      lazyMount: true,
+      unmountOnExit: true,
+      initialFocusEl: () => typeof document !== "undefined" ? document.querySelector(
+        '[data-which-key-explorer] [data-testid="which-key-explorer-input"]'
+      ) : null,
+      onOpenChange: (details) => handleOpenChange(details.open),
+      children: [
+        /* @__PURE__ */ jsx77(DialogBackdrop, {}),
+        /* @__PURE__ */ jsxs28(
+          DialogContent,
+          {
+            "data-which-key-explorer": "true",
+            "data-testid": "which-key-explorer",
+            className: cn76(whichKeyExplorerContentBase, className),
+            children: [
+              /* @__PURE__ */ jsxs28(DialogHeader, { className: whichKeyExplorerHeaderBase, children: [
+                /* @__PURE__ */ jsxs28(Row, { className: "items-center gap-2", children: [
+                  /* @__PURE__ */ jsx77(DialogTitle, { className: "text-sm font-semibold", children: "Keybindings" }),
+                  /* @__PURE__ */ jsx77("span", { className: whichKeyModeBadgeVariants({ mode: "normal" }), children: preset })
+                ] }),
+                /* @__PURE__ */ jsx77(
+                  DialogDismiss,
+                  {
+                    tabIndex: -1,
+                    className: "static opacity-80 hover:opacity-100 focus:ring-0",
+                    children: /* @__PURE__ */ jsx77(Kbd, { size: "sm", children: "Esc" })
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs28(
+                Listbox,
+                {
+                  collection,
+                  selectionMode: "single",
+                  highlightedValue: effectiveHighlightedId,
+                  onHighlightChange: (details) => {
+                    if (details.highlightedValue) {
+                      setHighlightedId(details.highlightedValue);
+                    }
+                  },
+                  onSelect: (details) => {
+                    controller.executeExplorerEntry(details.value);
+                  },
+                  className: whichKeyExplorerListboxBase,
+                  children: [
+                    /* @__PURE__ */ jsx77(
+                      ListboxInput,
+                      {
+                        autoFocus: true,
+                        autoHighlight: true,
+                        "data-testid": "which-key-explorer-input",
+                        placeholder,
+                        value: explorerQuery,
+                        onChange: (e) => setExplorerQuery(e.currentTarget.value),
+                        onKeyDown: (e) => {
+                          if (orderedEntries.length === 0) return;
+                          if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            const delta = e.key === "ArrowDown" ? 1 : -1;
+                            const currentIdx = orderedEntries.findIndex(
+                              (item) => item.id === effectiveHighlightedId
+                            );
+                            const nextIdx = currentIdx === -1 ? 0 : (currentIdx + delta + orderedEntries.length) % orderedEntries.length;
+                            const nextId = orderedEntries[nextIdx].id;
+                            setHighlightedId(nextId);
+                            scrollItemIntoView(nextId);
+                            return;
+                          }
+                          if (e.key === "Enter") {
+                            const itemVal = effectiveHighlightedId ?? orderedEntries[0]?.id;
+                            if (itemVal) {
+                              e.preventDefault();
+                              e.stopPropagation();
+                              controller.executeExplorerEntry(itemVal);
+                            }
+                          }
+                        },
+                        className: whichKeyExplorerInputBase
+                      }
+                    ),
+                    /* @__PURE__ */ jsx77(Scroll, { className: "max-h-96 min-h-0 flex-1", viewportClassName: "max-h-96", children: /* @__PURE__ */ jsxs28(
+                      ListboxContent,
+                      {
+                        "data-testid": "which-key-explorer-list",
+                        className: whichKeyExplorerListContentBase,
+                        children: [
+                          groupedEntries.map(([groupName, entries]) => /* @__PURE__ */ jsxs28(ListboxItemGroup, { children: [
+                            /* @__PURE__ */ jsx77(ListboxItemGroupLabel, { children: groupName }),
+                            entries.map((entry) => /* @__PURE__ */ jsxs28(
+                              ListboxItem,
+                              {
+                                item: {
+                                  value: entry.id,
+                                  label: entry.label
+                                },
+                                "data-testid": "which-key-explorer-item",
+                                "data-command-id": entry.commandId,
+                                onClick: () => controller.executeExplorerEntry(entry),
+                                className: whichKeyExplorerItemBase,
+                                children: [
+                                  /* @__PURE__ */ jsx77(ListboxItemText, { className: "min-w-0 flex-1 truncate font-medium text-foreground", children: /* @__PURE__ */ jsx77(
+                                    Highlight,
+                                    {
+                                      text: entry.label,
+                                      query: explorerQuery,
+                                      ignoreCase: true,
+                                      matchAll: true,
+                                      className: whichKeyExplorerHighlightMarkBase
+                                    }
+                                  ) }),
+                                  /* @__PURE__ */ jsx77(Row, { className: "shrink-0 items-center gap-1", children: /* @__PURE__ */ jsx77(Kbd, { size: "sm", hotkey: entry.chords }) })
+                                ]
+                              },
+                              entry.id
+                            ))
+                          ] }, groupName)),
+                          groupedEntries.length === 0 && /* @__PURE__ */ jsx77(ListboxEmpty, { children: "No matching keybindings found." })
+                        ]
+                      }
+                    ) })
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/which-key/WhichKeyMode.tsx
+import { forwardRef } from "react";
+import {
+  cn as cn77,
+  whichKeyModeBadgeVariants as whichKeyModeBadgeVariants2
+} from "@cloudvoyant/helical-ui";
+import { jsx as jsx78 } from "react/jsx-runtime";
+var WhichKeyMode = forwardRef(function WhichKeyMode2({ mode: modeProp, sticky: stickyProp, showPreset = false, size = "sm", className, ...props }, ref) {
+  const ctx = useWhichKey();
+  const resolvedMode = modeProp ?? ctx.mode;
+  const resolvedSticky = stickyProp ?? ctx.sticky;
+  const modeLabel = resolvedSticky ? `${resolvedMode}\xB7lock` : resolvedMode;
+  const label = showPreset ? `${ctx.preset} \xB7 ${modeLabel}` : modeLabel;
+  return /* @__PURE__ */ jsx78(
+    "span",
+    {
+      ref,
+      "data-slot": "which-key-mode",
+      "data-testid": "which-key-mode-badge",
+      "data-mode": resolvedMode,
+      "data-sticky": resolvedSticky ? "true" : "false",
+      "data-preset": ctx.preset,
+      className: cn77(whichKeyModeBadgeVariants2({ mode: resolvedMode, size }), className),
+      ...props,
+      children: label
+    }
+  );
+});
+
+// src/which-key/WhichKey.tsx
+import { Fragment as Fragment7, jsx as jsx79, jsxs as jsxs29 } from "react/jsx-runtime";
+function WhichKey(props) {
+  const controller = useOptionalWhichKeyController();
+  if (!controller) return null;
+  return /* @__PURE__ */ jsx79(WhichKeyInner, { ...props });
+}
+function WhichKeyInner({
+  variant = "helix",
+  showModeBadge = true,
+  showExplorer = true,
+  className
+}) {
+  const {
+    preset,
+    mode,
+    breadcrumb,
+    title,
+    items,
+    isOpen,
+    sticky,
+    countBuffer,
+    jumpAction,
+    jumpTargets,
+    triggerKey,
+    stepBackPrefix,
+    closePrefix,
+    controller
+  } = useWhichKey();
+  const panelRef = useRef4(null);
+  const jumpOverlayRef = useRef4(null);
+  useEffect10(() => {
+    if (!isOpen) return;
+    return controller.trackBranchElement(() => panelRef.current);
+  }, [controller, isOpen]);
+  useEffect10(() => {
+    if (mode !== "jump") return;
+    return controller.trackBranchElement(() => jumpOverlayRef.current);
+  }, [controller, mode]);
+  return /* @__PURE__ */ jsxs29(Fragment7, { children: [
+    /* @__PURE__ */ jsx79(Portal9, { children: /* @__PURE__ */ jsx79(Presence, { present: isOpen, lazyMount: true, unmountOnExit: true, children: /* @__PURE__ */ jsxs29(
+      "div",
+      {
+        ref: panelRef,
+        role: "region",
+        "aria-label": title || "WhichKey commands",
+        "data-which-key-root": "true",
+        "data-testid": "which-key-panel",
+        "data-variant": variant,
+        "data-preset": preset,
+        "data-mode": mode,
+        "data-sticky": sticky ? "true" : "false",
+        className: cn78(whichKeyVariants({ variant }), className),
+        children: [
+          /* @__PURE__ */ jsxs29("div", { className: whichKeyHeaderBase, children: [
+            /* @__PURE__ */ jsxs29("div", { className: whichKeyTitleBase, children: [
+              showModeBadge && /* @__PURE__ */ jsx79(WhichKeyMode, { mode, sticky }),
+              /* @__PURE__ */ jsx79("span", { "data-testid": "which-key-title", children: title === "Space" ? "Leader" : title }),
+              countBuffer && /* @__PURE__ */ jsxs29(
+                "span",
+                {
+                  "data-testid": "which-key-count",
+                  className: "rounded bg-muted px-1 font-mono text-[10px]",
+                  children: [
+                    countBuffer,
+                    "\xD7"
+                  ]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx79(
+              "div",
+              {
+                "data-testid": "which-key-breadcrumb",
+                className: whichKeyBreadcrumbBase,
+                children: /* @__PURE__ */ jsx79("span", { children: breadcrumb.join(" \xBB ") })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx79(Scroll, { className: "max-h-72", viewportClassName: "max-h-72", children: /* @__PURE__ */ jsx79(
+            "div",
+            {
+              "data-testid": "which-key-items",
+              className: whichKeyBodyVariants({ variant }),
+              children: items.map((node) => {
+                const isGroup = Boolean(
+                  node.children || node.proxy || node.expand || node.label.startsWith("+")
+                );
+                return /* @__PURE__ */ jsxs29(
+                  "button",
+                  {
+                    type: "button",
+                    "data-testid": "which-key-item",
+                    "data-key": node.key,
+                    "data-group": isGroup ? "true" : "false",
+                    onClick: (e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      triggerKey(node.key);
+                    },
+                    className: whichKeyItemBase,
+                    children: [
+                      /* @__PURE__ */ jsx79(
+                        "span",
+                        {
+                          "data-group": isGroup ? "true" : "false",
+                          className: whichKeyItemLabelBase,
+                          children: node.label
+                        }
+                      ),
+                      /* @__PURE__ */ jsx79(
+                        Kbd,
+                        {
+                          size: "sm",
+                          variant: isGroup ? "subtle" : "outline",
+                          hotkey: node.key
+                        }
+                      )
+                    ]
+                  },
+                  node.key
+                );
+              })
+            }
+          ) }),
+          /* @__PURE__ */ jsxs29("div", { className: whichKeyFooterBase, children: [
+            /* @__PURE__ */ jsxs29(Row, { className: "items-center gap-2", children: [
+              breadcrumb.length > 1 && /* @__PURE__ */ jsxs29(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => stepBackPrefix(),
+                  className: "inline-flex items-center gap-1 hover:text-foreground",
+                  children: [
+                    /* @__PURE__ */ jsx79(Kbd, { size: "sm", children: "\u232B" }),
+                    /* @__PURE__ */ jsx79("span", { children: "Back" })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs29(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => closePrefix(),
+                  className: "inline-flex items-center gap-1 hover:text-foreground",
+                  children: [
+                    /* @__PURE__ */ jsx79(Kbd, { size: "sm", children: "Esc" }),
+                    /* @__PURE__ */ jsx79("span", { children: "Close" })
+                  ]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx79("span", { className: "font-mono uppercase opacity-75", children: preset })
+          ] })
+        ]
+      }
+    ) }) }),
+    /* @__PURE__ */ jsx79(Portal9, { children: /* @__PURE__ */ jsx79(
+      Presence,
+      {
+        present: mode === "jump" && jumpTargets.length > 0,
+        lazyMount: true,
+        unmountOnExit: true,
+        children: /* @__PURE__ */ jsx79(
+          "div",
+          {
+            ref: jumpOverlayRef,
+            "data-which-key-jump-overlay": "true",
+            "data-testid": "which-key-jump-overlay",
+            "data-jump-action": jumpAction,
+            className: jumpOverlayRootBase,
+            children: jumpTargets.map((target) => /* @__PURE__ */ jsxs29(
+              "span",
+              {
+                "data-testid": "which-key-jump-badge",
+                "data-jump-label": target.label,
+                style: {
+                  top: `${Math.max(4, target.rect.top - 4)}px`,
+                  left: `${Math.max(4, target.rect.left - 4)}px`
+                },
+                className: jumpBadgeVariants({ action: jumpAction }),
+                children: [
+                  target.matchedPrefix && /* @__PURE__ */ jsx79("span", { className: jumpBadgeMatchedPrefixBase, children: target.matchedPrefix }),
+                  /* @__PURE__ */ jsx79("span", { children: target.remainingLabel })
+                ]
+              },
+              target.id
+            ))
+          }
+        )
+      }
+    ) }),
+    showExplorer && /* @__PURE__ */ jsx79(WhichKeyExplorer, {})
+  ] });
 }
 
 // src/editor/Editor.tsx
-import { forwardRef as forwardRef3, useEffect as useEffect16, useImperativeHandle as useImperativeHandle3, useMemo as useMemo7, useRef as useRef9, useState as useState18 } from "react";
+import { forwardRef as forwardRef4, useEffect as useEffect19, useImperativeHandle as useImperativeHandle3, useMemo as useMemo8, useRef as useRef11, useState as useState19 } from "react";
 import { useEditor, EditorContent, ReactNodeViewRenderer } from "@tiptap/react";
 import {
   buildExtensions,
@@ -3544,14 +4537,14 @@ import {
 } from "@cloudvoyant/helical-ui";
 
 // src/editor/ImageNodeView.tsx
-import { useState as useState8 } from "react";
+import { useState as useState9 } from "react";
 import { NodeViewWrapper } from "@tiptap/react";
-import { jsx as jsx74, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx80, jsxs as jsxs30 } from "react/jsx-runtime";
 function ImageNodeView({ node, updateAttributes, selected, editor, getPos }) {
-  const [captionFocused, setCaptionFocused] = useState8(false);
+  const [captionFocused, setCaptionFocused] = useState9(false);
   const { src, srcset, alt, caption } = node.attrs;
-  return /* @__PURE__ */ jsxs28(NodeViewWrapper, { as: "figure", "data-type": "image-node", className: "my-6 m-0 relative", children: [
-    /* @__PURE__ */ jsx74(
+  return /* @__PURE__ */ jsxs30(NodeViewWrapper, { as: "figure", "data-type": "image-node", className: "my-6 m-0 relative", children: [
+    /* @__PURE__ */ jsx80(
       "img",
       {
         src,
@@ -3562,7 +4555,7 @@ function ImageNodeView({ node, updateAttributes, selected, editor, getPos }) {
         "data-selected": selected ? "" : void 0
       }
     ),
-    /* @__PURE__ */ jsx74(
+    /* @__PURE__ */ jsx80(
       "input",
       {
         className: "caption-input mt-2 w-full bg-transparent text-center text-sm italic text-muted-foreground outline-none",
@@ -3595,11 +4588,11 @@ function ImageNodeView({ node, updateAttributes, selected, editor, getPos }) {
 
 // src/editor/UrlMentionPill.tsx
 import { NodeViewWrapper as NodeViewWrapper2 } from "@tiptap/react";
-import { jsx as jsx75, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx81, jsxs as jsxs31 } from "react/jsx-runtime";
 function UrlMentionPill({ node }) {
   const { url, title, favicon } = node.attrs;
   const displayTitle = title || url || "";
-  return /* @__PURE__ */ jsx75(NodeViewWrapper2, { as: "span", className: "inline", children: /* @__PURE__ */ jsxs29(
+  return /* @__PURE__ */ jsx81(NodeViewWrapper2, { as: "span", className: "inline", children: /* @__PURE__ */ jsxs31(
     "a",
     {
       href: url || "",
@@ -3609,7 +4602,7 @@ function UrlMentionPill({ node }) {
       className: "url-mention-pill url-mention-pill-edit inline-flex items-center gap-1.5 rounded-md px-1.5 py-0.5 align-text-bottom text-sm leading-tight no-underline",
       style: { color: "inherit" },
       children: [
-        favicon ? /* @__PURE__ */ jsx75(
+        favicon ? /* @__PURE__ */ jsx81(
           "img",
           {
             src: favicon,
@@ -3619,8 +4612,8 @@ function UrlMentionPill({ node }) {
               event.currentTarget.style.display = "none";
             }
           }
-        ) : /* @__PURE__ */ jsx75("svg", { className: "inline-block h-3.5 w-3.5 shrink-0", fill: "currentColor", viewBox: "0 0 20 20", "aria-hidden": "true", children: /* @__PURE__ */ jsx75("path", { d: "M12.586 4.586a2 2 0 112.828 2.828l-3 3a2 2 0 01-2.828 0 1 1 0 00-1.414 1.414 4 4 0 005.656 0l-3-3a4 4 0 00-5.656-5.656l-1.5 1.5a1 1 0 101.414 1.414l1.5-1.5zm-5 5a2 2 0 012.828 0 1 1 0 101.414-1.414 4 4 0 00-5.656 0l-3 3a4 4 0 105.656 5.656l1.5-1.5a1 1 0 10-1.414-1.414l-1.5 1.5a2 2 0 11-2.828-2.828l3-3z" }) }),
-        /* @__PURE__ */ jsx75("span", { children: displayTitle })
+        ) : /* @__PURE__ */ jsx81("svg", { className: "inline-block h-3.5 w-3.5 shrink-0", fill: "currentColor", viewBox: "0 0 20 20", "aria-hidden": "true", children: /* @__PURE__ */ jsx81("path", { d: "M12.586 4.586a2 2 0 112.828 2.828l-3 3a2 2 0 01-2.828 0 1 1 0 00-1.414 1.414 4 4 0 005.656 0l-3-3a4 4 0 00-5.656-5.656l-1.5 1.5a1 1 0 101.414 1.414l1.5-1.5zm-5 5a2 2 0 012.828 0 1 1 0 101.414-1.414 4 4 0 00-5.656 0l-3 3a4 4 0 105.656 5.656l1.5-1.5a1 1 0 10-1.414-1.414l-1.5 1.5a2 2 0 11-2.828-2.828l3-3z" }) }),
+        /* @__PURE__ */ jsx81("span", { children: displayTitle })
       ]
     }
   ) });
@@ -3628,7 +4621,7 @@ function UrlMentionPill({ node }) {
 
 // src/editor/LinkPreviewCard.tsx
 import { NodeViewWrapper as NodeViewWrapper3 } from "@tiptap/react";
-import { jsx as jsx76, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx82, jsxs as jsxs32 } from "react/jsx-runtime";
 function hostnameOf(url) {
   try {
     return new URL(url).hostname;
@@ -3650,10 +4643,10 @@ function LinkPreviewCard({ node }) {
   const { url, title, description, image, favicon, type } = node.attrs;
   if (type === "embed") {
     const videoId = url ? youTubeId(url) : null;
-    return /* @__PURE__ */ jsx76(NodeViewWrapper3, { as: "div", "data-type": "link-preview", className: "link-preview my-4", children: videoId ? (
+    return /* @__PURE__ */ jsx82(NodeViewWrapper3, { as: "div", "data-type": "link-preview", className: "link-preview my-4", children: videoId ? (
       // helical YouTube takes the full url and derives the id itself.
-      /* @__PURE__ */ jsx76(YouTube, { url, title })
-    ) : /* @__PURE__ */ jsx76("div", { className: "relative h-0 overflow-hidden rounded-lg pb-[56.25%]", children: /* @__PURE__ */ jsx76(
+      /* @__PURE__ */ jsx82(YouTube, { url, title })
+    ) : /* @__PURE__ */ jsx82("div", { className: "relative h-0 overflow-hidden rounded-lg pb-[56.25%]", children: /* @__PURE__ */ jsx82(
       "iframe",
       {
         src: url,
@@ -3664,7 +4657,7 @@ function LinkPreviewCard({ node }) {
       }
     ) }) });
   }
-  return /* @__PURE__ */ jsx76(NodeViewWrapper3, { as: "div", "data-type": "link-preview", className: "link-preview my-4", children: /* @__PURE__ */ jsxs30(
+  return /* @__PURE__ */ jsx82(NodeViewWrapper3, { as: "div", "data-type": "link-preview", className: "link-preview my-4", children: /* @__PURE__ */ jsxs32(
     "a",
     {
       href: url || "",
@@ -3673,13 +4666,13 @@ function LinkPreviewCard({ node }) {
       className: "bookmark-link flex overflow-hidden rounded-lg border border-border/70 bg-muted/40 no-underline transition-colors hover:bg-muted",
       style: { color: "inherit" },
       children: [
-        /* @__PURE__ */ jsxs30("div", { className: "flex min-w-0 flex-1 flex-col justify-between px-3 py-1.5", children: [
-          /* @__PURE__ */ jsxs30("div", { children: [
-            /* @__PURE__ */ jsx76("div", { className: "mb-1 line-clamp-1 text-base font-semibold", children: title }),
-            description ? /* @__PURE__ */ jsx76("p", { className: "mb-2 line-clamp-2 text-xs leading-snug text-muted-foreground", children: description }) : null
+        /* @__PURE__ */ jsxs32("div", { className: "flex min-w-0 flex-1 flex-col justify-between px-3 py-1.5", children: [
+          /* @__PURE__ */ jsxs32("div", { children: [
+            /* @__PURE__ */ jsx82("div", { className: "mb-1 line-clamp-1 text-base font-semibold", children: title }),
+            description ? /* @__PURE__ */ jsx82("p", { className: "mb-2 line-clamp-2 text-xs leading-snug text-muted-foreground", children: description }) : null
           ] }),
-          /* @__PURE__ */ jsxs30("div", { className: "mt-auto flex items-center gap-1.5 text-xs text-muted-foreground", children: [
-            favicon ? /* @__PURE__ */ jsx76(
+          /* @__PURE__ */ jsxs32("div", { className: "mt-auto flex items-center gap-1.5 text-xs text-muted-foreground", children: [
+            favicon ? /* @__PURE__ */ jsx82(
               "img",
               {
                 src: favicon,
@@ -3689,11 +4682,11 @@ function LinkPreviewCard({ node }) {
                   event.currentTarget.style.display = "none";
                 }
               }
-            ) : /* @__PURE__ */ jsx76("svg", { className: "h-3 w-3 shrink-0", fill: "currentColor", viewBox: "0 0 20 20", "aria-hidden": "true", children: /* @__PURE__ */ jsx76("path", { d: "M12.586 4.586a2 2 0 112.828 2.828l-3 3a2 2 0 01-2.828 0 1 1 0 00-1.414 1.414 4 4 0 005.656 0l-3-3a4 4 0 00-5.656-5.656l-1.5 1.5a1 1 0 101.414 1.414l1.5-1.5zm-5 5a2 2 0 012.828 0 1 1 0 101.414-1.414 4 4 0 00-5.656 0l-3 3a4 4 0 105.656 5.656l1.5-1.5a1 1 0 10-1.414-1.414l-1.5 1.5a2 2 0 11-2.828-2.828l3-3z" }) }),
-            /* @__PURE__ */ jsx76("span", { className: "truncate opacity-80", children: url ? hostnameOf(url) : "" })
+            ) : /* @__PURE__ */ jsx82("svg", { className: "h-3 w-3 shrink-0", fill: "currentColor", viewBox: "0 0 20 20", "aria-hidden": "true", children: /* @__PURE__ */ jsx82("path", { d: "M12.586 4.586a2 2 0 112.828 2.828l-3 3a2 2 0 01-2.828 0 1 1 0 00-1.414 1.414 4 4 0 005.656 0l-3-3a4 4 0 00-5.656-5.656l-1.5 1.5a1 1 0 101.414 1.414l1.5-1.5zm-5 5a2 2 0 012.828 0 1 1 0 101.414-1.414 4 4 0 00-5.656 0l-3 3a4 4 0 105.656 5.656l1.5-1.5a1 1 0 10-1.414-1.414l-1.5 1.5a2 2 0 11-2.828-2.828l3-3z" }) }),
+            /* @__PURE__ */ jsx82("span", { className: "truncate opacity-80", children: url ? hostnameOf(url) : "" })
           ] })
         ] }),
-        image ? /* @__PURE__ */ jsx76("div", { className: "aspect-video w-44 shrink-0 bg-muted", children: /* @__PURE__ */ jsx76(
+        image ? /* @__PURE__ */ jsx82("div", { className: "aspect-video w-44 shrink-0 bg-muted", children: /* @__PURE__ */ jsx82(
           "img",
           {
             src: image,
@@ -3713,8 +4706,8 @@ function LinkPreviewCard({ node }) {
 // src/editor/CodeBlockComponent.tsx
 import { NodeViewWrapper as NodeViewWrapper4, NodeViewContent } from "@tiptap/react";
 import { ChevronsUpDown, Check } from "lucide-react";
-import { cn as cn74, codeBlockBodyBase as codeBlockBodyBase2, codeBlockContentBase as codeBlockContentBase2 } from "@cloudvoyant/helical-ui";
-import { jsx as jsx77, jsxs as jsxs31 } from "react/jsx-runtime";
+import { cn as cn79, codeBlockBodyBase as codeBlockBodyBase2, codeBlockContentBase as codeBlockContentBase2 } from "@cloudvoyant/helical-ui";
+import { jsx as jsx83, jsxs as jsxs33 } from "react/jsx-runtime";
 var LANGUAGES = [
   { value: "javascript", label: "JavaScript" },
   { value: "typescript", label: "TypeScript" },
@@ -3737,11 +4730,11 @@ function CodeBlockComponent({ node, editor, updateAttributes }) {
   const language = node.attrs.language || "javascript";
   const editable = editor.isEditable;
   const currentLabel = LANGUAGES.find((item) => item.value === language)?.label ?? "JavaScript";
-  return /* @__PURE__ */ jsx77(NodeViewWrapper4, { className: "my-4", children: /* @__PURE__ */ jsxs31(CodeBlock, { code: node.textContent, language, className: "my-0", children: [
-    /* @__PURE__ */ jsxs31(CodeBlockHeader, { children: [
-      /* @__PURE__ */ jsx77(CodeBlockTitle, { children: currentLabel }),
-      /* @__PURE__ */ jsxs31("div", { className: "ml-auto flex items-center gap-2", contentEditable: false, children: [
-        editable ? /* @__PURE__ */ jsxs31(
+  return /* @__PURE__ */ jsx83(NodeViewWrapper4, { className: "my-4", children: /* @__PURE__ */ jsxs33(CodeBlock, { code: node.textContent, language, className: "my-0", children: [
+    /* @__PURE__ */ jsxs33(CodeBlockHeader, { children: [
+      /* @__PURE__ */ jsx83(CodeBlockTitle, { children: currentLabel }),
+      /* @__PURE__ */ jsxs33("div", { className: "ml-auto flex items-center gap-2", contentEditable: false, children: [
+        editable ? /* @__PURE__ */ jsxs33(
           Select,
           {
             items: LANGUAGES,
@@ -3752,28 +4745,28 @@ function CodeBlockComponent({ node, editor, updateAttributes }) {
             },
             "aria-label": "Code language",
             children: [
-              /* @__PURE__ */ jsxs31(SelectTrigger, { size: "sm", className: "min-w-36 justify-between font-mono text-xs", children: [
-                /* @__PURE__ */ jsx77(SelectValue, {}),
-                /* @__PURE__ */ jsx77(SelectIndicator, { children: /* @__PURE__ */ jsx77(ChevronsUpDown, { className: "size-3 opacity-50" }) })
+              /* @__PURE__ */ jsxs33(SelectTrigger, { size: "sm", className: "min-w-36 justify-between font-mono text-xs", children: [
+                /* @__PURE__ */ jsx83(SelectValue, {}),
+                /* @__PURE__ */ jsx83(SelectIndicator, { children: /* @__PURE__ */ jsx83(ChevronsUpDown, { className: "size-3 opacity-50" }) })
               ] }),
-              /* @__PURE__ */ jsx77(SelectContent, { children: LANGUAGES.map((item) => /* @__PURE__ */ jsxs31(SelectItem, { item, children: [
-                /* @__PURE__ */ jsx77(SelectItemText, { children: item.label }),
-                /* @__PURE__ */ jsx77(SelectItemIndicator, { children: /* @__PURE__ */ jsx77(Check, { className: "size-4" }) })
+              /* @__PURE__ */ jsx83(SelectContent, { children: LANGUAGES.map((item) => /* @__PURE__ */ jsxs33(SelectItem, { item, children: [
+                /* @__PURE__ */ jsx83(SelectItemText, { children: item.label }),
+                /* @__PURE__ */ jsx83(SelectItemIndicator, { children: /* @__PURE__ */ jsx83(Check, { className: "size-4" }) })
               ] }, item.value)) })
             ]
           }
         ) : null,
-        /* @__PURE__ */ jsx77(CodeBlockCopyButton, {})
+        /* @__PURE__ */ jsx83(CodeBlockCopyButton, {})
       ] })
     ] }),
-    /* @__PURE__ */ jsx77("div", { className: codeBlockBodyBase2, children: /* @__PURE__ */ jsx77(
+    /* @__PURE__ */ jsx83("div", { className: codeBlockBodyBase2, children: /* @__PURE__ */ jsx83(
       "pre",
       {
-        className: cn74(
+        className: cn79(
           codeBlockContentBase2,
           "editor-code-content m-0 rounded-none border-0 bg-transparent p-4 font-mono [&_code]:bg-transparent [&_code]:p-0"
         ),
-        children: /* @__PURE__ */ jsx77(NodeViewContent, { as: "code" })
+        children: /* @__PURE__ */ jsx83(NodeViewContent, { as: "code" })
       }
     ) })
   ] }) });
@@ -3781,7 +4774,7 @@ function CodeBlockComponent({ node, editor, updateAttributes }) {
 
 // src/editor/NoticeNodeView.tsx
 import { NodeViewContent as NodeViewContent2, NodeViewWrapper as NodeViewWrapper5 } from "@tiptap/react";
-import { jsx as jsx78, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx84, jsxs as jsxs34 } from "react/jsx-runtime";
 var VARIANTS = ["info", "success", "warning", "error"];
 function NoticeNodeView({ node, editor, getPos, updateAttributes }) {
   const variant = node.attrs.variant ?? "info";
@@ -3794,9 +4787,9 @@ function NoticeNodeView({ node, editor, getPos, updateAttributes }) {
     const position = bodyStart();
     if (position !== null) editor.chain().focus().setTextSelection(position).run();
   };
-  return /* @__PURE__ */ jsx78(NodeViewWrapper5, { children: /* @__PURE__ */ jsxs32(Notice, { variant, className: "editor-notice-node relative my-1 px-2 py-1", children: [
-    /* @__PURE__ */ jsxs32("div", { className: "flex items-center gap-2", contentEditable: false, children: [
-      /* @__PURE__ */ jsx78(
+  return /* @__PURE__ */ jsx84(NodeViewWrapper5, { children: /* @__PURE__ */ jsxs34(Notice, { variant, className: "editor-notice-node relative my-1 px-2 py-1", children: [
+    /* @__PURE__ */ jsxs34("div", { className: "flex items-center gap-2", contentEditable: false, children: [
+      /* @__PURE__ */ jsx84(
         "input",
         {
           "aria-label": "Notice title",
@@ -3812,23 +4805,23 @@ function NoticeNodeView({ node, editor, getPos, updateAttributes }) {
           placeholder: "Notice title"
         }
       ),
-      /* @__PURE__ */ jsx78(
+      /* @__PURE__ */ jsx84(
         "select",
         {
           "aria-label": "Notice type",
           value: variant,
           onChange: (event) => updateAttributes({ variant: event.target.value }),
           className: "rounded border border-input bg-background px-1.5 py-0.5 text-xs",
-          children: VARIANTS.map((value) => /* @__PURE__ */ jsx78("option", { value, children: value }, value))
+          children: VARIANTS.map((value) => /* @__PURE__ */ jsx84("option", { value, children: value }, value))
         }
       )
     ] }),
-    /* @__PURE__ */ jsx78(NodeViewContent2, { className: "[&_p]:m-0" })
+    /* @__PURE__ */ jsx84(NodeViewContent2, { className: "[&_p]:m-0" })
   ] }) });
 }
 
 // src/editor/BubbleMenu.tsx
-import { useEffect as useEffect10, useState as useState11 } from "react";
+import { useEffect as useEffect13, useState as useState12 } from "react";
 import { BubbleMenu as TiptapBubbleMenu } from "@tiptap/react/menus";
 import {
   Bold,
@@ -3843,10 +4836,10 @@ import {
 } from "lucide-react";
 
 // src/editor/FontColorPicker.tsx
-import { useEffect as useEffect8, useState as useState9 } from "react";
+import { useEffect as useEffect11, useState as useState10 } from "react";
 import { Palette, Highlighter } from "lucide-react";
-import { cn as cn75 } from "@cloudvoyant/helical-ui";
-import { jsx as jsx79, jsxs as jsxs33 } from "react/jsx-runtime";
+import { cn as cn80 } from "@cloudvoyant/helical-ui";
+import { jsx as jsx85, jsxs as jsxs35 } from "react/jsx-runtime";
 var COLORS = ["yellow", "orange", "red", "fuchsia", "violet", "blue", "cyan", "green", "slate"];
 var TEXT_PREVIEW = {
   yellow: "#f59e0b",
@@ -3871,12 +4864,12 @@ var HIGHLIGHT_PREVIEW = {
   slate: "#e2e8f0"
 };
 function FontColorPicker({ editor, mode }) {
-  const [open, setOpen] = useState9(false);
-  const [, setRevision] = useState9(0);
+  const [open, setOpen] = useState10(false);
+  const [, setRevision] = useState10(0);
   const preview = mode === "highlight" ? HIGHLIGHT_PREVIEW : TEXT_PREVIEW;
   const active = editor.isActive(mode === "highlight" ? "highlight" : "textStyle");
   const currentColor = editor.getAttributes(mode === "highlight" ? "highlight" : "textStyle").color;
-  useEffect8(() => {
+  useEffect11(() => {
     const refresh = () => setRevision((revision) => revision + 1);
     editor.on("transaction", refresh);
     editor.on("selectionUpdate", refresh);
@@ -3902,39 +4895,39 @@ function FontColorPicker({ editor, mode }) {
     setOpen(false);
   }
   const label = mode === "highlight" ? "Highlight color" : "Text color";
-  return /* @__PURE__ */ jsxs33(Popover, { open, onOpenChange: (details) => setOpen(details.open), children: [
-    /* @__PURE__ */ jsx79(
+  return /* @__PURE__ */ jsxs35(Popover, { open, onOpenChange: (details) => setOpen(details.open), children: [
+    /* @__PURE__ */ jsx85(
       PopoverTrigger,
       {
         "aria-label": label,
         "data-state": active ? "on" : "off",
-        className: cn75(
+        className: cn80(
           "inline-flex h-8 w-8 items-center justify-center rounded-md hover:bg-muted data-[state=on]:bg-accent data-[state=on]:text-accent-foreground"
         ),
-        children: mode === "highlight" ? /* @__PURE__ */ jsx79(Highlighter, { className: "h-4 w-4", style: currentColor ? { color: currentColor } : void 0 }) : /* @__PURE__ */ jsx79(Palette, { className: "h-4 w-4", style: currentColor ? { color: currentColor } : void 0 })
+        children: mode === "highlight" ? /* @__PURE__ */ jsx85(Highlighter, { className: "h-4 w-4", style: currentColor ? { color: currentColor } : void 0 }) : /* @__PURE__ */ jsx85(Palette, { className: "h-4 w-4", style: currentColor ? { color: currentColor } : void 0 })
       }
     ),
-    /* @__PURE__ */ jsxs33(PopoverContent, { className: "w-auto p-2", children: [
-      /* @__PURE__ */ jsx79("div", { className: "grid grid-cols-5 gap-1", children: COLORS.map((color) => /* @__PURE__ */ jsx79(
+    /* @__PURE__ */ jsxs35(PopoverContent, { className: "w-auto p-2", children: [
+      /* @__PURE__ */ jsx85("div", { className: "grid grid-cols-5 gap-1", children: COLORS.map((color) => /* @__PURE__ */ jsx85(
         "button",
         {
           type: "button",
           "aria-label": color,
           onClick: () => selectColor(color),
-          className: cn75("h-6 w-6 rounded border border-border transition-transform hover:scale-110"),
+          className: cn80("h-6 w-6 rounded border border-border transition-transform hover:scale-110"),
           style: { backgroundColor: preview[color] }
         },
         color
       )) }),
-      /* @__PURE__ */ jsx79("button", { type: "button", onClick: clearColor, className: "mt-2 w-full rounded px-2 py-1 text-xs hover:bg-muted", children: "Clear" })
+      /* @__PURE__ */ jsx85("button", { type: "button", onClick: clearColor, className: "mt-2 w-full rounded px-2 py-1 text-xs hover:bg-muted", children: "Clear" })
     ] })
   ] });
 }
 
 // src/editor/LinkEditPopover.tsx
-import { useEffect as useEffect9, useRef as useRef3, useState as useState10 } from "react";
+import { useEffect as useEffect12, useRef as useRef5, useState as useState11 } from "react";
 import { ExternalLink, Globe, Trash2 } from "lucide-react";
-import { jsx as jsx80, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx86, jsxs as jsxs36 } from "react/jsx-runtime";
 function safeExternalUrl(value) {
   try {
     const url = new URL(value);
@@ -3944,10 +4937,10 @@ function safeExternalUrl(value) {
   }
 }
 function LinkEditPopover({ editor, initialUrl = "", onClose }) {
-  const [url, setUrl] = useState10(initialUrl);
-  const inputRef = useRef3(null);
+  const [url, setUrl] = useState11(initialUrl);
+  const inputRef = useRef5(null);
   const externalUrl = safeExternalUrl(url.trim());
-  useEffect9(() => {
+  useEffect12(() => {
     setUrl(initialUrl);
     inputRef.current?.focus();
   }, [initialUrl]);
@@ -3961,7 +4954,7 @@ function LinkEditPopover({ editor, initialUrl = "", onClose }) {
     editor.chain().focus().unsetLink().run();
     onClose();
   }
-  return /* @__PURE__ */ jsxs34(
+  return /* @__PURE__ */ jsxs36(
     "div",
     {
       role: "dialog",
@@ -3978,8 +4971,8 @@ function LinkEditPopover({ editor, initialUrl = "", onClose }) {
         }
       },
       children: [
-        /* @__PURE__ */ jsx80(Globe, { className: "size-4 shrink-0 text-muted-foreground", "aria-hidden": "true" }),
-        /* @__PURE__ */ jsx80(
+        /* @__PURE__ */ jsx86(Globe, { className: "size-4 shrink-0 text-muted-foreground", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx86(
           "input",
           {
             ref: inputRef,
@@ -3990,7 +4983,7 @@ function LinkEditPopover({ editor, initialUrl = "", onClose }) {
             className: "min-w-0 flex-1 bg-transparent px-1 py-1 text-sm outline-none placeholder:text-muted-foreground"
           }
         ),
-        /* @__PURE__ */ jsx80(
+        /* @__PURE__ */ jsx86(
           "button",
           {
             type: "button",
@@ -3998,10 +4991,10 @@ function LinkEditPopover({ editor, initialUrl = "", onClose }) {
             className: "rounded p-1 text-muted-foreground hover:bg-accent hover:text-accent-foreground",
             "aria-label": "Remove link",
             title: "Remove link",
-            children: /* @__PURE__ */ jsx80(Trash2, { className: "size-4" })
+            children: /* @__PURE__ */ jsx86(Trash2, { className: "size-4" })
           }
         ),
-        externalUrl ? /* @__PURE__ */ jsx80(
+        externalUrl ? /* @__PURE__ */ jsx86(
           "a",
           {
             href: externalUrl,
@@ -4010,7 +5003,7 @@ function LinkEditPopover({ editor, initialUrl = "", onClose }) {
             className: "rounded p-1 text-muted-foreground hover:bg-accent hover:text-accent-foreground",
             "aria-label": "Open link in new tab",
             title: "Open link in new tab",
-            children: /* @__PURE__ */ jsx80(ExternalLink, { className: "size-4" })
+            children: /* @__PURE__ */ jsx86(ExternalLink, { className: "size-4" })
           }
         ) : null
       ]
@@ -4020,13 +5013,13 @@ function LinkEditPopover({ editor, initialUrl = "", onClose }) {
 
 // src/editor/BubbleMenu.tsx
 import { findEditorScrollContainer } from "@cloudvoyant/helical-ui";
-import { jsx as jsx81, jsxs as jsxs35 } from "react/jsx-runtime";
+import { jsx as jsx87, jsxs as jsxs37 } from "react/jsx-runtime";
 function BubbleMenu({ editor }) {
-  const [isEditingLink, setIsEditingLink] = useState11(false);
-  const [linkUrl, setLinkUrl] = useState11("");
-  const [dismissedSelection, setDismissedSelection] = useState11(null);
+  const [isEditingLink, setIsEditingLink] = useState12(false);
+  const [linkUrl, setLinkUrl] = useState12("");
+  const [dismissedSelection, setDismissedSelection] = useState12(null);
   const currentAlign = ["left", "center", "right", "justify"].find((a) => editor.isActive({ textAlign: a }));
-  useEffect10(() => {
+  useEffect13(() => {
     if (!isEditingLink) return;
     const container = findEditorScrollContainer(editor.view.dom);
     if (!container) return;
@@ -4034,7 +5027,7 @@ function BubbleMenu({ editor }) {
     container.addEventListener("wheel", preventWheel, { passive: false });
     return () => container.removeEventListener("wheel", preventWheel);
   }, [editor, isEditingLink]);
-  useEffect10(() => {
+  useEffect13(() => {
     const selectionKey = () => `${editor.state.selection.from}:${editor.state.selection.to}`;
     const handleEscape = (event) => {
       if (event.key === "Escape" && !editor.state.selection.empty) setDismissedSelection(selectionKey());
@@ -4050,7 +5043,7 @@ function BubbleMenu({ editor }) {
       editor.off("selectionUpdate", handleSelectionUpdate);
     };
   }, [editor]);
-  return /* @__PURE__ */ jsxs35(
+  return /* @__PURE__ */ jsxs37(
     TiptapBubbleMenu,
     {
       editor,
@@ -4061,8 +5054,8 @@ function BubbleMenu({ editor }) {
       tabIndex: -1,
       className: "flex items-center gap-1 rounded-md border border-border bg-popover p-1 shadow-md",
       children: [
-        /* @__PURE__ */ jsxs35(ToggleGroup, { multiple: true, defaultValue: [], children: [
-          /* @__PURE__ */ jsx81(
+        /* @__PURE__ */ jsxs37(ToggleGroup, { multiple: true, defaultValue: [], children: [
+          /* @__PURE__ */ jsx87(
             ToggleGroupItem,
             {
               value: "bold",
@@ -4070,10 +5063,10 @@ function BubbleMenu({ editor }) {
               "aria-label": "Bold",
               "data-state": editor.isActive("bold") ? "on" : "off",
               onClick: () => editor.chain().focus().toggleBold().run(),
-              children: /* @__PURE__ */ jsx81(Bold, {})
+              children: /* @__PURE__ */ jsx87(Bold, {})
             }
           ),
-          /* @__PURE__ */ jsx81(
+          /* @__PURE__ */ jsx87(
             ToggleGroupItem,
             {
               value: "italic",
@@ -4081,10 +5074,10 @@ function BubbleMenu({ editor }) {
               "aria-label": "Italic",
               "data-state": editor.isActive("italic") ? "on" : "off",
               onClick: () => editor.chain().focus().toggleItalic().run(),
-              children: /* @__PURE__ */ jsx81(Italic, {})
+              children: /* @__PURE__ */ jsx87(Italic, {})
             }
           ),
-          /* @__PURE__ */ jsx81(
+          /* @__PURE__ */ jsx87(
             ToggleGroupItem,
             {
               value: "underline",
@@ -4092,10 +5085,10 @@ function BubbleMenu({ editor }) {
               "aria-label": "Underline",
               "data-state": editor.isActive("underline") ? "on" : "off",
               onClick: () => editor.chain().focus().toggleUnderline().run(),
-              children: /* @__PURE__ */ jsx81(UnderlineIcon, {})
+              children: /* @__PURE__ */ jsx87(UnderlineIcon, {})
             }
           ),
-          /* @__PURE__ */ jsx81(
+          /* @__PURE__ */ jsx87(
             ToggleGroupItem,
             {
               value: "strike",
@@ -4103,30 +5096,30 @@ function BubbleMenu({ editor }) {
               "aria-label": "Strikethrough",
               "data-state": editor.isActive("strike") ? "on" : "off",
               onClick: () => editor.chain().focus().toggleStrike().run(),
-              children: /* @__PURE__ */ jsx81(Strikethrough, {})
+              children: /* @__PURE__ */ jsx87(Strikethrough, {})
             }
           )
         ] }),
-        /* @__PURE__ */ jsx81(FontColorPicker, { editor, mode: "text" }),
-        /* @__PURE__ */ jsx81(FontColorPicker, { editor, mode: "highlight" }),
-        /* @__PURE__ */ jsx81(ToggleGroup, { defaultValue: currentAlign ? [currentAlign] : [], children: [
+        /* @__PURE__ */ jsx87(FontColorPicker, { editor, mode: "text" }),
+        /* @__PURE__ */ jsx87(FontColorPicker, { editor, mode: "highlight" }),
+        /* @__PURE__ */ jsx87(ToggleGroup, { defaultValue: currentAlign ? [currentAlign] : [], children: [
           ["left", AlignLeft],
           ["center", AlignCenter],
           ["right", AlignRight],
           ["justify", AlignJustify]
-        ].map(([align, Icon]) => /* @__PURE__ */ jsx81(
+        ].map(([align, Icon]) => /* @__PURE__ */ jsx87(
           ToggleGroupItem,
           {
             value: align,
             size: "sm",
             "aria-label": `Align ${align}`,
             onClick: () => editor.chain().focus().setTextAlign(align).run(),
-            children: /* @__PURE__ */ jsx81(Icon, {})
+            children: /* @__PURE__ */ jsx87(Icon, {})
           },
           align
         )) }),
-        /* @__PURE__ */ jsxs35("div", { className: "relative", children: [
-          /* @__PURE__ */ jsx81(ToggleGroup, { defaultValue: [], children: /* @__PURE__ */ jsx81(
+        /* @__PURE__ */ jsxs37("div", { className: "relative", children: [
+          /* @__PURE__ */ jsx87(ToggleGroup, { defaultValue: [], children: /* @__PURE__ */ jsx87(
             ToggleGroupItem,
             {
               value: "link",
@@ -4136,10 +5129,10 @@ function BubbleMenu({ editor }) {
                 setLinkUrl(editor.getAttributes("link").href ?? "");
                 setIsEditingLink(true);
               },
-              children: /* @__PURE__ */ jsx81(Link2, {})
+              children: /* @__PURE__ */ jsx87(Link2, {})
             }
           ) }),
-          isEditingLink ? /* @__PURE__ */ jsx81(LinkEditPopover, { editor, initialUrl: linkUrl, onClose: () => setIsEditingLink(false) }) : null
+          isEditingLink ? /* @__PURE__ */ jsx87(LinkEditPopover, { editor, initialUrl: linkUrl, onClose: () => setIsEditingLink(false) }) : null
         ] })
       ]
     }
@@ -4147,7 +5140,7 @@ function BubbleMenu({ editor }) {
 }
 
 // src/editor/SlashMenu.tsx
-import { forwardRef, useEffect as useEffect11, useImperativeHandle, useRef as useRef4, useState as useState12 } from "react";
+import { forwardRef as forwardRef2, useEffect as useEffect14, useImperativeHandle, useRef as useRef6, useState as useState13 } from "react";
 import {
   Bookmark,
   Code,
@@ -4163,7 +5156,7 @@ import {
   Minus,
   Quote
 } from "lucide-react";
-import { jsx as jsx82, jsxs as jsxs36 } from "react/jsx-runtime";
+import { jsx as jsx88, jsxs as jsxs38 } from "react/jsx-runtime";
 var SLASH_MENU_ICONS = {
   Heading1,
   Heading2,
@@ -4179,12 +5172,12 @@ var SLASH_MENU_ICONS = {
   Image,
   Bookmark
 };
-var SlashMenu = forwardRef(function SlashMenu2({ items, command }, ref) {
-  const [index, setIndex] = useState12(0);
-  const itemRefs = useRef4([]);
+var SlashMenu = forwardRef2(function SlashMenu2({ items, command }, ref) {
+  const [index, setIndex] = useState13(0);
+  const itemRefs = useRef6([]);
   const itemsKey = items.map((item) => item.title).join("\0");
-  useEffect11(() => setIndex(0), [itemsKey]);
-  useEffect11(() => {
+  useEffect14(() => setIndex(0), [itemsKey]);
+  useEffect14(() => {
     const item = itemRefs.current[index]?.closest('[data-part="item"]');
     const viewport = item?.closest("[data-slash-menu-scroll]");
     if (!(viewport instanceof HTMLElement) || !(item instanceof HTMLElement)) return;
@@ -4213,7 +5206,7 @@ var SlashMenu = forwardRef(function SlashMenu2({ items, command }, ref) {
     }
   }));
   const listItems = items.map((item) => ({ value: item.title, label: item.title }));
-  return /* @__PURE__ */ jsx82(
+  return /* @__PURE__ */ jsx88(
     Listbox,
     {
       items: listItems,
@@ -4222,17 +5215,17 @@ var SlashMenu = forwardRef(function SlashMenu2({ items, command }, ref) {
         if (details.highlightedIndex >= 0) setIndex(details.highlightedIndex);
       },
       loopFocus: false,
-      children: /* @__PURE__ */ jsx82(ListboxContent, { "data-slash-menu-scroll": true, children: items.map((item, i) => {
+      children: /* @__PURE__ */ jsx88(ListboxContent, { "data-slash-menu-scroll": true, children: items.map((item, i) => {
         const Icon = SLASH_MENU_ICONS[item.icon];
-        return /* @__PURE__ */ jsx82(
+        return /* @__PURE__ */ jsx88(
           ListboxItem,
           {
             item: { value: item.title, label: item.title },
             className: i === index ? "bg-accent text-accent-foreground" : void 0,
             "data-slash-selected": i === index ? "" : void 0,
             onClick: () => command(item),
-            children: /* @__PURE__ */ jsxs36(ListboxItemText, { children: [
-              /* @__PURE__ */ jsx82(
+            children: /* @__PURE__ */ jsxs38(ListboxItemText, { children: [
+              /* @__PURE__ */ jsx88(
                 "span",
                 {
                   ref: (node) => {
@@ -4241,10 +5234,10 @@ var SlashMenu = forwardRef(function SlashMenu2({ items, command }, ref) {
                   className: "inline-flex w-5 justify-center opacity-70",
                   "data-slash-icon": item.icon,
                   "aria-hidden": "true",
-                  children: item.icon === "YouTube" ? /* @__PURE__ */ jsx82("svg", { viewBox: "0 0 24 24", className: "size-4", fill: "currentColor", children: /* @__PURE__ */ jsx82("path", { d: "M23.5 6.2a3 3 0 0 0-2.1-2.1C19.5 3.6 12 3.6 12 3.6s-7.5 0-9.4.5A3 3 0 0 0 .5 6.2 31 31 0 0 0 0 12a31 31 0 0 0 .5 5.8 3 3 0 0 0 2.1 2.1c1.9.5 9.4.5 9.4.5s7.5 0 9.4-.5a3 3 0 0 0 2.1-2.1A31 31 0 0 0 24 12a31 31 0 0 0-.5-5.8ZM9.6 15.6V8.4L15.8 12l-6.2 3.6Z" }) }) : Icon ? /* @__PURE__ */ jsx82(Icon, { className: "size-4" }) : null
+                  children: item.icon === "YouTube" ? /* @__PURE__ */ jsx88("svg", { viewBox: "0 0 24 24", className: "size-4", fill: "currentColor", children: /* @__PURE__ */ jsx88("path", { d: "M23.5 6.2a3 3 0 0 0-2.1-2.1C19.5 3.6 12 3.6 12 3.6s-7.5 0-9.4.5A3 3 0 0 0 .5 6.2 31 31 0 0 0 0 12a31 31 0 0 0 .5 5.8 3 3 0 0 0 2.1 2.1c1.9.5 9.4.5 9.4.5s7.5 0 9.4-.5a3 3 0 0 0 2.1-2.1A31 31 0 0 0 24 12a31 31 0 0 0-.5-5.8ZM9.6 15.6V8.4L15.8 12l-6.2 3.6Z" }) }) : Icon ? /* @__PURE__ */ jsx88(Icon, { className: "size-4" }) : null
                 }
               ),
-              /* @__PURE__ */ jsx82("span", { children: item.title })
+              /* @__PURE__ */ jsx88("span", { children: item.title })
             ] })
           },
           item.title
@@ -4255,10 +5248,10 @@ var SlashMenu = forwardRef(function SlashMenu2({ items, command }, ref) {
 });
 
 // src/editor/MentionList.tsx
-import { forwardRef as forwardRef2, useImperativeHandle as useImperativeHandle2, useState as useState13 } from "react";
-import { jsx as jsx83 } from "react/jsx-runtime";
-var MentionList = forwardRef2(function MentionList2({ items, command }, ref) {
-  const [index, setIndex] = useState13(0);
+import { forwardRef as forwardRef3, useImperativeHandle as useImperativeHandle2, useState as useState14 } from "react";
+import { jsx as jsx89 } from "react/jsx-runtime";
+var MentionList = forwardRef3(function MentionList2({ items, command }, ref) {
+  const [index, setIndex] = useState14(0);
   useImperativeHandle2(ref, () => ({
     onKeyDown: ({ event }) => {
       if (event.key === "ArrowUp") {
@@ -4279,21 +5272,21 @@ var MentionList = forwardRef2(function MentionList2({ items, command }, ref) {
   }));
   if (items.length === 0) return null;
   const listItems = items.map((item) => ({ value: item.id, label: item.label }));
-  return /* @__PURE__ */ jsx83(Listbox, { items: listItems, className: "mention-list", children: /* @__PURE__ */ jsx83(ListboxContent, { children: items.map((item, i) => /* @__PURE__ */ jsx83(
+  return /* @__PURE__ */ jsx89(Listbox, { items: listItems, className: "mention-list", children: /* @__PURE__ */ jsx89(ListboxContent, { children: items.map((item, i) => /* @__PURE__ */ jsx89(
     ListboxItem,
     {
       item: { value: item.id, label: item.label },
       className: i === index ? "bg-accent text-accent-foreground" : void 0,
       onMouseEnter: () => setIndex(i),
       onClick: () => command(item),
-      children: /* @__PURE__ */ jsx83(ListboxItemText, { children: item.label })
+      children: /* @__PURE__ */ jsx89(ListboxItemText, { children: item.label })
     },
     item.id
   )) }) });
 });
 
 // src/editor/ImageInput.tsx
-import { useEffect as useEffect12, useRef as useRef5, useState as useState14 } from "react";
+import { useEffect as useEffect15, useRef as useRef7, useState as useState15 } from "react";
 import { X } from "lucide-react";
 
 // src/editor/ImageFileUpload.tsx
@@ -4311,9 +5304,9 @@ import {
   FileUploadItemDeleteTrigger
 } from "@ark-ui/react/file-upload";
 import { ImagePlus, Trash2 as Trash22, Upload } from "lucide-react";
-import { jsx as jsx84, jsxs as jsxs37 } from "react/jsx-runtime";
+import { jsx as jsx90, jsxs as jsxs39 } from "react/jsx-runtime";
 function ImageFileUpload({ file, onFileChange, disabled = false }) {
-  return /* @__PURE__ */ jsxs37(
+  return /* @__PURE__ */ jsxs39(
     FileUploadRoot,
     {
       accept: "image/*",
@@ -4322,45 +5315,45 @@ function ImageFileUpload({ file, onFileChange, disabled = false }) {
       disabled,
       onFileChange: (details) => onFileChange(details.acceptedFiles[0] ?? null),
       children: [
-        /* @__PURE__ */ jsxs37(FileUploadDropzone, { className: "flex min-h-32 cursor-pointer flex-col items-center justify-center gap-2 rounded-md border border-dashed border-border bg-muted/30 px-4 py-5 text-center transition-colors data-[dragging]:border-primary data-[dragging]:bg-primary/5", children: [
-          /* @__PURE__ */ jsx84(ImagePlus, { className: "size-6 text-muted-foreground", "aria-hidden": "true" }),
-          /* @__PURE__ */ jsx84("div", { className: "text-sm font-medium", children: "Drop an image here" }),
-          /* @__PURE__ */ jsx84("div", { className: "text-xs text-muted-foreground", children: "or" }),
-          /* @__PURE__ */ jsxs37(FileUploadTrigger, { className: "inline-flex items-center gap-2 rounded-md border border-input bg-background px-3 py-1.5 text-sm hover:bg-accent", children: [
-            /* @__PURE__ */ jsx84(Upload, { className: "size-4", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsxs39(FileUploadDropzone, { className: "flex min-h-32 cursor-pointer flex-col items-center justify-center gap-2 rounded-md border border-dashed border-border bg-muted/30 px-4 py-5 text-center transition-colors data-[dragging]:border-primary data-[dragging]:bg-primary/5", children: [
+          /* @__PURE__ */ jsx90(ImagePlus, { className: "size-6 text-muted-foreground", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx90("div", { className: "text-sm font-medium", children: "Drop an image here" }),
+          /* @__PURE__ */ jsx90("div", { className: "text-xs text-muted-foreground", children: "or" }),
+          /* @__PURE__ */ jsxs39(FileUploadTrigger, { className: "inline-flex items-center gap-2 rounded-md border border-input bg-background px-3 py-1.5 text-sm hover:bg-accent", children: [
+            /* @__PURE__ */ jsx90(Upload, { className: "size-4", "aria-hidden": "true" }),
             "Choose image"
           ] })
         ] }),
-        /* @__PURE__ */ jsx84(FileUploadItemGroup, { className: "mt-2", children: file ? /* @__PURE__ */ jsxs37(
+        /* @__PURE__ */ jsx90(FileUploadItemGroup, { className: "mt-2", children: file ? /* @__PURE__ */ jsxs39(
           FileUploadItem,
           {
             file,
             className: "flex items-center gap-3 rounded-md border border-border bg-background p-2",
             children: [
-              /* @__PURE__ */ jsx84(FileUploadItemPreview, { type: "image/*", className: "size-12 shrink-0 overflow-hidden rounded", children: /* @__PURE__ */ jsx84(FileUploadItemPreviewImage, { className: "size-full object-cover" }) }),
-              /* @__PURE__ */ jsxs37("div", { className: "min-w-0 flex-1", children: [
-                /* @__PURE__ */ jsx84(FileUploadItemName, { className: "truncate text-sm font-medium" }),
-                /* @__PURE__ */ jsx84(FileUploadItemSizeText, { className: "text-xs text-muted-foreground" })
+              /* @__PURE__ */ jsx90(FileUploadItemPreview, { type: "image/*", className: "size-12 shrink-0 overflow-hidden rounded", children: /* @__PURE__ */ jsx90(FileUploadItemPreviewImage, { className: "size-full object-cover" }) }),
+              /* @__PURE__ */ jsxs39("div", { className: "min-w-0 flex-1", children: [
+                /* @__PURE__ */ jsx90(FileUploadItemName, { className: "truncate text-sm font-medium" }),
+                /* @__PURE__ */ jsx90(FileUploadItemSizeText, { className: "text-xs text-muted-foreground" })
               ] }),
-              /* @__PURE__ */ jsx84(
+              /* @__PURE__ */ jsx90(
                 FileUploadItemDeleteTrigger,
                 {
                   className: "rounded p-1 text-muted-foreground hover:bg-muted hover:text-foreground",
                   "aria-label": "Remove image",
-                  children: /* @__PURE__ */ jsx84(Trash22, { className: "size-4" })
+                  children: /* @__PURE__ */ jsx90(Trash22, { className: "size-4" })
                 }
               )
             ]
           }
         ) : null }),
-        /* @__PURE__ */ jsx84(FileUploadHiddenInput, {})
+        /* @__PURE__ */ jsx90(FileUploadHiddenInput, {})
       ]
     }
   );
 }
 
 // src/editor/ImageInput.tsx
-import { jsx as jsx85, jsxs as jsxs38 } from "react/jsx-runtime";
+import { jsx as jsx91, jsxs as jsxs40 } from "react/jsx-runtime";
 function fileToDataUrl(file) {
   return new Promise((resolve, reject) => {
     const reader = new FileReader();
@@ -4370,14 +5363,14 @@ function fileToDataUrl(file) {
   });
 }
 function ImageInput({ editor, position, onClose, onUpload }) {
-  const [tab, setTab] = useState14("upload");
-  const [urlValue, setUrlValue] = useState14("");
-  const [urlError, setUrlError] = useState14("");
-  const [selectedFile, setSelectedFile] = useState14(null);
-  const [uploading, setUploading] = useState14(false);
-  const [uploadError, setUploadError] = useState14("");
-  const urlInputRef = useRef5(null);
-  useEffect12(() => {
+  const [tab, setTab] = useState15("upload");
+  const [urlValue, setUrlValue] = useState15("");
+  const [urlError, setUrlError] = useState15("");
+  const [selectedFile, setSelectedFile] = useState15(null);
+  const [uploading, setUploading] = useState15(false);
+  const [uploadError, setUploadError] = useState15("");
+  const urlInputRef = useRef7(null);
+  useEffect15(() => {
     if (tab === "url") urlInputRef.current?.focus();
   }, [tab]);
   function insertImage(src, srcset) {
@@ -4407,7 +5400,7 @@ function ImageInput({ editor, position, onClose, onUpload }) {
     }
     insertImage(trimmed);
   }
-  return /* @__PURE__ */ jsx85(
+  return /* @__PURE__ */ jsx91(
     "div",
     {
       role: "dialog",
@@ -4417,21 +5410,21 @@ function ImageInput({ editor, position, onClose, onUpload }) {
         if (event.key === "Escape") onClose();
       },
       className: "max-h-[calc(100vh-2rem)] w-80 overflow-y-auto rounded-lg border border-border bg-popover p-3 text-popover-foreground shadow-xl",
-      children: /* @__PURE__ */ jsxs38("div", { className: "space-y-3", children: [
-        /* @__PURE__ */ jsxs38("div", { className: "flex items-center justify-between", children: [
-          /* @__PURE__ */ jsx85("p", { className: "text-sm font-semibold", children: "Insert Image" }),
-          /* @__PURE__ */ jsx85(
+      children: /* @__PURE__ */ jsxs40("div", { className: "space-y-3", children: [
+        /* @__PURE__ */ jsxs40("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsx91("p", { className: "text-sm font-semibold", children: "Insert Image" }),
+          /* @__PURE__ */ jsx91(
             "button",
             {
               type: "button",
               onClick: onClose,
               className: "rounded p-1 text-muted-foreground hover:bg-muted hover:text-foreground",
               "aria-label": "Close image dialog",
-              children: /* @__PURE__ */ jsx85(X, { className: "size-4" })
+              children: /* @__PURE__ */ jsx91(X, { className: "size-4" })
             }
           )
         ] }),
-        /* @__PURE__ */ jsx85("div", { className: "flex gap-1 rounded-md bg-muted p-1", children: ["upload", "url"].map((value) => /* @__PURE__ */ jsx85(
+        /* @__PURE__ */ jsx91("div", { className: "flex gap-1 rounded-md bg-muted p-1", children: ["upload", "url"].map((value) => /* @__PURE__ */ jsx91(
           "button",
           {
             type: "button",
@@ -4444,8 +5437,8 @@ function ImageInput({ editor, position, onClose, onUpload }) {
           },
           value
         )) }),
-        tab === "upload" ? /* @__PURE__ */ jsxs38("div", { className: "space-y-1", children: [
-          /* @__PURE__ */ jsx85(
+        tab === "upload" ? /* @__PURE__ */ jsxs40("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ jsx91(
             ImageFileUpload,
             {
               file: selectedFile,
@@ -4456,10 +5449,10 @@ function ImageInput({ editor, position, onClose, onUpload }) {
               }
             }
           ),
-          uploading ? /* @__PURE__ */ jsx85("p", { className: "text-xs text-muted-foreground", children: "Uploading\u2026" }) : null,
-          uploadError ? /* @__PURE__ */ jsx85("div", { role: "alert", className: "text-xs leading-tight text-destructive", children: uploadError }) : null
-        ] }) : /* @__PURE__ */ jsxs38("div", { className: "space-y-1", children: [
-          /* @__PURE__ */ jsx85(
+          uploading ? /* @__PURE__ */ jsx91("p", { className: "text-xs text-muted-foreground", children: "Uploading\u2026" }) : null,
+          uploadError ? /* @__PURE__ */ jsx91("div", { role: "alert", className: "text-xs leading-tight text-destructive", children: uploadError }) : null
+        ] }) : /* @__PURE__ */ jsxs40("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ jsx91(
             "input",
             {
               ref: urlInputRef,
@@ -4477,11 +5470,11 @@ function ImageInput({ editor, position, onClose, onUpload }) {
               className: "w-full rounded-md border border-input bg-background px-3 py-2 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring"
             }
           ),
-          urlError ? /* @__PURE__ */ jsx85("div", { role: "alert", className: "text-xs leading-tight text-destructive", children: urlError }) : null
+          urlError ? /* @__PURE__ */ jsx91("div", { role: "alert", className: "text-xs leading-tight text-destructive", children: urlError }) : null
         ] }),
-        /* @__PURE__ */ jsxs38("div", { className: "flex justify-end gap-2", children: [
-          /* @__PURE__ */ jsx85("button", { type: "button", onClick: onClose, className: "rounded-md px-3 py-1.5 text-sm hover:bg-muted", children: "Cancel" }),
-          /* @__PURE__ */ jsx85(
+        /* @__PURE__ */ jsxs40("div", { className: "flex justify-end gap-2", children: [
+          /* @__PURE__ */ jsx91("button", { type: "button", onClick: onClose, className: "rounded-md px-3 py-1.5 text-sm hover:bg-muted", children: "Cancel" }),
+          /* @__PURE__ */ jsx91(
             "button",
             {
               type: "button",
@@ -4498,14 +5491,14 @@ function ImageInput({ editor, position, onClose, onUpload }) {
 }
 
 // src/editor/BookmarkInput.tsx
-import { useEffect as useEffect13, useRef as useRef6, useState as useState15 } from "react";
-import { jsx as jsx86, jsxs as jsxs39 } from "react/jsx-runtime";
+import { useEffect as useEffect16, useRef as useRef8, useState as useState16 } from "react";
+import { jsx as jsx92, jsxs as jsxs41 } from "react/jsx-runtime";
 function BookmarkInput({ editor, position, onClose, fetchLinkPreview }) {
-  const [url, setUrl] = useState15("");
-  const [error, setError] = useState15("");
-  const [loading, setLoading] = useState15(false);
-  const inputRef = useRef6(null);
-  useEffect13(() => {
+  const [url, setUrl] = useState16("");
+  const [error, setError] = useState16("");
+  const [loading, setLoading] = useState16(false);
+  const inputRef = useRef8(null);
+  useEffect16(() => {
     inputRef.current?.focus();
   }, []);
   async function submit() {
@@ -4535,7 +5528,7 @@ function BookmarkInput({ editor, position, onClose, fetchLinkPreview }) {
       setLoading(false);
     }
   }
-  return /* @__PURE__ */ jsxs39(
+  return /* @__PURE__ */ jsxs41(
     "div",
     {
       role: "dialog",
@@ -4546,9 +5539,9 @@ function BookmarkInput({ editor, position, onClose, fetchLinkPreview }) {
       },
       className: "w-80 space-y-2 rounded-lg border border-border bg-popover p-3 text-popover-foreground shadow-xl",
       children: [
-        /* @__PURE__ */ jsx86("p", { className: "text-sm font-semibold", children: "Insert Bookmark" }),
-        /* @__PURE__ */ jsxs39("div", { className: "space-y-1", children: [
-          /* @__PURE__ */ jsx86(
+        /* @__PURE__ */ jsx92("p", { className: "text-sm font-semibold", children: "Insert Bookmark" }),
+        /* @__PURE__ */ jsxs41("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ jsx92(
             "input",
             {
               ref: inputRef,
@@ -4566,11 +5559,11 @@ function BookmarkInput({ editor, position, onClose, fetchLinkPreview }) {
               className: "w-full rounded-md border border-input bg-background px-3 py-2 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring"
             }
           ),
-          error ? /* @__PURE__ */ jsx86("div", { role: "alert", className: "text-xs leading-tight text-destructive", children: error }) : null
+          error ? /* @__PURE__ */ jsx92("div", { role: "alert", className: "text-xs leading-tight text-destructive", children: error }) : null
         ] }),
-        /* @__PURE__ */ jsxs39("div", { className: "flex justify-end gap-2", children: [
-          /* @__PURE__ */ jsx86("button", { type: "button", onClick: onClose, className: "rounded-md px-3 py-1.5 text-sm hover:bg-muted", children: "Cancel" }),
-          /* @__PURE__ */ jsx86(
+        /* @__PURE__ */ jsxs41("div", { className: "flex justify-end gap-2", children: [
+          /* @__PURE__ */ jsx92("button", { type: "button", onClick: onClose, className: "rounded-md px-3 py-1.5 text-sm hover:bg-muted", children: "Cancel" }),
+          /* @__PURE__ */ jsx92(
             "button",
             {
               type: "button",
@@ -4587,9 +5580,9 @@ function BookmarkInput({ editor, position, onClose, fetchLinkPreview }) {
 }
 
 // src/editor/YouTubeInput.tsx
-import { useEffect as useEffect14, useRef as useRef7, useState as useState16 } from "react";
+import { useEffect as useEffect17, useRef as useRef9, useState as useState17 } from "react";
 import { Play as Play2, X as X2 } from "lucide-react";
-import { jsx as jsx87, jsxs as jsxs40 } from "react/jsx-runtime";
+import { jsx as jsx93, jsxs as jsxs42 } from "react/jsx-runtime";
 function isYouTubeUrl(value) {
   try {
     const host = new URL(value).hostname.replace(/^www\./, "");
@@ -4599,10 +5592,10 @@ function isYouTubeUrl(value) {
   }
 }
 function YouTubeInput({ editor, position, onClose }) {
-  const [url, setUrl] = useState16("");
-  const [error, setError] = useState16("");
-  const inputRef = useRef7(null);
-  useEffect14(() => inputRef.current?.focus(), []);
+  const [url, setUrl] = useState17("");
+  const [error, setError] = useState17("");
+  const inputRef = useRef9(null);
+  useEffect17(() => inputRef.current?.focus(), []);
   const insert = () => {
     const value = url.trim();
     if (!isYouTubeUrl(value)) {
@@ -4615,30 +5608,30 @@ function YouTubeInput({ editor, position, onClose }) {
     }).run();
     onClose();
   };
-  return /* @__PURE__ */ jsxs40(
+  return /* @__PURE__ */ jsxs42(
     "div",
     {
       role: "dialog",
       "aria-label": "Embed YouTube video",
       className: "w-80 rounded-lg border border-border bg-popover p-3 text-popover-foreground shadow-lg",
       children: [
-        /* @__PURE__ */ jsxs40("div", { className: "mb-2 flex items-center justify-between", children: [
-          /* @__PURE__ */ jsxs40("span", { className: "flex items-center gap-2 text-sm font-medium", children: [
-            /* @__PURE__ */ jsx87(Play2, { className: "size-5 fill-current text-red-600", "aria-hidden": "true", "data-youtube-logo": true }),
+        /* @__PURE__ */ jsxs42("div", { className: "mb-2 flex items-center justify-between", children: [
+          /* @__PURE__ */ jsxs42("span", { className: "flex items-center gap-2 text-sm font-medium", children: [
+            /* @__PURE__ */ jsx93(Play2, { className: "size-5 fill-current text-red-600", "aria-hidden": "true", "data-youtube-logo": true }),
             "Embed YouTube video"
           ] }),
-          /* @__PURE__ */ jsx87(
+          /* @__PURE__ */ jsx93(
             "button",
             {
               type: "button",
               onClick: onClose,
               "aria-label": "Close YouTube input",
               className: "rounded p-1 hover:bg-accent",
-              children: /* @__PURE__ */ jsx87(X2, { className: "h-4 w-4" })
+              children: /* @__PURE__ */ jsx93(X2, { className: "h-4 w-4" })
             }
           )
         ] }),
-        /* @__PURE__ */ jsx87(
+        /* @__PURE__ */ jsx93(
           "input",
           {
             ref: inputRef,
@@ -4659,9 +5652,9 @@ function YouTubeInput({ editor, position, onClose }) {
             className: "w-full rounded-md border border-input bg-background px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-ring"
           }
         ),
-        error ? /* @__PURE__ */ jsx87("div", { role: "alert", className: "mt-1 text-xs leading-tight text-destructive", children: error }) : null,
-        /* @__PURE__ */ jsxs40("div", { className: "mt-3 flex justify-end gap-2", children: [
-          /* @__PURE__ */ jsx87(
+        error ? /* @__PURE__ */ jsx93("div", { role: "alert", className: "mt-1 text-xs leading-tight text-destructive", children: error }) : null,
+        /* @__PURE__ */ jsxs42("div", { className: "mt-3 flex justify-end gap-2", children: [
+          /* @__PURE__ */ jsx93(
             "button",
             {
               type: "button",
@@ -4670,7 +5663,7 @@ function YouTubeInput({ editor, position, onClose }) {
               children: "Cancel"
             }
           ),
-          /* @__PURE__ */ jsx87(
+          /* @__PURE__ */ jsx93(
             "button",
             {
               type: "button",
@@ -4686,12 +5679,12 @@ function YouTubeInput({ editor, position, onClose }) {
 }
 
 // src/editor/CursorOverlay.tsx
-import { useEffect as useEffect15, useRef as useRef8, useState as useState17 } from "react";
+import { useEffect as useEffect18, useRef as useRef10, useState as useState18 } from "react";
 import {
   lockEditorOverlayScroll,
   placeEditorOverlayAt
 } from "@cloudvoyant/helical-ui";
-import { jsx as jsx88 } from "react/jsx-runtime";
+import { jsx as jsx94 } from "react/jsx-runtime";
 function CursorOverlay({
   editor,
   position,
@@ -4702,11 +5695,11 @@ function CursorOverlay({
   lockScroll = true,
   children
 }) {
-  const surfaceRef = useRef8(null);
-  const [coords, setCoords] = useState17(
+  const surfaceRef = useRef10(null);
+  const [coords, setCoords] = useState18(
     () => placeEditorOverlayAt(editor, position, { width, height, gap, viewportGap })
   );
-  useEffect15(() => {
+  useEffect18(() => {
     const updatePosition = () => setCoords(placeEditorOverlayAt(editor, position, { width, height, gap, viewportGap }));
     updatePosition();
     window.addEventListener("scroll", updatePosition, true);
@@ -4716,15 +5709,15 @@ function CursorOverlay({
       window.removeEventListener("resize", updatePosition);
     };
   }, [editor, position, width, height, gap, viewportGap]);
-  useEffect15(() => {
+  useEffect18(() => {
     if (!lockScroll) return;
     return lockEditorOverlayScroll(editor.view.dom, surfaceRef.current);
   }, [editor, lockScroll]);
-  return /* @__PURE__ */ jsx88("div", { ref: surfaceRef, "data-cursor-overlay": true, className: "fixed z-50", style: { left: coords.left, top: coords.top }, children });
+  return /* @__PURE__ */ jsx94("div", { ref: surfaceRef, "data-cursor-overlay": true, className: "fixed z-50", style: { left: coords.left, top: coords.top }, children });
 }
 
 // src/editor/Editor.tsx
-import { jsx as jsx89, jsxs as jsxs41 } from "react/jsx-runtime";
+import { jsx as jsx95, jsxs as jsxs43 } from "react/jsx-runtime";
 function extractTitle(json) {
   if (json?.content?.[0]?.type === "heading" && json.content[0]?.attrs?.level === 1) {
     return json.content[0]?.content?.[0]?.text || "";
@@ -4745,7 +5738,7 @@ function getEditorCounts(editor) {
     readDuration: Math.max(1, Math.ceil(words / 250))
   };
 }
-var Editor = forwardRef3(function Editor2({
+var Editor = forwardRef4(function Editor2({
   content = "",
   editable = true,
   enforceTitle = true,
@@ -4755,15 +5748,15 @@ var Editor = forwardRef3(function Editor2({
   onUpload,
   fetchLinkPreview
 }, ref) {
-  const [slash, setSlash] = useState18({ props: null, coords: { left: 0, top: 0 } });
-  const [mention, setMention] = useState18({ props: null, coords: { left: 0, top: 0 } });
-  const [imageInput, setImageInput] = useState18(null);
-  const [bookmarkInput, setBookmarkInput] = useState18(null);
-  const [youTubeInput, setYouTubeInput] = useState18(null);
-  const slashRef = useRef9(null);
-  const slashSurfaceRef = useRef9(null);
-  const mentionRef = useRef9(null);
-  const extensions = useMemo7(
+  const [slash, setSlash] = useState19({ props: null, coords: { left: 0, top: 0 } });
+  const [mention, setMention] = useState19({ props: null, coords: { left: 0, top: 0 } });
+  const [imageInput, setImageInput] = useState19(null);
+  const [bookmarkInput, setBookmarkInput] = useState19(null);
+  const [youTubeInput, setYouTubeInput] = useState19(null);
+  const slashRef = useRef11(null);
+  const slashSurfaceRef = useRef11(null);
+  const mentionRef = useRef11(null);
+  const extensions = useMemo8(
     () => buildExtensions({
       mentionSource,
       hrefBuilder,
@@ -4791,7 +5784,7 @@ var Editor = forwardRef3(function Editor2({
     }),
     [mentionSource, hrefBuilder, enforceTitle]
   );
-  useEffect16(() => {
+  useEffect19(() => {
     if (!slash.props) return;
     const updatePosition = () => setSlash(
       (current) => current.props ? slashMenuFrom(current.props, slashSurfaceRef.current) : current
@@ -4828,11 +5821,11 @@ var Editor = forwardRef3(function Editor2({
       handlePaste: insertPastedUrlAsLink
     }
   });
-  useEffect16(() => {
+  useEffect19(() => {
     if (!editor || !slash.props) return;
     return lockEditorOverlayScroll2(editor.view.dom, slashSurfaceRef.current);
   }, [editor, slash.props]);
-  useEffect16(() => {
+  useEffect19(() => {
     if (!editor) return;
     const instance = editor;
     registerImageInsertCallback(instance, (position) => {
@@ -4840,7 +5833,7 @@ var Editor = forwardRef3(function Editor2({
     });
     return () => unregisterImageInsertCallback(instance);
   }, [editor]);
-  useEffect16(() => {
+  useEffect19(() => {
     if (!editor) return;
     const instance = editor;
     registerYouTubeInsertCallback(instance, (position) => {
@@ -4848,7 +5841,7 @@ var Editor = forwardRef3(function Editor2({
     });
     return () => unregisterYouTubeInsertCallback(instance);
   }, [editor]);
-  useEffect16(() => {
+  useEffect19(() => {
     if (!editor) return;
     const sync = () => {
       const storage = editor.storage;
@@ -4882,21 +5875,21 @@ var Editor = forwardRef3(function Editor2({
     }),
     [editor]
   );
-  return /* @__PURE__ */ jsxs41("div", { className: "relative", children: [
-    /* @__PURE__ */ jsx89(EditorContent, { editor }),
-    editor ? /* @__PURE__ */ jsx89(BubbleMenu, { editor }) : null,
-    editor && slash.props ? /* @__PURE__ */ jsx89(
+  return /* @__PURE__ */ jsxs43("div", { className: "relative", children: [
+    /* @__PURE__ */ jsx95(EditorContent, { editor }),
+    editor ? /* @__PURE__ */ jsx95(BubbleMenu, { editor }) : null,
+    editor && slash.props ? /* @__PURE__ */ jsx95(
       "div",
       {
         ref: slashSurfaceRef,
         "data-slash-menu-surface": true,
         className: "fixed z-50",
         style: { left: slash.coords.left, top: slash.coords.top },
-        children: /* @__PURE__ */ jsx89(SlashMenu, { ref: slashRef, ...slash.props })
+        children: /* @__PURE__ */ jsx95(SlashMenu, { ref: slashRef, ...slash.props })
       }
     ) : null,
-    editor && mention.props ? /* @__PURE__ */ jsx89("div", { className: "fixed z-50", style: { left: mention.coords.left, top: mention.coords.top }, children: /* @__PURE__ */ jsx89(MentionList, { ref: mentionRef, ...mention.props }) }) : null,
-    editor && imageInput ? /* @__PURE__ */ jsx89(CursorOverlay, { editor, position: imageInput.position, ...IMAGE_OVERLAY, children: /* @__PURE__ */ jsx89(
+    editor && mention.props ? /* @__PURE__ */ jsx95("div", { className: "fixed z-50", style: { left: mention.coords.left, top: mention.coords.top }, children: /* @__PURE__ */ jsx95(MentionList, { ref: mentionRef, ...mention.props }) }) : null,
+    editor && imageInput ? /* @__PURE__ */ jsx95(CursorOverlay, { editor, position: imageInput.position, ...IMAGE_OVERLAY, children: /* @__PURE__ */ jsx95(
       ImageInput,
       {
         editor,
@@ -4905,7 +5898,7 @@ var Editor = forwardRef3(function Editor2({
         onClose: () => setImageInput(null)
       }
     ) }) : null,
-    editor && bookmarkInput ? /* @__PURE__ */ jsx89(CursorOverlay, { editor, position: bookmarkInput.position, ...BOOKMARK_OVERLAY, children: /* @__PURE__ */ jsx89(
+    editor && bookmarkInput ? /* @__PURE__ */ jsx95(CursorOverlay, { editor, position: bookmarkInput.position, ...BOOKMARK_OVERLAY, children: /* @__PURE__ */ jsx95(
       BookmarkInput,
       {
         editor,
@@ -4914,7 +5907,7 @@ var Editor = forwardRef3(function Editor2({
         onClose: () => setBookmarkInput(null)
       }
     ) }) : null,
-    editor && youTubeInput ? /* @__PURE__ */ jsx89(CursorOverlay, { editor, position: youTubeInput.position, ...YOUTUBE_OVERLAY, children: /* @__PURE__ */ jsx89(YouTubeInput, { editor, position: youTubeInput.position, onClose: () => setYouTubeInput(null) }) }) : null
+    editor && youTubeInput ? /* @__PURE__ */ jsx95(CursorOverlay, { editor, position: youTubeInput.position, ...YOUTUBE_OVERLAY, children: /* @__PURE__ */ jsx95(YouTubeInput, { editor, position: youTubeInput.position, onClose: () => setYouTubeInput(null) }) }) : null
   ] });
 });
 function menuFrom(props) {
@@ -4936,10 +5929,10 @@ function slashMenuFrom(props, surface) {
 }
 
 // src/editor/Reader.tsx
-import { useMemo as useMemo8 } from "react";
+import { useMemo as useMemo9 } from "react";
 import { generateHTML } from "@tiptap/core";
 import { buildExtensions as buildExtensions2 } from "@cloudvoyant/helical-ui";
-import { jsx as jsx90 } from "react/jsx-runtime";
+import { jsx as jsx96 } from "react/jsx-runtime";
 var noopNodeView = () => () => ({});
 var inertNodeViews = {
   image: noopNodeView,
@@ -4948,7 +5941,7 @@ var inertNodeViews = {
   codeBlock: noopNodeView
 };
 function Reader({ content, className }) {
-  const html = useMemo8(() => {
+  const html = useMemo9(() => {
     if (!content) return "";
     try {
       const json = JSON.parse(content);
@@ -4960,7 +5953,7 @@ function Reader({ content, className }) {
       return "";
     }
   }, [content]);
-  return /* @__PURE__ */ jsx90(
+  return /* @__PURE__ */ jsx96(
     "div",
     {
       className: className ?? "prose prose-lg reader-content max-w-none dark:prose-invert",
@@ -5032,6 +6025,7 @@ export {
   InlineLaTeX,
   Input2 as Input,
   Item,
+  Kbd,
   LaTeX,
   LanguageTabsCodeBlock,
   Listbox,
@@ -5039,6 +6033,8 @@ export {
   ListboxEmpty,
   ListboxInput,
   ListboxItem,
+  ListboxItemGroup,
+  ListboxItemGroupLabel,
   ListboxItemIndicator,
   ListboxItemText,
   ListboxLabel,
@@ -5083,6 +6079,7 @@ export {
   PaginationItems,
   PaginationNext,
   PaginationPrevious,
+  Pane,
   Popover,
   PopoverAnchor,
   PopoverContent,
@@ -5170,6 +6167,10 @@ export {
   TooltipProvider,
   TooltipTrigger,
   VStack,
+  WhichKey,
+  WhichKeyExplorer,
+  WhichKeyMode,
+  WhichKeyProvider,
   Window,
   WindowBody,
   WindowControl,
@@ -5190,10 +6191,14 @@ export {
   useDialog,
   useDialogContext,
   useField,
+  useKeymap,
+  useKeymapScope,
   useListbox,
   useMediaQuery,
   useNavbar,
   useNumberInput,
+  useOptionalPaneRegistration,
+  useOptionalWhichKeyController,
   usePopover,
   usePopoverContext,
   useRadioGroup,
@@ -5204,6 +6209,8 @@ export {
   useTagInput,
   useTooltip,
   useTooltipContext,
+  useWhichKey,
+  useWhichKeyController,
   useWindow,
   useWindowContext
 };