@charcuterie/ui 0.1.0

package/dist/Button/Button.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CONTROL_SIZE_CLASS, ICON_CONTROL_SIZE_CLASS, } from "../controlStyles.js";
+import { DISABLED_CLASS, FOCUS_RING_CLASS, INTENT_APPEARANCE_CLASS, INTENT_HOVER_CLASS, } from "../intentStyles.js";
+import { Spinner } from "../Spinner/Spinner.js";
+import { toClassName } from "../toClassName.js";
+/**
+ * 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 const Button = ({ appearance = "solid", children, className, iconEnd, iconStart, intent = "accent", isDisabled = false, isFullWidth = false, isLoading = false, loadingLabel = "Loading…", size = "md", sizing = "control", type = "button", ...buttonProps }) => (_jsxs("button", { ...buttonProps, "aria-busy": isLoading || undefined, className: toClassName("inline-flex cursor-pointer items-center justify-center rounded-md border font-medium whitespace-nowrap transition-colors duration-(--duration-fast) ease-standard select-none", sizing === "icon"
+        ? ICON_CONTROL_SIZE_CLASS[size]
+        : CONTROL_SIZE_CLASS[size], INTENT_APPEARANCE_CLASS[intent][appearance], INTENT_HOVER_CLASS[intent][appearance], FOCUS_RING_CLASS, DISABLED_CLASS, isFullWidth && "w-full", className), disabled: isDisabled || isLoading, type: type, children: [isLoading ? (_jsx(Spinner, { label: loadingLabel, size: size })) : (iconStart), children, iconEnd] }));
+//# sourceMappingURL=Button.js.map

package/dist/Button/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../src/Button/Button.tsx"],"names":[],"mappings":";AASA,OAAO,EACL,kBAAkB,EAClB,uBAAuB,GACxB,MAAM,qBAAqB,CAAA;AAE5B,OAAO,EACL,cAAc,EACd,gBAAgB,EAChB,uBAAuB,EACvB,kBAAkB,GACnB,MAAM,oBAAoB,CAAA;AAC3B,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAwB,CAAA;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AA+B/C;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,EACrB,UAAU,GAAG,OAAO,EACpB,QAAQ,EACR,SAAS,EACT,OAAO,EACP,SAAS,EACT,MAAM,GAAG,QAAQ,EACjB,UAAU,GAAG,KAAK,EAClB,WAAW,GAAG,KAAK,EACnB,SAAS,GAAG,KAAK,EACjB,YAAY,GAAG,UAAU,EACzB,IAAI,GAAG,IAAI,EACX,MAAM,GAAG,SAAS,EAClB,IAAI,GAAG,QAAQ,EACf,GAAG,WAAW,EACF,EAAa,EAAE,CAAC,CAC5B,qBACM,WAAW,eACJ,SAAS,IAAI,SAAS,EACjC,SAAS,EAAE,WAAW,CACpB,+KAA+K,EAC/K,MAAM,KAAK,MAAM;QACf,CAAC,CAAC,uBAAuB,CAAC,IAAI,CAAC;QAC/B,CAAC,CAAC,kBAAkB,CAAC,IAAI,CAAC,EAC5B,uBAAuB,CAAC,MAAM,CAAC,CAAC,UAAU,CAAC,EAC3C,kBAAkB,CAAC,MAAM,CAAC,CAAC,UAAU,CAAC,EACtC,gBAAgB,EAChB,cAAc,EACd,WAAW,IAAI,QAAQ,EACvB,SAAS,CACV,EACD,QAAQ,EAAE,UAAU,IAAI,SAAS,EACjC,IAAI,EAAE,IAAI,aAET,SAAS,CAAC,CAAC,CAAC,CACX,KAAC,OAAO,IAAC,KAAK,EAAE,YAAY,EAAE,IAAI,EAAE,IAAI,GAAI,CAC7C,CAAC,CAAC,CAAC,CACF,SAAS,CACV,EAEA,QAAQ,EAER,OAAO,IACD,CACV,CAAA"}

package/dist/Card/Card.d.ts

@@ -0,0 +1,44 @@
+import type { ElevationStep, SurfaceRole } from "@charcuterie/tokens";
+import type { ComponentPropsWithRef, ReactNode } from "react";
+export type CardSurface = Extract<SurfaceRole, "base" | "raised" | "sunken">;
+export type CardPadding = "lg" | "md" | "none" | "sm";
+export type CardProps = ComponentPropsWithRef<"section"> & {
+    /** Buttons or a badge, laid out beside the heading. */
+    actions?: ReactNode;
+    elevation?: ElevationStep;
+    footer?: ReactNode;
+    heading?: string;
+    headingLevel?: 2 | 3 | 4;
+    padding?: CardPadding;
+    surface?: CardSurface;
+};
+/**
+ * Exported only so the story can derive its `elevation` control from
+ * the same map the component indexes — `ElevationStep` comes from
+ * `@charcuterie/tokens`, which react-docgen will not follow, so the
+ * options have to be stated and this is the one statement of them
+ * that cannot drift.
+ */
+export declare const ELEVATION_CLASS: Record<ElevationStep, string>;
+/**
+ * Five repos, and the reason this is a P0 rather than a nicety is
+ * the `<section>`: give a card a heading and it becomes a landmark,
+ * so `getByRole("region", { name: "Bay 3" })` scopes every
+ * subsequent query to that card. Without it, an agent driving a
+ * 16-bay tower has sixteen identical "Start" buttons and no way to
+ * say which one it means.
+ *
+ * `aria-labelledby` rather than `aria-label`, because the heading is
+ * on screen already and stating the name twice is how the two drift
+ * apart.
+ *
+ * **Density is not a prop here.** mux-magic's inventory turned up a
+ * `CardDensityProvider` in the withdrawn bambuddy evidence, and it
+ * is the wrong shape for this fleet: density is a global axis on
+ * `<html>`, so a compact bay list is `data-density="compact"` on the
+ * page, not a context around the cards. `padding` remains a prop
+ * because a card wrapping a poster grid genuinely has none, which is
+ * a layout fact rather than a density one.
+ */
+export declare const Card: ({ actions, children, className, elevation, footer, heading, headingLevel, padding, surface, ...sectionProps }: CardProps) => ReactNode;
+//# sourceMappingURL=Card.d.ts.map

