@geomak/ui 7.9.0 → 7.11.0

package/dist/index.cjs

@@ -2,7 +2,7 @@
 
 var chunk4V4U2W7K_cjs = require('./chunk-4V4U2W7K.cjs');
 var chunkCNUDNGJM_cjs = require('./chunk-CNUDNGJM.cjs');
-var React34 = require('react');
+var React36 = require('react');
 var reactDom = require('react-dom');
 var jsxRuntime = require('react/jsx-runtime');
 var AvatarPrimitive = require('@radix-ui/react-avatar');
@@ -41,7 +41,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React34__default = /*#__PURE__*/_interopDefault(React34);
+var React36__default = /*#__PURE__*/_interopDefault(React36);
 var AvatarPrimitive__namespace = /*#__PURE__*/_interopNamespace(AvatarPrimitive);
 var DropdownMenu2__namespace = /*#__PURE__*/_interopNamespace(DropdownMenu2);
 var Dialog__namespace = /*#__PURE__*/_interopNamespace(Dialog);
@@ -67,8 +67,8 @@ function cx(...values) {
   return out;
 }
 function Portal({ children, target }) {
-  const [resolved, setResolved] = React34.useState(null);
-  React34.useEffect(() => {
+  const [resolved, setResolved] = React36.useState(null);
+  React36.useEffect(() => {
     if (target === null) {
       setResolved(null);
       return;
@@ -489,7 +489,7 @@ function Typography({
     }
   );
 }
-var IconButton = React34__default.default.forwardRef(function IconButton2({
+var IconButton = React36__default.default.forwardRef(function IconButton2({
   icon,
   onClick,
   type = "primary",
@@ -502,7 +502,7 @@ var IconButton = React34__default.default.forwardRef(function IconButton2({
   className = "",
   style
 }, ref) {
-  const colorScheme = React34.useMemo(() => {
+  const colorScheme = React36.useMemo(() => {
     if (type === "primary") {
       return "bg-accent text-accent-fg hover:bg-accent-hover";
     }
@@ -598,7 +598,7 @@ var SIZE_CLASSES = {
   md: "h-9  px-4   text-sm  gap-1.5 rounded-lg",
   lg: "h-11 px-5   text-sm  gap-2   rounded-xl"
 };
-var Button = React34__default.default.forwardRef(function Button2({
+var Button = React36__default.default.forwardRef(function Button2({
   content,
   variant = "primary",
   size = "md",
@@ -706,7 +706,7 @@ function MenuButton({
           "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
           "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95"
         ].join(" "),
-        children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(React34__default.default.Fragment, { children: [
+        children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(React36__default.default.Fragment, { children: [
           item.separatorBefore && /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu2__namespace.Separator, { className: "my-1 h-px bg-border" }),
           /* @__PURE__ */ jsxRuntime.jsxs(
             DropdownMenu2__namespace.Item,
@@ -729,6 +729,10 @@ function MenuButton({
     ) })
   ] });
 }
+var DialogContainerContext = React36.createContext(null);
+function useDialogContainer() {
+  return React36.useContext(DialogContainerContext);
+}
 var SIZE_MAP = {
   sm: 400,
   md: 600,
@@ -753,6 +757,7 @@ function Modal({
   className = ""
 }) {
   const reduced = framerMotion.useReducedMotion();
+  const [panelEl, setPanelEl] = React36.useState(null);
   const maxWidth = width ?? SIZE_MAP[size];
   return /* @__PURE__ */ jsxRuntime.jsx(Dialog__namespace.Root, { open, onOpenChange: (next) => {
     if (!next) onClose?.();
@@ -770,6 +775,7 @@ function Modal({
     /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: open && /* @__PURE__ */ jsxRuntime.jsx(Dialog__namespace.Content, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
       framerMotion.motion.div,
       {
+        ref: setPanelEl,
         className: `fixed left-1/2 top-1/2 z-modal flex flex-col w-[calc(100%-2rem)] max-h-[90dvh] bg-surface rounded-2xl shadow-xl overflow-hidden focus:outline-none ${className}`.trim(),
         style: {
           maxWidth,
@@ -797,7 +803,7 @@ function Modal({
               }
             ) })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: `flex-1 overflow-y-auto p-5 ${hasFooter ? "" : "pb-5"}`, children }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: `flex-1 overflow-y-auto p-5 ${hasFooter ? "" : "pb-5"}`, children: /* @__PURE__ */ jsxRuntime.jsx(DialogContainerContext.Provider, { value: panelEl, children }) }),
           hasFooter && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-shrink-0 items-center justify-end gap-3 border-t border-border px-5 py-3", children: [
             /* @__PURE__ */ jsxRuntime.jsx(
               Button_default,
@@ -848,6 +854,7 @@ function Drawer({
   className = ""
 }) {
   const reduced = framerMotion.useReducedMotion();
+  const [panelEl, setPanelEl] = React36.useState(null);
   const isRight = placement === "right";
   const hiddenX = isRight ? "100%" : "-100%";
   const resolvedWidth = width ?? SIZE_MAP2[size];
@@ -868,6 +875,7 @@ function Drawer({
     /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: open && /* @__PURE__ */ jsxRuntime.jsx(Dialog__namespace.Content, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
       framerMotion.motion.div,
       {
+        ref: setPanelEl,
         className: `fixed top-0 bottom-0 ${isRight ? "right-0" : "left-0"} z-modal flex flex-col bg-surface shadow-xl focus:outline-none ${className}`.trim(),
         style: { width: `min(calc(100vw - 1rem), ${widthCss})` },
         initial: { x: reduced ? 0 : hiddenX, opacity: reduced ? 0 : 1 },
@@ -894,7 +902,7 @@ function Drawer({
               }
             ) })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-y-auto p-5", children }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-y-auto p-5", children: /* @__PURE__ */ jsxRuntime.jsx(DialogContainerContext.Provider, { value: panelEl, children }) }),
           hasFooter && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex flex-shrink-0 items-center gap-3 border-t border-border px-5 py-3 ${isRight ? "justify-start" : "justify-end"}`, children: [
             /* @__PURE__ */ jsxRuntime.jsx(Button_default, { style: { width: 90 }, variant: cancelVariant, content: cancelText, onClick: onCancel }),
             /* @__PURE__ */ jsxRuntime.jsx(Button_default, { style: { width: 90 }, variant: okVariant, content: okText, onClick: onOk })
@@ -955,9 +963,9 @@ function Tooltip({
   ] }) });
 }
 var TooltipProvider = TooltipPrimitive__namespace.Provider;
-var TabsContext = React34.createContext(null);
+var TabsContext = React36.createContext(null);
 function useTabsContext() {
-  const ctx = React34.useContext(TabsContext);
+  const ctx = React36.useContext(TabsContext);
   if (!ctx) throw new Error("Tabs.List / Tabs.Trigger / Tabs.Panel must be rendered inside <Tabs>.");
   return ctx;
 }
@@ -979,26 +987,26 @@ function Tabs({
   children
 }) {
   const isControlled = value !== void 0;
-  const [internal, setInternal] = React34.useState(defaultValue);
+  const [internal, setInternal] = React36.useState(defaultValue);
   const current = isControlled ? value : internal;
   const reduced = !!framerMotion.useReducedMotion();
-  const indicatorId = React34.useId();
-  const select = React34.useCallback((next) => {
+  const indicatorId = React36.useId();
+  const select = React36.useCallback((next) => {
     if (!isControlled) setInternal(next);
     onChange?.(next);
   }, [isControlled, onChange]);
-  const registry = React34.useRef(/* @__PURE__ */ new Map());
-  const orderRef = React34.useRef(0);
-  const [, bump] = React34.useState(0);
-  const registerTab = React34.useCallback((val, meta) => {
+  const registry = React36.useRef(/* @__PURE__ */ new Map());
+  const orderRef = React36.useRef(0);
+  const [, bump] = React36.useState(0);
+  const registerTab = React36.useCallback((val, meta) => {
     const existing = registry.current.get(val);
     registry.current.set(val, { ...meta, order: existing?.order ?? orderRef.current++ });
     if (!existing) bump((v) => v + 1);
   }, []);
-  const unregisterTab = React34.useCallback((val) => {
+  const unregisterTab = React36.useCallback((val) => {
     if (registry.current.delete(val)) bump((v) => v + 1);
   }, []);
-  const getTabs = React34.useCallback(() => [...registry.current.entries()].sort((a, b) => a[1].order - b[1].order).map(([val, m]) => ({ value: val, label: m.label, icon: m.icon, disabled: m.disabled })), []);
+  const getTabs = React36.useCallback(() => [...registry.current.entries()].sort((a, b) => a[1].order - b[1].order).map(([val, m]) => ({ value: val, label: m.label, icon: m.icon, disabled: m.disabled })), []);
   return /* @__PURE__ */ jsxRuntime.jsx(TabsContext.Provider, { value: { value: current, variant, size, orientation, indicatorId, reduced, select, registerTab, unregisterTab, getTabs }, children: /* @__PURE__ */ jsxRuntime.jsx(
     TabsPrimitive__namespace.Root,
     {
@@ -1018,10 +1026,10 @@ function Tabs({
 function TabsList({ children, "aria-label": ariaLabel, className = "" }) {
   const { variant, orientation, reduced, value } = useTabsContext();
   const horizontal = orientation === "horizontal";
-  const scrollRef = React34.useRef(null);
-  const [edges, setEdges] = React34.useState({ start: false, end: false });
+  const scrollRef = React36.useRef(null);
+  const [edges, setEdges] = React36.useState({ start: false, end: false });
   const scrollable = variant !== "segmented";
-  React34.useLayoutEffect(() => {
+  React36.useLayoutEffect(() => {
     const el = scrollRef.current;
     if (!el || !scrollable) return;
     const update = () => {
@@ -1046,13 +1054,13 @@ function TabsList({ children, "aria-label": ariaLabel, className = "" }) {
       ro.disconnect();
     };
   }, [horizontal, scrollable, children]);
-  const nudge = React34.useCallback((dir) => {
+  const nudge = React36.useCallback((dir) => {
     const el = scrollRef.current;
     if (!el) return;
     const amount = (horizontal ? el.clientWidth : el.clientHeight) * 0.7 * dir;
     el.scrollBy({ [horizontal ? "left" : "top"]: amount, behavior: reduced ? "auto" : "smooth" });
   }, [horizontal, reduced]);
-  React34.useLayoutEffect(() => {
+  React36.useLayoutEffect(() => {
     const el = scrollRef.current;
     if (!el || !scrollable) return;
     const active = el.querySelector("[role=tab][data-state=active]");
@@ -1110,9 +1118,9 @@ function Chevron2({ side, orientation, onClick }) {
 function OverflowMenu() {
   const { getTabs, value, select, orientation } = useTabsContext();
   const horizontal = orientation === "horizontal";
-  const [open, setOpen] = React34.useState(false);
-  const wrapRef = React34.useRef(null);
-  const timer = React34.useRef(null);
+  const [open, setOpen] = React36.useState(false);
+  const wrapRef = React36.useRef(null);
+  const timer = React36.useRef(null);
   const openNow = () => {
     if (timer.current) clearTimeout(timer.current);
     setOpen(true);
@@ -1120,7 +1128,7 @@ function OverflowMenu() {
   const closeSoon = () => {
     timer.current = setTimeout(() => setOpen(false), 160);
   };
-  React34.useLayoutEffect(() => {
+  React36.useLayoutEffect(() => {
     if (!open) return;
     const onDoc = (e) => {
       if (wrapRef.current && !wrapRef.current.contains(e.target)) setOpen(false);
@@ -1201,7 +1209,7 @@ function TabsTrigger({ value, icon, badge, closeable, onClose, disabled, classNa
   const isActive = active === value;
   const horizontal = orientation === "horizontal";
   const sz = SIZE[size];
-  React34.useLayoutEffect(() => {
+  React36.useLayoutEffect(() => {
     registerTab(value, { label: children, icon, disabled });
     return () => unregisterTab(value);
   }, [value, children, icon, disabled, registerTab, unregisterTab]);
@@ -1400,7 +1408,7 @@ function Tree({
     item.key
   )) });
 }
-var AccordionCtx = React34.createContext({ variant: "separated" });
+var AccordionCtx = React36.createContext({ variant: "separated" });
 function Accordion2({
   children,
   type = "single",
@@ -1459,7 +1467,7 @@ var Chevron3 = /* @__PURE__ */ jsxRuntime.jsx(
   }
 );
 function AccordionItem({ value, title, icon, children, disabled, className = "" }) {
-  const { variant } = React34.useContext(AccordionCtx);
+  const { variant } = React36.useContext(AccordionCtx);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     AccordionPrimitive__namespace.Item,
     {
@@ -1518,7 +1526,7 @@ function Breadcrumbs({
   className = "",
   style
 }) {
-  const [expanded, setExpanded] = React34.useState(false);
+  const [expanded, setExpanded] = React36.useState(false);
   const shouldCollapse = maxItems > 0 && items.length > maxItems && !expanded;
   const visible = [];
   if (shouldCollapse) {
@@ -1743,8 +1751,8 @@ function Stepper({
   className = ""
 }) {
   const reduced = framerMotion.useReducedMotion();
-  const [forcedVertical, setForcedVertical] = React34.useState(false);
-  React34.useEffect(() => {
+  const [forcedVertical, setForcedVertical] = React36.useState(false);
+  React36.useEffect(() => {
     if (!responsive || orientation === "vertical") return;
     if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
     const mq = window.matchMedia("(max-width: 767px)");
@@ -1853,7 +1861,7 @@ function Kbd({
   style
 }) {
   if (keys && keys.length > 0) {
-    return /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx("inline-flex items-center gap-1", className), style, children: keys.map((k, i) => /* @__PURE__ */ jsxRuntime.jsxs(React34__default.default.Fragment, { children: [
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx("inline-flex items-center gap-1", className), style, children: keys.map((k, i) => /* @__PURE__ */ jsxRuntime.jsxs(React36__default.default.Fragment, { children: [
       i > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-foreground-muted text-xs select-none", children: separator }),
       /* @__PURE__ */ jsxRuntime.jsx("kbd", { className: [cap, SIZE3[size]].join(" "), children: k })
     ] }, `${k}-${i}`)) });
@@ -1944,13 +1952,13 @@ function FlatCarousel({
   className = "",
   style
 }) {
-  const scrollerRef = React34.useRef(null);
-  const slides = React34__default.default.Children.toArray(children);
-  const [active, setActive] = React34.useState(0);
-  const [atStart, setAtStart] = React34.useState(true);
-  const [atEnd, setAtEnd] = React34.useState(false);
+  const scrollerRef = React36.useRef(null);
+  const slides = React36__default.default.Children.toArray(children);
+  const [active, setActive] = React36.useState(0);
+  const [atStart, setAtStart] = React36.useState(true);
+  const [atEnd, setAtEnd] = React36.useState(false);
   const width = typeof itemWidth === "number" ? `${itemWidth}px` : itemWidth;
-  const update = React34.useCallback(() => {
+  const update = React36.useCallback(() => {
     const el = scrollerRef.current;
     if (!el) return;
     setAtStart(el.scrollLeft <= 1);
@@ -1959,7 +1967,7 @@ function FlatCarousel({
     const slideW = first ? first.getBoundingClientRect().width + gap : el.clientWidth;
     setActive(Math.round(el.scrollLeft / slideW));
   }, [gap]);
-  React34.useEffect(() => {
+  React36.useEffect(() => {
     update();
     const el = scrollerRef.current;
     if (!el) return;
@@ -2000,9 +2008,9 @@ function RotatingCarousel({
   className = "",
   style
 }) {
-  const slides = React34__default.default.Children.toArray(children);
+  const slides = React36__default.default.Children.toArray(children);
   const count = slides.length;
-  const [active, setActive] = React34.useState(0);
+  const [active, setActive] = React36.useState(0);
   const reduced = framerMotion.useReducedMotion();
   const wrap = (n) => count > 0 ? (n % count + count) % count : 0;
   const idx = wrap(active);
@@ -2240,13 +2248,13 @@ function Chat({
   className = "",
   style
 }) {
-  const listRef = React34.useRef(null);
-  const atBottomRef = React34.useRef(true);
-  const [showJump, setShowJump] = React34.useState(false);
-  const [draft, setDraft] = React34.useState("");
+  const listRef = React36.useRef(null);
+  const atBottomRef = React36.useRef(true);
+  const [showJump, setShowJump] = React36.useState(false);
+  const [draft, setDraft] = React36.useState("");
   const hasHeader = title != null || subtitle != null || avatar != null || headerActions != null;
   const isTyping = typingNames.length > 0;
-  const scrollToBottom = React34.useCallback((smooth = true) => {
+  const scrollToBottom = React36.useCallback((smooth = true) => {
     const el = listRef.current;
     if (!el) return;
     if (typeof el.scrollTo === "function") el.scrollTo({ top: el.scrollHeight, behavior: smooth ? "smooth" : "auto" });
@@ -2259,10 +2267,10 @@ function Chat({
     atBottomRef.current = near;
     setShowJump(!near);
   };
-  React34.useEffect(() => {
+  React36.useEffect(() => {
     if (atBottomRef.current) scrollToBottom(messages.length > 0);
   }, [messages.length, isTyping]);
-  React34.useEffect(() => {
+  React36.useEffect(() => {
     scrollToBottom(false);
   }, [scrollToBottom]);
   const send = () => {
@@ -2452,7 +2460,7 @@ function FAB({
   className = "",
   style
 }) {
-  const [open, setOpen] = React34.useState(false);
+  const [open, setOpen] = React36.useState(false);
   const reduced = framerMotion.useReducedMotion();
   const hasDial = !!actions && actions.length > 0;
   const bottom = position.startsWith("bottom");
@@ -2554,8 +2562,8 @@ function PopConfirm({
   onOpenChange,
   className = ""
 }) {
-  const [uncontrolledOpen, setUncontrolledOpen] = React34.useState(false);
-  const [loading, setLoading] = React34.useState(false);
+  const [uncontrolledOpen, setUncontrolledOpen] = React36.useState(false);
+  const [loading, setLoading] = React36.useState(false);
   const isOpen = open ?? uncontrolledOpen;
   const setOpen = (next) => {
     onOpenChange?.(next);
@@ -2658,16 +2666,16 @@ function LogoutTimer({
   logoutLabel = "Sign out now"
 }) {
   const reduced = framerMotion.useReducedMotion();
-  const [warning, setWarning] = React34.useState(false);
-  const [remaining, setRemaining] = React34.useState(countdown);
-  const idleTimer = React34.useRef(null);
-  const tick = React34.useRef(null);
-  const deadline = React34.useRef(0);
-  const warningRef = React34.useRef(false);
-  const lastReset = React34.useRef(0);
-  const cbs = React34.useRef({ onLogout, onContinue, onWarning });
+  const [warning, setWarning] = React36.useState(false);
+  const [remaining, setRemaining] = React36.useState(countdown);
+  const idleTimer = React36.useRef(null);
+  const tick = React36.useRef(null);
+  const deadline = React36.useRef(0);
+  const warningRef = React36.useRef(false);
+  const lastReset = React36.useRef(0);
+  const cbs = React36.useRef({ onLogout, onContinue, onWarning });
   cbs.current = { onLogout, onContinue, onWarning };
-  const clearTimers = React34.useCallback(() => {
+  const clearTimers = React36.useCallback(() => {
     if (idleTimer.current) {
       clearTimeout(idleTimer.current);
       idleTimer.current = null;
@@ -2677,13 +2685,13 @@ function LogoutTimer({
       tick.current = null;
     }
   }, []);
-  const logout = React34.useCallback(() => {
+  const logout = React36.useCallback(() => {
     clearTimers();
     warningRef.current = false;
     setWarning(false);
     cbs.current.onLogout();
   }, [clearTimers]);
-  const startIdle = React34.useCallback(() => {
+  const startIdle = React36.useCallback(() => {
     if (idleTimer.current) clearTimeout(idleTimer.current);
     idleTimer.current = setTimeout(() => {
       warningRef.current = true;
@@ -2698,7 +2706,7 @@ function LogoutTimer({
       }, 250);
     }, timeout);
   }, [timeout, countdown, logout]);
-  const stay = React34.useCallback(() => {
+  const stay = React36.useCallback(() => {
     if (tick.current) {
       clearInterval(tick.current);
       tick.current = null;
@@ -2708,7 +2716,7 @@ function LogoutTimer({
     cbs.current.onContinue?.();
     startIdle();
   }, [startIdle]);
-  React34.useEffect(() => {
+  React36.useEffect(() => {
     if (!enabled) {
       clearTimers();
       warningRef.current = false;
@@ -2773,11 +2781,11 @@ function SegmentedControl({
   "aria-label": ariaLabel
 }) {
   const sz = SIZE5[size];
-  const groupId = React34.useId();
-  const errorId = React34.useId();
+  const groupId = React36.useId();
+  const errorId = React36.useId();
   const hasError = errorMessage != null;
   const isControlled = value !== void 0;
-  const [internal, setInternal] = React34.useState(defaultValue);
+  const [internal, setInternal] = React36.useState(defaultValue);
   const current = isControlled ? value : internal;
   const handle = (v) => {
     if (!v) return;
@@ -2938,22 +2946,22 @@ function Scheduler({
   style
 }) {
   const reduced = framerMotion.useReducedMotion();
-  const [view, setView] = React34.useState(defaultView);
-  const [cursor, setCursor] = React34.useState(() => defaultDate ?? /* @__PURE__ */ new Date());
-  const [loaded, setLoaded] = React34.useState([]);
-  const [loading, setLoading] = React34.useState(false);
-  const [error, setError] = React34.useState(null);
-  const [reloadKey, setReloadKey] = React34.useState(0);
-  const [dir, setDir] = React34.useState(0);
-  const cbRef = React34.useRef({ loadEvents, onError });
+  const [view, setView] = React36.useState(defaultView);
+  const [cursor, setCursor] = React36.useState(() => defaultDate ?? /* @__PURE__ */ new Date());
+  const [loaded, setLoaded] = React36.useState([]);
+  const [loading, setLoading] = React36.useState(false);
+  const [error, setError] = React36.useState(null);
+  const [reloadKey, setReloadKey] = React36.useState(0);
+  const [dir, setDir] = React36.useState(0);
+  const cbRef = React36.useRef({ loadEvents, onError });
   cbRef.current = { loadEvents, onError };
-  const range = React34.useMemo(
+  const range = React36.useMemo(
     () => view === "month" ? monthRange(cursor) : weekRange(cursor, weekStartsOn),
     [view, cursor, weekStartsOn]
   );
   const fromKey = range.from.getTime();
   const toKey = range.to.getTime();
-  React34.useEffect(() => {
+  React36.useEffect(() => {
     const { loadEvents: loader, onError: onErr } = cbRef.current;
     if (!loader) return;
     let cancelled = false;
@@ -2973,16 +2981,16 @@ function Scheduler({
       cancelled = true;
     };
   }, [fromKey, toKey, view, reloadKey]);
-  const retry = React34.useCallback(() => setReloadKey((k) => k + 1), []);
-  const events = React34.useMemo(
+  const retry = React36.useCallback(() => setReloadKey((k) => k + 1), []);
+  const events = React36.useMemo(
     () => (controlledEvents ?? loaded).map(normalize),
     [controlledEvents, loaded]
   );
-  const go = React34.useCallback((delta) => {
+  const go = React36.useCallback((delta) => {
     setDir(delta);
     setCursor((c) => view === "month" ? addMonths(c, delta) : addDays(c, delta * 7));
   }, [view]);
-  const goToday = React34.useCallback(() => {
+  const goToday = React36.useCallback(() => {
     setDir(0);
     setCursor(/* @__PURE__ */ new Date());
   }, []);
@@ -3092,9 +3100,9 @@ function SchedulerError({ onRetry }) {
   ] });
 }
 function MonthYearPicker({ label, cursor, onPick }) {
-  const [open, setOpen] = React34.useState(false);
-  const [viewYear, setViewYear] = React34.useState(cursor.getFullYear());
-  React34.useEffect(() => {
+  const [open, setOpen] = React36.useState(false);
+  const [viewYear, setViewYear] = React36.useState(cursor.getFullYear());
+  React36.useEffect(() => {
     if (open) setViewYear(cursor.getFullYear());
   }, [open, cursor]);
   return /* @__PURE__ */ jsxRuntime.jsxs(Popover__namespace.Root, { open, onOpenChange: setOpen, children: [
@@ -3168,8 +3176,8 @@ function MonthView({
   onSelectSlot,
   onSelectEvent
 }) {
-  const grid = React34.useMemo(() => buildMonthGrid(cursor, weekStartsOn), [cursor, weekStartsOn]);
-  const eventsByDay = React34.useMemo(() => bucketByDay(events), [events]);
+  const grid = React36.useMemo(() => buildMonthGrid(cursor, weekStartsOn), [cursor, weekStartsOn]);
+  const eventsByDay = React36.useMemo(() => bucketByDay(events), [events]);
   const labels = weekdayLabels(weekStartsOn);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full flex-col", children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-7 border-b border-border", children: labels.map((l) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-2 py-1.5 text-center text-[11px] font-medium uppercase tracking-wide text-foreground-muted", children: l }, l)) }),
@@ -3243,12 +3251,12 @@ function WeekView({
   onSelectSlot,
   onSelectEvent
 }) {
-  const days = React34.useMemo(() => getWeekDays(cursor, weekStartsOn), [cursor, weekStartsOn]);
-  const eventsByDay = React34.useMemo(() => bucketByDay(events), [events]);
-  const labels = React34.useMemo(() => weekdayLabels(weekStartsOn), [weekStartsOn]);
+  const days = React36.useMemo(() => getWeekDays(cursor, weekStartsOn), [cursor, weekStartsOn]);
+  const eventsByDay = React36.useMemo(() => bucketByDay(events), [events]);
+  const labels = React36.useMemo(() => weekdayLabels(weekStartsOn), [weekStartsOn]);
   const dow = (d) => labels[(d.getDay() - weekStartsOn + 7) % 7];
   const [startHour, endHour] = dayHours;
-  const hours = React34.useMemo(
+  const hours = React36.useMemo(
     () => Array.from({ length: endHour - startHour }, (_, i) => startHour + i),
     [startHour, endHour]
   );
@@ -3439,17 +3447,17 @@ function Cart({
     ] })
   ] });
 }
-var CartContext = React34.createContext(null);
+var CartContext = React36.createContext(null);
 var clampQty = (qty, max) => {
   const lower = Math.max(1, Math.round(qty));
   return max != null ? Math.min(lower, max) : lower;
 };
 function CartProvider({ children, initialItems = [], onChange }) {
-  const [items, setItems] = React34.useState(initialItems);
-  React34.useEffect(() => {
+  const [items, setItems] = React36.useState(initialItems);
+  React36.useEffect(() => {
     onChange?.(items);
   }, [items]);
-  const addToCart = React34.useCallback((item, quantity) => {
+  const addToCart = React36.useCallback((item, quantity) => {
     const addQty = quantity ?? item.quantity ?? 1;
     setItems((prev) => {
       const existing = prev.find((it) => it.id === item.id);
@@ -3462,29 +3470,29 @@ function CartProvider({ children, initialItems = [], onChange }) {
       return [...prev, { ...rest, quantity: clampQty(addQty, item.max) }];
     });
   }, []);
-  const removeFromCart = React34.useCallback((id) => {
+  const removeFromCart = React36.useCallback((id) => {
     setItems((prev) => prev.filter((it) => it.id !== id));
   }, []);
-  const updateQuantity = React34.useCallback((id, quantity) => {
+  const updateQuantity = React36.useCallback((id, quantity) => {
     setItems(
       (prev) => prev.map((it) => it.id === id ? { ...it, quantity: clampQty(quantity, it.max) } : it)
     );
   }, []);
-  const clearCart = React34.useCallback(() => setItems([]), []);
-  const isInCart = React34.useCallback((id) => items.some((it) => it.id === id), [items]);
-  const getItemCount = React34.useCallback(() => items.reduce((sum, it) => sum + it.quantity, 0), [items]);
-  const getCartTotal = React34.useCallback(
+  const clearCart = React36.useCallback(() => setItems([]), []);
+  const isInCart = React36.useCallback((id) => items.some((it) => it.id === id), [items]);
+  const getItemCount = React36.useCallback(() => items.reduce((sum, it) => sum + it.quantity, 0), [items]);
+  const getCartTotal = React36.useCallback(
     () => items.reduce((sum, it) => sum + it.price * it.quantity, 0),
     [items]
   );
-  const value = React34.useMemo(
+  const value = React36.useMemo(
     () => ({ items, addToCart, removeFromCart, updateQuantity, clearCart, isInCart, getItemCount, getCartTotal }),
     [items, addToCart, removeFromCart, updateQuantity, clearCart, isInCart, getItemCount, getCartTotal]
   );
   return /* @__PURE__ */ jsxRuntime.jsx(CartContext.Provider, { value, children });
 }
 function useCart() {
-  const ctx = React34.useContext(CartContext);
+  const ctx = React36.useContext(CartContext);
   if (!ctx) {
     throw new Error("useCart must be used within a <CartProvider>.");
   }
@@ -3826,11 +3834,11 @@ function buildBindings(store, name, kind, snap) {
 
 // src/form/useForm.ts
 function useForm(options = {}) {
-  const ref = React34.useRef(null);
+  const ref = React36.useRef(null);
   if (ref.current === null) ref.current = new FormStore(options);
   const store = ref.current;
-  React34.useSyncExternalStore(store.subscribe, store.getRootSnapshot, store.getRootSnapshot);
-  const make = React34.useCallback(
+  React36.useSyncExternalStore(store.subscribe, store.getRootSnapshot, store.getRootSnapshot);
+  const make = React36.useCallback(
     (kind) => (name, rules) => {
       if (rules !== void 0) store.setRule(name, rules);
       return buildBindings(store, name, kind, store.getFieldSnapshot(name));
@@ -3860,9 +3868,9 @@ function useForm(options = {}) {
     fieldTarget: make("target")
   };
 }
-var FormContext = React34.createContext(null);
+var FormContext = React36.createContext(null);
 function useFormStore() {
-  const store = React34.useContext(FormContext);
+  const store = React36.useContext(FormContext);
   if (!store) {
     throw new Error("useFormStore must be used within a <Form>. Did you forget to wrap your fields?");
   }
@@ -3876,8 +3884,8 @@ function Form({
   children,
   ...rest
 }) {
-  const ref = React34.useRef(null);
-  const bypass = React34.useRef(false);
+  const ref = React36.useRef(null);
+  const bypass = React36.useRef(false);
   const handleSubmit = async (e) => {
     if (bypass.current) {
       bypass.current = false;
@@ -3934,12 +3942,12 @@ function useFormField(name, options = {}) {
   const store = useFormStore();
   const { kind = "value", rules } = options;
   if (rules !== void 0 && store.getRule(name) !== rules) store.setRule(name, rules);
-  React34.useEffect(() => {
+  React36.useEffect(() => {
     return () => {
       if (rules !== void 0) store.removeRule(name);
     };
   }, [store, name]);
-  const snap = React34.useSyncExternalStore(
+  const snap = React36.useSyncExternalStore(
     store.subscribe,
     () => store.getFieldSnapshot(name)
   );
@@ -3951,7 +3959,7 @@ function FormField({ name, kind, rules, children }) {
 }
 function useFieldArray(name) {
   const store = useFormStore();
-  React34.useSyncExternalStore(store.subscribe, store.getRootSnapshot, store.getRootSnapshot);
+  React36.useSyncExternalStore(store.subscribe, store.getRootSnapshot, store.getRootSnapshot);
   const arr = store.getValue(name) ?? [];
   const keys = store.getKeys(name);
   return {
@@ -3984,7 +3992,7 @@ function TextInput({
   suffix,
   id
 }) {
-  const errorId = React34.useId();
+  const errorId = React36.useId();
   const hasError = errorMessage != null;
   const hasAdornment = prefix != null || suffix != null;
   const inputId = htmlFor ?? id;
@@ -4145,7 +4153,7 @@ function CreditCardForm({
   className = "",
   style
 }) {
-  const initial = React34.useRef({
+  const initial = React36.useRef({
     number: formatCardNumber(defaultValue?.number ?? ""),
     name: defaultValue?.name ?? "",
     expiry: formatExpiry(defaultValue?.expiry ?? ""),
@@ -4154,7 +4162,7 @@ function CreditCardForm({
   const form = useForm({ initialValues: initial });
   const numberStr = String(form.values.number ?? "");
   const brand = detectBrand(numberStr);
-  React34.useEffect(() => {
+  React36.useEffect(() => {
     onChange?.(toCard(form.values));
   }, [form.values.number, form.values.name, form.values.expiry, form.values.cvv]);
   const numberBind = form.fieldNative("number", {
@@ -4277,7 +4285,7 @@ function Checkout({
     ] })
   ] });
 }
-var NotificationContext = React34.createContext({
+var NotificationContext = React36.createContext({
   open: () => void 0,
   close: () => void 0
 });
@@ -4335,26 +4343,26 @@ function NotificationItem({
   onClose,
   reduced
 }) {
-  const [paused, setPaused] = React34.useState(false);
+  const [paused, setPaused] = React36.useState(false);
   const duration = n.duration ?? 4e3;
   const isAutoDismissing = isFinite(duration) && duration > 0;
   const showProgress = !reduced && isAutoDismissing;
-  const timerRef = React34.useRef(null);
-  const startTimeRef = React34.useRef(0);
-  const remainingRef = React34.useRef(duration);
-  const clearTimer = React34.useCallback(() => {
+  const timerRef = React36.useRef(null);
+  const startTimeRef = React36.useRef(0);
+  const remainingRef = React36.useRef(duration);
+  const clearTimer = React36.useCallback(() => {
     if (timerRef.current !== null) {
       clearTimeout(timerRef.current);
       timerRef.current = null;
     }
   }, []);
-  const scheduleDismiss = React34.useCallback((ms) => {
+  const scheduleDismiss = React36.useCallback((ms) => {
     clearTimer();
     if (!isAutoDismissing) return;
     startTimeRef.current = Date.now();
     timerRef.current = setTimeout(() => onClose(n.id), ms);
   }, [clearTimer, isAutoDismissing, n.id, onClose]);
-  React34.useEffect(() => {
+  React36.useEffect(() => {
     if (paused || !isAutoDismissing) return;
     scheduleDismiss(remainingRef.current);
     return clearTimer;
@@ -4437,15 +4445,15 @@ function NotificationProvider({
   children,
   position = "top-right"
 }) {
-  const [notifications, setNotifications] = React34.useState([]);
+  const [notifications, setNotifications] = React36.useState([]);
   const reduced = framerMotion.useReducedMotion();
-  const open = React34.useCallback((payload) => {
+  const open = React36.useCallback((payload) => {
     setNotifications((prev) => [
       ...prev,
       { duration: 4e3, ...payload, id: Date.now() + Math.random() }
     ]);
   }, []);
-  const close = React34.useCallback((id) => {
+  const close = React36.useCallback((id) => {
     setNotifications((prev) => prev.filter((n) => n.id !== id));
   }, []);
   return /* @__PURE__ */ jsxRuntime.jsxs(NotificationContext.Provider, { value: { open, close }, children: [
@@ -4474,7 +4482,7 @@ function NotificationProvider({
   ] });
 }
 function useNotification() {
-  const { open } = React34.useContext(NotificationContext);
+  const { open } = React36.useContext(NotificationContext);
   return {
     info: (props) => open({ type: "info", ...props }),
     success: (props) => open({ type: "success", ...props }),
@@ -4591,10 +4599,10 @@ function FadingBase({
   isMounted = false,
   children
 }) {
-  const [shouldRender, setShouldRender] = React34.useState(isMounted);
-  const [visible, setVisible] = React34.useState(false);
-  const timerRef = React34.useRef(null);
-  React34.useEffect(() => {
+  const [shouldRender, setShouldRender] = React36.useState(isMounted);
+  const [visible, setVisible] = React36.useState(false);
+  const timerRef = React36.useRef(null);
+  React36.useEffect(() => {
     if (isMounted) {
       setShouldRender(true);
       const rafId = requestAnimationFrame(() => setVisible(true));
@@ -4706,14 +4714,14 @@ function ScalableContainer({
   togglePosition = "top-right",
   className = ""
 }) {
-  const containerRef = React34.useRef(null);
-  const [internalScaled, setInternalScaled] = React34.useState(false);
+  const containerRef = React36.useRef(null);
+  const [internalScaled, setInternalScaled] = React36.useState(false);
   const isScaled = expanded ?? internalScaled;
   const reduced = framerMotion.useReducedMotion();
-  const prevScaled = React34.useRef(isScaled);
+  const prevScaled = React36.useRef(isScaled);
   const expandW = targetWidth ?? expandedWidth;
   const expandH = targetHeight ?? expandedHeight;
-  React34.useEffect(() => {
+  React36.useEffect(() => {
     if (isScaled === prevScaled.current) return;
     prevScaled.current = isScaled;
     if (typeof window === "undefined") return;
@@ -4860,17 +4868,17 @@ function CatalogGrid({ items, buttonText, onOpen, className = "" }) {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `flex flex-wrap gap-2 ${className}`.trim(), children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(GridCard, { item, buttonText, onOpen }, item.key)) });
 }
 function CatalogCarousel({ items, buttonText, onOpen, className = "" }) {
-  const [activeIndex, setActiveIndex] = React34.useState(0);
-  const [indexPool, setIndexPool] = React34.useState([]);
-  const cardRefs = React34.useRef([]);
-  const getIndexes = React34.useMemo(() => {
+  const [activeIndex, setActiveIndex] = React36.useState(0);
+  const [indexPool, setIndexPool] = React36.useState([]);
+  const cardRefs = React36.useRef([]);
+  const getIndexes = React36.useMemo(() => {
     let nextIndex = activeIndex + 1;
     let previousIndex = activeIndex - 1;
     if (activeIndex === 0) previousIndex = items.length - 1;
     if (activeIndex === items.length - 1) nextIndex = 0;
     return { previousIndex, nextIndex };
   }, [activeIndex, items.length]);
-  React34.useEffect(() => {
+  React36.useEffect(() => {
     const { nextIndex, previousIndex } = getIndexes;
     let indexes = [previousIndex, activeIndex, nextIndex];
     if (activeIndex !== 0 && activeIndex !== items.length - 1) {
@@ -5043,8 +5051,8 @@ function writeDismissed(key) {
   }
 }
 function useTargetBbox(ref) {
-  const [bbox, setBbox] = React34.useState(null);
-  React34.useLayoutEffect(() => {
+  const [bbox, setBbox] = React36.useState(null);
+  React36.useLayoutEffect(() => {
     const el = ref?.current;
     if (!el) {
       setBbox(null);
@@ -5074,7 +5082,7 @@ function tooltipStyleFor(bbox, placement) {
   return { left: bbox.left + bbox.width / 2, top: bbox.top - TOOLTIP_GAP, transform: "translate(-50%, -100%)", width: TOOLTIP_WIDTH };
 }
 function useFocusTrap(containerRef, active) {
-  React34.useEffect(() => {
+  React36.useEffect(() => {
     if (!active) return;
     const el = containerRef.current;
     if (!el) return;
@@ -5113,16 +5121,16 @@ function Wizard({
   onComplete,
   onSkip
 }) {
-  const tooltipRef = React34.useRef(null);
-  const tooltipTitleId = React34.useId();
-  const tooltipBodyId = React34.useId();
+  const tooltipRef = React36.useRef(null);
+  const tooltipTitleId = React36.useId();
+  const tooltipBodyId = React36.useId();
   const reduced = framerMotion.useReducedMotion();
-  const [open, setOpen] = React34.useState(() => steps.length > 0 && !readDismissed(storageKey));
-  const [activeIndex, setActiveIndex] = React34.useState(0);
+  const [open, setOpen] = React36.useState(() => steps.length > 0 && !readDismissed(storageKey));
+  const [activeIndex, setActiveIndex] = React36.useState(0);
   const step = steps[activeIndex];
   const bbox = useTargetBbox(step?.stepRef);
   useFocusTrap(tooltipRef, open);
-  React34.useEffect(() => {
+  React36.useEffect(() => {
     if (!open || !dismissible) return;
     const onKey = (e) => {
       if (e.key === "Escape") {
@@ -5133,12 +5141,12 @@ function Wizard({
     document.addEventListener("keydown", onKey);
     return () => document.removeEventListener("keydown", onKey);
   }, [open, dismissible]);
-  const handleSkip = React34.useCallback(() => {
+  const handleSkip = React36.useCallback(() => {
     writeDismissed(storageKey);
     setOpen(false);
     onSkip?.();
   }, [storageKey, onSkip]);
-  const handleComplete = React34.useCallback(() => {
+  const handleComplete = React36.useCallback(() => {
     writeDismissed(storageKey);
     setOpen(false);
     onComplete?.();
@@ -5281,7 +5289,7 @@ function Wizard({
   ] });
 }
 var SearchIcon = /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", className: "w-4 h-4", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("path", { fillRule: "evenodd", d: "M10.5 3.75a6.75 6.75 0 100 13.5 6.75 6.75 0 000-13.5zM2.25 10.5a8.25 8.25 0 1114.59 5.28l4.69 4.69a.75.75 0 11-1.06 1.06l-4.69-4.69A8.25 8.25 0 012.25 10.5z", clipRule: "evenodd" }) });
-var SearchInput = React34__default.default.forwardRef(function SearchInput2({ value, onChange, disabled, label, htmlFor, placeholder, name, inputStyle, style, layout = "vertical", size = "md", icon, helperText, className }, ref) {
+var SearchInput = React36__default.default.forwardRef(function SearchInput2({ value, onChange, disabled, label, htmlFor, placeholder, name, inputStyle, style, layout = "vertical", size = "md", icon, helperText, className }, ref) {
   return /* @__PURE__ */ jsxRuntime.jsx(Field, { className, label, htmlFor, layout, helperText, children: /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -5516,15 +5524,15 @@ function EditableCell({
   rowIndex,
   onCellEdit
 }) {
-  const [editing, setEditing] = React34.useState(false);
-  const editRef = React34.useRef(null);
+  const [editing, setEditing] = React36.useState(false);
+  const editRef = React36.useRef(null);
   const value = row[col.keyBind];
   const commit = (next) => {
     setEditing(false);
     onCellEdit?.({ row, key: col.keyBind, value: next, rowIndex });
   };
   const cancel = () => setEditing(false);
-  React34.useEffect(() => {
+  React36.useEffect(() => {
     if (!editing || !col.editor) return;
     const onMouseDown = (e) => {
       const target = e.target;
@@ -5583,7 +5591,7 @@ function TableBody({
   getRowKey,
   onCellEdit
 }) {
-  const [expanded, setExpanded] = React34.useState(() => /* @__PURE__ */ new Set());
+  const [expanded, setExpanded] = React36.useState(() => /* @__PURE__ */ new Set());
   const reduced = framerMotion.useReducedMotion();
   const toggleRow = (rowKey) => {
     setExpanded((prev) => {
@@ -5598,7 +5606,7 @@ function TableBody({
   return /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: rows.map((row, i) => {
     const rowKey = getRowKey(row, i);
     const isExpanded = expanded.has(rowKey);
-    return /* @__PURE__ */ jsxRuntime.jsxs(React34__default.default.Fragment, { children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(React36__default.default.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsxs(
         "tr",
         {
@@ -5710,13 +5718,13 @@ function Table({
   className = "",
   style
 }) {
-  const searchRef = React34.useRef(null);
-  const [searchTerm, setSearchTerm] = React34.useState("");
-  const [perPage, setPerPage] = React34.useState(
+  const searchRef = React36.useRef(null);
+  const [searchTerm, setSearchTerm] = React36.useState("");
+  const [perPage, setPerPage] = React36.useState(
     typeof pagination.perPage === "number" ? pagination.perPage : 15
   );
-  const [activePage, setActivePage] = React34.useState(0);
-  const [sortState, setSortState] = React34.useState(defaultSort);
+  const [activePage, setActivePage] = React36.useState(0);
+  const [sortState, setSortState] = React36.useState(defaultSort);
   const isServerSide = !!(pagination.enabled && pagination.serverSide);
   const handleSort = (col) => {
     const key = col.keyBind;
@@ -5728,8 +5736,8 @@ function Table({
     onSortChange?.(next);
   };
   const debounceMs = search?.debounceMs ?? 0;
-  const [debouncedTerm, setDebouncedTerm] = React34.useState("");
-  React34.useEffect(() => {
+  const [debouncedTerm, setDebouncedTerm] = React36.useState("");
+  React36.useEffect(() => {
     if (debounceMs <= 0) {
       setDebouncedTerm(searchTerm);
       return;
@@ -5738,7 +5746,7 @@ function Table({
     return () => clearTimeout(t);
   }, [searchTerm, debounceMs]);
   const term = debounceMs > 0 ? debouncedTerm : searchTerm;
-  const filteredRows = React34.useMemo(() => {
+  const filteredRows = React36.useMemo(() => {
     if (isServerSide || !term) return rows;
     if (search?.predicate) return rows.filter((row) => search.predicate(row, term));
     const cs = !!search?.caseSensitive;
@@ -5752,7 +5760,7 @@ function Table({
     };
     return rows.filter((row) => keys ? keys.some((k) => test(row[k])) : Object.values(row).some(test));
   }, [rows, term, isServerSide, search?.predicate, search?.caseSensitive, search?.matchMode, search?.keys]);
-  const sortedRows = React34.useMemo(() => {
+  const sortedRows = React36.useMemo(() => {
     if (isServerSide || !sortState) return filteredRows;
     const col = columns.find((c) => c.keyBind === sortState.key);
     const accessor = col?.sortAccessor ?? ((r) => r[sortState.key]);
@@ -5760,29 +5768,29 @@ function Table({
     if (sortState.direction === "desc") out.reverse();
     return out;
   }, [filteredRows, sortState, isServerSide, columns]);
-  const datasets = React34.useMemo(() => {
+  const datasets = React36.useMemo(() => {
     if (isServerSide) return [rows];
     return createDatasets(sortedRows, pagination.enabled ? perPage : null);
   }, [sortedRows, perPage, pagination.enabled, isServerSide, rows]);
-  const MAX_PAGE = React34.useMemo(() => {
+  const MAX_PAGE = React36.useMemo(() => {
     if (isServerSide && typeof pagination.maxPage === "number") return Math.max(0, pagination.maxPage);
     if (isServerSide && typeof pagination.totalCount === "number")
       return Math.max(0, Math.ceil(pagination.totalCount / perPage) - 1);
     return datasets.length ? datasets.length - 1 : 0;
   }, [isServerSide, pagination.maxPage, pagination.totalCount, perPage, datasets.length]);
-  const currentPageRows = React34.useMemo(() => {
+  const currentPageRows = React36.useMemo(() => {
     if (isServerSide) return rows;
     return datasets[activePage] ?? [];
   }, [isServerSide, rows, datasets, activePage]);
-  React34.useEffect(() => {
+  React36.useEffect(() => {
     if (pagination.enabled && !isServerSide && typeof pagination.perPage === "number") {
       setPerPage(pagination.perPage);
     }
   }, [pagination.enabled, pagination.perPage, isServerSide]);
-  React34.useEffect(() => {
+  React36.useEffect(() => {
     if (isServerSide && typeof pagination.perPage === "number") setPerPage(pagination.perPage);
   }, [isServerSide, pagination.perPage]);
-  React34.useEffect(() => {
+  React36.useEffect(() => {
     if (isServerSide && typeof pagination.page === "number" && pagination.page >= 1)
       setActivePage(pagination.page - 1);
   }, [isServerSide, pagination.page]);
@@ -5871,7 +5879,7 @@ function TableSkeletonBody({
     i
   )) });
 }
-var useIsoLayoutEffect = typeof window !== "undefined" ? React34.useLayoutEffect : React34.useEffect;
+var useIsoLayoutEffect = typeof window !== "undefined" ? React36.useLayoutEffect : React36.useEffect;
 function VirtualList({
   items,
   rowHeight,
@@ -5888,10 +5896,10 @@ function VirtualList({
   className = "",
   style
 }) {
-  const scrollRef = React34.useRef(null);
-  const [scrollTop, setScrollTop] = React34.useState(0);
-  const [viewport, setViewport] = React34.useState(typeof height === "number" ? height : 400);
-  const [term, setTerm] = React34.useState("");
+  const scrollRef = React36.useRef(null);
+  const [scrollTop, setScrollTop] = React36.useState(0);
+  const [viewport, setViewport] = React36.useState(typeof height === "number" ? height : 400);
+  const [term, setTerm] = React36.useState("");
   useIsoLayoutEffect(() => {
     const el = scrollRef.current;
     if (!el) return;
@@ -5902,7 +5910,7 @@ function VirtualList({
     ro.observe(el);
     return () => ro.disconnect();
   }, []);
-  const filtered = React34.useMemo(() => {
+  const filtered = React36.useMemo(() => {
     if (!searchable || !term) return items;
     if (filter) return items.filter((it) => filter(it, term));
     const needle = term.toLowerCase();
@@ -6043,35 +6051,37 @@ function PdfViewer({
   onLoad,
   onError,
   onPageChange,
+  height = 600,
+  width,
   className = "",
   style
 }) {
-  const [pdfjs, setPdfjs] = React34.useState(null);
-  const [doc, setDoc] = React34.useState(null);
-  const [numPages, setNumPages] = React34.useState(0);
-  const [baseSize, setBaseSize] = React34.useState(null);
-  const [sizes, setSizes] = React34.useState([]);
-  const [status, setStatus] = React34.useState("loading");
-  const [error, setError] = React34.useState(null);
-  const [reloadKey, setReloadKey] = React34.useState(0);
-  const scrollRef = React34.useRef(null);
-  const [scrollTop, setScrollTop] = React34.useState(0);
-  const [viewport, setViewport] = React34.useState({ w: 0, h: 0 });
-  const [zoomMode, setZoomMode] = React34.useState(zoom);
-  const [page, setPage] = React34.useState(initialPage);
-  const [showSearch, setShowSearch] = React34.useState(false);
-  const [query, setQuery] = React34.useState("");
-  const [matchPages, setMatchPages] = React34.useState(null);
-  const [matchIdx, setMatchIdx] = React34.useState(0);
-  const [searching, setSearching] = React34.useState(false);
-  const [pageDraft, setPageDraft] = React34.useState("");
-  const pageEditing = React34.useRef(false);
-  const pageText = React34.useRef(/* @__PURE__ */ new Map());
-  const searchSeq = React34.useRef(0);
-  const searchTimer = React34.useRef(null);
-  const measured = React34.useRef(/* @__PURE__ */ new Set());
+  const [pdfjs, setPdfjs] = React36.useState(null);
+  const [doc, setDoc] = React36.useState(null);
+  const [numPages, setNumPages] = React36.useState(0);
+  const [baseSize, setBaseSize] = React36.useState(null);
+  const [sizes, setSizes] = React36.useState([]);
+  const [status, setStatus] = React36.useState("loading");
+  const [error, setError] = React36.useState(null);
+  const [reloadKey, setReloadKey] = React36.useState(0);
+  const scrollRef = React36.useRef(null);
+  const [scrollTop, setScrollTop] = React36.useState(0);
+  const [viewport, setViewport] = React36.useState({ w: 0, h: 0 });
+  const [zoomMode, setZoomMode] = React36.useState(zoom);
+  const [page, setPage] = React36.useState(initialPage);
+  const [showSearch, setShowSearch] = React36.useState(false);
+  const [query, setQuery] = React36.useState("");
+  const [matchPages, setMatchPages] = React36.useState(null);
+  const [matchIdx, setMatchIdx] = React36.useState(0);
+  const [searching, setSearching] = React36.useState(false);
+  const [pageDraft, setPageDraft] = React36.useState("");
+  const pageEditing = React36.useRef(false);
+  const pageText = React36.useRef(/* @__PURE__ */ new Map());
+  const searchSeq = React36.useRef(0);
+  const searchTimer = React36.useRef(null);
+  const measured = React36.useRef(/* @__PURE__ */ new Set());
   const tb = toolbar === true ? { zoom: true, pager: true, download: true, print: true, search: true } : toolbar || {};
-  React34.useEffect(() => {
+  React36.useEffect(() => {
     let cancelled = false;
     let task;
     setStatus("loading");
@@ -6115,10 +6125,10 @@ function PdfViewer({
       task?.destroy?.();
     };
   }, [source, remote, reloadKey, workerSrc]);
-  React34.useEffect(() => () => {
+  React36.useEffect(() => () => {
     doc?.destroy?.();
   }, [doc]);
-  React34.useEffect(() => {
+  React36.useEffect(() => {
     const el = scrollRef.current;
     if (!el || typeof ResizeObserver === "undefined") return;
     const measure = () => setViewport({ w: el.clientWidth, h: el.clientHeight });
@@ -6127,7 +6137,7 @@ function PdfViewer({
     ro.observe(el);
     return () => ro.disconnect();
   }, [status]);
-  const handleMeasure = React34.useCallback((p, size) => {
+  const handleMeasure = React36.useCallback((p, size) => {
     setSizes((prev) => {
       const cur = prev[p - 1];
       if (cur && Math.abs(cur.width - size.width) < 0.5 && Math.abs(cur.height - size.height) < 0.5) return prev;
@@ -6136,7 +6146,7 @@ function PdfViewer({
       return next;
     });
   }, []);
-  const scale = React34.useMemo(() => {
+  const scale = React36.useMemo(() => {
     if (!baseSize) return 1;
     if (typeof zoomMode === "number") return zoomMode;
     const avail = Math.max(1, (viewport.w || baseSize.width) - 32);
@@ -6147,7 +6157,7 @@ function PdfViewer({
     }
     return 1;
   }, [zoomMode, baseSize, viewport]);
-  const { offsets, total } = React34.useMemo(() => {
+  const { offsets, total } = React36.useMemo(() => {
     const offs = new Array(sizes.length);
     let acc = 0;
     for (let i = 0; i < sizes.length; i++) {
@@ -6161,13 +6171,13 @@ function PdfViewer({
   const startIdx = hasLayout ? Math.max(0, pageIndexAt(offsets, scrollTop) - overscan) : 0;
   const endIdx = hasLayout ? Math.min(numPages, pageIndexAt(offsets, scrollTop + viewport.h) + 1 + overscan) : 0;
   const visiblePages = Array.from({ length: Math.max(0, endIdx - startIdx) }, (_, i) => startIdx + i + 1);
-  const scrollToPage = React34.useCallback((p) => {
+  const scrollToPage = React36.useCallback((p) => {
     const el = scrollRef.current;
     if (!el || !offsets.length) return;
     const clamped = Math.min(offsets.length, Math.max(1, p));
     el.scrollTo({ top: offsets[clamped - 1] ?? 0, behavior: "smooth" });
   }, [offsets]);
-  React34.useEffect(() => {
+  React36.useEffect(() => {
     if (!hasLayout) return;
     const cur = pageIndexAt(offsets, scrollTop + viewport.h / 2) + 1;
     if (cur !== page) {
@@ -6175,10 +6185,10 @@ function PdfViewer({
       onPageChange?.(cur);
     }
   }, [scrollTop, offsets, viewport.h, numPages]);
-  React34.useEffect(() => {
+  React36.useEffect(() => {
     if (status === "ready" && initialPage > 1) scrollToPage(initialPage);
   }, [status, initialPage]);
-  const runSearch = React34.useCallback(async (q) => {
+  const runSearch = React36.useCallback(async (q) => {
     const needle = q.trim().toLowerCase();
     if (!doc || !needle) {
       setMatchPages(null);
@@ -6207,7 +6217,7 @@ function PdfViewer({
     setSearching(false);
     if (hits.length) scrollToPage(hits[0]);
   }, [doc, numPages, scrollToPage]);
-  const onQueryChange = React34.useCallback((v) => {
+  const onQueryChange = React36.useCallback((v) => {
     setQuery(v);
     if (searchTimer.current) clearTimeout(searchTimer.current);
     if (!v.trim()) {
@@ -6219,7 +6229,7 @@ function PdfViewer({
     }
     searchTimer.current = setTimeout(() => runSearch(v), SEARCH_DEBOUNCE);
   }, [runSearch]);
-  React34.useEffect(() => () => {
+  React36.useEffect(() => () => {
     if (searchTimer.current) clearTimeout(searchTimer.current);
   }, []);
   const gotoMatch = (dir) => {
@@ -6228,18 +6238,18 @@ function PdfViewer({
     setMatchIdx(next);
     scrollToPage(matchPages[next]);
   };
-  const getBytes = React34.useCallback(async () => {
+  const getBytes = React36.useCallback(async () => {
     if (doc?.getData) return doc.getData();
     if (source instanceof Uint8Array) return source;
     if (source instanceof ArrayBuffer) return new Uint8Array(source);
     if (typeof Blob !== "undefined" && source instanceof Blob) return new Uint8Array(await source.arrayBuffer());
     throw new Error("No bytes available");
   }, [doc, source]);
-  const download = React34.useCallback(async () => {
+  const download = React36.useCallback(async () => {
     const bytes = await getBytes();
     downloadBlob(new Blob([bytes], { type: "application/pdf" }), sourceName(source) || "document.pdf");
   }, [getBytes, source]);
-  const print = React34.useCallback(async () => {
+  const print = React36.useCallback(async () => {
     const bytes = await getBytes();
     const blob = new Blob([bytes], { type: "application/pdf" });
     const url = URL.createObjectURL(blob);
@@ -6277,7 +6287,7 @@ function PdfViewer({
     ] });
   }
   const ready = status === "ready";
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx("flex flex-col overflow-hidden rounded-lg border border-border bg-surface-raised", className), style: { height: 600, ...style }, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx("flex flex-col overflow-hidden rounded-lg border border-border bg-surface-raised", className), style: { height, width, ...style }, children: [
     toolbar !== false && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-shrink-0 flex-col border-b border-border bg-surface", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 px-2 py-1.5", children: [
         tb.pager && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
@@ -6397,9 +6407,9 @@ function PdfPage({
   textLayer,
   onMeasure
 }) {
-  const canvasRef = React34.useRef(null);
-  const textRef = React34.useRef(null);
-  React34.useEffect(() => {
+  const canvasRef = React36.useRef(null);
+  const textRef = React36.useRef(null);
+  React36.useEffect(() => {
     let cancelled = false;
     let renderTask;
     (async () => {
@@ -6458,6 +6468,15 @@ var FitPageIcon = () => /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 2
 ] });
 var DEFAULT_COL_WIDTH = 140;
 var GUTTER = 52;
+var END_PAD = 12;
+function compareValues2(a, b) {
+  if (a == null && b == null) return 0;
+  if (a == null) return 1;
+  if (b == null) return -1;
+  if (typeof a === "number" && typeof b === "number") return a - b;
+  if (typeof a === "boolean" && typeof b === "boolean") return a === b ? 0 : a ? 1 : -1;
+  return String(a).localeCompare(String(b), void 0, { numeric: true, sensitivity: "base" });
+}
 function resolveWidth(w) {
   if (typeof w === "number" && Number.isFinite(w)) return w;
   if (typeof w === "string") {
@@ -6476,22 +6495,30 @@ function DataGrid({
   rowHeight = 34,
   headerHeight = 38,
   height = 480,
+  width,
   editable = false,
+  sortable = false,
+  sort: sortProp,
+  onSortChange,
   virtualize = true,
   overscan = 4,
   rowNumbers = true,
+  trailingRows = 0,
   onCellEdit,
   className = "",
   style,
   emptyState = "No data"
 }) {
-  const scrollRef = React34.useRef(null);
-  const [scroll, setScroll] = React34.useState({ top: 0, left: 0 });
-  const [viewport, setViewport] = React34.useState({ w: 0, h: 0 });
-  const [editing, setEditing] = React34.useState(null);
-  const [draft, setDraft] = React34.useState("");
+  const scrollRef = React36.useRef(null);
+  const [scroll, setScroll] = React36.useState({ top: 0, left: 0 });
+  const [viewport, setViewport] = React36.useState({ w: 0, h: 0 });
+  const [editing, setEditing] = React36.useState(null);
+  const [draft, setDraft] = React36.useState("");
+  const [internalSort, setInternalSort] = React36.useState(null);
+  const sort = sortProp !== void 0 ? sortProp : internalSort;
   const gutter = rowNumbers ? GUTTER : 0;
-  const { widths, offsets, totalWidth } = React34.useMemo(() => {
+  const colSortable = (c) => c.sortable ?? sortable;
+  const { widths, offsets, totalWidth } = React36.useMemo(() => {
     const widths2 = columns.map((c) => resolveWidth(c.width));
     const offsets2 = [];
     let acc = 0;
@@ -6501,8 +6528,22 @@ function DataGrid({
     }
     return { widths: widths2, offsets: offsets2, totalWidth: acc };
   }, [columns]);
-  const totalHeight = rows.length * rowHeight;
-  React34.useEffect(() => {
+  const order = React36.useMemo(() => {
+    const idx = rows.map((_, i) => i);
+    if (!sort) return idx;
+    const dir = sort.dir === "asc" ? 1 : -1;
+    return idx.sort((ia, ib) => dir * compareValues2(rows[ia]?.[sort.key] ?? null, rows[ib]?.[sort.key] ?? null));
+  }, [rows, sort]);
+  const toggleSort = (key) => {
+    const nextDir = sort?.key !== key ? "asc" : sort.dir === "asc" ? "desc" : null;
+    const next = nextDir ? { key, dir: nextDir } : null;
+    if (sortProp === void 0) setInternalSort(next);
+    onSortChange?.(next);
+  };
+  const displayRowCount = rows.length + Math.max(0, trailingRows);
+  const totalHeight = displayRowCount * rowHeight;
+  const rowIndexForDisp = (disp) => disp < rows.length ? order[disp] : disp;
+  React36.useEffect(() => {
     const el = scrollRef.current;
     if (!el || typeof ResizeObserver === "undefined") return;
     const measure = () => setViewport({ w: el.clientWidth, h: el.clientHeight });
@@ -6513,7 +6554,7 @@ function DataGrid({
   }, []);
   const bodyH = (viewport.h || (typeof height === "number" ? height : 480)) - headerHeight;
   const rowStart = virtualize ? Math.max(0, Math.floor(scroll.top / rowHeight) - overscan) : 0;
-  const rowEnd = virtualize ? Math.min(rows.length, Math.ceil((scroll.top + bodyH) / rowHeight) + overscan) : rows.length;
+  const rowEnd = virtualize ? Math.min(displayRowCount, Math.ceil((scroll.top + bodyH) / rowHeight) + overscan) : displayRowCount;
   let colStart = 0;
   let colEnd = columns.length;
   if (virtualize && viewport.w) {
@@ -6528,17 +6569,18 @@ function DataGrid({
   }
   const visibleRows = Array.from({ length: Math.max(0, rowEnd - rowStart) }, (_, i) => rowStart + i);
   const visibleCols = Array.from({ length: Math.max(0, colEnd - colStart) }, (_, i) => colStart + i);
-  const commit = React34.useCallback(() => {
+  const commit = React36.useCallback(() => {
     if (!editing) return;
     const col = columns[editing.col];
-    onCellEdit?.({ row: editing.row, column: col.key, value: draft });
+    const ri = editing.disp < rows.length ? order[editing.disp] : editing.disp;
+    onCellEdit?.({ row: ri, column: col.key, value: draft });
     setEditing(null);
-  }, [editing, columns, draft, onCellEdit]);
-  const startEdit = (row, col) => {
+  }, [editing, columns, draft, onCellEdit, order, rows.length]);
+  const startEdit = (disp, col) => {
     const c = columns[col];
     if (!(c.editable ?? editable)) return;
-    setDraft(displayValue(rows[row]?.[c.key] ?? ""));
-    setEditing({ row, col });
+    setDraft(displayValue(rows[rowIndexForDisp(disp)]?.[c.key] ?? ""));
+    setEditing({ disp, col });
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
@@ -6546,12 +6588,12 @@ function DataGrid({
       ref: scrollRef,
       onScroll: (e) => setScroll({ top: e.currentTarget.scrollTop, left: e.currentTarget.scrollLeft }),
       className: cx("relative overflow-auto rounded-lg border border-border bg-surface-raised text-sm", className),
-      style: { height, ...style },
+      style: { height, width, ...style },
       role: "grid",
       "aria-rowcount": rows.length,
       "aria-colcount": columns.length,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { position: "relative", width: gutter + totalWidth, height: headerHeight + totalHeight }, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { position: "relative", width: gutter + totalWidth + END_PAD, height: headerHeight + totalHeight + END_PAD }, children: [
           rowNumbers && /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
@@ -6561,11 +6603,18 @@ function DataGrid({
           ),
           visibleCols.map((ci) => {
             const c = columns[ci];
-            return /* @__PURE__ */ jsxRuntime.jsx(
+            const sortDir = sort?.key === c.key ? sort.dir : null;
+            const canSort = colSortable(c);
+            return /* @__PURE__ */ jsxRuntime.jsxs(
               "div",
               {
                 role: "columnheader",
-                className: "flex items-center border-b border-r border-border bg-surface px-3 font-medium text-foreground-secondary",
+                "aria-sort": sortDir ? sortDir === "asc" ? "ascending" : "descending" : void 0,
+                onClick: canSort ? () => toggleSort(c.key) : void 0,
+                className: cx(
+                  "flex items-center gap-1 border-b border-r border-border bg-surface px-3 font-medium text-foreground-secondary",
+                  canSort && "cursor-pointer select-none hover:text-foreground"
+                ),
                 style: {
                   position: "absolute",
                   top: scroll.top,
@@ -6575,38 +6624,42 @@ function DataGrid({
                   zIndex: 2,
                   justifyContent: c.align === "right" ? "flex-end" : c.align === "center" ? "center" : "flex-start"
                 },
-                children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: c.label ?? c.key })
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: c.label ?? c.key }),
+                  canSort && /* @__PURE__ */ jsxRuntime.jsx(SortCaret, { dir: sortDir })
+                ]
               },
               `h-${c.key}`
             );
           }),
-          rowNumbers && visibleRows.map((ri) => /* @__PURE__ */ jsxRuntime.jsx(
+          rowNumbers && visibleRows.map((disp) => /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
               className: "flex items-center justify-center border-b border-r border-border bg-surface text-xs tabular-nums text-foreground-muted",
-              style: { position: "absolute", left: scroll.left, top: headerHeight + ri * rowHeight, width: gutter, height: rowHeight, zIndex: 1 },
-              children: ri + 1
+              style: { position: "absolute", left: scroll.left, top: headerHeight + disp * rowHeight, width: gutter, height: rowHeight, zIndex: 1 },
+              children: disp + 1
             },
-            `g-${ri}`
+            `g-${disp}`
           )),
-          visibleRows.map(
-            (ri) => visibleCols.map((ci) => {
+          visibleRows.map((disp) => {
+            const ri = rowIndexForDisp(disp);
+            return visibleCols.map((ci) => {
               const c = columns[ci];
-              const isEditing = editing?.row === ri && editing?.col === ci;
+              const isEditing = editing?.disp === disp && editing?.col === ci;
               const canEdit = c.editable ?? editable;
               return /* @__PURE__ */ jsxRuntime.jsx(
                 "div",
                 {
                   role: "gridcell",
-                  onDoubleClick: () => startEdit(ri, ci),
+                  onDoubleClick: () => startEdit(disp, ci),
                   className: cx(
                     "flex items-center border-b border-r border-border px-3",
-                    ri % 2 ? "bg-surface-raised" : "bg-surface",
+                    disp % 2 ? "bg-surface-raised" : "bg-surface",
                     canEdit && "cursor-text"
                   ),
                   style: {
                     position: "absolute",
-                    top: headerHeight + ri * rowHeight,
+                    top: headerHeight + disp * rowHeight,
                     left: gutter + offsets[ci],
                     width: widths[ci],
                     height: rowHeight,
@@ -6627,16 +6680,22 @@ function DataGrid({
                     }
                   ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-foreground", children: displayValue(rows[ri]?.[c.key] ?? "") })
                 },
-                `${ri}-${c.key}`
+                `${disp}-${c.key}`
               );
-            })
-          )
+            });
+          })
         ] }),
-        rows.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 flex items-center justify-center text-foreground-muted", style: { top: headerHeight }, children: emptyState })
+        displayRowCount === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 flex items-center justify-center text-foreground-muted", style: { top: headerHeight }, children: emptyState })
       ]
     }
   );
 }
+function SortCaret({ dir }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 16 16", className: "h-3 w-3 flex-shrink-0", fill: "none", stroke: "currentColor", strokeWidth: 1.75, "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 6.5 8 3.5l3 3", className: dir === "asc" ? "text-accent" : "text-foreground-muted opacity-50" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 9.5 8 12.5l3-3", className: dir === "desc" ? "text-accent" : "text-foreground-muted opacity-50" })
+  ] });
+}
 function toColumns(cols) {
   return cols.map((c) => typeof c === "string" ? { key: c, label: c } : { ...c, label: c.label ?? c.key });
 }
@@ -6644,6 +6703,18 @@ function cellValue(v) {
   if (v != null && typeof v === "object" && "value" in v) return v.value;
   return v;
 }
+function columnLetter(i) {
+  let s = "";
+  let n = i;
+  do {
+    s = String.fromCharCode(65 + n % 26) + s;
+    n = Math.floor(n / 26) - 1;
+  } while (n >= 0);
+  return s;
+}
+function blankSheet(name, cols = 8) {
+  return { name, columns: Array.from({ length: cols }, (_, i) => ({ key: columnLetter(i), label: columnLetter(i) })), rows: [] };
+}
 function toPlainRows(sheet, columns) {
   return sheet.rows.map((row) => {
     const out = {};
@@ -6675,15 +6746,21 @@ function Spreadsheet({
   export: exportFormats = ["xlsx", "csv", "pdf"],
   fileName,
   virtualize = true,
+  sortable = true,
+  emptyRows = 50,
+  allowAddSheet,
+  height = 480,
+  width,
   className = "",
   style
 }) {
-  const [sheets, setSheets] = React34.useState(Array.isArray(source) ? source : null);
-  const [active, setActive] = React34.useState(0);
-  const [status, setStatus] = React34.useState(Array.isArray(source) ? "ready" : "loading");
-  const [error, setError] = React34.useState(null);
-  const [reloadKey, setReloadKey] = React34.useState(0);
-  React34.useEffect(() => {
+  const canAddSheet = allowAddSheet ?? editable;
+  const [sheets, setSheets] = React36.useState(Array.isArray(source) ? source : null);
+  const [active, setActive] = React36.useState(0);
+  const [status, setStatus] = React36.useState(Array.isArray(source) ? "ready" : "loading");
+  const [error, setError] = React36.useState(null);
+  const [reloadKey, setReloadKey] = React36.useState(0);
+  React36.useEffect(() => {
     if (Array.isArray(source)) {
       setSheets(source);
       setStatus("ready");
@@ -6729,14 +6806,15 @@ function Spreadsheet({
     };
   }, [source, remote, reloadKey]);
   const sheet = sheets?.[active];
-  const columns = React34.useMemo(() => sheet ? toColumns(sheet.columns) : [], [sheet]);
-  const plainRows = React34.useMemo(() => sheet ? toPlainRows(sheet, columns) : [], [sheet, columns]);
-  const handleCellEdit = React34.useCallback(({ row, column, value }) => {
+  const columns = React36.useMemo(() => sheet ? toColumns(sheet.columns) : [], [sheet]);
+  const plainRows = React36.useMemo(() => sheet ? toPlainRows(sheet, columns) : [], [sheet, columns]);
+  const handleCellEdit = React36.useCallback(({ row, column, value }) => {
     let coerced = value;
     setSheets((prev) => {
       if (!prev) return prev;
       const next = prev.map((s, i) => i === active ? { ...s, rows: s.rows.map((r) => ({ ...r })) } : s);
       const target = next[active];
+      while (target.rows.length <= row) target.rows.push({});
       const existing = target.rows[row]?.[column];
       const prevValue = cellValue(existing);
       coerced = coerceToCellType(prevValue, value);
@@ -6750,17 +6828,29 @@ function Spreadsheet({
     });
     onCellEdit?.({ sheet: sheets?.[active]?.name ?? "", row, column, value: coerced });
   }, [active, onCellEdit, onChange, sheets]);
-  const baseName = React34.useMemo(
+  const addSheet = React36.useCallback(() => {
+    setSheets((prev) => {
+      const list = prev ?? [];
+      const used = new Set(list.map((s) => s.name));
+      let n = list.length + 1;
+      while (used.has(`Sheet ${n}`)) n++;
+      const next = [...list, blankSheet(`Sheet ${n}`)];
+      setActive(next.length - 1);
+      onChange?.(next);
+      return next;
+    });
+  }, [onChange]);
+  const baseName = React36.useMemo(
     () => (fileName || (typeof source === "object" && "name" in source ? sourceName(source) : null) || "spreadsheet").replace(/\.[^.]+$/, ""),
     [fileName, source]
   );
-  const sheetAoa = React34.useCallback((s) => {
+  const sheetAoa = React36.useCallback((s) => {
     const cols = toColumns(s.columns);
     const header = cols.map((c) => typeof c.label === "string" ? c.label : c.key);
     const body = s.rows.map((r) => cols.map((c) => cellValue(r[c.key])));
     return [header, ...body];
   }, []);
-  const exportXlsx = React34.useCallback(async () => {
+  const exportXlsx = React36.useCallback(async () => {
     if (!sheets) return;
     const XLSX = await loadXlsx();
     const wb = XLSX.utils.book_new();
@@ -6771,7 +6861,7 @@ function Spreadsheet({
     const out = XLSX.write(wb, { bookType: "xlsx", type: "array" });
     downloadBlob(new Blob([out], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" }), `${baseName}.xlsx`);
   }, [sheets, sheetAoa, baseName]);
-  const exportCsv = React34.useCallback(() => {
+  const exportCsv = React36.useCallback(() => {
     if (!sheet) return;
     const aoa = sheetAoa(sheet);
     const esc = (v) => {
@@ -6781,7 +6871,7 @@ function Spreadsheet({
     const csv = aoa.map((row) => row.map(esc).join(",")).join("\r\n");
     downloadBlob(new Blob([`\uFEFF${csv}`], { type: "text/csv;charset=utf-8" }), `${baseName}.csv`);
   }, [sheet, sheetAoa, baseName]);
-  const exportPdf = React34.useCallback(async () => {
+  const exportPdf = React36.useCallback(async () => {
     if (!sheet) return;
     const { jsPDF } = await loadJspdf();
     const doc = new jsPDF({ orientation: "landscape", unit: "pt", format: "a4" });
@@ -6822,16 +6912,16 @@ function Spreadsheet({
     else void exportPdf();
   };
   if (status === "error") {
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx("flex flex-col items-center justify-center gap-3 rounded-lg border border-border bg-surface p-8 text-center", className), style, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx("flex flex-col items-center justify-center gap-3 rounded-lg border border-border bg-surface p-8 text-center", className), style: { height, width, ...style }, children: [
       /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-status-error", children: "Couldn\u2019t load the spreadsheet" }),
       error?.message && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "max-w-md text-xs text-foreground-muted", children: error.message }),
       /* @__PURE__ */ jsxRuntime.jsx(Button_default, { content: "Retry", size: "sm", variant: "outline", onClick: () => setReloadKey((k) => k + 1) })
     ] });
   }
   if (status === "loading" || !sheets) {
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx("rounded-lg border border-border bg-surface-raised p-4", className), style, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx("overflow-hidden rounded-lg border border-border bg-surface-raised p-4", className), style: { height, width, ...style }, children: [
       /* @__PURE__ */ jsxRuntime.jsx(SkeletonBox, { height: 32, className: "mb-3 rounded" }),
-      /* @__PURE__ */ jsxRuntime.jsx(SkeletonBox, { height: 360, className: "rounded" })
+      /* @__PURE__ */ jsxRuntime.jsx(SkeletonBox, { height: "calc(100% - 44px)", className: "rounded" })
     ] });
   }
   const formats = exportFormats || [];
@@ -6840,25 +6930,10 @@ function Spreadsheet({
     csv: "CSV \u2014 this sheet (.csv)",
     pdf: "PDF table (.pdf)"
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx("flex flex-col overflow-hidden rounded-lg border border-border bg-surface-raised", className), style, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-shrink-0 items-center gap-2 border-b border-border bg-surface px-2 py-1.5", children: [
-      sheets.length > 1 ? /* @__PURE__ */ jsxRuntime.jsx("div", { role: "tablist", "aria-label": "Sheets", className: "flex min-w-0 flex-1 items-center gap-0.5 overflow-x-auto", children: sheets.map((s, i) => /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          role: "tab",
-          type: "button",
-          "aria-selected": i === active,
-          onClick: () => setActive(i),
-          className: cx(
-            "flex-shrink-0 rounded-md px-3 py-1 text-sm font-medium transition-colors",
-            "focus:outline-none focus-visible:ring-2 focus-visible:ring-accent",
-            i === active ? "bg-accent text-accent-fg shadow-sm" : "text-foreground-secondary hover:bg-surface-raised hover:text-foreground"
-          ),
-          children: s.name || `Sheet ${i + 1}`
-        },
-        `${s.name}-${i}`
-      )) }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 truncate px-1 text-sm font-medium text-foreground", children: sheet?.name || "Sheet 1" }),
-      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "hidden flex-shrink-0 px-1 text-xs tabular-nums text-foreground-muted sm:inline", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx("flex flex-col overflow-hidden rounded-lg border border-border bg-surface-raised", className), style: { height, width, ...style }, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-shrink-0 items-center gap-2 border-b border-border bg-surface px-3 py-1.5", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate text-sm font-semibold text-foreground", children: sheet?.name || "Sheet 1" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "hidden flex-shrink-0 text-xs tabular-nums text-foreground-muted sm:inline", children: [
         plainRows.length.toLocaleString(),
         " ",
         plainRows.length === 1 ? "row" : "rows",
@@ -6885,22 +6960,58 @@ function Spreadsheet({
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-0 flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(
       DataGrid,
       {
         columns,
         rows: plainRows,
         editable,
+        sortable,
         virtualize,
+        trailingRows: emptyRows,
         onCellEdit: handleCellEdit,
+        height: "100%",
         className: "!rounded-none !border-0"
-      }
-    )
+      },
+      active
+    ) }),
+    (sheets.length > 1 || canAddSheet) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-shrink-0 items-center gap-1 border-t border-border bg-surface px-2 py-1", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { role: "tablist", "aria-label": "Sheets", className: "flex min-w-0 flex-1 items-center gap-1 overflow-x-auto", children: sheets.map((s, i) => {
+        const activeTab = i === active;
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            role: "tab",
+            type: "button",
+            "aria-selected": activeTab,
+            onClick: () => setActive(i),
+            className: cx(
+              "flex-shrink-0 rounded-t-md border-t-2 px-3 py-1 text-xs transition-colors",
+              "focus:outline-none focus-visible:ring-2 focus-visible:ring-accent",
+              activeTab ? "border-t-accent bg-surface-raised font-semibold text-foreground shadow-sm" : "border-t-transparent font-medium text-foreground-secondary hover:bg-surface-raised hover:text-foreground"
+            ),
+            children: s.name || `Sheet ${i + 1}`
+          },
+          `${s.name}-${i}`
+        );
+      }) }),
+      canAddSheet && /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: addSheet,
+          title: "Add sheet",
+          "aria-label": "Add sheet",
+          className: "flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-md text-foreground-muted transition-colors hover:bg-surface-raised hover:text-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-accent",
+          children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "h-4 w-4", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", d: "M12 5v14M5 12h14" }) })
+        }
+      )
+    ] })
   ] });
 }
 var DownloadIcon2 = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "h-4 w-4", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 3v12m0 0 4-4m-4 4-4-4M4 21h16" }) });
 function ThemeSwitch({ checked, onChange, label = "Toggle dark mode", className = "" }) {
-  const id = React34.useId();
+  const id = React36.useId();
   return /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: id, className: `flex items-center gap-2 cursor-pointer select-none ${className}`.trim(), children: /* @__PURE__ */ jsxRuntime.jsx(
     SwitchPrimitive__namespace.Root,
     {
@@ -6998,8 +7109,8 @@ function FlyoutItems({ items }) {
   }) });
 }
 function CollapsedFlyout({ item, trigger }) {
-  const [open, setOpen] = React34.useState(false);
-  const closeTimer = React34__default.default.useRef(void 0);
+  const [open, setOpen] = React36.useState(false);
+  const closeTimer = React36__default.default.useRef(void 0);
   const openNow = () => {
     window.clearTimeout(closeTimer.current);
     setOpen(true);
@@ -7008,7 +7119,7 @@ function CollapsedFlyout({ item, trigger }) {
     window.clearTimeout(closeTimer.current);
     closeTimer.current = window.setTimeout(() => setOpen(false), 150);
   };
-  React34__default.default.useEffect(() => () => window.clearTimeout(closeTimer.current), []);
+  React36__default.default.useEffect(() => () => window.clearTimeout(closeTimer.current), []);
   return /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu2__namespace.Root, { open, onOpenChange: setOpen, modal: false, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       DropdownMenu2__namespace.Trigger,
@@ -7046,7 +7157,7 @@ function NavItem({
   depth = 0
 }) {
   const hasChildren = !!(item.items && item.items.length);
-  const [open, setOpen] = React34.useState(item.defaultOpen ?? (hasChildren && hasActiveDescendant(item)));
+  const [open, setOpen] = React36.useState(item.defaultOpen ?? (hasChildren && hasActiveDescendant(item)));
   const handleClick = () => {
     if (hasChildren && isExpanded) setOpen((o) => !o);
     item.onClick?.();
@@ -7184,7 +7295,7 @@ function Sidebar({
     }
   ) });
 }
-var MegaMenuContext = React34.createContext({ align: "start" });
+var MegaMenuContext = React36.createContext({ align: "start" });
 function MegaMenu({
   children,
   align = "start",
@@ -7215,7 +7326,7 @@ function MegaMenu({
 }
 var TOP_ITEM = "group/top inline-flex items-center gap-1.5 h-10 px-3 rounded-md text-sm font-medium select-none text-foreground-secondary hover:text-foreground hover:bg-surface-raised data-[state=open]:text-accent data-[active]:text-accent transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-accent";
 function MegaMenuItem({ label, icon, href, children, className = "" }) {
-  const { align } = React34.useContext(MegaMenuContext);
+  const { align } = React36.useContext(MegaMenuContext);
   const pos = align === "center" ? "left-1/2 -translate-x-1/2" : align === "end" ? "right-0" : "left-0";
   if (!children) {
     return /* @__PURE__ */ jsxRuntime.jsx(NavigationMenu__namespace.Item, { children: /* @__PURE__ */ jsxRuntime.jsxs(NavigationMenu__namespace.Link, { href, className: cx(TOP_ITEM, className), children: [
@@ -7300,8 +7411,8 @@ function MegaMenuLink({ href, icon, description, active, onClick, children, clas
 function MegaMenuFeatured({ children, className = "" }) {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx("min-w-0 rounded-lg bg-surface-raised border border-border p-4 flex flex-col", className), children });
 }
-var elementsOfType = (children, type) => React34__default.default.Children.toArray(children).filter(
-  (c) => React34__default.default.isValidElement(c) && c.type === type
+var elementsOfType = (children, type) => React36__default.default.Children.toArray(children).filter(
+  (c) => React36__default.default.isValidElement(c) && c.type === type
 );
 var MOBILE_CHEVRON = /* @__PURE__ */ jsxRuntime.jsx(
   "svg",
@@ -7338,9 +7449,9 @@ function MobileLinkRow({ link, onNavigate }) {
   );
 }
 function MobilePanel({ panel, onNavigate }) {
-  const nodes = React34__default.default.Children.toArray(panel.props.children);
+  const nodes = React36__default.default.Children.toArray(panel.props.children);
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-4 px-2 pb-3 pt-1", children: nodes.map((node, i) => {
-    if (!React34__default.default.isValidElement(node)) return null;
+    if (!React36__default.default.isValidElement(node)) return null;
     const el = node;
     if (el.type === MegaMenuSection) {
       const { title, children } = el.props;
@@ -7359,8 +7470,8 @@ function MegaMenuMobile({
   children,
   label
 }) {
-  const [open, setOpen] = React34.useState(false);
-  const [expanded, setExpanded] = React34.useState(null);
+  const [open, setOpen] = React36.useState(false);
+  const [expanded, setExpanded] = React36.useState(null);
   const items = elementsOfType(children, MegaMenuItem);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "md:hidden w-full", children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
@@ -7433,17 +7544,17 @@ function AppShell({
   children,
   className = ""
 }) {
-  const [expanded, setExpanded] = React34.useState(sidebarDefaultExpanded);
-  const [isMobile, setIsMobile] = React34.useState(false);
-  const [mobileOpen, setMobileOpen] = React34.useState(false);
-  React34.useEffect(() => {
+  const [expanded, setExpanded] = React36.useState(sidebarDefaultExpanded);
+  const [isMobile, setIsMobile] = React36.useState(false);
+  const [mobileOpen, setMobileOpen] = React36.useState(false);
+  React36.useEffect(() => {
     const mq = window.matchMedia("(max-width: 767px)");
     const update = (e) => setIsMobile(e.matches);
     update(mq);
     mq.addEventListener("change", update);
     return () => mq.removeEventListener("change", update);
   }, []);
-  React34.useEffect(() => {
+  React36.useEffect(() => {
     if (!isMobile) setMobileOpen(false);
   }, [isMobile]);
   const hasSidebar = sidebarSections.length > 0;
@@ -7570,7 +7681,7 @@ function SecureLayout({
   className = ""
 }) {
   const reduced = framerMotion.useReducedMotion();
-  const cbs = React34.useRef({ canAccess, onGranted, onDeny });
+  const cbs = React36.useRef({ canAccess, onGranted, onDeny });
   cbs.current = { canAccess, onGranted, onDeny };
   const rolesKey = JSON.stringify(roles);
   const requiredRolesKey = JSON.stringify(requiredRoles);
@@ -7585,10 +7696,10 @@ function SecureLayout({
     if (requiredPermissions?.length && !has(permissions, requiredPermissions, requireAllPermissions)) return false;
     return true;
   };
-  const [state, setState] = React34.useState(
+  const [state, setState] = React36.useState(
     () => !passesSync() ? "denied" : canAccess ? "checking" : "granted"
   );
-  React34.useEffect(() => {
+  React36.useEffect(() => {
     let cancelled = false;
     const { canAccess: check, onGranted: granted, onDeny: deny } = cbs.current;
     const finish = (ok) => {
@@ -7749,10 +7860,10 @@ function ThemeProvider({
   className = "",
   style
 }) {
-  const id = React34__default.default.useId().replace(/:/g, "");
+  const id = React36__default.default.useId().replace(/:/g, "");
   const scopeClass = `geo-th-${id}`;
-  const divRef = React34.useRef(null);
-  React34.useEffect(() => {
+  const divRef = React36.useRef(null);
+  React36.useEffect(() => {
     const el = divRef.current;
     if (!el) return;
     if (colorScheme === "auto") return;
@@ -7767,8 +7878,8 @@ function ThemeProvider({
     }
     el.classList.toggle("dark", colorScheme === "dark");
   }, [colorScheme]);
-  const lightVars = React34.useMemo(() => toCssVars(theme), [theme]);
-  const darkVarStr = React34.useMemo(() => {
+  const lightVars = React36.useMemo(() => toCssVars(theme), [theme]);
+  const darkVarStr = React36.useMemo(() => {
     if (!darkTheme) return "";
     const dvars = toCssVars(darkTheme);
     if (!Object.keys(dvars).length) return "";
@@ -7810,7 +7921,7 @@ function NumberInput({
   readOnly = false,
   precision
 }) {
-  const errorId = React34.useId();
+  const errorId = React36.useId();
   const hasError = errorMessage != null;
   const inferredPrecision = precision ?? (Number.isInteger(step) ? 0 : String(step).split(".")[1]?.length ?? 0);
   const round = (n) => {
@@ -7941,8 +8052,8 @@ function Password({
   showIcon,
   hideIcon
 }) {
-  const [visible, setVisible] = React34.useState(false);
-  const errorId = React34.useId();
+  const [visible, setVisible] = React36.useState(false);
+  const errorId = React36.useId();
   const hasError = errorMessage != null;
   return /* @__PURE__ */ jsxRuntime.jsx(
     Field,
@@ -8042,7 +8153,7 @@ function PasswordStrength({
   className = "",
   style
 }) {
-  const { score, label } = React34.useMemo(() => scorer(value), [scorer, value]);
+  const { score, label } = React36.useMemo(() => scorer(value), [scorer, value]);
   const showMatch = confirmValue != null && (value.length > 0 || confirmValue.length > 0);
   const matches = value.length > 0 && value === confirmValue;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx("flex flex-col gap-2", className), style, "aria-live": "polite", children: [
@@ -8101,8 +8212,8 @@ function RadioTile({
   errorMessage,
   className
 }) {
-  const groupId = React34.useId();
-  const errorId = React34.useId();
+  const groupId = React36.useId();
+  const errorId = React36.useId();
   const hasError = errorMessage != null;
   return /* @__PURE__ */ jsxRuntime.jsx(
     Field,
@@ -8177,7 +8288,7 @@ function Checkbox({
 }) {
   const isChecked = checked ?? value ?? false;
   const labelFirst = labelPosition === "left";
-  const errorId = React34.useId();
+  const errorId = React36.useId();
   const hasError = errorMessage != null;
   const box = /* @__PURE__ */ jsxRuntime.jsx(
     CheckboxPrimitive__namespace.Root,
@@ -8285,8 +8396,8 @@ function RadioGroup({
   className,
   errorMessage
 }) {
-  const errorId = React34.useId();
-  const groupId = React34.useId();
+  const errorId = React36.useId();
+  const groupId = React36.useId();
   const hasError = errorMessage != null;
   const labelFirst = labelPosition === "left";
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -8386,11 +8497,11 @@ function Switch({
   disabled,
   errorMessage
 }) {
-  const id = React34.useId();
-  const errorId = React34.useId();
+  const id = React36.useId();
+  const errorId = React36.useId();
   const hasError = errorMessage != null;
   const isControlled = checked !== void 0;
-  const [internal, setInternal] = React34.useState(defaultChecked);
+  const [internal, setInternal] = React36.useState(defaultChecked);
   const isOn = isControlled ? checked : internal;
   const handle = (c) => {
     if (!isControlled) setInternal(c);
@@ -8466,11 +8577,11 @@ function MultiTagRow({
   labelFor,
   onRemove
 }) {
-  const wrapRef = React34.useRef(null);
-  const measureRef = React34.useRef(null);
-  const [visibleCount, setVisibleCount] = React34.useState(values.length);
+  const wrapRef = React36.useRef(null);
+  const measureRef = React36.useRef(null);
+  const [visibleCount, setVisibleCount] = React36.useState(values.length);
   const key = values.map(String).join("|");
-  React34.useLayoutEffect(() => {
+  React36.useLayoutEffect(() => {
     const wrap = wrapRef.current;
     const measure = measureRef.current;
     if (!wrap || !measure) return;
@@ -8562,18 +8673,21 @@ function Dropdown({
   labelStyle = {},
   placeholder,
   size = "md",
-  className = ""
+  className = "",
+  container
 }) {
-  const [open, setOpen] = React34.useState(false);
-  const [selectedItems, setSelectedItems] = React34.useState([]);
-  const [searchTerm, setSearchTerm] = React34.useState("");
-  const [innerItems, setInnerItems] = React34.useState([]);
-  const errorId = React34.useId();
+  const dialogContainer = useDialogContainer();
+  const portalContainer = container ?? dialogContainer ?? void 0;
+  const [open, setOpen] = React36.useState(false);
+  const [selectedItems, setSelectedItems] = React36.useState([]);
+  const [searchTerm, setSearchTerm] = React36.useState("");
+  const [innerItems, setInnerItems] = React36.useState([]);
+  const errorId = React36.useId();
   const hasError = errorMessage != null;
-  React34.useEffect(() => {
+  React36.useEffect(() => {
     setInnerItems(items);
   }, [items]);
-  React34.useEffect(() => {
+  React36.useEffect(() => {
     if (isMultiselect && Array.isArray(value)) {
       setSelectedItems(value);
     }
@@ -8669,7 +8783,7 @@ function Dropdown({
                 ]
               }
             ) }),
-            /* @__PURE__ */ jsxRuntime.jsx(Popover__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+            /* @__PURE__ */ jsxRuntime.jsx(Popover__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsxs(
               Popover__namespace.Content,
               {
                 align: "start",
@@ -8766,19 +8880,19 @@ function AutoComplete({
   required,
   htmlFor
 }) {
-  const errorId = React34.useId();
+  const errorId = React36.useId();
   const hasError = errorMessage != null;
-  const [term, setTerm] = React34.useState("");
-  const [open, setOpen] = React34.useState(false);
-  const [asyncItems, setAsyncItems] = React34.useState([]);
-  const [loading, setLoading] = React34.useState(false);
+  const [term, setTerm] = React36.useState("");
+  const [open, setOpen] = React36.useState(false);
+  const [asyncItems, setAsyncItems] = React36.useState([]);
+  const [loading, setLoading] = React36.useState(false);
   const isAsync = typeof onSearch === "function";
-  const debounceRef = React34.useRef(null);
-  const requestIdRef = React34.useRef(0);
+  const debounceRef = React36.useRef(null);
+  const requestIdRef = React36.useRef(0);
   const staticFiltered = isAsync || !items ? [] : term.trim() ? items.filter(
     ({ key, label: label2 }) => label2.toLowerCase().includes(term.toLowerCase()) || key.toLowerCase().includes(term.toLowerCase())
   ) : [];
-  React34.useEffect(() => {
+  React36.useEffect(() => {
     if (!isAsync) return;
     if (debounceRef.current) clearTimeout(debounceRef.current);
     if (!term.trim()) {
@@ -8935,15 +9049,15 @@ function TreeSelect({
   defaultExpandedKeys = [],
   size = "md"
 }) {
-  const errorId = React34.useId();
+  const errorId = React36.useId();
   const hasError = errorMessage != null;
-  const [open, setOpen] = React34.useState(false);
-  const [expanded, setExpanded] = React34.useState(() => new Set(defaultExpandedKeys));
-  const [activeIndex, setActiveIndex] = React34.useState(0);
-  const listRef = React34.useRef(null);
-  const visible = React34.useMemo(() => flattenVisible(items, expanded), [items, expanded]);
-  const didSyncOnOpenRef = React34.useRef(false);
-  React34.useEffect(() => {
+  const [open, setOpen] = React36.useState(false);
+  const [expanded, setExpanded] = React36.useState(() => new Set(defaultExpandedKeys));
+  const [activeIndex, setActiveIndex] = React36.useState(0);
+  const listRef = React36.useRef(null);
+  const visible = React36.useMemo(() => flattenVisible(items, expanded), [items, expanded]);
+  const didSyncOnOpenRef = React36.useRef(false);
+  React36.useEffect(() => {
     if (!open) {
       didSyncOnOpenRef.current = false;
       return;
@@ -8953,7 +9067,7 @@ function TreeSelect({
     setActiveIndex(selectedIdx >= 0 ? selectedIdx : 0);
     didSyncOnOpenRef.current = true;
   }, [open, value]);
-  const selectedNode = React34.useMemo(
+  const selectedNode = React36.useMemo(
     () => value != null ? findNodeByKey(items, value) : null,
     [items, value]
   );
@@ -9185,11 +9299,11 @@ function FileInput({
   required,
   icon
 }) {
-  const inputRef = React34.useRef(null);
-  const errorId = React34.useId();
-  const [files, setFiles] = React34.useState([]);
-  const [dragging, setDragging] = React34.useState(false);
-  const [sizeError, setSizeError] = React34.useState(null);
+  const inputRef = React36.useRef(null);
+  const errorId = React36.useId();
+  const [files, setFiles] = React36.useState([]);
+  const [dragging, setDragging] = React36.useState(false);
+  const [sizeError, setSizeError] = React36.useState(null);
   const effectiveError = errorMessage ?? sizeError ?? void 0;
   const openPicker = () => {
     if (!disabled) inputRef.current?.click();
@@ -9380,30 +9494,30 @@ function DatePicker({
   size = "md",
   className = ""
 }) {
-  const errorId = React34.useId();
+  const errorId = React36.useId();
   const hasError = errorMessage != null;
-  const [open, setOpen] = React34.useState(false);
-  const [viewMonth, setViewMonth] = React34.useState(() => startOfMonth2(value ?? /* @__PURE__ */ new Date()));
-  const [focusDate, setFocusDate] = React34.useState(() => value ?? /* @__PURE__ */ new Date());
-  const [view, setView] = React34.useState("days");
-  const gridRef = React34.useRef(null);
-  React34.useEffect(() => {
+  const [open, setOpen] = React36.useState(false);
+  const [viewMonth, setViewMonth] = React36.useState(() => startOfMonth2(value ?? /* @__PURE__ */ new Date()));
+  const [focusDate, setFocusDate] = React36.useState(() => value ?? /* @__PURE__ */ new Date());
+  const [view, setView] = React36.useState("days");
+  const gridRef = React36.useRef(null);
+  React36.useEffect(() => {
     if (!open) return;
     const target = value ?? /* @__PURE__ */ new Date();
     setViewMonth(startOfMonth2(target));
     setFocusDate(target);
     setView("days");
   }, [open, value]);
-  React34.useEffect(() => {
+  React36.useEffect(() => {
     if (!open) return;
     const cell = gridRef.current?.querySelector(`[data-day="${defaultFormat3(focusDate)}"]`);
     cell?.focus();
   }, [open, focusDate]);
-  const weekdays = React34.useMemo(() => {
+  const weekdays = React36.useMemo(() => {
     const ordered = WEEKDAY_SHORT.slice(weekStartsOn).concat(WEEKDAY_SHORT.slice(0, weekStartsOn));
     return ordered;
   }, [weekStartsOn]);
-  const grid = React34.useMemo(() => buildGrid(viewMonth, weekStartsOn), [viewMonth, weekStartsOn]);
+  const grid = React36.useMemo(() => buildGrid(viewMonth, weekStartsOn), [viewMonth, weekStartsOn]);
   const isDisabled = (d) => {
     if (min && d < min) return true;
     if (max && d > max) return true;
@@ -9694,10 +9808,10 @@ function TextArea({
   style,
   inputStyle
 }) {
-  const errorId = React34.useId();
+  const errorId = React36.useId();
   const hasError = errorMessage != null;
-  const ref = React34.useRef(null);
-  React34.useLayoutEffect(() => {
+  const ref = React36.useRef(null);
+  React36.useLayoutEffect(() => {
     if (!autoGrow) return;
     const el = ref.current;
     if (!el) return;
@@ -9769,14 +9883,14 @@ function Slider({
   name,
   htmlFor
 }) {
-  const errorId = React34.useId();
+  const errorId = React36.useId();
   const hasError = errorMessage != null;
   const isRange = Array.isArray(value ?? defaultValue);
-  const [internal, setInternal] = React34.useState(
+  const [internal, setInternal] = React36.useState(
     () => toArray(value) ?? toArray(defaultValue) ?? [min]
   );
   const current = toArray(value) ?? internal;
-  const [dragging, setDragging] = React34.useState(false);
+  const [dragging, setDragging] = React36.useState(false);
   const emit = (arr) => {
     setInternal(arr);
     const next = isRange ? [arr[0], arr[1]] : arr[0];
@@ -9871,11 +9985,11 @@ function TagsInput({
   validate,
   separators = ["Enter", ","]
 }) {
-  const errorId = React34.useId();
-  const inputRef = React34.useRef(null);
-  const [internal, setInternal] = React34.useState(defaultValue ?? []);
-  const [draft, setDraft] = React34.useState("");
-  const [localError, setLocalError] = React34.useState(null);
+  const errorId = React36.useId();
+  const inputRef = React36.useRef(null);
+  const [internal, setInternal] = React36.useState(defaultValue ?? []);
+  const [draft, setDraft] = React36.useState("");
+  const [localError, setLocalError] = React36.useState(null);
   const tags = value ?? internal;
   const hasError = errorMessage != null || localError != null;
   const errorText = errorMessage ?? localError ?? void 0;
@@ -10006,9 +10120,9 @@ function OtpInput({
   className,
   groupAfter
 }) {
-  const errorId = React34.useId();
+  const errorId = React36.useId();
   const hasError = errorMessage != null;
-  const refs = React34.useRef([]);
+  const refs = React36.useRef([]);
   const chars = Array.from({ length }, (_, i) => value[i] ?? "");
   const pattern = mode === "numeric" ? /[0-9]/ : /[a-zA-Z0-9]/;
   const emit = (next) => {
@@ -10057,7 +10171,7 @@ function OtpInput({
     emit(valid.join(""));
     focusBox(valid.length);
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(Field, { className, label, htmlFor, errorId, errorMessage, required, layout, helperText, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap items-center gap-2", role: "group", "aria-label": typeof label === "string" ? label : "One-time code", children: chars.map((char, idx) => /* @__PURE__ */ jsxRuntime.jsxs(React34__default.default.Fragment, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(Field, { className, label, htmlFor, errorId, errorMessage, required, layout, helperText, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap items-center gap-2", role: "group", "aria-label": typeof label === "string" ? label : "One-time code", children: chars.map((char, idx) => /* @__PURE__ */ jsxRuntime.jsxs(React36__default.default.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       "input",
       {
@@ -10115,9 +10229,9 @@ function Rating({
   className,
   required
 }) {
-  const errorId = React34.useId();
-  const [internal, setInternal] = React34.useState(defaultValue);
-  const [hover, setHover] = React34.useState(null);
+  const errorId = React36.useId();
+  const [internal, setInternal] = React36.useState(defaultValue);
+  const [hover, setHover] = React36.useState(null);
   const current = value ?? internal;
   const display2 = hover ?? current;
   const interactive = !readOnly && !disabled;
@@ -10240,9 +10354,9 @@ function TimePicker({
   required,
   style
 }) {
-  const errorId = React34.useId();
+  const errorId = React36.useId();
   const hasError = errorMessage != null;
-  const [open, setOpen] = React34.useState(false);
+  const [open, setOpen] = React36.useState(false);
   const parsed = parse(value) ?? { h: 0, m: 0, s: 0 };
   const update = (next) => {
     const merged = { ...parsed, ...next };
@@ -10367,13 +10481,13 @@ function DateRangePicker({
   required,
   style
 }) {
-  const errorId = React34.useId();
+  const errorId = React36.useId();
   const hasError = errorMessage != null;
-  const [open, setOpen] = React34.useState(false);
-  const [leftMonth, setLeftMonth] = React34.useState(() => startOfMonth3(value.start ?? /* @__PURE__ */ new Date()));
-  const [pendingStart, setPendingStart] = React34.useState(null);
-  const [hoverDate, setHoverDate] = React34.useState(null);
-  const weekdays = React34.useMemo(
+  const [open, setOpen] = React36.useState(false);
+  const [leftMonth, setLeftMonth] = React36.useState(() => startOfMonth3(value.start ?? /* @__PURE__ */ new Date()));
+  const [pendingStart, setPendingStart] = React36.useState(null);
+  const [hoverDate, setHoverDate] = React36.useState(null);
+  const weekdays = React36.useMemo(
     () => WEEKDAY.slice(weekStartsOn).concat(WEEKDAY.slice(0, weekStartsOn)),
     [weekStartsOn]
   );
@@ -10550,10 +10664,10 @@ function ColorPicker({
   required,
   placeholder = "Pick a colour\u2026"
 }) {
-  const errorId = React34.useId();
+  const errorId = React36.useId();
   const hasError = errorMessage != null;
-  const [open, setOpen] = React34.useState(false);
-  const [draft, setDraft] = React34.useState(value);
+  const [open, setOpen] = React36.useState(false);
+  const [draft, setDraft] = React36.useState(value);
   const valid = HEX_RE.test(value);
   const pick = (hex) => {
     onChange?.(hex);
@@ -10641,7 +10755,7 @@ function ColorPicker({
 }
 var CUSTOM_EVENT = "oxy-local-storage";
 function useLocalStorage(key, initialValue) {
-  const read = React34.useCallback(() => {
+  const read = React36.useCallback(() => {
     if (typeof window === "undefined") return initialValue;
     try {
       const item = window.localStorage.getItem(key);
@@ -10650,8 +10764,8 @@ function useLocalStorage(key, initialValue) {
       return initialValue;
     }
   }, [key]);
-  const [stored, setStored] = React34.useState(read);
-  const setValue = React34.useCallback((value) => {
+  const [stored, setStored] = React36.useState(read);
+  const setValue = React36.useCallback((value) => {
     setStored((prev) => {
       const next = value instanceof Function ? value(prev) : value;
       try {
@@ -10664,7 +10778,7 @@ function useLocalStorage(key, initialValue) {
       return next;
     });
   }, [key]);
-  const remove = React34.useCallback(() => {
+  const remove = React36.useCallback(() => {
     try {
       if (typeof window !== "undefined") {
         window.localStorage.removeItem(key);
@@ -10674,10 +10788,10 @@ function useLocalStorage(key, initialValue) {
     }
     setStored(initialValue);
   }, [key]);
-  React34.useEffect(() => {
+  React36.useEffect(() => {
     setStored(read());
   }, [key, read]);
-  React34.useEffect(() => {
+  React36.useEffect(() => {
     if (typeof window === "undefined") return;
     const onStorage = (e) => {
       if (e.key === null || e.key === key) setStored(read());
@@ -10696,8 +10810,8 @@ function useLocalStorage(key, initialValue) {
 }
 function useMediaQuery(query) {
   const get = () => typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia(query).matches : false;
-  const [matches, setMatches] = React34.useState(get);
-  React34.useEffect(() => {
+  const [matches, setMatches] = React36.useState(get);
+  React36.useEffect(() => {
     if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
     const mql = window.matchMedia(query);
     const onChange = () => setMatches(mql.matches);
@@ -10728,8 +10842,8 @@ function decodeSegment(seg) {
   }
 }
 function useJwt(token) {
-  const [, tick] = React34.useState(0);
-  const decoded = React34.useMemo(() => {
+  const [, tick] = React36.useState(0);
+  const decoded = React36.useMemo(() => {
     if (!token) return { payload: null, header: null, exp: null };
     const [h, p] = token.split(".");
     const header = decodeSegment(h);
@@ -10737,7 +10851,7 @@ function useJwt(token) {
     const exp = payload && typeof payload.exp === "number" ? payload.exp : null;
     return { payload, header, exp };
   }, [token]);
-  React34.useEffect(() => {
+  React36.useEffect(() => {
     if (decoded.exp == null) return;
     const ms = decoded.exp * 1e3 - Date.now();
     if (ms <= 0) return;
@@ -10911,13 +11025,13 @@ function SlideShow({
   style
 }) {
   const reduced = framerMotion.useReducedMotion();
-  const [index, setIndex] = React34.useState(0);
-  const [paused, setPaused] = React34.useState(false);
+  const [index, setIndex] = React36.useState(0);
+  const [paused, setPaused] = React36.useState(false);
   const count = slides.length;
   const idx = count ? (index % count + count) % count : 0;
-  const go = React34.useCallback((d) => setIndex((i) => i + d), []);
-  const timer = React34.useRef(null);
-  React34.useEffect(() => {
+  const go = React36.useCallback((d) => setIndex((i) => i + d), []);
+  const timer = React36.useRef(null);
+  React36.useEffect(() => {
     if (!autoPlay || paused || count <= 1) return;
     timer.current = setInterval(() => setIndex((i) => i + 1), interval);
     return () => {
@@ -10993,7 +11107,7 @@ function Video({
   className = "",
   style
 }) {
-  const [playing, setPlaying] = React34.useState(autoPlay);
+  const [playing, setPlaying] = React36.useState(autoPlay);
   const frame = cx("relative w-full overflow-hidden bg-backdrop", framed ? "rounded-2xl border border-border shadow-sm" : "", className);
   const ratio = aspect.replace("/", " / ");
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: frame, style: { aspectRatio: ratio, ...style }, children: embedUrl ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -11048,7 +11162,7 @@ function Parallax({
   style
 }) {
   const reduced = framerMotion.useReducedMotion();
-  const ref = React34.useRef(null);
+  const ref = React36.useRef(null);
   const { scrollYProgress } = framerMotion.useScroll({ target: ref, offset: ["start end", "end start"] });
   const shift = Math.max(0, Math.min(1, speed)) * 100;
   const y = framerMotion.useTransform(scrollYProgress, [0, 1], reduced ? ["0%", "0%"] : [`-${shift / 2}%`, `${shift / 2}%`]);
@@ -11116,7 +11230,7 @@ function Blog({
           post.tag != null && !post.image && /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(Badge, { tone: "accent", variant: "soft", size: "sm", children: post.tag }) }),
           /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-base font-semibold leading-snug text-foreground transition-colors group-hover:text-accent", children: post.title }),
           post.excerpt != null && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "line-clamp-3 text-sm leading-relaxed text-foreground-secondary", children: post.excerpt }),
-          meta.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-auto flex flex-wrap items-center gap-x-2 gap-y-1 pt-3 text-xs text-foreground-muted", children: meta.map((m, j) => /* @__PURE__ */ jsxRuntime.jsxs(React34__default.default.Fragment, { children: [
+          meta.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-auto flex flex-wrap items-center gap-x-2 gap-y-1 pt-3 text-xs text-foreground-muted", children: meta.map((m, j) => /* @__PURE__ */ jsxRuntime.jsxs(React36__default.default.Fragment, { children: [
             j > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: "\xB7" }),
             /* @__PURE__ */ jsxRuntime.jsx("span", { children: m })
           ] }, j)) })
@@ -11245,8 +11359,8 @@ function LeadCapture({
   className = "",
   style
 }) {
-  const [email, setEmail] = React34.useState("");
-  const [done, setDone] = React34.useState(false);
+  const [email, setEmail] = React36.useState("");
+  const [done, setDone] = React36.useState(false);
   const submit = (e) => {
     e.preventDefault();
     const value = email.trim();