@braedonsaunders/appkit-ui 0.2.0

package/context-menu.js

@@ -0,0 +1,90 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { createPortal } from 'react-dom';
+import { AnimatePresence, motion } from 'framer-motion';
+import { cn } from './utils.js';
+export function useContextMenu() {
+    const [position, setPosition] = React.useState(null);
+    const openAt = React.useCallback((x, y) => setPosition({ x, y }), []);
+    const onContextMenu = React.useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setPosition({ x: e.clientX, y: e.clientY });
+    }, []);
+    const openBelow = React.useCallback((el) => {
+        const r = el.getBoundingClientRect();
+        setPosition({ x: r.right, y: r.bottom + 4 });
+    }, []);
+    const close = React.useCallback(() => setPosition(null), []);
+    return { open: position != null, position, openAt, onContextMenu, openBelow, close };
+}
+export function ContextMenu({ open, position, items, onClose, className, }) {
+    const panelRef = React.useRef(null);
+    const [mounted, setMounted] = React.useState(false);
+    const [coords, setCoords] = React.useState(null);
+    React.useEffect(() => setMounted(true), []);
+    // Clamp inside the viewport before paint so the menu never flashes off-screen.
+    React.useLayoutEffect(() => {
+        if (!open || !position) {
+            setCoords(null);
+            return;
+        }
+        const panel = panelRef.current;
+        const pw = panel?.offsetWidth ?? 176;
+        const ph = panel?.offsetHeight ?? 0;
+        const pad = 8;
+        let x = position.x;
+        let y = position.y;
+        if (x + pw + pad > window.innerWidth)
+            x = window.innerWidth - pw - pad;
+        if (y + ph + pad > window.innerHeight)
+            y = window.innerHeight - ph - pad;
+        setCoords({ x: Math.max(pad, x), y: Math.max(pad, y) });
+    }, [open, position]);
+    React.useEffect(() => {
+        if (!open)
+            return;
+        function onDown(e) {
+            if (panelRef.current?.contains(e.target))
+                return;
+            onClose();
+        }
+        function onKey(e) {
+            if (e.key === 'Escape')
+                onClose();
+        }
+        function onScroll() {
+            onClose();
+        }
+        const t = setTimeout(() => {
+            document.addEventListener('mousedown', onDown);
+            document.addEventListener('contextmenu', onDown);
+            document.addEventListener('keydown', onKey);
+            window.addEventListener('scroll', onScroll, true);
+            window.addEventListener('resize', onScroll);
+        }, 0);
+        return () => {
+            clearTimeout(t);
+            document.removeEventListener('mousedown', onDown);
+            document.removeEventListener('contextmenu', onDown);
+            document.removeEventListener('keydown', onKey);
+            window.removeEventListener('scroll', onScroll, true);
+            window.removeEventListener('resize', onScroll);
+        };
+    }, [open, onClose]);
+    if (!mounted || typeof document === 'undefined')
+        return null;
+    const at = coords ?? position;
+    return createPortal(_jsx(AnimatePresence, { children: open && at ? (_jsx(motion.div, { ref: panelRef, "data-ui-overlay": true, initial: { opacity: 0, scale: 0.96 }, animate: { opacity: 1, scale: 1 }, exit: { opacity: 0, scale: 0.96 }, transition: { duration: 0.12, ease: [0.16, 1, 0.3, 1] }, className: cn('fixed z-[70] min-w-[11rem] max-w-[16rem] overflow-hidden rounded-md border border-border bg-elevated p-1 shadow-lg', className), style: { left: at.x, top: at.y, transformOrigin: 'top left' }, role: "menu", children: items.map((item) => 'separator' in item ? (_jsx("div", { className: "my-1 h-px bg-border" }, item.key)) : (_jsxs("button", { type: "button", role: "menuitem", disabled: item.disabled, onClick: () => {
+                    if (item.disabled)
+                        return;
+                    onClose();
+                    item.onSelect();
+                }, className: cn('flex w-full items-center gap-2.5 rounded px-2.5 py-1.5 text-left text-sm transition-colors', item.disabled
+                    ? 'cursor-not-allowed text-fg-subtle'
+                    : item.danger
+                        ? 'text-danger hover:bg-danger-subtle'
+                        : 'text-fg hover:bg-surface-hover'), children: [item.icon ? _jsx(item.icon, { className: "size-4 shrink-0 opacity-80" }) : null, _jsx("span", { className: "flex-1 truncate", children: item.label })] }, item.key))) })) : null }), document.body);
+}
+//# sourceMappingURL=context-menu.js.map