package/dist/Card/Card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../src/Card/Card.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,aAAa,EACb,WAAW,EACZ,MAAM,qBAAqB,CAAA;AAC5B,OAAO,KAAK,EACV,qBAAqB,EACrB,SAAS,EACV,MAAM,OAAO,CAAA;AAId,MAAM,MAAM,WAAW,GAAG,OAAO,CAC/B,WAAW,EACX,MAAM,GAAG,QAAQ,GAAG,QAAQ,CAC7B,CAAA;AAED,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,GAAG,IAAI,CAAA;AAErD,MAAM,MAAM,SAAS,GAAG,qBAAqB,CAAC,SAAS,CAAC,GAAG;IACzD,uDAAuD;IACvD,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,SAAS,CAAC,EAAE,aAAa,CAAA;IACzB,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;IACxB,OAAO,CAAC,EAAE,WAAW,CAAA;IACrB,OAAO,CAAC,EAAE,WAAW,CAAA;CACtB,CAAA;AAQD;;;;;;GAMG;AACH,eAAO,MAAM,eAAe,EAAE,MAAM,CAClC,aAAa,EACb,MAAM,CAMP,CAAA;AASD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,IAAI,GAAI,+GAWlB,SAAS,KAAG,SAkDd,CAAA"}

package/dist/Card/Card.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useUniqueId } from "@charcuterie/logic";
+import { toClassName } from "../toClassName.js";
+const SURFACE_CLASS = {
+    base: "bg-surface-base",
+    raised: "bg-surface-raised",
+    sunken: "bg-surface-sunken",
+};
+/**
+ * Exported only so the story can derive its `elevation` control from
+ * the same map the component indexes — `ElevationStep` comes from
+ * `@charcuterie/tokens`, which react-docgen will not follow, so the
+ * options have to be stated and this is the one statement of them
+ * that cannot drift.
+ */
+export const ELEVATION_CLASS = {
+    none: "shadow-none",
+    low: "shadow-low",
+    medium: "shadow-medium",
+    high: "shadow-high",
+};
+const PADDING_CLASS = {
+    none: "p-0",
+    sm: "p-3",
+    md: "p-4",
+    lg: "p-6",
+};
+/**
+ * Five repos, and the reason this is a P0 rather than a nicety is
+ * the `<section>`: give a card a heading and it becomes a landmark,
+ * so `getByRole("region", { name: "Bay 3" })` scopes every
+ * subsequent query to that card. Without it, an agent driving a
+ * 16-bay tower has sixteen identical "Start" buttons and no way to
+ * say which one it means.
+ *
+ * `aria-labelledby` rather than `aria-label`, because the heading is
+ * on screen already and stating the name twice is how the two drift
+ * apart.
+ *
+ * **Density is not a prop here.** mux-magic's inventory turned up a
+ * `CardDensityProvider` in the withdrawn bambuddy evidence, and it
+ * is the wrong shape for this fleet: density is a global axis on
+ * `<html>`, so a compact bay list is `data-density="compact"` on the
+ * page, not a context around the cards. `padding` remains a prop
+ * because a card wrapping a poster grid genuinely has none, which is
+ * a layout fact rather than a density one.
+ */
+export const Card = ({ actions, children, className, elevation = "low", footer, heading, headingLevel = 2, padding = "md", surface = "raised", ...sectionProps }) => {
+    const headingId = useUniqueId();
+    const Heading = `h${headingLevel}`;
+    return (_jsxs("section", { ...sectionProps, "aria-labelledby": heading ? headingId : undefined, className: toClassName(
+        // `@container` here, not on a wrapper, is what lets the
+        // header stack at narrow widths *inside a wide viewport* —
+        // a card in a sidebar and the same card full-bleed are the
+        // case a media query cannot tell apart, and the fleet's
+        // poster grids get it wrong at intermediate widths today.
+        "@container flex flex-col gap-3 rounded-lg border border-border-subtle text-content-primary", SURFACE_CLASS[surface], ELEVATION_CLASS[elevation], PADDING_CLASS[padding], className), children: [heading || actions ? (_jsxs("header", { className: "flex flex-col gap-2 cq-sm:flex-row cq-sm:items-start cq-sm:justify-between", children: [heading ? (_jsx(Heading, { className: "font-semibold text-md leading-tight", id: headingId, children: heading })) : null, actions ? (_jsx("div", { className: "flex shrink-0 items-center gap-1", children: actions })) : null] })) : null, children, footer ? (_jsx("footer", { className: "border-t border-border-subtle pt-3 text-content-secondary text-sm", children: footer })) : null] }));
+};
+//# sourceMappingURL=Card.js.map

