gridsmith-ui 0.32.0 → 0.33.1

package/dist/{chunk-JHZ22HQP.js → chunk-NJG6JQGC.js}

@@ -1,15 +1,14 @@
 "use client";
-import { useKeyboardScroll } from './chunk-H732QL56.js';
 import { PreferencesContext } from './chunk-QOMP4D6V.js';
-import { FormChangeCtx } from './chunk-72SDAX54.js';
 import { SurfaceBoundary } from './chunk-RS624TD5.js';
-import { Button } from './chunk-XBVZIN26.js';
-import { useBreakpoint, readBreakpointPx } from './chunk-ZHUVLBCC.js';
-import { useTextOverflow } from './chunk-R2IAK3J3.js';
-import { useRevealFocus, AutoTooltip } from './chunk-HCEHTJ5E.js';
-import { Icon } from './chunk-53F7GVBQ.js';
-import { cn, FOCUS_INSET_WHILE_STOP, usePopupFocus, usePosition, FOCUS_RING, FOCUS_INSET, useLatest, useOverlayLayer, lockBodyScroll, unlockBodyScroll, useReturnFocus, useFocusTrap, inertOutside, focusInitial, useNonModalDialog, OVERLAY_CLOSE_ATTR, OVERLAY_SURFACE, GLASS_OVERLAY, GROUP_FOCUS_RING } from './chunk-2724SJO2.js';
-import { createContext, version, forwardRef, useState, useCallback, useRef, useId, useEffect, useContext, useMemo, useLayoutEffect } from 'react';
+import { useTextOverflow } from './chunk-ZTS6HJAU.js';
+import { useOverlayMark, useDirtyGuard, DiscardConfirm, OverlayMarkScope, OverlayCloseCtx, OVERLAY_ROOT_ATTR } from './chunk-UI4BSRCQ.js';
+import { useBreakpoint } from './chunk-ZHUVLBCC.js';
+import { useKeyboardScroll } from './chunk-T33JK3ZE.js';
+import { useRevealFocus, AutoTooltip } from './chunk-77X7AHFB.js';
+import { warnOnce, Icon } from './chunk-53F7GVBQ.js';
+import { cn, FOCUS_INSET_WHILE_STOP, usePopupFocus, usePosition, FOCUS_RING, FOCUS_INSET, useLatest, useOverlayLayer, lockBodyScroll, unlockBodyScroll, useReturnFocus, useFocusTrap, inertOutside, focusInitial, useNonModalDialog, OVERLAY_CLOSE_ATTR, OVERLAY_SURFACE, GLASS_OVERLAY, GROUP_FOCUS_RING } from './chunk-HDFTENVW.js';
+import { createContext, version, forwardRef, useState, useRef, useCallback, useLayoutEffect, useId, useEffect, useContext, useMemo } from 'react';
 import { createPortal } from 'react-dom';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
@@ -251,182 +250,6 @@ function defaultMaxWidth(container) {
   const base = container instanceof HTMLElement ? container.clientWidth : typeof window !== "undefined" ? window.innerWidth : 1200;
   return Math.round(base * 0.6);
 }
