@kerfjs/ui 4.4.1

package/docs/component-contract.md

@@ -0,0 +1,66 @@
+# Component and integration contract
+
+`@kerfjs/ui` components are plain functions that return Kerf `SafeHtml`. They have no component instance or lifecycle.
+
+## Ownership boundaries
+
+- Components own semantic markup, stable anatomy, documented variants, ARIA projection, and package CSS hooks.
+- Applications own signals/stores, product copy, domain-state mapping, persistence, routing, permissions, and transport.
+- Actions are `data-action` strings. Wire them at a stable root with `delegate()` or `delegateActions()` and retain the disposer.
+- A reusable component never owns per-instance mutable module state.
+- Consumers style through `--kui-*` semantic tokens and public component classes. Foundation tokens provide opinionated neutral, brand/info, success, warning, and danger fill/border/foreground roles. Stateful components expose local override variables; do not target private descendants when a documented variant or token exists.
+
+`StateBanner` exposes instance-level `--kui-state-banner-background`,
+`--kui-state-banner-border`, `--kui-state-banner-foreground`,
+`--kui-state-banner-detail`, and action background variables. Its five built-in
+tones can be rethemed globally with
+`--kui-state-banner-{tone}-{background|border|foreground}`. Toolbar control,
+segmented-control, app-tab, and tab-bar colors likewise use their public
+`--kui-*-*` variables. `SegmentedControl` exposes surface, border, foreground,
+hover, and selected-state variables, so rounded, pill, and toolbar presentations
+remain opinionated but locally overridable.
+
+`ResizableRegion` owns the Hot Sheet 2 split treatment: a persistent 1px
+separator with a compact grip that appears on hover or keyboard focus. Override
+`--kui-resizable-region-separator-color`,
+`--kui-resizable-region-handle-color`, or
+`--kui-resizable-region-handle-active-color` on a region when its containing
+surface needs a different contrast level.
+
+## Imports and side effects
+
+Every component has an explicit JS and CSS subpath. In CSS-aware browser builds,
+the JS component subpath resolves to a generated wrapper that imports the
+foundation, the component stylesheet, and styles for its reachable UI
+subcomponents. The source graph derives those transitive styles at build time;
+an application root never maintains that list. Unused component subpaths and
+their CSS remain unreachable. The root barrel and `@kerfjs/ui/unstyled` stay
+CSS-free for Node, SSR, and custom styling pipelines; pair a root-barrel import
+with `styles.css` when the complete component layer is intended. Application
+overrides load later in the cascade or set scoped `--kui-*` variables. JavaScript
+modules are pure except the browser style wrappers and `@kerfjs/ui/select/register`,
+which registers exactly the Web Awesome elements used by `Select`. Eventful
+helpers such as `wireResizableRegions` and `wireTabBars` attach listeners only
+when called and return disposers. CSS, the generated wrappers that make it
+reachable, and the registration module are the package's only declared side
+effects.
+
+`@kerfjs/ui/webawesome.css` is a separate, optional CSS boundary. It imports
+Web Awesome's public base stylesheet and overrides its semantic theme layer to
+match the Kerf/Hot Sheet 2 system. It never imports component JavaScript.
+Consumers register only the individual Web Awesome modules they render and can
+override `--wa-*` values after the theme import. The shared `--wa-*` values feed
+both Web Awesome controls and Kerf's `--kui-*` foundation aliases, preventing a
+second application palette.
+
+`kerfjs` is a peer dependency and remains external in every build. Importing a toolbar must not bundle a second Kerf runtime, another UI component, Web Awesome registration, the UX catalog, or development tooling.
+
+## Extracted versus application-specific
+
+The package set is intentionally domain-neutral: icon rendering, toolbar primitives, controlled segmented choices, menu rows/headers, resizable regions and wiring, controlled reorderable tab bars, headers, loading, select, banners, empty states, dialog headers, and value tables.
+
+Keep product adapters outside the package: connection-state maps, ticket empty-state copy, project/terminal/chat tab actions, saved pane sizes, provider or repository models, and application-specific palettes. An adapter may compose these primitives, map product state into their props, and override semantic CSS variables.
+
+## Testing contract
+
+Each behavior has focused unit coverage and a real-browser flow through the production-backed catalog. Consumer bundle tests enforce subpath CSS reachability, transitive component styles, root/SSR isolation, optional registration boundaries, and the CSS-only Web Awesome theme boundary. Visual evidence supplements—never replaces—keyboard, focus, state, and event assertions.

package/docs/design-philosophy.md

