gridsmith-ui 0.10.0 → 0.12.0

package/dist/index.js

@@ -1,5 +1,5 @@
-import { useAppShell, ControlSizeContext, Button, Spinner, DrawerFooterCtx, useCompact, useElementWidth, Sheet, useCloseSettle, Drawer, useRememberedWidth, pxOf, ResizeEdge, useDirtyGuard, DiscardConfirm, defaultMaxWidth } from './chunk-YMUCTZXS.js';
-export { AppShell, Button, ButtonSizeContext, ControlSizeContext, Drawer, Sheet, SkipLink, Spinner, useAppShell } from './chunk-YMUCTZXS.js';
+import { useAppShell, ControlSizeContext, Button, Spinner, OverlayCloseCtx, DrawerFooterCtx, useCompact, useElementWidth, Sheet, useCloseSettle, Drawer, useRememberedWidth, pxOf, ResizeEdge, useDirtyGuard, DiscardConfirm, defaultMaxWidth } from './chunk-HL3KYWOK.js';
+export { AppShell, Button, ButtonSizeContext, ControlSizeContext, Drawer, Sheet, SkipLink, Spinner, useAppShell } from './chunk-HL3KYWOK.js';
 import { Skeleton } from './chunk-M3AARGLI.js';
 export { Skeleton } from './chunk-M3AARGLI.js';
 import { useOverlayLayer, useCloseOnFocusOut, focusInitial, rovingTabStop, OVERLAY_CLOSE_ATTR, useNonModalDialog, useFocusTrap } from './chunk-NHQCMOAN.js';
@@ -8,8 +8,8 @@ export { CodeBlock, Divider, Link } from './chunk-QJBCZ7BR.js';
 import { Badge } from './chunk-U2JT37GJ.js';
 export { Badge } from './chunk-U2JT37GJ.js';
 import { inferColumnKinds, CardValue } from './chunk-CR2KF73R.js';
-import { SplitPaneCtx, usePreferences, TableCardCtx, preferenceActionKey } from './chunk-QNVSMY4R.js';
-export { PreferencesContext, preferenceActionKey, usePreferences } from './chunk-QNVSMY4R.js';
+import { SplitPaneCtx, useShellPreferences, TableCardCtx, PREFERENCE_HOUSE_DEFAULTS, preferenceActionKey } from './chunk-YO7JVPXK.js';
+export { PreferencesContext, preferenceActionKey, usePreferences } from './chunk-YO7JVPXK.js';
 import { useBreakpoint } from './chunk-CRQ6KCRD.js';
 export { BreakpointWidthProvider, useBreakpoint } from './chunk-CRQ6KCRD.js';
 import { useTextOverflow, Tooltip, usePosition } from './chunk-IYD6ZDM2.js';
@@ -1220,7 +1220,7 @@ function parseTypedDate(text, dayFirst = localeDayFirst()) {
     const mi = monthIndex(m[2]);
     return mi < 0 ? null : validDate(Number(m[3]), mi, Number(m[1]));
   }
