@signal9/era-ui 33.0.1 → 34.0.1

package/skills/era-ui/SKILL.md

@@ -0,0 +1,37 @@
+---
+name: era-ui
+description: Build or review Svelte 5 interfaces that use @signal9/era-ui. Use for component imports, responsive composition, density and surface axes, concentric geometry, material variants, press behavior, motion, typography, accessibility, or choosing Era's public CSS utilities.
+---
+
+# Build with Era UI
+
+Use Era's semantic component and class APIs as a coherent system. Do not reproduce component chrome or freeze an axis-responsive value in consumer code.
+
+## Start with the public boundary
+
+Import each primitive or composition from its explicit package subpath. The package root is the system layer only.
+
+```svelte
+<script lang="ts">
+	import { Button } from '@signal9/era-ui/button';
+	import * as Select from '@signal9/era-ui/select';
+	import { Conversation } from '@signal9/era-ui/ai/conversation';
+	import { cn } from '@signal9/era-ui';
+</script>
+```
+
+Import `@signal9/era-ui/css` once in the application. Prefer named utilities such as `tier-control`, `gap-gutter`, `p-card`, `material-popover`, and `era-text-trim`. Use a `--era-*` custom property only when no named utility expresses the requirement.
+
+## Preserve the system axes
+
+Era has five orthogonal axes: density (`data-mode`), surface (`data-surface`), corners (`data-corners`), font (`data-font`), and motion (`data-motion`). Root values establish application defaults; supported portalling components relay the nearest subtree values to their content. Subtree overrides are therefore valid for both ordinary and portalled descendants.
+
+Use `ModeProvider` when state should drive axes. Use data attributes directly for static regions. Never branch component markup on a material such as `glass` or `bevel`; semantic recipes resolve the material.
+
+## Load only the relevant reference
+
+- [Geometry](references/geometry.md): tiers, even gaps, concentricity, and padding.
+- [Materials and motion](references/materials.md): surface recipes, press travel, state semantics, and motion.
+- [Composition and review](references/composition.md): component topology, consumer classes, text, and the final review checklist.
+
+The installed package exposes its machine-readable utility reference at `@signal9/era-ui/utilities.json`; the documentation site renders the same generated data for people.

package/skills/era-ui/references/composition.md

@@ -0,0 +1,19 @@
+# Composition and review
+
+Primitive subpaths export either a named component or a namespace of parts. Follow the installed type surface instead of importing source files or relying on an aggregate barrel. AI compositions live under `@signal9/era-ui/ai/<part>`; OS compositions live at `@signal9/era-ui/os`.
+
+Consumer `class` values merge last, so use them for layout and intentional semantic overrides. Do not copy a component's internal variant recipe into application code.
+
+For control text beside an icon, use `era-text-trim`; use `era-text-trim-caps` for all-caps labels. A single glyph should retain the matching square minimum. Use `text-body`, `text-fg`, `text-bright`, and `text-muted` for hierarchy that remains axis-aware.
+
+## Review checklist
+
+- Every import is a documented explicit package subpath.
+- Geometry uses a tier or named optical surface spacing rather than raw dimensions.
+- Sibling gaps and edge padding agree.
+- Nested bounded corners use the tier relationship rather than independent radii.
+- Surface styling uses semantic material/state recipes.
+- Transient, latched, disabled, busy, and audience meanings do not share a visual channel.
+- Pressed content moves with its face without moving surrounding layout.
+- Motion respects the motion axis and reduced-motion preferences.
+- Interactive markup remains valid, keyboard reachable, and labelled.

package/skills/era-ui/references/geometry.md