@@ -0,0 +1,63 @@
+# Kerf UI design philosophy
+
+Kerf interfaces should feel calm, legible, stable, and honest. They protect the user's train of thought while data and automation continue around them. Visual emphasis is spent only where it helps a person decide or act.
+
+## Decision order
+
+When concerns compete, use this order:
+
+1. Explicit product intent and user direction.
+2. Continuity, data safety, and truthful behavior.
+3. Accessibility and platform conventions.
+4. Shared semantic systems and component contracts.
+5. Local visual polish.
+
+A reference image defines hierarchy, relationships, and intended feel. It does not require brittle pixel copying. Responsive adaptations may change presentation while preserving reading order, grouping, emphasis, and actions.
+
+## Principles
+
+### Continuity is correctness
+
+Unrelated updates must not close controls, move focus, reset a draft, replace a selection, or jump scroll. Give every durable and transient state an explicit owner. Preserve DOM identity when meaning has not changed. Distinguish blocking foreground work from background synchronization.
+
+### Hierarchy precedes decoration
+
+Establish one reading order and one dominant action per decision point. Group first with alignment, spacing, typography, and shared surfaces. A border, fill, badge, or nested card must communicate a real distinction.
+
+### Prefer directness
+
+Use the shortest understandable, recoverable interaction. Avoid modes, dialogs, confirmations, and explicit saves when direct manipulation can safely express the same result. Low ceremony still requires a discoverable affordance, visible focus, and honest feedback.
+
+### Components encode meaning
+
+Reuse a component when surfaces share its purpose, anatomy, state model, and interaction behavior—not merely its appearance. Components expose semantic actions and explicit variants. Product-specific copy, transport, persistence, and domain states stay in application adapters.
+
+### Use a finite vocabulary
+
+Color, type, spacing, radius, elevation, and motion express semantic roles. Prefer package tokens over raw values in consuming code. State is never communicated by color alone.
+
+The default vocabulary is opinionated rather than empty: neutral, brand/info,
+success, warning, and danger provide quiet/normal/loud fills, borders, and
+foregrounds compatible with Hot Sheet 2 and Web Awesome. Consumers may replace
+the global palette, one semantic role, or one component instance through
+documented custom properties without rewriting component CSS.
+
+### Responsive design reprioritizes
+
+Protect primary content, readable type, recognizable icons, and usable targets. Relocate secondary information before compressing it below a usable scale. Keep one clear scroll owner per region and test narrow, wide, zoomed, and intermediate layouts.
+
+### Production behavior is proof
+
+The catalog uses the same exports and CSS consumers receive. Its category-grouped master/detail layout keeps one component under review at a time, and its decorative shell consumes the same semantic palette as the component stage. Every public visual primitive has a focused route; composition demos declare their direct dependencies so reviewers can navigate both `Uses` and `Used by` relationships. Every enabled control works. Demonstrations cover meaningful variants and adverse states with realistic enough content to expose wrapping, clipping, density, and state-transition defects.
+
+### Be platform-fluent, not platform-costumed
+
+Use honest web primitives in the browser. Translate platform behavior and accessibility conventions; do not counterfeit native title bars, materials, or controls that cannot behave natively. The web package is HIG-shaped, not HIG-skinned.
+
+### Performance is interaction design
+
+Acknowledge actions within the interaction frame. Keep blocking work out of pointer, keyboard, resize, drag, and animation frames. Bound observers, listeners, caches, and retained resources; dispose them with their owning surface.
+
+### AI remains accountable to people
+
+AI-generated or AI-modified content needs persistent factual attribution where it matters, clear uncertainty, and adjacent human controls such as Edit, Undo, Retry, or Reject. Never use humanlike decoration to substitute for provenance or review.

package/docs/ux-demo.md

