@nanisoft/prism-ui 0.10.2 → 0.15.0

package/dist/components/ui/overflow-actions.js

@@ -0,0 +1,266 @@
+'use client';
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { EllipsisIcon } from 'lucide-react';
+import { isValidElement, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, } from 'react';
+import { Button } from './button.js';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from './dropdown-menu.js';
+import { cn } from '../../lib/utils.js';
+/** The drawn buttons, read back for their own widths rather than for a list of labels. */
+const ACTION_SLOT = '[data-slot="overflow-actions-action"]';
+/**
+ * The gap between two actions, read from the row rather than assumed.
+ *
+ * A number the caller can change through `className`, because a gap is layout and
+ * layout is the one thing `className` is for. Reading it keeps the arithmetic
+ * honest when they do: a caller who widens the row's gap gets measured against the
+ * gap they set rather than against the one this file was written with.
+ *
+ * `normal` and an unresolvable value are measured as no gap at all, which is what
+ * a flex container's used value is when there is no gap to report. That is the
+ * one reading this cannot distinguish from a real zero, and it is the reading that
+ * costs the least: a row with no gap is measured as having none.
+ */
+function gapOf(row) {
+    const measured = Number.parseFloat(window.getComputedStyle(row).columnGap);
+    return Number.isFinite(measured) ? measured : 0;
+}
+/**
+ * The text a `ReactNode` draws, flattened, because the text is the width.
+ *
+ * This is not a measurement and it does not claim to be one. It is the cheapest
+ * description of a label that changes when the drawn width does, and it is here so
+ * that a render which changed nothing measurable can be told apart from one that
+ * changed a label without reading a box to find out.
+ *
+ * An element contributes its own text wrapped in a bracket, because a caller may put
+ * an emphasis inside a label and the markup around the words is part of what has to be
+ * measured. Its props are not folded in: a serialised prop is a component's source
+ * where the prop holds a component, which would make this a description of the
+ * caller's code rather than of the row they are asking about.
+ */
+function textOf(node) {
+    if (typeof node === 'string' || typeof node === 'number')
+        return String(node);
+    if (Array.isArray(node))
+        return node.map(textOf).join('');
+    if (node !== null && typeof node === 'object' && isValidElement(node)) {
+        return `<${textOf(node.props.children)}>`;
+    }
+    return '';
+}
+/**
+ * A row of actions that gives up its trailing actions when it runs out of room.
+ *
+ * **It observes itself, and that is the reason it is a Component.** A row of five
+ * actions inside a table cell is a layout problem no prop describes, because the
+ * answer depends on a width Prism cannot see: the cell, the sidebar, the zoom
+ * level, the font the reader has chosen and the strings the caller localised last
+ * week. So the Component holds a measurement, keeps it current, and moves the
+ * trailing actions into a menu when the row can no longer hold them beside their
+ * cap. No prop combination expresses this, because every prop is a decision taken
+ * before the width is known and this is a decision taken after it.
+ *
+ * **What the first frame draws, and why it is not a guess.** A server render has
+ * no width to measure, so the first frame draws every action the caller passed and
+ * **no cap**, which is the row the caller described rather than the row this
+ * Component would have guessed at. The correction is made in a layout effect,
+ * which runs after the DOM is mutated and before the browser paints, so a reader
+ * with scripting sees the corrected row as the first frame they ever see and
+ * never sees the un-collapsed one at all. What is therefore visible to a reader
+ * without scripting, to a crawler and in a print stylesheet is the full row, which
+ * is the correct answer for all three: a cap that cannot open is a control that
+ * lies, and a row of actions is readable without them.
+ *
+ * **The cap is always in the document and is taken out of the flow rather than
+ * unmounted, and the reason is the measurement.** A trigger that is not rendered
+ * has no width to read, and a row that changed width when the cap appeared would
+ * move its actions on every resize, so the cap stays in the DOM, keeps its width,
+ * and when nothing has collapsed it is `visibility: hidden`, out of flow, out of
+ * the tab order and out of the accessibility tree. That is what lets the first
+ * decision account for a cap that will need to appear.
+ *
+ * **Each action's width is read from the action, and it is remembered when the
+ * action is hidden.** A button sizes to its own content, so a width measured on
+ * the pass where the action was drawn is still its width on the pass where it is
+ * not, which is the only reason a hidden action can still be counted. The cost is
+ * real and it is this: **a row that shrinks to fit its content has no room to run
+ * out of, so nothing collapses.** `className` must give the row a bounded width,
+ * and the consequence of ignoring that is not a row that overflows its container
+ * but a row that empties itself into a cap.
+ *
+ * **A pass runs when the measurement could have changed, and not on every render.**
+ * Every read a pass makes is a read the browser cannot answer without settling
+ * layout first, so a row that measures on every render spends a forced layout on
+ * every render, and a table of them spends one per row for every keystroke in a
+ * filter box somewhere above it. So a pass runs on mount, when the actions' ids or
+ * their labels change, when `className` changes, when the row's own box changes, and
+ * when the page's fonts have finished loading. That last one earns its place: a
+ * self-hosted face swaps in after the first paint and changes the width of every
+ * drawn action without changing the row's width, so nothing else reports it, and a
+ * row measured in the fallback face is a row whose widths were never true of the page
+ * the reader is looking at. A caller who re-renders a row for a reason of its own
+ * pays nothing, which is the whole of the claim: the read happens on the frames
+ * where the answer could have been different, and on no others.
+ *
+ * **The determinate part of the motion budget is not spent here at all.** The row
+ * changes membership rather than animating: an action leaves, the cap arrives, and
+ * both are one layout pass with no transition on either. That is deliberate. A
+ * row that slid its actions sideways would be a movement a reader did not ask for
+ * on a control they did not press, and the first motion law in this system is
+ * that feedback answers something the reader did; here the reader resized a window
+ * or changed a sidebar, and the answer is that the row is still complete.
+ *
+ * **It composes `Button` and `DropdownMenu` and redraws neither.** The drawn
+ * actions are `Button`s at the `outline` step, which is the same frame
+ * `DropdownMenuTrigger` draws, so the cap is not a different-looking control
+ * sitting in the middle of the row. The menu, its typeahead, its arrow keys and
+ * its Escape handling are `DropdownMenu`'s, and the only thing this Component
+ * decides is which actions go where.
+ *
+ * **It is a client Component**, because it reads a width, because it holds the
+ * membership of the menu, and because it takes the one callback. What that costs
+ * is the price of the whole idea: a server-rendered row of actions is drawn whole
+ * and never collapses, so a page that is read without scripting gets a row rather
+ * than a menu. That is the same trade `DataToolbar` makes for the opposite
+ * problem, and it is the reason this one is a Component and `DataToolbar` is not.
+ */
+function OverflowActions({ actions, overflowLabel, onOverflowChange, className, }) {
+    const rowRef = useRef(null);
+    // The width of every action this Component has drawn, whether it is drawn now or
+    // not. Held in a ref rather than in state because a width is a measurement and
+    // putting it in state would re-render the row once per measured action.
+    const widths = useRef(new Map());
+    const [collapsed, setCollapsed] = useState(0);
+    const measure = useCallback(() => {
+        const row = rowRef.current;
+        // A row that is not laid out yet measures zero, and treating zero as a real
+        // width would empty the row inside a hidden dialog.
+        if (row === null || row.clientWidth === 0)
+            return;
+        const cap = row.querySelector('[data-slot="overflow-actions-cap"]');
+        // The cap's own width, read from the cap even while it is out of flow, which
+        // is the whole reason the cap is never unmounted.
+        const reserve = cap === null ? 0 : cap.offsetWidth;
+        const gap = gapOf(row);
+        for (const node of Array.from(row.querySelectorAll(ACTION_SLOT))) {
+            const id = node.dataset.actionId;
+            if (id !== undefined)
+                widths.current.set(id, node.offsetWidth);
+        }
+        let used = 0;
+        let fitted = 0;
+        for (const action of actions) {
+            const width = widths.current.get(action.id);
+            // An action never drawn has no width, so the row stops counting there and
+            // the rest of the actions move. Reporting fewer actions than fit would be a
+            // worse answer than moving one that might have fitted.
+            if (width === undefined)
+                break;
+            // The candidate plus the gap that would separate it from the next, plus the
+            // gap and the cap that would follow the last one that fits.
+            const candidate = used + (fitted === 0 ? 0 : gap) + width;
+            if (candidate + gap + reserve > row.clientWidth)
+                break;
+            used = candidate;
+            fitted += 1;
+        }
+        const hidden = actions.length - fitted;
+        setCollapsed((current) => (current === hidden ? current : hidden));
+    }, [actions]);
+    // The newest measurement pass, held in a ref and refreshed during render rather
+    // than in an effect, so that both callers below can reach the current pass without
+    // subscribing to it. A caller that passes a fresh `actions` array each render gives
+    // `measure` a new identity each render, and an effect that depended on it would
+    // disconnect and re-observe the row that often, and would re-measure it that
+    // often, for a subscription whose job never changes.
+    const measureRef = useRef(measure);
+    measureRef.current = measure;
+    // What the next pass has to take into account, as one string.
+    //
+    // `actions` is the input and its identity is not the signal. A caller who maps a
+    // list into a fresh array on every render has changed nothing a width depends on,
+    // so measuring on that is measuring to find out what was already known. What a key
+    // carries is the two things that move a width: each action's id, because it decides
+    // which action the row is counting and in what order, and its label's own text,
+    // because a button sizes to its content. What is left out is `icon`, and `Button`
+    // gives every mark it draws the same square, so a different mark of the same shape
+    // is the same width; a caller who wants a different width puts it in the label,
+    // which is the field documented as the measurement.
+    //
+    // The separators are control characters rather than punctuation because an id and
+    // a label may both contain anything a reader can type, and a key built from a
+    // printable separator can be two different rows reported as one.
+    const content = useMemo(() => actions.map((action) => `${action.id}\u0000${textOf(action.label)}`).join('\u0001'), [actions]);
+    // On mount, and again when the drawn content or the row's own layout changed.
+    //
+    // `className` is in the list because a gap is layout and layout is what
+    // `className` is for: a caller who widens the row's gap changes the arithmetic
+    // without changing the row's box, so the observer below has nothing to report and
+    // this is the only signal there is. The pass writes membership rather than
+    // geometry, so a pass that finds nothing new costs no render, and a pass that does
+    // find something new is followed by a render this effect does not measure again:
+    // the content it changed is the content this effect depends on, and re-reading the
+    // row immediately after writing to it is the read that forces the layout it just
+    // dirtied.
+    useLayoutEffect(() => {
+        measureRef.current();
+    }, [content, className]);
+    useEffect(() => {
+        const row = rowRef.current;
+        // No observer, no collapsing. A row whose width never changes has never run
+        // out of room, and a component that held a hidden observer anyway would be
+        // holding a subscription it cannot explain.
+        if (row === null || typeof ResizeObserver === 'undefined')
+            return;
+        const observer = new ResizeObserver(() => measureRef.current());
+        observer.observe(row);
+        return () => observer.disconnect();
+    }, []);
+    // The face, when it lands after the first paint.
+    //
+    // A self-hosted font changes the width of every drawn action and leaves the row's
+    // own width exactly where it was, so the observer above never fires for it and a
+    // width measured in the fallback face is a width that was never true of the row.
+    // `document.fonts.ready` is the one signal that reports it, and it costs one pass
+    // on the page rather than one pass per render.
+    //
+    // The guard is a runtime one because jsdom has no `FontFaceSet`, and a Component
+    // that cannot tell is a Component that throws in a test rather than a Component
+    // that reads less often.
+    useEffect(() => {
+        if (typeof document.fonts === 'undefined')
+            return;
+        let live = true;
+        void document.fonts.ready.then(() => {
+            if (live)
+                measureRef.current();
+        });
+        return () => {
+            live = false;
+        };
+    }, []);
+    const inside = actions.slice(0, actions.length - collapsed);
+    const spilled = actions.slice(actions.length - collapsed);
+    const mounted = useRef(false);
+    const reported = useRef(null);
+    useEffect(() => {
+        // Never on the first pass. A caller told an empty list it already knew was
+        // empty would be hearing about itself rather than about the row.
+        if (!mounted.current) {
+            mounted.current = true;
+            return;
+        }
+        const ids = actions.slice(actions.length - collapsed).map((action) => action.id);
+        const previous = reported.current;
+        if (previous !== null && previous.length === ids.length && previous.every((id, at) => id === ids[at])) {
+            return;
+        }
+        reported.current = ids;
+        onOverflowChange?.(ids);
+    }, [actions, collapsed, onOverflowChange]);
+    return (_jsxs("div", { ref: rowRef, "data-slot": "overflow-actions", className: cn('relative flex items-center gap-1', className), children: [inside.map((action) => (_jsxs(Button, { "data-slot": "overflow-actions-action", "data-action-id": action.id, type: "button", variant: "outline", disabled: action.disabled, children: [action.icon, action.label] }, action.id))), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { "data-slot": "overflow-actions-cap", "aria-label": overflowLabel, tabIndex: spilled.length === 0 ? -1 : undefined, "aria-hidden": spilled.length === 0 ? true : undefined, className: cn(
+                        // Out of flow and invisible while the row is whole, so the cap costs
+                        // the row nothing and nothing can reach it. See the JSDoc.
+                        spilled.length === 0 && 'invisible pointer-events-none absolute top-0 start-0'), children: _jsx(EllipsisIcon, { "aria-hidden": "true" }) }), spilled.length === 0 ? null : (_jsx(DropdownMenuContent, { align: "end", children: spilled.map((action) => (_jsxs(DropdownMenuItem, { variant: action.tone === 'danger' ? 'destructive' : 'default', disabled: action.disabled, children: [action.icon, action.label] }, action.id))) }))] })] }));
+}
+export { OverflowActions };

