@vaam-apps/ui 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,104 @@
+# Changelog
+
+## 0.1.0
+
+First release as `@vaam-apps/ui`, in its own repository. Previously
+`@vsms/ui`, a private package inside the vsms monorepo — extracted with
+its full history, back to the commit that created it.
+
+### Storybook replaces the gallery
+
+Stories live beside their components, and the `addon-a11y` panel runs
+axe on every one. The gallery this replaces lived in a consuming
+application and had drifted: it claimed to render every export and had
+missed thirteen, among them the three carrying live rendering bugs.
+
+### Accessibility
+
+- **`--subtle-foreground` failed WCAG AA on every surface** — 4.06:1 on
+  `--background` down to 3.40:1 on `--surface-3`, against the 4.5:1
+  normal text requires, across 38 usages all at 11–12px. Raised to
+  `#838a95`, the minimum that clears AA on the worst case. This
+  compresses the gap to `--muted-foreground` from ΔE 18.2 to 8.8 and is
+  a real, deliberate visual change. Found by the a11y addon, not by
+  inspection.
+
+### API
+
+- `Select` and `ValueTabs` accept an explicit `undefined` for their
+  controlled props. Under `exactOptionalPropertyTypes` a bare `value?:
+  string` rejects `useState<string>()`'s own output, which made the
+  ordinary controlled pattern a type error.
+
+### Generalised for release
+
+- **The status system is parameterised.** `StatusMeta`, the glyph
+  geometry and the hue classes stay here; the per-state-machine tables
+  moved to the consuming application. `createStatusPill(system)` binds
+  one table to a pill whose `state` prop accepts exactly that machine's
+  literals, replacing three near-identical pill components that differed
+  only in which table they indexed (and had already drifted: one set
+  `role="img"`, one did not; one supported `interactive`, two did not).
+- `StateMark` now takes a `StatusMeta` rather than one application's
+  state enum. The previous meta-based export, `StateMarkFromMeta`, is
+  gone — this is it, renamed.
+- `StateTimeline` is generic over the state machine, takes its `system`
+  and its per-state `annotations` as props, and accepts any IANA
+  timezone. It previously hard-coded one application's message states,
+  that application's own explanatory notes, and a two-value timezone
+  union whose UTC-offset suffix was literal (`"Z"` or `"+01"`) — wrong
+  for every other zone and across DST. The offset is now read from
+  `Intl`.
+- `MsisdnDisplay` → **`PhoneDisplay`**, with the Cameroon digit grouping
+  and carrier table replaced by a `format` callback and a `tag` prop.
+- `StateChip`'s tones are the shared `StatusHue` vocabulary rather than a
+  private four-entry copy, so `expired` and `parked` are now reachable.
+- `EncodingPreview` (GSM-7/UCS-2 SMS segment counting) was removed. It is
+  application domain knowledge, not a component.
+- `components/bespoke/` → `components/patterns/`.
+
+### Fixed
+
+- **`cn()` silently deleted custom font sizes.** `tailwind-merge`
+  classifies an unrecognised `text-*` value as a colour, so
+  `cn("text-caption text-state-danger-fg")` returned only the colour —
+  affecting `FieldError`, `DetailList`, `CardHeader` and others, which
+  had been rendering at the browser default size. The theme's font-size
+  and radius scales are now registered. Present in tailwind-merge 2.6.0
+  as well as 3.x; a latent bug, not an upgrade regression.
+- **`cn()` did not resolve daisyUI component modifiers**, so
+  `cn("btn btn-primary", "btn-ghost")` kept both and let stylesheet order
+  decide. Now grouped — with `btn`/`badge` *colour* and *style* kept
+  separate, because daisyUI 5's `.btn-outline` reads the variable
+  `.btn-primary` sets and collapsing them discards the colour.
+- **`--state-warning-*` was referenced but never declared.**
+  `StateChip tone="warning"` and every `InlineBanner variant="warning"`
+  (so every `StaleWriteBanner`) emitted classes matching no rule and
+  rendered with no colour. Both bug classes are now build failures: see
+  `lib/theme-tokens.test.ts`.
+- **The copy-to-clipboard affordance leaked a timer and swallowed
+  rejections.** Unmounting inside the 1.5s confirmation window called
+  `setState` on a dead component, and a refused `navigator.clipboard`
+  write (insecure origin, permissions policy) was an unhandled rejection
+  with no user-visible result. Extracted to `CopyButton` and fixed once.
+
+### Added
+
+- `Money` and `formatMoney` — minor units in, `Intl`-derived exponents,
+  string-based scaling that stays exact past `Number.MAX_SAFE_INTEGER`.
+- `Calendar`, `DatePicker`, `DateRangePicker` on `react-day-picker`,
+  exchanging `YYYY-MM-DD` strings rather than `Date` objects.
+- `Checkbox` / `CheckboxField`, `Switch` / `SwitchField`, `Spinner`,
+  `Progress`, `Pagination`, `ConfirmDialog`, `MaskedValue`, `StatTile`,
+  `CopyButton`.
+
+### Dependencies
+
+- `tailwind-merge` 2.6 → 3.6 (the 3.x line targets Tailwind v4, which
+  this package already required).
+- `lucide-react` 0.469 → 1.44.
+- `react-day-picker` 10.0 added.
+- `@radix-ui/react-dialog` added as a direct dependency. It arrives
+  transitively through `vaul` regardless; declaring it is what lets
+  TypeScript name the drawer's re-exported types in the emitted
+  declarations (TS2742).

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Vaam Apps
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,286 @@
+# @vaam-apps/ui
+
+A dark-first React component library for **operator consoles** — the
+screens a person uses to find out why one record out of a hundred
+thousand did not do what it was supposed to.
+
+- **daisyUI** for styling, so component classes stay short and themeable.
+- **Headless UI** for behaviour, so focus, keyboard and ARIA are not
+  reimplemented per component.
+- **A parameterised status system**, so one glyph vocabulary serves every
+  state machine in an application instead of one badge component per
+  enum.
+
+Requires React 18.3+ or 19, Tailwind CSS v4, and daisyUI v5.
+
+```sh
+pnpm add @vaam-apps/ui
+```
+
+## Setup
+
+Two steps, and skipping the second is the most common way to end up with
+an unstyled page.
+
+**1. Import the token layer** into your global stylesheet, *after*
+Tailwind and the daisyUI plugin:
+
+```css
+@import "tailwindcss";
+@plugin "daisyui" {
+  themes: false;
+}
+@import "@vaam-apps/ui/styles/theme.css";
+@source "../node_modules/@vaam-apps/ui/dist";
+```
+
+**`themes: false` is load-bearing, not tidiness.** This package defines
+its theme under daisyUI's own `dark` name, and daisyUI's built-in `dark`
+emits at a higher specificity than any custom theme block can:
+
+```css
+/* daisyUI's built-in — specificity (0,3,1) */
+:is(:root:has(input.theme-controller[value=dark]:checked),[data-theme=dark]) { … }
+/* a custom theme block — specificity (0,1,0) */
+:where(:root),[data-theme=dark] { … }
+```
+
+The built-in therefore wins on every token it also defines — `base-100`,
+`base-200`, `base-300`, `base-content` — regardless of import order, so
+the page background, card surfaces and body text silently come out as
+stock daisyUI rather than this theme. Turning the built-ins off leaves
+nothing to collide with. Found by measuring a rendered page, not by
+reading: `--color-base-100` resolved to `oklch(25.33% .016 252.42)` where
+the theme declares `#0a0b0d`.
+
+**2. Keep the `@source` line.** Tailwind v4 generates only the utilities
+it can see used, and it does not look inside `node_modules` on its own.
+Without it every component renders with no styling at all — no error, no
+warning, just a page that looks broken in a way that is miserable to
+debug. Adjust the relative path to reach your own `node_modules`.
+
+The theme registers itself under daisyUI's `dark` name and sets
+`prefersdark`, so `<html data-theme="dark">` (or no attribute at all)
+picks it up.
+
+## What is in it
+
+### Primitives
+
+`Button` · `Input` · `Textarea` · `Label` · `FormField` · `Select` ·
+`RadioGroup` · `ChipSelect` · `Checkbox` · `Switch` · `Calendar` ·
+`DatePicker` · `DateRangePicker` · `Dialog` · `ConfirmDialog` · `Drawer` ·
+`Popover` · `DropdownMenu` · `CommandMenu` · `Tooltip` · `Toast` ·
+`Table` · `Tabs` · `Pagination` · `Card` · `Badge` · `Separator` ·
+`Skeleton` · `Spinner` · `Progress` · `SideNav` · `InlineConfirm`
+
+### Data display
+
+`Money` · `IdDisplay` · `PhoneDisplay` · `MaskedValue` · `CopyButton` ·
+`TimestampDisplay` · `DetailRow` / `DetailList` · `StatTile` · `Code`
+
+### Patterns
+
+`ScreenStack` / `ScreenHeader` · `InlineBanner` · `InlineEmptyState` ·
+`StaleWriteBanner` · `RouteSkeleton` · `PayloadInspector` ·
+`StateTimeline` · `LiveRow`
+
+### Status
+
+`StatusPill` · `createStatusPill` · `StateMark` · `StateChip` ·
+`defineStatusSystem` · `HUE_CLASSES`
+
+## The status system
+
+A status system is one state machine's presentation: every state it can
+be in, mapped to a glyph, a hue, an attention level and human copy. The
+library owns the vocabulary and the rendering. **The table belongs to
+you**, because what a state means is domain knowledge.
+
+```tsx
+import { createStatusPill, defineStatusSystem } from "@vaam-apps/ui";
+
+export const ORDER_STATUS = defineStatusSystem({
+  pending: {
+    family: "in-flight", silhouette: "circle", mark: "pie-1",
+    hue: "neutral", filled: false, attention: "quiet",
+    label: "Pending", tooltip: "Awaiting payment.",
+  },
+  paid: {
+    family: "terminal", silhouette: "circle", mark: "check",
+    hue: "success", filled: true, attention: "quiet",
+    label: "Paid", tooltip: "Settled and captured.",
+  },
+  disputed: {
+    family: "unresolved", silhouette: "diamond", mark: "question",
+    hue: "uncertain", filled: false, attention: "loud",
+    label: "Disputed", tooltip: "The payer opened a chargeback.",
+  },
+});
+
+export const OrderStatusPill = createStatusPill(ORDER_STATUS);
+```
+
+```tsx
+<OrderStatusPill state="disputed" showLiteral />
+```
+
+`state` accepts exactly that machine's literals, so a status from a
+different machine is a compile error. Add a second machine by calling
+`createStatusPill` again — the rendering is shared, the vocabularies stay
+apart.
+
+Three things about it are deliberate:
+
+- **Each state differs in silhouette, interior mark and fill as well as
+  hue.** Colour alone fails for the ~8% of men with a colour-vision
+  deficiency and fails completely in a monochrome screenshot pasted into
+  a ticket.
+- **`family` is presentational, never authorisation.** A UI that greys
+  out "cancel" because its own table says `terminal` will be wrong the
+  first time the state machine changes and nobody remembers the table
+  exists. Propose the action; let the server refuse it.
+- **`unresolved` is a first-class outcome**, distinct from success and
+  failure. Systems that model only two outcomes end up reporting "we
+  never learned what happened" as whichever is more convenient.
+
+## Money
+
+```tsx
+import { formatMoney, Money } from "@vaam-apps/ui";
+
+<Money amount={500_000} currency="XAF" />        // XAF 500,000
+<Money amount="1250" currency="USD" />           // USD 12.50
+formatMoney(1250, "KWD");                        // KWD 1.250
+```
+
+Amounts go in as an **integer count of minor units** — `number`,
+`bigint`, or a digit string, so an `i64` from a backend survives the
+trip. The decimal exponent comes from `Intl`, which knows every ISO 4217
+currency including the three-decimal ones (`KWD`, `BHD`, `TND`) that
+hand-written tables invariably forget. Scaling is string surgery, never
+division, so an amount past `Number.MAX_SAFE_INTEGER` formats exactly.
+A non-integer throws rather than being silently rounded.
+
+## Dates
+
+`DatePicker` and `DateRangePicker` wrap `react-day-picker` in a popover
+and exchange **`YYYY-MM-DD` strings, not `Date` objects**. A `Date` is an
+instant, and an instant rendered in another zone is a different calendar
+day — which is how a filter for "today" quietly returns yesterday's rows
+for anyone west of the server. `Date` is confined to the internals.
+
+```tsx
+const [range, setRange] = useState<IsoDateRange | undefined>();
+<DateRangePicker value={range} onValueChange={setRange} />
+```
+
+`Calendar` is the bare, themed `DayPicker` if you need a different shell.
+
+## `cn()`
+
+`clsx` + `tailwind-merge`, extended so the later class wins for this
+theme's own scales and for daisyUI's component modifiers:
+
+```ts
+cn("btn btn-primary", "btn-ghost");      // "btn btn-ghost"
+cn("btn btn-primary", "btn-outline");    // both — orthogonal in daisyUI 5
+cn("rounded-sm", "rounded-field");       // "rounded-field"
+cn("text-caption", "text-danger-fg");    // both — size and colour
+```
+
+That last case is the one worth knowing about: stock `tailwind-merge`
+classifies an unrecognised `text-*` value as a colour, so a custom font
+size sitting beside a colour is silently deleted. The scale is registered
+here so it is not.
+
+## Design constraints
+
+Worth knowing before you fight them:
+
+- **Borders, not shadows.** Cards and panels are a 1px border on a
+  surface step. Shadows are reserved for genuinely floating layers
+  (popover, dialog).
+- **There is no success or warning *button*.** Those hues belong to
+  status; a button is primary, secondary, ghost or destructive. Mixing
+  them is how a status language erodes.
+- **Empty states are inline status lines, not centred placards** — see
+  `InlineEmptyState`.
+- **Dark only.** There is one theme, and no toggle. A second theme is a
+  real amount of work to keep honest and nothing here pretends to have
+  done it.
+
+## The component gallery
+
+Every component is published as a Storybook at
+**<https://vaam-apps.github.io/ui/>**, redeployed from `main` on every
+push. The a11y panel runs axe on each story.
+
+## Development
+
+```sh
+pnpm install
+pnpm storybook        # the component gallery, at :6006
+pnpm test             # unit tests + the invariant guards
+pnpm typecheck
+pnpm lint             # biome, format and lint together
+pnpm build            # what npm receives: dist/ + declarations
+```
+
+**Storybook is the visual-QA surface**, and stories live beside the
+components they demonstrate. That colocation is deliberate: this package
+previously had its gallery in a consuming application, where it drifted —
+it claimed to render every export and had silently missed thirteen of
+them, including the three that turned out to be carrying live rendering
+bugs. A story in the same directory as its component at least shows up in
+the same diff.
+
+The `@storybook/addon-a11y` panel runs axe on every story. It is not
+decoration: it is what caught `--subtle-foreground` failing WCAG AA on
+every surface in the system, across 38 usages, by flagging fourteen
+calendar weekday headers at once.
+
+A few guards are worth knowing about before you trip one:
+
+- **`src/lib/theme-tokens.test.ts`** scans the components for
+  `bg-`/`text-`/`border-` tokens this stylesheet owns and fails if one is
+  not declared. Tailwind generates nothing for an unknown token and says
+  nothing about it, which has produced invisible transparent surfaces
+  here twice.
+- **`src/components/primitives/calendar.render.test.tsx`** renders the
+  calendar and asserts the classes land on the elements react-day-picker
+  actually emits. Its sibling `calendar.test.ts` only checks that the
+  `classNames` keys are real — necessary, and not sufficient: a valid key
+  carrying a class string written against a DOM shape that does not exist
+  is exactly how the selection styling silently matched nothing.
+- **`src/lib/cn.test.ts`** pins the merge behaviour, including the case
+  where `tailwind-merge` deletes a custom font size because it mistakes
+  it for a colour.
+
+## Releasing
+
+Tag `vX.Y.Z` matching `package.json`; `.github/workflows/release.yml`
+publishes to npm through Trusted Publishing (OIDC), with no token stored
+in this repository.
+
+**Except the very first publish, which that workflow cannot do.** npm
+attaches a trusted publisher to an *existing* package, so there is
+nothing to configure until the name exists. Bootstrap it once by hand:
+
+```sh
+npm login
+pnpm install
+pnpm publish --access public
+```
+
+Then add the trusted publisher on npmjs.com (repository `vaam-apps/ui`,
+workflow `release.yml`). Every later tag publishes tokenlessly.
+
+## Versioning
+
+Pre-1.0. Minor versions may contain breaking changes; pin exactly if that
+matters to you. See `CHANGELOG.md`.
+
+## Licence
+
+MIT.

