@charcuterie/ui 0.1.0

package/dist/index.js

@@ -0,0 +1,55 @@
+/**
+ * `@charcuterie/ui` — the one sanctioned barrel.
+ *
+ * Components never import each other through this file; they import
+ * the sibling module directly (`../Spinner/Spinner.tsx`). A barrel
+ * that a package's own internals go through turns every component
+ * into a dependency of every other one, which is how a 3 KB
+ * `Spinner` starts pulling in `MediaTile`.
+ *
+ * `"./src/*"` is also in `exports`, for the budget-sensitive
+ * consumers — `castkit/packages/slatecast` has 60 KB gz to spend and
+ * should be able to reach one component without the barrel. Same
+ * arrangement as `mux-magic/packages/tools`.
+ *
+ * The token **types and values** are re-exported at
+ * `@charcuterie/ui/tokens` rather than from here, so a React
+ * consumer's TypeScript never names a second package while Satori
+ * still gets `@charcuterie/tokens` with no React in sight.
+ *
+ * The token **stylesheet** is not, and M5 is why. There was a
+ * `"./tokens.css": "./node_modules/@charcuterie/tokens/dist/theme.css"`
+ * export here, and it resolved to nothing in the first real
+ * consumer: a hoisting linker puts `@charcuterie/tokens` at the
+ * *project* root, not inside this package, so that path exists only
+ * under a nesting one. A CSS `@import` fails silently in Tailwind —
+ * no error, no utilities, an unstyled app — which is exactly the
+ * class of failure `portal:` was chosen to catch
+ * ([decision](../../../docs/decisions/2026-07-29-consumers-link-tokens-by-portal-until-publish.md)).
+ * So a consumer installs both package names and imports
+ * `@charcuterie/tokens/theme.css` by its own name, which is what
+ * this package's README has always told it to do.
+ */
+export { Alert } from "./Alert/Alert.js";
+export { Badge } from "./Badge/Badge.js";
+export { Button } from "./Button/Button.js";
+export { Card } from "./Card/Card.js";
+export { BADGE_SIZE_CLASS, CONTROL_SIZE_CLASS, DOT_SIZE_CLASS, ICON_CONTROL_SIZE_CLASS, MIN_TOUCH_TARGET_CLASS, SPINNER_SIZE_CLASS, } from "./controlStyles.js";
+export { EmptyState } from "./EmptyState/EmptyState.js";
+export { IconButton } from "./IconButton/IconButton.js";
+export { DISABLED_CLASS, FOCUS_RING_CLASS, INTENT_APPEARANCE_CLASS, INTENT_CONTENT_CLASS, INTENT_HOVER_CLASS, INTENT_SOLID_FILL_CLASS, } from "./intentStyles.js";
+export { LiveStatusIndicator } from "./LiveStatusIndicator/LiveStatusIndicator.js";
+export { MediaTile } from "./MediaTile/MediaTile.js";
+export { mediaTransitions } from "./MediaTile/mediaStatus.js";
+export { Modal } from "./Modal/Modal.js";
+export { Popover } from "./Popover/Popover.js";
+export { ProgressBar } from "./ProgressBar/ProgressBar.js";
+export { getProgressIntent, toProgressPercent, toProgressValue, } from "./ProgressBar/progressValue.js";
+export { SegmentedControl } from "./SegmentedControl/SegmentedControl.js";
+export { Skeleton } from "./Skeleton/Skeleton.js";
+export { Spinner } from "./Spinner/Spinner.js";
+export { getAsyncIntent, getAsyncLabel, getConnectionIntent, getConnectionLabel, getIsConnectionBusy, } from "./statusIntent.js";
+export { Tabs } from "./Tabs/Tabs.js";
+export { toClassName } from "./toClassName.js";
+export { VisuallyHidden } from "./VisuallyHidden/VisuallyHidden.js";
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAMH,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAmB,CAAA;AAEzC,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAmB,CAAA;AAEzC,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAqB,CAAA;AAM5C,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAiB,CAAA;AAEtC,OAAO,EACL,gBAAgB,EAChB,kBAAkB,EAClB,cAAc,EACd,uBAAuB,EACvB,sBAAsB,EACtB,kBAAkB,GACnB,MAAM,oBAAoB,CAAA;AAK3B,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA6B,CAAA;AAExD,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA6B,CAAA;AAExD,OAAO,EACL,cAAc,EACd,gBAAgB,EAChB,uBAAuB,EACvB,oBAAoB,EACpB,kBAAkB,EAClB,uBAAuB,GACxB,MAAM,mBAAmB,CAAA;AAK1B,OAAO,EAAE,mBAAmB,EAAE,MAAM,8CAA+C,CAAA;AAKnF,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA2B,CAAA;AAErD,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAA;AAK7D,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAmB,CAAA;AAEzC,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAuB,CAAA;AAK/C,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA+B,CAAA;AAE3D,OAAO,EACL,iBAAiB,EACjB,iBAAiB,EACjB,eAAe,GAChB,MAAM,gCAAgC,CAAA;AAKvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,wCAAyC,CAAA;AAK1E,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAyB,CAAA;AAElD,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAuB,CAAA;AAC/C,OAAO,EACL,cAAc,EACd,aAAa,EACb,mBAAmB,EACnB,kBAAkB,EAClB,mBAAmB,GACpB,MAAM,mBAAmB,CAAA;AAO1B,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAiB,CAAA;AACtC,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAE9C,OAAO,EAAE,cAAc,EAAE,MAAM,oCAAqC,CAAA"}

