@charcuterie/ui 3.34.0 → 4.1.0

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"}

package/dist/PortraitTiles/PortraitTiles.js

@@ -0,0 +1,263 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { CATEGORICAL_INDEX_COUNT, CATEGORICAL_INDEXES, } from "@charcuterie/tokens";
+import { CATEGORICAL_APPEARANCE_CLASS, CATEGORICAL_CONTENT_CLASS, CATEGORICAL_HOVER_BORDER_CLASS, CATEGORICAL_RING_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_MIN_INLINE_SIZE_PROPERTY, } from "../tileStyles.js";
+import { toClassName } from "../toClassName.js";
+import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden.js";
+import { PortraitAvatar } from "./PortraitAvatar.js";
+import { getPortraitColourProperties } from "./portraitColour.js";
+/**
+ * The two forms, spelled as complete class strings rather than
+ * assembled.
+ *
+ * `cq-sm` is 24rem. Below it the set is one narrow column — a phone,
+ * a sidebar — and a 144px face would push the number off the bottom
+ * of the fold; above it there is room for the shape points-market
+ * built, which is what its kiosk screen shows today.
+ *
+ * The `auto` strings carry BOTH forms, because a container query
+ * variant is a media query in the stylesheet and cannot be chosen in
+ * JavaScript. `layout="row"` and `layout="column"` exist so a caller
+ * that already knows can skip the query rather than fight it.
+ */
+const TILE_LAYOUT_CLASS = {
+    auto: "flex-row items-center text-start cq-sm:flex-col cq-sm:items-center cq-sm:text-center",
+    column: "flex-col items-center text-center",
+    row: "flex-row items-center text-start",
+};
+const TEXT_LAYOUT_CLASS = {
+    auto: "items-start cq-sm:items-center",
+    column: "items-center",
+    row: "items-start",
+};
+const TILE_PADDING_CLASS = {
+    auto: "p-4 cq-sm:p-6",
+    column: "p-6",
+    row: "p-4",
+};
+/**
+ * Every length here moves together, and none of them is a pixel
+ * count in an app.
+ *
+ * The face grows when the set does, and the type ramp does the rest
+ * on its own — `text-2xl` is 30px at `comfortable` and 38px at
+ * `kiosk`, which is how points-market's wall-mounted picker gets its
+ * size back without a single override. That the density axis already
+ * carries this is the reason the owner's "it is meant to scale" does
+ * not need a fourth size here.
+ */
+const AVATAR_SIZE_CLASS = {
+    sm: {
+        auto: "size-12 cq-sm:size-20",
+        column: "size-20",
+        row: "size-12",
+    },
+    md: {
+        auto: "size-16 cq-sm:size-28",
+        column: "size-28",
+        row: "size-16",
+    },
+    lg: {
+        auto: "size-20 cq-sm:size-36",
+        column: "size-36",
+        row: "size-20",
+    },
+};
+/**
+ * The initials, sized to the circle they sit in.
+ *
+ * Its own map rather than a `calc()` off the avatar size, because
+ * the size arrives as a Tailwind class and there is no number here
+ * to compute from. Inheriting the tile's text size — which is what
+ * the first version did — put a 17px letter in the middle of a 144px
+ * circle and looked like a bug in the picture loader.
+ *
+ * The ramp stops at `2xl`, so the largest column avatar is
+ * deliberately a letter with air around it rather than a letter that
+ * fills the disc. Going past the ramp for one glyph would be the
+ * hardcoded length every other size in this file avoids.
+ */
+const AVATAR_TEXT_CLASS = {
+    sm: {
+        auto: "text-md cq-sm:text-xl",
+        column: "text-xl",
+        row: "text-md",
+    },
+    md: {
+        auto: "text-lg cq-sm:text-2xl",
+        column: "text-2xl",
+        row: "text-lg",
+    },
+    lg: {
+        auto: "text-xl cq-sm:text-2xl",
+        column: "text-2xl",
+        row: "text-xl",
+    },
+};
+const NAME_TEXT_CLASS = {
+    sm: "text-sm",
+    md: "text-md",
+    lg: "text-lg",
+};
+const STAT_TEXT_CLASS = {
+    sm: {
+        auto: "text-lg cq-sm:text-xl",
+        column: "text-xl",
+        row: "text-lg",
+    },
+    md: {
+        auto: "text-xl cq-sm:text-2xl",
+        column: "text-2xl",
+        row: "text-xl",
+    },
+    lg: {
+        auto: "text-2xl cq-sm:text-2xl",
+        column: "text-2xl",
+        row: "text-2xl",
+    },
+};
+const GAP_CLASS = {
+    sm: "gap-3",
+    md: "gap-4",
+    lg: "gap-5",
+};
+/**
+ * Positional hue, wrapping at ten. Same rule `ActionTiles` uses.
+ *
+ * `null` when the portrait brought its own `color` — there is no
+ * palette index to fall back to in that arm, and picking one anyway
+ * would paint a second, unrelated hue onto the same tile.
+ */
+const getPortraitCategorical = (item, position) => item.color === undefined
+    ? (item.categorical ??
+        CATEGORICAL_INDEXES[position % CATEGORICAL_INDEX_COUNT])
+    : null;
+/**
+ * The classes that read the four custom properties, spelled whole.
+ *
+ * Tailwind scans SOURCE TEXT for complete class strings, so these
+ * cannot be built from a variable — and the failure is silent CSS
+ * that never gets generated rather than an error anywhere.
+ */
+const COLOUR_TILE_HOVER_CLASS = "hover:border-(--charcuterie-portrait-fill)";
+const COLOUR_AVATAR_CLASS = "bg-(--charcuterie-portrait-fill) text-(--charcuterie-portrait-initials) ring-(--charcuterie-portrait-halo) inset-ring-1 inset-ring-black/10";
+const COLOUR_STAT_CLASS = "text-(--charcuterie-portrait-stat)";
+/**
+ * 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 const PortraitTiles = ({ className, items, label, layout = "auto", minTileInlineSize = 200, newTabLabel = "(opens in a new tab)", onChoose, size = "md", }) => {
+    const RouterLink = useRouterLink();
+    return (_jsx("div", { className: toClassName("@container", className), children: _jsx("div", { "aria-label": label, className: toClassName("grid", TILE_COLUMNS_CLASS, GAP_CLASS[size]), role: "group", style: {
+                [TILE_MIN_INLINE_SIZE_PROPERTY]: `${minTileInlineSize}px`,
+            }, children: items.map((item, position) => {
+                const { hint, href, imageSrc, initials, isDisabled = false, isExternal = false, label: tileLabel, stat, value, } = item;
+                const categorical = getPortraitCategorical(item, position);
+                const { color } = item;
+                const tileClassName = toClassName("flex min-w-0 wrap-anywhere transition-[background-color,border-color,box-shadow,transform] duration-(--duration-fast) ease-standard", TILE_BOX_CLASS, TILE_LAYOUT_CLASS[layout], TILE_PADDING_CLASS[layout], GAP_CLASS[size], isDisabled
+                    ? "cursor-not-allowed opacity-60"
+                    : toClassName("cursor-pointer hover:shadow-medium hover:-translate-y-1", 
+                    // The lift is the one piece of motion in this
+                    // library, kept because it is what the owner
+                    // pointed at in points-market — and turned off
+                    // for anyone who has asked the OS for less. The
+                    // shadow and the border stay, so the hover is
+                    // still legible without it.
+                    "motion-reduce:hover:translate-y-0", categorical === null
+                        ? COLOUR_TILE_HOVER_CLASS
+                        : CATEGORICAL_HOVER_BORDER_CLASS[categorical]), FOCUS_RING_CLASS);
+                const avatarClassName = toClassName("flex shrink-0 items-center justify-center overflow-hidden rounded-full object-cover font-display font-semibold ring-4", AVATAR_SIZE_CLASS[size][layout], AVATAR_TEXT_CLASS[size][layout], categorical === null
+                    ? COLOUR_AVATAR_CLASS
+                    : toClassName(CATEGORICAL_APPEARANCE_CLASS[categorical]
+                        .solid, CATEGORICAL_RING_CLASS[categorical]));
+                // The one sanctioned escape hatch for a runtime value,
+                // and the same one `Swatch` uses: a colour out of a
+                // database cannot be a class, because Tailwind generates
+                // its CSS at build time from source text.
+                const tileStyle = color === undefined
+                    ? undefined
+                    : getPortraitColourProperties(color);
+                const content = (_jsxs(_Fragment, { children: [_jsx(PortraitAvatar, { className: avatarClassName, imageSrc: imageSrc, initials: initials }), _jsxs("span", { className: toClassName("flex min-w-0 flex-col", TEXT_LAYOUT_CLASS[layout]), children: [_jsx("span", { className: toClassName("font-semibold text-content-primary", NAME_TEXT_CLASS[size]), children: tileLabel }), stat === undefined ? null : (_jsx("span", { className: toClassName("font-bold tabular-nums", STAT_TEXT_CLASS[size][layout], categorical === null
+                                        ? COLOUR_STAT_CLASS
+                                        : CATEGORICAL_CONTENT_CLASS[categorical]), children: stat })), hint === undefined ? null : (_jsx("span", { className: "text-xs text-content-muted", children: hint }))] }), isExternal && href !== undefined ? (_jsx(VisuallyHidden, { children: newTabLabel })) : null] }));
+                if (href !== undefined && !isDisabled) {
+                    const LinkElement = isExternal || !getIsRoutedHref(href)
+                        ? "a"
+                        : RouterLink;
+                    return (_jsx(LinkElement, { className: tileClassName, href: href, rel: isExternal
+                            ? "noopener noreferrer"
+                            : undefined, style: tileStyle, target: isExternal ? "_blank" : undefined, children: content }, value));
+                }
+                if (href !== undefined) {
+                    return (_jsx("a", { "aria-disabled": "true", className: tileClassName, role: "link", style: tileStyle, children: content }, value));
+                }
+                return (_jsx("button", { className: tileClassName, disabled: isDisabled, onClick: () => {
+                        onChoose?.(value);
+                    }, style: tileStyle, type: "button", children: content }, value));
+            }) }) }));
+};
+//# sourceMappingURL=PortraitTiles.js.map

package/dist/PortraitTiles/PortraitTiles.js.map

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

package/dist/PortraitTiles/portraitColour.d.ts

@@ -0,0 +1,49 @@
+/**
+ * The paint for a portrait whose colour came from DATA rather than
+ * from the palette.
+ *
+ * `Swatch` already argues the case this file serves: a colour that
+ * "arrived from the world" — a sticker, an extracted album accent,
+ * the NFC card a child taps — is not a token, so it cannot be
+ * re-themed and cannot be a Tailwind class. It reaches the paint as
+ * custom properties on the tile, and the classes read those
+ * properties.
+ *
+ * Four properties rather than one, because the same hue has to do
+ * four jobs and only one of them can use it raw. Each is named for
+ * the PART it paints, following `--charcuterie-accent-edge` — a
+ * property called `-colour` would say only what type it holds, which
+ * is the one thing already obvious from where it is used:
+ *
+ *  - the **fill** behind the initials — the colour itself, exactly;
+ *  - the **initials** on top of it — black or white, whichever the
+ *    fill can actually carry;
+ *  - the **halo** around the face — a transparent wash of the hue,
+ *    standing in for what `categorical-N-surface` is on the palette
+ *    side;
+ *  - the **number** — the hue pulled toward the scheme's own text
+ *    colour, so a pale card colour stays readable on a pale surface
+ *    and a dark one stays readable on a dark surface. Mixing toward
+ *    `content-primary` moves lightness and keeps hue, which is the
+ *    smallest change that keeps the number *this person's colour*
+ *    while remaining a number somebody can read.
+ */
+export declare const PORTRAIT_FILL_PROPERTY = "--charcuterie-portrait-fill";
+export declare const PORTRAIT_INITIALS_PROPERTY = "--charcuterie-portrait-initials";
+export declare const PORTRAIT_HALO_PROPERTY = "--charcuterie-portrait-halo";
+export declare const PORTRAIT_STAT_PROPERTY = "--charcuterie-portrait-stat";
+/**
+ * The four properties for one portrait.
+ *
+ * `srgb` rather than `oklab` for both mixes, matching `Swatch`'s
+ * existing `color-mix(in srgb, …)` — one interpolation space across
+ * the library, so two components handed the same colour do not
+ * produce two different washes of it.
+ *
+ * The initials colour is `getReadableTextColour`, which lives in
+ * `@charcuterie/tokens` beside the contrast maths rather than here.
+ * It is total on purpose: it runs inside a render, on a colour out
+ * of a database, and a throw would blank the whole picker.
+ */
+export declare const getPortraitColourProperties: (color: string) => Record<string, string>;
+//# sourceMappingURL=portraitColour.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"portraitColour.d.ts","sourceRoot":"","sources":["../../src/PortraitTiles/portraitColour.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AAIH,eAAO,MAAM,sBAAsB,gCACJ,CAAA;AAE/B,eAAO,MAAM,0BAA0B,oCACJ,CAAA;AAEnC,eAAO,MAAM,sBAAsB,gCACJ,CAAA;AAE/B,eAAO,MAAM,sBAAsB,gCACJ,CAAA;AAE/B;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,2BAA2B,GACtC,OAAO,MAAM,KACZ,MAAM,CAAC,MAAM,EAAE,MAAM,CAMtB,CAAA"}