package/dist/Card/Card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../src/Card/Card.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAUhD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAoB/C,MAAM,aAAa,GAAgC;IACjD,IAAI,EAAE,iBAAiB;IACvB,MAAM,EAAE,mBAAmB;IAC3B,MAAM,EAAE,mBAAmB;CAC5B,CAAA;AAED;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,eAAe,GAGxB;IACF,IAAI,EAAE,aAAa;IACnB,GAAG,EAAE,YAAY;IACjB,MAAM,EAAE,eAAe;IACvB,IAAI,EAAE,aAAa;CACpB,CAAA;AAED,MAAM,aAAa,GAAgC;IACjD,IAAI,EAAE,KAAK;IACX,EAAE,EAAE,KAAK;IACT,EAAE,EAAE,KAAK;IACT,EAAE,EAAE,KAAK;CACV,CAAA;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,EACnB,OAAO,EACP,QAAQ,EACR,SAAS,EACT,SAAS,GAAG,KAAK,EACjB,MAAM,EACN,OAAO,EACP,YAAY,GAAG,CAAC,EAChB,OAAO,GAAG,IAAI,EACd,OAAO,GAAG,QAAQ,EAClB,GAAG,YAAY,EACL,EAAa,EAAE;IACzB,MAAM,SAAS,GAAG,WAAW,EAAE,CAAA;IAE/B,MAAM,OAAO,GAAG,IAAI,YAAY,EAAW,CAAA;IAE3C,OAAO,CACL,sBACM,YAAY,qBACC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EAChD,SAAS,EAAE,WAAW;QACpB,wDAAwD;QACxD,2DAA2D;QAC3D,2DAA2D;QAC3D,wDAAwD;QACxD,0DAA0D;QAC1D,4FAA4F,EAC5F,aAAa,CAAC,OAAO,CAAC,EACtB,eAAe,CAAC,SAAS,CAAC,EAC1B,aAAa,CAAC,OAAO,CAAC,EACtB,SAAS,CACV,aAEA,OAAO,IAAI,OAAO,CAAC,CAAC,CAAC,CACpB,kBAAQ,SAAS,EAAC,4EAA4E,aAC3F,OAAO,CAAC,CAAC,CAAC,CACT,KAAC,OAAO,IACN,SAAS,EAAC,qCAAqC,EAC/C,EAAE,EAAE,SAAS,YAEZ,OAAO,GACA,CACX,CAAC,CAAC,CAAC,IAAI,EAEP,OAAO,CAAC,CAAC,CAAC,CACT,cAAK,SAAS,EAAC,kCAAkC,YAC9C,OAAO,GACJ,CACP,CAAC,CAAC,CAAC,IAAI,IACD,CACV,CAAC,CAAC,CAAC,IAAI,EAEP,QAAQ,EAER,MAAM,CAAC,CAAC,CAAC,CACR,iBAAQ,SAAS,EAAC,mEAAmE,YAClF,MAAM,GACA,CACV,CAAC,CAAC,CAAC,IAAI,IACA,CACX,CAAA;AACH,CAAC,CAAA"}

package/dist/EmptyState/EmptyState.d.ts

@@ -0,0 +1,42 @@
+import type { ComponentPropsWithRef, ReactNode } from "react";
+export type EmptyStateSize = "md" | "sm";
+export type EmptyStateProps = Omit<ComponentPropsWithRef<"div">, "children"> & {
+    /** Buttons, usually. Rendered under the description. */
+    action?: ReactNode;
+    description?: ReactNode;
+    /**
+     * A real heading element, and the level is the caller's because
+     * only the caller knows what it sits under. Getting this wrong
+     * breaks a screen reader's document outline, which is how the
+     * fleet's `<h2>`-with-a-`<button>`-inside pattern happened.
+     */
+    headingLevel?: 2 | 3 | 4;
+    heading: string;
+    icon?: ReactNode;
+    size?: EmptyStateSize;
+};
+/**
+ * **Six repos, eleven-plus copies** — plex-channels alone has five
+ * `li.empty`s and castkit six `.idle`s — and not one of them is a
+ * component. Every copy is a bare string in a `<div>`, so "no
+ * results" and "not started yet" and "the socket died" all look
+ * identical, and none of them is findable by role.
+ *
+ * Designed fresh rather than ported: the two repos that had a real
+ * `EmptyState` with typed variants were bambuddy and spoolbuddy,
+ * which are upstream projects rather than Kevin's code, so that
+ * evidence was withdrawn from the plan.
+ *
+ * The shape is deliberately flat — icon, heading, description,
+ * action — with **no variant enum**. An "empty" and an "error" empty
+ * state differ in wording and in whether there is a retry button,
+ * both of which are props already; a `variant="error"` that only
+ * changes a colour invites callers to encode meaning in the colour
+ * alone, which is the one thing a colour cannot carry.
+ *
+ * The heading is what makes it agent-drivable:
+ * `getByRole("heading", { name: "No discs queued" })` works, where
+ * `getByText` against eleven copies of "Nothing here" does not.
+ */
+export declare const EmptyState: ({ action, className, description, heading, headingLevel, icon, size, ...divProps }: EmptyStateProps) => ReactNode;
+//# sourceMappingURL=EmptyState.d.ts.map

package/dist/EmptyState/EmptyState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyState.d.ts","sourceRoot":"","sources":["../../src/EmptyState/EmptyState.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,qBAAqB,EACrB,SAAS,EACV,MAAM,OAAO,CAAA;AAId,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,IAAI,CAAA;AAExC,MAAM,MAAM,eAAe,GAAG,IAAI,CAChC,qBAAqB,CAAC,KAAK,CAAC,EAC5B,UAAU,CACX,GAAG;IACF,wDAAwD;IACxD,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;IACxB,OAAO,EAAE,MAAM,CAAA;IACf,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,IAAI,CAAC,EAAE,cAAc,CAAA;CACtB,CAAA;AAUD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,UAAU,GAAI,oFASxB,eAAe,KAAG,SA6CpB,CAAA"}