package/dist/intentStyles.d.ts

@@ -0,0 +1,76 @@
+/**
+ * One intent → class map, for the whole fleet.
+ *
+ * This file is what M5 deletes from rip-deck. `TONE_CLASS` is
+ * declared *identically* in `VerdictBadge.tsx` and
+ * `TowerAlerts.tsx` today — hardcoded hexes and `slate-400`s, no
+ * light mode, no relationship to mux-magic's `statusClassMap` which
+ * spells the same idea a fourth way. Six intents x four
+ * appearances, named once, is the generalisation.
+ *
+ * **Every class name is written out in full, and that is not
+ * negotiable.** Tailwind v4 scans source text for *complete* class
+ * strings, so `` `bg-intent-${intent}-solid` `` generates nothing
+ * at all — the element renders unstyled with no error, no warning,
+ * and no failing test unless something checks. Something does:
+ * `tailwindCandidates.test.ts` compiles every literal in this
+ * package through the real Tailwind and fails on any candidate
+ * Tailwind cannot generate. That test is the reason this file is
+ * allowed to be 24 lines of near-duplication instead of a loop.
+ */
+import type { IntentName } from "@charcuterie/tokens";
+/**
+ * Four treatments, and the split is semantic rather than cosmetic:
+ *
+ *  - `solid` — the saturated fill. One per view, usually; it is the
+ *    thing you are meant to press.
+ *  - `soft` — the tinted treatment the fleet already reaches for on
+ *    status pills (`bg-blue-950 text-blue-300` in mux-magic,
+ *    `bg-amber-950/40 text-amber-200` in rip-deck).
+ *  - `outline` — border and content only. Reads as secondary
+ *    without claiming a surface.
+ *  - `ghost` — nothing until hovered. Toolbars and icon rows.
+ */
+export type IntentAppearance = "ghost" | "outline" | "soft" | "solid";
+export declare const INTENT_APPEARANCE_CLASS: Record<IntentName, Record<IntentAppearance, string>>;
+/**
+ * Hover, split out rather than folded into the appearance above —
+ * because most things wearing an intent are **not** interactive.
+ *
+ * A `Badge` that lightens under the cursor is telling the user it
+ * can be clicked, and rip-deck's verdict pills (which cannot) would
+ * inherit exactly that if the two maps were one. So an interactive
+ * component opts in, and a static one cannot accidentally opt in.
+ *
+ * `solid` hovers toward `solidHover`; the other three land on the
+ * intent's tinted surface, which is what gives a ghost toolbar
+ * button something to become.
+ */
+export declare const INTENT_HOVER_CLASS: Record<IntentName, Record<IntentAppearance, string>>;
+/**
+ * The fill colour on its own, for the parts of a component that are
+ * a bar or a dot rather than a box — a `ProgressBar`'s fill, a
+ * `LiveStatusIndicator`'s dot. Same values, no border and no hover,
+ * because neither of those is a surface anyone can point at.
+ */
+export declare const INTENT_SOLID_FILL_CLASS: Record<IntentName, string>;
+/** The same six as text, for a glyph or a dot's ring. */
+export declare const INTENT_CONTENT_CLASS: Record<IntentName, string>;
+/**
+ * The focus ring, in one place, reading the variant's own width and
+ * offset.
+ *
+ * `focus-visible` rather than `focus`: a mouse click on a button
+ * should not leave a ring behind, and every hand-rolled button in
+ * the inventory either rings on click or — more often — has
+ * `outline-none` with nothing put back.
+ */
+export declare const FOCUS_RING_CLASS = "focus-visible:outline-solid focus-visible:outline-(length:--focus-ring-width) focus-visible:outline-offset-(--focus-ring-offset) focus-visible:outline-focus-ring";
+/**
+ * WCAG 1.4.3 exempts *inactive* controls from contrast, which is
+ * the only reason `content.disabled` is allowed to be this quiet —
+ * and the exemption is honest only on something actually disabled.
+ * Keeping it in one constant is what stops it drifting onto prose.
+ */
+export declare const DISABLED_CLASS = "disabled:cursor-not-allowed disabled:border-border-subtle disabled:bg-surface-sunken disabled:text-content-disabled disabled:shadow-none";
+//# sourceMappingURL=intentStyles.d.ts.map