package/dist/PortraitTiles/portraitColour.js

@@ -0,0 +1,55 @@
+/**
+ * The paint for a portrait whose colour came from DATA rather than
+ * from the palette.
+ *
+ * `Swatch` already argues the case this file serves: a colour that
+ * "arrived from the world" — a sticker, an extracted album accent,
+ * the NFC card a child taps — is not a token, so it cannot be
+ * re-themed and cannot be a Tailwind class. It reaches the paint as
+ * custom properties on the tile, and the classes read those
+ * properties.
+ *
+ * Four properties rather than one, because the same hue has to do
+ * four jobs and only one of them can use it raw. Each is named for
+ * the PART it paints, following `--charcuterie-accent-edge` — a
+ * property called `-colour` would say only what type it holds, which
+ * is the one thing already obvious from where it is used:
+ *
+ *  - the **fill** behind the initials — the colour itself, exactly;
+ *  - the **initials** on top of it — black or white, whichever the
+ *    fill can actually carry;
+ *  - the **halo** around the face — a transparent wash of the hue,
+ *    standing in for what `categorical-N-surface` is on the palette
+ *    side;
+ *  - the **number** — the hue pulled toward the scheme's own text
+ *    colour, so a pale card colour stays readable on a pale surface
+ *    and a dark one stays readable on a dark surface. Mixing toward
+ *    `content-primary` moves lightness and keeps hue, which is the
+ *    smallest change that keeps the number *this person's colour*
+ *    while remaining a number somebody can read.
+ */
+import { getReadableTextColour } from "@charcuterie/tokens";
+export const PORTRAIT_FILL_PROPERTY = "--charcuterie-portrait-fill";
+export const PORTRAIT_INITIALS_PROPERTY = "--charcuterie-portrait-initials";
+export const PORTRAIT_HALO_PROPERTY = "--charcuterie-portrait-halo";
+export const PORTRAIT_STAT_PROPERTY = "--charcuterie-portrait-stat";
+/**
+ * The four properties for one portrait.
+ *
+ * `srgb` rather than `oklab` for both mixes, matching `Swatch`'s
+ * existing `color-mix(in srgb, …)` — one interpolation space across
+ * the library, so two components handed the same colour do not
+ * produce two different washes of it.
+ *
+ * The initials colour is `getReadableTextColour`, which lives in
+ * `@charcuterie/tokens` beside the contrast maths rather than here.
+ * It is total on purpose: it runs inside a render, on a colour out
+ * of a database, and a throw would blank the whole picker.
+ */
+export const getPortraitColourProperties = (color) => ({
+    [PORTRAIT_FILL_PROPERTY]: color,
+    [PORTRAIT_HALO_PROPERTY]: `color-mix(in srgb, ${color} 28%, transparent)`,
+    [PORTRAIT_INITIALS_PROPERTY]: getReadableTextColour(color),
+    [PORTRAIT_STAT_PROPERTY]: `color-mix(in srgb, ${color} 62%, var(--color-content-primary))`,
+});
+//# sourceMappingURL=portraitColour.js.map

