@kerfjs/ui 5.0.0-beta.18 → 5.0.0-beta.21

package/ai/skill.md

@@ -7,11 +7,17 @@ kerf-ui-skill-version: 1.36.0
 # Building with @kerfjs/ui
 
 Read `../docs/component-selection.md` first, then `./component-catalog.json`,
-`./public-api-signatures-v1.md`, `./webawesome-jsx-signatures-v1.md`,
+`./component-catalog-v2.json`,
+`./public-api-signatures-v1.md`, `./compile-time-contracts-v1.json`,
+`./webawesome-jsx-signatures-v1.md`,
 `../docs/recipes.md`, `../README.md`,
 `../docs/component-contract.md`, and `../docs/accessibility.md` before changing
 a consuming interface. Use the signature snapshot for exact props, callbacks,
 return values, and supported import paths; do not infer them from examples.
+Treat each `KUI-T###` contract as an exact declaration guarantee, including its
+documented dynamic-data widening. Do not extend those diagnostics to child
+markup, live DOM relationships, disposer invocation, or other conditions that
+TypeScript cannot prove from one call.
 Read `../docs/webawesome-theme.md` when using Web Awesome components or changing
 shared theme tokens.
 
@@ -20,9 +26,32 @@ conforms to `./component-catalog-extension.schema.json`. Treat its entries as a
 second, package-qualified input beside `./component-catalog.json`: search both,
 preserve their source identity, and use the shared `geometry` vocabulary across
 their composition boundary. When a consuming project has reusable visual
-components but no extension, generate and maintain one from
-`../docs/examples/component-catalog-extension.json`; do not infer their geometry
-from rendered appearance alone.
+components, prefer its generated `component-catalog-v2.json`. A package
+scaffolded by `create-kerf-component` owns the decisions in
+`kerf.components.json`; run `npm run catalog:check` before using its output. If
+no generated extension exists, start from the checked examples and require the
+author to supply missing semantic and geometry decisions; never infer them from
+rendered appearance.
+
+Use v1 for selection, delivery, and compatibility. Use v2 when evaluating
+composition. Join catalogs by `key` (`package:id`), never bare `id`. Treat
+`generated-permissive-default` composition provenance as unknown/allowed, not
+as a prohibition. Emit a diagnostic only after mechanically establishing its
+exact `when` condition; subjective guidance stays prose. App entries use the
+v2 extension schema and retain their own package identity across Kerf edges.
+
+Before selecting for an application, call the Node-side discovery API in
+`./application-ui-profile.mjs` (or implement its documented filename/order)
+from the workspace root and target directory. Apply package defaults first,
+then workspace policy, then directory-local profiles parent-to-child. Honor the
+resolved profile's preferences, theme/density allowlists, tokens, layout, and
+responsive policy. Treat only its exact, narrow exception targets as waived;
+never generalize an exception to siblings or infer product data into a profile.
+Surface every returned source file + JSON-path diagnostic before generating UI.
+Each layer is checked against its then-effective catalogs; later overrides do
+not excuse broken catalogs or stale references in a parent layer. Synchronous
+ESLint integrations use `./application-ui-profile-sync.cjs` and surface any
+failure as `KUI-L090`.
 
 Choose from the need, not from visual resemblance:
 
@@ -54,6 +83,13 @@ primitives and semantic ownership; replace application state, policy, and copy.
 
 The concise human decision matrix is in [`component-selection.md`](../docs/component-selection.md). For exhaustive tool retrieval, load [`component-catalog.json`](./component-catalog.json), the canonical metadata for every public component/helper, composition, and supported Web Awesome entry. Its `geometry` object identifies who owns margin, border, and padding; use that contract to avoid double-insetting or wrapping an already complete surface. Use its linked current recipes instead of inferring behavior from CSS.
 