package/dist/components/data/code.d.ts

@@ -0,0 +1,37 @@
+import type { ReactNode } from "react";
+/**
+ * Inline monospace emphasis for a literal term — a config key, a role key,
+ * a job kind, a model or field name.
+ *
+ * **Not `IdDisplay`, and the distinction is load-bearing.** `IdDisplay` is
+ * documented as specifically for `cs_cuid()` values: it truncates to seven
+ * characters with no middle ellipsis and offers a copy button, both of
+ * which are correct for an opaque 23-character id and wrong for anything
+ * else. Three separate agents independently checked their own sites
+ * against `schemas/vsms.cstack` and reached the same conclusion — none of
+ * these are `Cuid` (`AppClient.clientId` is a plain bounded `String`,
+ * `Role.key` is `@regex`-constrained, a route predicate is an operator or
+ * prefix, `providerMessageRef` is an *external* provider's id) — so
+ * routing them through `IdDisplay` would truncate values that must be read
+ * in full.
+ *
+ * This exists because `font-mono text-foreground` was the most-repeated
+ * class string left after the R6 factorization (31 occurrences), and
+ * because three route groups had already each created a byte-identical
+ * local `Code` component for it. Those three copies are exactly the
+ * "same shape, different name" duplication that produced two
+ * `ScreenHeader`s and two `MESSAGE_CLASSES` earlier in this effort — the
+ * agents that wrote them flagged the risk themselves and could not fix it,
+ * because a cross-route duplicate is not a route-scoped change.
+ *
+ * Renders a `<span>`, not a `<code>`: several call sites sit inside a
+ * `<dd>` or a sentence where `<code>` would add semantics the content does
+ * not have (a role key in prose is emphasis, not a code sample). A caller
+ * that genuinely wants `<code>` semantics should say so rather than have
+ * this component guess.
+ */
+export declare function Code({ children, className, }: {
+    children: ReactNode;
+    className?: string | undefined;
+}): import("react").JSX.Element;
+//# sourceMappingURL=code.d.ts.map