package/dist/EmptyState/EmptyState.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { toClassName } from "../toClassName.js";
+const SIZE_CLASS = {
+    sm: "gap-2 px-4 py-6 text-sm",
+    // An empty state in a 300px panel and the same one filling a
+    // dashboard want different air. Container-relative, so it is the
+    // *panel* that decides rather than the window.
+    md: "gap-3 px-6 py-10 text-md cq-md:gap-4 cq-md:px-8 cq-md:py-14",
+};
+/**
+ * **Six repos, eleven-plus copies** — plex-channels alone has five
+ * `li.empty`s and castkit six `.idle`s — and not one of them is a
+ * component. Every copy is a bare string in a `<div>`, so "no
+ * results" and "not started yet" and "the socket died" all look
+ * identical, and none of them is findable by role.
+ *
+ * Designed fresh rather than ported: the two repos that had a real
+ * `EmptyState` with typed variants were bambuddy and spoolbuddy,
+ * which are upstream projects rather than Kevin's code, so that
+ * evidence was withdrawn from the plan.
+ *
+ * The shape is deliberately flat — icon, heading, description,
+ * action — with **no variant enum**. An "empty" and an "error" empty
+ * state differ in wording and in whether there is a retry button,
+ * both of which are props already; a `variant="error"` that only
+ * changes a colour invites callers to encode meaning in the colour
+ * alone, which is the one thing a colour cannot carry.
+ *
+ * The heading is what makes it agent-drivable:
+ * `getByRole("heading", { name: "No discs queued" })` works, where
+ * `getByText` against eleven copies of "Nothing here" does not.
+ */
+export const EmptyState = ({ action, className, description, heading, headingLevel = 2, icon, size = "md", ...divProps }) => {
+    const Heading = `h${headingLevel}`;
+    return (_jsx("div", { ...divProps, className: toClassName("@container", className), children: _jsxs("div", { className: toClassName("flex flex-col items-center justify-center text-center", SIZE_CLASS[size]), children: [icon ? (_jsx("span", { "aria-hidden": "true", className: "text-content-muted", children: icon })) : null, _jsx(Heading, { className: "font-semibold text-content-primary", children: heading }), description ? (_jsx("p", { className: "max-w-prose text-content-secondary", children: description })) : null, action ? (_jsx("div", { className: "mt-1", children: action })) : null] }) }));
+};
+//# sourceMappingURL=EmptyState.js.map

package/dist/EmptyState/EmptyState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyState.js","sourceRoot":"","sources":["../../src/EmptyState/EmptyState.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAuB/C,MAAM,UAAU,GAAmC;IACjD,EAAE,EAAE,yBAAyB;IAC7B,6DAA6D;IAC7D,iEAAiE;IACjE,+CAA+C;IAC/C,EAAE,EAAE,6DAA6D;CAClE,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EACzB,MAAM,EACN,SAAS,EACT,WAAW,EACX,OAAO,EACP,YAAY,GAAG,CAAC,EAChB,IAAI,EACJ,IAAI,GAAG,IAAI,EACX,GAAG,QAAQ,EACK,EAAa,EAAE;IAC/B,MAAM,OAAO,GAAG,IAAI,YAAY,EAAW,CAAA;IAE3C,OAAO,CACL,iBACM,QAAQ,EACZ,SAAS,EAAE,WAAW,CAAC,YAAY,EAAE,SAAS,CAAC,YAQ/C,eACE,SAAS,EAAE,WAAW,CACpB,uDAAuD,EACvD,UAAU,CAAC,IAAI,CAAC,CACjB,aAEA,IAAI,CAAC,CAAC,CAAC,CACN,8BACc,MAAM,EAClB,SAAS,EAAC,oBAAoB,YAE7B,IAAI,GACA,CACR,CAAC,CAAC,CAAC,IAAI,EAER,KAAC,OAAO,IAAC,SAAS,EAAC,oCAAoC,YACpD,OAAO,GACA,EAET,WAAW,CAAC,CAAC,CAAC,CACb,YAAG,SAAS,EAAC,oCAAoC,YAC9C,WAAW,GACV,CACL,CAAC,CAAC,CAAC,IAAI,EAEP,MAAM,CAAC,CAAC,CAAC,CACR,cAAK,SAAS,EAAC,MAAM,YAAE,MAAM,GAAO,CACrC,CAAC,CAAC,CAAC,IAAI,IACJ,GACF,CACP,CAAA;AACH,CAAC,CAAA"}

package/dist/IconButton/IconButton.d.ts

@@ -0,0 +1,34 @@
+import type { ReactNode } from "react";
+import type { ButtonProps } from "../Button/Button.tsx";
+export type IconButtonProps = Omit<ButtonProps, "aria-label" | "children" | "iconEnd" | "iconStart" | "sizing"> & {
+    /**
+     * Required, and this single line is most of the component's
+     * reason to exist. `label` cannot be defaulted, cannot be
+     * omitted, and is not a `ReactNode` — it becomes `aria-label`,
+     * which is a string by specification.
+     */
+    label: string;
+    /** The glyph. Anything — lucide, an inline SVG, a character. */
+    children: ReactNode;
+};
+/**
+ * Three repos, three strategies, and **none of them names the
+ * button**: mux-magic hand-writes five SVG components, castkit
+ * keeps an `ICON_PATHS` map, and plex-channels renders raw glyphs
+ * (`↶`, `↷`, `▶`, `⚙`, `≡`) straight into a `<button>`. A screen
+ * reader reads the last of those as "↶", and
+ * `getByRole("button", { name: "Undo" })` finds nothing at all —
+ * which is the concrete reason the fleet is not agent-drivable
+ * today.
+ *
+ * So the type system asks for the name. There is no way to render
+ * this component without one, and `expectAgentDrivable` in the
+ * story proves the name is the one Playwright will match on.
+ *
+ * **No icons ship here.** The library does not own an icon set —
+ * lucide (ISC) is the fleet recommendation — so `children` is
+ * whatever the app already has, and the icon is `aria-hidden` by
+ * virtue of the `aria-label` overriding the subtree name.
+ */
+export declare const IconButton: ({ children, label, ...buttonProps }: IconButtonProps) => ReactNode;
+//# sourceMappingURL=IconButton.d.ts.map

