@marktiderman/genesis-ui 1.2.0 → 1.3.0

package/dist/components/data/index.d.ts

@@ -1,19 +1,83 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { ReactNode, RefObject } from 'react';
+import { LucideIcon } from 'lucide-react';
 import { V as ViewMode } from '../../ViewToggle-DDe_Luj2.js';
 export { a as ViewToggle } from '../../ViewToggle-DDe_Luj2.js';
-import { LucideIcon } from 'lucide-react';
 import { Density } from '../../hooks/use-view-settings.js';
-import { a as ResourceColumnDef } from '../../use-resource-page-B-CFcikK.js';
-export { D as DataTable, c as DataTableColumn, d as DataTableProps, L as LinkCell, R as ResourceActions, T as ThumbnailCell } from '../../use-resource-page-B-CFcikK.js';
-import { L as LinkComponent, N as NavigateFn } from '../../navigation-qI86Ldug.js';
-export { D as DefaultLink, G as GenesisLinkProps, d as defaultNavigate, i as isPathActive } from '../../navigation-qI86Ldug.js';
+import { a as ResourceColumnDef } from '../../use-resource-page-BXBv_Xah.js';
+export { D as DataTable, c as DataTableColumn, d as DataTableProps, L as LinkCell, R as ResourceActions, T as ThumbnailCell } from '../../use-resource-page-BXBv_Xah.js';
+import { L as LinkComponent, N as NavigateFn } from '../../navigation-CpOEyUSb.js';
+export { D as DefaultLink, G as GenesisLinkProps, d as defaultNavigate, i as isPathActive } from '../../navigation-CpOEyUSb.js';
 import { UseFormReturn, Control, FieldErrors } from 'react-hook-form';
 import { WizardStep, UseResourceOptions } from '@marktiderman/genesis-core/hooks';
 import { FilterParam } from '@marktiderman/genesis-core/provider';
 import { ResourceFormFieldDef } from '@marktiderman/genesis-core';
 export { FieldType, ResourceFormFieldDef, SelectOption } from '@marktiderman/genesis-core';