package/dist/components/data/code.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"code.d.ts","sourceRoot":"","sources":["../../../src/components/data/code.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,wBAAgB,IAAI,CAAC,EACnB,QAAQ,EACR,SAAS,GACV,EAAE;IACD,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAChC,+BAEA"}

package/dist/components/data/code.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/cn.js";
+/**
+ * Inline monospace emphasis for a literal term — a config key, a role key,
+ * a job kind, a model or field name.
+ *
+ * **Not `IdDisplay`, and the distinction is load-bearing.** `IdDisplay` is
+ * documented as specifically for `cs_cuid()` values: it truncates to seven
+ * characters with no middle ellipsis and offers a copy button, both of
+ * which are correct for an opaque 23-character id and wrong for anything
+ * else. Three separate agents independently checked their own sites
+ * against `schemas/vsms.cstack` and reached the same conclusion — none of
+ * these are `Cuid` (`AppClient.clientId` is a plain bounded `String`,
+ * `Role.key` is `@regex`-constrained, a route predicate is an operator or
+ * prefix, `providerMessageRef` is an *external* provider's id) — so
+ * routing them through `IdDisplay` would truncate values that must be read
+ * in full.
+ *
+ * This exists because `font-mono text-foreground` was the most-repeated
+ * class string left after the R6 factorization (31 occurrences), and
+ * because three route groups had already each created a byte-identical
+ * local `Code` component for it. Those three copies are exactly the
+ * "same shape, different name" duplication that produced two
+ * `ScreenHeader`s and two `MESSAGE_CLASSES` earlier in this effort — the
+ * agents that wrote them flagged the risk themselves and could not fix it,
+ * because a cross-route duplicate is not a route-scoped change.
+ *
+ * Renders a `<span>`, not a `<code>`: several call sites sit inside a
+ * `<dd>` or a sentence where `<code>` would add semantics the content does
+ * not have (a role key in prose is emphasis, not a code sample). A caller
+ * that genuinely wants `<code>` semantics should say so rather than have
+ * this component guess.
+ */
+export function Code({ children, className, }) {
+    return _jsx("span", { className: cn("font-mono text-foreground", className), children: children });
+}
+//# sourceMappingURL=code.js.map