package/dist/PortraitTiles/portraitColour.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"portraitColour.js","sourceRoot":"","sources":["../../src/PortraitTiles/portraitColour.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AAEH,OAAO,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAA;AAE3D,MAAM,CAAC,MAAM,sBAAsB,GACjC,6BAA6B,CAAA;AAE/B,MAAM,CAAC,MAAM,0BAA0B,GACrC,iCAAiC,CAAA;AAEnC,MAAM,CAAC,MAAM,sBAAsB,GACjC,6BAA6B,CAAA;AAE/B,MAAM,CAAC,MAAM,sBAAsB,GACjC,6BAA6B,CAAA;AAE/B;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,MAAM,2BAA2B,GAAG,CACzC,KAAa,EACW,EAAE,CAAC,CAAC;IAC5B,CAAC,sBAAsB,CAAC,EAAE,KAAK;IAC/B,CAAC,sBAAsB,CAAC,EAAE,sBAAsB,KAAK,oBAAoB;IACzE,CAAC,0BAA0B,CAAC,EAC1B,qBAAqB,CAAC,KAAK,CAAC;IAC9B,CAAC,sBAAsB,CAAC,EAAE,sBAAsB,KAAK,qCAAqC;CAC3F,CAAC,CAAA"}

package/dist/categoricalStyles.d.ts

