@charcuterie/ui 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,13 @@
+# @charcuterie/ui
+
+## 0.1.0
+
+### Minor Changes
+
+- Initial public release of the Charcuterie fleet library: the design tokens, the five state kinds (Visibility, VisibilityGroup, SinglePicker, MultiplePicker, RovingFocus, Status), the component set, and the shared ESLint + Biome configs.
+
+### Patch Changes
+
+- Updated dependencies
+  - @charcuterie/tokens@0.1.0
+  - @charcuterie/logic@0.1.0

package/README.md

@@ -0,0 +1,161 @@
+# `@charcuterie/ui`
+
+The components. Look from `@charcuterie/tokens`, state from `@charcuterie/logic`, and ARIA
+that Playwright and an AI agent can actually drive.
+
+M3 ships the **P0 pure-presentation** set: `Spinner`, `Skeleton`, `Button`, `IconButton`,
+`Badge`, `ProgressBar`, `EmptyState`, `Card`, `LiveStatusIndicator`, `MediaTile` — plus
+`VisuallyHidden`, which the first three of those need. M4 adds the overlays: `Modal`,
+`Popover`, `Tabs`.
+
+**M5 adds two, and they came from the first consumer rather than from the plan** —
+[the rule](../../docs/decisions/2026-07-30-a-consumer-milestone-adds-components.md):
+
+- **`Alert`** — rip-deck spells this shape four times, two of them carrying a
+  byte-identical `TONE_CLASS` map of hardcoded hexes. It is the app's largest single
+  duplication and no P0 component is a banner.
+- **`SegmentedControl`** — `SinglePicker` + `RovingFocus` with the panels taken away, which
+  is a composition that could not be expressed until
+  [`Tabs` moved onto `SinglePicker`](../../docs/decisions/2026-07-30-tab-selection-is-a-single-picker.md).
+
+## Install and wire
+
+```ts
+import { Button, Card } from "@charcuterie/ui"
+```
+
+```css
+@import "tailwindcss";
+@import "@charcuterie/tokens/theme.css"; /* colours, type ramp, radii, motion */
+@import "@charcuterie/tokens/fonts.css"; /* Baloo 2, Outfit, Victor Mono */
+@import "@charcuterie/ui/styles.css";    /* the four looping affordances */
+
+@source "../node_modules/@charcuterie/ui/dist";
+```
+
+That last line is not optional. Tailwind v4 scans **source text** for complete class
+strings, and it does not scan your dependencies by default — without it every component
+renders unstyled, with no error.
+
+**Both package names, and the CSS line above is why.** The token *types and values* are
+re-exported at `@charcuterie/ui/tokens`, so your TypeScript only ever names one package —
+but the *stylesheet* is imported from `@charcuterie/tokens` directly. A `./tokens.css`
+export pointing inside this package resolved to nothing on the first real consumer, because
+a hoisting linker puts `@charcuterie/tokens` at the project root rather than in here, and a
+CSS `@import` that misses fails **silently**: no error, no utilities, an unstyled app.
+
+The testing gates are at `@charcuterie/ui/testing`.
+
+### While the packages are unpublished: three lines, and you need all three
+
+A consumer links by `portal:` until this publishes
+([decision](../../docs/decisions/2026-07-29-consumers-link-tokens-by-portal-until-publish.md)).
+M5 spent an hour on the second and third of these, so M5b and M6 do not have to:
+
+```jsonc
+// the app package
+"dependencies": {
+  "@charcuterie/tokens": "portal:../../../charcuterie/packages/tokens",
+  "@charcuterie/ui": "portal:../../../charcuterie/packages/ui"
+}
+
+// the PROJECT ROOT — `ui` declares its siblings as `workspace:*`, and that
+// descriptor cannot resolve outside charcuterie's own workspace. Bare keys, not
+// `@charcuterie/ui/@charcuterie/tokens`: the scoped form yields a different
+// locator string from the app's own dependency on the same directory, and Yarn
+// rejects the pair as conflicting.
+"resolutions": {
+  "@charcuterie/logic": "portal:../charcuterie/packages/logic",
+  "@charcuterie/tokens": "portal:../charcuterie/packages/tokens"
+}
+```
+
+```ts
+// vite.config.ts AND vitest.config.ts
+resolve: { dedupe: ["react", "react-dom"] }
+```
+
+**That last one is the expensive one.** A `portal:` is a symlink, and Node and Vite both
+resolve a symlinked module from its **real path** — so a component living in this package
+resolves *its own* `react` by walking up from here, landing on charcuterie's copy while
+your app renders with yours. Every component with a hook fails at once with:
+
+```
+TypeError: Cannot read properties of null (reading 'useRef')
+```
+
+which mentions neither symlinks nor React identity. Keep the line after publish: it costs
+nothing with one copy, and it is the difference between a working `yarn link` session and
+an hour of confusion.
+
+## How a component is put together
+
+| Layer | Where it comes from |
+| --- | --- |
+| Colour | `intentStyles.ts` — six intents x four appearances, written out in full |
+| Size | `controlStyles.ts` — `h-(--control-height-md)`, so `[data-density]` decides |
+| Type | `text-sm`/`text-md`/`text-lg`, which are **ours**: `theme.css` bridges `--text-*` onto the density-scaled `--font-size-*` |
+| Motion | `styles.css`, at `--duration-loop-*`, switched off under `prefers-reduced-motion` |
+| State | `@charcuterie/logic` — `useUniqueId` for label wiring, `useStatus` for `MediaTile`'s three image states |
+
+**Class names are never interpolated.** `` `bg-intent-${intent}-solid` `` generates nothing
+at all and fails silently, so `intentStyles.ts` is 48 literals rather than a loop, and
+`tailwindCandidates.test.ts` compiles every literal in the package through the real Tailwind
+and fails on any candidate Tailwind cannot generate.
+
+## Tests
+
+```bash
+yarn vitest run --project ui         # Node: class maps, status switches, clamping, boundaries
+yarn vitest run --project ui-dom     # chromium: Component.test.tsx — behaviour, keyboard, ARIA
+yarn vitest run --project storybook  # chromium: every story renders, axe at test: "error"
+```
+
+**Stories are demos and carry no assertions**
+([decision](../../docs/decisions/2026-07-30-stories-are-demos-tests-are-tests.md), which
+supersedes M3's). The DOM half lives in `Component.test.tsx` beside the component, and each
+test mounts the **composed story** through `run()` rather than re-assembling the component —
+so there is still only one rendering stack, and the subject of a test is the story a reader
+sees.
+
+Every component's test calls `expectAgentDrivable(canvas, { role, name })`, which is the
+same query an agent will write; `data-testid` appears nowhere in this package and a test
+enforces that.
+
+Axe runs once per mount, when `run()` resolves — i.e. before the test has clicked anything.
+A state you had to *drive* to reach (an open dialog, a shown popover) audits itself with
+`expectNoAxeViolations(canvasElement)`.
+
+Two rules about the docs panel are tests rather than conventions, because both fail
+invisibly: `storyControls.test.ts` (a prop typed from another package needs an explicit
+`argTypes` entry, or Storybook renders a `{}` textarea for it) and `mdxReferences.test.ts`
+(an `.mdx` may not reference a story that no longer exists — `of` resolves at runtime, so a
+rename breaks only the rendered page).
+
+## Adding a component
+
+1. `src/<Name>/<Name>.tsx`, `.stories.tsx`, `.mdx`, `.test.tsx` — siblings, matching
+   mux-magic. The story shows it; the test drives it. Neither does the other's job.
+2. Colours from `intentStyles.ts`, sizes from `controlStyles.ts`. No hex, no `*-slate-*`
+   (a test checks).
+3. The five stories: `Default`, `AllVariants`, `AllStates`, `Responsive` (three container
+   widths, via `ContainerBoard`), `Interactive` (the complete keyboard path).
+4. Export from `src/index.ts` — the one sanctioned barrel. Components import each other
+   directly, never through it.
+5. **If it is an overlay, use the platform's top layer — never a portal.** `<dialog>` +
+   `showModal()`, or `popover="manual"`. Both stay where they are in the DOM, so
+   `canvas.getByRole(…)` still finds the panel; a portal moves it to `document.body`, out
+   of the element a test or an agent scoped its queries to
+   ([decision](../../docs/decisions/2026-07-30-overlays-use-the-top-layer-not-a-portal.md)).
+6. **If it is built on a registering kind, look at its first paint.** Members register
+   from effects, so before those run a `RovingFocus` has no active value and a
+   `SinglePicker` / `VisibilityGroup` has no selected key — only a pending one. Two of M4's
+   four bugs were exactly that, and the isolated story runner saw neither —
+   `yarn smoke:storybook` did.
+7. **If it declares `@container`, every `StoryCell` holding it needs `align="stretch"`.**
+   `container-type: inline-size` forbids the element from being sized by its own
+   contents, so a default (shrink-to-fit) cell collapses it to min-content and every
+   line wraps after one word. Valid CSS, no error, nothing for axe to say — it only
+   shows up in a screenshot, which is how it shipped in M3's `LiveStatusIndicator`
+   board. `sourceRules.test.ts` now derives the container-declaring components from
+   source and fails on this, so the component M4 adds joins the rule automatically.

package/dist/Alert/Alert.d.ts

@@ -0,0 +1,88 @@
+import type { IntentName } from "@charcuterie/tokens";
+import type { ComponentPropsWithRef, ReactNode } from "react";
+export type AlertSize = "md" | "sm";
+export type AlertProps = Omit<ComponentPropsWithRef<"section">, "children"> & {
+    /** Buttons. Laid out beside the text at `cq-sm` and up. */
+    actions?: ReactNode;
+    /** The quiet second line — counts, timestamps, provenance. */
+    description?: ReactNode;
+    /**
+     * The evidence, one line each. A list rather than a paragraph
+     * because that is what it is, and because a screen reader then
+     * announces "list, 3 items" instead of running three measurements
+     * together into one sentence.
+     */
+    details?: readonly string[];
+    /**
+     * The sentence. A `ReactNode` rather than a `string` because
+     * rip-deck's verdicts qualify themselves inline — *"…(suspected —
+     * retry in another drive to confirm)"* — and splitting that across
+     * two props would let the qualifier drift away from the claim it
+     * qualifies.
+     */
+    heading: ReactNode;
+    intent?: IntentName;
+    /**
+     * Present ⇒ this is a **named landmark** and
+     * `getByRole("region", { name })` finds it. Absent ⇒ a plain
+     * block, because a `<section>` with no accessible name is
+     * `generic` rather than `region`. See below; the default is
+     * deliberate.
+     */
+    label?: string;
+    size?: AlertSize;
+};
+/**
+ * The thing four of rip-deck's components each spell differently,
+ * and the reason `TONE_CLASS` was declared twice in one package.
+ *
+ * `TowerAlerts`, `UsbAlertBanner`, `LoadedDiscsBanner` and
+ * `VerdictBadge` are one shape: an intent-coloured block holding a
+ * sentence, a quieter line under it, and sometimes a list of
+ * evidence. Two of them carried a byte-identical `TONE_CLASS` map of
+ * hardcoded hexes and `amber-`/`red-` utilities; mux-magic spells the
+ * same idea a third way in `statusClassMap`. Here it is
+ * `INTENT_APPEARANCE_CLASS`, which every other component in this
+ * package already reads.
+ *
+ * ### It is a block by default, and a landmark only when named
+ *
+ * `label` is what decides, because the evidence divides cleanly:
+ *
+ *  - The **banners** are one alert at the top of a page and want to
+ *    be addressable — `getByRole("region", { name: "USB connection
+ *    alert" })`. They pass a `label`.
+ *  - The **verdict** renders inside every bay card, and one of its
+ *    two forms is the single sentence *"Part of the tower-wide
+ *    problem above."* Nine landmarks sharing one name is axe's
+ *    `landmark-unique`, so it passes none.
+ *
+ * A component that always took the landmark would have made the
+ * second case fail its own a11y gate, and one that never took it
+ * would leave three `<section aria-label>` wrappers hand-rolled in
+ * the consumer — which is what rip-deck has today.
+ *
+ * ### The heading is not a heading element
+ *
+ * An alert's headline is a *sentence* — "Bay 7 is reading with
+ * errors; clean the disc and try again" — not a node in the document
+ * outline. Nine bays' worth of those as `<h3>`s builds a table of
+ * contents out of nine complaints, which is worse for a screen
+ * reader than no outline entry at all. `Card` and `EmptyState` take
+ * a real `headingLevel` precisely because their headings *are* short
+ * outline nodes; this one is styled text, and `label` is how it
+ * becomes findable.
+ *
+ * ### It does not announce, and that is a component boundary
+ *
+ * No `role="alert"`, no `aria-live`. A live region takes **no
+ * accessible name from its content**
+ * ([decision](../../../docs/decisions/2026-07-29-status-regions-carry-an-aria-label.md)),
+ * so an announcing variant would need a name that duplicates the
+ * sentence it is announcing — and `role="alert"` on a `<section>`
+ * overrides the landmark, so it cannot be both. A thing that
+ * interrupts you is a `Toast` (M6). This is a thing that is *on the
+ * page*.
+ */
+export declare const Alert: ({ actions, className, description, details, heading, intent, label, size, ...sectionProps }: AlertProps) => ReactNode;
+//# sourceMappingURL=Alert.d.ts.map

package/dist/Alert/Alert.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../src/Alert/Alert.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAA;AACrD,OAAO,KAAK,EACV,qBAAqB,EACrB,SAAS,EACV,MAAM,OAAO,CAAA;AAKd,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,CAAA;AAEnC,MAAM,MAAM,UAAU,GAAG,IAAI,CAC3B,qBAAqB,CAAC,SAAS,CAAC,EAChC,UAAU,CACX,GAAG;IACF,2DAA2D;IAC3D,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,8DAA8D;IAC9D,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,SAAS,MAAM,EAAE,CAAA;IAC3B;;;;;;OAMG;IACH,OAAO,EAAE,SAAS,CAAA;IAClB,MAAM,CAAC,EAAE,UAAU,CAAA;IACnB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,SAAS,CAAA;CACjB,CAAA;AAOD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmDG;AACH,eAAO,MAAM,KAAK,GAAI,6FAUnB,UAAU,KAAG,SAoDf,CAAA"}

package/dist/Alert/Alert.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { INTENT_APPEARANCE_CLASS } from "../intentStyles.js";
+import { toClassName } from "../toClassName.js";
+const SIZE_CLASS = {
+    sm: "gap-0.5 rounded-md px-2 py-1 text-sm",
+    md: "gap-1 rounded-xl px-3.5 py-2.5 text-md",
+};
+/**
+ * The thing four of rip-deck's components each spell differently,
+ * and the reason `TONE_CLASS` was declared twice in one package.
+ *
+ * `TowerAlerts`, `UsbAlertBanner`, `LoadedDiscsBanner` and
+ * `VerdictBadge` are one shape: an intent-coloured block holding a
+ * sentence, a quieter line under it, and sometimes a list of
+ * evidence. Two of them carried a byte-identical `TONE_CLASS` map of
+ * hardcoded hexes and `amber-`/`red-` utilities; mux-magic spells the
+ * same idea a third way in `statusClassMap`. Here it is
+ * `INTENT_APPEARANCE_CLASS`, which every other component in this
+ * package already reads.
+ *
+ * ### It is a block by default, and a landmark only when named
+ *
+ * `label` is what decides, because the evidence divides cleanly:
+ *
+ *  - The **banners** are one alert at the top of a page and want to
+ *    be addressable — `getByRole("region", { name: "USB connection
+ *    alert" })`. They pass a `label`.
+ *  - The **verdict** renders inside every bay card, and one of its
+ *    two forms is the single sentence *"Part of the tower-wide
+ *    problem above."* Nine landmarks sharing one name is axe's
+ *    `landmark-unique`, so it passes none.
+ *
+ * A component that always took the landmark would have made the
+ * second case fail its own a11y gate, and one that never took it
+ * would leave three `<section aria-label>` wrappers hand-rolled in
+ * the consumer — which is what rip-deck has today.
+ *
+ * ### The heading is not a heading element
+ *
+ * An alert's headline is a *sentence* — "Bay 7 is reading with
+ * errors; clean the disc and try again" — not a node in the document
+ * outline. Nine bays' worth of those as `<h3>`s builds a table of
+ * contents out of nine complaints, which is worse for a screen
+ * reader than no outline entry at all. `Card` and `EmptyState` take
+ * a real `headingLevel` precisely because their headings *are* short
+ * outline nodes; this one is styled text, and `label` is how it
+ * becomes findable.
+ *
+ * ### It does not announce, and that is a component boundary
+ *
+ * No `role="alert"`, no `aria-live`. A live region takes **no
+ * accessible name from its content**
+ * ([decision](../../../docs/decisions/2026-07-29-status-regions-carry-an-aria-label.md)),
+ * so an announcing variant would need a name that duplicates the
+ * sentence it is announcing — and `role="alert"` on a `<section>`
+ * overrides the landmark, so it cannot be both. A thing that
+ * interrupts you is a `Toast` (M6). This is a thing that is *on the
+ * page*.
+ */
+export const Alert = ({ actions, className, description, details, heading, intent = "neutral", label, size = "md", ...sectionProps }) => {
+    return (_jsxs("section", { ...sectionProps, "aria-label": label, className: toClassName(
+        // `@container` so the actions drop below the text in a
+        // sidebar and sit beside it full-bleed — the case a media
+        // query cannot tell apart.
+        "@container border", INTENT_APPEARANCE_CLASS[intent].soft, SIZE_CLASS[size], className), children: [_jsxs("div", { className: "flex flex-col gap-2 cq-sm:flex-row cq-sm:items-start cq-sm:justify-between", children: [_jsxs("div", { className: "flex min-w-0 flex-col", children: [_jsx("p", { className: "m-0 font-semibold", children: heading }), description ? (_jsx("p", { className: "m-0 text-sm opacity-80", children: description })) : null] }), actions ? (_jsx("div", { className: "flex shrink-0 items-center gap-1", children: actions })) : null] }), details && details.length > 0 ? (_jsx("ul", { className: "m-0 list-none p-0 text-sm opacity-80", children: details.map((line, index) => (_jsx("li", { children: line }, `${String(index)}-${line}`))) })) : null] }));
+};
+//# sourceMappingURL=Alert.js.map

package/dist/Alert/Alert.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.js","sourceRoot":"","sources":["../../src/Alert/Alert.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,uBAAuB,EAAE,MAAM,oBAAoB,CAAA;AAC5D,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAuC/C,MAAM,UAAU,GAA8B;IAC5C,EAAE,EAAE,sCAAsC;IAC1C,EAAE,EAAE,wCAAwC;CAC7C,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmDG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,EACpB,OAAO,EACP,SAAS,EACT,WAAW,EACX,OAAO,EACP,OAAO,EACP,MAAM,GAAG,SAAS,EAClB,KAAK,EACL,IAAI,GAAG,IAAI,EACX,GAAG,YAAY,EACJ,EAAa,EAAE;IAC1B,OAAO,CAQL,sBACM,YAAY,gBACJ,KAAK,EACjB,SAAS,EAAE,WAAW;QACpB,uDAAuD;QACvD,0DAA0D;QAC1D,2BAA2B;QAC3B,mBAAmB,EACnB,uBAAuB,CAAC,MAAM,CAAC,CAAC,IAAI,EACpC,UAAU,CAAC,IAAI,CAAC,EAChB,SAAS,CACV,aAED,eAAK,SAAS,EAAC,4EAA4E,aACzF,eAAK,SAAS,EAAC,uBAAuB,aACpC,YAAG,SAAS,EAAC,mBAAmB,YAAE,OAAO,GAAK,EAE7C,WAAW,CAAC,CAAC,CAAC,CACb,YAAG,SAAS,EAAC,wBAAwB,YAClC,WAAW,GACV,CACL,CAAC,CAAC,CAAC,IAAI,IACJ,EAEL,OAAO,CAAC,CAAC,CAAC,CACT,cAAK,SAAS,EAAC,kCAAkC,YAC9C,OAAO,GACJ,CACP,CAAC,CAAC,CAAC,IAAI,IACJ,EAEL,OAAO,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAC/B,aAAI,SAAS,EAAC,sCAAsC,YACjD,OAAO,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAI5B,uBAAsC,IAAI,IAAjC,GAAG,MAAM,CAAC,KAAK,CAAC,IAAI,IAAI,EAAE,CAAa,CACjD,CAAC,GACC,CACN,CAAC,CAAC,CAAC,IAAI,IACA,CACX,CAAA;AACH,CAAC,CAAA"}

package/dist/Badge/Badge.d.ts

@@ -0,0 +1,54 @@
+import type { IntentName } from "@charcuterie/tokens";
+import type { ComponentPropsWithRef, ReactNode } from "react";
+import type { BadgeSize } from "../controlStyles.ts";
+import type { IntentAppearance } from "../intentStyles.ts";
+export type BadgeProps = ComponentPropsWithRef<"span"> & {
+    appearance?: Exclude<IntentAppearance, "ghost">;
+    children: ReactNode;
+    icon?: ReactNode;
+    intent?: IntentName;
+    /**
+     * What happens when the label is wider than the space it is given.
+     *
+     *  - `truncate` — one line, capped at the container, ellipsis. The
+     *    default, because a status pill that changes its row's height
+     *    when a message gets longer breaks the table it sits in.
+     *  - `wrap` — the pill grows taller and shows everything. For the
+     *    kiosk and any touch context, where the hover readout that
+     *    `truncate` relies on does not exist.
+     */
+    overflow?: "truncate" | "wrap";
+    size?: BadgeSize;
+};
+/**
+ * Four repos, and rip-deck declares the **identical** `TONE_CLASS`
+ * map twice — `VerdictBadge.tsx` and `TowerAlerts.tsx`, same five
+ * hardcoded hexes, no relationship to each other beyond
+ * copy-paste. mux-magic's `statusClassMap` is the same idea spelled
+ * a third way, keyed by a bare `string` so an unrecognised status
+ * renders with no colour at all and no error.
+ *
+ * `intent` replaces all of it. The **status** half of the problem —
+ * which state maps to which intent, and what it is called in
+ * English — lives in `statusIntent.ts` as exhaustive switches over
+ * `@charcuterie/logic`'s shared machines, so
+ * `<Badge intent={getAsyncIntent(status)}>{getAsyncLabel(status)}</Badge>`
+ * is the whole of mux-magic's `StatusBadge`, and adding a state to
+ * the machine is a compile error rather than a blank pill.
+ *
+ * **No implicit role.** A badge is a word about something else; it
+ * is not a live region, and giving it `role="status"` would make
+ * every re-render announce itself. Where a status genuinely needs
+ * announcing that is `LiveStatusIndicator`'s job, and where a badge
+ * needs a name beyond its text, `aria-label` still works. The story
+ * asserts the text is queryable, which is what an agent actually
+ * matches on.
+ *
+ * **It is capped at its container.** `shrink-0` and
+ * `whitespace-nowrap` alone let a long label paint straight through
+ * the neighbouring column — no clipping, no error, just a pill lying
+ * across the next cell. `max-inline-size: 100%` is what stops it, and
+ * `overflow` is what happens next.
+ */
+export declare const Badge: ({ appearance, children, className, icon, intent, overflow, size, title, ...spanProps }: BadgeProps) => ReactNode;
+//# sourceMappingURL=Badge.d.ts.map

package/dist/Badge/Badge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../src/Badge/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAA;AACrD,OAAO,KAAK,EACV,qBAAqB,EACrB,SAAS,EACV,MAAM,OAAO,CAAA;AAEd,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAA;AAEpD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAK1D,MAAM,MAAM,UAAU,GAAG,qBAAqB,CAAC,MAAM,CAAC,GAAG;IACvD,UAAU,CAAC,EAAE,OAAO,CAAC,gBAAgB,EAAE,OAAO,CAAC,CAAA;IAC/C,QAAQ,EAAE,SAAS,CAAA;IACnB,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,MAAM,CAAC,EAAE,UAAU,CAAA;IACnB;;;;;;;;;OASG;IACH,QAAQ,CAAC,EAAE,UAAU,GAAG,MAAM,CAAA;IAC9B,IAAI,CAAC,EAAE,SAAS,CAAA;CACjB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,eAAO,MAAM,KAAK,GAAI,wFAUnB,UAAU,KAAG,SAyDf,CAAA"}

package/dist/Badge/Badge.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { BADGE_SIZE_CLASS } from "../controlStyles.js";
+import { INTENT_APPEARANCE_CLASS } from "../intentStyles.js";
+import { toClassName } from "../toClassName.js";
+import { useIsTextClipped } from "./useIsTextClipped.js";
+/**
+ * Four repos, and rip-deck declares the **identical** `TONE_CLASS`
+ * map twice — `VerdictBadge.tsx` and `TowerAlerts.tsx`, same five
+ * hardcoded hexes, no relationship to each other beyond
+ * copy-paste. mux-magic's `statusClassMap` is the same idea spelled
+ * a third way, keyed by a bare `string` so an unrecognised status
+ * renders with no colour at all and no error.
+ *
+ * `intent` replaces all of it. The **status** half of the problem —
+ * which state maps to which intent, and what it is called in
+ * English — lives in `statusIntent.ts` as exhaustive switches over
+ * `@charcuterie/logic`'s shared machines, so
+ * `<Badge intent={getAsyncIntent(status)}>{getAsyncLabel(status)}</Badge>`
+ * is the whole of mux-magic's `StatusBadge`, and adding a state to
+ * the machine is a compile error rather than a blank pill.
+ *
+ * **No implicit role.** A badge is a word about something else; it
+ * is not a live region, and giving it `role="status"` would make
+ * every re-render announce itself. Where a status genuinely needs
+ * announcing that is `LiveStatusIndicator`'s job, and where a badge
+ * needs a name beyond its text, `aria-label` still works. The story
+ * asserts the text is queryable, which is what an agent actually
+ * matches on.
+ *
+ * **It is capped at its container.** `shrink-0` and
+ * `whitespace-nowrap` alone let a long label paint straight through
+ * the neighbouring column — no clipping, no error, just a pill lying
+ * across the next cell. `max-inline-size: 100%` is what stops it, and
+ * `overflow` is what happens next.
+ */
+export const Badge = ({ appearance = "soft", children, className, icon, intent = "neutral", overflow = "truncate", size = "md", title, ...spanProps }) => {
+    const [labelRef, clippedText] = useIsTextClipped();
+    return (_jsxs("span", { ...spanProps, className: toClassName("inline-flex shrink-0 items-center rounded-full border font-medium", 
+        // The cap. Without it every other rule here is decoration.
+        "max-w-full", overflow === "wrap"
+            ? // A stadium end-cap on a three-line box reads as a
+                // rendering fault rather than a badge, so the wrapping
+                // pill relaxes to a rounded rectangle.
+                "rounded-2xl"
+            : "rounded-full", BADGE_SIZE_CLASS[size], INTENT_APPEARANCE_CLASS[intent][appearance], className), 
+        // Only when something is actually hidden. A tooltip on every
+        // short pill in a bay list is noise, and a `title` that
+        // duplicates fully-visible text is a screen-reader duplicate
+        // for no gain.
+        title: title ?? clippedText, children: [icon ? (_jsx("span", { "aria-hidden": "true", className: "contents shrink-0", children: icon })) : null, _jsx("span", { className: overflow === "wrap"
+                    ? "min-w-0"
+                    : "min-w-0 overflow-hidden text-ellipsis whitespace-nowrap", ref: labelRef, children: children })] }));
+};
+//# sourceMappingURL=Badge.js.map

package/dist/Badge/Badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../src/Badge/Badge.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAA;AAEtD,OAAO,EAAE,uBAAuB,EAAE,MAAM,oBAAoB,CAAA;AAC5D,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AAqBxD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,EACpB,UAAU,GAAG,MAAM,EACnB,QAAQ,EACR,SAAS,EACT,IAAI,EACJ,MAAM,GAAG,SAAS,EAClB,QAAQ,GAAG,UAAU,EACrB,IAAI,GAAG,IAAI,EACX,KAAK,EACL,GAAG,SAAS,EACD,EAAa,EAAE;IAC1B,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,gBAAgB,EAAE,CAAA;IAElD,OAAO,CACL,mBACM,SAAS,EACb,SAAS,EAAE,WAAW,CACpB,mEAAmE;QACnE,2DAA2D;QAC3D,YAAY,EACZ,QAAQ,KAAK,MAAM;YACjB,CAAC,CAAC,mDAAmD;gBACnD,uDAAuD;gBACvD,uCAAuC;gBACvC,aAAa;YACf,CAAC,CAAC,cAAc,EAClB,gBAAgB,CAAC,IAAI,CAAC,EACtB,uBAAuB,CAAC,MAAM,CAAC,CAAC,UAAU,CAAC,EAC3C,SAAS,CACV;QACD,6DAA6D;QAC7D,wDAAwD;QACxD,6DAA6D;QAC7D,eAAe;QACf,KAAK,EAAE,KAAK,IAAI,WAAW,aAE1B,IAAI,CAAC,CAAC,CAAC,CACN,8BACc,MAAM,EAClB,SAAS,EAAC,mBAAmB,YAE5B,IAAI,GACA,CACR,CAAC,CAAC,CAAC,IAAI,EAYR,eACE,SAAS,EACP,QAAQ,KAAK,MAAM;oBACjB,CAAC,CAAC,SAAS;oBACX,CAAC,CAAC,yDAAyD,EAE/D,GAAG,EAAE,QAAQ,YAEZ,QAAQ,GACJ,IACF,CACR,CAAA;AACH,CAAC,CAAA"}

package/dist/Badge/useIsTextClipped.d.ts

@@ -0,0 +1,22 @@
+import type { RefObject } from "react";
+/**
+ * The element's full text, but only while that text is wider than
+ * the box it was given — i.e. only while an ellipsis is being
+ * painted. `undefined` the rest of the time.
+ *
+ * `text-overflow: ellipsis` leaves no trace in the DOM: the glyph is
+ * painted by the layout engine and the whole string stays in
+ * `textContent`. That is the good news — selection, copy, and every
+ * screen reader still get all of it — and the reason this hook has
+ * to exist, because nothing in the DOM says "this one is cut off",
+ * so a hover affordance cannot be attached declaratively.
+ *
+ * Measured rather than assumed, since the alternative — always
+ * setting a `title` — puts a tooltip on every short status pill in a
+ * bay list, which is worse than the problem it solves.
+ *
+ * The text is returned rather than a boolean so the caller never
+ * reads `ref.current` during render.
+ */
+export declare const useIsTextClipped: () => [RefObject<HTMLSpanElement | null>, string | undefined];
+//# sourceMappingURL=useIsTextClipped.d.ts.map

package/dist/Badge/useIsTextClipped.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIsTextClipped.d.ts","sourceRoot":"","sources":["../../src/Badge/useIsTextClipped.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGtC;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,gBAAgB,QAAO,CAClC,SAAS,CAAC,eAAe,GAAG,IAAI,CAAC,EACjC,MAAM,GAAG,SAAS,CAoDnB,CAAA"}

package/dist/Badge/useIsTextClipped.js

@@ -0,0 +1,57 @@
+import { useEffect, useRef, useState } from "react";
+/**
+ * The element's full text, but only while that text is wider than
+ * the box it was given — i.e. only while an ellipsis is being
+ * painted. `undefined` the rest of the time.
+ *
+ * `text-overflow: ellipsis` leaves no trace in the DOM: the glyph is
+ * painted by the layout engine and the whole string stays in
+ * `textContent`. That is the good news — selection, copy, and every
+ * screen reader still get all of it — and the reason this hook has
+ * to exist, because nothing in the DOM says "this one is cut off",
+ * so a hover affordance cannot be attached declaratively.
+ *
+ * Measured rather than assumed, since the alternative — always
+ * setting a `title` — puts a tooltip on every short status pill in a
+ * bay list, which is worse than the problem it solves.
+ *
+ * The text is returned rather than a boolean so the caller never
+ * reads `ref.current` during render.
+ */
+export const useIsTextClipped = () => {
+    const elementRef = useRef(null);
+    const [clippedText, setClippedText] = useState(undefined);
+    // No dependency array: `children` is a `ReactNode`, so there is
+    // nothing stable to compare against, and a re-render is exactly
+    // when the text may have changed. `setState` bails out on an equal
+    // value, so the common case costs one `scrollWidth` read.
+    useEffect(() => {
+        const element = elementRef.current;
+        if (!element) {
+            return;
+        }
+        setClippedText(element.scrollWidth > element.clientWidth
+            ? (element.textContent ?? undefined)
+            : undefined);
+    });
+    // And a resize of the *container* changes the answer without
+    // re-rendering anything — which is the container-query case this
+    // whole library is built around.
+    useEffect(() => {
+        const element = elementRef.current;
+        if (!element) {
+            return;
+        }
+        const observer = new ResizeObserver(() => {
+            setClippedText(element.scrollWidth > element.clientWidth
+                ? (element.textContent ?? undefined)
+                : undefined);
+        });
+        observer.observe(element);
+        return () => {
+            observer.disconnect();
+        };
+    }, []);
+    return [elementRef, clippedText];
+};
+//# sourceMappingURL=useIsTextClipped.js.map

package/dist/Badge/useIsTextClipped.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIsTextClipped.js","sourceRoot":"","sources":["../../src/Badge/useIsTextClipped.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEnD;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAG9B,EAAE;IACF,MAAM,UAAU,GAAG,MAAM,CAAkB,IAAI,CAAC,CAAA;IAEhD,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAE5C,SAAS,CAAC,CAAA;IAEZ,gEAAgE;IAChE,gEAAgE;IAChE,mEAAmE;IACnE,0DAA0D;IAC1D,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,OAAO,GAAG,UAAU,CAAC,OAAO,CAAA;QAElC,IAAI,CAAC,OAAO,EAAE,CAAC;YACb,OAAM;QACR,CAAC;QAED,cAAc,CACZ,OAAO,CAAC,WAAW,GAAG,OAAO,CAAC,WAAW;YACvC,CAAC,CAAC,CAAC,OAAO,CAAC,WAAW,IAAI,SAAS,CAAC;YACpC,CAAC,CAAC,SAAS,CACd,CAAA;IACH,CAAC,CAAC,CAAA;IAEF,6DAA6D;IAC7D,iEAAiE;IACjE,iCAAiC;IACjC,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,OAAO,GAAG,UAAU,CAAC,OAAO,CAAA;QAElC,IAAI,CAAC,OAAO,EAAE,CAAC;YACb,OAAM;QACR,CAAC;QAED,MAAM,QAAQ,GAAG,IAAI,cAAc,CAAC,GAAG,EAAE;YACvC,cAAc,CACZ,OAAO,CAAC,WAAW,GAAG,OAAO,CAAC,WAAW;gBACvC,CAAC,CAAC,CAAC,OAAO,CAAC,WAAW,IAAI,SAAS,CAAC;gBACpC,CAAC,CAAC,SAAS,CACd,CAAA;QACH,CAAC,CAAC,CAAA;QAEF,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,CAAA;QAEzB,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,UAAU,EAAE,CAAA;QACvB,CAAC,CAAA;IACH,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,OAAO,CAAC,UAAU,EAAE,WAAW,CAAC,CAAA;AAClC,CAAC,CAAA"}

package/dist/Button/Button.d.ts

@@ -0,0 +1,58 @@
+import type { ControlSize, IntentName } from "@charcuterie/tokens";
+import type { ComponentPropsWithRef, ReactNode } from "react";
+import type { IntentAppearance } from "../intentStyles.ts";
+export type ButtonProps = Omit<ComponentPropsWithRef<"button">, "disabled"> & {
+    appearance?: IntentAppearance;
+    iconEnd?: ReactNode;
+    iconStart?: ReactNode;
+    intent?: IntentName;
+    isDisabled?: boolean;
+    isFullWidth?: boolean;
+    isLoading?: boolean;
+    /** What the spinner announces. Not shown. */
+    loadingLabel?: string;
+    size?: ControlSize;
+    /**
+     * Two sizing modes rather than a second component's worth of
+     * markup. `icon` is square on the control height with no inline
+     * padding, which is what lines an `IconButton` up with the text
+     * button beside it in a toolbar.
+     *
+     * It lives here rather than in `IconButton` because appending a
+     * competing `size-*`/`px-0` to this component's `className` would
+     * be a specificity coin-flip: two utilities setting the same
+     * property, and the winner decided by Tailwind's internal
+     * ordering rather than by the caller.
+     */
+    sizing?: "control" | "icon";
+};
+/**
+ * Hand-rolled in **seven repos**, each with its own
+ * primary/secondary/danger/ghost, and this is the component that
+ * erases the most duplication in the fleet.
+ *
+ * Four decisions worth knowing, all of them fixing something an
+ * inventoried repo gets wrong:
+ *
+ *  - **`type="button"` by default.** A `<button>` inside a form
+ *    submits it unless told otherwise, and "clicking the copy icon
+ *    reloaded the page" is a bug every app in the fleet has shipped
+ *    at least once.
+ *  - **`isLoading` disables and announces.** The button goes
+ *    `aria-busy`, the spinner replaces `iconStart` rather than
+ *    being appended (so the label does not jump), and the label
+ *    itself stays — a spinner that swallows the text leaves the
+ *    user unsure what they pressed.
+ *  - **`focus-visible`, never `focus`.** See `FOCUS_RING_CLASS`.
+ *  - **Sizing comes from the density axis**, not from a prop table:
+ *    `size="md"` is 2.25rem on a desktop and 3.25rem on the kiosk,
+ *    with no prop change. `MIN_TOUCH_TARGET_CLASS` is available for
+ *    a control that must clear 44px regardless.
+ *
+ * The accessible name is the children. `IconButton` exists because
+ * a glyph is not a name, and enforcing that in *this* component's
+ * types would mean rejecting `<Button>{icon} Copy</Button>`, which
+ * is fine.
+ */
+export declare const Button: ({ appearance, children, className, iconEnd, iconStart, intent, isDisabled, isFullWidth, isLoading, loadingLabel, size, sizing, type, ...buttonProps }: ButtonProps) => ReactNode;
+//# sourceMappingURL=Button.d.ts.map

package/dist/Button/Button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,WAAW,EACX,UAAU,EACX,MAAM,qBAAqB,CAAA;AAC5B,OAAO,KAAK,EACV,qBAAqB,EACrB,SAAS,EACV,MAAM,OAAO,CAAA;AAMd,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAU1D,MAAM,MAAM,WAAW,GAAG,IAAI,CAC5B,qBAAqB,CAAC,QAAQ,CAAC,EAC/B,UAAU,CACX,GAAG;IACF,UAAU,CAAC,EAAE,gBAAgB,CAAA;IAC7B,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,MAAM,CAAC,EAAE,UAAU,CAAA;IACnB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,6CAA6C;IAC7C,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,IAAI,CAAC,EAAE,WAAW,CAAA;IAClB;;;;;;;;;;;OAWG;IACH,MAAM,CAAC,EAAE,SAAS,GAAG,MAAM,CAAA;CAC5B,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,eAAO,MAAM,MAAM,GAAI,uJAepB,WAAW,KAAG,SA6BhB,CAAA"}