package/context-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context-menu.js","sourceRoot":"","sources":["../src/context-menu.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AACvD,OAAO,EAAE,EAAE,EAAE,MAAM,SAAS,CAAA;AA+B5B,MAAM,UAAU,cAAc;IAC5B,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAkC,IAAI,CAAC,CAAA;IACrF,MAAM,MAAM,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,CAAS,EAAE,CAAS,EAAE,EAAE,CAAC,WAAW,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAA;IACrF,MAAM,aAAa,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,CAAmB,EAAE,EAAE;QAC9D,CAAC,CAAC,cAAc,EAAE,CAAA;QAClB,CAAC,CAAC,eAAe,EAAE,CAAA;QACnB,WAAW,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,OAAO,EAAE,CAAC,EAAE,CAAC,CAAC,OAAO,EAAE,CAAC,CAAA;IAC7C,CAAC,EAAE,EAAE,CAAC,CAAA;IACN,MAAM,SAAS,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,EAAe,EAAE,EAAE;QACtD,MAAM,CAAC,GAAG,EAAE,CAAC,qBAAqB,EAAE,CAAA;QACpC,WAAW,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,CAAA;IAC9C,CAAC,EAAE,EAAE,CAAC,CAAA;IACN,MAAM,KAAK,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC,CAAA;IAC5D,OAAO,EAAE,IAAI,EAAE,QAAQ,IAAI,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,aAAa,EAAE,SAAS,EAAE,KAAK,EAAE,CAAA;AACtF,CAAC;AAED,MAAM,UAAU,WAAW,CAAC,EAC1B,IAAI,EACJ,QAAQ,EACR,KAAK,EACL,OAAO,EACP,SAAS,GAOV;IACC,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAA;IACnD,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;IACnD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAkC,IAAI,CAAC,CAAA;IAEjF,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC,CAAA;IAE3C,+EAA+E;IAC/E,KAAK,CAAC,eAAe,CAAC,GAAG,EAAE;QACzB,IAAI,CAAC,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YACvB,SAAS,CAAC,IAAI,CAAC,CAAA;YACf,OAAM;QACR,CAAC;QACD,MAAM,KAAK,GAAG,QAAQ,CAAC,OAAO,CAAA;QAC9B,MAAM,EAAE,GAAG,KAAK,EAAE,WAAW,IAAI,GAAG,CAAA;QACpC,MAAM,EAAE,GAAG,KAAK,EAAE,YAAY,IAAI,CAAC,CAAA;QACnC,MAAM,GAAG,GAAG,CAAC,CAAA;QACb,IAAI,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAA;QAClB,IAAI,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAA;QAClB,IAAI,CAAC,GAAG,EAAE,GAAG,GAAG,GAAG,MAAM,CAAC,UAAU;YAAE,CAAC,GAAG,MAAM,CAAC,UAAU,GAAG,EAAE,GAAG,GAAG,CAAA;QACtE,IAAI,CAAC,GAAG,EAAE,GAAG,GAAG,GAAG,MAAM,CAAC,WAAW;YAAE,CAAC,GAAG,MAAM,CAAC,WAAW,GAAG,EAAE,GAAG,GAAG,CAAA;QACxE,SAAS,CAAC,EAAE,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,CAAA;IACzD,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAA;IAEpB,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,CAAC,IAAI;YAAE,OAAM;QACjB,SAAS,MAAM,CAAC,CAAQ;YACtB,IAAI,QAAQ,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,MAAc,CAAC;gBAAE,OAAM;YACxD,OAAO,EAAE,CAAA;QACX,CAAC;QACD,SAAS,KAAK,CAAC,CAAgB;YAC7B,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ;gBAAE,OAAO,EAAE,CAAA;QACnC,CAAC;QACD,SAAS,QAAQ;YACf,OAAO,EAAE,CAAA;QACX,CAAC;QACD,MAAM,CAAC,GAAG,UAAU,CAAC,GAAG,EAAE;YACxB,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,MAAM,CAAC,CAAA;YAC9C,QAAQ,CAAC,gBAAgB,CAAC,aAAa,EAAE,MAAM,CAAC,CAAA;YAChD,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,KAAK,CAAC,CAAA;YAC3C,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,QAAQ,EAAE,IAAI,CAAC,CAAA;YACjD,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAA;QAC7C,CAAC,EAAE,CAAC,CAAC,CAAA;QACL,OAAO,GAAG,EAAE;YACV,YAAY,CAAC,CAAC,CAAC,CAAA;YACf,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,MAAM,CAAC,CAAA;YACjD,QAAQ,CAAC,mBAAmB,CAAC,aAAa,EAAE,MAAM,CAAC,CAAA;YACnD,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,KAAK,CAAC,CAAA;YAC9C,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,QAAQ,EAAE,IAAI,CAAC,CAAA;YACpD,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAA;QAChD,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC,CAAA;IAEnB,IAAI,CAAC,OAAO,IAAI,OAAO,QAAQ,KAAK,WAAW;QAAE,OAAO,IAAI,CAAA;IAE5D,MAAM,EAAE,GAAG,MAAM,IAAI,QAAQ,CAAA;IAE7B,OAAO,YAAY,CACjB,KAAC,eAAe,cACb,IAAI,IAAI,EAAE,CAAC,CAAC,CAAC,CACZ,KAAC,MAAM,CAAC,GAAG,IACT,GAAG,EAAE,QAAQ,2BAEb,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,EACpC,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,EACjC,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,EACjC,UAAU,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,EACvD,SAAS,EAAE,EAAE,CACX,oHAAoH,EACpH,SAAS,CACV,EACD,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,EAAE,CAAC,CAAC,EAAE,eAAe,EAAE,UAAU,EAAE,EAC7D,IAAI,EAAC,MAAM,YAEV,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAClB,WAAW,IAAI,IAAI,CAAC,CAAC,CAAC,CACpB,cAAoB,SAAS,EAAC,qBAAqB,IAAzC,IAAI,CAAC,GAAG,CAAoC,CACvD,CAAC,CAAC,CAAC,CACF,kBAEE,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,GAAG,EAAE;oBACZ,IAAI,IAAI,CAAC,QAAQ;wBAAE,OAAM;oBACzB,OAAO,EAAE,CAAA;oBACT,IAAI,CAAC,QAAQ,EAAE,CAAA;gBACjB,CAAC,EACD,SAAS,EAAE,EAAE,CACX,4FAA4F,EAC5F,IAAI,CAAC,QAAQ;oBACX,CAAC,CAAC,mCAAmC;oBACrC,CAAC,CAAC,IAAI,CAAC,MAAM;wBACX,CAAC,CAAC,oCAAoC;wBACtC,CAAC,CAAC,gCAAgC,CACvC,aAEA,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,KAAC,IAAI,CAAC,IAAI,IAAC,SAAS,EAAC,4BAA4B,GAAG,CAAC,CAAC,CAAC,IAAI,EACxE,eAAM,SAAS,EAAC,iBAAiB,YAAE,IAAI,CAAC,KAAK,GAAQ,KAnBhD,IAAI,CAAC,GAAG,CAoBN,CACV,CACF,GACU,CACd,CAAC,CAAC,CAAC,IAAI,GACQ,EAClB,QAAQ,CAAC,IAAI,CACd,CAAA;AACH,CAAC","sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { createPortal } from 'react-dom'\nimport { AnimatePresence, motion } from 'framer-motion'\nimport { cn } from './utils'\n\n/**\n * Universal context menu — a floating list of actions opened at a point.\n * Trigger it via {@link useContextMenu}, either from a right-click\n * (`onContextMenu={menu.onContextMenu}`) or a kebab button\n * (`onClick={(e) => menu.openBelow(e.currentTarget)}`). The panel portals to\n * <body>, clamps inside the viewport, and closes on outside-click / Esc /\n * scroll. Items carry an icon, label, and handler; `danger` tints destructive\n * actions and `{ separator: true }` draws a divider.\n */\nexport interface ContextMenuItem {\n  key: string\n  label: string\n  icon?: React.ComponentType<{ className?: string }>\n  onSelect: () => void\n  disabled?: boolean\n  danger?: boolean\n}\n\nexport type ContextMenuEntry = ContextMenuItem | { key: string; separator: true }\n\nexport interface ContextMenuController {\n  open: boolean\n  position: { x: number; y: number } | null\n  openAt: (x: number, y: number) => void\n  onContextMenu: (e: React.MouseEvent) => void\n  openBelow: (el: HTMLElement) => void\n  close: () => void\n}\n\nexport function useContextMenu(): ContextMenuController {\n  const [position, setPosition] = React.useState<{ x: number; y: number } | null>(null)\n  const openAt = React.useCallback((x: number, y: number) => setPosition({ x, y }), [])\n  const onContextMenu = React.useCallback((e: React.MouseEvent) => {\n    e.preventDefault()\n    e.stopPropagation()\n    setPosition({ x: e.clientX, y: e.clientY })\n  }, [])\n  const openBelow = React.useCallback((el: HTMLElement) => {\n    const r = el.getBoundingClientRect()\n    setPosition({ x: r.right, y: r.bottom + 4 })\n  }, [])\n  const close = React.useCallback(() => setPosition(null), [])\n  return { open: position != null, position, openAt, onContextMenu, openBelow, close }\n}\n\nexport function ContextMenu({\n  open,\n  position,\n  items,\n  onClose,\n  className,\n}: {\n  open: boolean\n  position: { x: number; y: number } | null\n  items: ContextMenuEntry[]\n  onClose: () => void\n  className?: string\n}) {\n  const panelRef = React.useRef<HTMLDivElement>(null)\n  const [mounted, setMounted] = React.useState(false)\n  const [coords, setCoords] = React.useState<{ x: number; y: number } | null>(null)\n\n  React.useEffect(() => setMounted(true), [])\n\n  // Clamp inside the viewport before paint so the menu never flashes off-screen.\n  React.useLayoutEffect(() => {\n    if (!open || !position) {\n      setCoords(null)\n      return\n    }\n    const panel = panelRef.current\n    const pw = panel?.offsetWidth ?? 176\n    const ph = panel?.offsetHeight ?? 0\n    const pad = 8\n    let x = position.x\n    let y = position.y\n    if (x + pw + pad > window.innerWidth) x = window.innerWidth - pw - pad\n    if (y + ph + pad > window.innerHeight) y = window.innerHeight - ph - pad\n    setCoords({ x: Math.max(pad, x), y: Math.max(pad, y) })\n  }, [open, position])\n\n  React.useEffect(() => {\n    if (!open) return\n    function onDown(e: Event) {\n      if (panelRef.current?.contains(e.target as Node)) return\n      onClose()\n    }\n    function onKey(e: KeyboardEvent) {\n      if (e.key === 'Escape') onClose()\n    }\n    function onScroll() {\n      onClose()\n    }\n    const t = setTimeout(() => {\n      document.addEventListener('mousedown', onDown)\n      document.addEventListener('contextmenu', onDown)\n      document.addEventListener('keydown', onKey)\n      window.addEventListener('scroll', onScroll, true)\n      window.addEventListener('resize', onScroll)\n    }, 0)\n    return () => {\n      clearTimeout(t)\n      document.removeEventListener('mousedown', onDown)\n      document.removeEventListener('contextmenu', onDown)\n      document.removeEventListener('keydown', onKey)\n      window.removeEventListener('scroll', onScroll, true)\n      window.removeEventListener('resize', onScroll)\n    }\n  }, [open, onClose])\n\n  if (!mounted || typeof document === 'undefined') return null\n\n  const at = coords ?? position\n\n  return createPortal(\n    <AnimatePresence>\n      {open && at ? (\n        <motion.div\n          ref={panelRef}\n          data-ui-overlay\n          initial={{ opacity: 0, scale: 0.96 }}\n          animate={{ opacity: 1, scale: 1 }}\n          exit={{ opacity: 0, scale: 0.96 }}\n          transition={{ duration: 0.12, ease: [0.16, 1, 0.3, 1] }}\n          className={cn(\n            'fixed z-[70] min-w-[11rem] max-w-[16rem] overflow-hidden rounded-md border border-border bg-elevated p-1 shadow-lg',\n            className,\n          )}\n          style={{ left: at.x, top: at.y, transformOrigin: 'top left' }}\n          role=\"menu\"\n        >\n          {items.map((item) =>\n            'separator' in item ? (\n              <div key={item.key} className=\"my-1 h-px bg-border\" />\n            ) : (\n              <button\n                key={item.key}\n                type=\"button\"\n                role=\"menuitem\"\n                disabled={item.disabled}\n                onClick={() => {\n                  if (item.disabled) return\n                  onClose()\n                  item.onSelect()\n                }}\n                className={cn(\n                  'flex w-full items-center gap-2.5 rounded px-2.5 py-1.5 text-left text-sm transition-colors',\n                  item.disabled\n                    ? 'cursor-not-allowed text-fg-subtle'\n                    : item.danger\n                      ? 'text-danger hover:bg-danger-subtle'\n                      : 'text-fg hover:bg-surface-hover',\n                )}\n              >\n                {item.icon ? <item.icon className=\"size-4 shrink-0 opacity-80\" /> : null}\n                <span className=\"flex-1 truncate\">{item.label}</span>\n              </button>\n            ),\n          )}\n        </motion.div>\n      ) : null}\n    </AnimatePresence>,\n    document.body,\n  )\n}\n"]}

package/dialog.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+export type DialogSize = 'sm' | 'md' | 'lg' | 'xl';
+export type DialogProps = {
+    open: boolean;
+    onClose: () => void;
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    children?: React.ReactNode;
+    footer?: React.ReactNode;
+    size?: DialogSize;
+    /** Hide the corner close button. */
+    hideClose?: boolean;
+    closeLabel?: string;
+    /**
+     * Give the panel a fixed working height and hand the body to the consumer as
+     * a flex region with no padding. Use it when the content owns its own
+     * toolbar/scroll/columns (an editor, a review pane) rather than being a short
+     * block of prose — otherwise the dialog grows with its content and the page
+     * behind it scrolls instead.
+     */
+    fullHeight?: boolean;
+};
+/** Centered modal dialog: backdrop, spring scale-in, focus trap, Esc/click-out. */
+export declare function Dialog({ open, onClose, title, description, children, footer, size, hideClose, closeLabel, fullHeight, }: DialogProps): React.ReactPortal | null;
+//# sourceMappingURL=dialog.d.ts.map

package/dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../src/dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAWlD,MAAM,MAAM,WAAW,GAAG;IACxB,IAAI,EAAE,OAAO,CAAA;IACb,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,oCAAoC;IACpC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB,CAAA;AAED,mFAAmF;AACnF,wBAAgB,MAAM,CAAC,EACrB,IAAI,EACJ,OAAO,EACP,KAAK,EACL,WAAW,EACX,QAAQ,EACR,MAAM,EACN,IAAW,EACX,SAAS,EACT,UAAoB,EACpB,UAAU,GACX,EAAE,WAAW,4BAoIb"}

package/dialog.js

@@ -0,0 +1,89 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { createPortal } from 'react-dom';
+import { AnimatePresence, motion, useReducedMotion } from 'framer-motion';
+import { X } from 'lucide-react';
+import { cn } from './utils.js';
+const SIZE = {
+    sm: 'max-w-sm',
+    md: 'max-w-lg',
+    lg: 'max-w-2xl',
+    // Working dialogs — an editor with its own sidebar, a two-pane review — need
+    // more width than a confirm prompt.
+    xl: 'max-w-5xl',
+};
+/** Centered modal dialog: backdrop, spring scale-in, focus trap, Esc/click-out. */
+export function Dialog({ open, onClose, title, description, children, footer, size = 'md', hideClose, closeLabel = 'Close', fullHeight, }) {
+    const reduce = useReducedMotion();
+    const [mounted, setMounted] = React.useState(false);
+    const panelRef = React.useRef(null);
+    const onCloseRef = React.useRef(onClose);
+    React.useEffect(() => {
+        onCloseRef.current = onClose;
+    }, [onClose]);
+    React.useEffect(() => setMounted(true), []);
+    React.useEffect(() => {
+        if (!open)
+            return;
+        const prevOverflow = document.body.style.overflow;
+        document.body.style.overflow = 'hidden';
+        const previouslyFocused = document.activeElement;
+        const focusablesSelector = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
+        const focusTimer = window.setTimeout(() => {
+            const panel = panelRef.current;
+            if (!panel)
+                return;
+            // React's autoFocus may already have placed focus inside the dialog.
+            // Do not steal it, and prefer an explicit autofocus target before the
+            // first DOM-order control (which is often the corner close button).
+            if (panel.contains(document.activeElement))
+                return;
+            const preferred = panel.querySelector('[autofocus]');
+            const first = panel.querySelector(focusablesSelector);
+            (preferred ?? first ?? panel).focus();
+        }, 0);
+        function onKey(e) {
+            if (e.key === 'Escape') {
+                if (document.querySelector('[data-ui-overlay]'))
+                    return;
+                onCloseRef.current();
+                return;
+            }
+            if (e.key !== 'Tab')
+                return;
+            const panel = panelRef.current;
+            if (!panel)
+                return;
+            const items = Array.from(panel.querySelectorAll(focusablesSelector)).filter((el) => el.offsetParent !== null || el === document.activeElement);
+            if (items.length === 0) {
+                e.preventDefault();
+                panel.focus();
+                return;
+            }
+            const first = items[0];
+            const last = items[items.length - 1];
+            const activeEl = document.activeElement;
+            if (e.shiftKey && (activeEl === first || activeEl === panel)) {
+                e.preventDefault();
+                last.focus();
+            }
+            else if (!e.shiftKey && activeEl === last) {
+                e.preventDefault();
+                first.focus();
+            }
+        }
+        document.addEventListener('keydown', onKey);
+        return () => {
+            document.body.style.overflow = prevOverflow;
+            window.clearTimeout(focusTimer);
+            document.removeEventListener('keydown', onKey);
+            if (previouslyFocused && document.contains(previouslyFocused))
+                previouslyFocused.focus();
+        };
+    }, [open]);
+    if (!mounted || typeof document === 'undefined')
+        return null;
+    return createPortal(_jsx(AnimatePresence, { children: open ? (_jsxs("div", { className: "fixed inset-0 z-[65] flex items-center justify-center p-4", children: [_jsx(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.15 }, className: "absolute inset-0 bg-overlay/50 backdrop-blur-[2px]", onClick: onClose, "aria-hidden": "true" }), _jsxs(motion.div, { ref: panelRef, role: "dialog", "aria-modal": "true", tabIndex: -1, initial: reduce ? { opacity: 0 } : { opacity: 0, scale: 0.96, y: 8 }, animate: reduce ? { opacity: 1 } : { opacity: 1, scale: 1, y: 0 }, exit: reduce ? { opacity: 0 } : { opacity: 0, scale: 0.96, y: 8 }, transition: { type: 'spring', damping: 30, stiffness: 380, mass: 0.7 }, className: cn('relative flex w-full flex-col overflow-hidden rounded-xl border border-border bg-surface shadow-lg', SIZE[size], fullHeight && 'h-[min(92vh,780px)]'), children: [title || description ? (_jsxs("div", { className: "space-y-1 px-6 pt-6", children: [title ? _jsx("h2", { className: "text-lg font-semibold text-fg", children: title }) : null, description ? _jsx("p", { className: "text-sm text-fg-muted", children: description }) : null] })) : null, !hideClose ? (_jsx("button", { type: "button", onClick: onClose, "aria-label": closeLabel, className: "absolute right-4 top-4 rounded-md p-1.5 text-fg-muted transition-colors hover:bg-surface-hover hover:text-fg", children: _jsx(X, { className: "size-4" }) })) : null, children ? (_jsx("div", { className: cn('text-sm text-fg', fullHeight ? 'flex min-h-0 flex-1 flex-col overflow-hidden' : 'px-6 py-5'), children: children })) : null, footer ? (_jsx("div", { className: "flex items-center justify-end gap-2 border-t border-border bg-bg-subtle px-6 py-3", children: footer })) : null] })] })) : null }), document.body);
+}
+//# sourceMappingURL=dialog.js.map

