panelui-web 0.0.0-stage → 0.2.0

package/dist/components/command-dock/index.js

@@ -0,0 +1,239 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * CommandDock — a small button that opens into a place to ask for something,
+ * with the answer arriving under it a row at a time.
+ *
+ * ```tsx
+ * <CommandDock onSubmit={ask}>
+ *   <CommandDock.Trigger>Ask</CommandDock.Trigger>
+ *   <CommandDock.Panel>
+ *     <CommandDock.Input placeholder="What do you want to find?" />
+ *     <CommandDock.Results>
+ *       {rows.map((row) => <CommandDock.Row key={row.id}>{row.text}</CommandDock.Row>)}
+ *     </CommandDock.Results>
+ *   </CommandDock.Panel>
+ * </CommandDock>
+ * ```
+ *
+ * ## One surface that opens
+ *
+ * The button and the panel are the same surface. Closed, it is a pill as
+ * wide as its label. Opened, it widens, the label fades into a field in the
+ * same place, and it grows downwards as rows arrive. Closing runs the same
+ * steps backwards: the rows fold up, then it narrows. Nothing appears from
+ * elsewhere, so it is clear what was pressed and where the answer belongs.
+ *
+ * ## It runs nothing
+ *
+ * The dock does not know where answers come from. `onSubmit` is handed what
+ * was typed, and the rows are whatever you render. A row that mounts slides
+ * in after the one before it, so rows added one by one read as an answer
+ * being written, whether they come from a search, a model or a list you
+ * already had.
+ *
+ * ## Closing
+ *
+ * Escape closes it and gives focus back to where it was, and so does a press
+ * anywhere outside it.
+ */
+import { createContext, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, } from 'react';
+import { tv } from 'tailwind-variants';
+const commandDockVariants = tv({
+    slots: {
+        root: 'relative flex w-full justify-center',
+        /*
+         * The widths are both real lengths, so the change between them can be
+         * animated; `auto` cannot. The easing has no overshoot: a surface this
+         * size that bounces as it closes reads as a mistake.
+         */
+        surface: 'overflow-hidden border bg-card text-card-foreground shadow-sm transition-[width,border-radius,box-shadow] duration-[400ms] ease-[cubic-bezier(0.2,0,0,1)] motion-reduce:transition-none',
+        // The label keeps its row whether or not it can be seen, so the surface
+        // is never shorter than one row and never jumps as the two trade places.
+        trigger: 'flex h-11 w-full cursor-pointer items-center justify-center gap-2 whitespace-nowrap px-4 text-sm font-medium outline-none transition-[opacity,background-color] duration-200 hover:bg-accent focus-visible:bg-accent [&_svg]:size-4 [&_svg]:shrink-0',
+        // Pulled up over the label's row: the field sits exactly where the label
+        // was, and the two fade through each other.
+        panel: '-mt-11 flex flex-col',
+        form: 'flex h-11 items-center gap-2 pe-1.5 ps-4 transition-opacity duration-200 motion-reduce:transition-none',
+        input: 'h-full min-w-0 flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground',
+        submit: 'inline-flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-full bg-primary text-primary-foreground outline-none transition-[opacity,scale] focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-card active:scale-95 disabled:cursor-default disabled:opacity-30 [&_svg]:size-4',
+        // Two rows of a grid, the second going from no height to its own, which
+        // is how the panel grows to whatever the rows come to.
+        results: 'grid transition-[grid-template-rows] duration-300 ease-out motion-reduce:transition-none',
+        resultsClip: 'min-h-0 overflow-hidden',
+        resultsInner: 'flex flex-col gap-0.5 border-t p-1.5',
+        row: 'flex items-center gap-3 rounded-xl px-2.5 py-2 text-sm transition-[opacity,translate] duration-300 ease-out starting:translate-y-1.5 starting:opacity-0 motion-reduce:transition-none [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground',
+        status: 'flex items-center gap-2 px-2.5 py-2 text-sm text-muted-foreground',
+        dots: 'flex gap-1',
+        dot: 'size-1 animate-pulse rounded-full bg-muted-foreground',
+    },
+    variants: {
+        /*
+         * Opening and closing are the same steps in opposite orders. Opening, the
+         * surface widens and the rows follow it down. Closing, the rows fold up
+         * first and the surface narrows after them, so what is seen is one thing
+         * putting itself away and not two things changing at once.
+         */
+        open: {
+            true: {
+                // One length, not a width and a limit on it: a change of width is
+                // animated from the width as written, and `100%` with a `max-width`
+                // would start the closing from the full width of whatever it is in.
+                surface: 'w-[min(100%,28rem)] rounded-3xl shadow-lg',
+                trigger: 'pointer-events-none opacity-0',
+                form: 'opacity-100 delay-150',
+            },
+            false: {
+                surface: 'w-[var(--pu-closed)] rounded-[1.375rem] delay-200',
+                trigger: 'opacity-100 delay-300',
+                form: 'pointer-events-none opacity-0',
+            },
+        },
+        filled: {
+            true: { results: 'grid-rows-[1fr] delay-200' },
+            false: { results: 'grid-rows-[0fr]' },
+        },
+        interactive: {
+            true: { row: 'cursor-pointer hover:bg-accent focus-visible:bg-accent focus-visible:outline-none' },
+        },
+    },
+});
+const CommandDockContext = createContext(null);
+function useDock(part) {
+    const dock = useContext(CommandDockContext);
+    if (!dock)
+        throw new Error(`${part} must be used inside a <CommandDock>.`);
+    return dock;
+}
+function CommandDockRoot({ open: controlledOpen, defaultOpen = false, onOpenChange, value: controlledValue, onValueChange, onSubmit, busy = false, closedWidth = '9rem', className, style, children, ...props }) {
+    const [internalOpen, setInternalOpen] = useState(defaultOpen);
+    const [internalValue, setInternalValue] = useState('');
+    const open = controlledOpen ?? internalOpen;
+    const value = controlledValue ?? internalValue;
+    const root = useRef(null);
+    const panelId = useId();
+    const slots = commandDockVariants({ open });
+    const setOpen = useCallback((next) => {
+        if (controlledOpen === undefined)
+            setInternalOpen(next);
+        onOpenChange?.(next);
+    }, [controlledOpen, onOpenChange]);
+    const setValue = useCallback((next) => {
+        if (controlledValue === undefined)
+            setInternalValue(next);
+        onValueChange?.(next);
+    }, [controlledValue, onValueChange]);
+    const submit = useCallback(() => {
+        const text = value.trim();
+        if (text && !busy)
+            onSubmit?.(text);
+    }, [value, busy, onSubmit]);
+    // A press outside closes it. Escape does too, and puts focus back on the
+    // surface so the next key goes somewhere sensible.
+    useEffect(() => {
+        if (!open)
+            return;
+        const onPointerDown = (event) => {
+            if (!root.current?.contains(event.target))
+                setOpen(false);
+        };
+        const onKeyDown = (event) => {
+            if (event.key !== 'Escape' || !root.current?.contains(document.activeElement))
+                return;
+            setOpen(false);
+            requestAnimationFrame(() => root.current?.querySelector('[data-dock-trigger]')?.focus());
+        };
+        document.addEventListener('pointerdown', onPointerDown);
+        document.addEventListener('keydown', onKeyDown);
+        return () => {
+            document.removeEventListener('pointerdown', onPointerDown);
+            document.removeEventListener('keydown', onKeyDown);
+        };
+    }, [open, setOpen]);
+    const context = useMemo(() => ({ open, setOpen, value, setValue, submit, busy, panelId }), [open, setOpen, value, setValue, submit, busy, panelId]);
+    return (_jsx(CommandDockContext.Provider, { value: context, children: _jsx("div", { ref: root, className: slots.root({ className }), ...props, children: _jsx("div", { "data-open": open ? '' : undefined, className: slots.surface(), style: { ['--pu-closed']: closedWidth, ...style }, children: children }) }) }));
+}
+CommandDockRoot.displayName = 'CommandDock';
+/** Keeps an element out of the tab order and the accessibility tree while it cannot be seen. */
+function useInert(inert) {
+    const ref = useRef(null);
+    // Before anything else runs: the field asks for focus as the dock opens,
+    // and an element inside something still inert cannot take it.
+    useLayoutEffect(() => {
+        // Set on the element, not passed as a prop: how a boolean `inert` prop is
+        // written to the page differs between React versions.
+        ref.current?.toggleAttribute('inert', inert);
+    }, [inert]);
+    return ref;
+}
+/** The closed form: a button that opens the dock. */
+function CommandDockTrigger({ className, onClick, ...props }) {
+    const dock = useDock('CommandDock.Trigger');
+    const ref = useInert(dock.open);
+    return (_jsx("button", { ref: ref, type: "button", "data-dock-trigger": "", "aria-expanded": dock.open, "aria-controls": dock.panelId, className: commandDockVariants({ open: dock.open }).trigger({ className }), onClick: (event) => {
+            onClick?.(event);
+            if (!event.defaultPrevented)
+                dock.setOpen(true);
+        }, ...props }));
+}
+CommandDockTrigger.displayName = 'CommandDock.Trigger';
+/** The open form: the field, and the rows under it. */
+function CommandDockPanel({ className, ...props }) {
+    const dock = useDock('CommandDock.Panel');
+    // Kept in the page while closed, so it can be seen folding away. Inert, so
+    // nothing in it can be reached while it cannot be seen.
+    const ref = useInert(!dock.open);
+    return (_jsx("div", { ref: ref, id: dock.panelId, "data-open": dock.open ? '' : undefined, className: commandDockVariants().panel({ className }), ...props }));
+}
+CommandDockPanel.displayName = 'CommandDock.Panel';
+/** The field, with a button to send what is in it. Enter sends too. */
+function CommandDockInput({ className, submitLabel = 'Send', 'aria-label': ariaLabel = 'Ask', ...props }) {
+    const dock = useDock('CommandDock.Input');
+    const slots = commandDockVariants({ open: dock.open });
+    const field = useRef(null);
+    // It is opened in order to type in it. Asked for without scrolling: the
+    // surface is still on its way to its size, and the page should not chase it.
+    useEffect(() => {
+        if (dock.open)
+            field.current?.focus({ preventScroll: true });
+    }, [dock.open]);
+    const send = (event) => {
+        event.preventDefault();
+        dock.submit();
+    };
+    return (_jsxs("form", { role: "search", className: slots.form(), onSubmit: send, children: [_jsx("input", { ref: field, type: "text", "aria-label": ariaLabel, value: dock.value, onChange: (event) => dock.setValue(event.target.value), className: slots.input({ className }), ...props }), _jsx("button", { type: "submit", "aria-label": submitLabel, disabled: dock.busy || dock.value.trim() === '', className: slots.submit(), children: _jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.25", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "M12 19V5M5 12l7-7 7 7" }) }) })] }));
+}
+CommandDockInput.displayName = 'CommandDock.Input';
+/** Where the rows go. It takes no room until there is something in it. */
+function CommandDockResults({ className, label = 'Results', children, ...props }) {
+    const dock = useDock('CommandDock.Results');
+    const rows = Array.isArray(children) ? children.flat().filter(Boolean).length : children ? 1 : 0;
+    // Closed, it folds away whatever it holds.
+    const filled = dock.open && (rows > 0 || dock.busy);
+    const slots = commandDockVariants({ filled });
+    return (_jsx("div", { className: slots.results(), children: _jsx("div", { className: slots.resultsClip(), children: _jsx("div", { role: "list", "aria-label": label, "aria-live": "polite", className: slots.resultsInner({ className }), ...props, children: children }) }) }));
+}
+CommandDockResults.displayName = 'CommandDock.Results';
+/** One row of the answer. It slides in when it is added. */
+function CommandDockRow({ className, onSelect, children, ...props }) {
+    const slots = commandDockVariants({ interactive: onSelect !== undefined });
+    return (_jsx("div", { role: "listitem", ...props, children: onSelect ? (_jsx("button", { type: "button", onClick: onSelect, className: slots.row({ className: ['w-full text-start', className] }), children: children })) : (_jsx("div", { className: slots.row({ className }), children: children })) }));
+}
+CommandDockRow.displayName = 'CommandDock.Row';
+/** Shown under the rows while `busy`: three dots, and words if you give it some. */
+function CommandDockStatus({ className, children = 'Working', ...props }) {
+    const slots = commandDockVariants();
+    return (_jsxs("div", { role: "status", className: slots.status({ className }), ...props, children: [_jsxs("span", { "aria-hidden": "true", className: slots.dots(), children: [_jsx("span", { className: slots.dot() }), _jsx("span", { className: slots.dot({ className: '[animation-delay:150ms]' }) }), _jsx("span", { className: slots.dot({ className: '[animation-delay:300ms]' }) })] }), children] }));
+}
+CommandDockStatus.displayName = 'CommandDock.Status';
+export const CommandDock = Object.assign(CommandDockRoot, {
+    Trigger: CommandDockTrigger,
+    Panel: CommandDockPanel,
+    Input: CommandDockInput,
+    Results: CommandDockResults,
+    Row: CommandDockRow,
+    Status: CommandDockStatus,
+});
+/* By name as well, for a Server Component, which cannot dot into a client
+   module. */
+export { CommandDockTrigger, CommandDockPanel, CommandDockInput, CommandDockResults, CommandDockRow, CommandDockStatus, };

package/dist/components/day-grid/index.d.ts

@@ -0,0 +1,87 @@
+/**
+ * DayGrid — a run of days as a field of dots, each sized by how much happened
+ * on it.
+ *
+ * ```tsx
+ * <DayGrid cells={days} columns={7} />
+ * <DayGrid.Legend />
+ * ```
+ *
+ * ## Size carries the amount, not only shade
+ *
+ * A day is level 0 to 4, and its dot grows with the level: a speck for a day
+ * with nothing on it, a full disc for the busiest. The period reads the way a
+ * halftone print does, heavy where a lot happened and thin where little did,
+ * and it still reads for someone who cannot tell two shades of one colour
+ * apart.
+ *
+ * ## The pointer is a lens
+ *
+ * Dots swell as the pointer comes near and settle as it leaves, so the day
+ * under the pointer is the largest thing on the grid and its neighbours lean
+ * towards it. The day's `label` is shown in a tag above it. The lens changes
+ * nothing about what the grid says; it is there to make one day easy to
+ * single out among forty.
+ *
+ * ## Days you can ask about
+ *
+ * Pass `onValueChange` and each day becomes a button. The grid then behaves as
+ * one control to the keyboard: a single Tab stop, with the arrow keys moving
+ * between days, so forty days are not forty presses of Tab.
+ */
+import { type ComponentProps, type ReactNode } from 'react';
+/** How much happened on a day: 0 is nothing, 4 is the most. */
+export type DayLevel = 0 | 1 | 2 | 3 | 4;
+/** Which of the theme's roles the dots are drawn in. */
+export type DayGridColor = 'primary' | 'info' | 'success' | 'warning' | 'destructive';
+export interface DayCell {
+    level: DayLevel;
+    /** What the day is, for the tag and a screen reader: "14 May, 6 commits". */
+    label?: string;
+}
+export interface DayGridProps extends Omit<ComponentProps<'div'>, 'children' | 'onChange' | 'color'> {
+    /** The days, in order. They fill the grid row by row. */
+    cells: DayCell[];
+    /** Cells per row. Seven makes each row a week. */
+    columns?: number;
+    /**
+     * Cells per column. Giving this fills the grid column by column, and
+     * `columns` is ignored. Seven makes each column a week, which lays a long
+     * period out wide and short.
+     */
+    rows?: number;
+    /** Which of the theme's roles the dots are drawn in. */
+    color?: DayGridColor;
+    /** The index of the selected day, when the caller holds it. */
+    value?: number | null;
+    /**
+     * Called with the index of a day when it is pressed. Passing this makes the
+     * days buttons; without it the grid is a picture.
+     */
+    onValueChange?: (index: number) => void;
+    /** Set to `false` for dots that hold still under the pointer. */
+    lens?: boolean;
+    /** What a screen reader calls the grid. */
+    label?: string;
+}
+declare function DayGridRoot({ cells, columns, rows: perColumn, color, value, onValueChange, lens, label, className, style, onPointerMove, onPointerLeave, ...props }: DayGridProps): import("react").JSX.Element;
+declare namespace DayGridRoot {
+    var displayName: string;
+}
+export interface DayGridLegendProps extends Omit<ComponentProps<'div'>, 'children' | 'color'> {
+    /** The same role the grid is drawn in. */
+    color?: DayGridColor;
+    /** The word at the quiet end of the scale. */
+    less?: ReactNode;
+    /** The word at the busy end of the scale. */
+    more?: ReactNode;
+}
+/** The five sizes, quietest to busiest, with a word at each end. */
+declare function DayGridLegend({ color, less, more, className, ...props }: DayGridLegendProps): import("react").JSX.Element;
+declare namespace DayGridLegend {
+    var displayName: string;
+}
+export declare const DayGrid: typeof DayGridRoot & {
+    Legend: typeof DayGridLegend;
+};
+export { DayGridLegend };

package/dist/components/day-grid/index.js

@@ -0,0 +1,251 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * DayGrid — a run of days as a field of dots, each sized by how much happened
+ * on it.
+ *
+ * ```tsx
+ * <DayGrid cells={days} columns={7} />
+ * <DayGrid.Legend />
+ * ```
+ *
+ * ## Size carries the amount, not only shade
+ *
+ * A day is level 0 to 4, and its dot grows with the level: a speck for a day
+ * with nothing on it, a full disc for the busiest. The period reads the way a
+ * halftone print does, heavy where a lot happened and thin where little did,
+ * and it still reads for someone who cannot tell two shades of one colour
+ * apart.
+ *
+ * ## The pointer is a lens
+ *
+ * Dots swell as the pointer comes near and settle as it leaves, so the day
+ * under the pointer is the largest thing on the grid and its neighbours lean
+ * towards it. The day's `label` is shown in a tag above it. The lens changes
+ * nothing about what the grid says; it is there to make one day easy to
+ * single out among forty.
+ *
+ * ## Days you can ask about
+ *
+ * Pass `onValueChange` and each day becomes a button. The grid then behaves as
+ * one control to the keyboard: a single Tab stop, with the arrow keys moving
+ * between days, so forty days are not forty presses of Tab.
+ */
+import { useEffect, useMemo, useRef, useState, } from 'react';
+import { tv } from 'tailwind-variants';
+const dayGridVariants = tv({
+    slots: {
+        root: 'relative grid w-full gap-1',
+        // The cell is the target and keeps its size. Only the dot inside it grows.
+        cell: 'relative flex aspect-square w-full items-center justify-center rounded-full outline-none',
+        /*
+         * One scale made of three parts: how big the level is, how near the
+         * pointer is, and whether the grid has arrived yet. Kept as variables so
+         * each can change without a class changing.
+         */
+        dot: 'block size-full rounded-full [scale:calc(var(--pu-size)*(1+var(--pu-lens,0)*0.5)*var(--pu-in,1))] transition-[scale,box-shadow] duration-200 ease-[cubic-bezier(0.34,1.56,0.64,1)] motion-reduce:transition-none',
+        tag: 'pointer-events-none absolute z-20 whitespace-nowrap rounded-lg bg-foreground px-2 py-1 text-xs font-medium text-background shadow-lg',
+        legend: 'flex items-center gap-1.5 text-xs text-muted-foreground',
+        swatch: 'flex size-4 items-center justify-center',
+    },
+    variants: {
+        /*
+         * The colour is written to one variable and every dot reads it. The legend
+         * is a sibling of the grid, not a child, so it takes the same variant.
+         */
+        color: {
+            primary: { root: '[--pu-color:var(--primary)]', legend: '[--pu-color:var(--primary)]' },
+            info: { root: '[--pu-color:var(--info)]', legend: '[--pu-color:var(--info)]' },
+            success: { root: '[--pu-color:var(--success)]', legend: '[--pu-color:var(--success)]' },
+            warning: { root: '[--pu-color:var(--warning)]', legend: '[--pu-color:var(--warning)]' },
+            destructive: {
+                root: '[--pu-color:var(--destructive)]',
+                legend: '[--pu-color:var(--destructive)]',
+            },
+        },
+        level: {
+            0: { dot: 'bg-muted-foreground/30 [--pu-size:0.2]' },
+            1: { dot: 'bg-[color-mix(in_oklab,var(--pu-color)_45%,transparent)] [--pu-size:0.42]' },
+            2: { dot: 'bg-[color-mix(in_oklab,var(--pu-color)_65%,transparent)] [--pu-size:0.6]' },
+            3: { dot: 'bg-[color-mix(in_oklab,var(--pu-color)_85%,transparent)] [--pu-size:0.8]' },
+            // The busiest days carry a little light of their own.
+            4: {
+                dot: 'bg-[var(--pu-color)] shadow-[0_0_14px_color-mix(in_oklab,var(--pu-color)_45%,transparent)] [--pu-size:1]',
+            },
+        },
+        interactive: {
+            true: {
+                cell: 'cursor-pointer focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background',
+            },
+        },
+        selected: {
+            true: { cell: 'ring-2 ring-foreground ring-offset-2 ring-offset-background' },
+        },
+    },
+});
+const LEVELS = [0, 1, 2, 3, 4];
+/** How far the lens reaches, in cells. */
+const LENS_REACH = 2.4;
+/** Milliseconds between one diagonal of dots arriving and the next. */
+const STAGGER = 22;
+function DayGridRoot({ cells, columns = 7, rows: perColumn, color = 'primary', value = null, onValueChange, lens = true, label = 'Activity', className, style, onPointerMove, onPointerLeave, ...props }) {
+    const slots = dayGridVariants({ color });
+    const root = useRef(null);
+    const nodes = useRef([]);
+    const frame = useRef(0);
+    const interactive = onValueChange !== undefined;
+    // The day whose tag is showing: the one under the pointer, or with focus.
+    const [pointed, setPointed] = useState(null);
+    // The dots start at nothing and arrive along the diagonals.
+    const [arrived, setArrived] = useState('no');
+    // Which way the days run: along each row, or down each column.
+    const byColumn = perColumn !== undefined;
+    const across = byColumn ? Math.ceil(cells.length / Math.max(1, perColumn)) : columns;
+    const rows = byColumn ? Math.max(1, perColumn) : Math.ceil(cells.length / columns);
+    useEffect(() => {
+        const start = requestAnimationFrame(() => setArrived('arriving'));
+        // Once the last diagonal is in, the delays come off. Left on, they would
+        // hold every dot back from the lens by its own share of the stagger.
+        const settle = setTimeout(() => setArrived('yes'), (rows + across) * STAGGER + 450);
+        return () => {
+            cancelAnimationFrame(start);
+            clearTimeout(settle);
+        };
+    }, [rows, across]);
+    useEffect(() => () => cancelAnimationFrame(frame.current), []);
+    const summary = useMemo(() => {
+        const active = cells.filter((cell) => cell.level > 0).length;
+        return `${label}: something on ${active} of ${cells.length} days.`;
+    }, [cells, label]);
+    const moveLens = (event) => {
+        onPointerMove?.(event);
+        // A finger covers what a lens would show, and has no hover to end it.
+        if (event.pointerType === 'touch')
+            return;
+        const still = !lens || window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+        const { clientX, clientY } = event;
+        cancelAnimationFrame(frame.current);
+        frame.current = requestAnimationFrame(() => {
+            let nearest = null;
+            let best = Infinity;
+            nodes.current.forEach((node, index) => {
+                if (!node)
+                    return;
+                const box = node.getBoundingClientRect();
+                const distance = Math.hypot(clientX - (box.left + box.width / 2), clientY - (box.top + box.height / 2));
+                if (!still) {
+                    const near = Math.max(0, 1 - distance / (box.width * LENS_REACH));
+                    // Eased, so the swell has a soft edge and a round top.
+                    node.style.setProperty('--pu-lens', (near * near * (3 - 2 * near)).toFixed(3));
+                }
+                if (distance < best && distance < box.width * 0.75) {
+                    best = distance;
+                    nearest = index;
+                }
+            });
+            setPointed(nearest);
+        });
+    };
+    const leave = (event) => {
+        onPointerLeave?.(event);
+        cancelAnimationFrame(frame.current);
+        for (const node of nodes.current)
+            node?.style.removeProperty('--pu-lens');
+        setPointed(null);
+    };
+    const layout = byColumn
+        ? {
+            gridTemplateRows: `repeat(${rows}, auto)`,
+            gridAutoFlow: 'column',
+            gridAutoColumns: 'minmax(0, 1fr)',
+            ...style,
+        }
+        : { gridTemplateColumns: `repeat(${across}, minmax(0, 1fr))`, ...style };
+    /** Where a dot is in its entrance, as the styles that put it there. */
+    const dotStyle = (index) => {
+        if (arrived === 'yes')
+            return undefined;
+        const diagonal = byColumn
+            ? Math.floor(index / rows) + (index % rows)
+            : Math.floor(index / across) + (index % across);
+        return {
+            ['--pu-in']: arrived === 'no' ? 0 : 1,
+            transitionDelay: `${diagonal * STAGGER}ms`,
+            transitionDuration: '420ms',
+        };
+    };
+    const tag = (() => {
+        if (pointed === null)
+            return null;
+        const text = cells[pointed]?.label;
+        const node = nodes.current[pointed];
+        const box = root.current;
+        if (!text || !node || !box)
+            return null;
+        const centre = node.offsetLeft + node.offsetWidth / 2;
+        // Hung from whichever side keeps it inside the grid.
+        const share = centre / box.offsetWidth;
+        const shift = share < 0.25 ? '-12%' : share > 0.75 ? '-88%' : '-50%';
+        return (_jsx("span", { "aria-hidden": "true", className: slots.tag(), style: { left: centre, top: node.offsetTop - 6, translate: `${shift} -100%` }, children: text }));
+    })();
+    if (!interactive) {
+        return (_jsxs("div", { ref: root, role: "img", "aria-label": summary, className: slots.root({ className }), style: layout, onPointerMove: moveLens, onPointerLeave: leave, ...props, children: [cells.map((cell, index) => {
+                    const part = dayGridVariants({ level: cell.level });
+                    return (_jsx("span", { ref: (node) => {
+                            nodes.current[index] = node;
+                        }, className: part.cell(), children: _jsx("span", { className: part.dot(), style: dotStyle(index) }) }, index));
+                }), tag] }));
+    }
+    // One Tab stop for the grid: the selected day, or the first.
+    const focusable = value !== null && value >= 0 && value < cells.length ? value : 0;
+    const onKeyDown = (event, index) => {
+        const rtl = getComputedStyle(event.currentTarget).direction === 'rtl';
+        const moves = {
+            // One day along a row, or one whole column when the days run downwards.
+            ArrowLeft: (rtl ? 1 : -1) * (byColumn ? rows : 1),
+            ArrowRight: (rtl ? -1 : 1) * (byColumn ? rows : 1),
+            ArrowUp: byColumn ? -1 : -across,
+            ArrowDown: byColumn ? 1 : across,
+        };
+        let next;
+        if (event.key in moves)
+            next = index + (moves[event.key] ?? 0);
+        else if (event.key === 'Home')
+            next = 0;
+        else if (event.key === 'End')
+            next = cells.length - 1;
+        if (next === undefined || next < 0 || next >= cells.length)
+            return;
+        event.preventDefault();
+        nodes.current[next]?.focus();
+        onValueChange(next);
+    };
+    return (_jsxs("div", { ref: root, role: "group", "aria-label": summary, className: slots.root({ className }), style: layout, onPointerMove: moveLens, onPointerLeave: leave, ...props, children: [cells.map((cell, index) => {
+                const part = dayGridVariants({
+                    level: cell.level,
+                    interactive: true,
+                    selected: value === index,
+                });
+                return (_jsx("button", { ref: (node) => {
+                        nodes.current[index] = node;
+                    }, type: "button", "aria-label": cell.label ?? `Day ${index + 1}, level ${cell.level} of 4`, "aria-pressed": value === index, tabIndex: index === focusable ? 0 : -1, onClick: () => onValueChange(index), onKeyDown: (event) => onKeyDown(event, index), onFocus: (event) => {
+                        // Only for focus that came from the keyboard: a click focuses
+                        // too, and the pointer is already showing that day's tag.
+                        if (event.currentTarget.matches(':focus-visible'))
+                            setPointed(index);
+                    }, onBlur: () => setPointed((current) => (current === index ? null : current)), className: part.cell(), children: _jsx("span", { className: part.dot(), style: dotStyle(index) }) }, index));
+            }), tag] }));
+}
+DayGridRoot.displayName = 'DayGrid';
+/** The five sizes, quietest to busiest, with a word at each end. */
+function DayGridLegend({ color = 'primary', less = 'Less', more = 'More', className, ...props }) {
+    const slots = dayGridVariants({ color });
+    return (_jsxs("div", { className: slots.legend({ className }), ...props, children: [_jsx("span", { children: less }), LEVELS.map((level) => (_jsx("span", { "aria-hidden": "true", className: slots.swatch(), children: _jsx("span", { className: dayGridVariants({ level }).dot({ className: 'shadow-none' }) }) }, level))), _jsx("span", { children: more })] }));
+}
+DayGridLegend.displayName = 'DayGrid.Legend';
+export const DayGrid = Object.assign(DayGridRoot, {
+    Legend: DayGridLegend,
+});
+/* By name as well, for a Server Component, which cannot dot into a client
+   module. */
+export { DayGridLegend };