+export { CommandPalette, CommandPaletteItem, CommandPaletteProps, useCommandPaletteHotkey } from '../ui/command-palette.js';
+export { UseSavedViewsReturn, useSavedViews } from '../../hooks/use-saved-views.js';
+
+/**
+ * Declarative chrome for PageHeader — developer defaults + optional
+ * in-header user toggles (Notion/Linear “customize view” pattern).
+ *
+ * @stability Beta
+ */
+interface PageHeaderOptions {
+    showIcon?: boolean;
+    showSubtitle?: boolean;
+    showCount?: boolean;
+    showViewToggle?: boolean;
+    showViewSettings?: boolean;
+    showCreate?: boolean;
+    /** Ghost ListFilter control in the actions cluster */
+    showDetailsToggle?: boolean;
+    /** Quiet hint beside actions while details are collapsed */
+    showDetailsHint?: boolean;
+    /** Move subtitle into the details panel (default true when details exist) */
+    subtitleInDetails?: boolean;
+    defaultDetailsOpen?: boolean;
+    detailsLabel?: string;
+    /**
+     * Show the in-header Header options popover so users can customize chrome.
+     * Default true when the header has more than one chrome affordance.
+     */
+    configurable?: boolean;
+}
+interface PageHeaderProps {
+    title: string;
+    subtitle?: string;
+    icon?: LucideIcon;
+    /**
+     * Header chrome config (developer defaults). Merged under user picks from
+     * the in-header options menu when `options.configurable` / storage is on.
+     */
+    options?: PageHeaderOptions;
+    /** Persist user header-option overrides (localStorage) */
+    optionsStorageKey?: string;
+    /** Extra trailing actions (after create); prefer first-class slots below */
+    actions?: ReactNode;
+    /** Collapsible details region below the title row */
+    details?: ReactNode;
+    detailsOpen?: boolean;
+    onDetailsOpenChange?: (open: boolean) => void;
+    detailsActive?: boolean;
+    detailsHint?: ReactNode;
+    /** Count badge */
+    count?: number;
+    totalCount?: number;
+    /** Singular entity for “N rows” copy when unfiltered */
+    entityName?: string;
+    countActive?: boolean;
+    viewMode?: ViewMode;
+    onViewModeChange?: (mode: ViewMode) => void;
+    pageSize?: number;
+    onPageSizeChange?: (size: number) => void;
+    density?: Density;
+    onDensityChange?: (density: Density) => void;
+    createAction?: ReactNode;
+}
+declare function PageHeader({ title, subtitle, icon: Icon, options: optionsProp, optionsStorageKey, actions, details, detailsOpen, onDetailsOpenChange, detailsActive, detailsHint, count, totalCount, entityName, countActive, viewMode, onViewModeChange, pageSize, onPageSizeChange, density, onDensityChange, createAction, }: PageHeaderProps): react_jsx_runtime.JSX.Element;
 
 interface DataPageShellProps {
     /** Display title for the page */
@@ -49,9 +113,26 @@ interface DataPageShellProps {
     /** Whether filters are currently active */
     hasActiveFilters?: boolean;
     onClearFilters?: () => void;
+    /**
+     * When true, filters render inside PageHeader details (collapsed by default).
+     * Default false preserves always-visible filters on existing boards.
+     */
+    filtersCollapsible?: boolean;
+    defaultFiltersOpen?: boolean;
+    filtersOpen?: boolean;
+    onFiltersOpenChange?: (open: boolean) => void;
+    filtersLabel?: string;
+    filtersHint?: ReactNode;
+    /**
+     * PageHeader chrome config — developer defaults; users can further
+     * customize via the in-header Header options menu.
+     */
+    headerOptions?: PageHeaderOptions;
+    /** Persist user header-option overrides (localStorage) */
+    headerOptionsStorageKey?: string;
     children: ReactNode;
 }
-declare function DataPageShell({ title, icon: Icon, entityName, subtitle, createAction, isLoading, isEmpty, emptyIcon, emptyMessage, emptyAction, hasError, errorMessage, onRetry, count, totalCount, viewMode, onViewModeChange, pageSize, onPageSizeChange, density, onDensityChange, filters, hasActiveFilters, onClearFilters, children, }: DataPageShellProps): react_jsx_runtime.JSX.Element;
+declare function DataPageShell({ title, icon, entityName, subtitle, createAction, isLoading, isEmpty, emptyIcon, emptyMessage, emptyAction, hasError, errorMessage, onRetry, count, totalCount, viewMode, onViewModeChange, pageSize, onPageSizeChange, density, onDensityChange, filters, hasActiveFilters, onClearFilters, filtersCollapsible, defaultFiltersOpen, filtersOpen, onFiltersOpenChange, filtersLabel, filtersHint, headerOptions, headerOptionsStorageKey, children, }: DataPageShellProps): react_jsx_runtime.JSX.Element;
 
 interface FilterOption {
     value: string;
@@ -343,6 +424,11 @@ interface ResourcePageProps<T extends Record<string, unknown> = Record<string, u
     onNavigate?: NavigateFn;
     resourceOptions?: UseResourceOptions<T>;
     defaultView?: ViewMode;
+    /**
+     * Persist key for density / page size via `useViewSettings`.
+     * Defaults to `resource` or a slug of `title`.
+     */
+    viewSettingsKey?: string;
 }
 declare function ResourcePage<T extends Record<string, unknown> = Record<string, unknown>>(props: ResourcePageProps<T>): react_jsx_runtime.JSX.Element;
 
@@ -409,6 +495,54 @@ interface NavItem {
     to: string;
     icon: LucideIcon;
     label: string;
+    /** Nested items — rendered as a collapsible group when the rail is expanded */
+    children?: NavItem[];
+    badge?: string | number;
+    disabled?: boolean;
+    /** Exact-match active state (e.g. overview `/`) */
+    end?: boolean;
+}
+/**
+ * Declarative chrome for AppShell — developer defaults + optional
+ * in-sidebar user toggles (Notion/Linear “customize chrome” pattern).
+ *
+ * @stability Beta
+ */
+interface AppShellOptions {
+    showLogo?: boolean;
+    showAppName?: boolean;
+    showThemeToggle?: boolean;
+    /** Desktop rail collapse control */
+    showCollapse?: boolean;
+    showUserSlot?: boolean;
+    showFooter?: boolean;
+    showSecondaryNav?: boolean;
+    /** Mobile fixed bottom tab bar */
+    showMobileBottomNav?: boolean;
+    defaultCollapsed?: boolean;
+    /**
+     * Show the in-sidebar Sidebar options popover so users can customize chrome.
+     * Default true when collapse / secondary / theme / slots are available.
+     */
+    configurable?: boolean;
+    /**
+     * Toggle keys the developer has decided on and users may not override —
+     * e.g. hiding `showThemeToggle` for a brand that manages theme elsewhere.
+     * Locked keys are dropped from the options popover and any stored user
+     * override for them is ignored on resolve.
+     */
+    lockedOptions?: (keyof AppShellOptions)[];
+    /** Comfortable (default) vs compact row padding */
+    density?: "comfortable" | "compact";
+    /** Expanded rail width in rem-ish tokens: narrow ≈ 13rem, wide ≈ 16rem */
+    railWidth?: "narrow" | "wide";
+    /**
+     * Where page content scrolls.
+     * - `container` (default): main panel scrolls — classic app-shell chrome.
+     * - `window`: document/window scrolls with a sticky rail so React Router
+     *   `ScrollRestoration` keeps working (dashboard dogfood).
+     */
+    scrollRoot?: "container" | "window";
 }
 /**
  * @stability Beta
@@ -416,14 +550,55 @@ interface NavItem {
 interface AppShellProps {
     /** App name shown in sidebar header */
     appName: string;
-    /** App logo letter or short text */
+    /** App logo letter or short text (ignored when `logo` is set) */
     appLogo?: string;
-    /** Navigation items */
+    /** Custom logo node — preferred over `appLogo` letter tile */
+    logo?: ReactNode;
+    /** Primary navigation items */
     navItems: NavItem[];
+    /** Secondary nav (e.g. “More”) — rendered below a divider when shown */
+    secondaryNavItems?: NavItem[];
+    /** Label above secondary nav (default “More”) */
+    secondaryNavLabel?: string;
+    /**
+     * Items for the mobile bottom tab bar. Defaults to top-level `navItems`
+     * (no children). Pass a short list for apps with large sidebars; pass `[]`
+     * and set `options.showMobileBottomNav: false` to hide.
+     */
+    mobileNavItems?: NavItem[];
+    /** Slot below the logo row (product switcher, workspace picker, …) */
+    headerSlot?: ReactNode;
+    /**
+     * Compact slot shown in the **collapsed** desktop rail, where `headerSlot`
+     * is hidden for space. Use it to keep a core affordance reachable without
+     * expanding — e.g. an icon-only product switcher. Omit to hide the header
+     * region entirely while collapsed.
+     */
+    collapsedHeaderSlot?: ReactNode;
+    /** Footer region above the user slot (version, links) */
+    footer?: ReactNode;
+    /**
+     * User / account block at the bottom of the sidebar. When the rail is
+     * collapsed, AppShell hides any descendant carrying the
+     * `data-shell-user-detail` attribute (e.g. name/email text) so only a
+     * compact element (avatar, initial) remains — tag the detail wrapper you
+     * want hidden in the collapsed rail with that attribute.
+     */
+    userSlot?: ReactNode;
     /** Page content */
     children: ReactNode;
-    /** Show theme toggle (default: true) */
+    /**
+     * @deprecated Prefer `options.showThemeToggle`. Kept for sample-app
+     * back-compat; merges into resolved options when `options` omits it.
+     */
     showThemeToggle?: boolean;
+    /** Chrome config (developer defaults + optional in-sidebar menu) */
+    options?: AppShellOptions;
+    /** Persist user sidebar-option overrides + collapse state (localStorage) */
+    optionsStorageKey?: string;
+    /** Controlled collapse (desktop rail) */
+    collapsed?: boolean;
+    onCollapsedChange?: (collapsed: boolean) => void;
     /**
      * Injectable link component. Defaults to a plain `<a>` (no router). Pass a
      * router adapter — e.g. React Router `({ href, ...p }) => <Link to={href} {...p} />`
@@ -442,15 +617,6 @@ interface AppShellProps {
      */
     isActive?: (to: string, activePath?: string) => boolean;
 }
