@sableui/react 0.8.2 → 0.9.0

package/scripts/grade.mjs

@@ -304,6 +304,9 @@ const UNIVERSAL_PROPS = new Set([
 	"minLength", "min", "max", "step", "rows", "cols", "open", "selected", "multiple", "loading",
 	// Media attributes, for components that spread onto <video>/<audio>/<img> (Video, Image).
 	"autoPlay", "muted", "loop", "playsInline", "preload", "crossOrigin", "decoding", "fetchPriority", "srcSet", "sizes",
+	// Input attributes the form contract asks for (the numeric keypad, the
+	// return key's label), on components that spread onto <input>.
+	"inputMode", "enterKeyHint", "autoCapitalize", "autoCorrect", "pattern", "list", "accept", "capture",
 ])
 const isEventProp = (p) => /^on[A-Z]/.test(p)
 const isPassthrough = (p) => p.startsWith("data-") || p.startsWith("aria-") || p.startsWith("--")
@@ -500,6 +503,14 @@ for (const file of files) {
 	/* 7. Surfaces the app built itself (informational). */
 	if (/\.(tsx|jsx)$/.test(file)) {
 		for (const { index, ...s } of surfaceInventory(text)) inventory.push({ file: rel, line: lineOf(text, index), ...s })
+		// Arrow-key handling written by hand: list navigation is behaviour Sable
+		// owns (roving focus, active descendant, typeahead), and the storefront
+		// search wrote its own. A note, since a canvas or a game has its own keys.
+		const arrows = /\bonKeyDown\b[\s\S]{0,600}?["'`]Arrow(?:Up|Down)["'`]|["'`]Arrow(?:Up|Down)["'`][\s\S]{0,600}?\bonKeyDown\b/.exec(text)
+		if (arrows) {
+			const at = text.indexOf("Arrow", arrows.index)
+			inventory.push({ file: rel, line: lineOf(text, at), tag: "onKeyDown", kind: "keyboard", classes: "ArrowUp / ArrowDown handled by hand", consider: "CommandMenu, Combobox, Menu, Select, Toolbar or Tabs, whose keyboard model is built and tested" })
+		}
 	}
 
 	/* 8. Composition. Anything exporting a component that returns a big tree is
@@ -679,10 +690,10 @@ if (conformance.length) {
 	L("  composition                 no route-like files found")
 }
 if (inventory.length) {
-	const kinds = ["surface", "media frame", "round"].map((k) => [k, inventory.filter((s) => s.kind === k).length]).filter(([, n]) => n)
+	const kinds = ["surface", "media frame", "round", "keyboard"].map((k) => [k, inventory.filter((s) => s.kind === k).length]).filter(([, n]) => n)
 	L()
-	L(`  app-owned surfaces (review, not scored) — ${inventory.length}: ${kinds.map(([k, n]) => `${n} ${k}`).join(" · ")}`)
-	for (const s of inventory.slice(0, 12)) L(`    ${s.file}:${s.line}  <${s.tag}> ${s.kind} (${s.classes}) → ${s.consider}`)
+	L(`  app-owned surfaces (notes, not scored; keeping your own is fine) — ${inventory.length}: ${kinds.map(([k, n]) => `${n} ${k}`).join(" · ")}`)
+	for (const s of inventory.slice(0, 12)) L(`    ${s.file}:${s.line}  <${s.tag}> ${s.kind} (${s.classes}) → Sable has ${s.consider}`)
 	if (inventory.length > 12) L(`    … ${inventory.length - 12} more (--json lists every one)`)
 }
 if (cliUsage) {

package/scripts/sources.mjs

@@ -195,13 +195,21 @@ export function sourcesCss(pkgRoot, root, outFile) {
  * that component unstyled, silently — so it fails. A whole-package @source is
  * correct, just heavy, so it only gets a note.
  */
+const WHOLE_DIST = /@source[^;]*(?:@sableui\/react|packages\/sable)\/dist(?:\/\*\*)?[^;]*;/
+
 export function sourcesCheck(pkgRoot, root, cssFiles) {
 	const generated = cssFiles.find((f) => f.text.includes(SOURCES_MARKER))
 	if (!generated) {
-		const whole = cssFiles.some((f) => /@source[^;]*(?:@sableui\/react|packages\/sable)\/dist(?:\/\*\*)?[^;]*;/.test(f.text))
-		return whole ? [{ status: "info", name: "css:size", detail: "@source scans all of Sable's dist, so every component's classes ship (about 32 KB gzipped).", fix: "sable sources --write src/sable-sources.css, then import it in place of that @source." }] : []
+		const whole = cssFiles.some((f) => WHOLE_DIST.test(f.text))
+		return whole ? [{ status: "info", name: "css:size", detail: "@source scans all of Sable's dist, so every component's classes ship (about 32 KB gzipped; an app using half the catalog lands near 20 KB).", fix: "sable sources --write src/sable-sources.css, then import it in place of that @source." }] : []
 	}
 	const rel = relative(root, generated.path)
+	// The generated list only trims anything once the whole-package @source is
+	// gone: left beside it, Tailwind still scans every module, and the CSS stays
+	// the size it was.
+	const leftover = cssFiles.find((f) => f !== generated && WHOLE_DIST.test(f.text))
+	if (leftover)
+		return [{ status: "warn", name: "css:sources", detail: `${relative(root, leftover.path)} still has the whole-package @source, so ${rel} trims nothing: Tailwind scans all of Sable either way.`, fix: `Delete that @source line; ${rel} replaces it.` }]
 	const { modules, unresolved } = sableModules(pkgRoot, appSources(root))
 	if (unresolved.length && !/\/dist\/\*\*\//.test(generated.text))
 		return [{ status: "fail", name: "css:sources", detail: `${rel} lists modules, but these imports could not be traced: ${unresolved.slice(0, 4).join(", ")}.`, fix: `sable sources --write ${rel}` }]

package/skills/sable/SKILL.md

@@ -29,9 +29,11 @@ References inform an original direction. A reference or preset is optional.
    `"reduced"`), state still changes and nothing keeps moving.
 6. Write the reuse inventory: 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:
-   each one composes the component named beside it, or the inventory says why
-   the app owns it.
+   that justified it. Start from the app-owned surfaces `sable check` lists,
+   which are notes, not failures: for each, write one line saying you used the
+   Sable part named beside it or kept your own, and why ("composed our own
+   product tile from AspectBox + Badge: the brief wants the price over the
+   photo"). Keeping your own layout is fine. Behaviour still comes from Sable.
 7. Record what you learned: `sable docs learning-from-builds`. Keep conditional
    lessons with evidence; never fabricate human approval or preference records.
 
@@ -142,9 +144,18 @@ The installed catalog and guides are authoritative for API and token names.
 
 1. Search the installed catalog for every recognizable element or behavior:
    `sable search "<need>" --json`. Inspect the matching
-   `sable component <Name> --props` and `--examples` before using it. Use its public
-   component and composed anatomy. A native element wearing a component's classes
-   is a reinvention, even if it uses valid tokens.
+   `sable component <Name> --props` and `--examples` before using it. What a
+   result asks of you depends on what it is:
+   - **Behaviour** (controls, fields, overlays, menus, tabs, anything with focus,
+     keyboard or ARIA): always use it, never rebuild it. A native element wearing
+     a component's classes, or arrow keys handled by hand, is a reinvention even
+     if it uses valid tokens.
+   - **Parts** (Card, Entity, AspectBox, Badge, Avatar, MediaImage, layout
+     primitives): compose them freely, in whatever arrangement the design needs.
+   - **References** (patterns, blocks, and compositions marked ◇ such as
+     MediaTile): use one when its layout fits the brief. When it doesn't, compose
+     your own from parts; that is not a gap and needs no apology. Apps on Sable
+     should not all look alike.
 2. Resolve styling in this order: Sable component/variant, Sable utility or recipe,
    semantic token, then app-owned CSS for a genuinely uncovered need. Retrieve
    `sable utility <name>` and `sable token <group>` rather than guessing names.
@@ -170,7 +181,12 @@ The installed catalog and guides are authoritative for API and token names.
 Save a short brief in the project's existing design location: audience, primary
 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
+there (`sable docs building-a-page`). Name the product's signature surfaces: the
+one to three places its identity lives (a shop's product card and search, a music
+app's player and album tile). Design those from the brief's direction first,
+composing Sable's parts and behaviour; take a Sable reference for one only when
+it already matches that direction. Everything else (forms, settings, menus,
+tables) takes Sable's defaults. 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.