package/dist/IconButton/IconButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../src/IconButton/IconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAA;AAGvD,MAAM,MAAM,eAAe,GAAG,IAAI,CAChC,WAAW,EACT,YAAY,GACZ,UAAU,GACV,SAAS,GACT,WAAW,GACX,QAAQ,CACX,GAAG;IACF;;;;;OAKG;IACH,KAAK,EAAE,MAAM,CAAA;IACb,gEAAgE;IAChE,QAAQ,EAAE,SAAS,CAAA;CACpB,CAAA;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,UAAU,GAAI,qCAIxB,eAAe,KAAG,SAMpB,CAAA"}

package/dist/IconButton/IconButton.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button } from "../Button/Button.js";
+/**
+ * Three repos, three strategies, and **none of them names the
+ * button**: mux-magic hand-writes five SVG components, castkit
+ * keeps an `ICON_PATHS` map, and plex-channels renders raw glyphs
+ * (`↶`, `↷`, `▶`, `⚙`, `≡`) straight into a `<button>`. A screen
+ * reader reads the last of those as "↶", and
+ * `getByRole("button", { name: "Undo" })` finds nothing at all —
+ * which is the concrete reason the fleet is not agent-drivable
+ * today.
+ *
+ * So the type system asks for the name. There is no way to render
+ * this component without one, and `expectAgentDrivable` in the
+ * story proves the name is the one Playwright will match on.
+ *
+ * **No icons ship here.** The library does not own an icon set —
+ * lucide (ISC) is the fleet recommendation — so `children` is
+ * whatever the app already has, and the icon is `aria-hidden` by
+ * virtue of the `aria-label` overriding the subtree name.
+ */
+export const IconButton = ({ children, label, ...buttonProps }) => (_jsx(Button, { ...buttonProps, "aria-label": label, sizing: "icon", children: _jsx("span", { "aria-hidden": "true", className: "contents", children: children }) }));
+//# sourceMappingURL=IconButton.js.map

package/dist/IconButton/IconButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton.js","sourceRoot":"","sources":["../../src/IconButton/IconButton.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAsB,CAAA;AAqB7C;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EACzB,QAAQ,EACR,KAAK,EACL,GAAG,WAAW,EACE,EAAa,EAAE,CAAC,CAChC,KAAC,MAAM,OAAK,WAAW,gBAAc,KAAK,EAAE,MAAM,EAAC,MAAM,YACvD,8BAAkB,MAAM,EAAC,SAAS,EAAC,UAAU,YAC1C,QAAQ,GACJ,GACA,CACV,CAAA"}

package/dist/LiveStatusIndicator/LiveStatusIndicator.d.ts

@@ -0,0 +1,37 @@
+import type { ConnectionStatus } from "@charcuterie/logic";
+import type { ComponentPropsWithRef, ReactNode } from "react";
+import { DOT_SIZE_CLASS } from "../controlStyles.ts";
+export type LiveStatusIndicatorSize = keyof typeof DOT_SIZE_CLASS;
+export type LiveStatusIndicatorProps = Omit<ComponentPropsWithRef<"span">, "children"> & {
+    /** Extra context, announced after the label. "3 of 4 bays." */
+    detail?: string;
+    isLabelVisible?: boolean;
+    /** Overrides the machine's own wording. Rarely wanted. */
+    label?: string;
+    size?: LiveStatusIndicatorSize;
+    status: ConnectionStatus;
+};
+/**
+ * Four repos, four different implementations, and **it is the thing
+ * users read most** — a wall-mounted panel showing stale data with a
+ * green dot is worse than one showing nothing.
+ *
+ * The second reason it is P0: all four collapse `connecting` and
+ * `reconnecting` into one state, which reads wrong on exactly the
+ * link that needs it. A user who has seen data wants "lost it,
+ * getting it back" (amber, moving), not the cold-start spinner they
+ * already sat through (blue) and not a dead link (red). That
+ * distinction is why `connectionTransitions` is one of the two
+ * machines `@charcuterie/logic` ships rather than something each app
+ * defines, and `getConnectionIntent` / `getConnectionLabel` are
+ * exhaustive switches over it — add a fifth state and this component
+ * stops compiling instead of rendering a grey dot.
+ *
+ * `role="status"` + `aria-live="polite"` on the wrapper, so a
+ * transition is announced without interrupting whatever the user is
+ * doing. `aria-live="assertive"` would be wrong here even for
+ * `disconnected`: it cuts off the sentence in progress, and the dot
+ * is not going anywhere.
+ */
+export declare const LiveStatusIndicator: ({ className, detail, isLabelVisible, label, size, status, ...spanProps }: LiveStatusIndicatorProps) => ReactNode;
+//# sourceMappingURL=LiveStatusIndicator.d.ts.map