package/dist/intentStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"intentStyles.d.ts","sourceRoot":"","sources":["../src/intentStyles.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAA;AAErD;;;;;;;;;;;GAWG;AACH,MAAM,MAAM,gBAAgB,GACxB,OAAO,GACP,SAAS,GACT,MAAM,GACN,OAAO,CAAA;AAEX,eAAO,MAAM,uBAAuB,EAAE,MAAM,CAC1C,UAAU,EACV,MAAM,CAAC,gBAAgB,EAAE,MAAM,CAAC,CAwDjC,CAAA;AAED;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,kBAAkB,EAAE,MAAM,CACrC,UAAU,EACV,MAAM,CAAC,gBAAgB,EAAE,MAAM,CAAC,CAsCjC,CAAA;AAED;;;;;GAKG;AACH,eAAO,MAAM,uBAAuB,EAAE,MAAM,CAC1C,UAAU,EACV,MAAM,CAQP,CAAA;AAED,yDAAyD;AACzD,eAAO,MAAM,oBAAoB,EAAE,MAAM,CACvC,UAAU,EACV,MAAM,CAQP,CAAA;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,gBAAgB,sKACwI,CAAA;AAErK;;;;;GAKG;AACH,eAAO,MAAM,cAAc,6IACiH,CAAA"}

package/dist/intentStyles.js

@@ -0,0 +1,150 @@
+/**
+ * One intent → class map, for the whole fleet.
+ *
+ * This file is what M5 deletes from rip-deck. `TONE_CLASS` is
+ * declared *identically* in `VerdictBadge.tsx` and
+ * `TowerAlerts.tsx` today — hardcoded hexes and `slate-400`s, no
+ * light mode, no relationship to mux-magic's `statusClassMap` which
+ * spells the same idea a fourth way. Six intents x four
+ * appearances, named once, is the generalisation.
+ *
+ * **Every class name is written out in full, and that is not
+ * negotiable.** Tailwind v4 scans source text for *complete* class
+ * strings, so `` `bg-intent-${intent}-solid` `` generates nothing
+ * at all — the element renders unstyled with no error, no warning,
+ * and no failing test unless something checks. Something does:
+ * `tailwindCandidates.test.ts` compiles every literal in this
+ * package through the real Tailwind and fails on any candidate
+ * Tailwind cannot generate. That test is the reason this file is
+ * allowed to be 24 lines of near-duplication instead of a loop.
+ */
+export const INTENT_APPEARANCE_CLASS = {
+    neutral: {
+        ghost: "border-transparent bg-transparent text-content-primary",
+        outline: "border-intent-neutral-border bg-transparent text-intent-neutral-content",
+        soft: "border-intent-neutral-border bg-intent-neutral-surface text-intent-neutral-content",
+        solid: "border-transparent bg-intent-neutral-solid text-intent-neutral-on-solid",
+    },
+    accent: {
+        ghost: "border-transparent bg-transparent text-intent-accent-content",
+        outline: "border-intent-accent-border bg-transparent text-intent-accent-content",
+        soft: "border-intent-accent-border bg-intent-accent-surface text-intent-accent-content",
+        solid: "border-transparent bg-intent-accent-solid text-intent-accent-on-solid",
+    },
+    success: {
+        ghost: "border-transparent bg-transparent text-intent-success-content",
+        outline: "border-intent-success-border bg-transparent text-intent-success-content",
+        soft: "border-intent-success-border bg-intent-success-surface text-intent-success-content",
+        solid: "border-transparent bg-intent-success-solid text-intent-success-on-solid",
+    },
+    warning: {
+        ghost: "border-transparent bg-transparent text-intent-warning-content",
+        outline: "border-intent-warning-border bg-transparent text-intent-warning-content",
+        soft: "border-intent-warning-border bg-intent-warning-surface text-intent-warning-content",
+        solid: "border-transparent bg-intent-warning-solid text-intent-warning-on-solid",
+    },
+    danger: {
+        ghost: "border-transparent bg-transparent text-intent-danger-content",
+        outline: "border-intent-danger-border bg-transparent text-intent-danger-content",
+        soft: "border-intent-danger-border bg-intent-danger-surface text-intent-danger-content",
+        solid: "border-transparent bg-intent-danger-solid text-intent-danger-on-solid",
+    },
+    info: {
+        ghost: "border-transparent bg-transparent text-intent-info-content",
+        outline: "border-intent-info-border bg-transparent text-intent-info-content",
+        soft: "border-intent-info-border bg-intent-info-surface text-intent-info-content",
+        solid: "border-transparent bg-intent-info-solid text-intent-info-on-solid",
+    },
+};
+/**
+ * Hover, split out rather than folded into the appearance above —
+ * because most things wearing an intent are **not** interactive.
+ *
+ * A `Badge` that lightens under the cursor is telling the user it
+ * can be clicked, and rip-deck's verdict pills (which cannot) would
+ * inherit exactly that if the two maps were one. So an interactive
+ * component opts in, and a static one cannot accidentally opt in.
+ *
+ * `solid` hovers toward `solidHover`; the other three land on the
+ * intent's tinted surface, which is what gives a ghost toolbar
+ * button something to become.
+ */
+export const INTENT_HOVER_CLASS = {
+    neutral: {
+        ghost: "hover:bg-intent-neutral-surface",
+        outline: "hover:bg-intent-neutral-surface",
+        soft: "hover:bg-intent-neutral-surface-hover",
+        solid: "hover:bg-intent-neutral-solid-hover",
+    },
+    accent: {
+        ghost: "hover:bg-intent-accent-surface",
+        outline: "hover:bg-intent-accent-surface",
+        soft: "hover:bg-intent-accent-surface-hover",
+        solid: "hover:bg-intent-accent-solid-hover",
+    },
+    success: {
+        ghost: "hover:bg-intent-success-surface",
+        outline: "hover:bg-intent-success-surface",
+        soft: "hover:bg-intent-success-surface-hover",
+        solid: "hover:bg-intent-success-solid-hover",
+    },
+    warning: {
+        ghost: "hover:bg-intent-warning-surface",
+        outline: "hover:bg-intent-warning-surface",
+        soft: "hover:bg-intent-warning-surface-hover",
+        solid: "hover:bg-intent-warning-solid-hover",
+    },
+    danger: {
+        ghost: "hover:bg-intent-danger-surface",
+        outline: "hover:bg-intent-danger-surface",
+        soft: "hover:bg-intent-danger-surface-hover",
+        solid: "hover:bg-intent-danger-solid-hover",
+    },
+    info: {
+        ghost: "hover:bg-intent-info-surface",
+        outline: "hover:bg-intent-info-surface",
+        soft: "hover:bg-intent-info-surface-hover",
+        solid: "hover:bg-intent-info-solid-hover",
+    },
+};
+/**
+ * The fill colour on its own, for the parts of a component that are
+ * a bar or a dot rather than a box — a `ProgressBar`'s fill, a
+ * `LiveStatusIndicator`'s dot. Same values, no border and no hover,
+ * because neither of those is a surface anyone can point at.
+ */
+export const INTENT_SOLID_FILL_CLASS = {
+    neutral: "bg-intent-neutral-solid",
+    accent: "bg-intent-accent-solid",
+    success: "bg-intent-success-solid",
+    warning: "bg-intent-warning-solid",
+    danger: "bg-intent-danger-solid",
+    info: "bg-intent-info-solid",
+};
+/** The same six as text, for a glyph or a dot's ring. */
+export const INTENT_CONTENT_CLASS = {
+    neutral: "text-intent-neutral-content",
+    accent: "text-intent-accent-content",
+    success: "text-intent-success-content",
+    warning: "text-intent-warning-content",
+    danger: "text-intent-danger-content",
+    info: "text-intent-info-content",
+};
+/**
+ * The focus ring, in one place, reading the variant's own width and
+ * offset.
+ *
+ * `focus-visible` rather than `focus`: a mouse click on a button
+ * should not leave a ring behind, and every hand-rolled button in
+ * the inventory either rings on click or — more often — has
+ * `outline-none` with nothing put back.
+ */
+export const FOCUS_RING_CLASS = "focus-visible:outline-solid focus-visible:outline-(length:--focus-ring-width) focus-visible:outline-offset-(--focus-ring-offset) focus-visible:outline-focus-ring";
+/**
+ * WCAG 1.4.3 exempts *inactive* controls from contrast, which is
+ * the only reason `content.disabled` is allowed to be this quiet —
+ * and the exemption is honest only on something actually disabled.
+ * Keeping it in one constant is what stops it drifting onto prose.
+ */
+export const DISABLED_CLASS = "disabled:cursor-not-allowed disabled:border-border-subtle disabled:bg-surface-sunken disabled:text-content-disabled disabled:shadow-none";
+//# sourceMappingURL=intentStyles.js.map

