@charcuterie/ui 4.0.0 → 4.1.0

package/dist/ActionTiles/ActionTiles.d.ts

@@ -1,6 +1,20 @@
-import type { ControlSize } from "@charcuterie/tokens";
+import type { CategoricalIndex, ControlSize } from "@charcuterie/tokens";
 import type { ReactNode } from "react";
 export type ActionTileItem = {
+    /**
+     * Which of the ten hues this tile wears, overriding the one its
+     * position would have given it.
+     *
+     * Reach for it when a tile's colour means something outside the
+     * set — a destination that is red everywhere else in the app, a
+     * pair that must not drift apart when a third tile is inserted
+     * between them. An overridden tile keeps its hue and the rest go
+     * on walking the palette in order, so naming one does not force
+     * naming all of them.
+     *
+     * Ignored when the set is `accent="none"`.
+     */
+    categorical?: CategoricalIndex;
     /**
      * A line of help under the name. Drawn one step down the type ramp
      * in `content-muted`, **inside** the tile — so `getByRole` computes
@@ -20,10 +34,15 @@ export type ActionTileItem = {
      */
     href?: string;
     /**
-     * Leading content, above the name. A `Badge`, an app's own icon, a
-     * count.
+     * Leading content, drawn **beside** the name rather than above it.
+     * A glyph, a `Badge`, a count.
      *
-     * `aria-hidden` by construction: the name it sits above is inside
+     * Takes the tile's hue, so an app passes a `stroke="currentColor"`
+     * path and states no colour of its own. Size is the app's: around
+     * 22px at `md` and 30px at `lg` reads the way the fleet's
+     * hand-rolled tool cards did.
+     *
+     * `aria-hidden` by construction: the name it sits beside is inside
      * the same tile, so an announced icon is the label read twice.
      */
     icon?: ReactNode;
@@ -40,7 +59,22 @@ export type ActionTileItem = {
      */
     value: string;
 };
+/**
+ * Where a tile's colour comes from.
+ *
+ *  - `auto` — the set walks the ten-hue categorical palette in
+ *    order, so eight tiles get eight colours and no call site does
+ *    any work. An item may still name its own with `categorical`.
+ *  - `none` — no bar, no hue, and the neutral `border-strong`
+ *    hover every other box uses.
+ */
+export type ActionTilesAccent = "auto" | "none";
 export type ActionTilesProps = {
+    /**
+     * Whether the set colours itself. `auto` by default — see
+     * {@link ActionTilesAccent}.
+     */
+    accent?: ActionTilesAccent;
     className?: string;
     items: readonly ActionTileItem[];
     /** The set's accessible name. Required. */
@@ -59,9 +93,9 @@ export type ActionTilesProps = {
     size?: ControlSize;
 };
 /**
- * A set of ACTIONS drawn as tiles — a bordered card carrying a name
- * and a line of help, in a grid that gains columns with its
- * container.
+ * A set of ACTIONS drawn as tiles — a bordered card carrying a
+ * colour bar, an icon beside its name, and a line of help, in a
+ * grid that gains columns with its container.
  *
  * This is `RadioGroup`'s `itemShape="tile"` with the radio taken
  * away. The
@@ -90,6 +124,30 @@ export type ActionTilesProps = {
  * why QueuePilot's "Queue type" chooser is here and its Tonight
  * activity filter is not.
  *
+ * ### The colour is the point, and it is not decoration
+ *
+ * The first version of this component was neutral, and the owner's
+ * verdict on it was *"very boring, not colorful"*. Three apps had
+ * already answered the question themselves — mux-magic, Gallery
+ * Downloader and points-market all colour their tiles by hand — so
+ * the paint is now the library's and every one of them can stop.
+ *
+ * A tile wears a **bar down its leading edge**, drawn by `Card`'s
+ * accent-edge pseudo-element so a tile and a card on the same page
+ * are the same bar rather than two that nearly match. Its icon takes
+ * the same hue, and the box hovers in it too. The hue comes from the
+ * ten-wide categorical palette, taken **in order**, which is why a
+ * set of eight needs no colour props at all. See
+ * [the tile paint record](../../../../docs/decisions/2026-09-02-an-action-tile-is-coloured-and-the-icon-sits-beside-the-name.md)
+ * for the four other paints that were drawn and rejected.
+ *
+ * `categorical` and not `intent`, for the reason
+ * [`cardAccentEdge.ts`](../Card/cardAccentEdge.ts) gives: an intent
+ * is a *claim* — `danger` says what happens if you press the thing —
+ * and "Builder" beside "Jobs" is making no claim about either. Ten
+ * numbered hues say only "these are different from each other",
+ * which is exactly what a tile set means.
+ *
  * ### Why this is not a `Button` with a `className`
  *
  * A `Button` is sized by `h-(--control-height-md)` and carries **no
@@ -111,5 +169,5 @@ export type ActionTilesProps = {
  * true, so imposing that model would only cost a keyboard user the
  * ability to Tab to the second tile.
  */
-export declare const ActionTiles: ({ className, items, label, minTileInlineSize, newTabLabel, onChoose, size, }: ActionTilesProps) => ReactNode;
+export declare const ActionTiles: ({ accent, className, items, label, minTileInlineSize, newTabLabel, onChoose, size, }: ActionTilesProps) => ReactNode;
 //# sourceMappingURL=ActionTiles.d.ts.map

package/dist/ActionTiles/ActionTiles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ActionTiles.d.ts","sourceRoot":"","sources":["../../src/ActionTiles/ActionTiles.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AACtD,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAA;AAiBrD,MAAM,MAAM,cAAc,GAAG;IAC3B;;;;;OAKG;IACH,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB;;;;;;;;;OASG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,uEAAuE;IACvE,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,KAAK,EAAE,SAAS,CAAA;IAChB;;;;;;OAMG;IACH,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,MAAM,MAAM,gBAAgB,GAAG;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,EAAE,SAAS,cAAc,EAAE,CAAA;IAChC,2CAA2C;IAC3C,KAAK,EAAE,MAAM,CAAA;IACb;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,8CAA8C;IAC9C,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,IAAI,CAAC,EAAE,WAAW,CAAA;CACnB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoDG;AACH,eAAO,MAAM,WAAW,GAAI,8EAQzB,gBAAgB,KAAG,SAwJrB,CAAA"}
+{"version":3,"file":"ActionTiles.d.ts","sourceRoot":"","sources":["../../src/ActionTiles/ActionTiles.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,gBAAgB,EAChB,WAAW,EACZ,MAAM,qBAAqB,CAAA;AAK5B,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAA;AAwBrD,MAAM,MAAM,cAAc,GAAG;IAC3B;;;;;;;;;;;;OAYG;IACH,WAAW,CAAC,EAAE,gBAAgB,CAAA;IAC9B;;;;;OAKG;IACH,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB;;;;;;;;;OASG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;;;;;;;;;;OAWG;IACH,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,uEAAuE;IACvE,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,KAAK,EAAE,SAAS,CAAA;IAChB;;;;;;OAMG;IACH,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED;;;;;;;;GAQG;AACH,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,MAAM,CAAA;AAE/C,MAAM,MAAM,gBAAgB,GAAG;IAC7B;;;OAGG;IACH,MAAM,CAAC,EAAE,iBAAiB,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,EAAE,SAAS,cAAc,EAAE,CAAA;IAChC,2CAA2C;IAC3C,KAAK,EAAE,MAAM,CAAA;IACb;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,8CAA8C;IAC9C,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,IAAI,CAAC,EAAE,WAAW,CAAA;CACnB,CAAA;AA4CD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4EG;AACH,eAAO,MAAM,WAAW,GAAI,sFASzB,gBAAgB,KAAG,SAwMrB,CAAA"}

package/dist/ActionTiles/ActionTiles.js

@@ -1,14 +1,50 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { CATEGORICAL_INDEX_COUNT, CATEGORICAL_INDEXES, } from "@charcuterie/tokens";
+import { getAccentEdgeClassName } from "../Card/cardAccentEdge.js";
+import { CATEGORICAL_CONTENT_CLASS, CATEGORICAL_HOVER_BORDER_CLASS, CATEGORICAL_HOVER_CLASS, } from "../categoricalStyles.js";
 import { FOCUS_RING_CLASS } from "../intentStyles.js";
 import { useRouterLink } from "../RouterLink/RouterLinkProvider.js";
 import { getIsRoutedHref } from "../RouterLink/routerLink.js";
-import { TILE_BOX_CLASS, TILE_COLUMNS_CLASS, TILE_GAP_CLASS, TILE_HINT_TEXT_CLASS, TILE_MIN_INLINE_SIZE_PROPERTY, TILE_PADDING_CLASS, TILE_TEXT_SIZE_CLASS, } from "../tileStyles.js";
+import { TILE_ACCENT_EDGE_PADDING_CLASS, TILE_BOX_CLASS, TILE_COLUMNS_CLASS, TILE_GAP_CLASS, TILE_HINT_TEXT_CLASS, TILE_MIN_INLINE_SIZE_PROPERTY, TILE_PADDING_CLASS, TILE_TEXT_SIZE_CLASS, } from "../tileStyles.js";
 import { toClassName } from "../toClassName.js";
 import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden.js";
 /**
- * A set of ACTIONS drawn as tiles — a bordered card carrying a name
- * and a line of help, in a grid that gains columns with its
- * container.
+ * The gap between the icon and the name it sits beside.
+ *
+ * Local to this component rather than in `tileStyles.ts`, because a
+ * radio tile's inner layout is a control beside a label and has no
+ * head row to space. The shared file owns the BOX; this is what goes
+ * in it.
+ */
+const HEAD_GAP_CLASS = {
+    sm: "gap-2",
+    md: "gap-2.5",
+    lg: "gap-3",
+};
+/** The gap between the head row and the hint under it. */
+const STACK_GAP_CLASS = {
+    sm: "gap-1",
+    md: "gap-1",
+    lg: "gap-2",
+};
+/**
+ * The hue a tile wears when it did not name one: its position in
+ * the set, wrapping at ten.
+ *
+ * Position rather than `getCategoricalIndex(value)`. That helper
+ * hashes a key so a row keeps its colour forever across a list
+ * nobody controls the order of — right for Docket's labels, wrong
+ * here, because a hash of two tile values can collide and hand a
+ * two-tile set the same colour twice. A tile set is short, ordered,
+ * and written out in the source; the eye reads it as a row, so the
+ * palette is walked as one.
+ */
+const getTileCategorical = (item, position) => item.categorical ??
+    CATEGORICAL_INDEXES[position % CATEGORICAL_INDEX_COUNT];
+/**
+ * A set of ACTIONS drawn as tiles — a bordered card carrying a
+ * colour bar, an icon beside its name, and a line of help, in a
+ * grid that gains columns with its container.
  *
  * This is `RadioGroup`'s `itemShape="tile"` with the radio taken
  * away. The
@@ -37,6 +73,30 @@ import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden.js";
  * why QueuePilot's "Queue type" chooser is here and its Tonight
  * activity filter is not.
  *
+ * ### The colour is the point, and it is not decoration
+ *
+ * The first version of this component was neutral, and the owner's
+ * verdict on it was *"very boring, not colorful"*. Three apps had
+ * already answered the question themselves — mux-magic, Gallery
+ * Downloader and points-market all colour their tiles by hand — so
+ * the paint is now the library's and every one of them can stop.
+ *
+ * A tile wears a **bar down its leading edge**, drawn by `Card`'s
+ * accent-edge pseudo-element so a tile and a card on the same page
+ * are the same bar rather than two that nearly match. Its icon takes
+ * the same hue, and the box hovers in it too. The hue comes from the
+ * ten-wide categorical palette, taken **in order**, which is why a
+ * set of eight needs no colour props at all. See
+ * [the tile paint record](../../../../docs/decisions/2026-09-02-an-action-tile-is-coloured-and-the-icon-sits-beside-the-name.md)
+ * for the four other paints that were drawn and rejected.
+ *
+ * `categorical` and not `intent`, for the reason
+ * [`cardAccentEdge.ts`](../Card/cardAccentEdge.ts) gives: an intent
+ * is a *claim* — `danger` says what happens if you press the thing —
+ * and "Builder" beside "Jobs" is making no claim about either. Ten
+ * numbered hues say only "these are different from each other",
+ * which is exactly what a tile set means.
+ *
  * ### Why this is not a `Button` with a `className`
  *
  * A `Button` is sized by `h-(--control-height-md)` and carries **no
@@ -58,11 +118,15 @@ import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden.js";
  * true, so imposing that model would only cost a keyboard user the
  * ability to Tab to the second tile.
  */
-export const ActionTiles = ({ className, items, label, minTileInlineSize = 200, newTabLabel = "(opens in a new tab)", onChoose, size = "md", }) => {
+export const ActionTiles = ({ accent = "auto", className, items, label, minTileInlineSize = 200, newTabLabel = "(opens in a new tab)", onChoose, size = "md", }) => {
     const RouterLink = useRouterLink();
     return (_jsx("div", { "aria-label": label, className: toClassName("grid", TILE_COLUMNS_CLASS, TILE_GAP_CLASS[size], className), role: "group", style: {
             [TILE_MIN_INLINE_SIZE_PROPERTY]: `${minTileInlineSize}px`,
-        }, children: items.map(({ hint, href, icon, isDisabled = false, isExternal = false, label: tileLabel, value, }) => {
+        }, children: items.map((item, position) => {
+            const { hint, href, icon, isDisabled = false, isExternal = false, label: tileLabel, value, } = item;
+            const categorical = accent === "none"
+                ? null
+                : getTileCategorical(item, position);
             const tileClassName = toClassName(
             // `flex`, not `inline-flex`: a grid item stretches to its
             // track, and an inline box would sit at max-content
@@ -71,15 +135,28 @@ export const ActionTiles = ({ className, items, label, minTileInlineSize = 200,
             // min-content width — one unbroken token would otherwise
             // set the track's floor and shove the grid out of its
             // container.
-            "flex min-w-0 flex-col gap-0.5 text-start wrap-anywhere transition-colors duration-(--duration-fast) ease-standard", TILE_BOX_CLASS, TILE_PADDING_CLASS[size], TILE_TEXT_SIZE_CLASS[size], 
+            "flex min-w-0 flex-col text-start wrap-anywhere transition-colors duration-(--duration-fast) ease-standard", STACK_GAP_CLASS[size], TILE_BOX_CLASS, TILE_PADDING_CLASS[size], TILE_TEXT_SIZE_CLASS[size], 
+            // The bar is an overlay and takes no space in the box
+            // model, so the tile makes room for it or the text lands
+            // on top of it.
+            categorical === null
+                ? null
+                : toClassName(getAccentEdgeClassName({ categorical }), TILE_ACCENT_EDGE_PADDING_CLASS[size]), 
             // Disabled turns the whole tile down with `opacity-60`,
             // the same family treatment as `Checkbox`, `Switch` and
             // the radio tile, rather than fading the border to a
-            // token that disappeared on a pale theme.
+            // token that disappeared on a pale theme. It also drops
+            // every hover class: a tile that cannot be pressed must
+            // not light up under the pointer.
             isDisabled
                 ? "cursor-not-allowed opacity-60"
-                : "cursor-pointer hover:border-border-strong", FOCUS_RING_CLASS);
-            const content = (_jsxs(_Fragment, { children: [icon === undefined ? null : (_jsx("span", { "aria-hidden": true, className: "flex", children: icon })), _jsx("span", { className: "font-semibold text-content-primary", children: tileLabel }), hint === undefined ? null : (_jsx("span", { className: toClassName("font-normal text-content-muted", TILE_HINT_TEXT_CLASS[size]), children: hint })), isExternal && href !== undefined ? (_jsx(VisuallyHidden, { children: newTabLabel })) : null] }));
+                : toClassName("cursor-pointer", categorical === null
+                    ? "hover:border-border-strong"
+                    : toClassName(CATEGORICAL_HOVER_BORDER_CLASS[categorical], CATEGORICAL_HOVER_CLASS[categorical]
+                        .ghost)), FOCUS_RING_CLASS);
+            const content = (_jsxs(_Fragment, { children: [_jsxs("span", { className: toClassName("flex min-w-0 items-center", HEAD_GAP_CLASS[size]), children: [icon === undefined ? null : (_jsx("span", { "aria-hidden": true, className: toClassName("flex shrink-0", categorical === null
+                                    ? null
+                                    : CATEGORICAL_CONTENT_CLASS[categorical]), children: icon })), _jsx("span", { className: "min-w-0 font-semibold text-content-primary", children: tileLabel })] }), hint === undefined ? null : (_jsx("span", { className: toClassName("font-normal text-content-muted", TILE_HINT_TEXT_CLASS[size]), children: hint })), isExternal && href !== undefined ? (_jsx(VisuallyHidden, { children: newTabLabel })) : null] }));
             if (href !== undefined && !isDisabled) {
                 // An external destination or a fragment is never the
                 // router's — pushing `https://…` or `#credits` onto the

package/dist/ActionTiles/ActionTiles.js.map

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

package/dist/PortraitTiles/PortraitAvatar.d.ts

@@ -0,0 +1,21 @@
+import type { ReactNode } from "react";
+/**
+ * The face, and the one piece of this component that holds state.
+ *
+ * A portrait grid is the shape that cannot absorb a broken image:
+ * a missing `<img>` is a torn hole where a person's face was, next
+ * to nine that rendered. `onError` is the only signal a browser
+ * gives for a 404, a wrong content type, or a file the user's
+ * network stripped — so the fallback the caller already supplied for
+ * "no picture" covers "no picture *today*" as well.
+ *
+ * Its own component because the state is per portrait. Hoisting it
+ * to a `Record<string, boolean>` in the set would re-render every
+ * tile whenever any one image failed.
+ */
+export declare const PortraitAvatar: ({ className, imageSrc, initials, }: {
+    className: string;
+    imageSrc: string | undefined;
+    initials: ReactNode;
+}) => ReactNode;
+//# sourceMappingURL=PortraitAvatar.d.ts.map

package/dist/PortraitTiles/PortraitAvatar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PortraitAvatar.d.ts","sourceRoot":"","sources":["../../src/PortraitTiles/PortraitAvatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGtC;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,cAAc,GAAI,oCAI5B;IACD,SAAS,EAAE,MAAM,CAAA;IACjB,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAA;IAC5B,QAAQ,EAAE,SAAS,CAAA;CACpB,KAAG,SAuBH,CAAA"}

package/dist/PortraitTiles/PortraitAvatar.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from "react";
+/**
+ * The face, and the one piece of this component that holds state.
+ *
+ * A portrait grid is the shape that cannot absorb a broken image:
+ * a missing `<img>` is a torn hole where a person's face was, next
+ * to nine that rendered. `onError` is the only signal a browser
+ * gives for a 404, a wrong content type, or a file the user's
+ * network stripped — so the fallback the caller already supplied for
+ * "no picture" covers "no picture *today*" as well.
+ *
+ * Its own component because the state is per portrait. Hoisting it
+ * to a `Record<string, boolean>` in the set would re-render every
+ * tile whenever any one image failed.
+ */
+export const PortraitAvatar = ({ className, imageSrc, initials, }) => {
+    const [isImageBroken, setIsImageBroken] = useState(false);
+    if (imageSrc === undefined || isImageBroken) {
+        return (_jsx("span", { "aria-hidden": true, className: className, children: initials }));
+    }
+    return (_jsx("img", { 
+        // The name is beside it, inside the same tile, so an alt here
+        // is the name announced twice.
+        alt: "", className: className, onError: () => {
+            setIsImageBroken(true);
+        }, src: imageSrc }));
+};
+//# sourceMappingURL=PortraitAvatar.js.map

package/dist/PortraitTiles/PortraitAvatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PortraitAvatar.js","sourceRoot":"","sources":["../../src/PortraitTiles/PortraitAvatar.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEhC;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAC7B,SAAS,EACT,QAAQ,EACR,QAAQ,GAKT,EAAa,EAAE;IACd,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAEzD,IAAI,QAAQ,KAAK,SAAS,IAAI,aAAa,EAAE,CAAC;QAC5C,OAAO,CACL,oCAAkB,SAAS,EAAE,SAAS,YACnC,QAAQ,GACJ,CACR,CAAA;IACH,CAAC;IAED,OAAO,CACL;QACE,8DAA8D;QAC9D,+BAA+B;QAC/B,GAAG,EAAC,EAAE,EACN,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,GAAG,EAAE;YACZ,gBAAgB,CAAC,IAAI,CAAC,CAAA;QACxB,CAAC,EACD,GAAG,EAAE,QAAQ,GACb,CACH,CAAA;AACH,CAAC,CAAA"}

package/dist/PortraitTiles/PortraitTiles.d.ts

@@ -0,0 +1,162 @@
+import type { CategoricalIndex, ControlSize } from "@charcuterie/tokens";
+import type { ReactNode } from "react";
+/**
+ * Where one portrait's colour comes from. Two arms, and the fleet
+ * has both — the same split
+ * [`cardAccentEdge.ts`](../Card/cardAccentEdge.ts) already draws,
+ * for the same reason.
+ *
+ *  - **`categorical`** — one of the ten audited hues. A colour the
+ *    library owns, re-themed by `data-variant`, gated in both
+ *    schemes. Right whenever the colour is a *choice from what we
+ *    offered*.
+ *  - **`color`** — any CSS colour, from data. Right when the colour
+ *    **arrived from the world** and re-theming it would be lying
+ *    about a physical object. points-market is exactly this: each
+ *    kid's colour matches the NFC card they tap, by the workspace's
+ *    2026-07-20 `kid-identity-colors-match-nfc-cards` record. Ten
+ *    palette hues cannot represent that, and swapping them in would
+ *    have made the app disagree with the cards on the fridge.
+ *
+ * Neither is a default. A portrait that names no colour takes the
+ * next `categorical` hue by position.
+ */
+type PortraitTileColour = {
+    categorical?: CategoricalIndex;
+    color?: never;
+} | {
+    categorical?: never;
+    color: string;
+};
+export type PortraitTileItem = PortraitTileColour & {
+    /**
+     * The quiet line under the number, naming its unit — "points",
+     * "episodes left", "due today".
+     *
+     * Inside the tile, so it is part of the accessible name. "1,240"
+     * on its own tells a screen-reader user nothing.
+     */
+    hint?: ReactNode;
+    /** Makes the portrait a real `<a href>`. Same rules as `ActionTiles`. */
+    href?: string;
+    /**
+     * A picture of the subject. Falls back to {@link initials} when
+     * absent, and **also** when the file 404s — a broken portrait grid
+     * is the one failure this shape cannot absorb.
+     */
+    imageSrc?: string;
+    /**
+     * Drawn in the hue's solid fill when there is no picture. One or
+     * two characters; longer strings are the caller's problem to
+     * shorten, because "which letters" is a naming question this
+     * component cannot answer (a mononym, a family that shares an
+     * initial).
+     */
+    initials?: string;
+    isDisabled?: boolean;
+    /** Opens in a new tab, and says so to a screen reader. `href` only. */
+    isExternal?: boolean;
+    /** The name. */
+    label: ReactNode;
+    /**
+     * The one number this portrait is chosen by — a balance, a count,
+     * a streak. Optional: a picker that is only ever "who are you"
+     * passes none and the tile closes up around the name.
+     */
+    stat?: ReactNode;
+    /** Identity. The React key, and what `onChoose` is handed. */
+    value: string;
+};
+/**
+ * How a portrait arranges itself.
+ *
+ *  - `auto` — a **row** while the set is narrow, a **column** once
+ *    it has room. The switch is a container query on the set, not a
+ *    media query: a picker in a 320px sidebar is a list of rows on a
+ *    2560px monitor, and the same picker filling a phone is a column
+ *    per screenful.
+ *  - `row` / `column` — fixed, for a layout that has already decided.
+ */
+export type PortraitTilesLayout = "auto" | "column" | "row";
+export type PortraitTilesProps = {
+    className?: string;
+    items: readonly PortraitTileItem[];
+    /** The set's accessible name. Required. */
+    label: string;
+    layout?: PortraitTilesLayout;
+    /** The narrowest a portrait track may be, in CSS px. */
+    minTileInlineSize?: number;
+    /** What `isExternal` announces. Not shown. */
+    newTabLabel?: string;
+    /** Fired by a portrait that carries no `href`. */
+    onChoose?: (value: string) => void;
+    size?: ControlSize;
+};
+/**
+ * A set of PEOPLE — or of anything else picked by its face — drawn
+ * as round pictures with a name and one big number.
+ *
+ * points-market's "Who's shopping?" is the shape this is taken from,
+ * and it is deliberately **not** an `ActionTiles` variant. The two
+ * answer different questions:
+ *
+ *  - `ActionTiles` asks *what do you want to do* — a name, a line of
+ *    help, an icon that illustrates the verb.
+ *  - This asks *who is this* — a face, and one number that decides
+ *    it. There is no description, because a person is not explained.
+ *
+ * Collapsing them would mean one component whose icon is sometimes a
+ * 20px glyph beside the title and sometimes a 144px circle above it,
+ * with `hint` meaning "what this does" in one mode and "points" in
+ * the other. That is two components wearing one name, which is the
+ * mistake the
+ * [2026-08-25 record](../../../../docs/decisions/2026-08-25-a-choice-tile-is-a-radiogroup-shape-not-a-third-component.md)
+ * warns about from the other direction.
+ *
+ * What they DO share is the box — `TILE_BOX_CLASS` and the same
+ * `auto-fill` grid — so a page carrying both does not show two
+ * different cards.
+ *
+ * ### It scales, and the scaling is the point
+ *
+ * The owner's one requirement when this moved into the library:
+ * *"that one is meant to scale. I don't wanna lose that
+ * functionality."* Two axes carry it.
+ *
+ *  1. **The container.** `layout="auto"` is a row while the set is
+ *     narrow and a column once it has room, off a `cq-sm` query on
+ *     the set itself. Nothing reads the viewport, so the same picker
+ *     works in a sidebar and on a wall.
+ *  2. **The density.** Every length is a token, so `data-density="kiosk"`
+ *     grows the type ramp and the control heights under it. points-market
+ *     runs `kiosk` today; that is where its big numbers come from,
+ *     and it keeps them.
+ *
+ * ### The colour is the person's, not the position's
+ *
+ * A positional hue is the default because it costs a call site
+ * nothing. It is also the wrong default for a household: add a
+ * fifth member and the first four change colour, which is exactly
+ * the identity the picker was using to be fast. Any set whose
+ * subjects persist should name its colour per subject.
+ *
+ * There are two ways to name one, and the difference is where the
+ * colour came from:
+ *
+ *  - **`categorical`** — an index into the ten audited hues. A
+ *    choice from what the library offered, so the library keeps
+ *    owning it: re-themed by `data-variant`, contrast-gated in both
+ *    schemes. The same call Docket makes for a project.
+ *  - **`color`** — any CSS colour, straight from data. For a colour
+ *    the system does **not** own and cannot re-theme without lying:
+ *    points-market's kids are coloured to match the NFC cards they
+ *    tap, so the picker and the cards on the fridge have to agree,
+ *    and ten palette hues cannot promise that.
+ *
+ * The second arm is the narrow one. Reach for it only when the
+ * colour is a fact about the subject rather than a decision about
+ * the design — the same line `Swatch` draws, for the same reason.
+ */
+export declare const PortraitTiles: ({ className, items, label, layout, minTileInlineSize, newTabLabel, onChoose, size, }: PortraitTilesProps) => ReactNode;
+export {};
+//# sourceMappingURL=PortraitTiles.d.ts.map

package/dist/PortraitTiles/PortraitTiles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PortraitTiles.d.ts","sourceRoot":"","sources":["../../src/PortraitTiles/PortraitTiles.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,gBAAgB,EAChB,WAAW,EACZ,MAAM,qBAAqB,CAAA;AAK5B,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAA;AAqBrD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,KAAK,kBAAkB,GACnB;IAAE,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAAC,KAAK,CAAC,EAAE,KAAK,CAAA;CAAE,GACjD;IAAE,WAAW,CAAC,EAAE,KAAK,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAA;AAE1C,MAAM,MAAM,gBAAgB,GAAG,kBAAkB,GAAG;IAClD;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,yEAAyE;IACzE,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,uEAAuE;IACvE,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,gBAAgB;IAChB,KAAK,EAAE,SAAS,CAAA;IAChB;;;;OAIG;IACH,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,8DAA8D;IAC9D,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED;;;;;;;;;GASG;AACH,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,QAAQ,GAAG,KAAK,CAAA;AAE3D,MAAM,MAAM,kBAAkB,GAAG;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,EAAE,SAAS,gBAAgB,EAAE,CAAA;IAClC,2CAA2C;IAC3C,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,mBAAmB,CAAA;IAC5B,wDAAwD;IACxD,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,8CAA8C;IAC9C,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,kDAAkD;IAClD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,IAAI,CAAC,EAAE,WAAW,CAAA;CACnB,CAAA;AAiLD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgEG;AACH,eAAO,MAAM,aAAa,GAAI,sFAS3B,kBAAkB,KAAG,SA8MvB,CAAA"}