@@ -50,4 +50,31 @@ export declare const CATEGORICAL_HOVER_CLASS: Record<CategoricalIndex, Record<In
 export declare const CATEGORICAL_SOLID_FILL_CLASS: Record<CategoricalIndex, string>;
 /** The same ten as text, for a glyph or a dot's ring. */
 export declare const CATEGORICAL_CONTENT_CLASS: Record<CategoricalIndex, string>;
+/**
+ * The hover BORDER, which `CATEGORICAL_HOVER_CLASS` deliberately
+ * does not carry.
+ *
+ * That map answers "what does this surface do under the pointer",
+ * and a `Badge` has no border state to change. A tile does: it is a
+ * bordered card, and the whole point of colouring one is that the
+ * box reacts in its own hue rather than in the neutral
+ * `border-strong` every other box uses. Kept separate rather than
+ * added as a fifth appearance key, because an appearance is a claim
+ * about the fill and this is not one.
+ *
+ * Written out in full for the reason this file opens with.
+ */
+export declare const CATEGORICAL_HOVER_BORDER_CLASS: Record<CategoricalIndex, string>;
+/**
+ * A halo the width of a ring, in the hue's SURFACE.
+ *
+ * `surface` and not `border`: this sits directly against the solid
+ * fill it surrounds, so it is a soft step out of the colour rather
+ * than a second line around it. `PortraitTiles` draws it around a
+ * face, where a hard outline reads as a frame and this reads as
+ * light.
+ *
+ * Written out in full for the reason this file opens with.
+ */
+export declare const CATEGORICAL_RING_CLASS: Record<CategoricalIndex, string>;
 //# sourceMappingURL=categoricalStyles.d.ts.map