@@ -0,0 +1,18 @@
+# UX catalog contract
+
+Run `npm run dev` from `ui/`. The catalog is a development and review surface, not a second implementation.
+
+- It imports public component subpaths, exercising their browser-selected reachable CSS rather than a catalog-only style path.
+- Every first-party visual component and every free Web Awesome 3.12 component has its own stable `?component=<id>` URL and focused demo. Composite header, menu, feedback, and theme scenarios remain addressable alongside their subcomponents; the root opens the first Kerf component.
+- Catalog metadata has a unique id, category, kind (`component` or `composition`), source (`kerf` or `webawesome`), name, description, and direct `uses` dependencies.
+- The master/detail shell groups first-party routes by category with production `MenuHeader` and `MenuItem` components. The 70 ecosystem components live in a separate `Web Awesome` disclosure with seven subgroups, so they remain discoverable without being presented as first-class `@kerfjs/ui` exports. Direct Web Awesome routes open the disclosure and reveal the selected row at wide sizes; narrow layouts constrain the expanded list to its own scroll region.
+- A detail with relationships renders one grouped selector: `Uses` links to direct dependencies and `Used by` links to reverse dependents. Choosing either navigates to that component's demo. The footer is absent when both groups are empty; no duplicate relationship summary is rendered.
+- Demo-only CSS supplies only the catalog shell and stages; component appearance stays in package CSS. Decorative chrome and Web Awesome controls share the same semantic system palette instead of carrying a separate demo identity.
+- Scenarios use deterministic data and cover real variants, long content, disabled state, selection, progress, feedback, overlays, media, helpers, and stateful interactions. The Web Awesome theme route remains the broad system view, while individual action, form, layout, navigation, feedback, media, and helper routes provide focused specimens; the Animation route exposes preset, easing, duration, playback-rate, and transport controls with live lifecycle status; observer routes provide user-driven intersection, mutation, and resize events with live results; ToolbarControlGroup exposes all eight Hot Sheet 2 variants; SegmentedControl covers toolbar, rounded-rectangle, pill, equal-width, and disabled presentations; StateBanner exposes every built-in tone plus a scoped override; TabBar demonstrates overflow, edge autoscroll, and controlled pointer/keyboard reordering.
+- Settings exercise light/dark, increased contrast, and reduced motion without changing component code, and expose each preference through `aria-pressed`.
+- The action log is an `aria-live` region, making interactions visible to both people and browser tests.
+- The focused Toast route calls Web Awesome's documented programmatic stack API and notes that Hot Sheet 2 still uses its own app-level toast implementation; the catalog demonstrates ecosystem support without implying current product adoption.
+- Browser coverage walks every Kerf, composition, and Web Awesome route, checks every listed Web Awesome custom element is registered in its focused specimen, exercises the ecosystem disclosure and both relationship directions, and covers tab selection/reordering/overflow, semantic palettes and scoped overrides, light/dark rendering, toolbar popup behavior, menu alignment, banner urgency, keyboard resizing, live custom-element values, and representative wide/narrow captures.
+- The production build keeps the catalog shell and Kerf routes in the entry chunk, then dynamically imports the complete Web Awesome specimen and registration surface when an ecosystem route (or the broad Web Awesome theme route) is selected. Directly addressed ecosystem URLs pass through the same loader. `npm run demo:build` enforces a 150 kB gzip ceiling for any JavaScript chunk and a 235 kB gzip ceiling for the complete JavaScript payload, so both accidental chunk collapse and aggregate growth fail the build.
+
+Before handoff, inspect the actual captures for readability, context, alignment, clipping, spacing, responsiveness, focus, and obvious defects. Fix and recapture rather than treating the screenshot as proof by itself.

package/docs/webawesome-theme.md