-  m = /^(\d{1,2})[/.\-](\d{1,2})[/.\-](\d{2,4})$/.exec(t);
+  m = /^(\d{1,2})[/.-](\d{1,2})[/.-](\d{2,4})$/.exec(t);
   if (m) {
     const a = Number(m[1]), b = Number(m[2]);
     const year = m[3].length === 2 ? 2e3 + Number(m[3]) : Number(m[3]);
@@ -1246,26 +1246,6 @@ function DatePicker({ value, onChange, placeholder = "Pick a date", disabled, cl
   const firstDay = getFirstDayOfWeek(year, month);
   const today = useMemo(() => /* @__PURE__ */ new Date(), []);
   const isTopLayer = useOverlayLayer(open);
-  useEffect(() => {
-    if (!open) return;
-    const handler = (e) => {
-      const t = e.target;
-      if (triggerRef.current?.contains(t) || panelRef.current?.contains(t)) return;
-      setOpen(false);
-    };
-    const keyHandler = (e) => {
-      if (e.key === "Escape" && isTopLayer()) {
-        setOpen(false);
-        focusSegment(0);
-      }
-    };
-    document.addEventListener("mousedown", handler);
-    document.addEventListener("keydown", keyHandler);
-    return () => {
-      document.removeEventListener("mousedown", handler);
-      document.removeEventListener("keydown", keyHandler);
-    };
-  }, [open, isTopLayer]);
   const prevMonth = () => setViewDate(new Date(year, month - 1, 1));
   const nextMonth = () => setViewDate(new Date(year, month + 1, 1));
   const startOf = (d) => new Date(d.getFullYear(), d.getMonth(), d.getDate());
@@ -1280,18 +1260,39 @@ function DatePicker({ value, onChange, placeholder = "Pick a date", disabled, cl
   };
   const dayFirst = useMemo(() => localeDayFirst(), []);
   const [segs, setSegs] = useState(() => value ? { day: value.getDate(), month: value.getMonth() + 1, year: value.getFullYear() } : { day: null, month: null, year: null });
-  const buffers = useRef({});
+  const [buffers, setBuffers] = useState({});
   const lastCommitted = useRef(null);
   useEffect(() => {
     if (value && value.getTime() === lastCommitted.current) return;
     setSegs(value ? { day: value.getDate(), month: value.getMonth() + 1, year: value.getFullYear() } : { day: null, month: null, year: null });
-    buffers.current = {};
+    setBuffers({});
   }, [value]);
   const specs = dateSegments(dayFirst, segs.month && segs.year ? getDaysInMonth(segs.year, segs.month - 1) : 31);
   const segmentRefs = useRef([]);
   const focusSegment = (i) => {
     segmentRefs.current[Math.max(0, Math.min(specs.length - 1, i))]?.focus();
   };
+  const focusSegmentRef = useLatest(focusSegment);
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e) => {
+      const t = e.target;
+      if (triggerRef.current?.contains(t) || panelRef.current?.contains(t)) return;
+      setOpen(false);
+    };
+    const keyHandler = (e) => {
+      if (e.key === "Escape" && isTopLayer()) {
+        setOpen(false);
+        focusSegmentRef.current(0);
+      }
+    };
+    document.addEventListener("mousedown", handler);
+    document.addEventListener("keydown", keyHandler);
+    return () => {
+      document.removeEventListener("mousedown", handler);
+      document.removeEventListener("keydown", keyHandler);
+    };
+  }, [open, isTopLayer, focusSegmentRef]);
   const [typedInvalid, setTypedInvalid] = useState(false);
   const commitIfComplete = (next) => {
     if (next.day === null || next.month === null || next.year === null) {
@@ -1319,7 +1320,7 @@ function DatePicker({ value, onChange, placeholder = "Pick a date", disabled, cl
     if (!d) return;
     const next = { day: d.getDate(), month: d.getMonth() + 1, year: d.getFullYear() };
     setSegs(next);
-    buffers.current = {};
+    setBuffers({});
     commitIfComplete(next);
   };
   const onSegmentKeyDown = (e, index, spec) => {
@@ -1327,6 +1328,7 @@ function DatePicker({ value, onChange, placeholder = "Pick a date", disabled, cl
     if (key === "Tab" || key === "Shift" || key === "Escape" || key.startsWith("F")) return;
     e.preventDefault();
     const k = spec.key;
+    const clearBuffer = () => setBuffers((b) => ({ ...b, [k]: "" }));
     if (key === "ArrowLeft") {
       focusSegment(index - 1);
       return;
@@ -1336,39 +1338,39 @@ function DatePicker({ value, onChange, placeholder = "Pick a date", disabled, cl
       return;
     }
     if (key === "ArrowUp" || key === "ArrowDown") {
-      buffers.current[k] = "";
+      clearBuffer();
       setSegment(k, stepValue(spec, segs[k], key === "ArrowUp" ? 1 : -1));
       return;
     }
     if (key === "Home") {
-      buffers.current[k] = "";
+      clearBuffer();
       setSegment(k, spec.min);
       return;
     }
     if (key === "End") {
-      buffers.current[k] = "";
+      clearBuffer();
       setSegment(k, spec.max);
       return;
     }
     if (key === "Backspace" || key === "Delete") {
-      if (segs[k] === null && !buffers.current[k]) {
+      if (segs[k] === null && !buffers[k]) {
         focusSegment(index - 1);
         return;
       }
-      buffers.current[k] = "";
+      clearBuffer();
       setSegment(k, null, false);
       return;
     }
     if (/^\d$/.test(key)) {
-      const r = typeDigit(spec, buffers.current[k] ?? "", key);
-      buffers.current[k] = r.advance ? "" : r.buffer;
+      const r = typeDigit(spec, buffers[k] ?? "", key);
+      setBuffers((b) => ({ ...b, [k]: r.advance ? "" : r.buffer }));
       setSegment(k, r.value);
       if (r.advance) focusSegment(index + 1);
     }
   };
   const shown = (spec) => {
     const k = spec.key;
-    const b = buffers.current[k];
+    const b = buffers[k];
     if (b && segs[k] === null) return b;
     if (segs[k] === null) return spec.placeholder;
     return k === "year" ? String(segs[k]) : pad2(segs[k]);
@@ -1444,7 +1446,7 @@ function DatePicker({ value, onChange, placeholder = "Pick a date", disabled, cl
                   "aria-valuetext": segs[k] === null ? "empty" : String(segs[k]),
                   onKeyDown: (e) => onSegmentKeyDown(e, i, spec),
                   onClick: (e) => e.stopPropagation(),
-                  className: cn("rounded-[var(--ds-radius-sm)] px-[2px] outline-none focus:bg-[var(--ds-accent-subtle)] focus:text-[var(--ds-accent-primary)] cursor-text", segs[k] === null && !buffers.current[k] && "text-[var(--ds-text-muted)]"),
+                  className: cn("rounded-[var(--ds-radius-sm)] px-[2px] outline-none focus:bg-[var(--ds-accent-subtle)] focus:text-[var(--ds-accent-primary)] cursor-text", segs[k] === null && !buffers[k] && "text-[var(--ds-text-muted)]"),
                   children: shown(spec)
                 }
               )
@@ -2288,6 +2290,12 @@ function SliderRange({
     )
   ] });
 }
+function fromValue(v, use24Hour) {
+  const m = /^(\d{1,2}):(\d{2})$/.exec(v);
+  if (!m) return { hour: null, minute: null, period: null };
+  const h24 = Number(m[1]);
+  return use24Hour ? { hour: h24, minute: Number(m[2]), period: null } : { hour: h24 % 12 === 0 ? 12 : h24 % 12, minute: Number(m[2]), period: h24 >= 12 ? "PM" : "AM" };
+}
 var CONTROL_HEIGHT4 = {
   sm: "h-[var(--ds-control-height-sm)]",
   md: "h-[var(--ds-control-height-md)]",
@@ -2365,25 +2373,6 @@ function TimePicker({
   const minutes = generateMinutes(minuteStep);
   const isTopLayer = useOverlayLayer(open);
   useCloseOnFocusOut(open, triggerRef, panelRef, () => setOpen(false), isTopLayer);
-  useEffect(() => {
-    if (!open) return;
-    const handler = (e) => {
-      if (triggerRef.current?.contains(e.target) || panelRef.current?.contains(e.target)) return;
-      setOpen(false);
-    };
-    const keyHandler = (e) => {
-      if (e.key === "Escape" && isTopLayer()) {
-        setOpen(false);
-        focusSegment(0);
-      }
-    };
-    document.addEventListener("mousedown", handler);
-    document.addEventListener("keydown", keyHandler);
-    return () => {
-      document.removeEventListener("mousedown", handler);
-      document.removeEventListener("keydown", keyHandler);
-    };
-  }, [open, isTopLayer]);
   useEffect(() => {
     if (!open) return;
     const id2 = requestAnimationFrame(() => {
@@ -2421,19 +2410,13 @@ function TimePicker({
     onChange(`${pad(h24)}:${pad(minute)}`);
   }
   const specs = timeSegments(use24Hour);
-  const fromValue = (v) => {
-    const m = /^(\d{1,2}):(\d{2})$/.exec(v);
-    if (!m) return { hour: null, minute: null, period: null };
-    const h24 = Number(m[1]);
-    return use24Hour ? { hour: h24, minute: Number(m[2]), period: null } : { hour: h24 % 12 === 0 ? 12 : h24 % 12, minute: Number(m[2]), period: h24 >= 12 ? "PM" : "AM" };
-  };
-  const [segs, setSegs] = useState(() => fromValue(value));
-  const buffers = useRef({});
+  const [segs, setSegs] = useState(() => fromValue(value, use24Hour));
+  const [buffers, setBuffers] = useState({});
   const lastCommitted = useRef(null);
   useEffect(() => {
     if (value === lastCommitted.current) return;
-    setSegs(fromValue(value));
-    buffers.current = {};
+    setSegs(fromValue(value, use24Hour));
+    setBuffers({});
   }, [value, use24Hour]);
   const segmentRefs = useRef([]);
   const segmentCount = specs.length + (use24Hour ? 0 : 1);
@@ -2441,6 +2424,26 @@ function TimePicker({
     const el = segmentRefs.current[Math.max(0, Math.min(segmentCount - 1, i))];
     el?.focus();
   };
+  const focusSegmentRef = useLatest(focusSegment);
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e) => {
+      if (triggerRef.current?.contains(e.target) || panelRef.current?.contains(e.target)) return;
+      setOpen(false);
+    };
+    const keyHandler = (e) => {
+      if (e.key === "Escape" && isTopLayer()) {
+        setOpen(false);
+        focusSegmentRef.current(0);
+      }
+    };
+    document.addEventListener("mousedown", handler);
+    document.addEventListener("keydown", keyHandler);
+    return () => {
+      document.removeEventListener("mousedown", handler);
+      document.removeEventListener("keydown", keyHandler);
+    };
+  }, [open, isTopLayer, focusSegmentRef]);
   const commitIfComplete = (next) => {
     if (next.hour === null || next.minute === null) return;
     let h24 = next.hour;
@@ -2462,9 +2465,9 @@ function TimePicker({
   const applyTyped = (text) => {
     const parsed2 = parseTypedTime(text, use24Hour);
     if (!parsed2) return;
-    const next = fromValue(parsed2);
+    const next = fromValue(parsed2, use24Hour);
     setSegs(next);
-    buffers.current = {};
+    setBuffers({});
     commitIfComplete(next);
   };
   const onSegmentKeyDown = (e, index, spec) => {
@@ -2489,33 +2492,34 @@ function TimePicker({
       return;
     }
     const k = spec.key;
+    const clearBuffer = () => setBuffers((b) => ({ ...b, [k]: "" }));
     if (key === "ArrowUp" || key === "ArrowDown") {
-      buffers.current[k] = "";
+      clearBuffer();
       setSegment(k, stepValue(spec, segs[k], key === "ArrowUp" ? 1 : -1));
       return;
     }
     if (key === "Home") {
-      buffers.current[k] = "";
+      clearBuffer();
       setSegment(k, spec.min);
       return;
     }
     if (key === "End") {
-      buffers.current[k] = "";
+      clearBuffer();
       setSegment(k, spec.max);
       return;
     }
     if (key === "Backspace" || key === "Delete") {
-      if (segs[k] === null && !buffers.current[k]) {
+      if (segs[k] === null && !buffers[k]) {
         focusSegment(index - 1);
         return;
       }
-      buffers.current[k] = "";
+      clearBuffer();
       setSegment(k, null, false);
       return;
     }
     if (/^\d$/.test(key)) {
-      const r = typeDigit(spec, buffers.current[k] ?? "", key);
-      buffers.current[k] = r.advance ? "" : r.buffer;
+      const r = typeDigit(spec, buffers[k] ?? "", key);
+      setBuffers((b) => ({ ...b, [k]: r.advance ? "" : r.buffer }));
       setSegment(k, r.value);
       if (r.advance) focusSegment(index + 1);
       return;
@@ -2526,7 +2530,7 @@ function TimePicker({
     }
   };
   const shown = (k, spec) => {
-    const b = buffers.current[k];
+    const b = buffers[k];
     if (b && segs[k] === null) return b;
     return segs[k] === null ? spec.placeholder : pad2(segs[k]);
   };
@@ -2585,7 +2589,7 @@ function TimePicker({
                     "aria-valuetext": segs[k] === null ? "empty" : pad2(segs[k]),
                     onKeyDown: (e) => onSegmentKeyDown(e, i, spec),
                     onClick: (e) => e.stopPropagation(),
-                    className: cn("rounded-[var(--ds-radius-sm)] px-[2px] outline-none focus:bg-[var(--ds-accent-subtle)] focus:text-[var(--ds-accent-primary)] cursor-text", segs[k] === null && !buffers.current[k] && "text-[var(--ds-text-muted)]"),
+                    className: cn("rounded-[var(--ds-radius-sm)] px-[2px] outline-none focus:bg-[var(--ds-accent-subtle)] focus:text-[var(--ds-accent-primary)] cursor-text", segs[k] === null && !buffers[k] && "text-[var(--ds-text-muted)]"),
                     children: shown(k, spec)
                   }
                 )
@@ -3855,10 +3859,19 @@ function collectInvalidFields(form) {
   }
   return out;
 }
-function FormWrapper({ onSubmit, validationMode: validationModeProp, children, actions, actionsAlign: actionsAlignProp, focusFirstError = true, errorSummary = true, className, ref }) {
-  const preferences = usePreferences();
+function FormWrapper({ onSubmit, validationMode: validationModeProp, children, actions: actionsProp, actionsAlign: actionsAlignProp, onCancel, cancelLabel = "Cancel", focusFirstError = true, errorSummary = true, className, ref }) {
+  const preferences = useShellPreferences();
   const validationMode = validationModeProp ?? preferences.validationTiming ?? "onSubmit";
   const actionsAlign = actionsAlignProp ?? preferences.formActions?.align ?? "end";
+  const overlayClose = useContext(OverlayCloseCtx);
+  const actions = useMemo(() => {
+    if (!onCancel) return actionsProp;
+    const cancel = /* @__PURE__ */ jsx(Button, { type: "button", variant: "secondary", onClick: () => (overlayClose ?? onCancel)(), children: cancelLabel }, "gs-form-cancel");
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      cancel,
+      actionsProp
+    ] });
+  }, [actionsProp, onCancel, overlayClose, cancelLabel]);
   const [errors, setErrors] = useState({});
   const [submitted, setSubmitted] = useState(false);
   const [submitCount, setSubmitCount] = useState(0);
@@ -4197,6 +4210,17 @@ function PanelCheckbox({ checked, indeterminate, onClick, label }) {
     }
   );
 }
+
+// ../../showcase/src/lib/initials.ts
+function initialsOf(name) {
+  return name.trim().split(/\s+/).filter(Boolean).slice(0, 2).map((word) => Array.from(word)[0] ?? "").join("").toUpperCase();
+}
+function toInitials(value) {
+  const s = value.trim();
+  if (!s) return "";
+  if (!/\s/.test(s) && Array.from(s).length <= 3) return s;
+  return initialsOf(s);
+}
 var variantColors = {
   success: "bg-[var(--ds-status-success)]",
   warning: "bg-[var(--ds-status-warning)]",
@@ -4305,7 +4329,7 @@ function Avatar({ initials, src, alt, size = "md", status, color = "auto", class
         colorStyles(color, alt ?? initials ?? ""),
         "border-[length:var(--ds-border-width)] border-transparent"
       ),
-      children: initials
+      children: initials != null ? toInitials(initials) : null
     }
   );
   if (!status) return avatarElement;
@@ -5239,7 +5263,7 @@ function Table({
     (col) => col.kind ?? inferredKinds.get(col.key),
     [inferredKinds]
   );
-  const preferences = usePreferences();
+  const preferences = useShellPreferences();
   const mobileBreakpoint = mobileBreakpointProp ?? preferences.tableToCardsBreakpoint ?? "md";
   const isMobile = useBreakpoint(mobileBreakpoint);
   if (isMobile) {
@@ -7204,7 +7228,7 @@ function renderIcon(icon) {
   return icon;
 }
 function EmptyState({ icon, iconFrame = "circle", title, description, action, variant = "empty", bordered = false, style: styleProp, className }) {
-  const preferences = usePreferences();
+  const preferences = useShellPreferences();
   const style = styleProp ?? (preferences.emptyStyle === "text-cta" ? "text" : "illustration");
   const iconNode = style === "text" ? void 0 : icon === void 0 || icon === null ? void 0 : renderIcon(icon);
   return /* @__PURE__ */ jsxs(
@@ -7227,9 +7251,6 @@ function EmptyState({ icon, iconFrame = "circle", title, description, action, va
     }
   );
 }
-function initialsOf(name) {
-  return name.trim().split(/\s+/).slice(0, 2).map((w) => w[0] ?? "").join("").toUpperCase();
-}
 function looksLikeUrl(s) {
   return /^(?:https?:|data:|blob:|\/|\.{1,2}\/)/.test(s) || /\.[a-z]{2,5}(?:$|[?#])/i.test(s);
 }
@@ -7285,6 +7306,7 @@ function TableToolbar({
   onClearAll,
   resultCount,
   resultNoun = ["result", "results"],
+  pagination,
   actions,
   size = "sm",
   compactBreakpoint = 680,
@@ -7304,8 +7326,14 @@ function TableToolbar({
   const hasChips = !!activeFilters?.length;
   const inPane = useContext(SplitPaneCtx);
   const searchFills = inPane || !primaryFilter && !filters && !actions;
-  return /* @__PURE__ */ jsx(ControlSizeContext.Provider, { value: size, children: /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-ds-3 min-w-0", className), "data-table-toolbar": "", children: [
-    /* @__PURE__ */ jsxs("div", { ref: rowRef, className: "flex items-center gap-ds-2 flex-wrap", children: [
+  const hasControls = !!(search || primaryFilter || filters || actions);
+  const noun = (n) => n === 1 ? resultNoun[0] : resultNoun[1];
+  const total = resultCount ?? pagination?.totalItems;
+  const paged = total !== void 0 && !!pagination && pagination.pageSize > 0 && total > pagination.pageSize;
+  const countText = total === void 0 ? null : paged ? `Showing ${Math.min((pagination.page - 1) * pagination.pageSize + 1, total)}\u2013${Math.min(pagination.page * pagination.pageSize, total)} of ${total} ${noun(total)}` : resultCount !== void 0 ? `${resultCount} ${noun(resultCount)}` : null;
+  if (!hasControls && countText === null && !hasChips) return null;
+  return /* @__PURE__ */ jsx(ControlSizeContext.Provider, { value: size, children: /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-ds-3 min-w-0 mb-ds-3 last:mb-0", className), "data-table-toolbar": "", children: [
+    hasControls && /* @__PURE__ */ jsxs("div", { ref: rowRef, className: "flex items-center gap-ds-2 flex-wrap", children: [
       search && /* @__PURE__ */ jsx(
         Input,
         {
@@ -7358,12 +7386,8 @@ function TableToolbar({
       ] })
     ] }),
     filters && open && /* @__PURE__ */ jsx("div", { id: filterRowId, className: "flex items-center gap-ds-3 flex-wrap", children: filters }),
-    (resultCount !== void 0 || hasChips) && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-ds-2 flex-wrap", children: [
-      resultCount !== void 0 && /* @__PURE__ */ jsxs("span", { className: "text-xs text-[var(--ds-text-muted)]", "aria-live": "polite", children: [
-        resultCount,
-        " ",
-        resultCount === 1 ? resultNoun[0] : resultNoun[1]
-      ] }),
+    (countText !== null || hasChips) && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-ds-2 flex-wrap", children: [
+      countText !== null && /* @__PURE__ */ jsx("span", { className: "text-xs text-[var(--ds-text-muted)]", "aria-live": "polite", "data-result-count": "", children: countText }),
       activeFilters?.map((f) => /* @__PURE__ */ jsx(Tag, { size: "sm", variant: "subtle", onRemove: f.onRemove, children: f.label }, f.id)),
       hasChips && onClearAll && /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onClick: onClearAll, children: "Clear all" })
     ] })
@@ -8393,16 +8417,18 @@ var TOAST_INSET_VARS = {
   "bottom-right": "--ds-toast-inset-bottom-right",
   "bottom-left": "--ds-toast-inset-bottom-left",
   right: "--ds-toast-inset-right",
-  left: "--ds-toast-inset-left"
+  left: "--ds-toast-inset-left",
+  top: "--ds-toast-inset-top"
 };
 var LAUNCHER_INSET_PRIORITY = 1;
 var PANEL_INSET_PRIORITY = 2;
+var NAVBAR_INSET_PRIORITY = 1;
 var registry = /* @__PURE__ */ new WeakMap();
 var seq = 0;
 function claimsFor(target) {
   let entry = registry.get(target);
   if (!entry) {
-    entry = { "bottom-right": [], "bottom-left": [], right: [], left: [] };
+    entry = { "bottom-right": [], "bottom-left": [], right: [], left: [], top: [] };
     registry.set(target, entry);
   }
   return entry;
@@ -9823,7 +9849,7 @@ function Popover({ open, onOpenChange, trigger, children, side = "bottom", align
 }
 function Pagination({ currentPage, totalPages, onPageChange, pageSize: pageSizeProp, pageSizeOptions, onPageSizeChange, className }) {
   const pages = buildPageRange(currentPage, totalPages);
-  const preferences = usePreferences();
+  const preferences = useShellPreferences();
   const pageSize = pageSizeProp ?? preferences.itemsPerPage;
   return /* @__PURE__ */ jsxs("nav", { "aria-label": "Pagination", className: cn("flex flex-wrap items-center gap-ds-3", className), children: [
     pageSizeOptions && pageSize != null && onPageSizeChange && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-ds-2", children: [
@@ -12608,6 +12634,31 @@ var Navbar = forwardRef(function Navbar2({
     ro.observe(header);
     return () => ro.disconnect();
   }, [mobileHidesLinks, links]);
+  const [topInset, setTopInset] = useState(null);
+  const shellEl = appShell?.container ?? null;
+  useLayoutEffect(() => {
+    const header = headerRef.current;
+    if (!shellEl || !header) {
+      setTopInset(null);
+      return;
+    }
+    const measure = () => {
+      const shell = shellEl.getBoundingClientRect();
+      const fillsWindow = shell.top <= 1 && shell.height >= window.innerHeight - 1;
+      const bottom = Math.round(header.getBoundingClientRect().bottom);
+      setTopInset(fillsWindow && bottom > 0 ? `calc(${bottom}px + var(--ds-space-3))` : null);
+    };
+    measure();
+    window.addEventListener("resize", measure);
+    const ro = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(measure);
+    ro?.observe(header);
+    ro?.observe(shellEl);
+    return () => {
+      window.removeEventListener("resize", measure);
+      ro?.disconnect();
+    };
+  }, [shellEl]);
+  useCornerInset(topInset ? "top" : null, topInset, NAVBAR_INSET_PRIORITY);
   const hidden = useMemo(() => {
     if (visibleCount === null || links.length === 0) return /* @__PURE__ */ new Set();
     return new Set(links.map((_, i) => i).filter((i) => i >= visibleCount));
@@ -12957,7 +13008,7 @@ function Dialog({ open, onClose: onCloseProp, title, description, children, foot
                             }
                           ),
                           description && /* @__PURE__ */ jsx("p", { id: descriptionId, className: "mt-ds-2 text-sm text-[var(--ds-text-muted)]", children: description }),
-                          children && /* @__PURE__ */ jsx("div", { className: "mt-ds-4", children })
+                          children && /* @__PURE__ */ jsx("div", { className: "mt-ds-4", children: /* @__PURE__ */ jsx(OverlayCloseCtx, { value: onClose, children }) })
                         ] })
                       ] }) }),
                       /* @__PURE__ */ jsx(DiscardConfirm, { open: guard.confirming, onKeep: guard.keep, onDiscard: guard.discard }),
@@ -13834,11 +13885,11 @@ var variantIcons = {
   error: { name: "error", className: "text-[var(--ds-status-error)]" }
 };
 var TOAST_POSITION_CLASSES = {
-  "top-right": "top-ds-4 right-[var(--ds-toast-inset-right)]",
-  "top-left": "top-ds-4 left-[var(--ds-toast-inset-left)]",
+  "top-right": "top-[var(--ds-toast-inset-top)] right-[var(--ds-toast-inset-right)]",
+  "top-left": "top-[var(--ds-toast-inset-top)] left-[var(--ds-toast-inset-left)]",
   "bottom-right": "bottom-[var(--ds-toast-inset-bottom-right)] right-[var(--ds-toast-inset-right)]",
   "bottom-left": "bottom-[var(--ds-toast-inset-bottom-left)] left-[var(--ds-toast-inset-left)]",
-  "top-center": "top-ds-4 left-1/2 -translate-x-1/2",
+  "top-center": "top-[var(--ds-toast-inset-top)] left-1/2 -translate-x-1/2",
   "bottom-center": "bottom-ds-4 left-1/2 -translate-x-1/2"
 };
 function Toast({ variant = "default", message, visible, onDismiss, duration = 5e3, pauseOnHover = false, action, position = "bottom-right", mode, container, inline = false }) {
@@ -14036,9 +14087,62 @@ function ToastProvider({ children, maxVisible = 1, position = "bottom-right", du
     )
   ] });
 }
+function firstKey(item) {
+  if (item !== null && typeof item === "object") return "id" in item ? item.id : void 0;
+  return item;
+}
+function signature(list, resetOn) {
+  let reset = "";
+  try {
+    reset = JSON.stringify(resetOn ?? null);
+  } catch {
+    reset = String(resetOn);
+  }
+  let first = "";
+  try {
+    first = JSON.stringify(firstKey(list[0]) ?? null);
+  } catch {
+    first = "";
+  }
+  return `${list.length}|${first}|${reset}`;
+}
+function usePagination(list, options = {}) {
+  const shell = useShellPreferences();
+  const [chosenSize, setChosenSize] = useState(null);
+  const pageSize = Math.max(1, Math.floor(chosenSize ?? options.pageSize ?? shell.itemsPerPage ?? PREFERENCE_HOUSE_DEFAULTS.itemsPerPage));
+  const [page, setPageState] = useState(1);
+  const sig = signature(list, options.resetOn);
+  const [seen, setSeen] = useState(sig);
+  if (seen !== sig) {
+    setSeen(sig);
+    if (page !== 1) setPageState(1);
+  }
+  const totalItems = list.length;
+  const totalPages = Math.max(1, Math.ceil(totalItems / pageSize));
+  const current = Math.min(Math.max(1, seen !== sig ? 1 : page), totalPages);
+  const start = (current - 1) * pageSize;
+  const items = list.slice(start, start + pageSize);
+  const range = totalItems === 0 ? [0, 0] : [start + 1, start + items.length];
+  const setPage = (next) => setPageState(Math.min(Math.max(1, Math.floor(next)), totalPages));
+  const setPageSize = (size) => {
+    setChosenSize(Math.max(1, Math.floor(size)));
+    setPageState(1);
+  };
+  return {
+    items,
+    page: current,
+    pageSize,
+    totalItems,
+    totalPages,
+    range,
+    setPage,
+    setPageSize,
+    props: { currentPage: current, totalPages, onPageChange: setPage, pageSize, onPageSizeChange: setPageSize }
+  };
+}
 function useDestructiveAction(options) {
   const { action, title, description, confirmLabel, typeToConfirm, onConfirm, onUndo, undoMessage, severity } = options;
-  const preferences = usePreferences();
+  const preferences = useShellPreferences();
   const toast = useToastOptional();
   const [open, setOpen] = useState(false);
   const [typed, setTyped] = useState("");
@@ -14244,6 +14348,6 @@ var TextOverflow = forwardRef(function TextOverflow2({
   return /* @__PURE__ */ jsx(Tooltip, { content: resolvedTooltipContent, children: content });
 });
 
-export { Accordion, ActionPanel, ActionPanelGroup, Alert, AsidePanel, Avatar, AvatarGroup, BottomNav, Breadcrumbs, BulkActionBar, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, ChatMessageList, ChatPanel, Checkbox, CheckboxGroup, CheckboxGroupItem, Collapsible, ColorPicker, Combobox, CommandPalette, ContextMenu, CornerPanel, DEFAULT_DATE_RANGE_PRESETS, DataList, DatePicker, DateRangePicker, DescriptionList, Dialog, Dock, Dropdown, DropdownMenu, EmptyState, EntityCell, Field, FileUpload, FormWrapper, HoverCard, InlineFieldError, Input, Kbd, Label, Launcher, MentionInput, MobileHeaderMenu, NavItem, NavMenu, Navbar, NotificationCenter, NumberInput, PageContainer, PageHeader, Pagination, PinInput, Popover, Progress, RadioGroup, Rating, ScrollArea, SectionHeading, SegmentedControl, SettingsLayout, Sidebar, SidebarNav, SliderRange, StackedList, StatsCard, StatusDot, Stepper, Table, TableToolbar, Tabs, Tag, TagInput, TextOverflow, Textarea, TimePicker, Timeline, Toast, ToastProvider, Toggle, Tour, TransferList, TreeView, useContentWidth, useDestructiveAction, useFormContext, useSidebar, useToast, useToastOptional };
+export { Accordion, ActionPanel, ActionPanelGroup, Alert, AsidePanel, Avatar, AvatarGroup, BottomNav, Breadcrumbs, BulkActionBar, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, ChatMessageList, ChatPanel, Checkbox, CheckboxGroup, CheckboxGroupItem, Collapsible, ColorPicker, Combobox, CommandPalette, ContextMenu, CornerPanel, DEFAULT_DATE_RANGE_PRESETS, DataList, DatePicker, DateRangePicker, DescriptionList, Dialog, Dock, Dropdown, DropdownMenu, EmptyState, EntityCell, Field, FileUpload, FormWrapper, HoverCard, InlineFieldError, Input, Kbd, Label, Launcher, MentionInput, MobileHeaderMenu, NavItem, NavMenu, Navbar, NotificationCenter, NumberInput, PageContainer, PageHeader, Pagination, PinInput, Popover, Progress, RadioGroup, Rating, ScrollArea, SectionHeading, SegmentedControl, SettingsLayout, Sidebar, SidebarNav, SliderRange, StackedList, StatsCard, StatusDot, Stepper, Table, TableToolbar, Tabs, Tag, TagInput, TextOverflow, Textarea, TimePicker, Timeline, Toast, ToastProvider, Toggle, Tour, TransferList, TreeView, useContentWidth, useDestructiveAction, useFormContext, usePagination, useSidebar, useToast, useToastOptional };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map