-var OVERLAY_ROOT_ATTR = "data-overlay-root";
-function controlsOf(root) {
-  if (!root) return "";
-  const controls = root.querySelectorAll("input, select, textarea, [role='combobox'], [role='radiogroup'], [role='checkbox'], [role='switch'], [role='slider'], [role='spinbutton'], [contenteditable='true']");
-  return Array.from(controls).map((el) => el.id || el.getAttribute("name") || el.getAttribute("role") || el.tagName).join("|");
-}
-var OverlayMarkCtx = createContext(null);
-function OverlayMarkScope({ mark, children }) {
-  return /* @__PURE__ */ jsx(OverlayMarkCtx, { value: mark, children: /* @__PURE__ */ jsx(FormChangeCtx, { value: null, children }) });
-}
-function useOverlayMark(open) {
-  const forms = useRef(/* @__PURE__ */ new Map());
-  const count = useRef(0);
-  const round = useRef(0);
-  const [changed, setChanged] = useState(false);
-  const [holds, setHolds] = useState(0);
-  const [pends, setPends] = useState(0);
-  const [answers, setAnswers] = useState([]);
-  const [wasOpen, setWasOpen] = useState(open);
-  if (open !== wasOpen) {
-    setWasOpen(open);
-    if (!open) {
-      setChanged(false);
-      setAnswers([]);
-    }
-  }
-  useEffect(() => {
-    if (open) return;
-    round.current++;
-    for (const [id, f] of forms.current) {
-      if (f.mounted) f.stamp = 0;
-      else forms.current.delete(id);
-    }
-  }, [open]);
-  const mark = useMemo(() => ({
-    report: (form) => {
-      const f = forms.current.get(form) ?? { stamp: 0, mounted: true };
-      f.stamp = ++count.current;
-      forms.current.set(form, f);
-      setChanged(true);
-    },
-    attach: (form) => {
-      const f = forms.current.get(form) ?? { stamp: 0, mounted: true };
-      f.mounted = true;
-      forms.current.set(form, f);
-      return () => {
-        const gone = forms.current.get(form);
-        if (!gone) return;
-        if (gone.stamp > 0) gone.mounted = false;
-        else forms.current.delete(form);
-      };
-    },
-    submit: (form, from) => {
-      const root = from.element()?.closest(`[${OVERLAY_ROOT_ATTR}]`) ?? null;
-      const answer = { form, since: count.current, root, controls: controlsOf(root), ...from };
-      const at = round.current;
-      let settled = false;
-      return {
-        settle: (how) => {
-          if (settled || at !== round.current) return;
-          settled = true;
-          setAnswers((list) => [...list, { ...answer, how }]);
-        }
-      };
-    },
-    hold: () => {
-      setHolds((n) => n + 1);
-      let released = false;
-      return () => {
-        if (released) return;
-        released = true;
-        setHolds((n) => n - 1);
-      };
-    },
-    pend: () => {
-      setPends((n) => n + 1);
-      let released = false;
-      return () => {
-        if (released) return;
-        released = true;
-        setPends((n) => n - 1);
-      };
-    },
-    open
-  }), [open]);
-  useEffect(() => {
-    if (!answers.length) return;
-    for (const a of answers) {
-      const form = a.element();
-      if (form?.isConnected && (form.querySelector("[aria-invalid='true']") || a.failing())) continue;
-      if (a.how === "returned") {
-        const now = a.root?.isConnected ? controlsOf(a.root) : "";
-        if (now !== "" && now !== a.controls) continue;
-      }
-      for (const [id, f] of forms.current) {
-        if (f.stamp === 0 || f.stamp > a.since || id !== a.form && f.mounted) continue;
-        if (f.mounted) forms.current.set(id, { ...f, stamp: 0 });
-        else forms.current.delete(id);
-      }
-    }
-    setAnswers([]);
-    setChanged([...forms.current.values()].some((f) => f.stamp > 0));
-  }, [answers]);
-  return { marked: changed || holds > 0, pending: pends > 0, mark };
-}
-var OverlayCloseCtx = createContext(null);
-function useDirtyGuard(dirty, onClose, onDiscard) {
-  const [wantsConfirm, setWantsConfirm] = useState(false);
-  const confirming = wantsConfirm && !!dirty;
-  const pending = useRef(void 0);
-  const runAfter = useCallback((then) => {
-    if (typeof then === "function" && then !== onClose) then();
-  }, [onClose]);
-  const requestClose = useCallback((then) => {
-    if (!dirty) {
-      onClose();
-      runAfter(then);
-      return;
-    }
-    pending.current = then;
-    setWantsConfirm((c) => !c);
-  }, [dirty, onClose, runAfter]);
-  const keep = useCallback(() => {
-    pending.current = void 0;
-    setWantsConfirm(false);
-  }, []);
-  const discard = useCallback(() => {
-    setWantsConfirm(false);
-    onDiscard?.();
-    onClose();
-    const then = pending.current;
-    pending.current = void 0;
-    runAfter(then);
-  }, [onClose, onDiscard, runAfter]);
-  return { confirming, requestClose, keep, discard };
-}
-function DiscardConfirm({ open, onKeep, onDiscard }) {
-  const keepRef = useRef(null);
-  const returnTo = useRef(null);
-  const overlay = useRef(null);
-  useEffect(() => {
-    if (!open) return;
-    const active = document.activeElement instanceof HTMLElement ? document.activeElement : null;
-    overlay.current = keepRef.current?.closest("[role='dialog'], [role='alertdialog']") ?? null;
-    returnTo.current = active && active !== document.body && overlay.current?.contains(active) ? active : null;
-    keepRef.current?.focus();
-    return () => {
-      if (document.activeElement !== document.body) return;
-      const back = returnTo.current;
-      if (back && back.isConnected) {
-        back.focus();
-        return;
-      }
-      const first = overlay.current?.querySelector("button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex='-1'])");
-      (first ?? overlay.current)?.focus();
-    };
-  }, [open]);
-  if (!open) return null;
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      role: "group",
-      "aria-label": "Unsaved changes",
-      "data-discard-confirm": "",
-      className: "shrink-0 flex flex-wrap items-center justify-between gap-ds-3 border-t-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)] bg-[var(--ds-status-warning-bg)]",
-      style: { padding: "var(--ds-space-3) var(--ds-page-gutter)" },
-      children: [
-        /* @__PURE__ */ jsx("p", { className: "text-sm text-[var(--ds-text-primary)]", children: "You have unsaved changes." }),
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-ds-2", children: [
-          /* @__PURE__ */ jsx(Button, { type: "button", ref: keepRef, variant: "secondary", size: "sm", onClick: onKeep, children: "Keep editing" }),
-          /* @__PURE__ */ jsx(Button, { type: "button", variant: "destructive", size: "sm", onClick: onDiscard, children: "Discard changes" })
-        ] })
-      ]
-    }
-  );
-}
 var DrawerWidthCtx = createContext(null);
 var BulkBarHostCtx = createContext(null);
 var BulkBarPresenceCtx = createContext(null);