@@ -0,0 +1,24 @@
+# Geometry
+
+Every bounded size derives from the density axis. Use role names rather than guessed dimensions:
+
+| Tier      | Typical role                       |
+| --------- | ---------------------------------- |
+| `icon`    | glyphs and switch thumbs           |
+| `pill`    | badges nested inside controls      |
+| `chip`    | standalone chips and switch tracks |
+| `control` | buttons, inputs, and triggers      |
+| `bar`     | bounded headers and rails          |
+
+Use `tier-icon`, `tier-pill`, `tier-chip`, `tier-control`, or `tier-bar` when height and radius belong together. Width and minimum helpers use the same role names, such as `size-icon` and `min-w-control`.
+
+## Two invariants
+
+1. Edge padding equals the gap between siblings. `p-gutter` and `gap-gutter` are the common pair.
+2. For nested bounded tiers, `outer radius − inner radius = inset`. The tier ladder and named pair insets encode this identity; do not tune radii independently.
+
+An unbounded card or panel has no height tier. Use optical padding (`p-panel`, `p-card`, or `p-content`) and its semantic surface radius. Bounded controls use geometric insets and tier geometry.
+
+Use `rounded-*` only when a corner must be expressed independently. Stock fixed radii such as `rounded-md` do not respond to Era's corner axis.
+
+For a genuinely custom derived measurement with no named utility, calculate from `--era-sp` so density still propagates. Treat that token path as an escape hatch, not the default spelling for named classes.

package/skills/era-ui/references/materials.md

@@ -0,0 +1,15 @@
+# Materials and motion
+
+Choose semantic material recipes, not surface-specific class branches:
+
+- `material-popover` for transient floating chrome.
+- `material-panel` for persistent floating chrome.
+- `shadow` for a resting raised face, `shadow-lg` for floating chrome, `shadow-well` for recessed content, and `shadow-pressed` for a latched or pressed face.
+- `bg-highlight` with `shadow-highlight` for transient hover or focus feedback.
+- `bg-hover` for held, selected, or current state.
+
+The `pressable` recipe owns physical travel through `--era-press-sink-x` and `--era-press-sink-y`. Mark the direct content plane as the component implementation expects so bevel content travels with its face; do not translate the outer layout box or add consumer-side active offsets.
+
+Use the motion-aware `transition-*`, `duration-base`, and `ease-base` utilities. They respond to `data-motion="instant"` and reduced-motion preferences. Do not hardcode a duration or easing curve for ordinary interaction feedback.
+
+Opacity and flattening already communicate disabled or busy state. Do not reuse those channels to communicate a different concept such as audience or visibility.

package/dist/ui/index.d.ts