package/dist/intentStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"intentStyles.js","sourceRoot":"","sources":["../src/intentStyles.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAsBH,MAAM,CAAC,MAAM,uBAAuB,GAGhC;IACF,OAAO,EAAE;QACP,KAAK,EACH,wDAAwD;QAC1D,OAAO,EACL,yEAAyE;QAC3E,IAAI,EAAE,oFAAoF;QAC1F,KAAK,EACH,yEAAyE;KAC5E;IACD,MAAM,EAAE;QACN,KAAK,EACH,8DAA8D;QAChE,OAAO,EACL,uEAAuE;QACzE,IAAI,EAAE,iFAAiF;QACvF,KAAK,EACH,uEAAuE;KAC1E;IACD,OAAO,EAAE;QACP,KAAK,EACH,+DAA+D;QACjE,OAAO,EACL,yEAAyE;QAC3E,IAAI,EAAE,oFAAoF;QAC1F,KAAK,EACH,yEAAyE;KAC5E;IACD,OAAO,EAAE;QACP,KAAK,EACH,+DAA+D;QACjE,OAAO,EACL,yEAAyE;QAC3E,IAAI,EAAE,oFAAoF;QAC1F,KAAK,EACH,yEAAyE;KAC5E;IACD,MAAM,EAAE;QACN,KAAK,EACH,8DAA8D;QAChE,OAAO,EACL,uEAAuE;QACzE,IAAI,EAAE,iFAAiF;QACvF,KAAK,EACH,uEAAuE;KAC1E;IACD,IAAI,EAAE;QACJ,KAAK,EACH,4DAA4D;QAC9D,OAAO,EACL,mEAAmE;QACrE,IAAI,EAAE,2EAA2E;QACjF,KAAK,EACH,mEAAmE;KACtE;CACF,CAAA;AAED;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAG3B;IACF,OAAO,EAAE;QACP,KAAK,EAAE,iCAAiC;QACxC,OAAO,EAAE,iCAAiC;QAC1C,IAAI,EAAE,uCAAuC;QAC7C,KAAK,EAAE,qCAAqC;KAC7C;IACD,MAAM,EAAE;QACN,KAAK,EAAE,gCAAgC;QACvC,OAAO,EAAE,gCAAgC;QACzC,IAAI,EAAE,sCAAsC;QAC5C,KAAK,EAAE,oCAAoC;KAC5C;IACD,OAAO,EAAE;QACP,KAAK,EAAE,iCAAiC;QACxC,OAAO,EAAE,iCAAiC;QAC1C,IAAI,EAAE,uCAAuC;QAC7C,KAAK,EAAE,qCAAqC;KAC7C;IACD,OAAO,EAAE;QACP,KAAK,EAAE,iCAAiC;QACxC,OAAO,EAAE,iCAAiC;QAC1C,IAAI,EAAE,uCAAuC;QAC7C,KAAK,EAAE,qCAAqC;KAC7C;IACD,MAAM,EAAE;QACN,KAAK,EAAE,gCAAgC;QACvC,OAAO,EAAE,gCAAgC;QACzC,IAAI,EAAE,sCAAsC;QAC5C,KAAK,EAAE,oCAAoC;KAC5C;IACD,IAAI,EAAE;QACJ,KAAK,EAAE,8BAA8B;QACrC,OAAO,EAAE,8BAA8B;QACvC,IAAI,EAAE,oCAAoC;QAC1C,KAAK,EAAE,kCAAkC;KAC1C;CACF,CAAA;AAED;;;;;GAKG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAGhC;IACF,OAAO,EAAE,yBAAyB;IAClC,MAAM,EAAE,wBAAwB;IAChC,OAAO,EAAE,yBAAyB;IAClC,OAAO,EAAE,yBAAyB;IAClC,MAAM,EAAE,wBAAwB;IAChC,IAAI,EAAE,sBAAsB;CAC7B,CAAA;AAED,yDAAyD;AACzD,MAAM,CAAC,MAAM,oBAAoB,GAG7B;IACF,OAAO,EAAE,6BAA6B;IACtC,MAAM,EAAE,4BAA4B;IACpC,OAAO,EAAE,6BAA6B;IACtC,OAAO,EAAE,6BAA6B;IACtC,MAAM,EAAE,4BAA4B;IACpC,IAAI,EAAE,0BAA0B;CACjC,CAAA;AAED;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAC3B,mKAAmK,CAAA;AAErK;;;;;GAKG;AACH,MAAM,CAAC,MAAM,cAAc,GACzB,0IAA0I,CAAA"}