package/dist/components/data/code.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"code.js","sourceRoot":"","sources":["../../../src/components/data/code.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAElC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,MAAM,UAAU,IAAI,CAAC,EACnB,QAAQ,EACR,SAAS,GAIV;IACC,OAAO,eAAM,SAAS,EAAE,EAAE,CAAC,2BAA2B,EAAE,SAAS,CAAC,YAAG,QAAQ,GAAQ,CAAC;AACxF,CAAC"}

package/dist/components/data/copy-button.d.ts

@@ -0,0 +1,39 @@
+export interface CopyButtonProps {
+    /** The exact text put on the clipboard. Always the full, unformatted,
+     * machine-readable value — never what is displayed. A truncated id or a
+     * prettily-spaced phone number pasted into a query returns nothing. */
+    value: string;
+    /** Accessible name. Defaults to `Copy ${value}`, which is right for a
+     * short id and wrong for a paragraph — pass something shorter then. */
+    label?: string | undefined;
+    /** Hide until the containing `.group` is hovered or this button is
+     * focused. For dense tables, where a permanently visible icon on every
+     * row is noise. Keyboard users always reach it: focus reveals it. */
+    revealOnGroupHover?: boolean;
+    size?: 12 | 14 | 16;
+    className?: string | undefined;
+}
+/**
+ * Copy-to-clipboard affordance: a click, then a checkmark for a moment.
+ *
+ * Extracted because `IdDisplay` and `MsisdnDisplay` each carried their own
+ * byte-identical copy — the same `useState`, the same 1500ms timeout, the
+ * same icon swap, the same class string — and any component that later
+ * wanted the behaviour would have written a third.
+ *
+ * Two things the duplicated versions got wrong, fixed here rather than
+ * copied a third time:
+ *
+ * - **The timeout was never cleared.** Unmounting within the confirmation
+ *   window (a row scrolling out of a virtualised table, a drawer closing)
+ *   left a timer that fired `setCopied` on a dead component. Now cleared
+ *   on unmount, and any in-flight timer is cleared before a new one
+ *   starts, so a double-click cannot end the confirmation early.
+ * - **A rejected `writeText` was unhandled.** `navigator.clipboard` is
+ *   unavailable on an insecure origin and can be refused by permissions
+ *   policy; the bare `await` meant an unhandled rejection and a button
+ *   that silently did nothing. Failure now leaves the icon unchanged,
+ *   which is at least honest, and reports the reason to the console.
+ */
+export declare function CopyButton({ value, label, revealOnGroupHover, size, className, }: CopyButtonProps): import("react").JSX.Element;
+//# sourceMappingURL=copy-button.d.ts.map