package/dist/categoricalStyles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"categoricalStyles.d.ts","sourceRoot":"","sources":["../src/categoricalStyles.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEH,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAA;AAE3D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAA;AAEzD,eAAO,MAAM,4BAA4B,EAAE,MAAM,CAC/C,gBAAgB,EAChB,MAAM,CAAC,gBAAgB,EAAE,MAAM,CAAC,CA4FjC,CAAA;AAED;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,uBAAuB,EAAE,MAAM,CAC1C,gBAAgB,EAChB,MAAM,CAAC,gBAAgB,EAAE,MAAM,CAAC,CA8DjC,CAAA;AAED;;;;;GAKG;AACH,eAAO,MAAM,4BAA4B,EAAE,MAAM,CAC/C,gBAAgB,EAChB,MAAM,CAYP,CAAA;AAED,yDAAyD;AACzD,eAAO,MAAM,yBAAyB,EAAE,MAAM,CAC5C,gBAAgB,EAChB,MAAM,CAYP,CAAA"}
+{"version":3,"file":"categoricalStyles.d.ts","sourceRoot":"","sources":["../src/categoricalStyles.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEH,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAA;AAE3D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAA;AAEzD,eAAO,MAAM,4BAA4B,EAAE,MAAM,CAC/C,gBAAgB,EAChB,MAAM,CAAC,gBAAgB,EAAE,MAAM,CAAC,CA4FjC,CAAA;AAED;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,uBAAuB,EAAE,MAAM,CAC1C,gBAAgB,EAChB,MAAM,CAAC,gBAAgB,EAAE,MAAM,CAAC,CA8DjC,CAAA;AAED;;;;;GAKG;AACH,eAAO,MAAM,4BAA4B,EAAE,MAAM,CAC/C,gBAAgB,EAChB,MAAM,CAYP,CAAA;AAED,yDAAyD;AACzD,eAAO,MAAM,yBAAyB,EAAE,MAAM,CAC5C,gBAAgB,EAChB,MAAM,CAYP,CAAA;AAED;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,8BAA8B,EAAE,MAAM,CACjD,gBAAgB,EAChB,MAAM,CAYP,CAAA;AAED;;;;;;;;;;GAUG;AACH,eAAO,MAAM,sBAAsB,EAAE,MAAM,CACzC,gBAAgB,EAChB,MAAM,CAYP,CAAA"}

package/dist/categoricalStyles.js

@@ -192,4 +192,53 @@ export const CATEGORICAL_CONTENT_CLASS = {
     9: "text-categorical-9-content",
     10: "text-categorical-10-content",
 };
+/**
+ * The hover BORDER, which `CATEGORICAL_HOVER_CLASS` deliberately
+ * does not carry.
+ *
+ * That map answers "what does this surface do under the pointer",
+ * and a `Badge` has no border state to change. A tile does: it is a
+ * bordered card, and the whole point of colouring one is that the
+ * box reacts in its own hue rather than in the neutral
+ * `border-strong` every other box uses. Kept separate rather than
+ * added as a fifth appearance key, because an appearance is a claim
+ * about the fill and this is not one.
+ *
+ * Written out in full for the reason this file opens with.
+ */
+export const CATEGORICAL_HOVER_BORDER_CLASS = {
+    1: "hover:border-categorical-1-border",
+    2: "hover:border-categorical-2-border",
+    3: "hover:border-categorical-3-border",
+    4: "hover:border-categorical-4-border",
+    5: "hover:border-categorical-5-border",
+    6: "hover:border-categorical-6-border",
+    7: "hover:border-categorical-7-border",
+    8: "hover:border-categorical-8-border",
+    9: "hover:border-categorical-9-border",
+    10: "hover:border-categorical-10-border",
+};
+/**
+ * A halo the width of a ring, in the hue's SURFACE.
+ *
+ * `surface` and not `border`: this sits directly against the solid
+ * fill it surrounds, so it is a soft step out of the colour rather
+ * than a second line around it. `PortraitTiles` draws it around a
+ * face, where a hard outline reads as a frame and this reads as
+ * light.
+ *
+ * Written out in full for the reason this file opens with.
+ */
+export const CATEGORICAL_RING_CLASS = {
+    1: "ring-categorical-1-surface",
+    2: "ring-categorical-2-surface",
+    3: "ring-categorical-3-surface",
+    4: "ring-categorical-4-surface",
+    5: "ring-categorical-5-surface",
+    6: "ring-categorical-6-surface",
+    7: "ring-categorical-7-surface",
+    8: "ring-categorical-8-surface",
+    9: "ring-categorical-9-surface",
+    10: "ring-categorical-10-surface",
+};
 //# sourceMappingURL=categoricalStyles.js.map