@sableui/react 0.7.0 → 0.8.0

package/dist/icon-sets/reicon.js

@@ -1,5 +1,10 @@
 // src/icon-sets/reicon.tsx
 import { Pipette } from "reicon-react/icons/Pipette";
+import { AtSign } from "reicon-react/icons/AtSign";
+import { ChartBar } from "reicon-react/icons/ChartBar";
+import { Flag } from "reicon-react/icons/Flag";
+import { Paperclip } from "reicon-react/icons/Paperclip";
+import { Tag } from "reicon-react/icons/Tag";
 import { Key } from "reicon-react/icons/Key";
 import { Stop } from "reicon-react/icons/Stop";
 import { ThumbsDown } from "reicon-react/icons/ThumbsDown";
@@ -167,7 +172,14 @@ var ICONS = {
   "volume-low": VolumeLow2,
   "volume-off": VolumeCross,
   queue: Playlist,
-  music: MusicNote
+  music: MusicNote,
+  // Added when a support inbox had no glyph for labels, attachments, reports,
+  // priority or mentions, and stood in `layout` and `list` for them.
+  tag: Tag,
+  paperclip: Paperclip,
+  chart: ChartBar,
+  flag: Flag,
+  "at-sign": AtSign
 };
 var WEIGHTS = {
   regular: "Outline",

package/dist/index.d.ts

@@ -1926,7 +1926,11 @@ type ChartCategories = Record<string, {
 }>;
 /** A big number with a caption in the middle of a donut or radial chart. */
 interface ChartCenterLabel {
-    value: string;
+    /**
+     * The number. Pass a number to have it formatted: in full up to 9,999,
+     * compact from 10,000 ("10.2K"). Pass a string for units or your own wording.
+     */
+    value: string | number;
     label?: string;
 }
 /** How the tooltip marks each row. */
@@ -2898,7 +2902,9 @@ declare namespace TableFooter {
     var displayName: string;
 }
 /**
- * A table row. Hover-lifts; mark the selected row with `data-selected`.
+ * A table row. Body rows hover-lift; header and footer rows stay still, since
+ * nothing there responds to a click on the row. Mark the selected row with
+ * `data-selected`.
  *
  * The selected fill is painted by the cells, each spilling 1px into the next
  * (a box-shadow, so layout does not move). A row's own background is painted
@@ -2961,6 +2967,7 @@ interface DataTableColumn<Row> {
     /** Extra classes for this column's header + cells. */
     className?: string;
 }
