@sableui/react 0.7.0 → 0.7.1

package/CHANGELOG.md

@@ -1,5 +1,47 @@
 # What's new
 
+## 0.7.1
+
+Fixes from building a customer-support app on 0.7.0 with an app-owned preset,
+plus guidance for choosing a page width. Nothing to migrate.
+
+- **A table in a flush card keeps the card's corners.** `Card` now clips to its
+  rounded corners when it holds a `CardContent flush`, as it already did for a
+  `CardList`. The hover fill of an edge-to-edge `Table` or `DataTable` row and a
+  `TableFooter`'s tint no longer poke square corners out past the card's.
+- **Only body rows hover.** `TableRow` lifts on hover inside `TableBody`; header
+  and footer rows stay still, since nothing there responds to a click.
+- **SideNav and Sidebar icons stay level with their labels at any spacing
+  step.** The icon box was sized in spacing steps around an icon sized in type,
+  so a theme with a step other than 4px shrank the box and dropped every icon
+  about 2px below its label. The box is now sized in the icon's own unit and
+  centred with flex.
+- **A donut's number holds the centre.** In `PieChart` and a full-ring
+  `RadialChart`, `centerLabel`'s value sits on the centre and its caption hangs
+  below, instead of the pair splitting the centre between them.
+- **`centerLabel.value` takes a number.** It is written in full up to 9,999 and
+  shortened from 10,000 on (`10.2K`, `102.1K`, `1.2M`), in the chart's
+  `locale`. A string still shows as written, for units.
+- **Presets can set page widths.** `page-inset` and the role caps
+  (`region-form`, `-feed`, `-content`, `-wide`, `-full`) are preset tokens, so a
+  product's widths live in its preset rather than app CSS. They are opt-in:
+  `sable preset --template` and Canvas exports leave them out, so a preset never
+  overrides widths an app already sets. `PAGE_WIDTH_TOKENS` lists them.
+- **Guidance for choosing a page width.** `sable docs building-a-page` has a
+  table of which `max` to use by what the person does on the page, and when to
+  go fluid. The Region docs say `full` is the largest cap (edge to edge is
+  `bleed`) and show a fluid workspace; the old "Fluid dashboard" example was
+  capped and is retitled. `reviewing-a-design` asks for a 1920px capture of a
+  capped or fluid route, where the choice shows, and the skill's brief records
+  each route's width.
+- **A pasted preset gets applied.** Canvas's "Copy for agent" message now asks
+  the agent to apply the preset and build the app, not only save it. The skill
+  treats a preset supplied for an existing app as a restyle, `sable docs
+  using-presets` has an "Apply to an existing app" section, and a passing
+  `sable preset --check` lists the steps that make an app use the preset.
+- **`TrafficTrendBlock` fits a narrow card.** Below 24rem its range toggles
+  move under the title instead of squeezing it.
+
 ## 0.7.0
 
 A dogfooding release. An agent built a music streaming app on Sable with

package/dist/blocks/traffic-sources-block.js