package/dist/components/data/copy-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"copy-button.d.ts","sourceRoot":"","sources":["../../../src/components/data/copy-button.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,eAAe;IAC9B;;2EAEuE;IACvE,KAAK,EAAE,MAAM,CAAC;IACd;2EACuE;IACvE,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B;;yEAEqE;IACrE,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,IAAI,CAAC,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAChC;AAID;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,KAAK,EACL,kBAA0B,EAC1B,IAAS,EACT,SAAS,GACV,EAAE,eAAe,+BA4CjB"}

package/dist/components/data/copy-button.js

@@ -0,0 +1,50 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Check, Copy } from "lucide-react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { cn } from "../../lib/cn.js";
+const CONFIRMATION_MS = 1500;
+/**
+ * Copy-to-clipboard affordance: a click, then a checkmark for a moment.
+ *
+ * Extracted because `IdDisplay` and `MsisdnDisplay` each carried their own
+ * byte-identical copy — the same `useState`, the same 1500ms timeout, the
+ * same icon swap, the same class string — and any component that later
+ * wanted the behaviour would have written a third.
+ *
+ * Two things the duplicated versions got wrong, fixed here rather than
+ * copied a third time:
+ *
+ * - **The timeout was never cleared.** Unmounting within the confirmation
+ *   window (a row scrolling out of a virtualised table, a drawer closing)
+ *   left a timer that fired `setCopied` on a dead component. Now cleared
+ *   on unmount, and any in-flight timer is cleared before a new one
+ *   starts, so a double-click cannot end the confirmation early.
+ * - **A rejected `writeText` was unhandled.** `navigator.clipboard` is
+ *   unavailable on an insecure origin and can be refused by permissions
+ *   policy; the bare `await` meant an unhandled rejection and a button
+ *   that silently did nothing. Failure now leaves the icon unchanged,
+ *   which is at least honest, and reports the reason to the console.
+ */
+export function CopyButton({ value, label, revealOnGroupHover = false, size = 12, className, }) {
+    const [copied, setCopied] = useState(false);
+    const timer = useRef(null);
+    useEffect(() => () => {
+        if (timer.current !== null)
+            clearTimeout(timer.current);
+    }, []);
+    const copy = useCallback(() => {
+        void navigator.clipboard.writeText(value).then(() => {
+            setCopied(true);
+            if (timer.current !== null)
+                clearTimeout(timer.current);
+            timer.current = setTimeout(() => setCopied(false), CONFIRMATION_MS);
+        }, (error) => {
+            // Insecure origin, or a permissions policy that forbids it. Leave
+            // the icon alone rather than claim a copy that did not happen.
+            console.error("Clipboard write refused", error);
+        });
+    }, [value]);
+    return (_jsx("button", { type: "button", onClick: copy, "aria-label": label ?? `Copy ${value}`, className: cn("shrink-0 text-subtle-foreground transition-opacity hover:text-foreground", revealOnGroupHover && "opacity-0 focus-visible:opacity-100 group-hover:opacity-100", className), children: copied ? (_jsx(Check, { size: size, strokeWidth: 1.5, className: "text-state-success-fg" })) : (_jsx(Copy, { size: size, strokeWidth: 1.5 })) }));
+}
+//# sourceMappingURL=copy-button.js.map

