@sableui/react 0.18.0 → 0.19.0

package/CHANGELOG.md

@@ -1,5 +1,134 @@
 # What's new
 
+## 0.19.0
+
+A compact work tracker, built on Sable by an agent, rebuilt about thirty parts
+Sable already ships. Every gap behind those rebuilds is fixed here: a lookup
+that couldn't find parts, checks that couldn't see the app's own CSS, and
+components that had no variant for a dense layout.
+
+- **`--type-base` rebuilds the type scale at another base size.** Set
+  `--type-base: 14` (a unitless px number; the default is 16) on `:root`, a
+  `[data-sable-theme]` scope or in a preset's `tokens.shared`, and every page
+  tier scales by `base / 16`, including each theme's own tier values and any
+  per-tier override. Spacing follows, because the baseline step is derived from
+  body size. The workspace `ui-*` tiers stay absolute px, and compact still only
+  ever shrinks text. Don't change the root font-size to get a denser UI: it
+  scales every rem in the app, not just the type.
+- **New `text-ui-title`** (14px / 600 / 20px leading, tokens
+  `--type-ui-title-*`). Inside a compact scope `text-title-lg` maps to it. It
+  used to collapse to 12px, the same size as the description under it.
+- **A comfortable scope inside a compact one gets page type back.**
+  `<Density value="comfortable">` around a reading view (an overview, notes,
+  docs) in a Workspace used to reset the control sizes but not the text, which
+  stayed at 11px.
+- **Tables follow density.** TableHead's height, TableCell's padding and the
+  table's text tier read density tokens. In a compact Workspace that is a 28px
+  head, 32px rows and `text-ui-body`, with no consumer CSS.
+- **Compact on a touch screen uses the comfortable control ladder.** Under
+  `pointer: coarse` the 24/28/32 ladder, measured from mouse-driven editors,
+  becomes 28/32/40.
+- **Workspace's body is its only stretching row.** The grid always assumed a
+  toolbar, so a Workspace without one put the body in the auto track and
+  clipped the status bar. The root is now a flex column, which holds for every
+  combination of slots. Migration: drop any `grid-template-rows` override on
+  the Workspace root.
+- **Workspace and Panel on small screens.** Workspace takes `bottomNav`, a row
+  shown below `lg`. Panel takes `narrow="sheet" | "hidden"` with `open`,
+  `onOpenChange`, `side` and `below`: below the breakpoint an inspector becomes
+  a Sheet and its content renders once. A Sidebar moved into that sheet fills
+  it. New `useMediaQuery` and
+  `useBelowBreakpoint` hooks are exported. A WorkspaceBar can also sit at the
+  top of one column, so the inspector runs the full height beside it, as in
+  Linear.
+- **DataTable groups rows.** `groupBy`, `groups` (each with an icon, an action
+  and `defaultExpanded`), `collapsible` and controlled `expandedGroups` give
+  one table with one header and a header row per group that carries a toggle,
+  a count and an add action. Sorting applies within each group, and select-all
+  acts on the visible rows.
+- **The Sidebar rail is one grid, at either density.** New `SidebarGroup`
+  labels a run of items, so a rail no longer has to borrow SideNav for its
+  groups. New `SidebarAccount` is the account row: the avatar in the icon slot,
+  the label and one detail line on the label column, and an up-down chevron.
+  Make it the account Menu's trigger and put Settings, appearance and sign-out
+  in the menu. Inside a compact scope such as a Workspace, the whole rail takes
+  32px rows and 20px icons, and the header matches the chrome bar's height.
+  Before this, a tool's footer mixed a ghost Button, an Entity patched with
+  `[--entity-py:0]` and a Badge, and the rail's icons and labels landed on four
+  columns. DashboardPage uses the new parts.
+- **Underline tabs in a WorkspaceBar sit on the bar's hairline.** They used to
+  draw a second, shorter rule that stopped after the last tab, with the mark
+  floating above the bar's edge. Tabs guidance now steers a view switch in tool
+  chrome to `variant="pill"`.
+- **`MenuSubmenuTrigger` takes `icon`**, as MenuItem does, so a submenu row
+  lines up with the icon rows around it.
+- New icon `chevron-up-down` (Lucide's `chevrons-up-down` resolves to it).
+- **Avatar:** `2xs` (20px) and `xs` (24px), `shape="square"` for a workspace,
+  project or org mark, and a palette `tone` for the initials fallback.
+- **DatePicker:** `size="xs"` for a property row, and `formatOptions`
+  (`Intl.DateTimeFormatOptions`) for the trigger text.
+- **CollapsibleIndicator needs no setup.** It no longer needs the
+  `group/collapsible` class on its trigger. New `direction="end"` gives a side
+  caret that turns down on open, mirrored in RTL.
+- **Icons:** new `users`, `archive`, `kanban`, `sliders`, `help` and `sidebar`.
+  About 90 Lucide and Heroicons names now resolve to Sable's (`settings` →
+  `gear`, `menu` → `bars`, `check-circle` → `circle-check`). A development
+  build warns once for a name the set can't draw, and names the nearest ones.
+- **A toast clears an open side sheet on a phone.** It used to move to the
+  top, over the sheet's close button. It now sits below the sheet's header
+  inset, tunable with `--sable-sheet-top-inset`.
+- **Workspace surfaces derive in oklab.** The canvas, panel, field, hairline
+  and shell-ground mixes used `color-mix(in oklch, …)`. On hex colours Chrome
+  resolves that to a colour with no hue, painted as 0°: a brown cast on a cool
+  graphite preset's canvas. Bundled themes write oklch and never showed it, but
+  presets and apps write hex. The heatmap's empty cell moves to oklab too.
+- **`--nav-height` is defined** (56px). AppShell's bottom padding read it with
+  no fallback, so the padding was dropped.
+- **Agent tooling finds parts.** `sable component PropertyRow` (or `Panel`,
+  `WorkspaceBar`, `CollapsibleTrigger`) answers with the parent component;
+  it used to be ERR_UNKNOWN_COMPONENT. Search indexes parts, and an exact name
+  ranks first. New `sable icon [name]` lists the drawable names and resolves
+  aliases.
+- **`sable check` sees rebuilt parts.** A new "Rebuilt parts" block reads class
+  names in the app's markup and the app's own CSS. It flags a breadcrumb, top
+  bar, property row, status dot or avatar stack built by hand; fixed bar and row
+  heights; selectors reaching into Sable's components; and a chevron rotated on
+  `aria-expanded`. Icon names passed through an app's own wrapper are checked
+  too. These are notes, and the skill asks the agent to answer each one.
+- **`sable check` warns on one-mode colour.** Colour tokens set for light with
+  no dark value now produce a warning, and an app with no ThemeSwitcher gets a
+  note. The skill now ships both modes, as a preset with a ThemeSwitcher under
+  SableThemeProvider, unless the brief rules one out.
+- **New pattern: `TrackerPage`.** A records workspace in the tool register,
+  the reference shape for an issue tracker, a support queue or a pipeline. It
+  has a Sidebar rail of grouped views ending in an account menu (with
+  appearance), Breadcrumbs and pill Tabs in WorkspaceBars, a filter row, one
+  grouped DataTable, a docked inspector of PanelSection property rows with a
+  pinned comment form, and a comfortable reading tab. Below lg the rail and the
+  inspector become sheets and BottomNav takes the last row. `sable pattern
+  TrackerPage --skeleton` has the tree. Pattern metadata takes `keywords` now,
+  so "issue tracker", "like Linear" or "support queue" lands on the shell first.
+- **Guidance for a records workspace.** `building-a-tool` now covers the
+  shape of an issue tracker, a support queue or a pipeline: the shell, the
+  decisions that keep it one system (one rail grid, the account as a row and a
+  menu, one grouped table, an inspector that renders once, page-sized reading
+  tabs, pill tabs in chrome, both modes, `type-base` for "compact") and a
+  "you want / use / not" table built from what a real build rebuilt. The skill
+  routes a tool, tracker or "like Linear" brief there; `building-a-page` points
+  trackers to it; `creating-a-preset` explains `type-base`.
+- **`sable check` notes compositions another part does better:** SideNav
+  inside a Sidebar, an Entity or Badge in the rail's footer, a DataTable per
+  group inside Collapsibles, underline tabs in a WorkspaceBar, and a native
+  date input. Notes, never failures. On the build that prompted this release
+  they flag four drifts, each at its line.
+- **The skill searches before it builds.** It looks up a part by its plain name
+  and role before writing any class or component for it. A style or layout
+  disagreement means using the variant or prop, or reporting the missing
+  variant, never rebuilding the part.
+- Migration: run `sable sources --write` after upgrading. Panel now imports
+  Sheet, so the generated sources file is stale until it is rewritten, and
+  doctor says so.
+
 ## 0.18.0
 
 A year at a glance: the contribution graph, built so a phone, a keyboard and a