@@ -0,0 +1,181 @@
+# Web Awesome theme contract
+
+`@kerfjs/ui/webawesome.css` is the optional bridge between Web Awesome 3.12's
+free components and the Kerf/Hot Sheet 2 design system.
+
+```ts
+import '@kerfjs/ui/webawesome.css';
+import '@awesome.me/webawesome/dist/components/button/button.js';
+import '@awesome.me/webawesome/dist/components/input/input.js';
+```
+
+The CSS entry includes Web Awesome's native, utility, palette, and default-theme
+styles, then overrides the public semantic contract in
+`@layer wa-theme-overrides`. It does not import or register component
+JavaScript. Importing or removing an individual component module therefore
+still controls whether that component and its JavaScript dependencies enter the
+bundle.
+
+## Coverage
+
+The theme supplies shared surfaces, normal/quiet/link text, neutral/brand/
+success/warning/danger fill-border-foreground ramps, focus, overlays, form
+controls, panel and tooltip geometry, radii, and shadows. Those values reach all
+free visual component families through Web Awesome's own styles:
+
+- Actions: Button, Button Group, Copy Button, Dropdown, and Dropdown Item.
+- Forms: Checkbox and Checkbox Group, Color Picker, Input, Known Date, Number
+  Input, OTP Input, Radio and Radio Group, Rating, Select and Option, Slider,
+  Switch, Textarea, and Time Input.
+- Layout: Accordion and Accordion Item, Card, Details, Dialog, Divider, Drawer,
+  Page, Scroller, Split Panel.
+- Navigation: Breadcrumb and Breadcrumb Item, Pagination, Tab Group, Tab and Tab
+  Panel, Tree and Tree Item.
+- Feedback: Badge, Callout, Progress Bar, Progress Ring, Skeleton, Spinner, Tag,
+  Toast and Toast Item, Tooltip.
+- Media: Animated Image, Avatar, Carousel and Carousel Item, Comparison, Icon,
+  Markdown, QR Code, and Zoomable Frame.
+- Helpers: Animation, Format Bytes/Date/Number, Include, Intersection Observer,
+  Mutation Observer, Popover, Popup, Random Content, Relative Time, and Resize
+  Observer. Helpers without their own visual chrome naturally inherit only the
+  applicable typography and color values.
+
+Carousel navigation follows the same compact geometry as Kerf disclosure
+controls: 16px arrows in 28px controls and 7px visible page dots in 20px
+pointer targets. Override `--kui-wa-carousel-icon-size`,
+`--kui-wa-carousel-control-size`, `--kui-wa-carousel-dot-size`, or
+`--kui-wa-carousel-dot-hit-size` on a carousel or containing scope when a
+product needs different geometry.
+
+Accordion, Details, Breadcrumb, and Kerf Select share
+`--kui-disclosure-icon-scale` (default `.5`) so disclosure and traversal
+chevrons keep the same visual weight. The Accordion and Details components
+retain their own rotation behavior because scaling uses `transform` while
+their open state uses the independent `rotate` property.
+
+Tooltip and Popover use arrowless floating surfaces by default, matching Hot
+Sheet 2. The theme sets Web Awesome's public `--wa-tooltip-arrow-size` token to
+`0px` and maps each popover's public `--arrow-size` property from
+`--kui-wa-popover-arrow-size` (also `0px`). Restore arrows globally, for a
+subtree, or for one instance after the theme import:
+
+```css
+:root {
+  --wa-tooltip-arrow-size: .375rem;
+  --kui-wa-popover-arrow-size: .375rem;
+}
+
+.pointed-popover {
+  --arrow-size: .5rem;
+}
+```
+
+The native `without-arrow` attribute remains useful when an individual
+component should declare the no-arrow choice independent of theme context.
+
+The UX catalog includes a focused, addressable specimen for every component in
+this list. Because these are themed ecosystem components rather than
+first-class `@kerfjs/ui` exports, the sidebar keeps them under a collapsible
+`Web Awesome` heading with category subgroups. The aggregate theme route
+remains a broad visual-regression surface, while modal, drawer, toast, media,
+and helper routes make their own behavior inspectable without opening every
+state at once.
+
+## Badge and tag guidance
+
+Use Web Awesome's stable `wa-badge` and `wa-tag` directly instead of adding
+generic Kerf wrappers around them. Their variants and appearances already read
+the semantic palette above, and importing their component modules remains
+independent and tree-shakeable.
+
+- Use `wa-badge pill` for compact status, count, or activity labels. Hot Sheet
+  2's pill-shaped ticket status treatment is the reference shape.
+- Use the default, non-pill `wa-tag` for categories, filters, and removable
+  selections. Its medium-radius rounded rectangle keeps tags distinct from
+  status badges. Handle the bubbling `wa-remove` event in the feature that owns
+  the underlying selection.
+- Keep domain components when they add domain behavior. Hot Sheet 2's
+  `StatusBadge` owns the ticket-status-to-label/icon mapping, while its
+  `TagChip` is already a small domain adapter around `wa-tag`. Those are useful
+  application components, not missing general-purpose primitives in
+  `@kerfjs/ui`.
+
+The `pill`, `variant`, `appearance`, and size APIs remain available per
+instance, and applications can override the same `--wa-*` semantic tokens when
+their domain needs a different palette.
+
+## Markdown trust boundary
+
+> **Security:** `wa-markdown` is only appropriate for trusted static Markdown.
+> Do not pass unsanitized user input or any other untrusted Markdown to it.
+
+Web Awesome sends Marked's HTML output directly into the component's light DOM
+without sanitization. Untrusted content can therefore create cross-site
+scripting vulnerabilities. Sanitize content with an appropriate, separately
+maintained HTML sanitization pipeline before it reaches the component, or use a
+renderer whose trust boundary fits the application.
+
+`wa-markdown` is also client-only: it requires the DOM at runtime, cannot render
+during SSR, and should not carry SEO-critical content. All connected instances
+share one mutable Marked instance. Calling `marked.use()` through any instance
+changes shared parser configuration; use `WaMarkdown.updateAll()` deliberately
+when every connected instance should be rerendered. Do not treat per-instance
+configuration as isolated.
+
+The UX catalog specimen intentionally contains only trusted, source-controlled
+static content and labels that constraint next to the rendered output.
+
+## Component selection guidance
+
+The catalog lists every free Web Awesome component so support can be inspected;
+listing does not make each component the preferred Kerf application pattern.
+
+- Consider `wa-popup` for low-level anchored positioning when its flip, shift,
+  or placement behavior avoids custom positioning code. Prefer the higher-level
+  Tooltip or Popover when their interaction semantics already fit.
+- For ordinary app value selection, use Kerf `Select` instead of directly
+  composing Web Awesome Dropdown, Dropdown Item, Select, or Option. Kerf Select
+  owns the compact spacing and disclosure-arrow treatment while registering
+  only its reachable Web Awesome dependencies. Use an action-menu pattern only
+  when the choices truly perform commands rather than select a value.
+- Avoid Web Awesome Button Group as a general visual pattern. Use controlled
+  `SegmentedControl` for a small exclusive choice set, including lightweight
+  view selection inside an inspector. Reserve Button Group for an exceptional
+  grouped-action requirement that is not a selection.
+- Prefer `TabBar` for reorderable or horizontally overflowing application tabs,
+  and `SegmentedControl` for compact local views, instead of Web Awesome Tab,
+  Tab Group, and Tab Panel.
+- Use Web Awesome Tree, Tree Item, Animated Image, and Comparison only for a
+  specific product requirement that needs their specialized behavior.
+- Avoid Web Awesome Zoomable Frame and Icon. Use application-owned media
+  presentation and Kerf `LucideIcon`, respectively.
+- Prefer Kerf `ResizableRegion` over Web Awesome Split Panel for Hot Sheet-style
+  application panes. It provides the persistent 1px separator, hover/focus
+  grip, accessible keyboard and pointer resizing, controlled size, collapse
+  support, and application-owned persistence. Use Split Panel only when its
+  distinct Web Awesome API is itself required.
+
+## Customization
+
+Load application overrides after the package theme, or scope them to the
+smallest subtree that needs a different identity:
+
+```css
+:root {
+  --wa-color-brand-fill-loud: #7540a8;
+  --wa-color-focus: #7540a8;
+  --wa-form-control-border-radius: .5rem;
+}
+
+.billing-workspace {
+  --wa-color-success-fill-loud: #10a86b;
+}
+```
+
+Use `.wa-light`, `.wa-dark`, and `.wa-invert` for explicit appearance scopes.
+Component-specific custom properties and documented `::part()` selectors from
+Web Awesome remain available when a semantic theme token is not sufficiently
+specific. Prefer those public hooks over shadow-tree implementation details.
+
+Kerf's `foundation.css` reads the same `--wa-*` values into `--kui-*` aliases,
+so a scoped Web Awesome override also keeps adjacent Kerf primitives coherent.

