panelui-web 0.6.0 → 0.8.0

package/dist/components/alert-dialog/index.js

@@ -0,0 +1,327 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * AlertDialog — a question that has to be answered before anything else on
+ * the page can be done: delete this, discard that, sign out everywhere.
+ *
+ * ```tsx
+ * <AlertDialog>
+ *   <AlertDialog.Trigger render={<Button variant="destructive" />}>Delete project</AlertDialog.Trigger>
+ *   <AlertDialog.Content tone="destructive">
+ *     <AlertDialog.Title>Delete Orchard?</AlertDialog.Title>
+ *     <AlertDialog.Description>Its 14 boards and their history go with it.</AlertDialog.Description>
+ *     <AlertDialog.Footer>
+ *       <AlertDialog.Cancel />
+ *       <AlertDialog.Action onClick={remove}>Delete project</AlertDialog.Action>
+ *     </AlertDialog.Footer>
+ *   </AlertDialog.Content>
+ * </AlertDialog>
+ * ```
+ *
+ * ## A press outside is Cancel
+ *
+ * A press anywhere outside the dialog, Escape and `AlertDialog.Cancel` all
+ * close it without doing anything; an action closes it once it has done its
+ * work. `dismissible={false}` takes the outside press away, for a question
+ * that should not be waved off by a stray click. While an action is running,
+ * nothing closes it.
+ *
+ * ## The question, then the answers
+ *
+ * It is drawn as a panel in a darker band, the way Feedback is: the panel
+ * holds the question, and `AlertDialog.Footer` moves out of it into the band
+ * underneath, where the answers sit side by side at equal widths. Neither
+ * answer is made to look like the default by being bigger.
+ *
+ * ## Actions that take time, or nerve
+ *
+ * An action whose `onClick` returns a promise shows a spinner and keeps the
+ * dialog open, and unclosable, until the promise settles: closed if it
+ * resolved, still open if it failed, so the failure can be shown in it.
+ * `hold` makes an action one that must be pressed and held while a fill
+ * runs across it, for a step that cannot be undone.
+ */
+// The dialog primitive rather than the alert-dialog one, which refuses every
+// press outside; the role is still `alertdialog`, set on the popup.
+import { Dialog as Primitive } from '@base-ui/react/dialog';
+import { Children, createContext, isValidElement, useCallback, useContext, useEffect, useId, useMemo, useRef, useState, } from 'react';
+import { tv } from 'tailwind-variants';
+import { Button } from '../button/index.js';
+const alertDialogVariants = tv({
+    slots: {
+        backdrop: 'fixed inset-0 z-50 bg-black/40 transition-opacity duration-200 data-ending-style:opacity-0 data-starting-style:opacity-0 motion-reduce:transition-none',
+        viewport: 'fixed inset-0 z-50 grid place-items-center overflow-y-auto p-4',
+        /*
+         * The band is the popover surface with black mixed in, so it is the
+         * darker of the two in a light theme and a dark one alike. 38 and 30 are
+         * one corner: the panel's radius is the band's less the 8px between them.
+         */
+        shell: 'relative flex w-full flex-col rounded-[38px] bg-[color-mix(in_oklab,var(--popover),black_5%)] p-2 text-popover-foreground shadow-xl outline-none ring-1 ring-foreground/[0.06] dark:bg-[color-mix(in_oklab,var(--popover),black_14%)]',
+        popup: 'transition-[opacity,scale,translate] duration-200 ease-[cubic-bezier(0.2,0,0,1)] data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:translate-y-2 data-starting-style:scale-95 data-starting-style:opacity-0 motion-reduce:transition-none',
+        panel: 'flex flex-col gap-2 rounded-[30px] bg-popover p-5 shadow-xs',
+        media: [
+            'mb-2 flex size-12 shrink-0 items-center justify-center rounded-full',
+            'bg-[color-mix(in_oklab,var(--pu-tone)_14%,transparent)] text-[var(--pu-tone)] [&_svg:not([class*=size-])]:size-6',
+        ],
+        title: 'text-[19px] font-semibold leading-6 tracking-[-0.01em]',
+        description: 'text-[15px] leading-[22px] text-muted-foreground',
+        // Held in from the band's edge further than the panel is, so the row of
+        // answers does not read as a third edge of the dialog.
+        footer: 'flex items-center gap-3 px-[18px] pb-2.5 pt-4',
+        action: 'relative isolate h-11 min-w-0 flex-1 overflow-hidden rounded-full px-4 text-[15px]',
+        // Drawn under the label and over the button's own fill, from the start edge.
+        fill: 'pointer-events-none absolute inset-0 -z-10 origin-left scale-x-0 bg-[color-mix(in_oklab,currentColor_24%,transparent)] rtl:origin-right',
+    },
+    variants: {
+        palette: {
+            neutral: { shell: '[--pu-tone:var(--muted-foreground)]' },
+            info: { shell: '[--pu-tone:var(--info)]' },
+            success: { shell: '[--pu-tone:var(--success)]' },
+            warning: { shell: '[--pu-tone:var(--warning)]' },
+            destructive: { shell: '[--pu-tone:var(--destructive)]' },
+        },
+        size: {
+            default: { shell: 'max-w-md' },
+            // Narrow, so the question is centred over the two answers.
+            sm: { shell: 'max-w-xs', panel: 'items-center text-center' },
+        },
+        blur: {
+            true: { backdrop: 'bg-black/20 backdrop-blur-md' },
+        },
+        /** How much an answer asks to be pressed: filled, or a tint of its colour. */
+        weight: {
+            solid: {},
+            soft: {},
+        },
+        actionTone: {
+            primary: {},
+            destructive: {},
+            neutral: {},
+        },
+    },
+    compoundVariants: [
+        {
+            weight: 'soft',
+            actionTone: 'primary',
+            className: { action: 'bg-foreground/10 text-foreground hover:not-disabled:bg-foreground/15 hover:not-disabled:text-foreground' },
+        },
+        {
+            weight: 'soft',
+            actionTone: 'neutral',
+            className: {
+                action: 'bg-foreground/10 text-muted-foreground hover:not-disabled:bg-foreground/15 hover:not-disabled:text-foreground',
+            },
+        },
+        {
+            weight: 'soft',
+            actionTone: 'destructive',
+            className: {
+                action: 'bg-[color-mix(in_oklab,var(--destructive)_12%,transparent)] text-destructive hover:not-disabled:bg-[color-mix(in_oklab,var(--destructive)_18%,transparent)] hover:not-disabled:text-destructive',
+            },
+        },
+    ],
+    defaultVariants: { palette: 'neutral', size: 'default' },
+});
+const AlertDialogContext = createContext(null);
+function useAlertDialog(part) {
+    const context = useContext(AlertDialogContext);
+    if (!context)
+        throw new Error(`${part} must be used inside an <AlertDialog>.`);
+    return context;
+}
+function AlertDialogRoot({ children, open, defaultOpen = false, onOpenChange, dismissible = true, }) {
+    const [internalOpen, setInternalOpen] = useState(defaultOpen);
+    const resolvedOpen = open ?? internalOpen;
+    const [busy, setBusy] = useState(false);
+    const setOpen = useCallback((next) => {
+        if (open === undefined)
+            setInternalOpen(next);
+        onOpenChange?.(next);
+    }, [open, onOpenChange]);
+    const context = useMemo(() => ({ open: resolvedOpen, setOpen, busy, setBusy, tone: 'neutral', inline: false }), [resolvedOpen, setOpen, busy]);
+    return (_jsx(AlertDialogContext.Provider, { value: context, children: _jsx(Primitive.Root, { open: resolvedOpen, disablePointerDismissal: !dismissible, onOpenChange: (next) => {
+                // While an action runs, the answer is already being acted on.
+                if (!next && busy)
+                    return;
+                setOpen(next);
+            }, children: children }) }));
+}
+AlertDialogRoot.displayName = 'AlertDialog';
+/** What opens the dialog. A plain button unless `render` supplies one. */
+function AlertDialogTrigger({ render, children, ...props }) {
+    return (_jsx(Primitive.Trigger, { render: render, ...props, children: children }));
+}
+AlertDialogTrigger.displayName = 'AlertDialog.Trigger';
+const isFooter = (child) => isValidElement(child) && child.type === AlertDialogFooter;
+/** The dialog: the panel with the question, in a band that holds the answers. */
+function AlertDialogContent({ tone = 'neutral', size = 'default', blur = false, inline = false, className, children, ...props }) {
+    const dialog = useAlertDialog('AlertDialog.Content');
+    const slots = alertDialogVariants({ palette: tone, size, blur });
+    const context = useMemo(() => ({ ...dialog, tone, inline }), [dialog, tone, inline]);
+    // The footer leaves the panel for the band under it.
+    const all = Children.toArray(children);
+    const footer = all.filter(isFooter);
+    const inside = (_jsxs(AlertDialogContext.Provider, { value: context, children: [_jsx("div", { "data-slot": "alert-dialog-panel", className: slots.panel(), children: all.filter((child) => !isFooter(child)) }), footer] }));
+    if (inline) {
+        return (_jsx("div", { "data-slot": "alert-dialog-content", "data-tone": tone, className: slots.shell({ className }), ...props, children: inside }));
+    }
+    return (_jsxs(Primitive.Portal, { children: [_jsx(Primitive.Backdrop, { className: slots.backdrop() }), _jsx(Primitive.Viewport, { className: slots.viewport(), children: _jsx(Primitive.Popup, { role: "alertdialog", "data-slot": "alert-dialog-content", "data-tone": tone, className: slots.shell({ className: [slots.popup(), className] }), ...props, children: inside }) })] }));
+}
+AlertDialogContent.displayName = 'AlertDialog.Content';
+/** A glyph in a disc of the dialog's tone, above the title. */
+function AlertDialogMedia({ className, ...props }) {
+    return _jsx("div", { "data-slot": "alert-dialog-media", "aria-hidden": "true", className: alertDialogVariants().media({ className }), ...props });
+}
+AlertDialogMedia.displayName = 'AlertDialog.Media';
+/** The question. It is what the dialog is announced as. */
+function AlertDialogTitle({ className, ...props }) {
+    const { inline } = useAlertDialog('AlertDialog.Title');
+    const slots = alertDialogVariants();
+    if (inline)
+        return _jsx("h2", { "data-slot": "alert-dialog-title", className: slots.title({ className }), ...props });
+    return _jsx(Primitive.Title, { "data-slot": "alert-dialog-title", className: slots.title({ className }), ...props });
+}
+AlertDialogTitle.displayName = 'AlertDialog.Title';
+/** What follows from each answer, read out after the title. */
+function AlertDialogDescription({ className, ...props }) {
+    const { inline } = useAlertDialog('AlertDialog.Description');
+    const slots = alertDialogVariants();
+    if (inline)
+        return _jsx("p", { "data-slot": "alert-dialog-description", className: slots.description({ className }), ...props });
+    return _jsx(Primitive.Description, { "data-slot": "alert-dialog-description", className: slots.description({ className }), ...props });
+}
+AlertDialogDescription.displayName = 'AlertDialog.Description';
+/**
+ * The answers, side by side at equal widths in the band under the panel.
+ * Keep it a direct child of `AlertDialog.Content`, so the band can find it.
+ */
+function AlertDialogFooter({ className, ...props }) {
+    return _jsx("div", { "data-slot": "alert-dialog-footer", className: alertDialogVariants().footer({ className }), ...props });
+}
+AlertDialogFooter.displayName = 'AlertDialog.Footer';
+/** Closes the dialog without doing anything. It reads "Cancel" unless given children. */
+function AlertDialogCancel({ className, children = 'Cancel', disabled, ...props }) {
+    const dialog = useAlertDialog('AlertDialog.Cancel');
+    const slots = alertDialogVariants({ weight: 'soft', actionTone: 'neutral' });
+    const button = (_jsx(Button, { variant: "ghost", "data-slot": "alert-dialog-cancel", disabled: disabled || dialog.busy, className: slots.action({ className }), ...props }));
+    if (dialog.inline)
+        return _jsx(Button, { ...button.props, children: children });
+    return _jsx(Primitive.Close, { render: button, children: children });
+}
+AlertDialogCancel.displayName = 'AlertDialog.Cancel';
+/** Holding starts on a press and ends on a release; a click on its own does nothing. */
+function useHold(duration, onDone) {
+    const [holding, setHolding] = useState(false);
+    const timer = useRef(undefined);
+    // When the last press or key went down, so a click that no press preceded,
+    // as a screen reader sends, can be told apart.
+    const pressedAt = useRef(0);
+    const done = useRef(onDone);
+    done.current = onDone;
+    const stop = useCallback(() => {
+        window.clearTimeout(timer.current);
+        setHolding(false);
+    }, []);
+    const start = useCallback(() => {
+        if (duration === undefined)
+            return;
+        pressedAt.current = Date.now();
+        window.clearTimeout(timer.current);
+        setHolding(true);
+        timer.current = window.setTimeout(() => {
+            setHolding(false);
+            done.current();
+        }, duration);
+    }, [duration]);
+    useEffect(() => () => window.clearTimeout(timer.current), []);
+    return {
+        holding,
+        pressed: () => Date.now() - pressedAt.current < (duration ?? 0) + 1000,
+        handlers: duration === undefined
+            ? {}
+            : {
+                onPointerDown: (event) => {
+                    if (event.button === 0)
+                        start();
+                },
+                onPointerUp: stop,
+                onPointerLeave: stop,
+                onPointerCancel: stop,
+                onKeyDown: (event) => {
+                    if ((event.key === ' ' || event.key === 'Enter') && !event.repeat) {
+                        // Enter would click at once; the hold decides instead.
+                        event.preventDefault();
+                        start();
+                    }
+                },
+                onKeyUp: (event) => {
+                    if (event.key === ' ' || event.key === 'Enter') {
+                        event.preventDefault();
+                        stop();
+                    }
+                },
+                onContextMenu: (event) => event.preventDefault(),
+            },
+    };
+}
+/** Does what the dialog asks about, then closes it. */
+function AlertDialogAction({ onClick, tone, variant = 'solid', hold, loading, disabled, className, children, ...props }) {
+    const dialog = useAlertDialog('AlertDialog.Action');
+    const resolvedTone = tone ?? (dialog.tone === 'destructive' ? 'destructive' : 'primary');
+    const slots = alertDialogVariants({ weight: variant, actionTone: resolvedTone });
+    const [pending, setPending] = useState(false);
+    const hintId = useId();
+    const run = (event) => {
+        const result = onClick?.(event);
+        if (event.defaultPrevented)
+            return;
+        if (result && typeof result.then === 'function') {
+            setPending(true);
+            dialog.setBusy(true);
+            result.then(() => {
+                setPending(false);
+                dialog.setBusy(false);
+                dialog.setOpen(false);
+            }, () => {
+                setPending(false);
+                dialog.setBusy(false);
+            });
+            return;
+        }
+        dialog.setOpen(false);
+    };
+    // A hold that completes acts as a click on the button would.
+    const button = useRef(null);
+    const confirmed = useRef(false);
+    const { holding, pressed, handlers } = useHold(hold, () => {
+        confirmed.current = true;
+        button.current?.click();
+    });
+    return (_jsxs(Button, { ref: button, "data-slot": "alert-dialog-action", "data-holding": holding ? '' : undefined, variant: variant === 'solid' ? (resolvedTone === 'destructive' ? 'destructive' : 'default') : 'ghost', loading: loading || pending, disabled: disabled || (dialog.busy && !pending), "aria-describedby": hold !== undefined ? hintId : undefined, className: slots.action({ className }), ...handlers, onClick: (event) => {
+            if (hold !== undefined) {
+                const wasHeld = confirmed.current;
+                confirmed.current = false;
+                // A click no press or key preceded comes from assistive technology,
+                // which cannot hold; it confirms. Any other click must be a hold.
+                if (!wasHeld && pressed())
+                    return;
+            }
+            run(event);
+        }, ...props, children: [hold !== undefined ? (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": "true", "data-slot": "alert-dialog-action-fill", className: slots.fill({ className: holding ? 'scale-x-100' : undefined }), style: {
+                            transitionProperty: 'scale, transform',
+                            transitionDuration: holding ? `${hold}ms` : '250ms',
+                            transitionTimingFunction: holding ? 'linear' : 'cubic-bezier(0.2,0,0,1)',
+                        } }), _jsx("span", { id: hintId, className: "sr-only", children: "Press and hold to confirm" })] })) : null, children] }));
+}
+AlertDialogAction.displayName = 'AlertDialog.Action';
+export const AlertDialog = Object.assign(AlertDialogRoot, {
+    Trigger: AlertDialogTrigger,
+    Content: AlertDialogContent,
+    Media: AlertDialogMedia,
+    Title: AlertDialogTitle,
+    Description: AlertDialogDescription,
+    Footer: AlertDialogFooter,
+    Cancel: AlertDialogCancel,
+    Action: AlertDialogAction,
+});
+export { AlertDialogTrigger, AlertDialogContent, AlertDialogMedia, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction, };