package/dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.js","sourceRoot":"","sources":["../src/dialog.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { createPortal } from 'react-dom'\nimport { AnimatePresence, motion, useReducedMotion } from 'framer-motion'\nimport { X } from 'lucide-react'\nimport { cn } from './utils'\n\nexport type DialogSize = 'sm' | 'md' | 'lg' | 'xl'\n\nconst SIZE: Record<DialogSize, string> = {\n  sm: 'max-w-sm',\n  md: 'max-w-lg',\n  lg: 'max-w-2xl',\n  // Working dialogs — an editor with its own sidebar, a two-pane review — need\n  // more width than a confirm prompt.\n  xl: 'max-w-5xl',\n}\n\nexport type DialogProps = {\n  open: boolean\n  onClose: () => void\n  title?: React.ReactNode\n  description?: React.ReactNode\n  children?: React.ReactNode\n  footer?: React.ReactNode\n  size?: DialogSize\n  /** Hide the corner close button. */\n  hideClose?: boolean\n  closeLabel?: string\n  /**\n   * Give the panel a fixed working height and hand the body to the consumer as\n   * a flex region with no padding. Use it when the content owns its own\n   * toolbar/scroll/columns (an editor, a review pane) rather than being a short\n   * block of prose — otherwise the dialog grows with its content and the page\n   * behind it scrolls instead.\n   */\n  fullHeight?: boolean\n}\n\n/** Centered modal dialog: backdrop, spring scale-in, focus trap, Esc/click-out. */\nexport function Dialog({\n  open,\n  onClose,\n  title,\n  description,\n  children,\n  footer,\n  size = 'md',\n  hideClose,\n  closeLabel = 'Close',\n  fullHeight,\n}: DialogProps) {\n  const reduce = useReducedMotion()\n  const [mounted, setMounted] = React.useState(false)\n  const panelRef = React.useRef<HTMLDivElement>(null)\n  const onCloseRef = React.useRef(onClose)\n  React.useEffect(() => {\n    onCloseRef.current = onClose\n  }, [onClose])\n  React.useEffect(() => setMounted(true), [])\n\n  React.useEffect(() => {\n    if (!open) return\n    const prevOverflow = document.body.style.overflow\n    document.body.style.overflow = 'hidden'\n    const previouslyFocused = document.activeElement as HTMLElement | null\n    const focusablesSelector =\n      'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex=\"-1\"])'\n    const focusTimer = window.setTimeout(() => {\n      const panel = panelRef.current\n      if (!panel) return\n      // React's autoFocus may already have placed focus inside the dialog.\n      // Do not steal it, and prefer an explicit autofocus target before the\n      // first DOM-order control (which is often the corner close button).\n      if (panel.contains(document.activeElement)) return\n      const preferred = panel.querySelector<HTMLElement>('[autofocus]')\n      const first = panel.querySelector<HTMLElement>(focusablesSelector)\n      ;(preferred ?? first ?? panel).focus()\n    }, 0)\n    function onKey(e: KeyboardEvent) {\n      if (e.key === 'Escape') {\n        if (document.querySelector('[data-ui-overlay]')) return\n        onCloseRef.current()\n        return\n      }\n      if (e.key !== 'Tab') return\n      const panel = panelRef.current\n      if (!panel) return\n      const items = Array.from(panel.querySelectorAll<HTMLElement>(focusablesSelector)).filter(\n        (el) => el.offsetParent !== null || el === document.activeElement,\n      )\n      if (items.length === 0) {\n        e.preventDefault()\n        panel.focus()\n        return\n      }\n      const first = items[0]!\n      const last = items[items.length - 1]!\n      const activeEl = document.activeElement\n      if (e.shiftKey && (activeEl === first || activeEl === panel)) {\n        e.preventDefault()\n        last.focus()\n      } else if (!e.shiftKey && activeEl === last) {\n        e.preventDefault()\n        first.focus()\n      }\n    }\n    document.addEventListener('keydown', onKey)\n    return () => {\n      document.body.style.overflow = prevOverflow\n      window.clearTimeout(focusTimer)\n      document.removeEventListener('keydown', onKey)\n      if (previouslyFocused && document.contains(previouslyFocused)) previouslyFocused.focus()\n    }\n  }, [open])\n\n  if (!mounted || typeof document === 'undefined') return null\n\n  return createPortal(\n    <AnimatePresence>\n      {open ? (\n        <div className=\"fixed inset-0 z-[65] flex items-center justify-center p-4\">\n          <motion.div\n            initial={{ opacity: 0 }}\n            animate={{ opacity: 1 }}\n            exit={{ opacity: 0 }}\n            transition={{ duration: 0.15 }}\n            className=\"absolute inset-0 bg-overlay/50 backdrop-blur-[2px]\"\n            onClick={onClose}\n            aria-hidden=\"true\"\n          />\n          <motion.div\n            ref={panelRef}\n            role=\"dialog\"\n            aria-modal=\"true\"\n            tabIndex={-1}\n            initial={reduce ? { opacity: 0 } : { opacity: 0, scale: 0.96, y: 8 }}\n            animate={reduce ? { opacity: 1 } : { opacity: 1, scale: 1, y: 0 }}\n            exit={reduce ? { opacity: 0 } : { opacity: 0, scale: 0.96, y: 8 }}\n            transition={{ type: 'spring', damping: 30, stiffness: 380, mass: 0.7 }}\n            className={cn(\n              'relative flex w-full flex-col overflow-hidden rounded-xl border border-border bg-surface shadow-lg',\n              SIZE[size],\n              fullHeight && 'h-[min(92vh,780px)]',\n            )}\n          >\n            {title || description ? (\n              <div className=\"space-y-1 px-6 pt-6\">\n                {title ? <h2 className=\"text-lg font-semibold text-fg\">{title}</h2> : null}\n                {description ? <p className=\"text-sm text-fg-muted\">{description}</p> : null}\n              </div>\n            ) : null}\n            {!hideClose ? (\n              <button\n                type=\"button\"\n                onClick={onClose}\n                aria-label={closeLabel}\n                className=\"absolute right-4 top-4 rounded-md p-1.5 text-fg-muted transition-colors hover:bg-surface-hover hover:text-fg\"\n              >\n                <X className=\"size-4\" />\n              </button>\n            ) : null}\n            {children ? (\n              <div\n                className={cn(\n                  'text-sm text-fg',\n                  fullHeight ? 'flex min-h-0 flex-1 flex-col overflow-hidden' : 'px-6 py-5',\n                )}\n              >\n                {children}\n              </div>\n            ) : null}\n            {footer ? (\n              <div className=\"flex items-center justify-end gap-2 border-t border-border bg-bg-subtle px-6 py-3\">\n                {footer}\n              </div>\n            ) : null}\n          </motion.div>\n        </div>\n      ) : null}\n    </AnimatePresence>,\n    document.body,\n  )\n}\n"]}

package/document-title.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Keeps the browser tab aligned with the title already rendered by a page.
+ *
+ * Applications can set `data-application-name` on the root `<html>` element
+ * to retain their brand in the tab title. The contract remains application-
+ * agnostic so existing page components can move to AppKit unchanged.
+ */
+export declare function DocumentTitle({ title }: {
+    title: string;
+}): null;
+//# sourceMappingURL=document-title.d.ts.map

package/document-title.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"document-title.d.ts","sourceRoot":"","sources":["../src/document-title.tsx"],"names":[],"mappings":"AAIA;;;;;;GAMG;AACH,wBAAgB,aAAa,CAAC,EAAE,KAAK,EAAE,EAAE;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,QAOzD"}