package/llms.txt

@@ -0,0 +1,22 @@
+# @kerfjs/ui
+
+Accessible, production-backed UI primitives for kerf applications.
+
+- [Package guide](./README.md)
+- [AI skill](./ai/skill.md)
+- [Component contract](./docs/component-contract.md)
+- [Web Awesome theme contract](./docs/webawesome-theme.md)
+- [Accessibility and keyboard contracts](./docs/accessibility.md)
+- [Design philosophy](./docs/design-philosophy.md)
+- [Apple HIG translation](./docs/apple-hig.md)
+- [UX catalog](./docs/ux-demo.md)
+
+The UX catalog is a category-grouped master/detail review surface with a focused route for every public visual component plus composition demos. Its collapsible ecosystem section also lists all 70 free Web Awesome 3.12 components, each with a focused themed route. Related entries use one grouped `Uses` / `Used by` selector across both sets; the shell, display preferences, and selected component share one semantic theme.
+
+Public components: `LucideIcon`, `Toolbar`, `ToolbarControlGroup`, `ToolbarText`, `SegmentedControl`, `MenuItem`, `MenuHeader`, `ResizableRegion`, `wireResizableRegions`, `AppTab`, `TabBar`, `wireTabBars`, `reorderTabs`, `PageHeader`, `LoadingSpinner`, `Select`, `StateBanner`, `EmptyState`, `DialogHeader`, and `ValueTable`. `SegmentedControl` is controlled and supports toolbar, rounded-rectangle, and pill presentations with native pressed buttons in sequential Tab order. Semantic state palettes are opinionated, Web Awesome-compatible, and overridable globally, by tone, or per instance.
+
+Import visual components from explicit JavaScript subpaths. A CSS-aware browser bundler selects generated wrappers that bring in the foundation, the component CSS, and styles for reachable UI subcomponents; unrelated CSS stays out. The root barrel and `@kerfjs/ui/unstyled` are CSS-free; use `styles.css` with the root barrel only when the complete layer is intentional. Manual CSS exports remain available for custom pipelines, and application overrides follow package styles in the cascade. `@kerfjs/ui/webawesome.css` is an optional CSS-only theme for Web Awesome's free components; it includes Web Awesome's base stylesheet, registers no elements, and remains overridable through public `--wa-*` tokens. CSS, its generated browser wrappers, and `@kerfjs/ui/select/register` are the declared side effects. `kerfjs` is an external peer. The Web Awesome peer is optional and needed for its components. `wireTabBars` includes proximity-based horizontal edge autoscroll during same-bar drag reordering.
+
+The Web Awesome theme renders Tooltip and Popover without pointer arrows by default. Restore them only when the anchor relationship needs the pointer, using `--wa-tooltip-arrow-size`, `--kui-wa-popover-arrow-size`, or one popover's public `--arrow-size`; `without-arrow` remains available for explicit local intent.
+
+Web Awesome catalog coverage means themed and inspectable, not preferred. 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. ResizableRegion carries Hot Sheet 2's 1px separator plus hover/focus grip. Use Tree/Tree Item, Animated Image, and Comparison only for a specific required behavior; avoid Zoomable Frame.

package/package.json