+Before presenting an integration as complete, run `kerf-ui-analyze --root <workspace>`.
+Treat its error diagnostics as required fixes and review each review-level finding
+against the resolved application profile. Use `--format sarif` in code-scanning
+workflows and `--fail-on-review` when the project requires a zero-review budget.
+Do not suppress a finding in source; add only a narrowly targeted, justified
+profile exception when the deviation is deliberate.
+
 Hard rules:
 
 1. Import visual components from explicit JavaScript subpaths. In CSS-aware browser builds each subpath brings in its own reachable CSS, including UI subcomponents, while unrelated CSS remains out. The root barrel and `@kerfjs/ui/unstyled` are CSS-free; pair the root barrel with `styles.css` only when the complete layer is intentional. Manual CSS subpaths remain available for custom pipelines.
@@ -67,7 +103,7 @@ Hard rules:
 9. Use controlled `SegmentedControl` for a small exclusive choice set. Select `appearance="toolbar"` when nesting it inside `ToolbarControlGroup`; use rounded or pill shapes for standalone contexts. Handle its action, update `value`, keep meaningful choice labels, and preserve every enabled native button in sequential Tab order.
 10. Compose `AppTab` inside controlled `TabBar`; call `wireTabBars()` once and retain its disposer. It owns same-bar drag mechanics, including proximity-based horizontal edge autoscroll, while the app applies `onReorder` and owns order, selection, panels, close policy, routing, and persistence. Arrow/Home/End select on move by default; pass `activation: 'manual'` (or `TabBar activation="manual"` per strip) so arrow keys move focus only and the user selects with Enter/Space/click — use it when selecting a tab is a heavy action. Use runtime-filtered `rootAttributes` for domain metadata and keep an optional `closeIcon` decorative and noninteractive.
 11. Use token-controlled `TokenSearchField` when free text and removable structured filters share one editor. Editable text stays DOM-owned between token changes. The leading icon, first text line, clear action, and trailing slot share one fixed row when content wraps. The app owns parsing and suggestions; call `readTokenSearchField()` on input, empty `textContent` on clear, use `placeTokenSearchCaret()` after explicit controlled focus changes, and call `wireTokenSearchFields()` once so Enter submits without inserting a line break and keyboard chip deletion restores focus plus the text-relative caret after controlled replacement. Enable `collapsible` for an animated iconic closed state, standalone or inside `ToolbarControlGroup`; the field keeps text or tokens expanded, and `wireTokenSearchFields()` manages the transient expand/collapse/focus by default (activate to reveal + focus, Escape or empty blur to collapse). Bind the field's `expanded` to the returned handle's `expanded(id)` signal or adopt your own via `collapsible.signals`; opt a behavior out only when the app must own it. Do not hand-roll the open handler, the focusout collapse, or a clear-button mousedown guard — the helper owns them. For real-app adoption it also provides a focusout keep-open exception (`data-token-search-keep-open` regions or `collapsible.keepOpenOn(target)`, so a sibling suggestions/date/help surface does not collapse an empty field), opt-in atomic-chip keyboard (`keyboard`: Backspace/Delete remove the adjacent chip via `onRemoveToken`, ArrowRight moves the caret past a trailing chip), and an `onEdit({id, editor, event})` input callback (the `InputEvent` lets you gate on `inputType`/`data`) — reach for these instead of re-adding hand-rolled keydown/input handlers around the field.