+type DataTableRowKey = string | number;
 interface DataTableProps<Row> {
     /** Column definitions, left to right. */
     columns: DataTableColumn<Row>[];
@@ -2970,8 +2977,21 @@ interface DataTableProps<Row> {
     rowKey?: (row: Row, index: number) => string | number;
     /** Row click handler — makes rows pointer-interactive. */
     onRowClick?: (row: Row) => void;
-    /** Mark a row visually selected (`data-selected`). */
+    /** Mark a row visually selected (`data-selected`), e.g. the one open in a detail pane. */
     isRowSelected?: (row: Row) => boolean;
+    /**
+     * The checked rows, by `rowKey`, for bulk actions. With `onSelectedKeysChange`
+     * it adds a checkbox column and a select-all box in the header. Controlled:
+     * when the rows shown change (a filter, another view), set the keys you want
+     * kept — usually none.
+     */
+    selectedKeys?: ReadonlySet<DataTableRowKey>;
+    /** Called with the new set of checked keys. Its presence turns selection on. */
+    onSelectedKeysChange?: (keys: Set<DataTableRowKey>) => void;
+    /** A row checkbox's accessible name. Name the row: `(t) => \`Select ${t.subject}\``. @default "Select row" */
+    rowSelectionLabel?: (row: Row) => string;
+    /** The select-all checkbox's accessible name. @default (count) => `Select all ${count} shown` */
+    selectAllLabel?: (count: number) => string;
     /** Initial sort. */
     defaultSort?: {
         key: string;
@@ -2986,7 +3006,8 @@ interface DataTableProps<Row> {
 /**
  * DataTable — a data-driven table over the Table primitives: a `columns` def + a
  * `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.
+ * cycle asc → desc → none), optional row click, checkbox selection for bulk
+ * actions (`selectedKeys` + `onSelectedKeysChange`), and an empty state.
  * For server-side data or paging, sort/page the `data` you pass in and pair it
  * with `Pagination`.
  *
@@ -3000,7 +3021,7 @@ interface DataTableProps<Row> {
  *     ]}
  *   />
  */
-declare function DataTable<Row>({ columns, data, rowKey, onRowClick, isRowSelected, defaultSort, empty, caption, className, }: DataTableProps<Row>): react.JSX.Element;
+declare function DataTable<Row>({ columns, data, rowKey, onRowClick, isRowSelected, selectedKeys, onSelectedKeysChange, rowSelectionLabel, selectAllLabel, defaultSort, empty, caption, className, }: DataTableProps<Row>): react.JSX.Element;
 declare namespace DataTable {
     var displayName: string;
 }
@@ -3995,9 +4016,14 @@ declare namespace BreadcrumbItem {
     var displayName: string;
 }
 interface BreadcrumbLinkProps extends ComponentPropsWithRef<"a"> {
+    /**
+     * Render another element, such as a router link, so navigating stays in the
+     * app: `render={<Link to="/library" />}`. Keeps the crumb's styling.
+     */
+    render?: useRender.RenderProp;
 }
 /** An interactive ancestor crumb — muted, brightening to foreground on hover. */
-declare function BreadcrumbLink({ className, ref, ...props }: BreadcrumbLinkProps): react.JSX.Element;
+declare function BreadcrumbLink({ className, render, ...props }: BreadcrumbLinkProps): react.ReactElement<unknown, string | react.JSXElementConstructor<any>>;
 declare namespace BreadcrumbLink {
     var displayName: string;
 }
@@ -5094,7 +5120,12 @@ declare function Sidebar({ collapsed, icons, variant, className, children, ...pr
 declare namespace Sidebar {
     var displayName: string;
 }
-/** Brand/logo row pinned to the top of the rail. */
+/**
+ * Brand/logo row pinned to the top of the rail. At least 64px tall, not exactly:
+ * a second row under the brand (a search field, a notifications button) wraps
+ * onto its own line and the header grows to hold it, where a fixed height
+ * clipped it. Give that row `basis-full` (or `w-full`) to put it on its own line.
+ */
 declare function SidebarHeader({ className, ...props }: ComponentPropsWithRef<"div">): react.JSX.Element;
 declare namespace SidebarHeader {
     var displayName: string;
@@ -5510,6 +5541,14 @@ interface FormProps extends ComponentPropsWithRef<"form"> {
     onFormSubmit?: Form$1.Props["onFormSubmit"];
     /** Imperative actions: `actionsRef.current.validate(name?)`. */
     actionsRef?: Form$1.Props["actionsRef"];
+    /**
+     * Your code owns validation: `onSubmit` always runs, and each Field shows its
+     * `error`. Nothing is checked first, neither the Fields nor the browser, so a
+     * `required` Field keeps its asterisk and `aria-required` without blocking the
+     * submit. `validationMode`, `errors`, `onFormSubmit` and `actionsRef` do
+     * nothing here: they drive Sable's own validation.
+     */
+    noValidate?: boolean;
 }
 /**
  * Form — a styled `<form>` that lays its fields out in a vertical column with
@@ -5522,14 +5561,22 @@ interface FormProps extends ComponentPropsWithRef<"form"> {
  * and pass each `Field` an `error` string. Library-agnostic by design.
  *
  *   <Form onSubmit={handleSubmit}>
- *     <Field label="Email" error={errors.email}><Input type="email" /></Field>
+ *     <Field label="Email" required messages={{ valueMissing: "Enter your email." }}>
+ *       <Input type="email" />
+ *     </Field>
  *     <Button type="submit">Save</Button>
  *   </Form>
+ *
+ * Validating in your own code instead? Pass `noValidate`: `onSubmit` always
+ * runs, and each Field shows the `error` you give it. Without it, an empty
+ * `required` Field stops the submit before your handler could set that error.
  */
-declare function Form({ className, onSubmit, onFormSubmit, noValidate, ...props }: FormProps): react.JSX.Element;
+declare function Form({ className, onSubmit, onFormSubmit, noValidate, validationMode, errors, actionsRef, ...props }: FormProps): react.JSX.Element;
 declare namespace Form {
     var displayName: string;
 }
+/** The native constraint flags of `ValidityState` a Field can word itself. */
+type ConstraintFlag = "valueMissing" | "typeMismatch" | "patternMismatch" | "tooShort" | "tooLong" | "rangeUnderflow" | "rangeOverflow" | "stepMismatch" | "badInput";
 interface FieldProps {
     /** Field label (wired to the control via htmlFor). */
     label?: ReactNode;
@@ -5542,6 +5589,13 @@ interface FieldProps {
     error?: ReactNode;
     /** Marks the field required: adds the control's `required` + a visual asterisk. */
     required?: boolean;
+    /**
+     * Your wording for a failed native constraint, by the `ValidityState` flag it
+     * sets: `{ valueMissing: "Enter a subject.", typeMismatch: "That isn't an
+     * email address." }`. A constraint without one shows the browser's message.
+     * `error` still wins over both.
+     */
+    messages?: Partial<Record<ConstraintFlag, ReactNode>>;
     /**
      * Disables the control (and any Base UI control inside) and dims the label.
      * @default false
@@ -5590,7 +5644,7 @@ interface FieldProps {
  *   </Field>
  *   <Field label="Subscribe" orientation="horizontal"><Checkbox /></Field>
  */
-declare function Field({ label, description, error, required, disabled, name, validate, validationMode, validationDebounceTime, orientation, className, children, }: FieldProps): react.JSX.Element;
+declare function Field({ label, description, error, required, messages, disabled, name, validate, validationMode, validationDebounceTime, orientation, className, children, }: FieldProps): react.JSX.Element;
 declare namespace Field {
     var displayName: string;
 }
@@ -6367,6 +6421,12 @@ interface CommandItem {
     icon?: string;
     /** Secondary text after the label — a destination, a type, an owner. */
     detail?: ReactNode;
+    /**
+     * Put `detail` on its own line under the label instead of after it. For
+     * results that only their detail tells apart (two tickets with one subject):
+     * beside a long label the detail truncates first.
+     */
+    stacked?: boolean;
     /**
      * End-aligned trailing slot: a shortcut (`<Kbd>`), a count — or, when the row
      * is `disabled`, the reason it is.
@@ -6538,6 +6598,8 @@ interface CommandMenuItemProps extends Omit<ComponentPropsWithRef<"div">, "title
     icon?: string;
     /** Secondary text after the label. */
     detail?: ReactNode;
+    /** Put `detail` on its own line under the label, so it never truncates away first. */
+    stacked?: boolean;
     /** End-aligned trailing slot: a shortcut, a count, or a disabled row's reason. */
     hint?: ReactNode;
     /**
@@ -6554,7 +6616,7 @@ interface CommandMenuItemProps extends Omit<ComponentPropsWithRef<"div">, "title
  * combobox: keyboard focus stays in the input and Enter clicks the highlighted
  * row, so the row itself is not in the tab order.
  */
-declare function CommandMenuItem({ onSelect, icon, detail, hint, id: idProp, className, children, disabled, ...props }: CommandMenuItemProps): react.JSX.Element | null;
+declare function CommandMenuItem({ onSelect, icon, detail, stacked, hint, id: idProp, className, children, disabled, ...props }: CommandMenuItemProps): react.JSX.Element | null;
 
 /**
  * Listens for the platform's palette shortcut — ⌘K on macOS, Ctrl+K elsewhere —
@@ -7507,6 +7569,13 @@ interface ChatComposerProps extends Omit<ComponentPropsWithRef<"form">, "onSubmi
     onSend?: (value: string) => void;
     /** Placeholder for the field. @default "Send a message…" */
     placeholder?: string;
+    /**
+     * Which key sends. `enter` for chat: Enter sends, Shift+Enter breaks the line.
+     * `mod-enter` for long-form replies (an email, a support answer): Enter breaks
+     * the line and ⌘/Ctrl+Enter sends, so a paragraph break never mails a draft.
+     * @default "enter"
+     */
+    sendOn?: "enter" | "mod-enter";
     /**
      * A reply is streaming. Disables send, and swaps it for a stop control when
      * `onStop` is supplied.
@@ -7553,7 +7622,8 @@ interface ChatComposerProps extends Omit<ComponentPropsWithRef<"form">, "onSubmi
  *
  * The three details that are the whole job:
  *
- * - **Enter sends, Shift+Enter breaks the line** — and neither fires mid-IME.
+ * - **Enter sends, Shift+Enter breaks the line** (or, with `sendOn="mod-enter"`,
+ *   Enter breaks it and ⌘/Ctrl+Enter sends) — and neither fires mid-IME.
  *   A Japanese, Chinese, or Korean reader confirming a candidate in the
  *   composition popup presses Enter to *choose a word*, and a composer that
  *   reads that as "send" mails half a sentence. `event.nativeEvent.isComposing`
@@ -7564,7 +7634,7 @@ interface ChatComposerProps extends Omit<ComponentPropsWithRef<"form">, "onSubmi
  *   Interrupting a long generation is the most common thing a reader wants
  *   during one, and it belongs where their cursor already is.
  */
-declare function ChatComposer({ value, defaultValue, onValueChange, onSend, placeholder, busy, onStop, disabled, invalid, attachments, leading, actions, onAttach, label, sendLabel, stopLabel, footer, fieldRef, className, children, ...props }: ChatComposerProps): react.JSX.Element;
+declare function ChatComposer({ value, defaultValue, onValueChange, onSend, placeholder, sendOn, busy, onStop, disabled, invalid, attachments, leading, actions, onAttach, label, sendLabel, stopLabel, footer, fieldRef, className, children, ...props }: ChatComposerProps): react.JSX.Element;
 declare namespace ChatComposer {
     var displayName: string;
 }
@@ -7626,6 +7696,9 @@ interface SettingsMenuProps extends Omit<ComponentProps<typeof Menu>, "children"
  *
  * Opens upward and end-aligned by default, because its home is the bottom-right
  * of a composer or a toolbar — where a downward menu would open off-screen.
+ *
+ * One setting opens straight to its options, under the row's label: a lone row
+ * that then opens a submenu is two clicks for one choice.
  */
 declare function SettingsMenu({ summary, label, variant, size, side, align, disabled, className, children, ...props }: SettingsMenuProps): react.JSX.Element;
 declare namespace SettingsMenu {
@@ -8218,6 +8291,6 @@ interface UseCopyResult {
  */
 declare function useCopy(text: string, { timeout }?: UseCopyOptions): UseCopyResult;
 
-declare const SABLE_UI_VERSION: "0.7.0";
+declare const SABLE_UI_VERSION: "0.8.0";
 
-export { Accordion, AccordionItem, AccordionPanel, AccordionTrigger, AlertDialog, AlertDialogClose, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogTitle, AlertDialogTrigger, AppHeader, type AppHeaderProps, AppShell, type AppShellProps, AreaChart, type AreaChartProps, type ArtTone, Attachment, type AttachmentProps, Avatar, AvatarFallback, AvatarGroup, AvatarGroupCount, type AvatarGroupCountProps, type AvatarGroupProps, AvatarImage, type AvatarProps, AvatarRoot, BADGE_APPEARANCES, BADGE_TONES, Badge, type BadgeAppearance, type BadgeProps, type BadgeTone, Banner, type BannerProps, BarChart, type BarChartProps, BottomNav, BottomNavItem, type BottomNavItemProps, BreadcrumbItem, type BreadcrumbItemProps, BreadcrumbLink, type BreadcrumbLinkProps, BreadcrumbPage, type BreadcrumbPageProps, BreadcrumbSeparator, type BreadcrumbSeparatorProps, Breadcrumbs, type BreadcrumbsProps, Browser, type BrowserProps, Bubble, type BubbleProps, BubbleReaction, type BubbleReactionProps, BubbleReactions, type BubbleReactionsProps, Button, type ButtonBleed, type ButtonProps, CHART_SERIES_COUNT, COMPONENT_GROUPS, COMPONENT_TAXONOMY, Calendar, type CalendarProps, Card, CardAction, CardContent, type CardContentProps, CardDescription, CardFooter, type CardFooterProps, CardHeader, CardList, type CardProps, CardTitle, type CardTitleProps, Carousel, type CarouselProps, type CarouselSlidesToShow, type ChartCategories, type ChartCenterLabel, type ChartCurve, type ChartDatum, type ChartSeries, type ChartTone, type ChartTooltipIndicator, type ChartTooltipOptions, type ChartValueFormatter, ChatComposer, type ChatComposerProps, Checkbox, CheckboxCard, type CheckboxCardProps, type CheckboxCardTone, CheckboxGroup, type CheckboxGroupProps, Code, CodeBlock, type CodeBlockProps, CodeHighlightProvider, type CodeHighlighter, type CodeProps, Collapsible, CollapsibleIndicator, CollapsiblePanel, CollapsibleTrigger, ColorField, type ColorFieldProps, Combobox, ComboboxChips, ComboboxClear, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, type ComboboxItemGroup, ComboboxItemIndicator, ComboboxList, ComboboxPortal, type ComboboxProps, ComboboxValue, ComboboxVirtualList, type ComboboxVirtualListProps, type CommandFilter, type CommandItem, CommandMenu, CommandMenuGroup, type CommandMenuGroupProps, CommandMenuItem, type CommandMenuItemProps, CommandMenuPanel, type CommandMenuPanelProps, type CommandMenuProps, CommandMenuTrigger, type CommandMenuTriggerProps, type ComponentGroup, type ComponentGuidance, ComponentMeta, type ComponentRegister, ContextCard, ContextCardArrow, ContextCardContent, ContextCardPortal, ContextCardTrigger, ContextMenu, ContextMenuContent, ContextMenuGroup, ContextMenuGroupLabel, ContextMenuItem, ContextMenuPortal, ContextMenuSeparator, ContextMenuTrigger, DataTable, type DataTableColumn, type DataTableProps, DatePicker, type DatePickerProps, DateTile, type DateTileProps, Density, DensityProvider, Density as DensityValue, DestructiveActionModal, type DestructiveActionModalProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, type DialogSize, DialogTitle, DialogTrigger, DisclosurePicker, DisclosurePickerEmpty, DisclosurePickerList, type DisclosurePickerListProps, DisclosurePickerOption, type DisclosurePickerOptionProps, DisclosurePickerPanel, type DisclosurePickerPanelProps, type DisclosurePickerProps, type DisclosurePickerSearch, DisclosurePickerTrigger, type DisclosurePickerTriggerProps, EmptyState, type EmptyStateProps, Entity, type EntityProps, Feedback, type FeedbackData, type FeedbackProps, type FeedbackRating, Field, type FieldProps, Fieldset, FieldsetContent, FieldsetDescription, FieldsetFooter, FieldsetLegend, FileDropzone, type FileDropzoneProps, type FileRejection, type FileRejectionCode, FontPicker, type FontPickerFont, type FontPickerOption, type FontPickerProps, Form, type FormProps, GlidingHighlight, type GlidingHighlightProps, GradientArt, type GradientArtProps, type Hsv, InlineStatus, type InlineStatusProps, type StatusTone as InlineTone, Input, type InputProps$1 as InputProps, Kbd, KbdGroup, type KbdGroupProps, type KbdProps, Label, type LabelProps$2 as LabelProps, LineChart, type LineChartProps, Marker, type MarkerProps, Marquee, type MarqueeProps, MediaImage, type MediaImageProps, MediaTile, type MediaTileProps, Menu, MenuCheckboxItem, MenuContent, MenuGroup, MenuGroupLabel, MenuItem, MenuPortal, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuSubmenu, MenuSubmenuTrigger, MenuTrigger, Message, type MessageProps, MessageScroller, type MessageScrollerHandle, type MessageScrollerProps, Meter, MeterIndicator, MeterLabel, type MeterSize, type MeterTone, MeterTrack, MeterValue, MiddleTruncate, type MiddleTruncateProps, type MotionPolicy, MotionProvider, type MotionProviderProps, Note, type NoteAction, type NoteProps, NotificationBadge, type NotificationBadgeProps, NumberField, type NumberFieldProps, type OrbMode, type OrbSize, OtpField, type OtpFieldProps, OverflowMenu, type OverflowMenuProps, PageHeader, type PageHeaderProps, PageLoader, type PageLoaderProps, Pagination, type PaginationProps, Panel, PanelGroup, PanelResizer, type PanelResizerProps, PanelSection, type PanelWidthBounds, Phone, type PhoneProps, PieChart, type PieChartProps, Pill, type PillProps, Popover, PopoverArrow, PopoverClose, PopoverContent, PopoverDescription, PopoverPortal, PopoverTitle, PopoverTrigger, Presence, type PresenceProps, type Presentation, PresentationProvider, Progress, ProgressIndicator, ProgressLabel, type ProgressSize, ProgressTrack, ProgressValue, PropertyPair, PropertyRow, RadarChart, type RadarChartProps, RadialChart, type RadialChartProps, Radio, RadioCard, type RadioCardProps, type RadioCardTone, RadioGroup, RelativeTime, type RelativeTimeProps, Reveal, type RevealProps, type Rgb, SABLE_UI_VERSION, SEGMENTED_BAR_TONES, STATUS_TONES, STATUS_TONE_ICON, type ScrollCommandOptions, Scroller, type ScrollerProps, ScrubField, type ScrubFieldProps, SearchInput, type SearchInputProps, SectionHeader, type SectionHeaderProps, SegmentedBar, type SegmentedBarProps, type SegmentedBarSegment, type SegmentedBarTone, Select, SelectContent, SelectGroup, SelectGroupLabel, SelectItem, SelectPortal, SelectSeparator, SelectTrigger, SelectValue, Separator, type SeparatorProps$3 as SeparatorProps, SettingsMenu, type SettingsMenuProps, SettingsRow, type SettingsRowProps, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetList, SheetPortal, SheetTitle, SheetTrigger, ShowMore, type ShowMoreProps, SideNav, type SideNavActiveVariant, SideNavGroup, type SideNavGroupProps, SideNavItem, type SideNavItemProps, type SideNavProps, type SideNavSize, Sidebar, SidebarBrand, type SidebarBrandProps, SidebarFooter, SidebarHeader, SidebarItem, type SidebarItemProps, SidebarNav, type SidebarProps, SimpleTooltip, Skeleton, Slider, SliderControl, SliderIndicator, SliderRoot, SliderThumb, SliderTrack, SliderValue, Sparkline, type SparklineProps, Spinner, type SpinnerProps, StatusBar, StatusBarGroup, StatusBarSeparator, StatusDot, type StatusDotProps, type StatusTone, type StepStatus, Stepper, StepperItem, type StepperItemProps, type StepperOrientation, type StepperProps, StreamingText, type StreamingTextProps, Switch, TRANSPARENT, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsPanel as TabsContent, TabsList, TabsPanel, TabsTrigger, TextReveal, type TextRevealProps, Textarea, type TextareaProps, ThemeId, ThemeManifest, ThemeMode$1 as ThemeManifestMode, type ThemeMode, ThemePreview, type ThemePreviewProps, ThemeSelector, type ThemeSelectorProps, ThemeSwitcher, type ThemeSwitcherProps, ThinkingOrb, type ThinkingOrbProps, ToastAction, type ToastApi, ToastClose, ToastContent, ToastDescription, type ToastManagerApi, type ToastOptions, type ToastPosition, ToastProvider, type ToastProviderProps, ToastRoot, ToastTitle, type ToastType, ToastViewport, Toggle, ToggleGroup, type ToggleGroupAppearance, Toggle as ToggleGroupItem, Toolbar, ToolbarButton, type ToolbarButtonProps, ToolbarGroup, type ToolbarGroupProps, ToolbarInput, type ToolbarInputProps, ToolbarLink, type ToolbarLinkProps, type ToolbarProps, ToolbarSeparator, type ToolbarSeparatorProps, Tooltip, TooltipArrow, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger, Tree, TreeAddRow, TreeEmpty, TreeRow, TreeSection, type UseCopyOptions, type UseCopyResult, type UseInViewOptions, type UsePanelWidthOptions, Video, type VideoProps, ViewTransitionName, type ViewTransitionNameProps, Workspace, WorkspaceBar, WorkspaceCanvas, accordionMeta, appHeaderMeta, appShellMeta, areaChartMeta, attachmentMeta, avatarGroupVariants, avatarMeta, avatarVariants, badgeMeta, badgeVariants, bannerMeta, bannerVariants, barChartMeta, bottomNavMeta, breadcrumbsMeta, browserMeta, bubbleMeta, buttonMeta, buttonVariants, calendarMeta, cardMeta, carouselMeta, chartColor, toneColor as chartToneColor, chatComposerMeta, checkboxCardMeta, checkboxMeta, cn, codeBlockMeta, codeMeta, collapsibleMeta, colorFieldMeta, comboboxMeta, commandMenuMeta, componentGuidance, componentLabel, componentSlug, componentsInGroup, contextCardMeta, contextMenuMeta, dataTableMeta, datePickerMeta, dateTileMeta, destructiveActionModalMeta, dialogMeta, disclosurePickerMeta, emptyStateMeta, entityMeta, feedbackMeta, fieldsetMeta, fileDropzoneMeta, fileDropzoneVariants, fontPickerMeta, formMeta, formatFileSize, formatHex, glidingHighlightMeta, gradientArtMeta, hsvToRgb, hueColor, inlineStatusMeta, inputMeta, isTransparent, kbdMeta, labelMeta, lineChartMeta, markerMeta, marqueeMeta, mediaImageMeta, mediaTileMeta, menuMeta, messageMeta, messageScrollerMeta, meterIndicatorVariants, meterMeta, meterTrackVariants, middleTruncateMeta, noteMeta, noteVariants, notificationBadgeMeta, notificationCountVariants, notificationDotVariants, numberFieldMeta, otpFieldMeta, overflowMenuMeta, pageHeaderMeta, pageLoaderMeta, paginationMeta, panelGroupMeta, panelSectionMeta, parseHex, phoneMeta, pieChartMeta, pillMeta, pillVariants, popoverMeta, progressMeta, progressTrackVariants, radarChartMeta, radialChartMeta, radioCardMeta, radioMeta, relativeTimeMeta, rgbToHsv, scrollerMeta, scrubFieldMeta, searchInputMeta, sectionHeaderMeta, segmentedBarMeta, segmentedBarSegmentVariants, segmentedBarVariants, selectMeta, separatorMeta, settingsMenuMeta, sheetMeta, sheetVariants, showMoreMeta, sideNavMeta, sidebarMeta, skeletonMeta, sliderMeta, sparklineMeta, spinnerMeta, startViewTransition, statusBarMeta, statusDotMeta, statusDotVariants, stepperConnectorVariants, stepperIndicatorVariants, stepperMeta, streamingTextMeta, supportsViewTransitions, switchMeta, tableMeta, tabsMeta, textareaMeta, themeSelectorMeta, themeSwitcherMeta, thinkingOrbMeta, toast, toastMeta, toggleMeta, toolbarGroupVariants, toolbarMeta, toolbarSeparatorVariants, toolbarVariants, tooltipMeta, treeIndent, treeMeta, useAnchoredDensity, useComboboxFilteredItems, useCommandMenuShortcut, useCopy, useDensity, useDisclosurePicker, useInView, useMotion, usePanelWidth, usePresentation, useReducedMotion, useScrollActivity, useSidebar, useToast, useToastManager, useTypeTier, videoMeta, workspaceMeta };
+export { Accordion, AccordionItem, AccordionPanel, AccordionTrigger, AlertDialog, AlertDialogClose, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogTitle, AlertDialogTrigger, AppHeader, type AppHeaderProps, AppShell, type AppShellProps, AreaChart, type AreaChartProps, type ArtTone, Attachment, type AttachmentProps, Avatar, AvatarFallback, AvatarGroup, AvatarGroupCount, type AvatarGroupCountProps, type AvatarGroupProps, AvatarImage, type AvatarProps, AvatarRoot, BADGE_APPEARANCES, BADGE_TONES, Badge, type BadgeAppearance, type BadgeProps, type BadgeTone, Banner, type BannerProps, BarChart, type BarChartProps, BottomNav, BottomNavItem, type BottomNavItemProps, BreadcrumbItem, type BreadcrumbItemProps, BreadcrumbLink, type BreadcrumbLinkProps, BreadcrumbPage, type BreadcrumbPageProps, BreadcrumbSeparator, type BreadcrumbSeparatorProps, Breadcrumbs, type BreadcrumbsProps, Browser, type BrowserProps, Bubble, type BubbleProps, BubbleReaction, type BubbleReactionProps, BubbleReactions, type BubbleReactionsProps, Button, type ButtonBleed, type ButtonProps, CHART_SERIES_COUNT, COMPONENT_GROUPS, COMPONENT_TAXONOMY, Calendar, type CalendarProps, Card, CardAction, CardContent, type CardContentProps, CardDescription, CardFooter, type CardFooterProps, CardHeader, CardList, type CardProps, CardTitle, type CardTitleProps, Carousel, type CarouselProps, type CarouselSlidesToShow, type ChartCategories, type ChartCenterLabel, type ChartCurve, type ChartDatum, type ChartSeries, type ChartTone, type ChartTooltipIndicator, type ChartTooltipOptions, type ChartValueFormatter, ChatComposer, type ChatComposerProps, Checkbox, CheckboxCard, type CheckboxCardProps, type CheckboxCardTone, CheckboxGroup, type CheckboxGroupProps, Code, CodeBlock, type CodeBlockProps, CodeHighlightProvider, type CodeHighlighter, type CodeProps, Collapsible, CollapsibleIndicator, CollapsiblePanel, CollapsibleTrigger, ColorField, type ColorFieldProps, Combobox, ComboboxChips, ComboboxClear, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, type ComboboxItemGroup, ComboboxItemIndicator, ComboboxList, ComboboxPortal, type ComboboxProps, ComboboxValue, ComboboxVirtualList, type ComboboxVirtualListProps, type CommandFilter, type CommandItem, CommandMenu, CommandMenuGroup, type CommandMenuGroupProps, CommandMenuItem, type CommandMenuItemProps, CommandMenuPanel, type CommandMenuPanelProps, type CommandMenuProps, CommandMenuTrigger, type CommandMenuTriggerProps, type ComponentGroup, type ComponentGuidance, ComponentMeta, type ComponentRegister, type ConstraintFlag, ContextCard, ContextCardArrow, ContextCardContent, ContextCardPortal, ContextCardTrigger, ContextMenu, ContextMenuContent, ContextMenuGroup, ContextMenuGroupLabel, ContextMenuItem, ContextMenuPortal, ContextMenuSeparator, ContextMenuTrigger, DataTable, type DataTableColumn, type DataTableProps, type DataTableRowKey, DatePicker, type DatePickerProps, DateTile, type DateTileProps, Density, DensityProvider, Density as DensityValue, DestructiveActionModal, type DestructiveActionModalProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, type DialogSize, DialogTitle, DialogTrigger, DisclosurePicker, DisclosurePickerEmpty, DisclosurePickerList, type DisclosurePickerListProps, DisclosurePickerOption, type DisclosurePickerOptionProps, DisclosurePickerPanel, type DisclosurePickerPanelProps, type DisclosurePickerProps, type DisclosurePickerSearch, DisclosurePickerTrigger, type DisclosurePickerTriggerProps, EmptyState, type EmptyStateProps, Entity, type EntityProps, Feedback, type FeedbackData, type FeedbackProps, type FeedbackRating, Field, type FieldProps, Fieldset, FieldsetContent, FieldsetDescription, FieldsetFooter, FieldsetLegend, FileDropzone, type FileDropzoneProps, type FileRejection, type FileRejectionCode, FontPicker, type FontPickerFont, type FontPickerOption, type FontPickerProps, Form, type FormProps, GlidingHighlight, type GlidingHighlightProps, GradientArt, type GradientArtProps, type Hsv, InlineStatus, type InlineStatusProps, type StatusTone as InlineTone, Input, type InputProps$1 as InputProps, Kbd, KbdGroup, type KbdGroupProps, type KbdProps, Label, type LabelProps$2 as LabelProps, LineChart, type LineChartProps, Marker, type MarkerProps, Marquee, type MarqueeProps, MediaImage, type MediaImageProps, MediaTile, type MediaTileProps, Menu, MenuCheckboxItem, MenuContent, MenuGroup, MenuGroupLabel, MenuItem, MenuPortal, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuSubmenu, MenuSubmenuTrigger, MenuTrigger, Message, type MessageProps, MessageScroller, type MessageScrollerHandle, type MessageScrollerProps, Meter, MeterIndicator, MeterLabel, type MeterSize, type MeterTone, MeterTrack, MeterValue, MiddleTruncate, type MiddleTruncateProps, type MotionPolicy, MotionProvider, type MotionProviderProps, Note, type NoteAction, type NoteProps, NotificationBadge, type NotificationBadgeProps, NumberField, type NumberFieldProps, type OrbMode, type OrbSize, OtpField, type OtpFieldProps, OverflowMenu, type OverflowMenuProps, PageHeader, type PageHeaderProps, PageLoader, type PageLoaderProps, Pagination, type PaginationProps, Panel, PanelGroup, PanelResizer, type PanelResizerProps, PanelSection, type PanelWidthBounds, Phone, type PhoneProps, PieChart, type PieChartProps, Pill, type PillProps, Popover, PopoverArrow, PopoverClose, PopoverContent, PopoverDescription, PopoverPortal, PopoverTitle, PopoverTrigger, Presence, type PresenceProps, type Presentation, PresentationProvider, Progress, ProgressIndicator, ProgressLabel, type ProgressSize, ProgressTrack, ProgressValue, PropertyPair, PropertyRow, RadarChart, type RadarChartProps, RadialChart, type RadialChartProps, Radio, RadioCard, type RadioCardProps, type RadioCardTone, RadioGroup, RelativeTime, type RelativeTimeProps, Reveal, type RevealProps, type Rgb, SABLE_UI_VERSION, SEGMENTED_BAR_TONES, STATUS_TONES, STATUS_TONE_ICON, type ScrollCommandOptions, Scroller, type ScrollerProps, ScrubField, type ScrubFieldProps, SearchInput, type SearchInputProps, SectionHeader, type SectionHeaderProps, SegmentedBar, type SegmentedBarProps, type SegmentedBarSegment, type SegmentedBarTone, Select, SelectContent, SelectGroup, SelectGroupLabel, SelectItem, SelectPortal, SelectSeparator, SelectTrigger, SelectValue, Separator, type SeparatorProps$3 as SeparatorProps, SettingsMenu, type SettingsMenuProps, SettingsRow, type SettingsRowProps, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetList, SheetPortal, SheetTitle, SheetTrigger, ShowMore, type ShowMoreProps, SideNav, type SideNavActiveVariant, SideNavGroup, type SideNavGroupProps, SideNavItem, type SideNavItemProps, type SideNavProps, type SideNavSize, Sidebar, SidebarBrand, type SidebarBrandProps, SidebarFooter, SidebarHeader, SidebarItem, type SidebarItemProps, SidebarNav, type SidebarProps, SimpleTooltip, Skeleton, Slider, SliderControl, SliderIndicator, SliderRoot, SliderThumb, SliderTrack, SliderValue, Sparkline, type SparklineProps, Spinner, type SpinnerProps, StatusBar, StatusBarGroup, StatusBarSeparator, StatusDot, type StatusDotProps, type StatusTone, type StepStatus, Stepper, StepperItem, type StepperItemProps, type StepperOrientation, type StepperProps, StreamingText, type StreamingTextProps, Switch, TRANSPARENT, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsPanel as TabsContent, TabsList, TabsPanel, TabsTrigger, TextReveal, type TextRevealProps, Textarea, type TextareaProps, ThemeId, ThemeManifest, ThemeMode$1 as ThemeManifestMode, type ThemeMode, ThemePreview, type ThemePreviewProps, ThemeSelector, type ThemeSelectorProps, ThemeSwitcher, type ThemeSwitcherProps, ThinkingOrb, type ThinkingOrbProps, ToastAction, type ToastApi, ToastClose, ToastContent, ToastDescription, type ToastManagerApi, type ToastOptions, type ToastPosition, ToastProvider, type ToastProviderProps, ToastRoot, ToastTitle, type ToastType, ToastViewport, Toggle, ToggleGroup, type ToggleGroupAppearance, Toggle as ToggleGroupItem, Toolbar, ToolbarButton, type ToolbarButtonProps, ToolbarGroup, type ToolbarGroupProps, ToolbarInput, type ToolbarInputProps, ToolbarLink, type ToolbarLinkProps, type ToolbarProps, ToolbarSeparator, type ToolbarSeparatorProps, Tooltip, TooltipArrow, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger, Tree, TreeAddRow, TreeEmpty, TreeRow, TreeSection, type UseCopyOptions, type UseCopyResult, type UseInViewOptions, type UsePanelWidthOptions, Video, type VideoProps, ViewTransitionName, type ViewTransitionNameProps, Workspace, WorkspaceBar, WorkspaceCanvas, accordionMeta, appHeaderMeta, appShellMeta, areaChartMeta, attachmentMeta, avatarGroupVariants, avatarMeta, avatarVariants, badgeMeta, badgeVariants, bannerMeta, bannerVariants, barChartMeta, bottomNavMeta, breadcrumbsMeta, browserMeta, bubbleMeta, buttonMeta, buttonVariants, calendarMeta, cardMeta, carouselMeta, chartColor, toneColor as chartToneColor, chatComposerMeta, checkboxCardMeta, checkboxMeta, cn, codeBlockMeta, codeMeta, collapsibleMeta, colorFieldMeta, comboboxMeta, commandMenuMeta, componentGuidance, componentLabel, componentSlug, componentsInGroup, contextCardMeta, contextMenuMeta, dataTableMeta, datePickerMeta, dateTileMeta, destructiveActionModalMeta, dialogMeta, disclosurePickerMeta, emptyStateMeta, entityMeta, feedbackMeta, fieldsetMeta, fileDropzoneMeta, fileDropzoneVariants, fontPickerMeta, formMeta, formatFileSize, formatHex, glidingHighlightMeta, gradientArtMeta, hsvToRgb, hueColor, inlineStatusMeta, inputMeta, isTransparent, kbdMeta, labelMeta, lineChartMeta, markerMeta, marqueeMeta, mediaImageMeta, mediaTileMeta, menuMeta, messageMeta, messageScrollerMeta, meterIndicatorVariants, meterMeta, meterTrackVariants, middleTruncateMeta, noteMeta, noteVariants, notificationBadgeMeta, notificationCountVariants, notificationDotVariants, numberFieldMeta, otpFieldMeta, overflowMenuMeta, pageHeaderMeta, pageLoaderMeta, paginationMeta, panelGroupMeta, panelSectionMeta, parseHex, phoneMeta, pieChartMeta, pillMeta, pillVariants, popoverMeta, progressMeta, progressTrackVariants, radarChartMeta, radialChartMeta, radioCardMeta, radioMeta, relativeTimeMeta, rgbToHsv, scrollerMeta, scrubFieldMeta, searchInputMeta, sectionHeaderMeta, segmentedBarMeta, segmentedBarSegmentVariants, segmentedBarVariants, selectMeta, separatorMeta, settingsMenuMeta, sheetMeta, sheetVariants, showMoreMeta, sideNavMeta, sidebarMeta, skeletonMeta, sliderMeta, sparklineMeta, spinnerMeta, startViewTransition, statusBarMeta, statusDotMeta, statusDotVariants, stepperConnectorVariants, stepperIndicatorVariants, stepperMeta, streamingTextMeta, supportsViewTransitions, switchMeta, tableMeta, tabsMeta, textareaMeta, themeSelectorMeta, themeSwitcherMeta, thinkingOrbMeta, toast, toastMeta, toggleMeta, toolbarGroupVariants, toolbarMeta, toolbarSeparatorVariants, toolbarVariants, tooltipMeta, treeIndent, treeMeta, useAnchoredDensity, useComboboxFilteredItems, useCommandMenuShortcut, useCopy, useDensity, useDisclosurePicker, useInView, useMotion, usePanelWidth, usePresentation, useReducedMotion, useScrollActivity, useSidebar, useToast, useToastManager, useTypeTier, videoMeta, workspaceMeta };

package/dist/index.js

@@ -160,7 +160,7 @@ import { PresentationProvider, usePresentation } from "./lib/presentation.js";
 import { useScrollActivity } from "./lib/use-scroll-activity.js";
 import { useCopy } from "./lib/use-copy.js";
 import { STATUS_TONES, STATUS_TONE_ICON } from "./lib/status-tone.js";
-var SABLE_UI_VERSION = "0.7.0";
+var SABLE_UI_VERSION = "0.8.0";
 export {
   ART_TOKENS,
   CHART_SERIES_COUNT,

package/dist/layout/index.d.ts

@@ -12,7 +12,10 @@ type Edge = "top" | "bottom" | "left" | "right";
  * - `feed`    640px — single-column timeline / reading feed
  * - `content` 896px — general content + settings/admin panes (some 2-up fields)
  * - `wide`    1280px — dashboards, tables, multi-column grids
- * - `full`    1536px — full-bleed safety ceiling
+ * - `full`    1536px — the largest cap; keeps the inset (edge to edge is `bleed`)
+ *
+ * Omit `max` for fluid: work views whose panes, board or canvas use the space.
+ * A cap is a ceiling, reached only when the viewport minus app chrome exceeds it.
  * - `ultrawide` 1800px — legacy; prefer `full`
  */
 type RegionMax = "prose" | "form" | "feed" | "content" | "wide" | "full" | "ultrawide";
@@ -24,7 +27,7 @@ interface RegionProps extends ComponentPropsWithRef<"div"> {
     /**
      * Opt-in centered max-width cap: a purpose-named region ("prose" | "form" |
      * "feed" | "content" | "wide" | "full") or any raw CSS length (e.g. "56rem").
-     * Omit for fully fluid, edge-to-edge (the default).
+     * Omit for fluid (the default): full width inside the page inset.
      */
     max?: RegionMax | (string & {});
     /** Full-bleed: edge to edge with no inset. Overrides `inset`. */

package/dist/lib/chart/format.js

@@ -12,8 +12,13 @@ function categoryText(v, locale) {
 function approxTextWidth(text) {
   return text.length * 6.6 + 4;
 }
+function centerValueText(value, locale) {
+  if (typeof value === "string") return value;
+  return Math.abs(value) < 1e4 ? new Intl.NumberFormat(locale, { maximumFractionDigits: 1 }).format(value) : new Intl.NumberFormat(locale, { notation: "compact", maximumFractionDigits: 1 }).format(value);
+}
 export {
   approxTextWidth,
   categoryText,
+  centerValueText,
   chartFormatters
 };

package/dist/lib/component-guidance.js

@@ -45,11 +45,16 @@ var componentGuidance = {
     keywords: ["region", "page width", "container", "layout"],
     description: "Use Region as the page-width primitive that applies fluid page inset and an optional purpose-named max width.",
     dos: [
-      "Choose the max value by content role, such as prose, form, feed, content, wide, or full.",
+      "Choose the max value by what the person does on the page: read (prose), fill in a form (form), scroll one stream (feed), review one record or settings (content), scan and compare rows or cards (wide).",
+      "Omit max (fluid) for work across panes, a board, an editor or a map, where a flexible part uses the extra width; cap text inside it with --measure-prose.",
+      "Give sibling routes in one nav the same width so the header does not jump between them.",
+      "Review a capped or fluid route at 1920px and 2560px: a cap is a ceiling, so below the cap plus app chrome every choice looks the same.",
       "Use Region near the route or section boundary so inner layout stays intentional."
     ],
     donts: [
-      "Do not use Region as a global wrapper that forces every page into the same max width."
+      "Do not use Region as a global wrapper that forces every page into the same max width.",
+      "Do not go fluid when the extra width only widens the gaps between fixed columns; cap it.",
+      "Do not read full as edge to edge: it is the largest cap and keeps the page inset. Use bleed for edge to edge."
     ],
     related: { components: ["Page", "Grid", "Columns"] }
   }),

package/dist/lib/heading-row.js

@@ -9,11 +9,12 @@ function HeadingRow({
   titleClassName,
   band,
   leading,
-  actions
+  actions,
+  titleBasis = "basis-48"
 }) {
   const hasControls = Boolean(leading || actions);
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-start justify-between gap-x-3 gap-y-2", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 basis-48 items-start gap-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: cn("flex min-w-0 flex-1 items-start gap-2", titleBasis), children: [
       leading ? /* @__PURE__ */ jsx("div", { className: cn("shrink-0", BLEED_FIRST_START), children: leading }) : null,
       title ? /* @__PURE__ */ jsx(
         Title,

package/dist/lib/trim-label.js

@@ -7,12 +7,25 @@ function trimLabel(children) {
   }
   if (children == null || typeof children === "boolean") return children;
   if (isValidElement(children)) return children;
+  const out = [];
+  let run = [];
   let wrapped = false;
-  const out = Children.map(children, (child, i) => {
-    if (typeof child !== "string" && typeof child !== "number") return child;
+  const flush = () => {
+    if (!run.length) return;
     wrapped = true;
-    return /* @__PURE__ */ jsx("span", { className: "sable-label-trim", children: child }, `label-${i}`);
-  });
+    out.push(
+      /* @__PURE__ */ jsx("span", { className: "sable-label-trim", children: run.join("") }, `label-${out.length}`)
+    );
+    run = [];
+  };
+  for (const child of Children.toArray(children)) {
+    if (typeof child === "string" || typeof child === "number") run.push(child);
+    else {
+      flush();
+      out.push(child);
+    }
+  }
+  flush();
   return wrapped ? out : children;
 }
 export {

package/dist/presets/index.d.ts

@@ -77,6 +77,12 @@ declare function checkLabelledFills(tokens: {
     unmeasured: string[];
 };
 
+/**
+ * Page widths: the inset and the role caps. A product sets their values, keeping
+ * the role names; bundled themes already do. Opt-in, so a template or snapshot
+ * leaves them out rather than copying defaults over widths an app set itself.
+ */
+declare const PAGE_WIDTH_TOKENS: readonly ["page-inset", "region-form", "region-feed", "region-content", "region-wide", "region-full"];
 /** The public theme vocabulary. Presets never need component overrides. */
 declare const PRESET_TOKEN_NAMES: readonly string[];
 interface SablePreset {
@@ -137,4 +143,4 @@ declare function presetLabelContrast(input: SablePreset): {
     unmeasured: string[];
 };
 
-export { BRAND_FILLS, LABELLED_FILLS, LABEL_CONTRAST_RULE, type LabelFinding, type OklchColor, PRESET_TOKEN_NAMES, type PresetException, STATUS_FILLS, type SablePreset, checkLabelledFills, fitFillToInk, inkFor, inkPolarity, labelContrast, parsePreset, presetCss, presetLabelContrast, presetManifest, validatePreset };
+export { BRAND_FILLS, LABELLED_FILLS, LABEL_CONTRAST_RULE, type LabelFinding, type OklchColor, PAGE_WIDTH_TOKENS, PRESET_TOKEN_NAMES, type PresetException, STATUS_FILLS, type SablePreset, checkLabelledFills, fitFillToInk, inkFor, inkPolarity, labelContrast, parsePreset, presetCss, presetLabelContrast, presetManifest, validatePreset };

package/dist/presets/index.js

@@ -25,6 +25,14 @@ import {
   inkPolarity,
   labelContrast
 } from "../themes/contrast.js";
+var PAGE_WIDTH_TOKENS = [
+  "page-inset",
+  "region-form",
+  "region-feed",
+  "region-content",
+  "region-wide",
+  "region-full"
+];
 var PRESET_TOKEN_NAMES = [.../* @__PURE__ */ new Set([
   ...SEMANTIC_TOKENS,
   ...WORKSPACE_SURFACE_TOKENS.map((name) => `theme-${name}`),
@@ -45,6 +53,7 @@ var PRESET_TOKEN_NAMES = [.../* @__PURE__ */ new Set([
   "font-mono",
   "font-display",
   "spacing",
+  ...PAGE_WIDTH_TOKENS,
   "theme-shadow-sm",
   "theme-shadow",
   "theme-shadow-md",
@@ -202,6 +211,7 @@ export {
   BRAND_FILLS,
   LABELLED_FILLS2 as LABELLED_FILLS,
   LABEL_CONTRAST_RULE2 as LABEL_CONTRAST_RULE,
+  PAGE_WIDTH_TOKENS,
   PRESET_TOKEN_NAMES,
   STATUS_FILLS,
   checkLabelledFills2 as checkLabelledFills,

package/dist/styles.css

@@ -375,9 +375,15 @@
 
 	/* The Switch knob when OFF: light in BOTH modes, like every physical toggle.
 	   It used to be `--background`, which in a dark theme is a near-black knob on
-	   a dark track (well under 3:1). When ON the knob takes `--primary-foreground`,
-	   the ink every theme already tunes against its primary fill. */
+	   a dark track (well under 3:1). */
 	--switch-thumb: var(--theme-switch-thumb, oklch(99% 0.002 90));
+	/* ON, the knob stays white too. It used to take `--primary-foreground`, the
+	   ink tuned for LABELS on the primary fill, so a mid-light brand colour that
+	   needs dark text gave a dark knob, which no switch has. A knob is a shape, not
+	   text: the track carries the state, and the knob only has to separate from
+	   it, which white does on any track short of near-white. So it turns dark
+	   only on a track lighter than L 0.9 (the near-white primary of a dark mode). */
+	--switch-thumb-on: var(--theme-switch-thumb-on, oklch(from var(--primary) clamp(0.25, calc((0.9 - l) * 1000), 0.99) 0.002 90));
 
 	/* The contact shadow under a knob: the Switch thumb, the Slider thumb, the
 	   ColorField handle. NOT the elevation ladder. `shadow-sm` is a surface's
@@ -1522,6 +1528,25 @@
    visibility utilities the app-shell components already use.
    ========================================================================== */
 
+/* Each element owns its breakpoint values. Custom properties inherit, so a
+   breakpoint a nested Grid or Col leaves unset read its ancestor's: a `cols={2}`
+   Grid inside `Columns count={{ lg: 12 }}` drew 12 tracks at lg. Resetting
+   them here makes an unset one invalid, so the fallback chain below runs on the
+   element itself; the values it was given are inline and win over this. */
+[data-sable-col] {
+	--col-span-base: initial; --col-span-sm: initial; --col-span-md: initial;
+	--col-span-lg: initial; --col-span-xl: initial; --col-span-2xl: initial;
+	--col-start-base: initial; --col-start-sm: initial; --col-start-md: initial;
+	--col-start-lg: initial; --col-start-xl: initial; --col-start-2xl: initial;
+}
+[data-sable-grid-cols] {
+	--cols-base: initial; --cols-sm: initial; --cols-md: initial;
+	--cols-lg: initial; --cols-xl: initial; --cols-2xl: initial;
+}
+[data-sable-split] {
+	--split-gap: initial;
+}
+
 /* `Col span={{ base, md, lg }}` / `start={…}` — each breakpoint resolves to the
    most specific value defined at or below it (mobile-first cascade). */
 [data-sable-col] {

package/llms/blocks/traffic-sources-block.md

@@ -51,7 +51,7 @@ export function TrafficSourcesBlock({ className, framed = true }: TrafficSources
 					index="source"
 					valueKey="visitors"
 					donut
-					centerLabel={{ value: total.toLocaleString("en-US"), label: "Visitors" }}
+					centerLabel={{ value: total, label: "Visitors" }}
 				/>
 			</CardContent>
 			<CardFooter className="text-body-sm text-muted-foreground">

package/llms/blocks/traffic-trend-block.md

@@ -56,11 +56,13 @@ export function TrafficTrendBlock({ className, framed = true }: TrafficTrendBloc
 	const [range, setRange] = useState("90d")
 	const shown = days.slice(-(ranges.find((r) => r.id === range)?.days ?? 90))
 	return (
-		<Card variant={framed ? "default" : "flat"} className={cn("w-full max-w-3xl", className)}>
-			<CardHeader>
+		<Card variant={framed ? "default" : "flat"} className={cn("@container/trend w-full max-w-3xl", className)}>
+			<CardHeader className="@max-sm/trend:has-data-[slot=card-action]:grid-cols-1">
 				<CardTitle render={<h2 />}>Visitors</CardTitle>
 				<CardDescription>Desktop and mobile, by day.</CardDescription>
-				<CardAction>
+				{/* Beside the title on a wide card; under it on a narrow one, where three
+				    ranges would squeeze the title and description into a sliver. */}
+				<CardAction className="@max-sm/trend:col-start-1 @max-sm/trend:row-span-1 @max-sm/trend:row-start-auto @max-sm/trend:mt-2 @max-sm/trend:justify-self-start">
 					<ToggleGroup value={[range]} onValueChange={(v: unknown[]) => v[0] && setRange(String(v[0]))} aria-label="Time range">
 						{ranges.map((r) => (
 							<Toggle key={r.id} value={r.id}>

package/llms/components/breadcrumbs.md

@@ -31,7 +31,7 @@ Use Breadcrumbs to show the user's location inside a hierarchy and provide light
 | Name | Type | Description |
 | --- | --- | --- |
 | BreadcrumbItem | ComponentPropsWithRef<'li'> | A single crumb slot (<li>) holding a link or the current page. |
-| BreadcrumbLink | ComponentPropsWithRef<'a'> | An interactive ancestor crumb (<a>). Muted by default, brightens to foreground on hover/focus. |
+| BreadcrumbLink | ComponentPropsWithRef<'a'> & { render?: useRender.RenderProp } | An interactive ancestor crumb (<a>). Muted by default, brightens to foreground on hover/focus. render composes another element with the crumb's styling, e.g. a router link: render={<Link to="/library" />}, so navigating stays in the app. |
 | BreadcrumbPage | ComponentPropsWithRef<'span'> | The current-page crumb (<span aria-current="page">). Non-interactive, full-contrast. |
 | BreadcrumbSeparator | ComponentPropsWithRef<'li'> + { children? } | Decorative divider (<li aria-hidden>) between crumbs. Defaults to a chevron-right icon; pass children to swap the glyph. |
 

package/llms/components/button.md

@@ -13,6 +13,7 @@ Use Button when the user commits an action, submits a form, opens UI, or confirm
 ### Best practices
 
 - Do: Use a single primary button in a view or dense panel so the action hierarchy stays obvious.
+- Do: For a copy control, pair an icon Button with `useCopy(text, { timeout? })`. It takes the text when the hook is called and returns `{ copy, copied }`; `copy()` takes no argument, so pass the value the button copies to the hook, not to `copy`.
 - Do: Write labels as actions, such as "Save changes" or "Delete draft", instead of vague labels like "OK".
 - Do: Use loading with loadingLabel for async work so the action cannot double-fire and the state is announced.
 - Do: Put icons in iconStart / iconEnd rather than as children, so the button applies its optical padding. Start icons say what the action is (plus, share); end icons say where it goes (chevron-right, external).

package/llms/components/chat-composer.md

@@ -2,7 +2,7 @@
 
 **Status:** stable
 
-The input half of a conversation: one surface holding attachments, an auto-growing field, and its controls. Enter sends, Shift+Enter breaks the line, and send becomes stop while a reply streams.
+The input half of a conversation: one surface holding attachments, an auto-growing field, and its controls. Enter sends, Shift+Enter breaks the line (sendOn="mod-enter" swaps them for long-form replies), and send becomes stop while a reply streams.
 
 **Keywords:** chat input, composer, message input, prompt input, send message, ai chat, support chat, textarea
 
@@ -19,7 +19,7 @@ Pairs with MessageScroller to make a working chat. A single surface rather than
 - Do: Building a docked agent panel inside a tool? Wrap the whole conversation — scroller, messages and composer — in `<Density value="compact">`. The entire set follows the workspace register from there: prose drops a tier, the rhythm tightens, and the controls come off the compact ladder. Do not hand-size it at the call site.
 - Don't: Do not clear a controlled composer for the user on send. Only the caller knows whether the send succeeded, and clearing on their behalf loses the message when it did not.
 - Don't: Do not add your own Enter-to-send handler on top. The built-in one already guards against firing mid-IME-composition, which is the line hand-rolled chat inputs miss.
-- Don't: Do not use it as a general multi-line input. That is `Textarea` — this one submits on Enter, which is wrong for any field inside a larger form.
+- Don't: Do not use it as a general multi-line input inside a larger form. That is `Textarea`. A standalone reply box that sends multi-paragraph messages (email, support replies) is this one with sendOn="mod-enter".
 - Don't: Do not override the field's type utility to make it match your transcript. The field and `Bubble` both read the same tier already, which is what stops a message changing size the moment it is sent — overriding one breaks that pairing.
 - Don't: Do not remove the height cap to let the field grow without limit. A pasted essay would push the conversation off the screen; past the cap it scrolls.
 
@@ -41,6 +41,7 @@ Pairs with MessageScroller to make a working chat. A single surface rather than
 | onValueChange | (value: string) => void | — | Notified on every keystroke. Required when `value` is supplied. |
 | onSend | (value: string) => void | — | Called with the trimmed message. An uncontrolled composer clears itself afterwards; a controlled one is the caller's to clear. |
 | placeholder | string | "Send a message…" | Placeholder for the field. |
+| sendOn | "enter" \| "mod-enter" | "enter" | Which key sends. enter for chat (Shift+Enter breaks the line). mod-enter for long-form replies such as an email or a support answer: Enter breaks the line and Cmd/Ctrl+Enter sends, so a paragraph break never mails a draft. Say so in footer ("Cmd+Enter to send"). |
 | busy | boolean | false | A reply is streaming. Disables send, and swaps it for a stop control when `onStop` is supplied. |
 | onStop | () => void | — | Interrupt the in-flight reply. Supplying it turns send into stop while busy. |
 | disabled | boolean | false | Block sending entirely — over a limit, disconnected, read-only thread. Distinct from `busy`, which is temporary and offers a way out (stop). |