@@ -479,6 +302,7 @@ function useScrollbarInset() {
   }, []);
 }
 var insetLessScrollbar = (gutter) => `max(0px, calc(${gutter} - var(--gs-scrollbar, 0px)))`;
+var AsideSlotContext = createContext(false);
 var DrawerFooterCtx = createContext(null);
 var DrawerScopeCtx = createContext(null);
 var slideClasses = {
@@ -815,7 +639,7 @@ function DrawerPanel({ form, open, onClose, position = "right", width = "400px",
                         ...barStack ? { scrollPaddingBottom: bulkBarRoom(barStack) } : {}
                       },
                       children: [
-                        /* @__PURE__ */ jsx(BulkBarHostCtx, { value: barHost, children: /* @__PURE__ */ jsx(SurfaceBoundary, { children }) }),
+                        /* @__PURE__ */ jsx(BulkBarHostCtx, { value: barHost, children: /* @__PURE__ */ jsx(SurfaceBoundary, { children: /* @__PURE__ */ jsx(AsideSlotContext, { value: true, children }) }) }),
                         /* @__PURE__ */ jsx(BulkBarSpacer, { room: barStack })
                       ]
                     }
@@ -901,8 +725,47 @@ var AppShell = forwardRef(function AppShell2({
 }, ref) {
   if (REACT_VERSION_PROBLEM) throw new Error(REACT_VERSION_PROBLEM);
   const [sidebarOpen, setSidebarOpen] = useState(false);
-  const [asideOpen, setAsideOpen] = useState(false);
-  const [asideFloating, setAsideFloating] = useState(false);
+  const [ownAsideOpen, setAsideOpen] = useState(false);
+  const [ownAsideFloating, setAsideFloating] = useState(false);
+  const [leftAsideHost, setLeftAsideHost] = useState(null);
+  const [rightAsideHost, setRightAsideHost] = useState(null);
+  const asides = useRef(/* @__PURE__ */ new Map());
+  const opened = useRef([]);
+  const [openings, setOpenings] = useState(0);
+  const [docked, setDocked] = useState(null);
+  const [asked, setAsked] = useState([]);
+  const reportAside = useCallback((onClose, state) => {
+    if (state) asides.current.set(onClose, state);
+    else asides.current.delete(onClose);
+    if (state?.opened) {
+      opened.current.push(onClose);
+      setOpenings((n) => n + 1);
+    }
+    let next = null;
+    for (const s of asides.current.values()) if (s.open && s.docked) next = { side: s.side, floating: s.floating };
+    setDocked((d) => d?.side === next?.side && d?.floating === next?.floating ? d : next);
+  }, []);
+  useLayoutEffect(() => {
+    const keys = opened.current.filter((key) => asides.current.get(key)?.open);
+    opened.current = [];
+    if (keys.length === 0) return;
+    let winner2 = keys[keys.length - 1];
+    for (const key of keys) if (asides.current.get(key)?.page) winner2 = key;
+    const closing = [...asides.current].filter(([key, s]) => key !== winner2 && s.open).map(([key]) => key);
+    for (const key of closing) key.current();
+    if (closing.length > 0) setAsked(closing);
+  }, [openings]);
+  useLayoutEffect(() => {
+    for (const key of asked) {
+      const s = asides.current.get(key);
+      if (!s?.open) continue;
+      const name = typeof document !== "undefined" && document.getElementById(s.name)?.textContent?.trim() || s.name;
+      warnOnce("AsidePanel", `"${name}" stayed open as another opened: one AsidePanel is open at a time in a shell, the last opened, so its onClose must close it (set its open to false).`);
+    }
+  }, [asked]);
+  const asideOpen = docked !== null || ownAsideOpen;
+  const asideFloating = docked ? docked.floating : ownAsideFloating;
+  const asideFloatingSide = docked ? docked.floating ? docked.side : null : ownAsideOpen && ownAsideFloating ? asideSide : null;
   const isMobile = useBreakpoint("md");
   const isSmallMobile = useBreakpoint("sm");
   const isTablet = isMobile && !isSmallMobile;
@@ -987,8 +850,8 @@ var AppShell = forwardRef(function AppShell2({
   return /* @__PURE__ */ jsx(PreferencesContext, { value: preferences ?? null, children: /* @__PURE__ */ jsx(DrawerWidthCtx, { value: drawerWidth, children: /* @__PURE__ */ jsx(
     AppShellContext,
     {
-      value: { hasSidebar, hasMobileMenu, hasMobileNav, sidebarOpen, setSidebarOpen, isMobile, isTablet, sidebarCollapsed, setSidebarCollapsed: setUserCollapsed, asideOpen, setAsideOpen, asideSide, asideFloating, setAsideFloating, container: shellEl, theme: theme ?? null, isHome, navbarFloating, sidebarFloating, registerChrome, hasLauncher, launcherCorner, registerLauncher, hasFooter, focus: focus ?? null, hasUnsavedChanges: unsavedCount > 0, addUnsavedChanges, drawerWidth, navigate: navigate ?? null, flowLeft: leftCount > 0, markFlowLeft },
-      children: /* @__PURE__ */ jsxs("div", { ref: (el) => {
+      value: { hasSidebar, hasMobileMenu, hasMobileNav, sidebarOpen, setSidebarOpen, isMobile, isTablet, sidebarCollapsed, setSidebarCollapsed: setUserCollapsed, asideOpen, setAsideOpen, asideSide, asideFloating, setAsideFloating, asideFloatingSide, reportAside, asideHosts: { left: leftAsideHost, right: rightAsideHost }, container: shellEl, theme: theme ?? null, isHome, navbarFloating, sidebarFloating, registerChrome, hasLauncher, launcherCorner, registerLauncher, hasFooter, focus: focus ?? null, hasUnsavedChanges: unsavedCount > 0, addUnsavedChanges, drawerWidth, navigate: navigate ?? null, flowLeft: leftCount > 0, markFlowLeft },
+      children: /* @__PURE__ */ jsx(AsideSlotContext, { value: false, children: /* @__PURE__ */ jsxs("div", { ref: (el) => {
         setShellEl(el);
         if (typeof ref === "function") ref(el);
         else if (ref) ref.current = el;
@@ -1010,7 +873,8 @@ var AppShell = forwardRef(function AppShell2({
         layout === "multi-column" && navbarSlot,
         /* @__PURE__ */ jsxs("div", { className: "flex flex-1 min-h-0", children: [
           hasSidebar && !isMobile && /* @__PURE__ */ jsx("div", { className: "shrink-0 h-full", children: sidebar }),
-          aside && asideSide === "left" && aside,
+          aside && asideSide === "left" && /* @__PURE__ */ jsx(AsideSlotContext, { value: true, children: aside }),
+          /* @__PURE__ */ jsx("div", { ref: setLeftAsideHost, "data-shell-aside-host": "left", className: "contents" }),
           /* @__PURE__ */ jsxs("div", { className: "relative flex-1 flex flex-col min-w-0 min-h-0", children: [
             layout === "sidebar" && navbarSlot,
             layout === "stacked" && navbarSlot,
@@ -1051,7 +915,8 @@ var AppShell = forwardRef(function AppShell2({
             ) }),
             /* @__PURE__ */ jsx("div", { ref: setBarLayer, "data-bulk-bar-layer": "", className: BULK_BAR_LAYER, style: { paddingBottom: `calc(${BULK_BAR_GAP}px + ${barSafe})` } })
           ] }),
-          aside && asideSide === "right" && aside
+          /* @__PURE__ */ jsx("div", { ref: setRightAsideHost, "data-shell-aside-host": "right", className: "contents" }),
+          aside && asideSide === "right" && /* @__PURE__ */ jsx(AsideSlotContext, { value: true, children: aside })
         ] }),
         showMobileDrawer && isMobile && // Under the navbar, the menu is modal over the page with the navbar in its scope: the rest inert, Tab cycling the
         // two, Escape closing it (the Authoring Practices; Sprint 25.29 item 9). The stacked shell, with no offset, traps
@@ -1076,7 +941,7 @@ var AppShell = forwardRef(function AppShell2({
         ) }),
         isSmallMobile && hasMobileNav && /* @__PURE__ */ jsx("div", { className: "sticky bottom-0 z-[var(--ds-z-sticky)]", children: mobileNav }),
         !isSmallMobile && launcher
-      ] })
+      ] }) })
     }
   ) }) });
 });
@@ -1379,33 +1244,7 @@ var Breadcrumbs = forwardRef(function Breadcrumbs2({
     dropdown
   ] });
 });
-function useCompact(ref, breakpoint, band = 0) {
-  const px = typeof breakpoint === "number" ? breakpoint : readBreakpointPx(breakpoint);
-  const width = useElementWidth(ref);
-  return useBelow(width, px, band);
-}
-function useBelow(width, threshold, band = 0) {
-  const [below, setBelow] = useState(false);
-  const next = width > 0 && width < (below ? threshold + band : threshold);
-  if (next !== below) setBelow(next);
-  return next;
-}
-function useElementWidth(ref) {
-  const [width, setWidth] = useState(0);
-  const check = useCallback(() => {
-    const next = ref.current?.offsetWidth ?? 0;
-    if (next > 0) setWidth(next);
-  }, [ref]);
-  useLayoutEffect(() => {
-    check();
-    if (!ref.current || typeof ResizeObserver === "undefined") return;
-    const observer = new ResizeObserver(check);
-    observer.observe(ref.current);
-    return () => observer.disconnect();
-  }, [check, ref]);
-  return width;
-}
 
-export { AppShell, BULK_BAR_LAYER, BULK_BAR_WINDOW_LAYER, Breadcrumbs, BulkBarHostCtx, BulkBarPresenceCtx, BulkBarSpacer, DiscardConfirm, Drawer, DrawerFooterCtx, DrawerPanel, LAUNCHER_INSET_PRIORITY, NAVBAR_INSET_PRIORITY, OVERLAY_ROOT_ATTR, OverlayCloseCtx, OverlayMarkCtx, OverlayMarkScope, PANEL_INSET_PRIORITY, REACT_VERSION_PROBLEM, ResizeEdge, SkipLink, TOAST_INSET_VARS, besideRoom, bulkBarRoom, crumbGoes, defaultMaxWidth, insetLessScrollbar, pxOf, useAppShell, useBelow, useBulkBarHost, useCloseSettle, useCompact, useCornerInset, useCrumbFollow, useDirtyGuard, useElementWidth, useOverlayMark, useRememberedWidth, useScrollbarInset, useUnsavedChanges };
-//# sourceMappingURL=chunk-JHZ22HQP.js.map
-//# sourceMappingURL=chunk-JHZ22HQP.js.map
+export { AppShell, AsideSlotContext, BULK_BAR_LAYER, BULK_BAR_WINDOW_LAYER, Breadcrumbs, BulkBarHostCtx, BulkBarPresenceCtx, BulkBarSpacer, Drawer, DrawerFooterCtx, DrawerPanel, LAUNCHER_INSET_PRIORITY, NAVBAR_INSET_PRIORITY, PANEL_INSET_PRIORITY, REACT_VERSION_PROBLEM, ResizeEdge, SkipLink, TOAST_INSET_VARS, besideRoom, bulkBarRoom, crumbGoes, defaultMaxWidth, insetLessScrollbar, pxOf, useAppShell, useBulkBarHost, useCloseSettle, useCornerInset, useCrumbFollow, useRememberedWidth, useScrollbarInset, useUnsavedChanges };
+//# sourceMappingURL=chunk-NJG6JQGC.js.map
+//# sourceMappingURL=chunk-NJG6JQGC.js.map