@@ -1,67 +0,0 @@
-export * as Accordion from './accordion/index.js';
-export * as AlertDialog from './alert-dialog/index.js';
-export { AspectRatio } from './aspect-ratio/index.js';
-export * as Avatar from './avatar/index.js';
-export { Badge } from './badge/index.js';
-export * as Calendar from './calendar/index.js';
-export { Chip } from './chip/index.js';
-export { CodeBlock } from './code-block/index.js';
-export { CopyButton } from './copy-button/index.js';
-export { Cycle, type CycleOption } from './cycle/index.js';
-export * as Checkbox from './checkbox/index.js';
-export * as Combobox from './combobox/index.js';
-export * as Collapsible from './collapsible/index.js';
-export * as Command from './command/index.js';
-export * from './command-bar/index.js';
-export * as Step from './step/index.js';
-export * as ContextMenu from './context-menu/index.js';
-export * as DateField from './date-field/index.js';
-export * as DatePicker from './date-picker/index.js';
-export * as DateRangeField from './date-range-field/index.js';
-export * as DateRangePicker from './date-range-picker/index.js';
-export * as Dialog from './dialog/index.js';
-export * as DropdownMenu from './dropdown-menu/index.js';
-export { FileUpload } from './file-upload/index.js';
-export * as Menubar from './menubar/index.js';
-export * as Nav from './nav/index.js';
-export * as Menu from './menu/index.js';
-export { Meter } from './meter/index.js';
-export { Progress } from './progress/index.js';
-export * as RadioGroup from './radio-group/index.js';
-export * as RangeCalendar from './range-calendar/index.js';
-export * as RatingGroup from './rating-group/index.js';
-export * as ScrollArea from './scroll-area/index.js';
-export * as Select from './select/index.js';
-export * as Sheet from './sheet/index.js';
-export * as Slider from './slider/index.js';
-export * as Table from './table/index.js';
-export * as Tabs from './tabs/index.js';
-export * as TimeField from './time-field/index.js';
-export * as TimeRangeField from './time-range-field/index.js';
-export * as Tooltip from './tooltip/index.js';
-export * as ToggleGroup from './toggle-group/index.js';
-export * as Timeline from './timeline/index.js';
-export * as Tree from './tree/index.js';
-export * as Toolbar from './toolbar/index.js';
-export { Bar } from './bar/index.js';
-export { Button } from './button/index.js';
-export { ButtonGroup } from './button-group/index.js';
-export { Card } from './card/index.js';
-export { Input, Textarea } from './input/index.js';
-export { KV } from './kv/index.js';
-export { Label } from './label/index.js';
-export * as LinkPreview from './link-preview/index.js';
-export { Logo } from './logo/index.js';
-export type { LogoPalette, LogoState, LogoParams } from './logo/index.js';
-export { Mode } from './mode/index.js';
-export { Pane, Root as PaneRoot, Handle as PaneHandle, Content as PaneContent, Close as PaneClose, Tabs as PaneTabs, TabList as PaneTabList, Tab as PaneTab, TabPanel as PaneTabPanel } from './pane/index.js';
-export * as Pagination from './pagination/index.js';
-export * as NavigationMenu from './navigation-menu/index.js';
-export * as Popover from './popover/index.js';
-export * as PinInput from './pin-input/index.js';
-export { modes, defaultMode, type Mode as DensityMode, surfaces, defaultSurface, surfaceRegistry, type Surface, type SurfaceMeta, corners, defaultCorners, type Corners, fonts, defaultFont, type Font, motions, defaultMotion, type Motion, axisRegistry, axisKeys, type AxisKey, type AxisMeta, type AxisLevel } from './provider/index.js';
-export { Separator } from './separator/index.js';
-export { Skeleton } from './skeleton/index.js';
-export { Switch } from './switch/index.js';
-export { Toggle } from './toggle/index.js';
-export { VideoPlayer } from './video-player/index.js';

package/dist/ui/index.js