package/dist/LiveStatusIndicator/LiveStatusIndicator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LiveStatusIndicator.d.ts","sourceRoot":"","sources":["../../src/LiveStatusIndicator/LiveStatusIndicator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAC1D,OAAO,KAAK,EACV,qBAAqB,EACrB,SAAS,EACV,MAAM,OAAO,CAAA;AAEd,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AAapD,MAAM,MAAM,uBAAuB,GACjC,MAAM,OAAO,cAAc,CAAA;AAE7B,MAAM,MAAM,wBAAwB,GAAG,IAAI,CACzC,qBAAqB,CAAC,MAAM,CAAC,EAC7B,UAAU,CACX,GAAG;IACF,+DAA+D;IAC/D,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,0DAA0D;IAC1D,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,uBAAuB,CAAA;IAC9B,MAAM,EAAE,gBAAgB,CAAA;CACzB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,mBAAmB,GAAI,0EAQjC,wBAAwB,KAAG,SAkD7B,CAAA"}

package/dist/LiveStatusIndicator/LiveStatusIndicator.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DOT_SIZE_CLASS } from "../controlStyles.js";
+import { INTENT_CONTENT_CLASS, INTENT_SOLID_FILL_CLASS, } from "../intentStyles.js";
+import { getConnectionIntent, getConnectionLabel, getIsConnectionBusy, } from "../statusIntent.js";
+import { toClassName } from "../toClassName.js";
+import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden.js";
+/**
+ * Four repos, four different implementations, and **it is the thing
+ * users read most** — a wall-mounted panel showing stale data with a
+ * green dot is worse than one showing nothing.
+ *
+ * The second reason it is P0: all four collapse `connecting` and
+ * `reconnecting` into one state, which reads wrong on exactly the
+ * link that needs it. A user who has seen data wants "lost it,
+ * getting it back" (amber, moving), not the cold-start spinner they
+ * already sat through (blue) and not a dead link (red). That
+ * distinction is why `connectionTransitions` is one of the two
+ * machines `@charcuterie/logic` ships rather than something each app
+ * defines, and `getConnectionIntent` / `getConnectionLabel` are
+ * exhaustive switches over it — add a fifth state and this component
+ * stops compiling instead of rendering a grey dot.
+ *
+ * `role="status"` + `aria-live="polite"` on the wrapper, so a
+ * transition is announced without interrupting whatever the user is
+ * doing. `aria-live="assertive"` would be wrong here even for
+ * `disconnected`: it cuts off the sentence in progress, and the dot
+ * is not going anywhere.
+ */
+export const LiveStatusIndicator = ({ className, detail, isLabelVisible = true, label, size = "md", status, ...spanProps }) => {
+    const intent = getConnectionIntent(status);
+    const statusLabel = label ?? getConnectionLabel(status);
+    return (_jsxs("span", { ...spanProps, "aria-label": statusLabel, "aria-live": "polite", className: toClassName("inline-flex items-center gap-2 text-sm", INTENT_CONTENT_CLASS[intent], className), role: "status", "data-status": status, children: [_jsx("span", { "aria-hidden": "true", className: toClassName("inline-block shrink-0 rounded-full", DOT_SIZE_CLASS[size], INTENT_SOLID_FILL_CLASS[intent], 
+                // Only the two in-flight states move. A pulsing dot that
+                // never stops is the fleet's current "is it alive?"
+                // problem in a new costume.
+                getIsConnectionBusy(status) &&
+                    "charcuterie-pulse") }), isLabelVisible ? (_jsx("span", { children: statusLabel })) : (_jsx(VisuallyHidden, { children: statusLabel })), detail ? (_jsx("span", { className: "text-content-muted", children: detail })) : null] }));
+};
+//# sourceMappingURL=LiveStatusIndicator.js.map

package/dist/LiveStatusIndicator/LiveStatusIndicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LiveStatusIndicator.js","sourceRoot":"","sources":["../../src/LiveStatusIndicator/LiveStatusIndicator.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AACpD,OAAO,EACL,oBAAoB,EACpB,uBAAuB,GACxB,MAAM,oBAAoB,CAAA;AAC3B,OAAO,EACL,mBAAmB,EACnB,kBAAkB,EAClB,mBAAmB,GACpB,MAAM,oBAAoB,CAAA;AAC3B,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,EAAE,cAAc,EAAE,MAAM,qCAAsC,CAAA;AAkBrE;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,EAClC,SAAS,EACT,MAAM,EACN,cAAc,GAAG,IAAI,EACrB,KAAK,EACL,IAAI,GAAG,IAAI,EACX,MAAM,EACN,GAAG,SAAS,EACa,EAAa,EAAE;IACxC,MAAM,MAAM,GAAG,mBAAmB,CAAC,MAAM,CAAC,CAAA;IAE1C,MAAM,WAAW,GAAG,KAAK,IAAI,kBAAkB,CAAC,MAAM,CAAC,CAAA;IAEvD,OAAO,CACL,mBACM,SAAS,gBAKD,WAAW,eACb,QAAQ,EAClB,SAAS,EAAE,WAAW,CACpB,wCAAwC,EACxC,oBAAoB,CAAC,MAAM,CAAC,EAC5B,SAAS,CACV,EACD,IAAI,EAAC,QAAQ,iBAIA,MAAM,aAEnB,8BACc,MAAM,EAClB,SAAS,EAAE,WAAW,CACpB,oCAAoC,EACpC,cAAc,CAAC,IAAI,CAAC,EACpB,uBAAuB,CAAC,MAAM,CAAC;gBAC/B,yDAAyD;gBACzD,oDAAoD;gBACpD,4BAA4B;gBAC5B,mBAAmB,CAAC,MAAM,CAAC;oBACzB,mBAAmB,CACtB,GACD,EAED,cAAc,CAAC,CAAC,CAAC,CAChB,yBAAO,WAAW,GAAQ,CAC3B,CAAC,CAAC,CAAC,CACF,KAAC,cAAc,cAAE,WAAW,GAAkB,CAC/C,EAEA,MAAM,CAAC,CAAC,CAAC,CACR,eAAM,SAAS,EAAC,oBAAoB,YAAE,MAAM,GAAQ,CACrD,CAAC,CAAC,CAAC,IAAI,IACH,CACR,CAAA;AACH,CAAC,CAAA"}