-declare function AppShell({ appName, appLogo, navItems, children, showThemeToggle, linkComponent, activePath, isActive, }: AppShellProps): react_jsx_runtime.JSX.Element;
-
-interface PageHeaderProps {
-    title: string;
-    subtitle?: string;
-    icon?: LucideIcon;
-    /** Optional action area (buttons, etc.) */
-    actions?: ReactNode;
-}
-declare function PageHeader({ title, subtitle, icon: Icon, actions }: PageHeaderProps): react_jsx_runtime.JSX.Element;
+declare function AppShell({ appName, appLogo, logo, navItems, secondaryNavItems, secondaryNavLabel, mobileNavItems, headerSlot, collapsedHeaderSlot, footer, userSlot, children, showThemeToggle: showThemeToggleProp, options: optionsProp, optionsStorageKey, collapsed: collapsedProp, onCollapsedChange, linkComponent, activePath, isActive, }: AppShellProps): react_jsx_runtime.JSX.Element;
 
-export { AppShell, type AppShellProps, BadgeCell, type BulkAction, type ColumnStatus, CurrencyCell, DataBulkBar, type DataFilterConfig, DataFilters, DataGrid, DataList, type DataListProps, DataPageShell, type DataPageShellProps, DateCell, DetailPanel, type DetailPanelProps, EmptyState, FieldArrayRenderer, FileUploadField, FilterCombobox, type FilterOption, KanbanBoard, type KanbanBoardProps, type KanbanColumn, LinkComponent, type NavItem, NavigateFn, NumberCell, PageHeader, type PageHeaderProps, RelationField, ResourceColumnDef, ResourceForm, type ResourceFormProps, ResourcePage, type ResourcePageProps, StatCard, type StatCardColor, type StatCardProps, ViewMode, ViewSettings, WizardForm };
+export { AppShell, type AppShellOptions, type AppShellProps, BadgeCell, type BulkAction, type ColumnStatus, CurrencyCell, DataBulkBar, type DataFilterConfig, DataFilters, DataGrid, DataList, type DataListProps, DataPageShell, type DataPageShellProps, DateCell, Density, DetailPanel, type DetailPanelProps, EmptyState, FieldArrayRenderer, FileUploadField, FilterCombobox, type FilterOption, KanbanBoard, type KanbanBoardProps, type KanbanColumn, LinkComponent, type NavItem, NavigateFn, NumberCell, PageHeader, type PageHeaderOptions, type PageHeaderProps, RelationField, ResourceColumnDef, ResourceForm, type ResourceFormProps, ResourcePage, type ResourcePageProps, type SavedViewItem, StatCard, type StatCardColor, type StatCardProps, ViewMode, ViewSettings, WizardForm };