package/dist/mountStory.testHelpers.d.ts

@@ -0,0 +1,30 @@
+import { within } from "storybook/test";
+type Canvas = ReturnType<typeof within>;
+/**
+ * Structural on purpose — the one thing this helper needs off a
+ * composed story. `ComposedStoryFn` is invariant in its `Args`, so
+ * naming it here would force every caller to restate the props of
+ * the component it is testing.
+ */
+type MountableStory = {
+    run: (context: {
+        canvasElement: HTMLElement;
+    }) => Promise<void>;
+};
+/**
+ * Mount a composed story into a fresh canvas and hand back the same
+ * two things a `play` function used to receive.
+ *
+ * `run()` — rather than rendering the component directly — is what
+ * keeps these tests honest after the story/test split: the subject
+ * is the story a reader sees, with its args, its decorators, and its
+ * loaders, not a second assembly of the same component that can
+ * drift from it. It is also what triggers the a11y addon's
+ * `afterEach`, so every mount here is an axe run.
+ */
+export declare const mountStory: (story: MountableStory) => Promise<{
+    canvas: Canvas;
+    canvasElement: HTMLElement;
+}>;
+export {};
+//# sourceMappingURL=mountStory.testHelpers.d.ts.map

package/dist/mountStory.testHelpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mountStory.testHelpers.d.ts","sourceRoot":"","sources":["../src/mountStory.testHelpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAEvC,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAA;AAEvC;;;;;GAKG;AACH,KAAK,cAAc,GAAG;IACpB,GAAG,EAAE,CAAC,OAAO,EAAE;QACb,aAAa,EAAE,WAAW,CAAA;KAC3B,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;CACpB,CAAA;AAED;;;;;;;;;;GAUG;AACH,eAAO,MAAM,UAAU,GACrB,OAAO,cAAc,KACpB,OAAO,CAAC;IACT,MAAM,EAAE,MAAM,CAAA;IACd,aAAa,EAAE,WAAW,CAAA;CAC3B,CAQA,CAAA"}