package/dist/MediaTile/MediaTile.d.ts

@@ -0,0 +1,46 @@
+import type { ComponentPropsWithRef, ReactNode } from "react";
+export type MediaTileRatio = "poster" | "square" | "video";
+export type MediaTileProps = Omit<ComponentPropsWithRef<"figure">, "children"> & {
+    /**
+     * Required. The one thing three hand-rolled poster grids all
+     * omit — and a 200-tile page of unnamed images is unnavigable
+     * rather than merely imperfect.
+     */
+    alt: string;
+    aspectRatio?: MediaTileRatio;
+    /** A `Badge`, usually. Pinned inside the media box. */
+    badge?: ReactNode;
+    /** Shown in place of the image when it fails. */
+    fallback?: ReactNode;
+    href?: string;
+    src?: string;
+    subtitle?: ReactNode;
+    title: string;
+};
+/**
+ * Three repos, and shipping one of these is what makes
+ * plex-channels, image-viewer, and gallery-downloader look like one
+ * family instead of three.
+ *
+ * The interesting part is not the layout, it is the three states an
+ * image has and the fact that no hand-rolled version models them:
+ *
+ *  - **Loading** shows a `Skeleton` at the tile's exact aspect ratio,
+ *    so the grid does not reflow when 200 posters land. Layout shift
+ *    is the thing users notice in these apps today.
+ *  - **Error** keeps the tile's box and its name. An `<img>` with a
+ *    broken `src` collapses to a glyph and takes the row's height
+ *    with it; the fallback here is a `role="img"` carrying the same
+ *    `alt`, so the tile stays findable and the grid stays a grid.
+ *  - **Cached** is the case that bites: a `complete` image never
+ *    fires `load`, so a naive `onLoad`-only implementation leaves a
+ *    shimmering skeleton over a perfectly rendered poster forever.
+ *    The effect below checks `complete`/`naturalWidth` on mount and
+ *    on every `src` change.
+ *
+ * Those states are a `useStatus` machine rather than a
+ * `useState<string>`, which is what makes `loaded → error`
+ * impossible instead of merely unlikely — see `mediaStatus.ts`.
+ */
+export declare const MediaTile: ({ alt, aspectRatio, badge, className, fallback, href, src, subtitle, title, ...figureProps }: MediaTileProps) => ReactNode;
+//# sourceMappingURL=MediaTile.d.ts.map

package/dist/MediaTile/MediaTile.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MediaTile.d.ts","sourceRoot":"","sources":["../../src/MediaTile/MediaTile.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,qBAAqB,EACrB,SAAS,EACV,MAAM,OAAO,CAAA;AAOd,MAAM,MAAM,cAAc,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAA;AAE1D,MAAM,MAAM,cAAc,GAAG,IAAI,CAC/B,qBAAqB,CAAC,QAAQ,CAAC,EAC/B,UAAU,CACX,GAAG;IACF;;;;OAIG;IACH,GAAG,EAAE,MAAM,CAAA;IACX,WAAW,CAAC,EAAE,cAAc,CAAA;IAC5B,uDAAuD;IACvD,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,iDAAiD;IACjD,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAUD;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,SAAS,GAAI,8FAWvB,cAAc,KAAG,SAoJnB,CAAA"}

package/dist/MediaTile/MediaTile.js