package/dist/components/canvas/index.d.ts

@@ -0,0 +1,114 @@
+/**
+ * Canvas — a surface for other components to sit on: a field of dots, a
+ * grid or crosses, with a light that can follow the pointer across it.
+ *
+ * ```tsx
+ * <Canvas className="h-96">
+ *   <Canvas.Pattern variant="dots" />
+ *   <Canvas.Spotlight />
+ *   <Canvas.Content>…</Canvas.Content>
+ * </Canvas>
+ * ```
+ *
+ * ## Layers on one surface
+ *
+ * A canvas is a stack of layers. `Canvas.Pattern` draws marks across the
+ * whole surface, several patterns stack, `Canvas.Spotlight` lights them near
+ * the pointer, and `Canvas.Content` is what sits on top. Every layer is
+ * drawn from the same `viewport`, so a layer added later, such as ink drawn
+ * with the pointer, lines up with the pattern without measuring it.
+ *
+ * ## It moves with what is on it
+ *
+ * `viewport` takes the `{ x, y, zoom }` a Flow reports from
+ * `onViewportChange`, so the pattern pans and scales with the graph on top
+ * of it instead of staying behind as the graph slides over it.
+ *
+ * ## The light follows the hand
+ *
+ * The spotlight is a second copy of the pattern in the foreground colour,
+ * shown through a round window centred on the pointer that fades from the
+ * middle to its edge. It follows the pointer without easing, from events on
+ * the canvas itself, so it works over whatever is in the content. It is
+ * written straight to the element, once a frame, without rendering, and it
+ * fades out when the pointer leaves. On a touch screen it shows while a
+ * finger is down.
+ */
+import { type ComponentProps } from 'react';
+/** Where the canvas is looking: the same shape a Flow reports. */
+export interface CanvasViewport {
+    x: number;
+    y: number;
+    zoom: number;
+}
+/** The marks a pattern draws. */
+export type CanvasPatternVariant = 'dots' | 'grid' | 'cross';
+/** How a pattern fades out: not at all, towards every edge, or towards the bottom. */
+export type CanvasFade = 'none' | 'edges' | 'bottom';
+export interface CanvasProps extends ComponentProps<'div'> {
+    /**
+     * Where the canvas is looking, as `{ x, y, zoom }`. Pass what a Flow reports
+     * from `onViewportChange`, and the pattern pans and scales with the graph.
+     * Default `{ x: 0, y: 0, zoom: 1 }`.
+     */
+    viewport?: CanvasViewport;
+}
+declare function CanvasRoot({ viewport, className, children, ...props }: CanvasProps): import("react").JSX.Element;
+declare namespace CanvasRoot {
+    var displayName: string;
+}
+export interface CanvasPatternProps extends Omit<ComponentProps<'svg'>, 'children'> {
+    /** Dots, a grid of lines, or small crosses. Default `dots`. */
+    variant?: CanvasPatternVariant;
+    /** The distance from one mark to the next, in pixels at a zoom of 1. Default `12`, or `24` for a grid. */
+    gap?: number;
+    /** How big a mark is: a dot's radius, a line's width, half a cross's arm. Default `0.75`, `1` or `3`. */
+    size?: number;
+    /** Draws every this-many-th line or mark stronger, as on graph paper. */
+    major?: number;
+    /** Fades the pattern out towards every edge or towards the bottom. Default `none`. */
+    fade?: CanvasFade;
+    /**
+     * How strongly the marks show at rest, as a share of the foreground
+     * colour. Default `28%` for dots and crosses, `10%` for a grid.
+     */
+    strength?: string;
+}
+/** A pattern across the whole canvas, which pans and scales with its viewport. */
+declare function CanvasPattern({ variant, gap, size, major, fade, strength, className, style, ...props }: CanvasPatternProps): import("react").JSX.Element;
+declare namespace CanvasPattern {
+    var displayName: string;
+}
+export interface CanvasSpotlightProps extends Omit<ComponentProps<'div'>, 'children'> {
+    /** How far the light reaches from its centre, in pixels. Default `100`. */
+    radius?: number;
+    /**
+     * Holds the light at a point, in pixels from the canvas's top left corner,
+     * instead of following the pointer.
+     */
+    position?: {
+        x: number;
+        y: number;
+    };
+}
+/**
+ * Lights the patterns near the pointer: the marks inside the circle brighten
+ * towards the foreground colour, most at the centre.
+ */
+declare function CanvasSpotlight({ radius, position, className, style, ...props }: CanvasSpotlightProps): import("react").JSX.Element;
+declare namespace CanvasSpotlight {
+    var displayName: string;
+}
+export interface CanvasContentProps extends ComponentProps<'div'> {
+}
+/** What sits on the canvas, above its patterns and its light. */
+declare function CanvasContent({ className, ...props }: CanvasContentProps): import("react").JSX.Element;
+declare namespace CanvasContent {
+    var displayName: string;
+}
+export declare const Canvas: typeof CanvasRoot & {
+    Pattern: typeof CanvasPattern;
+    Spotlight: typeof CanvasSpotlight;
+    Content: typeof CanvasContent;
+};
+export { CanvasPattern, CanvasSpotlight, CanvasContent };