-12. Demo work uses public production component subpaths and their browser-selected CSS. Give every public visual component its own category-grouped catalog route; list themed third-party components under a clearly labeled collapsible ecosystem section, with a focused route for each. Project its deterministic repository-relative demo source and existing documentation path so the detail can expose `View demo source` and `Read guidance` links without a runtime export; also derive first-party component implementation paths from their canonical browser imports, and label Web Awesome documentation as Kerf integration guidance. Declare direct `uses` relationships so `Used by` stays derivable, and theme shell chrome through the same semantic tokens as the stage instead of drawing a substitute. For focused component previews, pass `geometryOverlay={true}` to `Catalog` so transparent bounds and positive margins remain inspectable; disable it for compositions, and use the catalog's machine-readable `geometry` ownership to interpret the result instead of treating every visible inset as component-owned. Enable `wireCatalog({ revealSelection: true })` for long desktop sidebars so controlled selections remain visible without moving focus; keep its default compact media guard unless compact scrolling is an explicit product behavior, and use `revealCatalogEntry` for an initial deep link.
+12. Demo work uses public production component subpaths and their browser-selected CSS. Give every public visual component its own category-grouped catalog route; list themed third-party components under a clearly labeled collapsible ecosystem section, with a focused route for each. For the complete focused/composition decision, `CatalogExample` / `CatalogExampleStack` row/group nesting, exact specimen selection, geometry-overlay legend and exclusions, skip-marker behavior, and metadata ownership, follow the single [Catalog demo authoring contract](../docs/catalog.md#catalog-demo-authoring-contract), discovered machine-readably through [`catalog-authoring.json`](./catalog-authoring.json). Never infer structure from private `kui-catalog-*` classes. Project each component's deterministic repository-relative demo source and existing documentation path so the detail can expose `View demo source` and `Read guidance` links without a runtime export; also derive first-party component implementation paths from their canonical browser imports, and label Web Awesome documentation as Kerf integration guidance. Declare direct `uses` relationships so `Used by` stays derivable, and theme shell chrome through the same semantic tokens as the stage instead of drawing a substitute. Enable `wireCatalog({ revealSelection: true })` for long desktop sidebars so controlled selections remain visible without moving focus; keep its default compact media guard unless compact scrolling is an explicit product behavior, and use `revealCatalogEntry` for an initial deep link.
 13. The Web Awesome theme makes Tooltip and Popover arrowless by default. Keep that default unless a pointer materially clarifies the anchor; opt back in with `--wa-tooltip-arrow-size`, `--kui-wa-popover-arrow-size`, or a popover's public `--arrow-size`, and use `without-arrow` when local no-arrow intent should survive theme changes. Its non-field chrome uses `--kui-wa-control-inset` (8px controls/items), `--kui-wa-surface-margin` / `--kui-wa-surface-inset` (8px around/inside Accordion, Card, Details, Callout, and Include), and `--kui-wa-container-inset` (16px Tab Panel content); override those tiers instead of restyling individual parts. Checkbox and Radio Group option regions, the Color Picker trigger, and Slider's complete interactive region receive the shared 8px logical inline outer inset because those controls have no bordered field shell. Known Date field captions and bordered text-like field hints align with values at the 9px border-plus-padding inset. OTP Input's label uses the same uppercase xs/650 treatment as other field labels, and both its label and hint use that 9px inset.
 14. Treat the complete Web Awesome catalog as support coverage, not a recommendation list. Its UX sidebar marks superseded and exceptional entries `Discouraged`. Consider Popup when it replaces custom anchored positioning. Prefer Kerf `Select` over direct Dropdown/Dropdown Item/Select/Option composition, `SegmentedControl` over Button Group, `TabBar` or `SegmentedControl` over Web Awesome Tabs, `LucideIcon` over Web Awesome Icon, and `ResizableRegion` over Split Panel. Use Tree/Tree Item, Animated Image, and Comparison only for a specific required behavior; avoid Zoomable Frame.
 15. Build sidebars, main areas, inspectors, and dialogs from `@kerfjs/ui/layout.css`: an unpadded `.kui-pane`, optional `.kui-pane__toolbar`, one scrolling `.kui-pane__content`, and optional `.kui-pane__footer`. Add `.kui-content` for 24px major vertical separation and `.kui-content-item` for a child-owned 8px inline margin, 1px transparent-or-visible border, 8px padding, and 12px radius. Use the pill modifier for 22px. Do not pad pane shells or duplicate item geometry in wrappers.

package/ai/webawesome-jsx-signatures-v1.md

@@ -1,6 +1,6 @@
 # Web Awesome JSX signatures for the UI authoring corpus
 
-Generated from the emitted `@kerfjs/ui@5.0.0-beta.18` declaration boundary. Import `@kerfjs/ui/webawesome` for type effects when authoring direct `wa-*` JSX. The module emits no runtime behavior and does not register custom elements.
+Generated from the emitted `@kerfjs/ui@5.0.0-beta.21` declaration boundary. Import `@kerfjs/ui/webawesome` for type effects when authoring direct `wa-*` JSX. The module emits no runtime behavior and does not register custom elements.
 
 ```ts
 import { KerfCustomElement } from 'kerfjs/jsx-runtime';

package/analyzer/cli.mjs

@@ -0,0 +1,46 @@
+#!/usr/bin/env node
+
+import console from 'node:console';
+import { writeFile } from 'node:fs/promises';
+import { resolve } from 'node:path';
+import process from 'node:process';
+
+import {
+  analyzeUiProject,
+  formatUiAnalysisSarif,
+  formatUiAnalysisText,
+} from './index.mjs';
+
+const args = process.argv.slice(2);
+const take = (name) => {
+  const index = args.indexOf(name);
+  if (index < 0) return undefined;
+  const value = args[index + 1];
+  args.splice(index, 2);
+  return value;
+};
+const root = resolve(take('--root') ?? process.cwd());
+const format = take('--format') ?? 'text';
+const output = take('--output');
+const profile = take('--profile');
+const failOnReview = args.includes('--fail-on-review');
+const paths = args.filter((argument) => !argument.startsWith('--'));
+
+if (!['text', 'json', 'sarif'].includes(format)) {
+  console.error(`Unknown --format ${format}; expected text, json, or sarif.`);
+  process.exitCode = 2;
+} else {
+  const report = await analyzeUiProject({ root, paths, profile });
+  const rendered =
+    format === 'text'
+      ? formatUiAnalysisText(report)
+      : JSON.stringify(
+          format === 'sarif' ? formatUiAnalysisSarif(report) : report,
+          null,
+          2,
+        );
+  if (output) await writeFile(resolve(root, output), `${rendered}\n`);
+  else console.log(rendered);
+  if (report.summary.errors || (failOnReview && report.summary.review))
+    process.exitCode = 1;
+}

package/analyzer/index.d.mts

@@ -0,0 +1,45 @@
+export type UiAnalysisSeverity = 'error' | 'review';
+
+export interface UiAnalysisDiagnostic {
+  ruleId: `KUI-L${string}`;
+  severity: UiAnalysisSeverity;
+  message: string;
+  location: { file: string; line: number; column: number };
+  evidence?: unknown;
+  chain?: unknown;
+}
+
+export interface UiAnalysisProfileDiagnostic {
+  code: `KUI-P${string}`;
+  source?: string;
+  path: string;
+  message: string;
+}
+
+export interface UiAnalysisReport {
+  schemaVersion: 1;
+  tool: { name: string; version: 1 };
+  root: '.';
+  files: string[];
+  profile: {
+    files?: string[];
+    diagnostics: UiAnalysisProfileDiagnostic[];
+  };
+  diagnostics: UiAnalysisDiagnostic[];
+  summary: { errors: number; review: number; suppressed: number };
+}
+
+export const UI_ANALYSIS_SCHEMA_VERSION: 1;
+export const UI_ANALYSIS_RULES: Readonly<
+  Record<`KUI-L${string}`, { severity: UiAnalysisSeverity; title: string }>
+>;
+
+export function analyzeUiProject(options?: {
+  root?: string;
+  paths?: string[];
+  profile?: string;
+  knownRules?: Iterable<string>;
+}): Promise<UiAnalysisReport>;
+
+export function formatUiAnalysisText(report: UiAnalysisReport): string;
+export function formatUiAnalysisSarif(report: UiAnalysisReport): object;