package/dist/components/data/copy-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"copy-button.js","sourceRoot":"","sources":["../../../src/components/data/copy-button.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjE,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAkBlC,MAAM,eAAe,GAAG,IAAI,CAAC;AAE7B;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,UAAU,UAAU,CAAC,EACzB,KAAK,EACL,KAAK,EACL,kBAAkB,GAAG,KAAK,EAC1B,IAAI,GAAG,EAAE,EACT,SAAS,GACO;IAChB,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5C,MAAM,KAAK,GAAG,MAAM,CAAuC,IAAI,CAAC,CAAC;IAEjE,SAAS,CACP,GAAG,EAAE,CAAC,GAAG,EAAE;QACT,IAAI,KAAK,CAAC,OAAO,KAAK,IAAI;YAAE,YAAY,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IAC1D,CAAC,EACD,EAAE,CACH,CAAC;IAEF,MAAM,IAAI,GAAG,WAAW,CAAC,GAAG,EAAE;QAC5B,KAAK,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,IAAI,CAC5C,GAAG,EAAE;YACH,SAAS,CAAC,IAAI,CAAC,CAAC;YAChB,IAAI,KAAK,CAAC,OAAO,KAAK,IAAI;gBAAE,YAAY,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;YACxD,KAAK,CAAC,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,eAAe,CAAC,CAAC;QACtE,CAAC,EACD,CAAC,KAAc,EAAE,EAAE;YACjB,kEAAkE;YAClE,+DAA+D;YAC/D,OAAO,CAAC,KAAK,CAAC,yBAAyB,EAAE,KAAK,CAAC,CAAC;QAClD,CAAC,CACF,CAAC;IACJ,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,OAAO,CACL,iBACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,gBACD,KAAK,IAAI,QAAQ,KAAK,EAAE,EACpC,SAAS,EAAE,EAAE,CACX,0EAA0E,EAC1E,kBAAkB,IAAI,6DAA6D,EACnF,SAAS,CACV,YAEA,MAAM,CAAC,CAAC,CAAC,CACR,KAAC,KAAK,IAAC,IAAI,EAAE,IAAI,EAAE,WAAW,EAAE,GAAG,EAAE,SAAS,EAAC,uBAAuB,GAAG,CAC1E,CAAC,CAAC,CAAC,CACF,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,WAAW,EAAE,GAAG,GAAI,CACvC,GACM,CACV,CAAC;AACJ,CAAC"}