@@ -1,70 +0,0 @@
-export * as Accordion from './accordion/index.js';
-export * as AlertDialog from './alert-dialog/index.js';
-export { AspectRatio } from './aspect-ratio/index.js';
-export * as Avatar from './avatar/index.js';
-export { Badge } from './badge/index.js';
-export * as Calendar from './calendar/index.js';
-export { Chip } from './chip/index.js';
-export { CodeBlock } from './code-block/index.js';
-export { CopyButton } from './copy-button/index.js';
-export { Cycle } from './cycle/index.js';
-export * as Checkbox from './checkbox/index.js';
-export * as Combobox from './combobox/index.js';
-export * as Collapsible from './collapsible/index.js';
-export * as Command from './command/index.js';
-export * from './command-bar/index.js';
-export * as Step from './step/index.js';
-export * as ContextMenu from './context-menu/index.js';
-export * as DateField from './date-field/index.js';
-export * as DatePicker from './date-picker/index.js';
-export * as DateRangeField from './date-range-field/index.js';
-export * as DateRangePicker from './date-range-picker/index.js';
-export * as Dialog from './dialog/index.js';
-export * as DropdownMenu from './dropdown-menu/index.js';
-export { FileUpload } from './file-upload/index.js';
-export * as Menubar from './menubar/index.js';
-export * as Nav from './nav/index.js';
-export * as Menu from './menu/index.js';
-export { Meter } from './meter/index.js';
-export { Progress } from './progress/index.js';
-export * as RadioGroup from './radio-group/index.js';
-export * as RangeCalendar from './range-calendar/index.js';
-export * as RatingGroup from './rating-group/index.js';
-export * as ScrollArea from './scroll-area/index.js';
-export * as Select from './select/index.js';
-export * as Sheet from './sheet/index.js';
-export * as Slider from './slider/index.js';
-export * as Table from './table/index.js';
-export * as Tabs from './tabs/index.js';
-export * as TimeField from './time-field/index.js';
-export * as TimeRangeField from './time-range-field/index.js';
-export * as Tooltip from './tooltip/index.js';
-export * as ToggleGroup from './toggle-group/index.js';
-export * as Timeline from './timeline/index.js';
-export * as Tree from './tree/index.js';
-export * as Toolbar from './toolbar/index.js';
-export { Bar } from './bar/index.js';
-export { Button } from './button/index.js';
-export { ButtonGroup } from './button-group/index.js';
-export { Card } from './card/index.js';
-export { Input, Textarea } from './input/index.js';
-export { KV } from './kv/index.js';
-export { Label } from './label/index.js';
-export * as LinkPreview from './link-preview/index.js';
-export { Logo } from './logo/index.js';
-export { Mode } from './mode/index.js';
-export { Pane, Root as PaneRoot, Handle as PaneHandle, Content as PaneContent, Close as PaneClose, Tabs as PaneTabs, TabList as PaneTabList, Tab as PaneTab, TabPanel as PaneTabPanel } from './pane/index.js';
-export * as Pagination from './pagination/index.js';
-export * as NavigationMenu from './navigation-menu/index.js';
-export * as Popover from './popover/index.js';
-export * as PinInput from './pin-input/index.js';
-// `Mode` as a top-level identifier is reserved for the component (above), so
-// the density-union type can't be re-exported here under its own name — it is
-// available (under its original name) from the `@signal9/era-ui/provider`
-// subpath, or aliased as `DensityMode` below. Everything else flows through.
-export { modes, defaultMode, surfaces, defaultSurface, surfaceRegistry, corners, defaultCorners, fonts, defaultFont, motions, defaultMotion, axisRegistry, axisKeys } from './provider/index.js';
-export { Separator } from './separator/index.js';
-export { Skeleton } from './skeleton/index.js';
-export { Switch } from './switch/index.js';
-export { Toggle } from './toggle/index.js';
-export { VideoPlayer } from './video-player/index.js';

package/skill/SKILL.md