package/document-title.js

@@ -0,0 +1,17 @@
+'use client';
+import { useEffect } from 'react';
+/**
+ * Keeps the browser tab aligned with the title already rendered by a page.
+ *
+ * Applications can set `data-application-name` on the root `<html>` element
+ * to retain their brand in the tab title. The contract remains application-
+ * agnostic so existing page components can move to AppKit unchanged.
+ */
+export function DocumentTitle({ title }) {
+    useEffect(() => {
+        const applicationName = document.documentElement.dataset.applicationName;
+        document.title = applicationName ? `${title} · ${applicationName}` : title;
+    }, [title]);
+    return null;
+}
+//# sourceMappingURL=document-title.js.map

package/document-title.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"document-title.js","sourceRoot":"","sources":["../src/document-title.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;AAEZ,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC;;;;;;GAMG;AACH,MAAM,UAAU,aAAa,CAAC,EAAE,KAAK,EAAqB;IACxD,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,eAAe,GAAG,QAAQ,CAAC,eAAe,CAAC,OAAO,CAAC,eAAe,CAAA;QACxE,QAAQ,CAAC,KAAK,GAAG,eAAe,CAAC,CAAC,CAAC,GAAG,KAAK,MAAM,eAAe,EAAE,CAAC,CAAC,CAAC,KAAK,CAAA;IAC5E,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IAEX,OAAO,IAAI,CAAA;AACb,CAAC","sourcesContent":["'use client'\n\nimport { useEffect } from 'react'\n\n/**\n * Keeps the browser tab aligned with the title already rendered by a page.\n *\n * Applications can set `data-application-name` on the root `<html>` element\n * to retain their brand in the tab title. The contract remains application-\n * agnostic so existing page components can move to AppKit unchanged.\n */\nexport function DocumentTitle({ title }: { title: string }) {\n  useEffect(() => {\n    const applicationName = document.documentElement.dataset.applicationName\n    document.title = applicationName ? `${title} · ${applicationName}` : title\n  }, [title])\n\n  return null\n}\n"]}