@@ -0,0 +1,79 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useStatus } from "@charcuterie/logic";
+import { useEffect, useRef } from "react";
+import { Skeleton } from "../Skeleton/Skeleton.js";
+import { toClassName } from "../toClassName.js";
+import { mediaTransitions } from "./mediaStatus.js";
+const RATIO_CLASS = {
+    // 2:3 is the standard poster trim, which is what Plex, Kavita, and
+    // every physical sleeve in the collection actually are.
+    poster: "aspect-[2/3]",
+    square: "aspect-square",
+    video: "aspect-video",
+};
+/**
+ * Three repos, and shipping one of these is what makes
+ * plex-channels, image-viewer, and gallery-downloader look like one
+ * family instead of three.
+ *
+ * The interesting part is not the layout, it is the three states an
+ * image has and the fact that no hand-rolled version models them:
+ *
+ *  - **Loading** shows a `Skeleton` at the tile's exact aspect ratio,
+ *    so the grid does not reflow when 200 posters land. Layout shift
+ *    is the thing users notice in these apps today.
+ *  - **Error** keeps the tile's box and its name. An `<img>` with a
+ *    broken `src` collapses to a glyph and takes the row's height
+ *    with it; the fallback here is a `role="img"` carrying the same
+ *    `alt`, so the tile stays findable and the grid stays a grid.
+ *  - **Cached** is the case that bites: a `complete` image never
+ *    fires `load`, so a naive `onLoad`-only implementation leaves a
+ *    shimmering skeleton over a perfectly rendered poster forever.
+ *    The effect below checks `complete`/`naturalWidth` on mount and
+ *    on every `src` change.
+ *
+ * Those states are a `useStatus` machine rather than a
+ * `useState<string>`, which is what makes `loaded → error`
+ * impossible instead of merely unlikely — see `mediaStatus.ts`.
+ */
+export const MediaTile = ({ alt, aspectRatio = "poster", badge, className, fallback, href, src, subtitle, title, ...figureProps }) => {
+    const imageRef = useRef(null);
+    const { can, reset, status, transitionTo } = useStatus({
+        initialState: "loading",
+        transitions: mediaTransitions,
+    });
+    useEffect(() => {
+        // A new `src` is a new load, including after a failure.
+        reset();
+        const image = imageRef.current;
+        if (!image?.complete) {
+            return;
+        }
+        // `complete` with no intrinsic width is a *failed* cached
+        // load, not a successful one — the distinction browsers only
+        // expose this way.
+        if (image.naturalWidth > 0) {
+            if (can("loaded")) {
+                transitionTo("loaded");
+            }
+            return;
+        }
+        if (can("error")) {
+            transitionTo("error");
+        }
+    }, [can, reset, transitionTo]);
+    const media = (_jsxs("div", { className: toClassName("relative overflow-hidden rounded-md bg-surface-sunken", RATIO_CLASS[aspectRatio]), children: [status === "error" ? (_jsx("div", { "aria-label": alt, className: "flex size-full flex-col items-center justify-center gap-1 p-2 text-center text-content-muted text-xs", role: "img", children: fallback ?? _jsx("span", { children: "Image unavailable" }) })) : (_jsxs(_Fragment, { children: [status === "loading" ? (_jsx(Skeleton, { className: "absolute inset-0 size-full" })) : null, _jsx("img", { alt: href ? "" : alt, className: toClassName("size-full object-cover transition-opacity duration-(--duration-normal) ease-standard", status === "loaded"
+                            ? "opacity-100"
+                            : "opacity-0"), decoding: "async", loading: "lazy", onError: () => {
+                            if (can("error")) {
+                                transitionTo("error");
+                            }
+                        }, onLoad: () => {
+                            if (can("loaded")) {
+                                transitionTo("loaded");
+                            }
+                        }, ref: imageRef, src: src })] })), badge ? (_jsx("div", { className: "absolute top-2 start-2", children: badge })) : null] }));
+    const caption = (_jsxs("figcaption", { className: "flex flex-col gap-0.5 pt-2", children: [_jsx("span", { className: "truncate font-medium text-content-primary text-sm cq-sm:text-md", children: title }), subtitle ? (_jsx("span", { className: "truncate text-content-muted text-xs", children: subtitle })) : null] }));
+    return (_jsx("figure", { ...figureProps, className: toClassName("@container flex flex-col", className), children: href ? (_jsxs("a", { "aria-label": title, className: "group flex flex-col rounded-md outline-offset-2 hover:opacity-90 focus-visible:outline-solid focus-visible:outline-(length:--focus-ring-width) focus-visible:outline-focus-ring", href: href, children: [media, caption] })) : (_jsxs(_Fragment, { children: [media, caption] })) }));
+};
+//# sourceMappingURL=MediaTile.js.map

package/dist/MediaTile/MediaTile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MediaTile.js","sourceRoot":"","sources":["../../src/MediaTile/MediaTile.tsx"],"names":[],"mappings":"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"}

package/dist/MediaTile/mediaStatus.d.ts

@@ -0,0 +1,22 @@
+import type { StatusTransitions } from "@charcuterie/logic";
+export type MediaStatus = "error" | "loaded" | "loading";
+/**
+ * A component-owned machine, and the smallest honest example of what
+ * `createStatus` is for.
+ *
+ * `@charcuterie/logic` ships only the two machines that are
+ * genuinely fleet-wide — connection and async request — precisely so
+ * that a machine like this one lives next to the thing it describes.
+ * Three states, two of them terminal-ish, and the edges matter:
+ *
+ *  - `loaded → loading` and `error → loading` exist for a changed
+ *    `src`. Without them a poster grid that repaints with new URLs
+ *    keeps showing the old tile's error.
+ *  - `loaded → error` does **not** exist. A browser does not fire
+ *    `error` on an image it has already decoded, and an app that
+ *    thinks it saw that is misreading its own event wiring — so the
+ *    machine throws rather than flickering a fallback over a
+ *    perfectly good poster.
+ */
+export declare const mediaTransitions: StatusTransitions<MediaStatus>;
+//# sourceMappingURL=mediaStatus.d.ts.map

package/dist/MediaTile/mediaStatus.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mediaStatus.d.ts","sourceRoot":"","sources":["../../src/MediaTile/mediaStatus.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAA;AAE3D,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,CAAA;AAExD;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,gBAAgB,EAAE,iBAAiB,CAAC,WAAW,CAKzD,CAAA"}

package/dist/MediaTile/mediaStatus.js

@@ -0,0 +1,24 @@
+/**
+ * A component-owned machine, and the smallest honest example of what
+ * `createStatus` is for.
+ *
+ * `@charcuterie/logic` ships only the two machines that are
+ * genuinely fleet-wide — connection and async request — precisely so
+ * that a machine like this one lives next to the thing it describes.
+ * Three states, two of them terminal-ish, and the edges matter:
+ *
+ *  - `loaded → loading` and `error → loading` exist for a changed
+ *    `src`. Without them a poster grid that repaints with new URLs
+ *    keeps showing the old tile's error.
+ *  - `loaded → error` does **not** exist. A browser does not fire
+ *    `error` on an image it has already decoded, and an app that
+ *    thinks it saw that is misreading its own event wiring — so the
+ *    machine throws rather than flickering a fallback over a
+ *    perfectly good poster.
+ */
+export const mediaTransitions = {
+    error: ["loading"],
+    loaded: ["loading"],
+    loading: ["error", "loaded"],
+};
+//# sourceMappingURL=mediaStatus.js.map

package/dist/MediaTile/mediaStatus.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mediaStatus.js","sourceRoot":"","sources":["../../src/MediaTile/mediaStatus.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAC3B;IACE,KAAK,EAAE,CAAC,SAAS,CAAC;IAClB,MAAM,EAAE,CAAC,SAAS,CAAC;IACnB,OAAO,EAAE,CAAC,OAAO,EAAE,QAAQ,CAAC;CAC7B,CAAA"}