package/dist/components/ui/pack-swatch.d.ts

@@ -0,0 +1,177 @@
+import type { ComponentProps, ReactNode } from 'react';
+import type { PackId } from '../../theming/index.js';
+/**
+ * The three sizes a swatch is drawn at.
+ *
+ * A swatch sits in a list of packs or in a row of them, and the three are the
+ * sizes a list of six needs: beside a name in a settings row, on its own in a
+ * pack chooser, and as the whole of a preview card. Sized through `className`
+ * instead, a swatch would be a size the layout owns, and `className` is layout
+ * only on every Component in this package.
+ */
+declare const SIZES: {
+    readonly sm: {
+        readonly frame: "size-6";
+    };
+    readonly md: {
+        readonly frame: "size-8";
+    };
+    readonly lg: {
+        readonly frame: "size-12";
+    };
+};
+/** The props a `PackSwatch` takes. */
+export type PackSwatchProps = Omit<ComponentProps<'span'>, 'children'> & {
+    /**
+     * The pack the swatch previews.
+     *
+     * Carried on the element as a `data-pack` boundary, which is the whole
+     * mechanism: the attribute re-points the pack's tokens for this element and its
+     * subtree, so the swatch wears the pack it is showing rather than the pack the
+     * page happens to be in. A swatch that took its colours from a prop instead
+     * would need the pack's ramp values as props, and those are generated per pack
+     * by the token build, so a Component cannot hold them and a consumer cannot
+     * pass them.
+     */
+    pack: PackId;
+    /**
+     * The swatch's accessible name, which is the pack's own name.
+     *
+     * Required, and it is a `string` rather than a node because the swatch is a
+     * picture and a picture's name is a string. The swatch carries no text of its
+     * own, so without this a screen reader meets an element that looks like a
+     * figure and says nothing, and a row of six of them is six unidentified marks.
+     */
+    label: string;
+    /**
+     * Whether the swatch draws the pack's dark mode beside the mode the page is in.
+     *
+     * On by default, because a pack is two axes and a swatch that shows one of them
+     * is half the answer. A pack's light and dark values are not the same palette
+     * with the brightness turned down: the dark mode re-points a dozen roles, and a
+     * reader choosing a pack has to see both or they are choosing on the evidence of
+     * one. Turn it off for a swatch that is a dot beside a name in a list where the
+     * mode is already the page's, and pay for it: a reader then has to leave the row
+     * to see what the other mode looks like.
+     *
+     * **What the flag can and cannot do is worth stating, because the name suggests
+     * more than the contract allows.** The swatch always draws two halves: the one
+     * the page is already in, and the dark mode, which the second half forces with
+     * its own `dark` class. A boundary wears its ancestor's mode, so the first half
+     * is dark on a page the reader has put in dark mode, and the two halves are then
+     * the same. There is no flag that fixes that, and the reason is in the contract:
+     * the token build publishes `[data-pack="<id>"]` for light and
+     * `[data-pack="<id>"].dark, .dark [data-pack="<id>"]` for dark, and there is no
+     * selector that forces light from inside a dark subtree. The alternative, reading
+     * the two modes' compiled values out of the token package and painting them as
+     * inline colours, is a Component holding resolved values, which stops moving
+     * when a pack changes and is the exact defect the vector-ink gate exists to stop.
+     * So a swatch shows what the cascade can express and says which half is which.
+     *
+     * @defaultValue true
+     */
+    showModes?: boolean;
+    /**
+     * The drawn size of the swatch. @defaultValue 'md'
+     */
+    size?: keyof typeof SIZES;
+    /** A node after the sample, for a caller showing a name or a control beside it. */
+    children?: ReactNode;
+    /** Layout only, exactly as on every Component. */
+    className?: string;
+};
+/**
+ * A small preview of one pack, drawn on a surface that carries that pack's own
+ * boundary.
+ *
+ * **The radius follows the pack, and that is not a bug in the sample.** DESIGN.md's
+ * Theme Switching section says it in one rule: a `data-pack` boundary moves the
+ * corner radius beneath it, because radius is the only non-colour member of a
+ * pack block and the token build emits it the same way it emits colour. So
+ * `--radius` resolves from the nearest ancestor carrying `data-pack` and the
+ * whole scale from `--radius-sm` through `--radius-4xl` is derived from it by
+ * multiplication, and the five packs range from 0.5rem to 1rem. A swatch that
+ * showed only the colour would be a swatch that lied by omission: it would look
+ * like a pack whose corners do not move, and a reader comparing a pack in a
+ * chooser against a surface drawn in that pack would find two different shapes.
+ * The swatch is therefore fully rounded, which is the one placement the boundary
+ * law allows and the one place where a pack's radius is visible as itself: a disc
+ * at the page's radius and a disc at the pack's radius are the same disc until
+ * you put six of them in a row.
+ *
+ * **The boundary sits on a fully rounded element because that is what the law
+ * permits, and the other two placements would each have been worse.** A boundary
+ * belongs on a fully rounded element, on an element carrying no radius utility, or
+ * on a shape with no radius concept, and on nothing else. A `rounded-lg` swatch
+ * would be pinned to a scale step, and every step from `sm` to `4xl` is computed
+ * from `--radius` by multiplication, so a `rounded-lg` carrying a pack boundary
+ * is a card whose corners change with its colour: six swatches in a row, one per
+ * pack, and five different corner radii. An element with no radius utility would
+ * be square, which is a swatch that shows the pack's colour and hides the pack's
+ * shape, which is the omission above. So the sample is a disc, and `rounded-full`
+ * is a value no pack can move.
+ *
+ * **The sample is three semantic utilities and a rule, and it is a miniature of a
+ * real surface rather than a colour chip.** A `bg-primary` band over a `bg-muted`
+ * one, separated by a `border-border` hairline, is the smallest arrangement that
+ * shows all three things a pack changes: the brand fill, the surface everything
+ * else sits on, and the boundary between them. A single flat disc of `primary`
+ * would show one of the three and would look identical across packs whose brands
+ * are close, which is exactly the comparison a pack chooser exists to let a reader
+ * make.
+ *
+ * **The two halves are the mode the page is in and the dark mode, and the second
+ * one forces its own `dark` class.** The token build publishes the compound form
+ * `[data-pack="<id>"].dark` and the descendant form `.dark [data-pack="<id>"]`, and
+ * this is the second one: the dark half is a descendant of the boundary and
+ * carries the mode class itself, so the same `data-pack` resolves both halves and
+ * the dark one is dark whatever the page is doing. The class is on the half rather
+ * than on the root because a root-level `dark` would put both halves in one mode,
+ * and a swatch that claims to show two modes while showing one is a swatch lying
+ * about the only thing it is for.
+ *
+ * **On a page the reader has put in dark mode, the two halves are the same, and
+ * this Component does not pretend otherwise.** A boundary wears its ancestor's
+ * mode: that is the rule DESIGN.md states, and the reason a server can render one
+ * at all is that a server cannot know the reader's mode and therefore must not
+ * guess. So the first half is whatever the page already is, and the token build
+ * publishes no selector that forces light from inside a dark subtree, so there is
+ * no arrangement of class names that makes a dark page show a light swatch. The
+ * alternative is to read the two modes' compiled values out of the token package
+ * and paint them as inline colours, and that is refused for a reason the gates
+ * already hold rather than a preference: a resolved value does not move when a
+ * pack changes, which is the whole of what `check-vector-ink.mjs` is for. The
+ * consequence is written down rather than hidden, because a reader looking at six
+ * swatches on a dark page will notice, and a Component that cannot answer "why are
+ * these all the same" is a Component whose author has to.
+ *
+ * **`default` omits the attribute rather than setting it to `default`, and that is
+ * the token build's own spelling of the base pack.** `default` is expressed by
+ * the absence of `data-pack`, so a swatch for the neutral pack renders a
+ * `data-pack="default"` and the browser matches no emitted rule against it: the
+ * boundary would be present and inert, and every token beneath it would resolve
+ * from whatever ancestor happened to carry a real pack. On a page wearing a pack
+ * that is the worst of the two states, because a swatch claiming the neutral base
+ * palette would be drawn in the page's palette and would be a swatch that is
+ * confidently wrong. So the attribute is omitted, exactly as `ProductMark`
+ * omits it for the same reason, and the base pack resolves from the page, which
+ * is what a reader wearing no pack is wearing.
+ *
+ * **The swatch is a preview and not a control, and a caller who wants a control
+ * wants `product-switcher.tsx`.** It renders no button, takes no click, holds no
+ * state, and carries no `aria-pressed`: it is a `role="img"` with a name, which
+ * is the honest role for a picture whose content is decorative and whose meaning
+ * is its caption. A row of six of these is a legend, and making a legend's
+ * entries into controls means the reader has to discover that the little discs
+ * are clickable, that the current one is somewhere else on the page, and that
+ * clicking one changes the page rather than the picture. `ProductSwitcher` is the
+ * Component for that: it moves between a set of named things, marks the current
+ * one with `aria-current`, and each member is a real link. The cost of this
+ * decision is that a caller who wants a pack chooser has to build the chooser
+ * around six images rather than getting one, and that is stated here because it
+ * is the request this Component will most often get and the answer to it is
+ * upstream, in a Component that owns the switching.
+ */
+declare function PackSwatch({ pack, label, showModes, size, children, className, ...props }: PackSwatchProps): import("react").JSX.Element;
+export { PackSwatch };
+//# sourceMappingURL=pack-swatch.d.ts.map

