gridsmith-ui 0.11.0 → 0.12.0

package/dist/index.d.ts

@@ -433,6 +433,15 @@ interface FormWrapperProps {
      */
     actions?: ReactNode;
     actionsAlign?: "start" | "end";
+    /**
+     * Renders a secondary Cancel before the actions. Inside a Drawer, Sheet or Dialog it closes the overlay through its
+     * unsaved-changes check — the question Escape and the close control ask while the form is dirty — and the overlay's
+     * onClose runs; anywhere else this function runs. Never hand-wire a Cancel to the overlay's close: it skips the
+     * question (round 21, run 58).
+     */
+    onCancel?: () => void;
+    /** The Cancel button's label (default "Cancel"). */
+    cancelLabel?: string;
     /** After a failed submit, scroll to and focus the first invalid field (default on). */
     focusFirstError?: boolean;
     /**
@@ -443,7 +452,7 @@ interface FormWrapperProps {
     className?: string;
     ref?: React.Ref<HTMLFormElement>;
 }
-declare function FormWrapper({ onSubmit, validationMode: validationModeProp, children, actions, actionsAlign: actionsAlignProp, focusFirstError, errorSummary, className, ref }: FormWrapperProps): react_jsx_runtime.JSX.Element;
+declare function FormWrapper({ onSubmit, validationMode: validationModeProp, children, actions: actionsProp, actionsAlign: actionsAlignProp, onCancel, cancelLabel, focusFirstError, errorSummary, className, ref }: FormWrapperProps): react_jsx_runtime.JSX.Element;
 
 interface TransferItem {
     id: string;
@@ -716,6 +725,7 @@ declare const Tag: react.ForwardRefExoticComponent<TagProps & react.RefAttribute
 type AvatarStatus = "online" | "away" | "busy" | "offline";
 type AvatarColor = "auto" | "accent" | "neutral" | 1 | 2 | 3 | 4 | 5;
 interface AvatarProps {
+    /** One to three letters ("JB"). A name passed here shows its initials ("Amara Haddad" → "AH"), never the whole name. */
     initials?: string;
     src?: string;
     alt?: string;
@@ -791,7 +801,7 @@ interface EntityCellProps {
     avatar?: ReactNode;
     /** An image URL for the avatar. */
     src?: string;
-    /** Initials for the avatar. Absent, and with no src or element, they are derived from `primary` ("Sarah Chen" → "SC"). */
+    /** Leave it out: with no src or element the initials come from `primary` ("Sarah Chen" → "SC"). A name passed here shows its initials too (round 21). */
     initials?: string;
     primary: string;
     secondary?: string;
@@ -850,6 +860,17 @@ interface TableToolbarProps {
     /** How many rows match; shown with `resultNoun`. */
     resultCount?: number;
     resultNoun?: [singular: string, plural: string];
+    /**
+     * The list is paged: pass the `usePagination` result and the count says which rows are showing — "Showing 51–100 of
+     * 200 events" — instead of a bare total the table does not show (round 21, the owner's call); one page reads
+     * "12 events". Under tabs that carry the counts, pass the pager alone (no resultCount): the line then shows only the
+     * range, and only while the list spans pages — the tabs already say how many (gs:count-duplicated-by-tabs).
+     */
+    pagination?: {
+        page: number;
+        pageSize: number;
+        totalItems?: number;
+    };
     /** Utility actions on the right — an overflow DropdownMenu, an export button. Primary actions belong in the PageHeader. */
     actions?: ReactNode;
     size?: "sm" | "md";
@@ -865,7 +886,7 @@ interface TableToolbarProps {
  * component, so a page never hand-rolls the row. Primary actions belong in
  * the PageHeader, not here.
  */
-declare function TableToolbar({ search, primaryFilter, filters, filtersOpen, onFiltersOpenChange, activeFilterCount, activeFilters, onClearAll, resultCount, resultNoun, actions, size, compactBreakpoint, className, }: TableToolbarProps): react_jsx_runtime.JSX.Element;
+declare function TableToolbar({ search, primaryFilter, filters, filtersOpen, onFiltersOpenChange, activeFilterCount, activeFilters, onClearAll, resultCount, resultNoun, pagination, actions, size, compactBreakpoint, className, }: TableToolbarProps): react_jsx_runtime.JSX.Element | null;
 
 interface TimelineItem {
     title: string;
@@ -2170,8 +2191,29 @@ interface AppShellPreferences {
     undoWindowSeconds?: number;
 }
 declare const PreferencesContext: react.Context<AppShellPreferences | null>;
-/** The shell's preferences, or an empty object outside any shell — so `usePreferences().itemsPerPage ?? 25` reads naturally. */
-declare function usePreferences(): AppShellPreferences;
+/** Every preference in force, the shell's value or the house default — what app code reads. */
+interface ResolvedPreferences {
+    validationTiming: PreferenceValidationTiming;
+    formActions: {
+        align: "start" | "end";
+        placement: "auto" | "inline";
+    };
+    itemsPerPage: number;
+    tableToCardsBreakpoint: PreferenceBreakpoint;
+    emptyStyle: PreferenceEmptyStyle;
+    loadingStyle: PreferenceLoadingStyle;
+    destructiveMode: PreferenceDestructiveMode;
+    highSeverityActions: string[];
+    typeToConfirmActions: string[];
+    undoWindowSeconds: number;
+}
+/**
+ * For app code: every preference in force — the shell's value, else the house default — so a page never writes a
+ * fallback of its own. Round 21 (run 58): with every field optional, TypeScript made the builder write
+ * `const { itemsPerPage = 20 } = usePreferences()`, a second copy of the preference it then edited by hand when the
+ * rule changed. Paged lists use `usePagination`, which reads the page size itself.
+ */
+declare function usePreferences(): ResolvedPreferences;
 /**
  * "Remove range" → "remove_range": the key the high-severity and type-to-confirm lists use. The engine's `actionKey`
  * (platform/src/lib/destructive-mode.ts) is the same rule for compliance; a platform test keeps the two identical.
@@ -2277,6 +2319,49 @@ interface AppShellProps {
 }
 declare const AppShell: react.ForwardRefExoticComponent<AppShellProps & react.RefAttributes<HTMLDivElement>>;
 
+/**
+ * A paged list in one hook (round 21). The page size is the project's `dataDisplay.itemsPerPage`, read from the
+ * shell, so a mid-build `update_rule` reaches every paged list with no page edited; the page gets its slice, the
+ * props for `<Pagination>` and the numbers the count line needs ("Showing 51–100 of 200 events").
+ *
+ * Run 58 showed why: both pages hand-wrote the same slicing, a `totalPages` sum and a fallback page size of their
+ * own, and the count line above the table said "200 events" while the table showed fifty.
+ *
+ *   const pager = usePagination(sortedEvents, { resetOn: [sortKey, sortDir] })
+ *   <TableToolbar resultCount={sortedEvents.length} resultNoun={["event", "events"]} pagination={pager} />
+ *   <Table columns={columns} data={pager.items.map(toRow)} />
+ *   <Pagination {...pager.props} />
+ */
+interface Pager<T> {
+    /** This page's slice of the list. */
+    items: T[];
+    /** The current page, from 1. */
+    page: number;
+    pageSize: number;
+    totalItems: number;
+    totalPages: number;
+    /** The first and last item numbers on this page, from 1 ("Showing 51–100"); [0, 0] for an empty list. */
+    range: [number, number];
+    setPage: (page: number) => void;
+    /** A page-size selector's choice; it wins over the project's page size and starts again at page 1. */
+    setPageSize: (size: number) => void;
+    /** Spread onto <Pagination>. */
+    props: {
+        currentPage: number;
+        totalPages: number;
+        onPageChange: (page: number) => void;
+        pageSize: number;
+        onPageSizeChange: (size: number) => void;
+    };
+}
+interface PaginationOptions {
+    /** A fixed page size for this list, over the project's. Leave it out: the project's page size is the rule. */
+    pageSize?: number;
+    /** Values that start the list again at page 1 when they change — the sort column and direction, a search query. */
+    resetOn?: unknown;
+}
+declare function usePagination<T>(list: readonly T[], options?: PaginationOptions): Pager<T>;
+
 interface DestructiveActionOptions {
     /** The action's key as the preference lists name it ("remove_range"); derived from `title` when omitted. */
     action?: string;
@@ -2452,4 +2537,4 @@ interface UseTextOverflowResult {
  */
 declare function useTextOverflow(options?: UseTextOverflowOptions): UseTextOverflowResult;
 
-export { Accordion, ActionPanel, ActionPanelGroup, Alert, type AlertPlacement, AppShell, type AppShellContextValue, type AppShellPreferences, type AppShellTheme, AsidePanel, type AsidePanelProps, type AsidePanelSide, Avatar, AvatarGroup, type AvatarGroupItem, type AvatarGroupProps, type AvatarStatus, Badge, type BadgePaletteColor, type BadgeSeverity, type BadgeSize, type BadgeVariant, BottomNav, type BottomNavItem, type BreadcrumbItem$1 as BreadcrumbItem, Breadcrumbs, type BreadcrumbsSeparator, type BreadcrumbsSize, type BreadcrumbsVariant, BreakpointKey, BulkActionBar, Button, ButtonSizeContext, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, type CardSelectType, CardTitle, type CardVariant, Carousel, type ChatMessage, type ChatMessageAction, type ChatMessageLayout, ChatMessageList, type ChatMessageSender, type ChatMessageSource, type ChatMessageStatus, ChatPanel, type ChatPanelProps, type ChatPanelStatusTone, Checkbox, CheckboxGroup, CheckboxGroupItem, CodeBlock, Collapsible, ColorPicker, type Column, Combobox, CommandPalette, ContextMenu, type ControlSize, ControlSizeContext, CornerPanel, type CornerPanelEdge, type CornerPanelProps, DEFAULT_DATE_RANGE_PRESETS, DataList, DatePicker, type DateRange, DateRangePicker, type DateRangePickerProps, type DateRangePreset, type DescriptionItem, DescriptionList, type DescriptionListOrientation, type DescriptionListSize, type DestructiveActionHandle, type DestructiveActionOptions, Dialog, Divider, Dock, Drawer, Dropdown, DropdownMenu, type DropdownMenuDivider, type DropdownMenuEntry, type DropdownMenuItem, EmptyState, EntityCell, Field, type FieldControlProps, type FieldProps, FileUpload, FormWrapper, HoverCard, InlineFieldError, Input, Kbd, Label, Launcher, type LauncherEdge, type LauncherProps, type LauncherVariant, type LauncherWhenOpen, Link, type LinkProps, MentionInput, MobileHeaderMenu, type MobileHeaderMenuItemData, type MobileHeaderMenuType, NavItem, type NavItemProps, type NavItemType, NavMenu, type NavMenuItem, Navbar, type NavbarSize, type NavbarType, type NavbarVariant, NotificationCenter, NumberInput, PageContainer, type PageContainerWidth, PageHeader, type PageHeaderBehavior, type PageHeaderIntensity, type PageHeaderProps, type PageHeaderVariant, Pagination, PinInput, Popover, PreferencesContext, Progress, type PromiseToastMessages, RadioGroup, Rating, ScrollArea, SectionHeading, type SectionHeadingProps, SegmentedControl, SettingsLayout, type SettingsLayoutProps, type SettingsSection, Sheet, Sidebar, type SidebarContextValue, type SidebarItem, SidebarNav, type SidebarNavSize, type SidebarPosition, type SidebarSection, type SidebarType, Skeleton, SkipLink, SliderRange, Spinner, StackedList, type StackedListVariant, StatsCard, StatusDot, type StatusDotVariant, Stepper, type Tab, Table, type TableDensity, type TableProps, TableToolbar, type TableToolbarActiveFilter, type TableToolbarFilterOption, Tabs, Tag, TagInput, type TagPaletteColor, type TagVariant, TextOverflow, type TextOverflowProps, Textarea, TimePicker, Timeline, Toast, type ToastAction, type ToastApi, type ToastOptions, type ToastPosition, ToastProvider, type ToastVariant, Toggle, Tooltip, Tour, TransferList, TreeView, type Trend, type UseTextOverflowOptions, type UseTextOverflowResult, preferenceActionKey, useAppShell, useContentWidth, useDestructiveAction, useFormContext, usePreferences, useSidebar, useTextOverflow, useToast, useToastOptional };
+export { Accordion, ActionPanel, ActionPanelGroup, Alert, type AlertPlacement, AppShell, type AppShellContextValue, type AppShellPreferences, type AppShellTheme, AsidePanel, type AsidePanelProps, type AsidePanelSide, Avatar, AvatarGroup, type AvatarGroupItem, type AvatarGroupProps, type AvatarStatus, Badge, type BadgePaletteColor, type BadgeSeverity, type BadgeSize, type BadgeVariant, BottomNav, type BottomNavItem, type BreadcrumbItem$1 as BreadcrumbItem, Breadcrumbs, type BreadcrumbsSeparator, type BreadcrumbsSize, type BreadcrumbsVariant, BreakpointKey, BulkActionBar, Button, ButtonSizeContext, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, type CardSelectType, CardTitle, type CardVariant, Carousel, type ChatMessage, type ChatMessageAction, type ChatMessageLayout, ChatMessageList, type ChatMessageSender, type ChatMessageSource, type ChatMessageStatus, ChatPanel, type ChatPanelProps, type ChatPanelStatusTone, Checkbox, CheckboxGroup, CheckboxGroupItem, CodeBlock, Collapsible, ColorPicker, type Column, Combobox, CommandPalette, ContextMenu, type ControlSize, ControlSizeContext, CornerPanel, type CornerPanelEdge, type CornerPanelProps, DEFAULT_DATE_RANGE_PRESETS, DataList, DatePicker, type DateRange, DateRangePicker, type DateRangePickerProps, type DateRangePreset, type DescriptionItem, DescriptionList, type DescriptionListOrientation, type DescriptionListSize, type DestructiveActionHandle, type DestructiveActionOptions, Dialog, Divider, Dock, Drawer, Dropdown, DropdownMenu, type DropdownMenuDivider, type DropdownMenuEntry, type DropdownMenuItem, EmptyState, EntityCell, Field, type FieldControlProps, type FieldProps, FileUpload, FormWrapper, HoverCard, InlineFieldError, Input, Kbd, Label, Launcher, type LauncherEdge, type LauncherProps, type LauncherVariant, type LauncherWhenOpen, Link, type LinkProps, MentionInput, MobileHeaderMenu, type MobileHeaderMenuItemData, type MobileHeaderMenuType, NavItem, type NavItemProps, type NavItemType, NavMenu, type NavMenuItem, Navbar, type NavbarSize, type NavbarType, type NavbarVariant, NotificationCenter, NumberInput, PageContainer, type PageContainerWidth, PageHeader, type PageHeaderBehavior, type PageHeaderIntensity, type PageHeaderProps, type PageHeaderVariant, type Pager, Pagination, type PaginationOptions, PinInput, Popover, PreferencesContext, Progress, type PromiseToastMessages, RadioGroup, Rating, type ResolvedPreferences, ScrollArea, SectionHeading, type SectionHeadingProps, SegmentedControl, SettingsLayout, type SettingsLayoutProps, type SettingsSection, Sheet, Sidebar, type SidebarContextValue, type SidebarItem, SidebarNav, type SidebarNavSize, type SidebarPosition, type SidebarSection, type SidebarType, Skeleton, SkipLink, SliderRange, Spinner, StackedList, type StackedListVariant, StatsCard, StatusDot, type StatusDotVariant, Stepper, type Tab, Table, type TableDensity, type TableProps, TableToolbar, type TableToolbarActiveFilter, type TableToolbarFilterOption, Tabs, Tag, TagInput, type TagPaletteColor, type TagVariant, TextOverflow, type TextOverflowProps, Textarea, TimePicker, Timeline, Toast, type ToastAction, type ToastApi, type ToastOptions, type ToastPosition, ToastProvider, type ToastVariant, Toggle, Tooltip, Tour, TransferList, TreeView, type Trend, type UseTextOverflowOptions, type UseTextOverflowResult, preferenceActionKey, useAppShell, useContentWidth, useDestructiveAction, useFormContext, usePagination, usePreferences, useSidebar, useTextOverflow, useToast, useToastOptional };

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';
@@ -3859,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);
@@ -4201,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)]",
@@ -4309,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;
@@ -5243,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) {
@@ -7208,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(
@@ -7231,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);
 }
@@ -7289,6 +7306,7 @@ function TableToolbar({
   onClearAll,
   resultCount,
   resultNoun = ["result", "results"],
+  pagination,
   actions,
   size = "sm",
   compactBreakpoint = 680,
@@ -7308,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,
         {
@@ -7362,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" })
     ] })
@@ -8397,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;
@@ -9827,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: [
@@ -12612,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));
@@ -12961,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 }),
@@ -13838,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 }) {
@@ -14040,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("");
@@ -14248,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