@@ -1,225 +0,0 @@
----
-name: era-ui
-description: |
-  Design-system methodology for building UIs with @signal9/era-ui (Svelte 5 +
-  Tailwind v4). Use when: writing or reviewing any component, layout, or page
-  in a project that uses era-ui — sizing controls, spacing/padding, radii,
-  surfaces, motion, or composing library components. Covers: the named class
-  API, the sp-derived tier ladder, the even-gap and concentricity laws,
-  geometric vs optical padding, surface/shadow rules, motion, and the
-  mistakes agents make.
-version: 1.1.0
----
-
-# Building with era-ui
-
-Every size, gap, and radius derives from ONE number per density mode: `sp`
-(8/10/12/16 for dense/balanced/spacious/touch). Never write a hardcoded px,
-rem, radius, duration, or color — there is a class for everything, and the
-whole system re-derives per element, so any `data-*` axis override on any
-subtree just works.
-
-**Write named classes, not var classes.** Era's public styling API is pure
-Tailwind-looking utilities: `tier-control px-gutter shadow`, never
-`h-(--era-h-control)`-style var spellings. Where Tailwind already names the concept
-era overloads it (bare `shadow` is the
-surface chrome, `transition-colors` rides the motion axis); where it doesn't,
-era registers its own (`tier-control`, `gap-gutter`, `p-card`). The `--era-*` custom
-properties remain public as the escape hatch for the few things without a
-name — noted inline below — but reaching for one when a named class exists is
-a review finding.
-
-## The five axes (data attributes, all orthogonal)
-
-| Axis    | Attribute      | Values                                |
-| ------- | -------------- | ------------------------------------- |
-| Density | `data-mode`    | `dense` `balanced` `spacious` `touch` |
-| Surface | `data-surface` | `flat` `glass` `bevel`                |
-| Corners | `data-corners` | `rounded` `square`                    |
-| Font    | `data-font`    | `mono` (default) `sans` `serif`       |
-| Motion  | `data-motion`  | `instant` `normal` `extra`            |
-
-**SET EVERY AXIS ON `<html>`.** A subtree override works for everything
-rendered inside that subtree — and does NOT reach anything that portals.
-Dialog, AlertDialog, Sheet, DropdownMenu, ContextMenu, Menubar, Tooltip and
-LinkPreview render at `document.body`, so they take the ROOT's axes, not the
-ones on the wrapper their trigger sits in.
-
-Measured: a `<Card>` inside a `data-surface="bevel"` div resolves to bevel and
-gets the chisel; a `<Dialog.Content>` opened from that same div resolves to
-`flat` and gets flat's chrome. Two surfaces in one screen, and nothing errors.
-
-So a subtree override is for a REGION you want to look different — a settings
-panel that is deliberately denser. If you want the whole app on bevel, set it
-at the root and never on a wrapper. The same applies to `data-mode`: a
-`data-mode="spacious"` section will open balanced menus if the root is
-balanced.
-
-A monospace root needs `html { font-size: 16px }` (browser quirk: monospace
-roots default to ~13px, silently shrinking every rem-derived token).
-
-## The tier ladder
-
-Named for the ROLE each rung plays, never for its size — a scale whose names
-can invert is a scale nobody reads correctly (this library once shipped an
-`xxs` that was bigger than its `xs`).
-
-| Tier      | Geometry       | Width/min-width helpers      | Use for                              |
-| --------- | -------------- | ---------------------------- | ------------------------------------ |
-| `icon`    | `tier-icon`    | `w-icon`, `min-w-icon`       | a lucide glyph, switch thumbs        |
-| `pill`    | `tier-pill`    | `w-pill`, `min-w-pill`       | a badge/chip nested INSIDE a control |
-| `chip`    | `tier-chip`    | `w-chip`, `min-w-chip`       | standalone pills, switch tracks, KV  |
-| `control` | `tier-control` | `w-control`, `min-w-control` | buttons, inputs, selects, triggers   |
-| `bar`     | `tier-bar`     | `w-bar`, `min-w-bar`         | bars and bounded headers             |
-
-`min-h-*`, `min-w-*` and `w-*` exist across the same rungs. There is no escape
-hatch here any more: `min-w-control` is a real class, because role names collide
-with nothing in Tailwind's container scale the way `min-w-md` did.
-
-`rounded-sm/md/lg` are TAILWIND's, not era's — era stopped shadowing them when
-the ladder was renamed. Reaching for one gets a fixed radius that ignores the
-corners axis.
-
-## The two laws
-
-1. **Even gaps** — the padding between a container's edge and its children
-   must equal the gap between the children, on every side. `gap-gutter`
-   (= sp/2) is the universal inter-element gap, and `p-gutter` (+ `px-`/`py-`)
-   is the matching gutter a scrollable list or rail owes its rows.
-2. **Concentricity** — `rd-T − rd-U = (h-T − h-U)/2` for every tier pair.
-   `tier-T` binds height and radius so they cannot drift. A bounded container
-   names the ACTUAL inner tier and owns the matching inset; nested corners then
-   share a center automatically. The concentric insets are advanced enough to stay
-   token-form, and each is named for the pair it centres:
-   `--era-icon-inset-chip` (an icon inside a chip, = sp/2),
-   `--era-icon-inset-pill`, `--era-pill-inset-control`, `--era-pill-inset-chip`,
-   `--era-icon-inset-control`, `--era-icon-inset-bar`, `--era-chip-inset-control`,
-   `--era-chip-inset-bar`.
-
-**The boundary**: an unbounded surface has no height tier. Its exposed corner is
-either optical or derives OUTWARD from a declared corner-bearing child. Never
-derive a bounded row's radius inward from an ancestor; that makes the row's
-relationship with its own badge or chip depend on unrelated outer chrome.
-
-## Padding: geometric vs optical
-
-- **Bounded (tier-height) containers** — bars, triggers, pills: geometric.
-  Side padding `px-gutter` (sp/2 — one token, not a per-tier family);
-  text-symmetric vertical centering `p`/`px`/`py-inset-{pill,chip,control}` =
-  (h-T − text)/2; pill side breathing `px-pill`/`px-chip` = (h-T − 0.6·text)/2
-  (text wants ~2× more horizontal than vertical padding); text-field side
-  padding `px-field`.
-- **Unbounded containers** — optical: `p-panel` (compact shells), `p-card`
-  (cards, dialogs, popovers), `p-content` (full content panels). Super-linear
-  across modes so whitespace keeps pace with growing controls while text
-  stays 14px. Never pad a card with `px-*` or ad-hoc `calc`.
-
-## Surfaces and shadows
-
-- Depth is **shadow, not border**: raised chrome takes bare `shadow`;
-  floating panels take `shadow-lg`; recessed content containers (inputs,
-  tracks, wells) take `shadow-well`; pressed/latched faces take
-  `shadow-pressed`. On press, bevel sinks the CONTENT via
-  `--era-press-sink-x`/`-y` while the box holds still.
-- **Transient vs latched fills**: hover/focus/highlighted feedback uses
-  `bg-highlight` + `shadow-highlight` (surface-owned; translucent on glass).
-  Held state (toggle on, current tab, active button) uses opaque `bg-hover`.
-  Never swap.
-- Panels: use `material-popover` for transient floating chrome and
-  `material-panel` for persistent floating chrome. These atomically bind fill,
-  relief, and backdrop without naming flat/glass/bevel. Use `surface-backdrop`
-  only when a custom surface must choose its own fill and relief. Modal scrims
-  use `bg-overlay`. Menu panels pad with `p-menu` and their rows take
-  `rounded-menu-item` so the row highlight stays concentric inside the frame.
-
-## Motion
-
-The bare `transition-*` utilities default to the motion axis — `transition-colors`
-alone is on-design: 0s at `instant` (also forced by reduced-motion), longer at
-`extra` with a gentle overshoot. Name the axis explicitly with `ease-base` /
-`duration-base` when overriding; never `duration-150` or a literal bezier.
-Deriving compound timings (shimmer loops, cursor pulses) as multiples of
-`--era-duration` makes them motion-axis-aware for free.
-
-## Text
-
-- `text-body` for control/body text (density-aware size); `text-fg` default,
-  `text-bright` emphasis, `text-muted` secondary.
-- Single-glyph elements carry a min-width equal to their tier height (a lone
-  character renders square, never a skinny pill) — `min-w-control`, see
-  the ladder note.
-- Single-line control text next to icons carries `era-text-trim`
-  (`line-height: 1` + `text-box: trim-both ex alphabetic`) — flexbox centers
-  the line box, not the ink; the utility centers the x-height band and holds
-  alignment to <0.5px across fonts. `era-text-trim-caps` for ALL-CAPS strings.
-  Never a translateY nudge, never `cap alphabetic`/`cap text` for mixed case.
-- Fonts: the library's default mono stack (ui-monospace → SF Mono → Menlo →
-  Consolas → Liberation Mono) is the reference for all text-metric guarantees
-  (ink centering, pill paddings, square floors). Overriding `--font-mono` is
-  supported, but re-check control-text alignment with your font — metrics
-  move with the face.
-- `font-mono` is a display-token convention (Badge, Chip, KV, code), not a
-  universal rule.
-- Headings balance and prose wraps pretty automatically — don't re-add
-  `text-balance`/`text-pretty` except on non-semantic prose elements.
-
-## CSS utilities (classes, not components)
-
-Not everything era exposes is a component — these ride along with the stylesheet
-and need no import. Reach for one before hand-rolling the same styling or bending
-a component into the role. Full reference (including every named scale above):
-`/utilities.md`; machine-readable list: `/utilities.json` (or
-`@signal9/era-ui/utilities.json`).
-
-| Class                | Use it for                                                                                                             |
-| -------------------- | ---------------------------------------------------------------------------------------------------------------------- |
-| `era-link`           | inline text link in body copy/prose — NOT `Button variant="link"` (that's a control) and never a hand-rolled underline |
-| `era-interactive`    | the focus/disabled recipe on a custom control (every era wrapper carries it)                                           |
-| `era-text-trim`      | ink-centering single-line control text beside an icon; fixed-height elements only                                      |
-| `era-text-trim-caps` | the same for ALL-CAPS strings (kbd hints, acronym badges)                                                              |
-| `era-shimmer`        | a "working…" / streaming label — motion-aware, dies at `instant` and under reduced-motion                              |
-| `scrollbar-none`     | an overflowing strip that scrolls with no visible bar (ScrollArea is for when the bar IS the design)                   |
-| `material-popover`   | complete transient floating material: raised fill, floating relief, and surface-owned backdrop                         |
-| `material-panel`     | complete persistent floating material: resting fill, floating relief, and surface-owned backdrop                       |
-| `surface-backdrop`   | backdrop treatment only, for a custom surface whose fill and relief are deliberately separate                          |
-| `pressable`          | physical pressed face; moves its marked direct content plane by the surface-owned travel                               |
-
-## Composing the library
-
-One entry point per component — nothing re-exports them together, so an import
-can never pull in a component you did not ask for. The ROOT is the system layer
-(`cn`, `tv`, the axis registry, `ModeProvider`) and holds no components.
-
-```svelte
-<script lang="ts">
-	import { Button } from '@signal9/era-ui/button';
-	import { Badge } from '@signal9/era-ui/badge';
-	import * as Select from '@signal9/era-ui/select'; // namespaced parts: Select.Root…
-	import { Desktop } from '@signal9/era-ui/os';
-	import { Conversation } from '@signal9/era-ui/ai/conversation';
-
-	import { cn } from '@signal9/era-ui'; // the root: system only
-</script>
-```
-
-- `ui` primitives are minimal bits-ui wrappers — all bits props/snippets pass
-  through; style via `class` (merged with tailwind-merge, consumer wins — the
-  named classes conflict-resolve against internals, so `class="h-bar"` on a
-  control-tier control just works).
-- `@signal9/era-ui/os`: WindowManager + workspaces, Desktop, Pane, Taskbar
-  (built-in command bar), Toaster. `@signal9/era-ui/ai/<part>`: Conversation,
-  Message, Response, PromptInput, Tool/Reasoning/Task over the Step primitive.
-- List-item keyboard highlight is `data-[highlighted]:bg-hover` — never
-  `hover:text-bright` on items.
-
-## Review checklist (the mistakes to catch)
-
-1. Hardcoded px/rem/radius/duration/color → replace with the named class.
-2. Radius chosen by bulk instead of corner region.
-3. Unequal edge padding vs inner gap at any nesting level.
-4. `px-*`/geometric padding on an unbounded container (or `p-card` on a pill).
-5. `bg-hover` used for hover feedback, or `bg-highlight` for latched state.
-6. Icon not `size-icon`; single glyph without the `min-w-*` square floor.
-7. A `-(--era-*)` var class where a named class exists (`h-(--era-h-control)` →
-   `h-control`); if the var form is genuinely needed, always the paren shorthand —
-   never `x-[var(--era-y)]`.