package/dist/components/data/detail-row.d.ts

@@ -0,0 +1,69 @@
+import type { ReactNode } from "react";
+/**
+ * A labelled value in a detail drawer or summary panel — one `dt`/`dd`
+ * pair, wrapped in a `<div>` so the pair can be laid out as a unit.
+ *
+ * # Why this is shared, when four route-local copies said it should not be
+ *
+ * `providers/`, `routes/`, `sender-ids/` and `webhooks/` each carry a
+ * `components/detail-row.tsx` whose **code is byte-identical** — only the
+ * doc comments differ. Each of those comments argues, in good faith, that
+ * the component is route-local because "the identical shape repeats
+ * independently in the other three, each factored the same way in its own
+ * file". Four files justifying their own duplication by pointing at each
+ * other is the clearest possible signal the thing belongs here instead.
+ *
+ * They were written by four agents working in parallel on disjoint route
+ * groups, none of which could edit this package — a deliberate constraint,
+ * because the round before it produced two `ScreenHeader`s and two
+ * `MESSAGE_CLASSES` from agents that *could*. The trade was that
+ * cross-route duplicates get reconciled centrally afterwards. This is that.
+ *
+ * # The variants are the console's real, pre-existing treatments
+ *
+ * Nothing here is a new design. Eight sites were read first and their
+ * looks catalogued; the three variants below are exactly what was already
+ * on screen, so every converted site keeps its current appearance:
+ *
+ * - `inline` — label left, value right, on one line. The default, and what
+ *   the four route-local copies rendered.
+ * - `stacked` — label above value. What those same copies rendered under
+ *   their own `stacked` prop, for a value too long to sit beside its label.
+ * - `divided` — label above value, hairline rule beneath, last row
+ *   unruled. What `jobs`, `opt-outs` and `workers` each hand-rolled as a
+ *   private `*DetailField` helper.
+ *
+ * **One deliberate normalisation, called out rather than slipped in:**
+ * `audit-log` and the gallery used `flex justify-between gap-4` — the
+ * `inline` treatment with a slightly wider gap and no vertical centring.
+ * They map onto `inline` here, so those two drawers shift by one spacing
+ * step and gain baseline centring. That is a real, if small, visual change,
+ * and it is the point: the console should not render the same concept two
+ * ways because two people typed a different gap.
+ */
+export type DetailRowVariant = "inline" | "stacked" | "divided";
+export interface DetailRowProps {
+    label: ReactNode;
+    children: ReactNode;
+    variant?: DetailRowVariant | undefined;
+    className?: string | undefined;
+}
+export declare function DetailRow({ label, children, variant, className }: DetailRowProps): import("react").JSX.Element;
+/**
+ * The `<dl>` a group of [`DetailRow`]s belongs in.
+ *
+ * Exists so a caller cannot pair the rows with the wrong container — every
+ * one of the eight original sites wrapped its rows in a `<dl>` with its own
+ * spacing (`gap-2`, `gap-3`, or none), which is the same one-decision-in-
+ * many-places problem the rows themselves had, one level up.
+ *
+ * `divided` rows carry their own vertical rhythm through padding and the
+ * hairline rule, so the list adds no gap for them — passing `gap` there
+ * would double-space rows that are already separated by a border.
+ */
+export declare function DetailList({ children, variant, className, }: {
+    children: ReactNode;
+    variant?: DetailRowVariant | undefined;
+    className?: string | undefined;
+}): import("react").JSX.Element;
+//# sourceMappingURL=detail-row.d.ts.map