package/dist/mountStory.testHelpers.js

@@ -0,0 +1,19 @@
+import { within } from "storybook/test";
+/**
+ * Mount a composed story into a fresh canvas and hand back the same
+ * two things a `play` function used to receive.
+ *
+ * `run()` — rather than rendering the component directly — is what
+ * keeps these tests honest after the story/test split: the subject
+ * is the story a reader sees, with its args, its decorators, and its
+ * loaders, not a second assembly of the same component that can
+ * drift from it. It is also what triggers the a11y addon's
+ * `afterEach`, so every mount here is an axe run.
+ */
+export const mountStory = async (story) => {
+    const canvasElement = document.createElement("div");
+    document.body.append(canvasElement);
+    await story.run({ canvasElement });
+    return { canvas: within(canvasElement), canvasElement };
+};
+//# sourceMappingURL=mountStory.testHelpers.js.map

package/dist/mountStory.testHelpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mountStory.testHelpers.js","sourceRoot":"","sources":["../src/mountStory.testHelpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAgBvC;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,KAAK,EAC7B,KAAqB,EAIpB,EAAE;IACH,MAAM,aAAa,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAA;IAEnD,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,CAAA;IAEnC,MAAM,KAAK,CAAC,GAAG,CAAC,EAAE,aAAa,EAAE,CAAC,CAAA;IAElC,OAAO,EAAE,MAAM,EAAE,MAAM,CAAC,aAAa,CAAC,EAAE,aAAa,EAAE,CAAA;AACzD,CAAC,CAAA"}

package/dist/statusIntent.d.ts

@@ -0,0 +1,33 @@
+/**
+ * The two shared machines → an intent and a human label.
+ *
+ * This is the join M2 promised and the reason `Status` earned its
+ * place as a fifth state kind. `Badge` and `LiveStatusIndicator`
+ * consume `connectionTransitions` / `asyncTransitions` through
+ * these functions, so a connection state has **one** colour and
+ * **one** wording across the fleet — against four repos that each
+ * spell the same four states differently today, and one
+ * (`mux-magic`) whose `statusClassMap` is a
+ * `Record<string, string>` that silently renders an unknown status
+ * with no colour at all.
+ *
+ * Every switch here ends in `assertNeverStatus`, which is the whole
+ * point: add a state to `connectionTransitions` and this file stops
+ * compiling. A `Record<string, string>` would have shipped a blank
+ * badge instead.
+ */
+import type { AsyncStatus, ConnectionStatus } from "@charcuterie/logic";
+import type { IntentName } from "@charcuterie/tokens";
+export declare const getConnectionIntent: (status: ConnectionStatus) => IntentName;
+/**
+ * The ellipsis is a real `…`, not three dots, and the trailing one
+ * is load-bearing: it is what makes "Reconnecting…" read as
+ * in-progress to someone who glances at a wall-mounted panel from
+ * across the room.
+ */
+export declare const getConnectionLabel: (status: ConnectionStatus) => string;
+/** Whether the state is one a moving affordance should mark. */
+export declare const getIsConnectionBusy: (status: ConnectionStatus) => boolean;
+export declare const getAsyncIntent: (status: AsyncStatus) => IntentName;
+export declare const getAsyncLabel: (status: AsyncStatus) => string;
+//# sourceMappingURL=statusIntent.d.ts.map

package/dist/statusIntent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"statusIntent.d.ts","sourceRoot":"","sources":["../src/statusIntent.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAEH,OAAO,KAAK,EACV,WAAW,EACX,gBAAgB,EACjB,MAAM,oBAAoB,CAAA;AAE3B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAA;AAErD,eAAO,MAAM,mBAAmB,GAC9B,QAAQ,gBAAgB,KACvB,UAqBF,CAAA;AAED;;;;;GAKG;AACH,eAAO,MAAM,kBAAkB,GAC7B,QAAQ,gBAAgB,KACvB,MAiBF,CAAA;AAED,gEAAgE;AAChE,eAAO,MAAM,mBAAmB,GAC9B,QAAQ,gBAAgB,KACvB,OAaF,CAAA;AAED,eAAO,MAAM,cAAc,GACzB,QAAQ,WAAW,KAClB,UAiBF,CAAA;AAED,eAAO,MAAM,aAAa,GACxB,QAAQ,WAAW,KAClB,MAiBF,CAAA"}

package/dist/statusIntent.js