package/drawer.d.ts

@@ -0,0 +1,63 @@
+import * as React from 'react';
+export type DrawerSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
+export type DrawerSide = 'left' | 'right';
+export type DrawerText = {
+    close: string;
+    fullscreen: string;
+    exitFullscreen: string;
+    translate?: (key: string) => string;
+};
+export declare function DrawerTextProvider({ value, children, }: {
+    value: Partial<DrawerText>;
+    children: React.ReactNode;
+}): React.JSX.Element;
+export type DrawerProps = {
+    open: boolean;
+    onClose: () => void;
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    size?: DrawerSize;
+    side?: DrawerSide;
+    children: React.ReactNode;
+    footer?: React.ReactNode;
+    /** Primary action buttons pinned into the header, before the close button. */
+    headerActions?: React.ReactNode;
+    /** Record-detail navigation rendered directly below the title header. */
+    subtabs?: React.ReactNode;
+    /** Override the body wrapper classes (default: scroll + px-6 py-5). */
+    bodyClassName?: string;
+    /** Extra classes for the panel (e.g. record-type tinting). */
+    panelClassName?: string;
+    /** Raise above another open drawer in a deliberate nested flow. */
+    stacked?: boolean;
+    /** Open at full viewport width; the user can still collapse it. */
+    initialFullscreen?: boolean;
+    /** Hide the fullscreen expand/collapse affordance. */
+    disableFullscreen?: boolean;
+    /** Fires after the exit animation completes (UrlDrawer defers navigation). */
+    onExitComplete?: () => void;
+};
+/**
+ * Slide-in flyout for sub-entity create/edit and detail views. Portals to body;
+ * spring slide-in; backdrop fade+blur; Esc + click-out + ref-counted scroll
+ * lock; focus trap + restore; a NetSuite-style expand/collapse to full viewport
+ * width (animated via max-width). Fully tokenized and reduced-motion aware.
+ */
+export declare function Drawer({ open, onClose, title, description, size, side, children, footer, headerActions, subtabs, bodyClassName, panelClassName, stacked, initialFullscreen, disableFullscreen, onExitComplete, }: DrawerProps): React.ReactPortal | null;
+/**
+ * Client-side navigate fn supplied by the host app (e.g. Next's `router.push`)
+ * so `UrlDrawer` can close by changing the URL — which re-runs the server
+ * component that owns the drawer's `open` state. Falls back to a hard nav.
+ */
+export declare const DrawerNavigateContext: React.Context<((href: string) => void) | null>;
+export type UrlDrawerProps = Omit<DrawerProps, 'open' | 'onClose' | 'onExitComplete'> & {
+    open: boolean;
+    closeHref: string;
+};
+/**
+ * URL-state drawer for server-rendered pages: `open` derives from a search
+ * param, so closing needs a real navigation (deferred until the slide-out
+ * finishes, so the exit animation always plays).
+ */
+export declare function UrlDrawer({ open, closeHref, children, ...rest }: UrlDrawerProps): React.JSX.Element;
+//# sourceMappingURL=drawer.d.ts.map