package/dist/components/ui/pack-swatch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pack-swatch.d.ts","sourceRoot":"","sources":["../../../src/components/ui/pack-swatch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AAI3C;;;;;;;;GAQG;AACH,QAAA,MAAM,KAAK;;;;;;;;;;CAID,CAAA;AAEV,sCAAsC;AACtC,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,UAAU,CAAC,GAAG;IACvE;;;;;;;;;;OAUG;IACH,IAAI,EAAE,MAAM,CAAA;IACZ;;;;;;;OAOG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;;;;;;;;;;;;;;;;;;;;;;;;;OA0BG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,OAAO,KAAK,CAAA;IACzB,mFAAmF;IACnF,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2FG;AACH,iBAAS,UAAU,CAAC,EAClB,IAAI,EACJ,KAAK,EACL,SAAgB,EAChB,IAAW,EACX,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,eAAe,+BA8DjB;AAED,OAAO,EAAE,UAAU,EAAE,CAAA"}

package/dist/components/ui/pack-swatch.js

@@ -0,0 +1,117 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../lib/utils.js';
+/**
+ * The three sizes a swatch is drawn at.
+ *
+ * A swatch sits in a list of packs or in a row of them, and the three are the
+ * sizes a list of six needs: beside a name in a settings row, on its own in a
+ * pack chooser, and as the whole of a preview card. Sized through `className`
+ * instead, a swatch would be a size the layout owns, and `className` is layout
+ * only on every Component in this package.
+ */
+const SIZES = {
+    sm: { frame: 'size-6' },
+    md: { frame: 'size-8' },
+    lg: { frame: 'size-12' },
+};
+/**
+ * A small preview of one pack, drawn on a surface that carries that pack's own
+ * boundary.
+ *
+ * **The radius follows the pack, and that is not a bug in the sample.** DESIGN.md's
+ * Theme Switching section says it in one rule: a `data-pack` boundary moves the
+ * corner radius beneath it, because radius is the only non-colour member of a
+ * pack block and the token build emits it the same way it emits colour. So
+ * `--radius` resolves from the nearest ancestor carrying `data-pack` and the
+ * whole scale from `--radius-sm` through `--radius-4xl` is derived from it by
+ * multiplication, and the five packs range from 0.5rem to 1rem. A swatch that
+ * showed only the colour would be a swatch that lied by omission: it would look
+ * like a pack whose corners do not move, and a reader comparing a pack in a
+ * chooser against a surface drawn in that pack would find two different shapes.
+ * The swatch is therefore fully rounded, which is the one placement the boundary
+ * law allows and the one place where a pack's radius is visible as itself: a disc
+ * at the page's radius and a disc at the pack's radius are the same disc until
+ * you put six of them in a row.
+ *
+ * **The boundary sits on a fully rounded element because that is what the law
+ * permits, and the other two placements would each have been worse.** A boundary
+ * belongs on a fully rounded element, on an element carrying no radius utility, or
+ * on a shape with no radius concept, and on nothing else. A `rounded-lg` swatch
+ * would be pinned to a scale step, and every step from `sm` to `4xl` is computed
+ * from `--radius` by multiplication, so a `rounded-lg` carrying a pack boundary
+ * is a card whose corners change with its colour: six swatches in a row, one per
+ * pack, and five different corner radii. An element with no radius utility would
+ * be square, which is a swatch that shows the pack's colour and hides the pack's
+ * shape, which is the omission above. So the sample is a disc, and `rounded-full`
+ * is a value no pack can move.
+ *
+ * **The sample is three semantic utilities and a rule, and it is a miniature of a
+ * real surface rather than a colour chip.** A `bg-primary` band over a `bg-muted`
+ * one, separated by a `border-border` hairline, is the smallest arrangement that
+ * shows all three things a pack changes: the brand fill, the surface everything
+ * else sits on, and the boundary between them. A single flat disc of `primary`
+ * would show one of the three and would look identical across packs whose brands
+ * are close, which is exactly the comparison a pack chooser exists to let a reader
+ * make.
+ *
+ * **The two halves are the mode the page is in and the dark mode, and the second
+ * one forces its own `dark` class.** The token build publishes the compound form
+ * `[data-pack="<id>"].dark` and the descendant form `.dark [data-pack="<id>"]`, and
+ * this is the second one: the dark half is a descendant of the boundary and
+ * carries the mode class itself, so the same `data-pack` resolves both halves and
+ * the dark one is dark whatever the page is doing. The class is on the half rather
+ * than on the root because a root-level `dark` would put both halves in one mode,
+ * and a swatch that claims to show two modes while showing one is a swatch lying
+ * about the only thing it is for.
+ *
+ * **On a page the reader has put in dark mode, the two halves are the same, and
+ * this Component does not pretend otherwise.** A boundary wears its ancestor's
+ * mode: that is the rule DESIGN.md states, and the reason a server can render one
+ * at all is that a server cannot know the reader's mode and therefore must not
+ * guess. So the first half is whatever the page already is, and the token build
+ * publishes no selector that forces light from inside a dark subtree, so there is
+ * no arrangement of class names that makes a dark page show a light swatch. The
+ * alternative is to read the two modes' compiled values out of the token package
+ * and paint them as inline colours, and that is refused for a reason the gates
+ * already hold rather than a preference: a resolved value does not move when a
+ * pack changes, which is the whole of what `check-vector-ink.mjs` is for. The
+ * consequence is written down rather than hidden, because a reader looking at six
+ * swatches on a dark page will notice, and a Component that cannot answer "why are
+ * these all the same" is a Component whose author has to.
+ *
+ * **`default` omits the attribute rather than setting it to `default`, and that is
+ * the token build's own spelling of the base pack.** `default` is expressed by
+ * the absence of `data-pack`, so a swatch for the neutral pack renders a
+ * `data-pack="default"` and the browser matches no emitted rule against it: the
+ * boundary would be present and inert, and every token beneath it would resolve
+ * from whatever ancestor happened to carry a real pack. On a page wearing a pack
+ * that is the worst of the two states, because a swatch claiming the neutral base
+ * palette would be drawn in the page's palette and would be a swatch that is
+ * confidently wrong. So the attribute is omitted, exactly as `ProductMark`
+ * omits it for the same reason, and the base pack resolves from the page, which
+ * is what a reader wearing no pack is wearing.
+ *
+ * **The swatch is a preview and not a control, and a caller who wants a control
+ * wants `product-switcher.tsx`.** It renders no button, takes no click, holds no
+ * state, and carries no `aria-pressed`: it is a `role="img"` with a name, which
+ * is the honest role for a picture whose content is decorative and whose meaning
+ * is its caption. A row of six of these is a legend, and making a legend's
+ * entries into controls means the reader has to discover that the little discs
+ * are clickable, that the current one is somewhere else on the page, and that
+ * clicking one changes the page rather than the picture. `ProductSwitcher` is the
+ * Component for that: it moves between a set of named things, marks the current
+ * one with `aria-current`, and each member is a real link. The cost of this
+ * decision is that a caller who wants a pack chooser has to build the chooser
+ * around six images rather than getting one, and that is stated here because it
+ * is the request this Component will most often get and the answer to it is
+ * upstream, in a Component that owns the switching.
+ */
+function PackSwatch({ pack, label, showModes = true, size = 'md', children, className, ...props }) {
+    const drawn = SIZES[size];
+    // `default` is the absence of a pack id, spelled the way the token build
+    // spells it, so the base pack resolves from the page rather than from an
+    // attribute that matches no emitted rule.
+    const boundary = pack === 'default' ? undefined : pack;
+    return (_jsxs("span", { "data-slot": "pack-swatch", "data-pack": boundary, role: "img", "aria-label": label, className: cn('border-border bg-background inline-flex shrink-0 overflow-hidden rounded-full border', drawn.frame, className), ...props, children: [_jsxs("span", { "data-slot": "pack-swatch-mode", "data-swatch-mode": "inherited", className: "border-border flex min-w-0 flex-1 flex-col overflow-hidden border-e last:border-e-0", children: [_jsx("span", { "data-slot": "pack-swatch-accent", className: "bg-primary flex-1" }), _jsx("span", { "data-slot": "pack-swatch-surface", className: "bg-muted flex-1" })] }), showModes ? (_jsxs("span", { "data-slot": "pack-swatch-mode", "data-swatch-mode": "dark", className: "border-border flex min-w-0 flex-1 flex-col overflow-hidden dark", children: [_jsx("span", { "data-slot": "pack-swatch-accent", className: "bg-primary flex-1" }), _jsx("span", { "data-slot": "pack-swatch-surface", className: "bg-muted flex-1" })] })) : null, children] }));
+}
+export { PackSwatch };