@signal9/era-ui 32.0.0 → 33.0.0

package/dist/generated-docs/llms.txt

@@ -1,138 +0,0 @@
-# era-ui
-
-> A Svelte 5 + Bits UI component library. Every surface — heights, paddings, radii, gaps — derives from a single spacing atom, so density is a one-attribute override at any scope.
-
-## Sizing philosophy — read this before writing markup
-
-Every measurement in era derives from one atom (`--era-sp`) through a fixed ladder. You never pick a number; you pick a TIER, and the number follows from the density axis. Markup that hardcodes `h-[34px]`, `text-[13px]`, `p-2` or `gap-1.5` is wrong even when it looks right at the default density — it stops tracking the axis the moment a subtree re-tiers.
-
-**1. Height comes from the tier ladder, never from a pixel value.**
-`h-icon` (icon, 14px @dense) · `h-pill` (nested pill, 18) · `h-chip` (standalone pill, 22) · `h-control` (control/row, 24) · `h-bar` (bar/header, 32). A square is `size-*` on the same ladder; `size-icon` IS the icon size beside body text.
-
-**2. Padding is geometric or optical — the container tells you which.**
-A container with a BOUNDED tier height (bar, row, trigger, pill) takes geometric padding: `px-inset-control` / `px-gutter` / `px-chip`, all derived from `(tier − text)/2`. A container with UNBOUNDED height (card, dialog, panel, page section) takes optical padding: `p-panel` · `p-card` · `p-content`, which grow super-linearly so whitespace keeps pace as controls loosen. Never pad a card with a tier inset, and never pad a row with `p-card`.
-
-**3. The even-gap law.** Inside any container, `(container_height − child_height) / 2` must equal the gap on ALL four sides. A `h-pill` control in a `h-control` bar sits on a 3px wall at dense — so the bar's padding AND the gap between its children are that same value. `gap-gutter` / `p-gutter` is the standard inter-element gap (sp/2); the concentric insets (`p-inset-*`) are the text-symmetric ones.
-
-The same law in its simplest form, for containers with no tier: **a box pads its content equally at top and bottom.** Horizontal asymmetry is often deliberate (a bar's leading side sits at the text inset while its trailing side keeps the concentric wall); vertical asymmetry is a bug — nothing should sit closer to its top edge than its bottom, and era audits for it.
-
-**4. Radius follows the corner REGION's tier, not the box's size.**
-`rounded-icon · rounded-pill · rounded-chip · rounded-control · rounded-bar` walk the same ladder as the heights, and the ladder is built so that `rd_outer − rd_inner` equals the concentric gap — nested corners then share a centre of curvature automatically. A big panel whose corner is formed by an `h-control` bar takes `rounded-control`, not `rounded-bar`. Never hardcode a radius: `data-corners="square"` collapses the tokens to 0 and a literal value would survive it.
-
-**5. Single-line control text carries `era-text-trim`; wrapping text carries `leading-body`.**
-Flexbox centres the LINE BOX, not the ink, and misses by up to ~2px. `era-text-trim` fixes it — on FIXED-HEIGHT, NON-EDITABLE elements only. Two hard prohibitions, both of which produce silently chopped or mis-centred glyphs:
-- NEVER on an `<input>`/`<textarea>`/`<select>` (the UA clips to the trimmed inner editor box, so typed text loses its ascenders — a "d" renders as an "o"). A tier-height field centres its own text; if you need the optical lift, that is `era-ink-center`.
-- NEVER on the same element as `truncate` or any overflow clip. Put the trim on the fixed-height ROW and let the truncating CHILD centre inside it via `items-center`. (era guards this pairing so it degrades to a no-op instead of chopped text, but the row/child split is the correct authoring.)
-
-Text that WRAPS is the opposite regime: it needs leading, so it carries `leading-body` (never a trim). `era-text-trim-caps` is for ALL-CAPS strings only — on mixed case it reads high.
-
-**6. Type size is `text-body`.** It is the density-derived body/control size (12px at dense, 14px above). Reach for a Tailwind type step (`text-sm`, `text-xs`) only for genuine display type, never for control or body text.
-
-**7. Colour comes from semantic tokens, not the ramp.** `text-fg` (controls/labels) · `text-bright` (emphasis, headings) · `text-muted` (body copy) · `text-destructive` / `-success` / `-warning`. Fills: `bg-hover` for a latched ROW, `bg-fill` for a standing pill, `bg-highlight` for transient hover. These compose across themes; a raw scale step does not.
-
-**Nesting a pill in a card.** A pill at a card's corner is NOT governed by the concentric identity — that law needs a height term and a card has no tier. The card pads optically, the pill keeps its own tier radius; do not hand-tune padding to chase the corner. If a container genuinely IS tier-height chrome (a bar, a row, a trigger) then it is bounded and the concentric rule applies in full.
-
-**Verifying your own output.** era ships a runtime audit that measures these laws against rendered DOM — tier conformance, even gaps, concentric radii, chopped glyphs, wrapping text at control leading. If you are generating markup, render it and run the audit rather than eyeballing: it is the same instrument the library's own test suite asserts against.
-
-Full derivations: `{{ORIGIN}}/spacing.md` (the ladder and every token), `{{ORIGIN}}/text.md` (type and trim), `{{ORIGIN}}/utilities.md` (every class, what it emits, when to use it).
-
-## Using the library
-
-This package is published to two registries under two names: `@signal9/era-ui` on npm (used throughout these docs) and `@sig-nine/era-ui` on GitHub Packages, where the scope must match the repo owner. Same code, same versions — pick the one your registry serves and keep the scope consistent.
-
-**One entry point per component.** There is no barrel that re-exports everything — importing a component can never drag in another one, or another one's dependencies.
-
-```ts
-import { Button } from "@signal9/era-ui/button";
-import * as Select from "@signal9/era-ui/select";
-import * as Table from "@signal9/era-ui/table";
-
-// The root is the SYSTEM layer only: cn/tv, keybindings, the axis
-// registry, and Mode. It imports no component.
-import { cn, ModeProvider } from "@signal9/era-ui";
-
-import "@signal9/era-ui/styles";  // source CSS, scanned by your Tailwind
-```
-
-The path is always the component's own kebab-case name — `/button`, `/dropdown-menu`, `/date-range-picker` — and the other layers are namespaced: `/ai` and `/ai/<part>`, `/apps/<app>`, `/os`, `/audit`.
-
-Named exports wrap a single primitive (`Button`, `Badge`, `Chip`, `Input`, …). Namespace exports compose primitives via sub-components (`Table.Root`, `Table.Row`, `Select.Trigger`, `Dialog.Content`, …). Every wrapper forwards unknown props to its underlying element or bits-ui primitive, so standard HTML attributes (`class`, `style`, event handlers, `aria-*`, `data-*`) work without ceremony.
-
-### Stylesheets
-
-`@signal9/era-ui/styles` is the source CSS — import it once and your own Tailwind build scans era's components and emits only the utilities they use. `@signal9/era-ui/css` is the prebuilt alternative for a project without Tailwind. Three more are opt-in, each single-purpose: `/styles/video-player` (vidstack's vendor CSS, needed only with `VideoPlayer`), `/styles/prose` (document typography for a TipTap editor — put `era-notes-prose` on your editor element; `NoteEditor` imports it already), and `/styles/themes` (the raw theme tokens).
-
-### Optional peers
-
-era depends on five packages. Anything needed by ONE component is an optional peer you install only if you import that component: `vidstack` (VideoPlayer), `@neodrag/svelte` (Pane, and the `/os` shell), `marked` + `dompurify` (`/ai/response`), and the tiptap set (`/apps/notes`).
-
-## Scoped overrides
-
-Five orthogonal axes are exposed as HTML attributes on any ancestor. The entire subtree re-tiers through CSS inheritance — no JS, no context provider.
-
-- `data-mode`: **dense** (default) · balanced · spacious · touch — adjusts the spacing atom (`--era-sp`) and the type size (`--era-text`: 12px at dense, 14px above).
-- `data-surface`: **flat** (default) · glass · bevel — swaps the background treatment.
-- `data-corners`: **rounded** (default) · square — scales all radii toward 0.
-- `data-font`: **mono** (default) · sans · serif — switches the font stack.
-- `data-motion`: instant · **normal** (default) · extra — sets animation speed (`--era-duration` / `--era-ease`), independent of density.
-
-The `Mode` component is a thin wrapper that applies these attributes plus optional `primary` / `primaryFg` color overrides to a subtree.
-
-## Per-component docs
-
-Every component has a passive markdown doc at `{{ORIGIN}}/<slug>.md`.
-Examples: `{{ORIGIN}}/button.md`, `{{ORIGIN}}/select.md`, `{{ORIGIN}}/table.md`.
-Full concatenated reference: `{{ORIGIN}}/llms-full.txt`.
-
-## Components
-
-getting-started, todo, spacing, surfaces, measurements, text, utilities, draggable, os, changelog, llm-shell, notes, aspect-ratio, badge, avatar, bar, nav, button, button-group, pane, card, chip, code-block, copy-button, cycle, kv, separator, sheet, skeleton, switch, toggle, accordion, alert-dialog, calendar, checkbox, collapsible, combobox, command, command-bar, step, context-menu, date-field, date-picker, date-range-field, date-range-picker, dialog, dropdown-menu, file-upload, scroll-area, input, link-preview, label, logo, menu, menubar, meter, navigation-menu, mode, pagination, pin-input, popover, progress, range-calendar, radio-group, rating-group, select, slider, table, tabs, time-field, time-range-field, toggle-group, timeline, tree, toolbar, video-player, tooltip
-
-## CSS utilities
-
-Classes, not components — they need no import beyond the stylesheet. Reach for one of these before hand-rolling the same styling or bending a component into the role.
-
-- `era-interactive` — the focus/disabled recipe every era control carries — put it on a custom interactive element instead of hand-writing focus/disabled variants.
-- `era-link` — understated, motion-aware inline text link — the canonical style for a link in body copy or prose; prefer it over a hand-rolled underline or `Button variant="link"` (which is a control, not running text).
-- `scrollbar-none` — hide the scrollbar on an overflowing strip or rail while keeping it scrollable — for a scroll region that should show its bar, use ScrollArea.
-- `era-text-trim` — vertically center single-line control text (a label beside an icon, a button's own text) without a translateY nudge. Fixed-height, non-editable elements ONLY: never on an <input>/<textarea>, and never on the same element as `truncate` or any overflow clip — put it on the fixed-height ROW and let the truncating child centre inside it. See era-text-trim-caps for ALL-CAPS.
-- `truncate` — single-line horizontal truncation with an ellipsis — put it on the truncating CHILD inside a trimmed or leading-none row, never on the same element as era-text-trim; it will not clip ascenders or descenders.
-- `era-text-trim-caps` — the era-text-trim variant for ALL-CAPS single-line strings (kbd hints, acronym badges) — never for mixed-case text (a label like "System" reads high; use era-text-trim), and never on the same element as `truncate`.
-- `era-ink-center` — on a native single-line <input> (or the text layer that must mirror one) inside a fixed-height field — never alongside era-text-trim.
-- `era-token-ink` — the ink centring for a token pill — a badge, a KV value, any short caps-or-digits label in a fixed-height box, CENTRED horizontally and with no icon sibling. For a left-aligned sentence-case label use era-label-ink; when an icon really must sit beside the text, see the note there.
-- `era-label-ink` — the ink centring for a fixed-height control holding ONE line of sentence-case text and no icon — a menu item, a nav trigger, a button label. Never alongside `truncate` (the trimmed box becomes the clip).
-- `surface-backdrop` — the surface-aware backdrop treatment without choosing a fill or relief. Prefer material-popover/material-panel when the element is a complete surface.
-- `material-popover` — a floating transient surface: menus, popovers, tooltips, pickers, toasts. Binds its raised fill, floating relief, and backdrop treatment atomically.
-- `material-panel` — a floating persistent surface: dialogs, sheets, panes, inspectors. Binds its resting fill, floating relief, and backdrop treatment atomically.
-- `pressable` — the physical press contract on a control whose direct content plane is marked data-era-press-content. The surface owns relief/travel; the component may scale travel with --era-press-scale.
-- `tier-icon · tier-pill · tier-chip · tier-control · tier-bar` — BOUNDED GEOMETRY — height and radius are one decision.
-- `h-line` — the height of one line of the element's own text — a skeleton standing in for a line, a spacer that must match a line box.
-- `era-track-well` — instead of `shadow-well` on a track whose value is painted by a child that covers the box — a progress/meter/slider track, a custom gauge. For a well holding ordinary content, `shadow-well` is still right.
-- `era-skeleton-pulse` — Skeleton's pulse, on the MOTION AXIS.
-- `era-shimmer` — the in-progress text treatment — put it on a "working…" / "thinking…" label while a task streams, instead of a spinner beside the text.
-- `era-collapse` — the height sweep for a bits-ui Collapsible.Content — put it on the Content element itself (it carries its own overflow: hidden).
-- `h-icon · h-pill · h-chip · h-control · h-bar` — the tier-height ladder — h-icon (icon) · h-pill (nested pill) · h-chip (standalone pill) · h-control (control) · h-bar (bar); the named form of h-(--era-h-*).
-- `min-h-icon · min-h-pill · min-h-chip · min-h-control · min-h-bar` — minimum tier height for containers that may grow — a bar that is at least lg-tier but can wrap (min-h-bar).
-- `w-icon · w-pill · w-chip · w-control · w-bar` — a tier-sized WIDTH — the horizontal twin of the h-* ladder, for a rail or a column measured in tiers rather than in content.
-- `min-w-icon · min-w-pill · min-w-chip · min-w-control · min-w-bar` — a minimum tier WIDTH — the floor that makes a single-glyph control render as a square rather than a skinny pill (min-w-control on an icon button, min-w-pill on a badge). These could not exist before the ladder was renamed: the old rungs were sm/md/lg, and Tailwind's container scale already owns min-w-md and min-w-lg, so the names collided and every call site had to write min-w-(--era-h-control) by hand. icon/pill/chip/control/bar collide with nothing.
-- `size-icon · size-pill · size-chip · size-control · size-bar` — a tier-sized square — size-icon is THE icon size (a Lucide glyph beside body text), size-control a square control face.
-- `px-pill · px-chip · pl-pill · pr-pill · pl-chip · pr-chip` — pill side padding — the wider-than-vertical horizontal breathing room badge/chip text wants (glyph-advance derived, ~2× the vertical inset).
-- `p-section` — padding for a content panel that sits UNDER a section header row — the even-padding exception, and the reason it is not called p-section: it deliberately under-pays the block start. For an evenly padded content panel use p-section, which is the plain token.
-- `duration-base` — the motion axis as an explicit transition-duration — for the rare case a utility (not the transition-* default) needs to name it; 0s at data-motion="instant", longer at "extra".
-- `text-micro · text-lede · text-heading · text-title · text-display` — the type ladder — micro (eyebrow/legend) < body (controls) < lede (the paragraph under a title) < heading < title < display. Derived from --era-text, so the ratio between any two rungs holds at every density; leading and tracking ride with the size, so a rung is one class.
-- `text-body` — Density-derived body size: `text-body` replaces text-[length:var(--era-text)]
-- `leading-body` — Prose leading — `leading-body` is the pair to `text-body`, and every piece
-- `rounded-icon · rounded-pill · rounded-chip · rounded-control · rounded-bar · rounded-menu-item` — Radius ladder — Tailwind's own rounded-* names now walk era's concentric
-- `shadow` — Surface chrome — bare `shadow` is the resting control edge, shadow-lg the
-- `shadow-sm · shadow-lg · shadow-well · shadow-pressed · shadow-highlight` — v4 marks bare `shadow` a deprecated spelling of shadow-sm, and lints
-- `bg-well · text-well · border-well · bg-elevated · text-elevated · border-elevated · bg-highlight · text-highlight · … (12 in all)` — Surface fills — bg-well is the surface's own resting fill (pairs with
-- `p-gutter · px-gutter · py-gutter · gap-gutter · p-panel · px-panel · py-panel · gap-panel · … (24 in all)` — THE SPACING SCALE — one entry per token, from which Tailwind derives the
-- `p-inset-pill · px-inset-pill · py-inset-pill · gap-inset-pill · p-inset-chip · px-inset-chip · py-inset-chip · gap-inset-chip · … (12 in all)` — text-symmetric content padding — (tier − text)/2, the inset that vertically centres body text in its tier; px-inset-control is a text button's side padding, p-inset-control a code block's.
-- `p-icon-inset-pill · px-icon-inset-pill · py-icon-inset-pill · gap-icon-inset-pill · p-icon-inset-chip · px-icon-inset-chip · py-icon-inset-chip · gap-icon-inset-chip · … (40 in all)` — the concentric inset for a nested pair — (h-container − h-child)/2, the gap that makes a child control sit evenly inside its container, and the radius step that keeps their corners concentric. Named for the pair it joins: gap-icon-inset-control seats an icon in a control.
-- `p-glyph-icon · px-glyph-icon · py-glyph-icon · gap-glyph-icon · p-glyph-pill · px-glyph-pill · py-glyph-pill · gap-glyph-pill` — the glyph size for a tier — the INK inside the box, not the box (size-glyph-pill is the dismiss × in a pill, size-pill is the pill).
-- `bg-field · text-field · border-field · bg-field-highlight · text-field-highlight · border-field-highlight` — the recessed field fill — bg-field is a text input's resting well, bg-field-highlight its focused/hovered face.
-- `ease-base` — Motion — bare transition utilities default to the motion axis, so
-- `bg-divider · text-divider · border-divider · bg-divider-faded · text-divider-faded · border-divider-faded · bg-background · text-background · … (66 in all)` — Surface divider colors: border-divider, bg-divider-faded, …
-- `bg-fill · text-fill · border-fill · bg-link · text-link · border-link · bg-primary · text-primary · … (39 in all)` — The standing pill fill — --era-fill, the latched counterpart of the
-
-Full reference (what each emits, when to use it): `{{ORIGIN}}/utilities.md`. Machine-readable list: `{{ORIGIN}}/utilities.json`.

package/dist/generated-docs/logo.md

@@ -1,24 +0,0 @@
-# Logo
-
-The signalnine dish mark, reactive to a state preset.
-
-## Import
-
-```ts
-import { Logo } from "@signal9/era-ui/logo";
-```
-
-## Props
-
-| Prop | Type | Default | Notes |
-|------|------|---------|-------|
-| `depth?` | `number` | `52` | — |
-| `tilt?` | `number` | `55` | — |
-| `aim?` | `number` | `0` | — |
-| `light?` | `number` | `REST_LIGHT` | — |
-| `inset?` | `number` | `100` | — |
-| `palette?` | `LogoPalette` | `'amber'` | — |
-| `state?` | `LogoState` | `'manual'` | 'manual' renders a static pose; any other state animates its preset. |
-| `size?` | `number` | `272` | — |
-| `pressable?` | `boolean` | `false` | Deepen the bowl while held, then spring back on release. |
-| `class?` | `string` | — | — |