@@ -0,0 +1,218 @@
+{
+  "name": "@kerfjs/ui",
+  "version": "4.4.1",
+  "description": "Accessible, composable UI primitives for kerf applications.",
+  "type": "module",
+  "license": "MIT",
+  "author": "Brian Westphal <brian.westphal@bleugris.com>",
+  "homepage": "https://brianwestphal.github.io/kerf/docs/ui-package/",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/brianwestphal/kerf",
+    "directory": "ui"
+  },
+  "bugs": {
+    "url": "https://github.com/brianwestphal/kerf/issues"
+  },
+  "keywords": [
+    "kerf",
+    "kerfjs",
+    "components",
+    "design-system",
+    "accessibility"
+  ],
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "sideEffects": [
+    "**/*.css",
+    "./dist/browser/*.js",
+    "./dist/select-register.js"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./lucide-icon": {
+      "types": "./dist/lucide-icon.d.ts",
+      "browser": "./dist/browser/lucide-icon.js",
+      "import": "./dist/lucide-icon.js"
+    },
+    "./toolbar": {
+      "types": "./dist/toolbar.d.ts",
+      "browser": "./dist/browser/toolbar.js",
+      "import": "./dist/toolbar.js"
+    },
+    "./toolbar-control-group": {
+      "types": "./dist/toolbar-control-group.d.ts",
+      "browser": "./dist/browser/toolbar-control-group.js",
+      "import": "./dist/toolbar-control-group.js"
+    },
+    "./toolbar-text": {
+      "types": "./dist/toolbar-text.d.ts",
+      "browser": "./dist/browser/toolbar-text.js",
+      "import": "./dist/toolbar-text.js"
+    },
+    "./menu-item": {
+      "types": "./dist/menu-item.d.ts",
+      "browser": "./dist/browser/menu-item.js",
+      "import": "./dist/menu-item.js"
+    },
+    "./menu-header": {
+      "types": "./dist/menu-header.d.ts",
+      "browser": "./dist/browser/menu-header.js",
+      "import": "./dist/menu-header.js"
+    },
+    "./resizable-region": {
+      "types": "./dist/resizable-region.d.ts",
+      "browser": "./dist/browser/resizable-region.js",
+      "import": "./dist/resizable-region.js"
+    },
+    "./wire-resizable-regions": {
+      "types": "./dist/wire-resizable-regions.d.ts",
+      "import": "./dist/wire-resizable-regions.js"
+    },
+    "./app-tab": {
+      "types": "./dist/app-tab.d.ts",
+      "browser": "./dist/browser/app-tab.js",
+      "import": "./dist/app-tab.js"
+    },
+    "./tab-bar": {
+      "types": "./dist/tab-bar.d.ts",
+      "browser": "./dist/browser/tab-bar.js",
+      "import": "./dist/tab-bar.js"
+    },
+    "./wire-tab-bars": {
+      "types": "./dist/wire-tab-bars.d.ts",
+      "import": "./dist/wire-tab-bars.js"
+    },
+    "./page-header": {
+      "types": "./dist/page-header.d.ts",
+      "browser": "./dist/browser/page-header.js",
+      "import": "./dist/page-header.js"
+    },
+    "./loading-spinner": {
+      "types": "./dist/loading-spinner.d.ts",
+      "browser": "./dist/browser/loading-spinner.js",
+      "import": "./dist/loading-spinner.js"
+    },
+    "./select": {
+      "types": "./dist/select.d.ts",
+      "browser": "./dist/browser/select.js",
+      "import": "./dist/select.js"
+    },
+    "./segmented-control": {
+      "types": "./dist/segmented-control.d.ts",
+      "browser": "./dist/browser/segmented-control.js",
+      "import": "./dist/segmented-control.js"
+    },
+    "./select/register": {
+      "types": "./dist/select-register.d.ts",
+      "import": "./dist/select-register.js"
+    },
+    "./state-banner": {
+      "types": "./dist/state-banner.d.ts",
+      "browser": "./dist/browser/state-banner.js",
+      "import": "./dist/state-banner.js"
+    },
+    "./empty-state": {
+      "types": "./dist/empty-state.d.ts",
+      "browser": "./dist/browser/empty-state.js",
+      "import": "./dist/empty-state.js"
+    },
+    "./dialog-header": {
+      "types": "./dist/dialog-header.d.ts",
+      "browser": "./dist/browser/dialog-header.js",
+      "import": "./dist/dialog-header.js"
+    },
+    "./value-table": {
+      "types": "./dist/value-table.d.ts",
+      "browser": "./dist/browser/value-table.js",
+      "import": "./dist/value-table.js"
+    },
+    "./unstyled": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./foundation.css": "./src/foundation.css",
+    "./webawesome.css": "./src/webawesome.css",
+    "./styles.css": "./src/styles.css",
+    "./lucide-icon.css": "./src/lucide-icon.css",
+    "./toolbar.css": "./src/toolbar.css",
+    "./toolbar-control-group.css": "./src/toolbar-control-group.css",
+    "./toolbar-text.css": "./src/toolbar-text.css",
+    "./menu-item.css": "./src/menu-item.css",
+    "./menu-header.css": "./src/menu-header.css",
+    "./resizable-region.css": "./src/resizable-region.css",
+    "./app-tab.css": "./src/app-tab.css",
+    "./tab-bar.css": "./src/tab-bar.css",
+    "./page-header.css": "./src/page-header.css",
+    "./loading-spinner.css": "./src/loading-spinner.css",
+    "./select.css": "./src/select.css",
+    "./segmented-control.css": "./src/segmented-control.css",
+    "./state-banner.css": "./src/state-banner.css",
+    "./empty-state.css": "./src/empty-state.css",
+    "./dialog-header.css": "./src/dialog-header.css",
+    "./value-table.css": "./src/value-table.css",
+    "./ai/*": "./ai/*",
+    "./docs/*": "./docs/*"
+  },
+  "files": [
+    "dist",
+    "src/*.css",
+    "ai",
+    "docs",
+    "llms.txt",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build": "tsup && node ../scripts/clean-dist-output.mjs dist && node scripts/build-browser-entries.mjs",
+    "dev": "npm run build && vite --config ux-demo/vite.config.ts",
+    "demo:build": "npm run build && vite build --config ux-demo/vite.config.ts && node scripts/check-demo-bundle.mjs",
+    "demo:serve": "vite preview --config ux-demo/vite.config.ts",
+    "lint": "eslint src tests ux-demo --max-warnings 0",
+    "typecheck": "node node_modules/typescript7/bin/tsc --noEmit",
+    "test": "npm run test:unit && npm run test:bundle",
+    "test:unit": "vitest run tests/unit --coverage",
+    "test:bundle": "npm run build && vitest run tests/bundle",
+    "test:e2e": "npm run demo:build && playwright test",
+    "check": "npm run lint && npm run typecheck && npm test && npm run demo:build && npm pack --dry-run",
+    "prepublishOnly": "npm run check"
+  },
+  "peerDependencies": {
+    "@awesome.me/webawesome": "^3.12.0",
+    "kerfjs": "^4.0.0",
+    "lucide": "^1.43.0"
+  },
+  "peerDependenciesMeta": {
+    "@awesome.me/webawesome": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@awesome.me/webawesome": "3.12.0",
+    "@eslint/js": "^10.0.1",
+    "@playwright/test": "^1.63.0",
+    "@types/node": "^22.10.0",
+    "@typescript-eslint/eslint-plugin": "^8.65.0",
+    "@typescript-eslint/parser": "^8.65.0",
+    "@vitest/coverage-v8": "4.1.11",
+    "esbuild": "^0.25.0",
+    "eslint": "^10.8.0",
+    "eslint-plugin-simple-import-sort": "^12.1.1",
+    "happy-dom": "^20.9.0",
+    "lucide": "1.43.0",
+    "tsup": "^8.3.0",
+    "typescript": "^6.0.3",
+    "typescript7": "npm:typescript@^7.0.2",
+    "vite": "^7.1.0",
+    "vitest": "4.1.11"
+  }
+}