package/dist/components/canvas/index.js

@@ -0,0 +1,210 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * Canvas — a surface for other components to sit on: a field of dots, a
+ * grid or crosses, with a light that can follow the pointer across it.
+ *
+ * ```tsx
+ * <Canvas className="h-96">
+ *   <Canvas.Pattern variant="dots" />
+ *   <Canvas.Spotlight />
+ *   <Canvas.Content>…</Canvas.Content>
+ * </Canvas>
+ * ```
+ *
+ * ## Layers on one surface
+ *
+ * A canvas is a stack of layers. `Canvas.Pattern` draws marks across the
+ * whole surface, several patterns stack, `Canvas.Spotlight` lights them near
+ * the pointer, and `Canvas.Content` is what sits on top. Every layer is
+ * drawn from the same `viewport`, so a layer added later, such as ink drawn
+ * with the pointer, lines up with the pattern without measuring it.
+ *
+ * ## It moves with what is on it
+ *
+ * `viewport` takes the `{ x, y, zoom }` a Flow reports from
+ * `onViewportChange`, so the pattern pans and scales with the graph on top
+ * of it instead of staying behind as the graph slides over it.
+ *
+ * ## The light follows the hand
+ *
+ * The spotlight is a second copy of the pattern in the foreground colour,
+ * shown through a round window centred on the pointer that fades from the
+ * middle to its edge. It follows the pointer without easing, from events on
+ * the canvas itself, so it works over whatever is in the content. It is
+ * written straight to the element, once a frame, without rendering, and it
+ * fades out when the pointer leaves. On a touch screen it shows while a
+ * finger is down.
+ */
+import { createContext, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, } from 'react';
+import { tv } from 'tailwind-variants';
+const canvasVariants = tv({
+    slots: {
+        root: 'relative isolate overflow-hidden bg-background text-foreground',
+        layer: 'pointer-events-none absolute inset-0 size-full',
+        // The resting marks: the foreground at a fraction of its strength, so the
+        // field reads as a texture and not as content.
+        pattern: 'text-foreground',
+        spotlight: 'text-foreground opacity-0 transition-opacity duration-200 data-on:opacity-100 motion-reduce:transition-none',
+        content: 'relative z-10 size-full',
+    },
+});
+const CanvasContext = createContext(null);
+function useCanvas(part) {
+    const canvas = useContext(CanvasContext);
+    if (!canvas)
+        throw new Error(`${part} must be used inside a <Canvas>.`);
+    return canvas;
+}
+const ORIGIN = { x: 0, y: 0, zoom: 1 };
+const FADES = {
+    none: undefined,
+    edges: 'radial-gradient(ellipse 75% 70% at 50% 50%, #000 35%, transparent 100%)',
+    bottom: 'linear-gradient(to bottom, #000 40%, transparent 95%)',
+};
+function CanvasRoot({ viewport = ORIGIN, className, children, ...props }) {
+    const [root, setRoot] = useState(null);
+    const [patterns, setPatterns] = useState([]);
+    const register = useCallback((key, spec) => {
+        setPatterns((current) => [...current.filter((pattern) => pattern.key !== key), { key, ...spec }]);
+        return () => setPatterns((current) => current.filter((pattern) => pattern.key !== key));
+    }, []);
+    const context = useMemo(() => ({ viewport, root, patterns, register }), [viewport, root, patterns, register]);
+    return (_jsx(CanvasContext.Provider, { value: context, children: _jsx("div", { ref: setRoot, "data-slot": "canvas", className: canvasVariants().root({ className }), ...props, children: children }) }));
+}
+CanvasRoot.displayName = 'Canvas';
+/** Draws one pattern's marks into an SVG, from the viewport. */
+function Marks({ id, spec, viewport }) {
+    const { variant, gap, size, major } = spec;
+    const transform = `translate(${viewport.x.toFixed(2)} ${viewport.y.toFixed(2)}) scale(${viewport.zoom.toFixed(4)})`;
+    const half = gap / 2;
+    const mark = (scale, at) => {
+        if (variant === 'dots')
+            return _jsx("circle", { cx: at, cy: at, r: size * scale, fill: "currentColor" });
+        if (variant === 'cross') {
+            const arm = size * scale;
+            return (_jsx("path", { d: `M${at - arm} ${at}h${arm * 2}M${at} ${at - arm}v${arm * 2}`, stroke: "currentColor", strokeWidth: scale > 1 ? 1.25 : 1, strokeLinecap: "round", fill: "none" }));
+        }
+        return null;
+    };
+    // Every variant marks the same lattice points, half a gap in from each
+    // tile's corner, so stacked patterns line up: a cross lands on a grid's
+    // crossing, and a major line on a minor one.
+    const tile = major ? gap * major : gap;
+    return (_jsxs(_Fragment, { children: [_jsxs("defs", { children: [_jsx("pattern", { id: `${id}-minor`, width: gap, height: gap, patternUnits: "userSpaceOnUse", patternTransform: transform, children: variant === 'grid' ? (_jsx("path", { d: `M${half} 0V${gap}M0 ${half}H${gap}`, fill: "none", stroke: "currentColor", strokeWidth: size, opacity: major ? 0.6 : 1 })) : (mark(1, half)) }), major ? (_jsx("pattern", { id: `${id}-major`, width: tile, height: tile, patternUnits: "userSpaceOnUse", patternTransform: transform, children: variant === 'grid' ? (_jsx("path", { d: `M${half} 0V${tile}M0 ${half}H${tile}`, fill: "none", stroke: "currentColor", strokeWidth: size * 1.5 })) : (mark(variant === 'dots' ? 1.8 : 1.6, half)) })) : null] }), _jsx("rect", { width: "100%", height: "100%", fill: `url(#${id}-minor)` }), major ? _jsx("rect", { width: "100%", height: "100%", fill: `url(#${id}-major)` }) : null] }));
+}
+/** A pattern across the whole canvas, which pans and scales with its viewport. */
+function CanvasPattern({ variant = 'dots', gap, size, major, fade = 'none', strength, className, style, ...props }) {
+    const canvas = useCanvas('Canvas.Pattern');
+    const id = `canvas${useId().replace(/[^a-zA-Z0-9]/g, '')}`;
+    const spec = useMemo(() => ({
+        variant,
+        gap: gap ?? (variant === 'grid' ? 24 : 12),
+        size: size ?? (variant === 'dots' ? 0.75 : variant === 'grid' ? 1 : 3),
+        major,
+        fade,
+    }), [variant, gap, size, major, fade]);
+    const { register } = canvas;
+    // Known to the spotlight, which draws a lit copy of every pattern.
+    useLayoutEffect(() => register(id, spec), [register, id, spec]);
+    const mask = FADES[fade];
+    return (_jsx("svg", { "aria-hidden": "true", "data-slot": "canvas-pattern", className: canvasVariants().layer({ className: [canvasVariants().pattern(), className] }), style: {
+            opacity: strength ?? (variant === 'grid' ? '10%' : '28%'),
+            maskImage: mask,
+            WebkitMaskImage: mask,
+            ...style,
+        }, ...props, children: _jsx(Marks, { id: id, spec: spec, viewport: canvas.viewport }) }));
+}
+CanvasPattern.displayName = 'Canvas.Pattern';
+/**
+ * Lights the patterns near the pointer: the marks inside the circle brighten
+ * towards the foreground colour, most at the centre.
+ */
+function CanvasSpotlight({ radius = 100, position, className, style, ...props }) {
+    const canvas = useCanvas('Canvas.Spotlight');
+    const light = useRef(null);
+    const prefix = `spot${useId().replace(/[^a-zA-Z0-9]/g, '')}`;
+    // Follows the pointer from events on the whole canvas, so content on top
+    // does not stop it. Written to the element once a frame, without rendering.
+    useEffect(() => {
+        const root = canvas.root;
+        const node = light.current;
+        if (!root || !node || position)
+            return;
+        let frame = 0;
+        let x = 0;
+        let y = 0;
+        let down = false;
+        const write = () => {
+            frame = 0;
+            node.style.setProperty('--canvas-x', `${x}px`);
+            node.style.setProperty('--canvas-y', `${y}px`);
+        };
+        const place = (event) => {
+            const box = root.getBoundingClientRect();
+            x = event.clientX - box.left;
+            y = event.clientY - box.top;
+            if (!frame)
+                frame = requestAnimationFrame(write);
+        };
+        const show = (on) => node.toggleAttribute('data-on', on);
+        const move = (event) => {
+            place(event);
+            if (event.pointerType !== 'touch' || down)
+                show(true);
+        };
+        const press = (event) => {
+            down = true;
+            place(event);
+            show(true);
+        };
+        const release = (event) => {
+            down = false;
+            if (event.pointerType === 'touch')
+                show(false);
+        };
+        const leave = () => show(false);
+        root.addEventListener('pointermove', move);
+        root.addEventListener('pointerdown', press);
+        root.addEventListener('pointerup', release);
+        root.addEventListener('pointercancel', release);
+        root.addEventListener('pointerleave', leave);
+        return () => {
+            cancelAnimationFrame(frame);
+            root.removeEventListener('pointermove', move);
+            root.removeEventListener('pointerdown', press);
+            root.removeEventListener('pointerup', release);
+            root.removeEventListener('pointercancel', release);
+            root.removeEventListener('pointerleave', leave);
+        };
+    }, [canvas.root, position]);
+    // A round window on the lit copy: opaque at the pointer, clear at the radius.
+    const circle = `radial-gradient(circle var(--canvas-r) at var(--canvas-x, -999px) var(--canvas-y, -999px), #000, transparent)`;
+    return (_jsx("div", { ref: light, "aria-hidden": "true", "data-slot": "canvas-spotlight", "data-on": position ? '' : undefined, className: canvasVariants().layer({ className: [canvasVariants().spotlight(), className] }), style: {
+            '--canvas-r': `${radius}px`,
+            ...(position ? { '--canvas-x': `${position.x}px`, '--canvas-y': `${position.y}px` } : null),
+            ...style,
+        }, ...props, children: canvas.patterns.map((pattern) => {
+            const fade = FADES[pattern.fade];
+            // The pattern's own fade still applies inside the light.
+            const mask = fade ? `${circle}, ${fade}` : circle;
+            return (_jsx("svg", { className: "absolute inset-0 size-full", style: {
+                    maskImage: mask,
+                    WebkitMaskImage: mask,
+                    maskComposite: fade ? 'intersect' : undefined,
+                    WebkitMaskComposite: fade ? 'source-in' : undefined,
+                }, children: _jsx(Marks, { id: `${prefix}${pattern.key}`, spec: pattern, viewport: canvas.viewport }) }, pattern.key));
+        }) }));
+}
+CanvasSpotlight.displayName = 'Canvas.Spotlight';
+/** What sits on the canvas, above its patterns and its light. */
+function CanvasContent({ className, ...props }) {
+    return _jsx("div", { "data-slot": "canvas-content", className: canvasVariants().content({ className }), ...props });
+}
+CanvasContent.displayName = 'Canvas.Content';
+export const Canvas = Object.assign(CanvasRoot, {
+    Pattern: CanvasPattern,
+    Spotlight: CanvasSpotlight,
+    Content: CanvasContent,
+});
+export { CanvasPattern, CanvasSpotlight, CanvasContent };