package/drawer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../src/drawer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAmB9B,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,GAAG,MAAM,CAAA;AACnE,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,OAAO,CAAA;AAgBzC,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,EAAE,MAAM,CAAA;IACb,UAAU,EAAE,MAAM,CAAA;IAClB,cAAc,EAAE,MAAM,CAAA;IACtB,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAA;CACpC,CAAA;AAUD,wBAAgB,kBAAkB,CAAC,EACjC,KAAK,EACL,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,OAAO,CAAC,UAAU,CAAC,CAAA;IAC1B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,qBAGA;AAcD,MAAM,MAAM,WAAW,GAAG;IACxB,IAAI,EAAE,OAAO,CAAA;IACb,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,8EAA8E;IAC9E,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC/B,yEAAyE;IACzE,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,uEAAuE;IACvE,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,8DAA8D;IAC9D,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,mEAAmE;IACnE,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,mEAAmE;IACnE,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,sDAAsD;IACtD,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,8EAA8E;IAC9E,cAAc,CAAC,EAAE,MAAM,IAAI,CAAA;CAC5B,CAAA;AAED;;;;;GAKG;AACH,wBAAgB,MAAM,CAAC,EACrB,IAAI,EACJ,OAAO,EACP,KAAK,EACL,WAAW,EACX,IAAW,EACX,IAAc,EACd,QAAQ,EACR,MAAM,EACN,aAAa,EACb,OAAO,EACP,aAAa,EACb,cAAc,EACd,OAAe,EACf,iBAAyB,EACzB,iBAAyB,EACzB,cAAc,GACf,EAAE,WAAW,4BAiQb;AAED;;;;GAIG;AACH,eAAO,MAAM,qBAAqB,wBAA+B,MAAM,KAAK,IAAI,SAAe,CAAA;AAE/F,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,WAAW,EAAE,MAAM,GAAG,SAAS,GAAG,gBAAgB,CAAC,GAAG;IACtF,IAAI,EAAE,OAAO,CAAA;IACb,SAAS,EAAE,MAAM,CAAA;CAClB,CAAA;AAED;;;;GAIG;AACH,wBAAgB,SAAS,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,cAAc,qBAgB/E"}