package/bin/sable.mjs

@@ -223,6 +223,13 @@ const COMMANDS = [
 		],
 		returns: ["provider.list", "provider.detail", "provider.props", "provider.examples"],
 	},
+	{
+		name: "icon",
+		summary: "The icon names <Icon name> renders with the bundled set. Check a name before using it: an unknown one renders nothing.",
+		arg: { name: "name", required: false },
+		flags: [],
+		returns: ["icon.list", "icon.detail"],
+	},
 	{
 		name: "token",
 		summary: "The token contract, with intent — what each token means and what it is NOT.",
@@ -388,6 +395,7 @@ const ERROR_CODES = [
 	{ code: "ERR_UNKNOWN_UTILITY", when: "No utility or variant by that name. `suggestions` carries near matches." },
 	{ code: "ERR_UNKNOWN_DOC", when: "No package guide or doc mirror by that slug. `suggestions` carries near matches and the package guides." },
 	{ code: "ERR_UNKNOWN_PROVIDER", when: "No provider by that name. `suggestions` carries near matches." },
+	{ code: "ERR_UNKNOWN_ICON", when: "No icon by that name in the contract. `suggestions` carries the names to use instead." },
 	{ code: "ERR_UNKNOWN_EXAMPLE", when: "The component has no example with that label. `suggestions` carries near matches as commands." },
 	{ code: "ERR_LINT_INPUT", when: "sable lint --json: a path to lint does not exist." },
 	{ code: "ERR_CHECK_FAILED", when: "sable check: doctor, lint, or grade failed. `data.checks` names which." },
@@ -571,14 +579,32 @@ const importLine = (name) => `import { ${name} } from "@sableui/react"`
 const PROVIDERS = R.providers?.items ?? []
 const findProvider = (name) => PROVIDERS.find((p) => p.name.toLowerCase() === String(name).toLowerCase())
 
+/**
+ * Exported parts by name → the entry that documents them. `PropertyRow`,
+ * `WorkspaceBar`, `CollapsibleIndicator` and `Panel` are real exports with no
+ * entry of their own, and `sable component PropertyRow` used to answer
+ * ERR_UNKNOWN_COMPONENT — so an agent that knew the right name concluded the
+ * part did not exist and built its own. A part shared by two entries (a
+ * MenuRadioGroup under Menu and SettingsMenu) resolves to the first.
+ */
+const PARTS = new Map()
+for (const c of COMPONENTS)
+	for (const s of c.subcomponents ?? []) {
+		const sub = typeof s === "string" ? { name: s.split(/\s+[—-]\s+/)[0].trim(), description: s } : s
+		if (sub.name && !PARTS.has(sub.name.toLowerCase())) PARTS.set(sub.name.toLowerCase(), { parent: c, part: sub })
+	}
+const findPart = (name) => PARTS.get(String(name).toLowerCase())
+
 function findComponent(name) {
 	const hit = COMPONENTS.find((c) => c.name.toLowerCase() === name.toLowerCase())
 	if (hit) return hit
+	const part = findPart(name)
+	if (part) return { ...part.parent, partOf: part.parent.name, part: part.part }
 	fail(
 		"ERR_UNKNOWN_COMPONENT",
 		`No component named "${name}".`,
 		[
-			...nearest(name, [...COMPONENTS, ...PROVIDERS].map((c) => c.name)).map((n) => `Did you mean ${n}?`),
+			...nearest(name, [...COMPONENTS, ...PROVIDERS].map((c) => c.name).concat([...PARTS.values()].map((p) => p.part.name))).map((n) => `Did you mean ${n}?`),
 			`sable search "${name}" — searches summaries and keywords too`,
 			"sable component --list",
 		],
@@ -649,14 +675,23 @@ function cmdSearch() {
 
 	const pool = []
 	if (!type || type === "component")
-		for (const c of COMPONENTS)
+		for (const c of COMPONENTS) {
 			pool.push({ kind: "component", name: c.name, summary: c.summary, status: c.status, group: c.group, ...(c.composition ? { reference: true, parts: c.composition } : {}), _s: score({ name: c.name, keywords: c.keywords, text: `${c.summary} ${c.usage?.description ?? ""}` }) })
+			// Parts are found by their own name and description: `WorkspaceBar` and
+			// `PropertyRow` are what a need is called, and they used to match nothing
+			// (or rank ColorField first, for a word in its prose). A part's hit names
+			// its entry, which is where its contract lives.
+			for (const s of c.subcomponents ?? []) {
+				if (typeof s !== "object" || !s.name || PARTS.get(s.name.toLowerCase())?.parent !== c) continue
+				pool.push({ kind: "component", name: s.name, partOf: c.name, summary: `${s.description ?? ""} Part of ${c.name}.`.trim(), status: c.status, group: c.group, _s: score({ name: s.name, text: s.description ?? "" }) })
+			}
+		}
 	if (!type || type === "provider")
 		for (const p of PROVIDERS)
 			pool.push({ kind: "provider", name: p.name, summary: p.summary, _s: score({ name: p.name, keywords: ["provider", ...(p.companions ?? [])], text: `${p.summary} ${p.placement ?? ""}` }) })
 	if (!type || type === "pattern")
 		for (const p of PATTERNS)
-			pool.push({ kind: "pattern", name: p.name, summary: p.summary, _s: score({ name: p.name, text: `${p.summary} ${p.intent ?? ""}` }) })
+			pool.push({ kind: "pattern", name: p.name, summary: p.summary, _s: score({ name: p.name, keywords: p.keywords, text: `${p.summary} ${p.intent ?? ""}` }) })
 	if (!type || type === "block")
 		for (const b of BLOCKS)
 			pool.push({ kind: "block", name: b.name, summary: b.summary, family: b.family, _s: score({ name: b.name, keywords: [b.family.toLowerCase()], text: `${b.summary} ${b.intent ?? ""}` }) })
@@ -716,7 +751,9 @@ function cmdSearch() {
 		retrieve:
 			h.kind === "example"
 				? `sable component ${h.component} --example "${h.label.replace(/"/g, '\\"')}"`
-				: `sable ${h.kind === "doc" ? "docs" : h.kind} ${h.name}`,
+				: h.partOf
+					? `sable component ${h.partOf} --props`
+					: `sable ${h.kind === "doc" ? "docs" : h.kind} ${h.name}`,
 	}))
 	const anyReference = results.some((h) => h.reference)
 	ok("search", { query, count: results.length, results }, () =>
@@ -724,7 +761,7 @@ function cmdSearch() {
 			...results.map((h) =>
 				DENSE
 					? `${h.kind}/${h.name}${h.reference ? " (reference)" : ""}`
-					: `${h.kind.padEnd(9)} ${`${h.name}${h.reference ? " ◇" : ""}`.padEnd(24)} ${firstSentence(h.summary ?? "")}`,
+					: `${h.kind.padEnd(9)} ${`${h.name}${h.reference ? " ◇" : ""}`.padEnd(24)} ${h.partOf ? `(part of ${h.partOf}) ` : ""}${firstSentence(h.summary ?? "")}`,
 			),
 			...(anyReference && !DENSE
 				? ["", "◇ a reference layout: use it when it fits the brief, or compose your own from Sable's parts. Either is fine. Behaviour components (controls, overlays, fields) are always used, never rebuilt."]
@@ -801,6 +838,36 @@ function firstSentence(s) {
 	return text
 }
 
+/* ── icon ───────────────────────────────────────────────────────────────────── */
+
+/**
+ * The names `<Icon name>` draws, and the other sets' names it accepts for them
+ * (registry → iconContract, generated from src/icon/names.ts). A work tracker
+ * asked for nine names that did not exist, got blank space, and wrote its own
+ * alias map, because nothing listed the names that do.
+ */
+function cmdIcon() {
+	const names = R.iconContract?.names ?? []
+	const aliases = R.iconContract?.aliases ?? {}
+	const set = new Set(names)
+	const name = rest[0]
+	if (!name)
+		return ok("icon.list", { count: names.length, names, aliases, note: R.iconContract?.note }, () =>
+			[`${names.length} icon names (the bundled Reicon set). An app adds more with composeIconSets and lists them in .sable/icons.json.`, "", names.join("  ")].join("\n"),
+		)
+	if (set.has(name)) return ok("icon.detail", { name, known: true, usage: `<Icon name="${name}" />` }, () => `${name} — in the contract.\n<Icon name="${name}" />`)
+	if (aliases[name])
+		return ok("icon.detail", { name, known: false, alias: aliases[name], usage: `<Icon name="${aliases[name]}" />` }, () =>
+			`${name} is another set's name for ${aliases[name]}: <Icon> draws it, but write the contract name.\n<Icon name="${aliases[name]}" />`,
+		)
+	const use = nearest(name, names)
+	fail("ERR_UNKNOWN_ICON", `No icon named "${name}"; <Icon name="${name}"> renders nothing.`, [
+		...use.map((n) => `Use "${n}"`),
+		"Or add the glyph to the app's set with composeIconSets and list it in .sable/icons.json",
+		"sable icon — every name",
+	])
+}
+
 /* ── component ──────────────────────────────────────────────────────────────── */
 
 function cmdComponent() {
@@ -833,12 +900,16 @@ function cmdComponent() {
 	// A provider is asked for the way a component is. Answer with its entry rather
 	// than ERR_UNKNOWN_COMPONENT, which is what `sable component SableThemeProvider`
 	// used to say.
-	if (!COMPONENTS.some((c) => c.name.toLowerCase() === rest[0].toLowerCase()) && findProvider(rest[0])) return cmdProvider()
+	if (!COMPONENTS.some((c) => c.name.toLowerCase() === rest[0].toLowerCase()) && !findPart(rest[0]) && findProvider(rest[0])) return cmdProvider()
 	const c = findComponent(rest[0])
+	// Asked for a part: answer with its entry, and say so first, so the agent
+	// knows the part exists, what to import, and where the rest of it is documented.
+	const part = c.partOf ? { name: c.part.name, partOf: c.partOf, import: `import { ${c.partOf}, ${c.part.name} } from "@sableui/react"`, ...(c.part.type ? { type: c.part.type } : {}), description: c.part.description ?? "" } : null
+	const partLine = part ? `${part.name} is part of ${part.partOf}.${part.description ? ` ${part.description}` : ""}\n${part.import}\n` : ""
 
 	if (flags.has("props"))
-		return ok("component.props", { name: c.name, props: c.props ?? [], subcomponents: c.subcomponents ?? [] }, () =>
-			renderProps(c),
+		return ok("component.props", { name: c.name, ...(part ? { part } : {}), props: c.props ?? [], subcomponents: c.subcomponents ?? [] }, () =>
+			`${partLine}${part ? "\n" : ""}${renderProps(c)}`,
 		)
 	if (flags.has("examples"))
 		return ok("component.examples", { name: c.name, examples: c.examples ?? [] }, () => renderExamples(c))
@@ -869,6 +940,7 @@ function cmdComponent() {
 		import: importLine(c.name),
 		summary: c.summary,
 		...(c.composition ? { composition: c.composition } : {}),
+		...(part ? { part } : {}),
 	}
 	if (level !== "brief") {
 		data.props = c.props ?? []
@@ -886,6 +958,7 @@ function cmdComponent() {
 
 	ok("component.detail", data, () =>
 		[
+			partLine,
 			`${c.name}  [${c.status}]  ${c.group}  register:${c.register}`,
 			c.summary,
 			c.composition
@@ -1834,7 +1907,7 @@ const MANUAL_REVIEW = [
 	{ step: "Walk the journey", how: "sable docs reviewing-a-journey — operate the primary task and its recovery path end to end; loading, empty, error and success states; keyboard and touch." },
 	{ step: "Review the motion", how: "sable docs reviewing-motion — observe playback and interruption for anything that moves." },
 	{ step: "Check reduced motion", how: "Turn on prefers-reduced-motion (or MotionProvider \"reduced\"): state still changes, nothing essential depends on animation, nothing keeps moving." },
-	{ step: "Write the reuse inventory", how: "List the Sable components, parts, utilities and token groups used, and every app-owned UI or CSS addition with the catalog search that justified it. Start from the app-owned surfaces sable check lists (sable grade --json → inventory) and note, for each, whether you used the Sable part named beside it or kept your own. Either is fine for layout and look. Behaviour (controls, overlays, keyboard handling) comes from Sable." },
+	{ step: "Write the reuse inventory", how: "List the Sable components, parts, utilities and token groups used, and every app-owned UI or CSS addition with the catalog search that justified it. Start from the app-owned surfaces and rebuilt parts sable check lists (sable grade --json → inventory, rebuiltParts) and note, for each, whether you used the Sable part named beside it or kept your own, and why. Either is fine for layout and look. Behaviour (controls, overlays, keyboard handling) comes from Sable." },
 	{ step: "Record what you learned", how: "sable docs learning-from-builds — keep conditional lessons with evidence (sable learn --record); never record human approval you did not get." },
 ]
 
@@ -1904,7 +1977,7 @@ function cmdCheck() {
 		const LABELS = { hallucinatedComponent: "hallucinated components", hallucinatedProp: "hallucinated props", radixIdiom: "Radix idioms", hardcodedControl: "hardcoded control heights", offContractIcon: "off-contract icons" }
 		const found = Object.entries(LABELS).filter(([k]) => grade.counts[k])
 		const reviewMissing = review.length > 0 && grade.review?.status !== "review-recorded"
-		const details = found.flatMap(([k]) => grade.findings[k].map((f) => `${LABELS[k]} — ${f.file}:${f.line} → ${f.name ?? f.prop ?? f.what ?? f.match}${f.component ? ` on ${f.component}` : ""}${f.from ? ` from ${f.from}${f.reason ? ` (${f.reason})` : ""}` : ""}`))
+		const details = found.flatMap(([k]) => grade.findings[k].map((f) => `${LABELS[k]} — ${f.file}:${f.line} → ${f.name ?? f.prop ?? f.what ?? f.match}${f.component ? ` on ${f.component}` : ""}${f.from ? ` from ${f.from}${f.reason ? ` (${f.reason})` : ""}` : ""}${f.via ? ` via ${f.via}` : ""}${f.suggest?.length ? `; the set has ${f.suggest.join(", ")} (sable icon)` : ""}`))
 		if (reviewMissing) details.push(`review: ${grade.review?.status ?? "missing"}${grade.review?.problems?.length ? ` — ${grade.review.problems.join("; ")}` : ""}`)
 		checks.push({
 			name: "grade",
@@ -1917,7 +1990,13 @@ function cmdCheck() {
 				.filter(Boolean)
 				.join("; "),
 			details,
-			data: { score: grade.score, contract: grade.contract, counts: grade.counts, review: grade.review, findings: grade.findings },
+			// A half-themed palette passes the contract and breaks the moment
+			// someone switches modes, so it is said on the grade line, as a warning.
+			notes: [
+				...(grade.modes?.status === "warn" ? [`warn — colour modes: ${grade.modes.lightOnly.length} colour token(s) set for light with no dark value (${grade.modes.lightOnly.slice(0, 4).map((t) => `--${t.name}`).join(", ")}${grade.modes.lightOnly.length > 4 ? ", …" : ""}) → ${grade.modes.fix}`] : []),
+				...(grade.modes && !grade.modes.modeControl ? ["colour modes: nothing imports ThemeSwitcher, ThemeSelector or useSableTheme, so no one can switch modes to review both → mount ThemeSwitcher under SableThemeProvider, or pin the one mode the brief asks for"] : []),
+			],
+			data: { score: grade.score, contract: grade.contract, counts: grade.counts, review: grade.review, findings: grade.findings, modes: grade.modes },
 		})
 	}
 	/* App-owned surfaces, from grade. Never a failure: the input to the reuse
@@ -1926,6 +2005,9 @@ function cmdCheck() {
 	/* Adoption, from grade. Never a failure either: wiring can hold while the app
 	 * composes almost none of Sable, and the move onto it is the user's call. */
 	const adoption = grade && grade.type !== "error" ? (grade.adoption ?? null) : null
+	/* Rebuilt parts, from grade: elements and app CSS standing in for a part
+	 * Sable ships, or reaching into one. Notes, answered in the reuse inventory. */
+	const rebuilt = grade && grade.type !== "error" ? (grade.rebuiltParts ?? null) : null
 	const lowAdoption = adoption && (adoption.level === "none" || adoption.level === "low")
 
 	const failed = checks.filter((c) => c.status !== "pass").map((c) => c.name)
@@ -1936,7 +2018,7 @@ function cmdCheck() {
 		...MANUAL_REVIEW,
 		...(doctor.checks.some((c) => c.name === "css:size") ? [{ step: "Ship only the CSS you use", how: "sable sources --write src/sable-sources.css, then @import it in place of the whole-package @source (about 32 KB of CSS gzipped down to what the app imports). Re-run it whenever you import something new from Sable; sable check fails while it is stale." }] : []),
 	]
-	const data = { paths, passed: !failed.length, failed, checks, inventory, adoption, manualReview: manual }
+	const data = { paths, passed: !failed.length, failed, checks, inventory, adoption, rebuiltParts: rebuilt, manualReview: manual }
 	const MARK = { pass: "✓", fail: "✗", error: "✗" }
 	const MAX_DETAILS = 12
 	const summaryText = () =>
@@ -1946,7 +2028,7 @@ function cmdCheck() {
 				`  ${MARK[c.status]} ${c.name.padEnd(7)}${c.summary}`,
 				...c.details.slice(0, MAX_DETAILS).map((d) => `      ${d}`),
 				...(c.details.length > MAX_DETAILS ? [`      … ${c.details.length - MAX_DETAILS} more: sable ${c.name}${c.name === "doctor" ? "" : ` ${paths.join(" ")}`}`] : []),
-				...(c.notes ?? []).map((n) => `      note — ${n}`),
+				...(c.notes ?? []).map((n) => (n.startsWith("warn — ") ? `      ${n}` : `      note — ${n}`)),
 			]),
 			"",
 			failed.length ? `[sable check] ✗ ${failed.join(", ")} failed. Fix these and run sable check again.` : "[sable check] ✓ doctor, lint and grade pass.",
@@ -1962,6 +2044,17 @@ function cmdCheck() {
 			"",
 		].join("\n")
 	}
+	const rebuiltText = () => {
+		const list = rebuilt?.items ?? []
+		if (!list.length) return ""
+		return [
+			"",
+			`Rebuilt parts — ${list.length}. Sable ships these, or the app styles one from outside. Use the part (or its variant or prop), or say in the reuse inventory why yours stays. A part that cannot fit your design is a missing variant to report, not a reason to rebuild it.`,
+			...list.slice(0, MAX_DETAILS).map((r) => `      ${r.file}:${r.line}  ${r.what}${r.count ? ` ×${r.count}` : ""} → ${r.consider}`),
+			...(list.length > MAX_DETAILS ? [`      … ${list.length - MAX_DETAILS} more: sable grade ${paths.join(" ")} --json → rebuiltParts.items`] : []),
+			"",
+		].join("\n")
+	}
 	const adoptionText = () => {
 		if (!adoption || adoption.level === "empty" || (adoption.level === "sable" && !adoption.swaps.length)) return ""
 		return [
@@ -2001,7 +2094,7 @@ function cmdCheck() {
 	}
 
 	if (JSON_OUT) process.stdout.write(`${JSON.stringify({ type: "check", data }, null, DENSE ? 0 : 1)}\n`)
-	else process.stdout.write(`${summaryText()}\n${adoptionText()}${inventoryText()}${manualText()}\n`)
+	else process.stdout.write(`${summaryText()}\n${adoptionText()}${rebuiltText()}${inventoryText()}${manualText()}\n`)
 	logInvocation(failed.length ? 1 : 0, failed.length ? "ERR_CHECK_FAILED" : undefined)
 	process.exit(failed.length ? 1 : 0)
 }
@@ -2091,6 +2184,7 @@ const HANDLERS = {
 	setup: cmdSetup,
 	check: cmdCheck,
 	provider: cmdProvider,
+	icon: cmdIcon,
 	manifest: cmdManifest,
 	search: cmdSearch,
 	component: cmdComponent,

package/dist/{_contract-CDa9-NdB.d.ts → _contract-DlklV0Im.d.ts}

@@ -46,7 +46,7 @@ type TypeScaleToken = (typeof TYPE_SCALE_TOKENS)[number];
  * Set them at a theme or region scope, then keep consuming whole `text-*` tiers.
  * Compact controls still follow TYPE_UI_TOKENS for the workspace register.
  */
-declare const TYPE_REFINEMENT_TOKENS: readonly ["type-display-4xl-size", "type-title-lg-size", "type-title-sm-size", "type-body-lg-size", "type-body-lg-weight", "type-body-lg-leading", "type-body-lg-tracking", "type-body-md-size", "type-body-md-weight", "type-body-md-leading", "type-body-md-tracking", "type-body-sm-size", "type-body-sm-weight", "type-body-sm-leading", "type-body-sm-tracking", "type-body-xs-size", "type-body-xs-weight", "type-body-xs-leading", "type-body-xs-tracking", "type-label-lg-size", "type-label-lg-weight", "type-label-lg-leading", "type-label-lg-tracking", "type-label-md-size", "type-label-md-weight", "type-label-md-leading", "type-label-md-tracking", "type-label-sm-size", "type-label-sm-weight", "type-label-sm-leading", "type-label-sm-tracking", "type-label-xs-size", "type-label-xs-weight", "type-label-xs-leading", "type-label-xs-tracking", "type-label-xs-transform", "type-caption-size", "type-caption-weight", "type-caption-leading", "type-caption-tracking", "type-mono-xl-size", "type-mono-xl-weight", "type-mono-xl-leading", "type-mono-xl-tracking", "type-mono-lg-size", "type-mono-lg-weight", "type-mono-lg-leading", "type-mono-lg-tracking", "type-mono-md-size", "type-mono-md-weight", "type-mono-md-leading", "type-mono-md-tracking", "type-mono-caption-size", "type-mono-caption-weight", "type-mono-caption-leading", "type-mono-caption-tracking", "type-mono-sm-size", "type-mono-sm-weight", "type-mono-sm-leading", "type-mono-sm-tracking"];
+declare const TYPE_REFINEMENT_TOKENS: readonly ["type-base", "type-display-4xl-size", "type-title-lg-size", "type-title-sm-size", "type-body-lg-size", "type-body-lg-weight", "type-body-lg-leading", "type-body-lg-tracking", "type-body-md-size", "type-body-md-weight", "type-body-md-leading", "type-body-md-tracking", "type-body-sm-size", "type-body-sm-weight", "type-body-sm-leading", "type-body-sm-tracking", "type-body-xs-size", "type-body-xs-weight", "type-body-xs-leading", "type-body-xs-tracking", "type-label-lg-size", "type-label-lg-weight", "type-label-lg-leading", "type-label-lg-tracking", "type-label-md-size", "type-label-md-weight", "type-label-md-leading", "type-label-md-tracking", "type-label-sm-size", "type-label-sm-weight", "type-label-sm-leading", "type-label-sm-tracking", "type-label-xs-size", "type-label-xs-weight", "type-label-xs-leading", "type-label-xs-tracking", "type-label-xs-transform", "type-caption-size", "type-caption-weight", "type-caption-leading", "type-caption-tracking", "type-mono-xl-size", "type-mono-xl-weight", "type-mono-xl-leading", "type-mono-xl-tracking", "type-mono-lg-size", "type-mono-lg-weight", "type-mono-lg-leading", "type-mono-lg-tracking", "type-mono-md-size", "type-mono-md-weight", "type-mono-md-leading", "type-mono-md-tracking", "type-mono-caption-size", "type-mono-caption-weight", "type-mono-caption-leading", "type-mono-caption-tracking", "type-mono-sm-size", "type-mono-sm-weight", "type-mono-sm-leading", "type-mono-sm-tracking"];
 type TypeRefinementToken = (typeof TYPE_REFINEMENT_TOKENS)[number];
 /**
  * Overline/eyebrow/kicker type tokens (mode-independent). A theme MAY override
@@ -206,7 +206,7 @@ declare const MARK_TOKENS: readonly ["destructive-mark", "success-mark", "tone-w
  * an unrecognised `text-*` class falls into tailwind-merge's COLOUR group and
  * silently evicts the real colour class, which is a genuinely hard bug to see.
  */
-declare const TYPE_UI_TOKENS: readonly ["type-ui-md-size", "type-ui-md-weight", "type-ui-sm-size", "type-ui-sm-weight", "type-ui-leading", "type-ui-section-weight", "type-ui-micro-size", "type-ui-micro-weight"];
+declare const TYPE_UI_TOKENS: readonly ["type-ui-md-size", "type-ui-md-weight", "type-ui-sm-size", "type-ui-sm-weight", "type-ui-leading", "type-ui-section-weight", "type-ui-micro-size", "type-ui-micro-weight", "type-ui-title-size", "type-ui-title-weight", "type-ui-title-leading"];
 type TypeUiToken = (typeof TYPE_UI_TOKENS)[number];
 type ThemeMode = "light" | "dark";
 /** Lightweight, typed description of a theme (the TS manifest each theme ships). */

package/dist/blocks/index.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { B as BlockMeta } from '../meta-DX5r5wQL.js';
+import { B as BlockMeta } from '../meta-Dfm9AExe.js';
 
 interface ApiKeysBlockProps {
     className?: string;

package/dist/components/avatar/avatar.js

@@ -13,9 +13,10 @@ import {
 } from "react";
 import { cn } from "../../lib/cn.js";
 import { GradientArt } from "../gradient-art/index.js";
+import { isPaletteColor } from "../../lib/palette.js";
 import { mergeRefs } from "../../lib/refs.js";
 import { useResizeObserver } from "../../lib/use-resize-observer.js";
-import { avatarGroupVariants, avatarVariants } from "./avatar.variants.js";
+import { AVATAR_SQUARE_RADIUS, avatarGroupVariants, avatarVariants } from "./avatar.variants.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 var AvatarGroupContext = createContext(null);
 var STATUS_SCALE = {
@@ -26,12 +27,14 @@ var IMAGE_FADE = {
   xl: "motion-fade",
   "2xl": "motion-fade"
 };
-function AvatarRoot({ size, className, ...props }) {
+function AvatarRoot({ size, shape, tone, className, ...props }) {
   const group = useContext(AvatarGroupContext);
+  const palette = isPaletteColor(tone) ? tone : void 0;
   return /* @__PURE__ */ jsx(
     Base.Root,
     {
-      className: cn(avatarVariants({ size: group?.size ?? size }), className),
+      "data-palette": palette,
+      className: cn(avatarVariants({ size: group?.size ?? size, shape }), palette && "bg-palette-wash", className),
       ...props
     }
   );
@@ -51,7 +54,7 @@ function AvatarFallback({ className, ...props }) {
   return /* @__PURE__ */ jsx(
     Base.Fallback,
     {
-      className: cn("text-muted-foreground", className),
+      className: cn("text-muted-foreground [[data-palette]>&]:text-palette-text", className),
       ...props
     }
   );
@@ -63,6 +66,8 @@ function Avatar({
   fallback,
   fallbackDelay,
   size,
+  shape,
+  tone,
   status,
   variant = "neutral",
   seed,
@@ -70,7 +75,7 @@ function Avatar({
   ...props
 }) {
   const named = !src && alt ? { role: "img", "aria-label": alt } : null;
-  const avatar = /* @__PURE__ */ jsxs(AvatarRoot, { size, className: status == null ? className : void 0, ...named, ...props, children: [
+  const avatar = /* @__PURE__ */ jsxs(AvatarRoot, { size, shape, tone: variant === "art" ? void 0 : tone, className: status == null ? className : void 0, ...named, ...props, children: [
     src ? /* @__PURE__ */ jsx(AvatarImage, { src, alt: alt ?? "", className: size ? IMAGE_FADE[size] : void 0 }) : null,
     variant === "art" ? /* @__PURE__ */ jsx(AvatarFallback, { delay: fallbackDelay, "aria-hidden": named ? true : void 0, className: "size-full", children: /* @__PURE__ */ jsxs(GradientArt, { seed: seed ?? (typeof fallback === "string" && fallback || alt || void 0), className: "flex size-full items-center justify-center text-overlay-foreground", children: [
       /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "absolute inset-0 bg-overlay/30" }),
@@ -78,14 +83,16 @@ function Avatar({
     ] }) }) : /* @__PURE__ */ jsx(AvatarFallback, { delay: fallbackDelay, "aria-hidden": named ? true : void 0, children: fallback })
   ] });
   if (status == null) return avatar;
-  return /* @__PURE__ */ jsxs("span", { "data-slot": "avatar-status-anchor", className: cn("relative inline-flex shrink-0 rounded-full", className), children: [
+  const anchorRadius = shape === "square" ? AVATAR_SQUARE_RADIUS[size ?? "md"] : "rounded-full";
+  return /* @__PURE__ */ jsxs("span", { "data-slot": "avatar-status-anchor", className: cn("relative inline-flex shrink-0", anchorRadius, className), children: [
     avatar,
     /* @__PURE__ */ jsx(
       "span",
       {
         "data-slot": "avatar-status",
         className: cn(
-          "absolute end-[14.6%] bottom-[14.6%] flex translate-x-1/2 translate-y-1/2 rounded-full rtl:-translate-x-1/2 *:ring-2 *:ring-[color:var(--avatar-group-ring,var(--background))]",
+          "absolute flex translate-x-1/2 translate-y-1/2 rounded-full rtl:-translate-x-1/2 *:ring-2 *:ring-[color:var(--avatar-group-ring,var(--background))]",
+          shape === "square" ? "end-[6%] bottom-[6%]" : "end-[14.6%] bottom-[14.6%]",
           size ? STATUS_SCALE[size] : void 0
         ),
         children: status
@@ -110,6 +117,8 @@ function AvatarGroupCount({
 }
 AvatarGroupCount.displayName = "AvatarGroupCount";
 var FIT_MIN_WIDTH = {
+  "2xs": "min-w-9",
+  xs: "min-w-11",
   sm: "min-w-15",
   md: "min-w-[--spacing(18.5)]",
   lg: "min-w-22"