package/src/app-tab.css

@@ -0,0 +1,20 @@
+.kui-app-tab { --kui-app-tab-color: var(--kui-color-neutral-on-quiet); --kui-app-tab-hover-background: color-mix(in srgb, var(--kui-color-surface) 72%, transparent); --kui-app-tab-selected-color: var(--kui-color-brand-on-quiet); --kui-app-tab-selected-background: var(--kui-color-surface); --kui-app-tab-selected-border: color-mix(in srgb, var(--kui-color-neutral-border-normal) 80%, transparent); --kui-app-tab-drop-indicator: var(--kui-color-brand-border-normal); position: relative; display: flex; width: max-content; min-width: max-content; height: 2rem; border: 0; border-radius: var(--kui-radius-pill); color: var(--kui-app-tab-color); background: transparent; align-items: center; flex: none; }
+.kui-app-tab:hover { background: var(--kui-app-tab-hover-background); }
+.kui-app-tab[data-selected="true"] { color: var(--kui-app-tab-selected-color); background: var(--kui-app-tab-selected-background); box-shadow: var(--kui-shadow-s), inset 0 0 0 1px var(--kui-app-tab-selected-border); }
+.kui-app-tab[data-tab-dragging="true"] { opacity: .55; }
+.kui-app-tab[data-tab-drop-position]::after { position: absolute; z-index: 2; top: .2rem; bottom: .2rem; width: 2px; border-radius: var(--kui-radius-pill); background: var(--kui-app-tab-drop-indicator); content: ""; pointer-events: none; }
+.kui-app-tab[data-tab-drop-position="before"]::after { inset-inline-start: calc(var(--kui-space-2xs) * -1); }
+.kui-app-tab[data-tab-drop-position="after"]::after { inset-inline-end: calc(var(--kui-space-2xs) * -1); }
+.kui-app-tab__select { display: flex; min-width: 0; height: 100%; padding: 0 var(--kui-space-s); border: 0; appearance: none; color: inherit; background: transparent; cursor: pointer; font: inherit; align-items: center; gap: var(--kui-space-xs); text-align: start; }
+.kui-app-tab:has(.kui-app-tab__close) .kui-app-tab__select { padding-inline-start: var(--kui-space-2xs); }
+.kui-app-tab:has(.kui-app-tab__select:focus-visible) { outline: var(--kui-focus-ring); outline-offset: -2px; }
+.kui-app-tab__select:focus-visible { outline: none; }
+.kui-app-tab__close:focus-visible { border-radius: var(--kui-radius-pill); outline: var(--kui-focus-ring); outline-offset: -2px; }
+.kui-app-tab__select > svg { width: 1rem; height: 1rem; flex: none; }
+.kui-app-tab__name { overflow: hidden; font-size: var(--kui-font-xs); font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
+.kui-app-tab__trailing { display: grid; min-width: 1.275rem; min-height: 1.275rem; flex: none; place-items: center; }
+.kui-app-tab__close { display: grid; width: 1.275rem; height: 1.275rem; margin-inline-start: var(--kui-space-xs); padding: 0; border: 0; appearance: none; color: var(--kui-color-neutral-on-quiet); background: transparent; cursor: pointer; flex: none; place-items: center; }
+.kui-app-tab__close:hover { color: var(--kui-color-text); }
+.kui-app-tab__close svg { width: .6375rem; height: .6375rem; }
+@media (hover: hover) and (pointer: fine) { .kui-app-tab__close { opacity: 0; pointer-events: none; transition: opacity .12s ease; } .kui-app-tab:hover .kui-app-tab__close, .kui-app-tab:focus-within .kui-app-tab__close { opacity: 1; pointer-events: auto; } }
+@media (prefers-reduced-motion: reduce) { .kui-app-tab__close { transition: none; } }

package/src/dialog-header.css

@@ -0,0 +1,9 @@
+.kui-dialog-header { --kui-dialog-header-border: var(--kui-color-border); --kui-dialog-header-icon-background: var(--kui-color-brand-fill-quiet); --kui-dialog-header-icon-foreground: var(--kui-color-brand-on-quiet); display: grid; min-height: 4.9rem; padding: var(--kui-space-m) var(--kui-space-l); box-sizing: border-box; border-bottom: 1px solid var(--kui-dialog-header-border); grid-template-columns: 2rem minmax(0, 1fr) auto; align-items: start; gap: var(--kui-space-m); }
+.kui-dialog-header[data-has-icon="false"] { grid-template-columns: minmax(0, 1fr) auto; }
+.kui-dialog-header__icon { display: grid; width: 2rem; height: 2rem; border-radius: var(--kui-radius-circle); color: var(--kui-dialog-header-icon-foreground); background: var(--kui-dialog-header-icon-background); place-items: center; }
+.kui-dialog-header__icon svg { width: 1.25rem; height: 1.25rem; }
+.kui-dialog-header__copy { min-width: 0; }
+.kui-dialog-header h2, .kui-dialog-header p { margin: 0; }
+.kui-dialog-header h2 { color: var(--kui-color-text); font-size: var(--kui-font-l); line-height: 1.2; }
+.kui-dialog-header p { margin-block-start: var(--kui-space-2xs); color: var(--kui-color-text-quiet); }
+.kui-dialog-header__actions { display: flex; align-items: center; gap: var(--kui-space-xs); }

package/src/empty-state.css

@@ -0,0 +1,6 @@
+.kui-empty-state { --kui-empty-state-foreground: var(--kui-color-neutral-on-quiet); --kui-empty-state-title: var(--kui-color-text); display: grid; width: min(100%, 28rem); min-height: 12rem; margin: auto; padding: var(--kui-space-xl); box-sizing: border-box; color: var(--kui-empty-state-foreground); place-items: center; place-content: center; gap: var(--kui-space-xs); text-align: center; }
+.kui-empty-state__icon { display: grid; min-width: 2rem; min-height: 2rem; margin-block-end: var(--kui-space-xs); color: inherit; place-items: center; }
+.kui-empty-state__icon svg { width: 2rem; height: 2rem; stroke-width: 1.5; }
+.kui-empty-state strong { color: var(--kui-empty-state-title); font-size: var(--kui-font-l); font-weight: 650; }
+.kui-empty-state > span { max-width: 24rem; font-size: var(--kui-font-s); line-height: 1.45; }
+.kui-empty-state__action { margin-block-start: var(--kui-space-xs); }