@@ -0,0 +1,99 @@
+/**
+ * The two shared machines → an intent and a human label.
+ *
+ * This is the join M2 promised and the reason `Status` earned its
+ * place as a fifth state kind. `Badge` and `LiveStatusIndicator`
+ * consume `connectionTransitions` / `asyncTransitions` through
+ * these functions, so a connection state has **one** colour and
+ * **one** wording across the fleet — against four repos that each
+ * spell the same four states differently today, and one
+ * (`mux-magic`) whose `statusClassMap` is a
+ * `Record<string, string>` that silently renders an unknown status
+ * with no colour at all.
+ *
+ * Every switch here ends in `assertNeverStatus`, which is the whole
+ * point: add a state to `connectionTransitions` and this file stops
+ * compiling. A `Record<string, string>` would have shipped a blank
+ * badge instead.
+ */
+import { assertNeverStatus } from "@charcuterie/logic";
+export const getConnectionIntent = (status) => {
+    switch (status) {
+        case "connected":
+            return "success";
+        case "connecting":
+            return "info";
+        // Warning rather than danger, and this is the distinction the
+        // shared machine exists for: a user who has seen data wants
+        // "lost it, getting it back", not the cold-start spinner they
+        // already sat through, and not the red of a dead link either.
+        case "reconnecting":
+            return "warning";
+        case "disconnected":
+            return "danger";
+        default:
+            return assertNeverStatus(status);
+    }
+};
+/**
+ * The ellipsis is a real `…`, not three dots, and the trailing one
+ * is load-bearing: it is what makes "Reconnecting…" read as
+ * in-progress to someone who glances at a wall-mounted panel from
+ * across the room.
+ */
+export const getConnectionLabel = (status) => {
+    switch (status) {
+        case "connected":
+            return "Connected";
+        case "connecting":
+            return "Connecting…";
+        case "reconnecting":
+            return "Reconnecting…";
+        case "disconnected":
+            return "Disconnected";
+        default:
+            return assertNeverStatus(status);
+    }
+};
+/** Whether the state is one a moving affordance should mark. */
+export const getIsConnectionBusy = (status) => {
+    switch (status) {
+        case "connecting":
+        case "reconnecting":
+            return true;
+        case "connected":
+        case "disconnected":
+            return false;
+        default:
+            return assertNeverStatus(status);
+    }
+};
+export const getAsyncIntent = (status) => {
+    switch (status) {
+        case "idle":
+            return "neutral";
+        case "loading":
+            return "info";
+        case "success":
+            return "success";
+        case "error":
+            return "danger";
+        default:
+            return assertNeverStatus(status);
+    }
+};
+export const getAsyncLabel = (status) => {
+    switch (status) {
+        case "idle":
+            return "Idle";
+        case "loading":
+            return "Loading…";
+        case "success":
+            return "Done";
+        case "error":
+            return "Failed";
+        default:
+            return assertNeverStatus(status);
+    }
+};
+//# sourceMappingURL=statusIntent.js.map

package/dist/statusIntent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"statusIntent.js","sourceRoot":"","sources":["../src/statusIntent.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAMH,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAA;AAGtD,MAAM,CAAC,MAAM,mBAAmB,GAAG,CACjC,MAAwB,EACZ,EAAE;IACd,QAAQ,MAAM,EAAE,CAAC;QACf,KAAK,WAAW;YACd,OAAO,SAAS,CAAA;QAElB,KAAK,YAAY;YACf,OAAO,MAAM,CAAA;QAEf,8DAA8D;QAC9D,4DAA4D;QAC5D,8DAA8D;QAC9D,8DAA8D;QAC9D,KAAK,cAAc;YACjB,OAAO,SAAS,CAAA;QAElB,KAAK,cAAc;YACjB,OAAO,QAAQ,CAAA;QAEjB;YACE,OAAO,iBAAiB,CAAC,MAAM,CAAC,CAAA;IACpC,CAAC;AACH,CAAC,CAAA;AAED;;;;;GAKG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAChC,MAAwB,EAChB,EAAE;IACV,QAAQ,MAAM,EAAE,CAAC;QACf,KAAK,WAAW;YACd,OAAO,WAAW,CAAA;QAEpB,KAAK,YAAY;YACf,OAAO,aAAa,CAAA;QAEtB,KAAK,cAAc;YACjB,OAAO,eAAe,CAAA;QAExB,KAAK,cAAc;YACjB,OAAO,cAAc,CAAA;QAEvB;YACE,OAAO,iBAAiB,CAAC,MAAM,CAAC,CAAA;IACpC,CAAC;AACH,CAAC,CAAA;AAED,gEAAgE;AAChE,MAAM,CAAC,MAAM,mBAAmB,GAAG,CACjC,MAAwB,EACf,EAAE;IACX,QAAQ,MAAM,EAAE,CAAC;QACf,KAAK,YAAY,CAAC;QAClB,KAAK,cAAc;YACjB,OAAO,IAAI,CAAA;QAEb,KAAK,WAAW,CAAC;QACjB,KAAK,cAAc;YACjB,OAAO,KAAK,CAAA;QAEd;YACE,OAAO,iBAAiB,CAAC,MAAM,CAAC,CAAA;IACpC,CAAC;AACH,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,cAAc,GAAG,CAC5B,MAAmB,EACP,EAAE;IACd,QAAQ,MAAM,EAAE,CAAC;QACf,KAAK,MAAM;YACT,OAAO,SAAS,CAAA;QAElB,KAAK,SAAS;YACZ,OAAO,MAAM,CAAA;QAEf,KAAK,SAAS;YACZ,OAAO,SAAS,CAAA;QAElB,KAAK,OAAO;YACV,OAAO,QAAQ,CAAA;QAEjB;YACE,OAAO,iBAAiB,CAAC,MAAM,CAAC,CAAA;IACpC,CAAC;AACH,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,aAAa,GAAG,CAC3B,MAAmB,EACX,EAAE;IACV,QAAQ,MAAM,EAAE,CAAC;QACf,KAAK,MAAM;YACT,OAAO,MAAM,CAAA;QAEf,KAAK,SAAS;YACZ,OAAO,UAAU,CAAA;QAEnB,KAAK,SAAS;YACZ,OAAO,MAAM,CAAA;QAEf,KAAK,OAAO;YACV,OAAO,QAAQ,CAAA;QAEjB;YACE,OAAO,iBAAiB,CAAC,MAAM,CAAC,CAAA;IACpC,CAAC;AACH,CAAC,CAAA"}

