@sableui/react 0.18.0 → 0.19.0

package/llms.txt

@@ -277,7 +277,7 @@ import { Button, Card, IconProvider, MotionProvider, SableThemeProvider, useSabl
 - **Scrolling** — 2 policies · vertical gets a bar · horizontal gets a fade. Every scroll container declares a policy. → [`llms/foundations/scrolling.md`](./llms/foundations/scrolling.md)
 - **Accessibility** — WCAG AA · 44px targets · visible focus · reduced motion · logical properties. Sable's components ship accessible behavior from Base UI. → [`llms/foundations/accessibility.md`](./llms/foundations/accessibility.md)
 
-### Patterns (8) — canonical page shells, copy as route starting points (registry.json → patterns; importable from `@sableui/react/patterns`)
+### Patterns (9) — canonical page shells, copy as route starting points (registry.json → patterns; importable from `@sableui/react/patterns`)
 
 - **AuthPage** — Split sign-in page: a form column (brand mark, heading, email + password, primary sign-in, passkey and email-link alternatives, sign-up switch, terms) beside a brand panel painted from the theme's tones with a customer story card. → [`llms/patterns/auth-page.md`](./llms/patterns/auth-page.md)
 - **BrandLandingPage** — High-fidelity brand/product landing page: pill navigation, editorial hero type, a dark product scene, a value section, a how-it-works sequence, a customer story with outcomes, a closing CTA band, and a complete branded footer. → [`llms/patterns/brand-landing-page.md`](./llms/patterns/brand-landing-page.md)
@@ -287,6 +287,7 @@ import { Button, Card, IconProvider, MotionProvider, SableThemeProvider, useSabl
 - **LandingPage** — Product / open-source landing page: a centered hero with an eyebrow Badge, one display headline, lede, two CTAs and a copyable install command; a Browser-framed product preview composed from real components; a six-up feature grid; a setup section with tabbed code; an agent-workflow section with terminal output; a CTA card; and a link-column footer. → [`llms/patterns/landing-page.md`](./llms/patterns/landing-page.md)
 - **ListDetailPage** — Searchable list beside the selected record's detail: interactive Entity rows in a CardList (5 of 12 columns) and a sticky detail pane (7) with an editable field, a label/value list, record actions with a destructive confirmation, and recent activity. → [`llms/patterns/list-detail-page.md`](./llms/patterns/list-detail-page.md)
 - **SettingsPage** — Account settings inside the app shell: a sticky SideNav section rail beside a column of section Cards — a Profile form with the page's one explicit save, Card + CardList + Entity rows with Switches that apply instantly, a read-only payouts summary, account rows, and a delete card confirmed through DestructiveActionModal. → [`llms/patterns/settings-page.md`](./llms/patterns/settings-page.md)
+- **TrackerPage** — Records workspace in the tool register: a Sidebar rail of grouped views ending in an account menu, a WorkspaceBar of Breadcrumbs over pill Tabs, a filter row, one grouped DataTable, and a docked inspector of PanelSection property rows with a pinned comment form. → [`llms/patterns/tracker-page.md`](./llms/patterns/tracker-page.md)
 
 ### Blocks (42) — section-sized compositions (cards, forms, lists), copy as starting points (registry.json → blocks; importable from `@sableui/react/blocks`; `sable block <Name>`)
 
@@ -349,14 +350,14 @@ import { Button, Card, IconProvider, MotionProvider, SableThemeProvider, useSabl
 - **SafeArea** — Pads for device safe-areas (notch, home indicator) on fixed or native-shell surfaces. → [`llms/layout/safe-area.md`](./llms/layout/safe-area.md)
 - **GridOverlay** — Dev/docs structure visualizer — overlays the column grid so the layout skeleton is legible. → [`llms/layout/grid-overlay.md`](./llms/layout/grid-overlay.md)
 
-### Utilities (73) — relative surfaces, frames, state variants, scroll policies, chrome type, motion recipes; reach for these before hand-written CSS (registry.json → utilities; `sable utility <name>`) → [`llms/reference/utilities.md`](./llms/reference/utilities.md)
+### Utilities (74) — relative surfaces, frames, state variants, scroll policies, chrome type, motion recipes; reach for these before hand-written CSS (registry.json → utilities; `sable utility <name>`) → [`llms/reference/utilities.md`](./llms/reference/utilities.md)
 
 - **relative surface** — `sable-surface`, `sable-surface-muted`, `sable-surface-popover`, `sable-surface-accent`, `sable-surface-interactive`, `sable-well`
 - **frame** — `sable-frame`, `sable-frame-popover`, `sable-frame-tool`, `sable-frame-borderless`, `sable-frame-r-*`, `sable-frame-p-*`, `sable-frame-inner`
 - **geometry** — `rounded-concentric-*`, `popup-inset`, `rounded-popup-item`, `popup-bleed`
 - **state variant** — `sable-highlighted:`, `sable-selected:`, `sable-open:`, `sable-disabled:`, `sable-invalid:`
 - **scroll** — `scrollbar-quiet`, `scrollbar-hidden`
-- **text** — `sable-list`, `sable-list-numbered`, `sable-list-dl`, `sable-list-dl-2`, `text-overline`, `text-ui-md`, `text-ui-sm`, `text-ui-body`, `text-ui-section`, `text-ui-micro`, `text-ui-num`, `stream-tail`
+- **text** — `sable-list`, `sable-list-numbered`, `sable-list-dl`, `sable-list-dl-2`, `text-overline`, `text-ui-title`, `text-ui-md`, `text-ui-sm`, `text-ui-body`, `text-ui-section`, `text-ui-micro`, `text-ui-num`, `stream-tail`
 - **motion** — `motion-interactive`, `motion-press`, `motion-fade`, `motion-pop`, `motion-slide-up`, `motion-slide-down`, `motion-slide-left`, `motion-slide-right`, `motion-disclosure`, `motion-icon-swap`, `motion-glide`, `motion-shake`, `motion-tick`, `motion-appear`, `motion-arrive`, `motion-bloom`, `motion-size`, `motion-spin`, `motion-orbit`, `motion-pulse`, `motion-shimmer`, `motion-text-shimmer`, `motion-dot-bounce`, `motion-ping`, `animate-fade-in`, `animate-fade-up`, `animate-fade-down`, `motion-stream-in`, `motion-caret`, `motion-reveal`, `motion-draw`
 - **helper** — `hit-target`, `reveal-on-hover`, `stretched-link`, `link-underline`, `checkerboard`, `texture-dither`
 - **elsewhere** — paired `text-*` page tiers: registry.json → tokens.typography (also `sable utility text-heading-1`).
@@ -381,7 +382,7 @@ import { Button, Card, IconProvider, MotionProvider, SableThemeProvider, useSabl
 - **AppShell** — The application frame: slots for status banners, a mobile header, a desktop sidebar, main content, a mobile bottom nav, a persistent dock (a now-playing or call bar), and floating overlays — plus a built-in skip link and #main-content target. *Parts:* SkipLink. → [`llms/components/app-shell.md`](./llms/components/app-shell.md)
 - **AreaChart** — **BETA.** A trend over a sequence, filled to the baseline: overlapping translucent series, stacked, or stacked to 100%, with smooth, linear or step curves and optional gradient fills. → [`llms/components/area-chart.md`](./llms/components/area-chart.md)
 - **Attachment** — A file or image attached to a message: media or icon lead, name and metadata, upload and error states, an actions slot, and a full-card trigger that keeps those actions separately clickable. → [`llms/components/attachment.md`](./llms/components/attachment.md)
-- **Avatar** — Circular profile image over Base UI Avatar — automatic image-load tracking with an initials/glyph fallback. *Parts:* AvatarRoot, AvatarImage, AvatarFallback, AvatarGroup, AvatarGroupCount. → [`llms/components/avatar.md`](./llms/components/avatar.md)
+- **Avatar** — Circular (or square) profile image over Base UI Avatar — automatic image-load tracking with an initials/glyph fallback. *Parts:* AvatarRoot, AvatarImage, AvatarFallback, AvatarGroup, AvatarGroupCount. → [`llms/components/avatar.md`](./llms/components/avatar.md)
 - **Badge** — Compact static label, set on two axes: appearance (soft, outline, solid, overlay on media, plain text) and tone (neutral, a semantic tone, or a palette family like blue for a category with no meaning attached). → [`llms/components/badge.md`](./llms/components/badge.md)
 - **Banner** — Full-width, page-level announcement bar. → [`llms/components/banner.md`](./llms/components/banner.md)
 - **BarChart** — **BETA.** Bars comparing amounts across categories: grouped, stacked or stacked to 100%, vertical columns or horizontal bars, with value labels, per-category colours and a separate tone for negative values. → [`llms/components/bar-chart.md`](./llms/components/bar-chart.md)
@@ -407,7 +408,7 @@ import { Button, Card, IconProvider, MotionProvider, SableThemeProvider, useSabl
 - **ConfirmButton** — An inline two-step confirm for a low-stakes destructive or irreversible action: the first press arms it ("Delete" → "Confirm delete?", destructive), a second press within a few seconds runs it, and leaving it disarms it. → [`llms/components/confirm-button.md`](./llms/components/confirm-button.md)
 - **ContextCard** — Hover/focus-triggered rich preview card over Base UI PreviewCard. *Parts:* ContextCardTrigger, ContextCardContent, ContextCardArrow. → [`llms/components/context-card.md`](./llms/components/context-card.md)
 - **ContextMenu** — Right-click menu over Base UI ContextMenu — opens on the native contextmenu event or long press and positions at the pointer. *Parts:* ContextMenuTrigger, ContextMenuContent, ContextMenuItem, ContextMenuSeparator, ContextMenuGroup, ContextMenuGroupLabel. → [`llms/components/context-menu.md`](./llms/components/context-menu.md)
-- **DataTable** — A data-driven table over the Table primitives — a columns def + data array with built-in client-side sorting (click a sortable header to cycle asc → desc → none), optional row click / selection, and an empty state. → [`llms/components/data-table.md`](./llms/components/data-table.md)
+- **DataTable** — A data-driven table over the Table primitives — a columns def + data array with built-in client-side sorting (click a sortable header to cycle asc → desc → none), optional row click / selection, rows grouped under collapsible header rows (groupBy), and an empty state. → [`llms/components/data-table.md`](./llms/components/data-table.md)
 - **DatePicker** — Date (and optionally time) picker: a field-shaped trigger (the Input / SelectTrigger shell) opens a Popover holding Sable's Calendar. → [`llms/components/date-picker.md`](./llms/components/date-picker.md)
 - **DateTile** — A calendar-page date: the short month on a primary band over the day number, in a <time> element. → [`llms/components/date-tile.md`](./llms/components/date-tile.md)
 - **DestructiveActionModal** — Confirmation modal for irreversible actions, built on AlertDialog (role=alertdialog; a backdrop click does not dismiss). → [`llms/components/destructive-action-modal.md`](./llms/components/destructive-action-modal.md)
@@ -473,7 +474,7 @@ import { Button, Card, IconProvider, MotionProvider, SableThemeProvider, useSabl
 - **SettingsMenu** — A compact trigger that states the current settings, over a menu of rows that change them. *Parts:* SettingsRow, MenuRadioGroup, MenuRadioItem. → [`llms/components/settings-menu.md`](./llms/components/settings-menu.md)
 - **Sheet** — Edge-anchored drawer over Base UI Drawer — focus trap, scroll lock, Esc/outside dismissal, portal backdrop, plus swipe-to-dismiss on touch. *Parts:* SheetContent, SheetTrigger, SheetClose, SheetHeader, SheetTitle, SheetDescription, SheetList, SheetFooter. → [`llms/components/sheet.md`](./llms/components/sheet.md)
 - **ShowMore** — Collapsible content region that clips children to a collapsed height, fades the cut edge, and reveals the rest with a toggle. → [`llms/components/show-more.md`](./llms/components/show-more.md)
-- **Sidebar** — Desktop side-navigation rail (in-flow sticky, hidden below lg) with SidebarHeader / SidebarBrand / SidebarNav / SidebarItem / SidebarFooter parts. *Parts:* SidebarHeader, SidebarBrand, SidebarItem. → [`llms/components/sidebar.md`](./llms/components/sidebar.md)
+- **Sidebar** — Desktop side-navigation rail (in-flow sticky, hidden below lg) with SidebarHeader / SidebarBrand / SidebarNav / SidebarGroup / SidebarItem / SidebarFooter / SidebarAccount parts, all on one set of columns. *Parts:* SidebarHeader, SidebarBrand, SidebarItem, SidebarGroup, SidebarAccount. → [`llms/components/sidebar.md`](./llms/components/sidebar.md)
 - **SideNav** — A lightweight in-content vertical navigation list - the settings / docs sub-nav, distinct from the app-chrome Sidebar. *Parts:* SideNavItem, SideNavGroup. → [`llms/components/side-nav.md`](./llms/components/side-nav.md)
 - **Skeleton** — Loading placeholder — a muted, shimmering block (rounded-md bg-muted motion-shimmer). → [`llms/components/skeleton.md`](./llms/components/skeleton.md)
 - **Slider** — Slider over Base UI Slider — pointer + keyboard control, ARIA slider wiring, and range support via multiple thumbs. *Parts:* SliderRoot, SliderControl, SliderTrack, SliderIndicator, SliderThumb, SliderValue. → [`llms/components/slider.md`](./llms/components/slider.md)
@@ -497,5 +498,5 @@ import { Button, Card, IconProvider, MotionProvider, SableThemeProvider, useSabl
 - **Tooltip** — Hover/focus label over Base UI Tooltip (collision-aware positioning, ARIA wiring, delay grouping via TooltipProvider). *Parts:* TooltipProvider, TooltipTrigger, TooltipContent, TooltipArrow, SimpleTooltip, TooltipGroup. → [`llms/components/tooltip.md`](./llms/components/tooltip.md)
 - **Tree** — The object list a tool is built around — layers, scene graph, outline — on one shared grid, so every left edge in the panel resolves to the rail or an exact multiple of the indent step. *Parts:* TreeSection, TreeRow, TreeAddRow, TreeEmpty, treeIndent. → [`llms/components/tree.md`](./llms/components/tree.md)
 - **Video** — Styled 16:9 video player frame. → [`llms/components/video.md`](./llms/components/video.md)
-- **Workspace** — The shell for a tool: a fixed viewport partitioned into independently scrolling regions, with a compact density scope, a skip link, and a canvas landmark. *Parts:* WorkspaceBar, WorkspaceCanvas. → [`llms/components/workspace.md`](./llms/components/workspace.md)
+- **Workspace** — The shell for a tool: a fixed viewport partitioned into independently scrolling regions, with a compact density scope, a skip link, and a canvas landmark. *Parts:* WorkspaceBar, WorkspaceCanvas, useMediaQuery, useBelowBreakpoint. → [`llms/components/workspace.md`](./llms/components/workspace.md)
 <!-- generated:catalog:end -->

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sableui/react",
-  "version": "0.18.0",
+  "version": "0.19.0",
   "description": "Sable: themeable React components, layout patterns, and tools for coding agents.",
   "type": "module",
   "sideEffects": [
@@ -128,6 +128,7 @@
     "THIRD_PARTY_NOTICES.md",
     "third-party",
     "scripts/adoption.mjs",
+    "scripts/app-css.mjs",
     "scripts/agent-setup.mjs",
     "scripts/design-presets.mjs",
     "scripts/patches.mjs",