package/drawer.js

@@ -0,0 +1,188 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { createPortal } from 'react-dom';
+import { AnimatePresence, motion, useReducedMotion } from 'framer-motion';
+import { cn } from './utils.js';
+const SIZE_CLASS = {
+    sm: 'w-full sm:max-w-md',
+    md: 'w-full sm:max-w-xl',
+    lg: 'w-full sm:max-w-2xl',
+    xl: 'w-full sm:max-w-4xl',
+    '2xl': 'w-full sm:max-w-6xl',
+    full: 'w-full',
+};
+const DEFAULT_DRAWER_TEXT = {
+    close: 'Close',
+    fullscreen: 'Fullscreen',
+    exitFullscreen: 'Exit fullscreen',
+};
+const DrawerTextContext = React.createContext(DEFAULT_DRAWER_TEXT);
+export function DrawerTextProvider({ value, children, }) {
+    const merged = React.useMemo(() => ({ ...DEFAULT_DRAWER_TEXT, ...value }), [value]);
+    return _jsx(DrawerTextContext.Provider, { value: merged, children: children });
+}
+function useDrawerText() {
+    return React.useContext(DrawerTextContext);
+}
+// Ref-counted scroll lock — nested/stacked drawers share one lock so the body
+// only unlocks when the last drawer closes.
+let openDrawerCount = 0;
+let originalBodyOverflow = null;
+const FOCUSABLE = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
+/**
+ * Slide-in flyout for sub-entity create/edit and detail views. Portals to body;
+ * spring slide-in; backdrop fade+blur; Esc + click-out + ref-counted scroll
+ * lock; focus trap + restore; a NetSuite-style expand/collapse to full viewport
+ * width (animated via max-width). Fully tokenized and reduced-motion aware.
+ */
+export function Drawer({ open, onClose, title, description, size = 'md', side = 'right', children, footer, headerActions, subtabs, bodyClassName, panelClassName, stacked = false, initialFullscreen = false, disableFullscreen = false, onExitComplete, }) {
+    const text = useDrawerText();
+    const tr = text.translate ?? ((s) => s);
+    const reduce = useReducedMotion();
+    const [mounted, setMounted] = React.useState(false);
+    React.useEffect(() => setMounted(true), []);
+    const [fullscreen, setFullscreen] = React.useState(initialFullscreen);
+    React.useEffect(() => {
+        if (!open)
+            setFullscreen(initialFullscreen);
+    }, [initialFullscreen, open]);
+    const panelRef = React.useRef(null);
+    const onCloseRef = React.useRef(onClose);
+    React.useEffect(() => {
+        onCloseRef.current = onClose;
+    }, [onClose]);
+    // Esc + scroll lock. Stacked-aware: a base drawer ignores Esc while a nested
+    // drawer or a floating overlay is on top.
+    React.useEffect(() => {
+        if (!open)
+            return;
+        function onKey(e) {
+            if (e.key !== 'Escape')
+                return;
+            if (document.querySelector('[data-ui-overlay]'))
+                return;
+            if (!stacked && document.querySelector('[data-drawer-layer="nested"]'))
+                return;
+            onCloseRef.current();
+        }
+        document.addEventListener('keydown', onKey);
+        if (openDrawerCount === 0)
+            originalBodyOverflow = document.body.style.overflow;
+        openDrawerCount += 1;
+        document.body.style.overflow = 'hidden';
+        return () => {
+            document.removeEventListener('keydown', onKey);
+            openDrawerCount = Math.max(0, openDrawerCount - 1);
+            if (openDrawerCount === 0) {
+                document.body.style.overflow = originalBodyOverflow ?? '';
+                originalBodyOverflow = null;
+            }
+        };
+    }, [open, stacked]);
+    // Focus management: move focus in on open, trap Tab, restore on close.
+    React.useEffect(() => {
+        if (!open)
+            return;
+        const previouslyFocused = document.activeElement;
+        const focusTimer = window.setTimeout(() => {
+            if (!stacked && document.querySelector('[data-drawer-layer="nested"]'))
+                return;
+            const panel = panelRef.current;
+            if (!panel)
+                return;
+            if (panel.contains(document.activeElement))
+                return;
+            const preferred = panel.querySelector('[autofocus]');
+            const first = panel.querySelector(FOCUSABLE);
+            (preferred ?? first ?? panel).focus();
+        }, 0);
+        function onKeyDown(e) {
+            if (e.key !== 'Tab')
+                return;
+            if (!stacked && document.querySelector('[data-drawer-layer="nested"]'))
+                return;
+            const panel = panelRef.current;
+            if (!panel)
+                return;
+            const focusables = Array.from(panel.querySelectorAll(FOCUSABLE)).filter((el) => el.offsetParent !== null || el === document.activeElement);
+            if (focusables.length === 0) {
+                e.preventDefault();
+                panel.focus();
+                return;
+            }
+            const firstEl = focusables[0];
+            const lastEl = focusables[focusables.length - 1];
+            const activeEl = document.activeElement;
+            if (e.shiftKey) {
+                if (activeEl === firstEl || activeEl === panel || !panel.contains(activeEl)) {
+                    e.preventDefault();
+                    lastEl.focus();
+                }
+            }
+            else if (activeEl === lastEl) {
+                e.preventDefault();
+                firstEl.focus();
+            }
+        }
+        document.addEventListener('keydown', onKeyDown);
+        return () => {
+            window.clearTimeout(focusTimer);
+            document.removeEventListener('keydown', onKeyDown);
+            if (previouslyFocused && document.contains(previouslyFocused))
+                previouslyFocused.focus();
+        };
+    }, [open, stacked]);
+    if (typeof document === 'undefined')
+        return null;
+    const offscreen = side === 'left' ? '-100%' : '100%';
+    const panelMotion = reduce
+        ? {
+            initial: { opacity: 0 },
+            animate: { opacity: 1 },
+            exit: { opacity: 0 },
+            transition: { duration: 0.12 },
+        }
+        : {
+            initial: { x: offscreen },
+            animate: { x: 0 },
+            exit: { x: offscreen },
+            transition: { type: 'spring', damping: 32, stiffness: 320, mass: 0.8 },
+        };
+    return createPortal(_jsx(AnimatePresence, { onExitComplete: onExitComplete, children: mounted && open ? (_jsxs("div", { "data-drawer-layer": stacked ? 'nested' : 'base', className: cn('fixed inset-x-0 bottom-0 top-[var(--drawer-top,0px)]', stacked ? 'z-[55]' : 'z-50'), 
+            // Under the View Transitions API (PageTransition), a route change
+            // paints the page snapshot in the browser's top layer — above any
+            // z-index. Naming the drawer gives it its own top-layer group,
+            // stacked over the page group, so the page can never flash across
+            // an open drawer mid-navigation.
+            style: { viewTransitionName: stacked ? 'appkit-drawer-nested' : 'appkit-drawer' }, children: [_jsx(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.15 }, className: "absolute inset-0 bg-overlay/40 backdrop-blur-[2px]", onClick: onClose, "aria-hidden": "true" }), _jsxs(motion.aside, { ref: panelRef, role: "dialog", "aria-modal": "true", tabIndex: -1, ...panelMotion, className: cn('absolute inset-y-0 flex flex-col overflow-hidden border-t border-border bg-surface shadow-lg transition-[max-width] duration-300 ease-in-out', side === 'left' ? 'left-0 border-r' : 'right-0 border-l', 
+                    // Full replacement (not additive): two sm:max-w-* utilities on one
+                    // element resolve by stylesheet order, so stacking them no-ops.
+                    fullscreen ? 'w-full sm:max-w-[100vw]' : SIZE_CLASS[size], panelClassName), children: [title || description || headerActions ? (_jsxs("header", { className: "flex items-center justify-between gap-4 border-b border-border px-6 py-4", children: [_jsxs("div", { className: "min-w-0 space-y-0.5", children: [title ? (_jsx("h2", { className: "truncate text-base font-semibold text-fg", children: typeof title === 'string' ? tr(title) : title })) : null, description ? (_jsx("p", { className: "text-sm text-fg-muted", children: typeof description === 'string' ? tr(description) : description })) : null] }), _jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [headerActions ? (_jsx("div", { className: "flex flex-wrap items-center justify-end gap-2", children: headerActions })) : null, !disableFullscreen ? (_jsx("button", { type: "button", onClick: () => setFullscreen((f) => !f), className: "hidden rounded-md p-1.5 text-fg-muted transition-colors hover:bg-surface-hover hover:text-fg sm:block", "aria-label": fullscreen ? text.exitFullscreen : text.fullscreen, title: fullscreen ? text.exitFullscreen : text.fullscreen, children: fullscreen ? (_jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("polyline", { points: "4 14 10 14 10 20" }), _jsx("polyline", { points: "20 10 14 10 14 4" }), _jsx("line", { x1: "14", y1: "10", x2: "21", y2: "3" }), _jsx("line", { x1: "3", y1: "21", x2: "10", y2: "14" })] })) : (_jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("polyline", { points: "15 3 21 3 21 9" }), _jsx("polyline", { points: "9 21 3 21 3 15" }), _jsx("line", { x1: "21", y1: "3", x2: "14", y2: "10" }), _jsx("line", { x1: "3", y1: "21", x2: "10", y2: "14" })] })) })) : null, _jsx("button", { type: "button", onClick: onClose, className: "rounded-md p-1.5 text-fg-muted transition-colors hover:bg-surface-hover hover:text-fg", "aria-label": text.close, children: _jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), _jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })] }) })] })] })) : null, subtabs ? (_jsx("div", { className: "shrink-0 border-b border-border bg-surface px-6", children: subtabs })) : null, _jsx("div", { className: cn('app-scroll min-h-0 flex-1 text-fg', bodyClassName ?? 'overflow-y-auto px-6 py-5'), children: children }), footer ? (_jsx("footer", { className: "flex items-center justify-end gap-2 border-t border-border bg-bg-subtle px-6 py-3", children: footer })) : null] })] }, "drawer")) : null }), document.body);
+}
+/**
+ * Client-side navigate fn supplied by the host app (e.g. Next's `router.push`)
+ * so `UrlDrawer` can close by changing the URL — which re-runs the server
+ * component that owns the drawer's `open` state. Falls back to a hard nav.
+ */
+export const DrawerNavigateContext = React.createContext(null);
+/**
+ * URL-state drawer for server-rendered pages: `open` derives from a search
+ * param, so closing needs a real navigation (deferred until the slide-out
+ * finishes, so the exit animation always plays).
+ */
+export function UrlDrawer({ open, closeHref, children, ...rest }) {
+    const navigate = React.useContext(DrawerNavigateContext);
+    const [show, setShow] = React.useState(open);
+    React.useEffect(() => setShow(open), [open]);
+    function afterExit() {
+        if (typeof window === 'undefined')
+            return;
+        if (navigate)
+            navigate(closeHref);
+        else
+            window.location.assign(closeHref);
+    }
+    return (_jsx(Drawer, { open: show, onClose: () => setShow(false), onExitComplete: afterExit, ...rest, children: children }));
+}
+//# sourceMappingURL=drawer.js.map