package/dist/styles.css

@@ -0,0 +1,130 @@
+/* `@charcuterie/ui/styles.css` — the four looping affordances, and
+ * nothing else.
+ *
+ * Every other visual in this package is a Tailwind utility reading
+ * a token, which is what makes a scheme/density/variant flip a
+ * repaint with no re-render. Animation is the one thing utilities
+ * cannot express against our tokens: Tailwind's own `animate-spin`
+ * and `animate-pulse` hardcode 1s and 2s, ignore
+ * `prefers-reduced-motion`, and are therefore beyond the theme's
+ * reach — which is exactly why `MotionTokens` carries a separate
+ * `loopFast`/`loopSlow` ramp.
+ *
+ * Consumers import this once, after `@charcuterie/tokens/theme.css`.
+ *
+ * The reduced-motion block is not a nicety. `variables.css` already
+ * collapses every duration to `0ms`, and for a *transition* that is
+ * the whole fix — but `animation: sweep 0ms infinite` still paints
+ * its first keyframe forever, and the first keyframe of a sweep is
+ * an off-screen bar. So each loop is switched off outright and owes
+ * a static fallback that still reads correctly, which is what the
+ * `@media` block below supplies. A spinner that stops spinning must
+ * still say "loading", and it does: the label is text in a
+ * `role="status"`, not the animation. */
+
+@keyframes charcuterie-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes charcuterie-shimmer {
+  from {
+    background-position: 100% 0;
+  }
+
+  to {
+    background-position: -100% 0;
+  }
+}
+
+/* Logical, not `translateX`. A sweep is the one animation whose
+ * direction carries meaning — it reads as "moving forward" — so in
+ * RTL it has to move the other way, and `inset-inline-start` is
+ * what makes that free. */
+@keyframes charcuterie-sweep {
+  from {
+    inset-inline-start: -40%;
+  }
+
+  to {
+    inset-inline-start: 100%;
+  }
+}
+
+@keyframes charcuterie-pulse {
+  0% {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  50% {
+    opacity: 0.45;
+    transform: scale(0.82);
+  }
+
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.charcuterie-spin {
+  animation: charcuterie-spin var(--duration-loop-fast)
+    linear infinite;
+}
+
+.charcuterie-shimmer {
+  background-image: linear-gradient(
+    90deg,
+    var(--color-surface-sunken) 0%,
+    var(--color-surface-raised) 50%,
+    var(--color-surface-sunken) 100%
+  );
+  background-size: 200% 100%;
+  animation: charcuterie-shimmer var(--duration-loop-slow)
+    var(--easing-standard) infinite;
+}
+
+.charcuterie-sweep {
+  animation: charcuterie-sweep var(--duration-loop-slow)
+    var(--easing-standard) infinite;
+}
+
+.charcuterie-pulse {
+  animation: charcuterie-pulse var(--duration-loop-slow)
+    var(--easing-standard) infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .charcuterie-spin,
+  .charcuterie-shimmer,
+  .charcuterie-sweep,
+  .charcuterie-pulse {
+    animation: none;
+  }
+
+  /* Flat, not mid-gradient: a stopped shimmer left holding its
+   * first keyframe is a lopsided highlight that reads as a
+   * rendering bug rather than as a placeholder. */
+  .charcuterie-shimmer {
+    background-image: none;
+    background-color: var(--color-surface-sunken);
+  }
+
+  /* The sweep's static fallback carries the whole meaning of the
+   * indeterminate state — "working, no measurable progress" — so it
+   * fills the track with hatching rather than parking a bar at one
+   * end, where it would read as either finished or stuck. */
+  .charcuterie-sweep {
+    inset-inline-start: 0;
+    inline-size: 100%;
+    background-image: repeating-linear-gradient(
+      135deg,
+      currentColor 0,
+      currentColor 2px,
+      transparent 2px,
+      transparent 6px
+    );
+  }
+}