@@ -24,7 +24,7 @@ function TrafficSourcesBlock({ className, framed = true }) {
         index: "source",
         valueKey: "visitors",
         donut: true,
-        centerLabel: { value: total.toLocaleString("en-US"), label: "Visitors" }
+        centerLabel: { value: total, label: "Visitors" }
       }
     ) }),
     /* @__PURE__ */ jsxs(CardFooter, { className: "text-body-sm text-muted-foreground", children: [

package/dist/blocks/traffic-trend-block.js

@@ -27,11 +27,11 @@ var shortDate = (iso) => (/* @__PURE__ */ new Date(`${iso}T00:00:00`)).toLocaleD
 function TrafficTrendBlock({ className, framed = true }) {
   const [range, setRange] = useState("90d");
   const shown = days.slice(-(ranges.find((r) => r.id === range)?.days ?? 90));
-  return /* @__PURE__ */ jsxs(Card, { variant: framed ? "default" : "flat", className: cn("w-full max-w-3xl", className), children: [
-    /* @__PURE__ */ jsxs(CardHeader, { children: [
+  return /* @__PURE__ */ jsxs(Card, { variant: framed ? "default" : "flat", className: cn("@container/trend w-full max-w-3xl", className), children: [
+    /* @__PURE__ */ jsxs(CardHeader, { className: "@max-sm/trend:has-data-[slot=card-action]:grid-cols-1", children: [
       /* @__PURE__ */ jsx(CardTitle, { render: /* @__PURE__ */ jsx("h2", {}), children: "Visitors" }),
       /* @__PURE__ */ jsx(CardDescription, { children: "Desktop and mobile, by day." }),
-      /* @__PURE__ */ jsx(CardAction, { children: /* @__PURE__ */ jsx(ToggleGroup, { value: [range], onValueChange: (v) => v[0] && setRange(String(v[0])), "aria-label": "Time range", children: ranges.map((r) => /* @__PURE__ */ jsx(Toggle, { value: r.id, children: r.label }, r.id)) }) })
+      /* @__PURE__ */ jsx(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", children: /* @__PURE__ */ jsx(ToggleGroup, { value: [range], onValueChange: (v) => v[0] && setRange(String(v[0])), "aria-label": "Time range", children: ranges.map((r) => /* @__PURE__ */ jsx(Toggle, { value: r.id, children: r.label }, r.id)) }) })
     ] }),
     /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx(
       AreaChart,

package/dist/components/card/card.js

@@ -44,10 +44,13 @@ function Card({
         "[--card-inner-radius:max(var(--radius-sm),calc(var(--radius-lg)-var(--card-p)-1px))]",
         // Declares its surface so sable-well / sable-surface-interactive inside derive from the card.
         variant === "default" && "border border-border bg-card shadow-sm [--sable-surface-bg:var(--card)]",
-        // A CardList runs its rows to the card's edges, and an interactive
-        // row's hover fill would otherwise poke square-ish corners out past
-        // the card's rounded ones — clip to the card's own curve instead.
-        "has-data-[slot=card-list]:overflow-clip",
+        // A CardList or a flush CardContent (an edge-to-edge Table) runs its
+        // rows to the card's edges, and a row's hover fill or a TableFooter's
+        // tint would otherwise poke square corners out past the card's
+        // rounded ones — clip to the card's own curve instead. Nothing
+        // overflows on purpose here: the table insets its edge cells by
+        // --table-edge-px, so focus rings stay inside, and menus portal out.
+        "has-data-[slot=card-list]:overflow-clip has-[[data-slot=card-content][data-flush]]:overflow-clip",
         INTERACTIVE_BASE,
         INTERACTIVE_HOVER[variant],
         className

package/dist/components/pie-chart/pie-chart.js

@@ -5,7 +5,7 @@ import { useId } from "react";
 import { ChartFrame } from "../../lib/chart/chart-frame.js";
 import { ChartLegend } from "../../lib/chart/chart-legend.js";
 import { ChartTooltipContent } from "../../lib/chart/chart-tooltip.js";
-import { categoryText, chartFormatters } from "../../lib/chart/format.js";
+import { categoryText, centerValueText, chartFormatters } from "../../lib/chart/format.js";
 import { arcPath, polar } from "../../lib/chart/geometry.js";
 import { DRAW_DURATION, morphTransition, pathStyle } from "../../lib/chart/motion.js";
 import {
@@ -177,8 +177,8 @@ function PieChart({
             );
           }) : null,
           centerLabel && g.inner > 0 ? /* @__PURE__ */ jsxs("text", { x: g.cx, y: g.cy, textAnchor: "middle", className: "[[data-reveal=out]_&]:opacity-0", style: { transition: morphTransition() }, children: [
-            /* @__PURE__ */ jsx("tspan", { x: g.cx, dy: centerLabel.label ? "-0.1em" : "0.32em", className: "fill-foreground text-heading-2 tabular-nums", children: centerLabel.value }),
-            centerLabel.label ? /* @__PURE__ */ jsx("tspan", { x: g.cx, dy: "1.6em", className: "fill-muted-foreground text-caption", children: centerLabel.label }) : null
+            /* @__PURE__ */ jsx("tspan", { x: g.cx, dy: "0.35em", className: "fill-foreground text-heading-2 tabular-nums", children: centerValueText(centerLabel.value, locale) }),
+            centerLabel.label ? /* @__PURE__ */ jsx("tspan", { x: g.cx, dy: "1.9em", className: "fill-muted-foreground text-caption", children: centerLabel.label }) : null
           ] }) : null
         ] });
       }

package/dist/components/pie-chart/pie-chart.meta.js

@@ -83,8 +83,8 @@ var pieChartMeta = {
     },
     {
       name: "centerLabel",
-      type: "{ value: string; label?: string }",
-      description: "A value and caption in the hole of a donut."
+      type: "{ value: string | number; label?: string }",
+      description: "A value and caption in the hole of a donut. The value holds the centre and the caption hangs below it. A number is formatted for you: in full up to 9,999, compact from 10,000 (10.2K, 102.1K, 1.2M); pass a string for units."
     },
     {
       name: "separator",
@@ -197,7 +197,7 @@ var pieChartMeta = {
   examples: [
     {
       label: "Donut with a total",
-      code: 'const sources = [\n	{ source: "Search", visitors: 275 },\n	{ source: "Direct", visitors: 200 },\n	{ source: "Social", visitors: 187 },\n	{ source: "Email", visitors: 90 },\n]\n\n<PieChart\n	label="Visitors by source"\n	data={sources}\n	index="source"\n	valueKey="visitors"\n	donut\n	centerLabel={{ value: "752", label: "Visitors" }}\n/>'
+      code: 'const sources = [\n	{ source: "Search", visitors: 275 },\n	{ source: "Direct", visitors: 200 },\n	{ source: "Social", visitors: 187 },\n	{ source: "Email", visitors: 90 },\n]\n\n<PieChart\n	label="Visitors by source"\n	data={sources}\n	index="source"\n	valueKey="visitors"\n	donut\n	centerLabel={{ value: 752, label: "Visitors" }}\n/>'
     },
     {
       label: "Labelled slices",

package/dist/components/radial-chart/radial-chart.js

@@ -4,7 +4,7 @@
 import { ChartFrame } from "../../lib/chart/chart-frame.js";
 import { ChartLegend } from "../../lib/chart/chart-legend.js";
 import { ChartTooltipContent } from "../../lib/chart/chart-tooltip.js";
-import { categoryText, chartFormatters } from "../../lib/chart/format.js";
+import { categoryText, centerValueText, chartFormatters } from "../../lib/chart/format.js";
 import { polar, strokeArcPath } from "../../lib/chart/geometry.js";
 import { drawTransition, morphTransition, pathStyle, stagger } from "../../lib/chart/motion.js";
 import {
@@ -159,8 +159,8 @@ function RadialChart({
               className: "[[data-reveal=out]_&]:opacity-0",
               style: { transition: morphTransition() },
               children: [
-                /* @__PURE__ */ jsx("tspan", { x: g.cx, dy: gauge && sweep <= 180 ? centerLabel.label ? "-1.4em" : "0" : centerLabel.label ? "-0.1em" : "0.32em", className: "fill-foreground text-heading-2 tabular-nums", children: centerLabel.value }),
-                centerLabel.label ? /* @__PURE__ */ jsx("tspan", { x: g.cx, dy: "1.6em", className: "fill-muted-foreground text-caption", children: centerLabel.label }) : null
+                /* @__PURE__ */ jsx("tspan", { x: g.cx, dy: gauge && sweep <= 180 ? centerLabel.label ? "-1.4em" : "0" : "0.35em", className: "fill-foreground text-heading-2 tabular-nums", children: centerValueText(centerLabel.value, locale) }),
+                centerLabel.label ? /* @__PURE__ */ jsx("tspan", { x: g.cx, dy: gauge && sweep <= 180 ? "1.6em" : "1.9em", className: "fill-muted-foreground text-caption", children: centerLabel.label }) : null
               ]
             }
           ) : null

package/dist/components/radial-chart/radial-chart.meta.js

@@ -107,8 +107,8 @@ var radialChartMeta = {
     },
     {
       name: "centerLabel",
-      type: "{ value: string; label?: string }",
-      description: "A value and caption in the middle."
+      type: "{ value: string | number; label?: string }",
+      description: 'A value and caption in the middle. On a full ring the value holds the centre and the caption hangs below it. A number is formatted for you: in full up to 9,999, compact from 10,000 (10.2K); pass a string for units ("7.2 GB", "72%").'
     },
     {
       name: "legend",

package/dist/components/side-nav/side-nav.variants.js

@@ -20,9 +20,10 @@ var sideNavItemVariants = cva(
   }
 );
 var sideNavItemIconVariants = cva(
-  "grid shrink-0 place-items-center",
+  "flex shrink-0 items-center justify-center",
   {
-    variants: { size: { md: "size-5 text-xl", lg: "size-6 text-xl", rail: "size-6 text-2xl" } },
+    // md 20px icon in a 20px box; lg 20px in 24px; rail 24px in 24px.
+    variants: { size: { md: "size-[1em] text-xl", lg: "size-[1.2em] text-xl", rail: "size-[1em] text-2xl" } },
     defaultVariants: { size: "md" }
   }
 );

package/dist/components/table/table.js

@@ -51,7 +51,7 @@ function TableRow({ className, ...props }) {
     "tr",
     {
       className: cn(
-        "border-b border-border motion-interactive hover:bg-muted/50",
+        "border-b border-border motion-interactive [tbody>&:hover]:bg-muted/50",
         "*:motion-interactive data-[selected]:*:bg-muted data-[selected]:*:shadow-[1px_0_0_var(--muted)]",
         className
       ),

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
@@ -8218,6 +8224,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.7.1";
 
 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 };

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.7.1";
 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/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/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/pie-chart.md

@@ -28,7 +28,7 @@ Use PieChart for a share of one total across two to six categories — traffic s
 | categories | Record<string, { label?: string; tone?: ChartTone; color?: string; icon?: string }> | — | Labels, tones and icons per slice, keyed by the slice's name. Unlisted slices take the tones in order. |
 | className | string | "h-64" | Sizes the chart. Set a height. |
 | donut | boolean \| number | false | Cut out the middle: `true` for a ring at 60% of the radius, or a ratio (0–0.9). |
-| centerLabel | { value: string; label?: string } | — | A value and caption in the hole of a donut. |
+| centerLabel | { value: string \| number; label?: string } | — | A value and caption in the hole of a donut. The value holds the centre and the caption hangs below it. A number is formatted for you: in full up to 9,999, compact from 10,000 (10.2K, 102.1K, 1.2M); pass a string for units. |
 | separator | boolean | true | A hairline in the surface colour between slices. |
 | labels | "none" \| "outside" \| "inside" | "none" | Label each slice outside the pie or inside it. |
 | labelContent | "value" \| "percent" \| "name" | "value" | What a slice label says. |
@@ -82,7 +82,7 @@ const sources = [
 	index="source"
 	valueKey="visitors"
 	donut
-	centerLabel={{ value: "752", label: "Visitors" }}
+	centerLabel={{ value: 752, label: "Visitors" }}
 />
 ```
 

package/llms/components/radial-chart.md

@@ -32,7 +32,7 @@ Use RadialChart for progress toward goals (several rings), a single score or usa
 | stacked | boolean | false | Split ONE ring between the rows instead of a ring each. |
 | track | boolean | true | Draw each ring's full track behind it. |
 | labels | boolean | false | Name each ring at its start. |
-| centerLabel | { value: string; label?: string } | — | A value and caption in the middle. |
+| centerLabel | { value: string \| number; label?: string } | — | A value and caption in the middle. On a full ring the value holds the centre and the caption hangs below it. A number is formatted for you: in full up to 9,999, compact from 10,000 (10.2K); pass a string for units ("7.2 GB", "72%"). |
 | legend | boolean | true unless rings are labelled | Show the legend. |
 | tooltip | boolean \| { indicator?: "dot" \| "line" \| "dashed" \| "none"; hideLabel?: boolean; labelFormatter?: (label, datum) => ReactNode; showTotal?: boolean } | true | Show a tooltip on hover and keyboard focus, or configure it: the row marker, hiding the heading, rewriting it, adding a Total row. |
 | valueFormatter | (value: number) => string | — | Format values everywhere (axis, labels, tooltip, table) — units like "$12,480". Default: compact on the axis, full elsewhere. |

package/llms/layout/region.md

@@ -12,9 +12,14 @@ Use Region as the page-width primitive that applies fluid page inset and an opti
 
 ### Best practices
 
-- Do: Choose the max value by content role, such as prose, form, feed, content, wide, or full.
+- Do: 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).
+- Do: 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.
+- Do: Give sibling routes in one nav the same width so the header does not jump between them.
+- Do: 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.
 - Do: Use Region near the route or section boundary so inner layout stays intentional.
 - Don't: Do not use Region as a global wrapper that forces every page into the same max width.
+- Don't: Do not go fluid when the extra width only widens the gaps between fixed columns; cap it.
+- Don't: Do not read full as edge to edge: it is the largest cap and keeps the page inset. Use bleed for edge to edge.
 
 ## Props
 
@@ -22,7 +27,7 @@ Use Region as the page-width primitive that applies fluid page inset and an opti
 | --- | --- | --- | --- |
 | as | ElementType | "div" | Semantic element to render (e.g. "main", "section", "nav"). |
 | inset | boolean | true | Apply the fluid horizontal page inset (--page-inset). |
-| max | "prose" \| "form" \| "feed" \| "content" \| "wide" \| "full" \| CSS length | — | Opt-in centered max-width cap, purpose-named: prose 65ch (long-form reading) · form 480px (auth, narrow single-column forms) · feed 640px (single-column timeline) · content 896px (settings/admin panes) · wide 1280px (dashboards, tables, card grids) · full 1536px (full-bleed ceiling). Omit for fully fluid. |
+| max | "prose" \| "form" \| "feed" \| "content" \| "wide" \| "full" \| CSS length | — | Opt-in centered max-width cap, purpose-named: prose 65ch (long-form reading) · form 480px (auth, narrow single-column forms) · feed 640px (single-column timeline) · content 896px (settings/admin panes) · wide 1280px (dashboards, tables, card grids) · full 1536px (the largest cap; keeps the inset, so not edge to edge — that is bleed). Omit for fluid: work views whose panes, board or canvas use the extra width. A cap is a ceiling: it applies only once the viewport minus app chrome exceeds it, so judge it at 1920px and up. |
 | bleed | boolean | false | Full-bleed: edge to edge with no inset. Overrides inset. |
 | safeArea | boolean \| ("top"\|"bottom"\|"left"\|"right")[] | false | env(safe-area-inset-*) padding for fixed or native-shell surfaces. true pads top+bottom; pass an edge array to target edges. |
 
@@ -40,10 +45,18 @@ import { PageHeader, Region } from "@sableui/react"
 <Region as="main" max="content"><PageHeader title="Settings" /></Region>
 ```
 
-### Fluid dashboard region
+### Dashboard region (capped at wide)
 
 ```tsx
 import { Card, CardHeader, CardTitle, Grid, Region } from "@sableui/react"
 
 <Region max="wide"><Grid minItemWidth="16rem"><Card><CardHeader><CardTitle>Revenue</CardTitle></CardHeader></Card><Card><CardHeader><CardTitle>Collects</CardTitle></CardHeader></Card></Grid></Region>
 ```
+
+### Fluid workspace: the queue's table takes the extra width
+
+```tsx
+import { Card, CardContent, Col, Columns, DataTable, Region, SideNav, SideNavItem } from "@sableui/react"
+
+<Region as="main"><Columns count={{ base: 1, lg: 12 }}><Col span={{ base: 1, lg: 3 }}><SideNav aria-label="Views"><SideNavItem label="Open" active /><SideNavItem label="Pending" /></SideNav></Col><Col span={{ base: 1, lg: 9 }}><Card><CardContent flush><DataTable columns={columns} data={tickets} /></CardContent></Card></Col></Columns></Region>
+```

package/llms/tasks/building-a-page.md

@@ -30,9 +30,9 @@ designs. Record the reason for the chosen composition.
 </AppShell>
 ```
 
-- **Never a global `max-width`.** Width is capped per region by role:
-  `prose` / `form` / `feed` / `content` / `wide` / `full`. A form region is narrow
-  because a 700px text input is harder to use, not more generous.
+- **Never a global `max-width`.** Width is chosen per route by what the person
+  does there (below). A form region is narrow because a 700px text input is
+  harder to use, not more generous.
 - **Measure ≠ width.** Cap prose line length in `ch` (`--measure-prose`)
   independently of the region's layout width.
 - **The 12-column grid lives *inside* a region**, for genuinely multi-column
@@ -40,6 +40,37 @@ designs. Record the reason for the chosen composition.
 - **Chrome is off the grid.** `Sidebar` and rails are fixed-width, outside the
   content grid.
 
+## Choosing a width
+
+Pick each route's `max` by what the person mainly does on it:
+
+| They mainly… | `max` | Why |
+|---|---|---|
+| read long text | `prose` on the text, inside `content` | line length sets readability: cap the text, not the page |
+| fill in a form | `form` | narrow fields are faster to scan and fill |
+| scroll one stream | `feed` | one column, one eye path |
+| review one record, or settings | `content` | labels stay close to their values |
+| scan and compare rows, cards or charts | `wide` | room for columns without stretching the gaps between them |
+| work across panes, a board, an editor or a map | omit it (fluid), or `full` | the extra width goes to the parts that use it |
+
+- **Go fluid only when a flexible part uses the space**: a table's main column,
+  a canvas, a board, a reading pane. If extra width only widens the gaps between
+  fixed columns (a date drifting away from its subject), cap it.
+- **In a fluid page, cap text by line length** (`--measure-prose`, or
+  `Center max="prose"`), not by page width.
+- **Sibling routes in one nav share a width**, so the header doesn't jump as
+  people move between them. A detail view may differ.
+- **`full` is the largest cap, not edge to edge.** It keeps the page inset;
+  `bleed` is edge to edge.
+- **A cap is a ceiling.** It applies only once the viewport minus app chrome is
+  wider than it: beside a 256px sidebar, `wide` (1280px) starts at about 1536px,
+  so at 1440px `wide`, `full` and fluid look the same. Judge widths at 1920px and
+  2560px, and record each route's width and reason in the brief.
+- **A product's widths belong in its theme.** A preset may set `page-inset` and
+  `region-*` (`form`, `feed`, `content`, `wide`, `full`) in `tokens.shared`
+  (a copy in `light` or `dark` wins over it); keep the role names and change
+  the values.
+
 ## Typography: pick the tier by ROLE, not by size
 
 | tier | for | not |

package/llms/tasks/creating-a-preset.md

@@ -13,7 +13,10 @@ cannot establish animation timing, hidden behavior, or an unseen responsive stat
 Choose an original direction suitable for the user's future product. Map that
 direction onto the installed Sable token vocabulary. Preserve readable semantic
 roles and supported control behavior rather than recoloring every primitive
-independently. Load fonts through the consuming project's font setup.
+independently. Load fonts through the consuming project's font setup. Page widths
+are optional: set `page-inset` and the `region-*` caps (`form`, `feed`, `content`,
+`wide`, `full`) in `tokens.shared` only when the direction calls for a different
+page proportion, and keep each cap's role.
 
 ```bash
 pnpm exec sable preset --template

package/llms/tasks/reviewing-a-design.md

@@ -10,6 +10,10 @@ Save the surface brief, then capture the rendered route at a desktop width of at
 least 1024px and a mobile width of at most 480px. Record the actual viewport,
 route/state, supported color mode, and motion setting with each artifact. Inspect
 the whole route as well as its first viewport. Ensure fonts and media have loaded.
+Also capture a route that sets a width cap, or goes fluid, at 1920px: a cap applies
+only once the viewport minus app chrome exceeds it, so at 1024–1440px `wide`,
+`full` and fluid usually look the same and the width decision never shows. Add
+2560px for a fluid route.
 Use a recording or an observed interaction report for behavior that a still cannot
 show. Include reduced motion and every color mode the surface promises to support.
 

package/llms/tasks/using-presets.md

@@ -76,6 +76,25 @@ Use a unique preset ID so it cannot override a bundled theme or another record.
 Record any intentional adaptation and run the validation and rendered review in
 [building-with-sable.md](./building-with-sable.md).
 
+## Apply to an existing app
+
+A preset pasted into an agent for a running app (Canvas's “Copy for agent”) is a
+restyle: the job ends with the app built and rendered in the preset, not with a
+saved file. Replace, don't add beside:
+
+1. Save it to `.sable/presets/<id>.json`, overwriting an earlier revision of the
+   same ID, and run `sable preset --check`.
+2. Regenerate its CSS with `sable preset --css` and import it after Sable's
+   stylesheet. Remove the stylesheet of a theme it replaces when nothing else uses it.
+3. Load the families its `fonts` stacks name through the app's existing font
+   setup, and drop the old theme's font loading when no other code uses it.
+   An unloaded family falls back to a system face without any error.
+4. Point SableThemeProvider's `defaultThemeId` at the preset ID and
+   `defaultPreference` at its `defaultMode`, unless the user asked for another
+   mode. A bundled theme left as the default keeps the app on the old look.
+5. Run the app's build and type check, then `sable check`, and review the result
+   in both modes.
+
 ## Upgrade the package and skill
 
 ```bash

package/llms-full.txt

@@ -627,9 +627,9 @@ designs. Record the reason for the chosen composition.
 </AppShell>
 ```
 
-- **Never a global `max-width`.** Width is capped per region by role:
-  `prose` / `form` / `feed` / `content` / `wide` / `full`. A form region is narrow
-  because a 700px text input is harder to use, not more generous.
+- **Never a global `max-width`.** Width is chosen per route by what the person
+  does there (below). A form region is narrow because a 700px text input is
+  harder to use, not more generous.
 - **Measure ≠ width.** Cap prose line length in `ch` (`--measure-prose`)
   independently of the region's layout width.
 - **The 12-column grid lives *inside* a region**, for genuinely multi-column
@@ -637,6 +637,37 @@ designs. Record the reason for the chosen composition.
 - **Chrome is off the grid.** `Sidebar` and rails are fixed-width, outside the
   content grid.
 
+## Choosing a width
+
+Pick each route's `max` by what the person mainly does on it:
+
+| They mainly… | `max` | Why |
+|---|---|---|
+| read long text | `prose` on the text, inside `content` | line length sets readability: cap the text, not the page |
+| fill in a form | `form` | narrow fields are faster to scan and fill |
+| scroll one stream | `feed` | one column, one eye path |
+| review one record, or settings | `content` | labels stay close to their values |
+| scan and compare rows, cards or charts | `wide` | room for columns without stretching the gaps between them |
+| work across panes, a board, an editor or a map | omit it (fluid), or `full` | the extra width goes to the parts that use it |
+
+- **Go fluid only when a flexible part uses the space**: a table's main column,
+  a canvas, a board, a reading pane. If extra width only widens the gaps between
+  fixed columns (a date drifting away from its subject), cap it.
+- **In a fluid page, cap text by line length** (`--measure-prose`, or
+  `Center max="prose"`), not by page width.
+- **Sibling routes in one nav share a width**, so the header doesn't jump as
+  people move between them. A detail view may differ.
+- **`full` is the largest cap, not edge to edge.** It keeps the page inset;
+  `bleed` is edge to edge.
+- **A cap is a ceiling.** It applies only once the viewport minus app chrome is
+  wider than it: beside a 256px sidebar, `wide` (1280px) starts at about 1536px,
+  so at 1440px `wide`, `full` and fluid look the same. Judge widths at 1920px and
+  2560px, and record each route's width and reason in the brief.
+- **A product's widths belong in its theme.** A preset may set `page-inset` and
+  `region-*` (`form`, `feed`, `content`, `wide`, `full`) in `tokens.shared`
+  (a copy in `light` or `dark` wins over it); keep the role names and change
+  the values.
+
 ## Typography: pick the tier by ROLE, not by size
 
 | tier | for | not |
@@ -1319,7 +1350,10 @@ cannot establish animation timing, hidden behavior, or an unseen responsive stat
 Choose an original direction suitable for the user's future product. Map that
 direction onto the installed Sable token vocabulary. Preserve readable semantic
 roles and supported control behavior rather than recoloring every primitive
-independently. Load fonts through the consuming project's font setup.
+independently. Load fonts through the consuming project's font setup. Page widths
+are optional: set `page-inset` and the `region-*` caps (`form`, `feed`, `content`,
+`wide`, `full`) in `tokens.shared` only when the direction calls for a different
+page proportion, and keep each cap's role.
 
 ```bash
 pnpm exec sable preset --template
@@ -1910,6 +1944,10 @@ Save the surface brief, then capture the rendered route at a desktop width of at
 least 1024px and a mobile width of at most 480px. Record the actual viewport,
 route/state, supported color mode, and motion setting with each artifact. Inspect
 the whole route as well as its first viewport. Ensure fonts and media have loaded.
+Also capture a route that sets a width cap, or goes fluid, at 1920px: a cap applies
+only once the viewport minus app chrome exceeds it, so at 1024–1440px `wide`,
+`full` and fluid usually look the same and the width decision never shows. Add
+2560px for a fluid route.
 Use a recording or an observed interaction report for behavior that a still cannot
 show. Include reduced motion and every color mode the surface promises to support.
 
@@ -2299,6 +2337,25 @@ Use a unique preset ID so it cannot override a bundled theme or another record.
 Record any intentional adaptation and run the validation and rendered review in
 [building-with-sable.md](./building-with-sable.md).
 
+## Apply to an existing app
+
+A preset pasted into an agent for a running app (Canvas's “Copy for agent”) is a
+restyle: the job ends with the app built and rendered in the preset, not with a
+saved file. Replace, don't add beside:
+
+1. Save it to `.sable/presets/<id>.json`, overwriting an earlier revision of the
+   same ID, and run `sable preset --check`.
+2. Regenerate its CSS with `sable preset --css` and import it after Sable's
+   stylesheet. Remove the stylesheet of a theme it replaces when nothing else uses it.
+3. Load the families its `fonts` stacks name through the app's existing font
+   setup, and drop the old theme's font loading when no other code uses it.
+   An unloaded family falls back to a system face without any error.
+4. Point SableThemeProvider's `defaultThemeId` at the preset ID and
+   `defaultPreference` at its `defaultMode`, unless the user asked for another
+   mode. A bundled theme left as the default keeps the app on the old look.
+5. Run the app's build and type check, then `sable check`, and review the result
+   in both modes.
+
 ## Upgrade the package and skill
 
 ```bash
@@ -8601,7 +8658,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">
@@ -8672,11 +8729,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}>
@@ -8944,9 +9003,14 @@ Use Region as the page-width primitive that applies fluid page inset and an opti
 
 ### Best practices
 
-- Do: Choose the max value by content role, such as prose, form, feed, content, wide, or full.
+- Do: 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).
+- Do: 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.
+- Do: Give sibling routes in one nav the same width so the header does not jump between them.
+- Do: 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.
 - Do: Use Region near the route or section boundary so inner layout stays intentional.
 - Don't: Do not use Region as a global wrapper that forces every page into the same max width.
+- Don't: Do not go fluid when the extra width only widens the gaps between fixed columns; cap it.
+- Don't: Do not read full as edge to edge: it is the largest cap and keeps the page inset. Use bleed for edge to edge.
 
 ## Props
 
@@ -8954,7 +9018,7 @@ Use Region as the page-width primitive that applies fluid page inset and an opti
 | --- | --- | --- | --- |
 | as | ElementType | "div" | Semantic element to render (e.g. "main", "section", "nav"). |
 | inset | boolean | true | Apply the fluid horizontal page inset (--page-inset). |
-| max | "prose" \| "form" \| "feed" \| "content" \| "wide" \| "full" \| CSS length | — | Opt-in centered max-width cap, purpose-named: prose 65ch (long-form reading) · form 480px (auth, narrow single-column forms) · feed 640px (single-column timeline) · content 896px (settings/admin panes) · wide 1280px (dashboards, tables, card grids) · full 1536px (full-bleed ceiling). Omit for fully fluid. |
+| max | "prose" \| "form" \| "feed" \| "content" \| "wide" \| "full" \| CSS length | — | Opt-in centered max-width cap, purpose-named: prose 65ch (long-form reading) · form 480px (auth, narrow single-column forms) · feed 640px (single-column timeline) · content 896px (settings/admin panes) · wide 1280px (dashboards, tables, card grids) · full 1536px (the largest cap; keeps the inset, so not edge to edge — that is bleed). Omit for fluid: work views whose panes, board or canvas use the extra width. A cap is a ceiling: it applies only once the viewport minus app chrome exceeds it, so judge it at 1920px and up. |
 | bleed | boolean | false | Full-bleed: edge to edge with no inset. Overrides inset. |
 | safeArea | boolean \| ("top"\|"bottom"\|"left"\|"right")[] | false | env(safe-area-inset-*) padding for fixed or native-shell surfaces. true pads top+bottom; pass an edge array to target edges. |
 
@@ -8972,7 +9036,7 @@ import { PageHeader, Region } from "@sableui/react"
 <Region as="main" max="content"><PageHeader title="Settings" /></Region>
 ```
 
-### Fluid dashboard region
+### Dashboard region (capped at wide)
 
 ```tsx
 import { Card, CardHeader, CardTitle, Grid, Region } from "@sableui/react"
@@ -8980,6 +9044,14 @@ import { Card, CardHeader, CardTitle, Grid, Region } from "@sableui/react"
 <Region max="wide"><Grid minItemWidth="16rem"><Card><CardHeader><CardTitle>Revenue</CardTitle></CardHeader></Card><Card><CardHeader><CardTitle>Collects</CardTitle></CardHeader></Card></Grid></Region>
 ```
 
+### Fluid workspace: the queue's table takes the extra width
+
+```tsx
+import { Card, CardContent, Col, Columns, DataTable, Region, SideNav, SideNavItem } from "@sableui/react"
+
+<Region as="main"><Columns count={{ base: 1, lg: 12 }}><Col span={{ base: 1, lg: 3 }}><SideNav aria-label="Views"><SideNavItem label="Open" active /><SideNavItem label="Pending" /></SideNav></Col><Col span={{ base: 1, lg: 9 }}><Card><CardContent flush><DataTable columns={columns} data={tickets} /></CardContent></Card></Col></Columns></Region>
+```
+
 ---
 
 # Page
@@ -16510,7 +16582,7 @@ Use PieChart for a share of one total across two to six categories — traffic s
 | categories | Record<string, { label?: string; tone?: ChartTone; color?: string; icon?: string }> | — | Labels, tones and icons per slice, keyed by the slice's name. Unlisted slices take the tones in order. |
 | className | string | "h-64" | Sizes the chart. Set a height. |
 | donut | boolean \| number | false | Cut out the middle: `true` for a ring at 60% of the radius, or a ratio (0–0.9). |
-| centerLabel | { value: string; label?: string } | — | A value and caption in the hole of a donut. |
+| centerLabel | { value: string \| number; label?: string } | — | A value and caption in the hole of a donut. The value holds the centre and the caption hangs below it. A number is formatted for you: in full up to 9,999, compact from 10,000 (10.2K, 102.1K, 1.2M); pass a string for units. |
 | separator | boolean | true | A hairline in the surface colour between slices. |
 | labels | "none" \| "outside" \| "inside" | "none" | Label each slice outside the pie or inside it. |
 | labelContent | "value" \| "percent" \| "name" | "value" | What a slice label says. |
@@ -16564,7 +16636,7 @@ const sources = [
 	index="source"
 	valueKey="visitors"
 	donut
-	centerLabel={{ value: "752", label: "Visitors" }}
+	centerLabel={{ value: 752, label: "Visitors" }}
 />
 ```
 
@@ -16988,7 +17060,7 @@ Use RadialChart for progress toward goals (several rings), a single score or usa
 | stacked | boolean | false | Split ONE ring between the rows instead of a ring each. |
 | track | boolean | true | Draw each ring's full track behind it. |
 | labels | boolean | false | Name each ring at its start. |
-| centerLabel | { value: string; label?: string } | — | A value and caption in the middle. |
+| centerLabel | { value: string \| number; label?: string } | — | A value and caption in the middle. On a full ring the value holds the centre and the caption hangs below it. A number is formatted for you: in full up to 9,999, compact from 10,000 (10.2K); pass a string for units ("7.2 GB", "72%"). |
 | legend | boolean | true unless rings are labelled | Show the legend. |
 | tooltip | boolean \| { indicator?: "dot" \| "line" \| "dashed" \| "none"; hideLabel?: boolean; labelFormatter?: (label, datum) => ReactNode; showTotal?: boolean } | true | Show a tooltip on hover and keyboard focus, or configure it: the row marker, hiding the heading, rewriting it, adding a Total row. |
 | valueFormatter | (value: number) => string | — | Format values everywhere (axis, labels, tooltip, table) — units like "$12,480". Default: compact on the axis, full elsewhere. |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sableui/react",
-  "version": "0.7.0",
+  "version": "0.7.1",
   "description": "Sable: themeable React components, layout patterns, and tools for coding agents.",
   "type": "module",
   "sideEffects": [

package/registry.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://sable.design/registry.schema.json",
   "name": "@sableui/react",
-  "version": "0.7.0",
+  "version": "0.7.1",
   "description": "Themeable React components, semantic tokens, layout patterns, presets, and package-owned agent skills. Default theme: Sable.",
   "engine": {
     "behavior": "@base-ui/react",
@@ -1706,7 +1706,19 @@
           "bestPractices": [
             {
               "guidance": "do",
-              "description": "Choose the max value by content role, such as prose, form, feed, content, wide, or full."
+              "description": "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)."
+            },
+            {
+              "guidance": "do",
+              "description": "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."
+            },
+            {
+              "guidance": "do",
+              "description": "Give sibling routes in one nav the same width so the header does not jump between them."
+            },
+            {
+              "guidance": "do",
+              "description": "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."
             },
             {
               "guidance": "do",
@@ -1715,6 +1727,14 @@
             {
               "guidance": "dont",
               "description": "Do not use Region as a global wrapper that forces every page into the same max width."
+            },
+            {
+              "guidance": "dont",
+              "description": "Do not go fluid when the extra width only widens the gaps between fixed columns; cap it."
+            },
+            {
+              "guidance": "dont",
+              "description": "Do not read full as edge to edge: it is the largest cap and keeps the page inset. Use bleed for edge to edge."
             }
           ]
         },
@@ -1741,7 +1761,7 @@
           {
             "name": "max",
             "type": "\"prose\" | \"form\" | \"feed\" | \"content\" | \"wide\" | \"full\" | CSS length",
-            "description": "Opt-in centered max-width cap, purpose-named: prose 65ch (long-form reading) · form 480px (auth, narrow single-column forms) · feed 640px (single-column timeline) · content 896px (settings/admin panes) · wide 1280px (dashboards, tables, card grids) · full 1536px (full-bleed ceiling). Omit for fully fluid."
+            "description": "Opt-in centered max-width cap, purpose-named: prose 65ch (long-form reading) · form 480px (auth, narrow single-column forms) · feed 640px (single-column timeline) · content 896px (settings/admin panes) · wide 1280px (dashboards, tables, card grids) · full 1536px (the largest cap; keeps the inset, so not edge to edge — that is bleed). Omit for fluid: work views whose panes, board or canvas use the extra width. A cap is a ceiling: it applies only once the viewport minus app chrome exceeds it, so judge it at 1920px and up."
           },
           {
             "name": "bleed",
@@ -1764,9 +1784,14 @@
             "imports": "import { PageHeader, Region } from \"@sableui/react\""
           },
           {
-            "label": "Fluid dashboard region",
+            "label": "Dashboard region (capped at wide)",
             "code": "<Region max=\"wide\"><Grid minItemWidth=\"16rem\"><Card><CardHeader><CardTitle>Revenue</CardTitle></CardHeader></Card><Card><CardHeader><CardTitle>Collects</CardTitle></CardHeader></Card></Grid></Region>",
             "imports": "import { Card, CardHeader, CardTitle, Grid, Region } from \"@sableui/react\""
+          },
+          {
+            "label": "Fluid workspace: the queue's table takes the extra width",
+            "code": "<Region as=\"main\"><Columns count={{ base: 1, lg: 12 }}><Col span={{ base: 1, lg: 3 }}><SideNav aria-label=\"Views\"><SideNavItem label=\"Open\" active /><SideNavItem label=\"Pending\" /></SideNav></Col><Col span={{ base: 1, lg: 9 }}><Card><CardContent flush><DataTable columns={columns} data={tickets} /></CardContent></Card></Col></Columns></Region>",
+            "imports": "import { Card, CardContent, Col, Columns, DataTable, Region, SideNav, SideNavItem } from \"@sableui/react\""
           }
         ]
       },
@@ -13561,8 +13586,8 @@
         },
         {
           "name": "centerLabel",
-          "type": "{ value: string; label?: string }",
-          "description": "A value and caption in the hole of a donut."
+          "type": "{ value: string | number; label?: string }",
+          "description": "A value and caption in the hole of a donut. The value holds the centre and the caption hangs below it. A number is formatted for you: in full up to 9,999, compact from 10,000 (10.2K, 102.1K, 1.2M); pass a string for units."
         },
         {
           "name": "separator",
@@ -13675,7 +13700,7 @@
       "examples": [
         {
           "label": "Donut with a total",
-          "code": "const sources = [\n\t{ source: \"Search\", visitors: 275 },\n\t{ source: \"Direct\", visitors: 200 },\n\t{ source: \"Social\", visitors: 187 },\n\t{ source: \"Email\", visitors: 90 },\n]\n\n<PieChart\n\tlabel=\"Visitors by source\"\n\tdata={sources}\n\tindex=\"source\"\n\tvalueKey=\"visitors\"\n\tdonut\n\tcenterLabel={{ value: \"752\", label: \"Visitors\" }}\n/>",
+          "code": "const sources = [\n\t{ source: \"Search\", visitors: 275 },\n\t{ source: \"Direct\", visitors: 200 },\n\t{ source: \"Social\", visitors: 187 },\n\t{ source: \"Email\", visitors: 90 },\n]\n\n<PieChart\n\tlabel=\"Visitors by source\"\n\tdata={sources}\n\tindex=\"source\"\n\tvalueKey=\"visitors\"\n\tdonut\n\tcenterLabel={{ value: 752, label: \"Visitors\" }}\n/>",
           "imports": "import { PieChart } from \"@sableui/react\""
         },
         {
@@ -14439,8 +14464,8 @@
         },
         {
           "name": "centerLabel",
-          "type": "{ value: string; label?: string }",
-          "description": "A value and caption in the middle."
+          "type": "{ value: string | number; label?: string }",
+          "description": "A value and caption in the middle. On a full ring the value holds the centre and the caption hangs below it. A number is formatted for you: in full up to 9,999, compact from 10,000 (10.2K); pass a string for units (\"7.2 GB\", \"72%\")."
         },
         {
           "name": "legend",
@@ -21174,7 +21199,7 @@
           "Hovering or arrowing through the slices pulls each out and announces it."
         ],
         "imports": "import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, cn, PieChart } from \"@sableui/react\"",
-        "code": "const sources = [\n\t{ source: \"Search\", visitors: 4280 },\n\t{ source: \"Direct\", visitors: 2910 },\n\t{ source: \"Social\", visitors: 1840 },\n\t{ source: \"Email\", visitors: 960 },\n]\n\nconst total = sources.reduce((sum, s) => sum + s.visitors, 0)\n\nexport interface TrafficSourcesBlockProps {\n\tclassName?: string\n\t/** false drops the card's surface and border — for a muted section that already frames it. */\n\tframed?: boolean\n}\n\nexport function TrafficSourcesBlock({ className, framed = true }: TrafficSourcesBlockProps) {\n\treturn (\n\t\t<Card variant={framed ? \"default\" : \"flat\"} className={cn(\"w-full max-w-sm\", className)}>\n\t\t\t<CardHeader>\n\t\t\t\t<CardTitle render={<h2 />}>Traffic sources</CardTitle>\n\t\t\t\t<CardDescription>Where this month's visitors came from.</CardDescription>\n\t\t\t</CardHeader>\n\t\t\t<CardContent>\n\t\t\t\t<PieChart\n\t\t\t\t\tlabel=\"Visitors by source, this month\"\n\t\t\t\t\tdata={sources}\n\t\t\t\t\tindex=\"source\"\n\t\t\t\t\tvalueKey=\"visitors\"\n\t\t\t\t\tdonut\n\t\t\t\t\tcenterLabel={{ value: total.toLocaleString(\"en-US\"), label: \"Visitors\" }}\n\t\t\t\t/>\n\t\t\t</CardContent>\n\t\t\t<CardFooter className=\"text-body-sm text-muted-foreground\">\n\t\t\t\tSearch brings {Math.round((sources[0].visitors / total) * 100)}% of visitors.\n\t\t\t</CardFooter>\n\t\t</Card>\n\t)\n}"
+        "code": "const sources = [\n\t{ source: \"Search\", visitors: 4280 },\n\t{ source: \"Direct\", visitors: 2910 },\n\t{ source: \"Social\", visitors: 1840 },\n\t{ source: \"Email\", visitors: 960 },\n]\n\nconst total = sources.reduce((sum, s) => sum + s.visitors, 0)\n\nexport interface TrafficSourcesBlockProps {\n\tclassName?: string\n\t/** false drops the card's surface and border — for a muted section that already frames it. */\n\tframed?: boolean\n}\n\nexport function TrafficSourcesBlock({ className, framed = true }: TrafficSourcesBlockProps) {\n\treturn (\n\t\t<Card variant={framed ? \"default\" : \"flat\"} className={cn(\"w-full max-w-sm\", className)}>\n\t\t\t<CardHeader>\n\t\t\t\t<CardTitle render={<h2 />}>Traffic sources</CardTitle>\n\t\t\t\t<CardDescription>Where this month's visitors came from.</CardDescription>\n\t\t\t</CardHeader>\n\t\t\t<CardContent>\n\t\t\t\t<PieChart\n\t\t\t\t\tlabel=\"Visitors by source, this month\"\n\t\t\t\t\tdata={sources}\n\t\t\t\t\tindex=\"source\"\n\t\t\t\t\tvalueKey=\"visitors\"\n\t\t\t\t\tdonut\n\t\t\t\t\tcenterLabel={{ value: total, label: \"Visitors\" }}\n\t\t\t\t/>\n\t\t\t</CardContent>\n\t\t\t<CardFooter className=\"text-body-sm text-muted-foreground\">\n\t\t\t\tSearch brings {Math.round((sources[0].visitors / total) * 100)}% of visitors.\n\t\t\t</CardFooter>\n\t\t</Card>\n\t)\n}"
       },
       {
         "name": "TrafficTrendBlock",
@@ -21197,7 +21222,7 @@
           "The range control is a labelled ToggleGroup; the chart is one tab stop with arrow-key navigation."
         ],
         "imports": "import { useState } from \"react\"\nimport { AreaChart, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, cn, Icon, Toggle, ToggleGroup } from \"@sableui/react\"",
-        "code": "/** 90 days of visitors — replace with your own rows ({ date, desktop, mobile }). */\nconst days = Array.from({ length: 90 }, (_, i) => {\n\tconst wave = Math.sin(i / 6) * 60 + Math.sin(i / 2.3) * 25\n\treturn {\n\t\tdate: new Date(2026, 6, 1 + i).toISOString().slice(0, 10),\n\t\tdesktop: Math.round(240 + wave + (i % 7) * 9),\n\t\tmobile: Math.round(160 + wave * 0.7 + ((i * 3) % 11) * 6),\n\t}\n})\n\nconst series = [\n\t{ key: \"desktop\", label: \"Desktop\" },\n\t{ key: \"mobile\", label: \"Mobile\" },\n]\n\nconst ranges = [\n\t{ id: \"90d\", label: \"3 months\", days: 90 },\n\t{ id: \"30d\", label: \"30 days\", days: 30 },\n\t{ id: \"7d\", label: \"7 days\", days: 7 },\n]\n\nconst shortDate = (iso: string) => new Date(`${iso}T00:00:00`).toLocaleDateString(\"en-US\", { month: \"short\", day: \"numeric\" })\n\nexport interface TrafficTrendBlockProps {\n\tclassName?: string\n\t/** false drops the card's surface and border — for a muted section that already frames it. */\n\tframed?: boolean\n}\n\nexport function TrafficTrendBlock({ className, framed = true }: TrafficTrendBlockProps) {\n\tconst [range, setRange] = useState(\"90d\")\n\tconst shown = days.slice(-(ranges.find((r) => r.id === range)?.days ?? 90))\n\treturn (\n\t\t<Card variant={framed ? \"default\" : \"flat\"} className={cn(\"w-full max-w-3xl\", className)}>\n\t\t\t<CardHeader>\n\t\t\t\t<CardTitle render={<h2 />}>Visitors</CardTitle>\n\t\t\t\t<CardDescription>Desktop and mobile, by day.</CardDescription>\n\t\t\t\t<CardAction>\n\t\t\t\t\t<ToggleGroup value={[range]} onValueChange={(v: unknown[]) => v[0] && setRange(String(v[0]))} aria-label=\"Time range\">\n\t\t\t\t\t\t{ranges.map((r) => (\n\t\t\t\t\t\t\t<Toggle key={r.id} value={r.id}>\n\t\t\t\t\t\t\t\t{r.label}\n\t\t\t\t\t\t\t</Toggle>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</ToggleGroup>\n\t\t\t\t</CardAction>\n\t\t\t</CardHeader>\n\t\t\t<CardContent>\n\t\t\t\t<AreaChart\n\t\t\t\t\tlabel={`Visitors per day, last ${ranges.find((r) => r.id === range)?.label}`}\n\t\t\t\t\tdata={shown}\n\t\t\t\t\tindex=\"date\"\n\t\t\t\t\tseries={series}\n\t\t\t\t\tindexFormatter={shortDate}\n\t\t\t\t\ttooltip={{ labelFormatter: (d) => new Date(`${d}T00:00:00`).toLocaleDateString(\"en-US\", { weekday: \"short\", month: \"short\", day: \"numeric\" }) }}\n\t\t\t\t\tstacked\n\t\t\t\t\tgradient\n\t\t\t\t\tclassName=\"h-64\"\n\t\t\t\t/>\n\t\t\t</CardContent>\n\t\t\t<CardFooter className=\"gap-1.5 text-body-sm\">\n\t\t\t\t<Icon name=\"arrow-up\" className=\"text-success\" />\n\t\t\t\t<span>\n\t\t\t\t\tUp 5.2% on the previous period <span className=\"text-muted-foreground\">· desktop leads every week</span>\n\t\t\t\t</span>\n\t\t\t</CardFooter>\n\t\t</Card>\n\t)\n}"
+        "code": "/** 90 days of visitors — replace with your own rows ({ date, desktop, mobile }). */\nconst days = Array.from({ length: 90 }, (_, i) => {\n\tconst wave = Math.sin(i / 6) * 60 + Math.sin(i / 2.3) * 25\n\treturn {\n\t\tdate: new Date(2026, 6, 1 + i).toISOString().slice(0, 10),\n\t\tdesktop: Math.round(240 + wave + (i % 7) * 9),\n\t\tmobile: Math.round(160 + wave * 0.7 + ((i * 3) % 11) * 6),\n\t}\n})\n\nconst series = [\n\t{ key: \"desktop\", label: \"Desktop\" },\n\t{ key: \"mobile\", label: \"Mobile\" },\n]\n\nconst ranges = [\n\t{ id: \"90d\", label: \"3 months\", days: 90 },\n\t{ id: \"30d\", label: \"30 days\", days: 30 },\n\t{ id: \"7d\", label: \"7 days\", days: 7 },\n]\n\nconst shortDate = (iso: string) => new Date(`${iso}T00:00:00`).toLocaleDateString(\"en-US\", { month: \"short\", day: \"numeric\" })\n\nexport interface TrafficTrendBlockProps {\n\tclassName?: string\n\t/** false drops the card's surface and border — for a muted section that already frames it. */\n\tframed?: boolean\n}\n\nexport function TrafficTrendBlock({ className, framed = true }: TrafficTrendBlockProps) {\n\tconst [range, setRange] = useState(\"90d\")\n\tconst shown = days.slice(-(ranges.find((r) => r.id === range)?.days ?? 90))\n\treturn (\n\t\t<Card variant={framed ? \"default\" : \"flat\"} className={cn(\"@container/trend w-full max-w-3xl\", className)}>\n\t\t\t<CardHeader className=\"@max-sm/trend:has-data-[slot=card-action]:grid-cols-1\">\n\t\t\t\t<CardTitle render={<h2 />}>Visitors</CardTitle>\n\t\t\t\t<CardDescription>Desktop and mobile, by day.</CardDescription>\n\t\t\t\t{/* Beside the title on a wide card; under it on a narrow one, where three\n\t\t\t\t    ranges would squeeze the title and description into a sliver. */}\n\t\t\t\t<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\">\n\t\t\t\t\t<ToggleGroup value={[range]} onValueChange={(v: unknown[]) => v[0] && setRange(String(v[0]))} aria-label=\"Time range\">\n\t\t\t\t\t\t{ranges.map((r) => (\n\t\t\t\t\t\t\t<Toggle key={r.id} value={r.id}>\n\t\t\t\t\t\t\t\t{r.label}\n\t\t\t\t\t\t\t</Toggle>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</ToggleGroup>\n\t\t\t\t</CardAction>\n\t\t\t</CardHeader>\n\t\t\t<CardContent>\n\t\t\t\t<AreaChart\n\t\t\t\t\tlabel={`Visitors per day, last ${ranges.find((r) => r.id === range)?.label}`}\n\t\t\t\t\tdata={shown}\n\t\t\t\t\tindex=\"date\"\n\t\t\t\t\tseries={series}\n\t\t\t\t\tindexFormatter={shortDate}\n\t\t\t\t\ttooltip={{ labelFormatter: (d) => new Date(`${d}T00:00:00`).toLocaleDateString(\"en-US\", { weekday: \"short\", month: \"short\", day: \"numeric\" }) }}\n\t\t\t\t\tstacked\n\t\t\t\t\tgradient\n\t\t\t\t\tclassName=\"h-64\"\n\t\t\t\t/>\n\t\t\t</CardContent>\n\t\t\t<CardFooter className=\"gap-1.5 text-body-sm\">\n\t\t\t\t<Icon name=\"arrow-up\" className=\"text-success\" />\n\t\t\t\t<span>\n\t\t\t\t\tUp 5.2% on the previous period <span className=\"text-muted-foreground\">· desktop leads every week</span>\n\t\t\t\t</span>\n\t\t\t</CardFooter>\n\t\t</Card>\n\t)\n}"
       },
       {
         "name": "UploadListBlock",

package/scripts/design-presets.mjs

@@ -55,7 +55,7 @@ try {
 			const target = match[1].includes(".dark") ? groups.dark : groups.light
 			for (const declaration of match[2].matchAll(/--([\w-]+)\s*:\s*([^;]+);/g)) target[declaration[1]] = declaration[2].trim()
 		}
-		const { PRESET_TOKEN_NAMES } = await import("../dist/presets/index.js")
+		const { PAGE_WIDTH_TOKENS, PRESET_TOKEN_NAMES } = await import("../dist/presets/index.js")
 		function tokens(mode) {
 			const values = { ...groups.light, ...(mode === "dark" ? groups.dark : {}) }
 			function resolveValue(value, chain = []) {
@@ -65,7 +65,9 @@ try {
 					return resolveValue(values[name], [...chain, name])
 				})
 			}
-			return Object.fromEntries(PRESET_TOKEN_NAMES.filter(name => values[name]).map(name => [name, resolveValue(values[name])]))
+			// Page widths are opt-in: copying the defaults would override any widths
+			// an app already sets in its own CSS, since preset CSS loads after it.
+			return Object.fromEntries(PRESET_TOKEN_NAMES.filter(name => values[name] && !PAGE_WIDTH_TOKENS.includes(name)).map(name => [name, resolveValue(values[name])]))
 		}
 		const preset = parsePreset({ schemaVersion: 1, id: "my-preset", label: "My preset", revision: 1, sableVersion: manifest.version, defaultMode: "dark", fonts: { sans: groups.light["font-sans"], mono: groups.light["font-mono"] }, direction: "Content-first composition with a clear primary action. Replace this guidance with the direction for your product.", tokens: { shared: {}, light: tokens("light"), dark: tokens("dark") } })
 		emit("preset.template", preset, JSON.stringify(preset, null, 2))
@@ -95,10 +97,19 @@ try {
 			}
 			const accepted = labels.accepted.map(f => `\n  accepted: ${pair(f)} — ${f.reason}`).join("")
 			const unmeasured = labels.unmeasured.length ? `, ${labels.unmeasured.length} unmeasured (${labels.unmeasured.join(", ")})` : ""
+			// A passing check is the start of applying a preset, not the end: say what
+			// makes the app use it, so a check does not read as "done".
+			const fonts = [...new Set(Object.values(preset.fonts).filter(Boolean).map(stack => stack.split(",")[0].trim().replace(/^["']|["']$/g, "")))]
+			const next = [
+				`sable preset --css ${file} > <stylesheet>, imported after Sable's`,
+				`load fonts: ${fonts.join(", ")}`,
+				`SableThemeProvider defaultThemeId="${preset.id}" defaultPreference="${preset.defaultMode}" with the preset in customThemes`,
+				"build the app, run sable check, review both modes (sable docs using-presets)",
+			]
 			emit(
 				"preset.check",
-				{ valid: true, id: preset.id, revision: preset.revision, authoredWith: preset.sableVersion, installed, warnings, labelContrast: { measured: labels.measured, accepted: labels.accepted, unmeasured: labels.unmeasured } },
-				`Valid preset ${preset.id}, revision ${preset.revision}. Labels on filled roles: ${labels.measured} pairs measured${unmeasured}.${accepted}${warningText}\nReview rendered contrast and brief fit separately.`,
+				{ valid: true, id: preset.id, revision: preset.revision, authoredWith: preset.sableVersion, installed, warnings, labelContrast: { measured: labels.measured, accepted: labels.accepted, unmeasured: labels.unmeasured }, fonts, next },
+				`Valid preset ${preset.id}, revision ${preset.revision}. Labels on filled roles: ${labels.measured} pairs measured${unmeasured}.${accepted}${warningText}\nReview rendered contrast and brief fit separately.\nTo apply it to an app:\n${next.map(step => `  - ${step}`).join("\n")}`,
 			)
 		} else {
 			const css = presetCss(preset)

package/skills/sable/SKILL.md

@@ -157,12 +157,21 @@ The installed catalog and guides are authoritative for API and token names.
 ## Develop or use a preset
 
 Save a short brief in the project's existing design location: audience, primary
-task, content, constraints, selected identity, and meaningful states. Label invented
-sample content. A supplied preset is an explicit input: read its exact record and
+task, content, constraints, selected identity, and meaningful states, plus each
+route's width (a Region `max`, or fluid) and why, chosen by what the person does
+there (`sable docs building-a-page`). Label invented sample content. A supplied preset is an explicit input: read its exact record and
 revision, validate it through `sable preset --check <path> --json`, and read
 `sable docs using-presets`. Preserve its tokens and guidance unless the user requests
 a change or the new task requires a documented adaptation.
 
+A preset pasted or supplied for a project that already has an app (for example
+from Canvas's “Copy for agent”) is a request to restyle that app, so it is
+`polish`: save and check it, then apply it. Generate its CSS, load its fonts,
+make it SableThemeProvider's default theme and mode in place of the old one, run
+the build and the finish checklist, and look at it rendered. Don't stop at a saved
+file plus a list of wiring steps for the user. Stop after saving only when the
+user says so or the project has no app yet.
+
 Without a preset, develop an appropriate direction from the brief. Use the bundled
 presets as starting points or create original app-owned tokens. When the project has
 its own visual atlas, retrieve references with `sable atlas --search "<problem>"