panelui-web 0.7.0 → 0.9.0

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

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

@@ -0,0 +1,162 @@
+import { type ComponentProps, type ReactElement, type ReactNode } from 'react';
+export interface DialogProps {
+    children?: ReactNode;
+    /** Whether it is open, when the caller holds that. */
+    open?: boolean;
+    /** Whether it starts open, when the caller does not hold it. */
+    defaultOpen?: boolean;
+    /** Called when it opens or closes. */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Whether a press outside it closes it. Turn it off while a form in it has
+     * changes that would be lost; Escape and the close button still work.
+     * Default `true`.
+     */
+    dismissible?: boolean;
+}
+declare function DialogRoot({ children, open, defaultOpen, onOpenChange, dismissible, }: DialogProps): import("react").JSX.Element;
+declare namespace DialogRoot {
+    var displayName: string;
+}
+export interface DialogTriggerProps extends Omit<ComponentProps<'button'>, 'children'> {
+    children?: ReactNode;
+    /**
+     * Your own element to be the trigger, such as a styled button. It is given
+     * the click handler and the attributes that tie it to the dialog.
+     */
+    render?: ReactElement;
+}
+/** What opens the dialog. A plain button unless `render` supplies one. */
+declare function DialogTrigger({ render, children, ...props }: DialogTriggerProps): import("react").JSX.Element;
+declare namespace DialogTrigger {
+    var displayName: string;
+}
+export interface DialogContentProps extends Omit<ComponentProps<'div'>, 'children'> {
+    children?: ReactNode;
+    /**
+     * `inset` sets the task in a panel inside a darker band that holds the
+     * footer. `plain` is one surface with the footer ruled off. Default `inset`.
+     */
+    variant?: 'inset' | 'plain';
+    /** How wide it may grow: `sm` 24rem, `md` 28rem, `lg` 36rem. Default `md`. */
+    size?: 'sm' | 'md' | 'lg';
+    /** Show the round close button in the top trailing corner. Default `true`. */
+    showClose?: boolean;
+    /** Frost the page behind it instead of only dimming it. */
+    blur?: boolean;
+    /**
+     * Draw it in the page instead of over it: no backdrop, no trigger, always
+     * there. For previews; `open` is ignored.
+     */
+    inline?: boolean;
+}
+/** The dialog itself, with the dimmed page behind it. */
+declare function DialogContent({ variant, size, showClose, blur, inline, className, children, ...props }: DialogContentProps): import("react").JSX.Element;
+declare namespace DialogContent {
+    var displayName: string;
+}
+export interface DialogHeaderProps extends Omit<ComponentProps<'div'>, 'title'> {
+    /** The heading. It is also what the dialog is announced as. */
+    title?: ReactNode;
+    /** A line under the heading. */
+    description?: ReactNode;
+}
+/** The heading block. It leaves room for the close button beside the title. */
+declare function DialogHeader({ title, description, className, children, ...props }: DialogHeaderProps): import("react").JSX.Element;
+declare namespace DialogHeader {
+    var displayName: string;
+}
+export interface DialogTitleProps extends ComponentProps<'h2'> {
+}
+/** The dialog's name, announced when it opens. */
+declare function DialogTitle({ className, ...props }: DialogTitleProps): import("react").JSX.Element;
+declare namespace DialogTitle {
+    var displayName: string;
+}
+export interface DialogDescriptionProps extends ComponentProps<'p'> {
+}
+/** A sentence under the title, read out after it. */
+declare function DialogDescription({ className, ...props }: DialogDescriptionProps): import("react").JSX.Element;
+declare namespace DialogDescription {
+    var displayName: string;
+}
+export interface DialogBodyProps extends ComponentProps<'div'> {
+}
+/**
+ * The part that scrolls, between the header and the footer. Its children are
+ * laid out in a column with a gap, so a form's fields need no wrapper.
+ */
+declare function DialogBody({ className, children, ...props }: DialogBodyProps): import("react").JSX.Element;
+declare namespace DialogBody {
+    var displayName: string;
+}
+export interface DialogFooterProps extends ComponentProps<'div'> {
+}
+/**
+ * The buttons. In the inset look they sit in the band under the panel as
+ * equal pills; in `plain` they sit at the end of a ruled strip. Keep it a
+ * direct child of `Dialog.Content`, so the band can find it.
+ */
+declare function DialogFooter({ className, ...props }: DialogFooterProps): import("react").JSX.Element;
+declare namespace DialogFooter {
+    var displayName: string;
+}
+export interface DialogCloseProps extends ComponentProps<'button'> {
+    /** Your own element to close the dialog with, such as a Cancel button. */
+    render?: ReactElement;
+    /** Draw the cross glyph. Set for you on the built-in close button. */
+    icon?: boolean;
+}
+/** Closes the dialog. */
+declare function DialogClose({ render, icon, children, ...props }: DialogCloseProps): import("react").JSX.Element;
+declare namespace DialogClose {
+    var displayName: string;
+}
+export interface DialogListProps extends ComponentProps<'div'> {
+}
+/**
+ * A list of one-line choices in the body. The arrow keys, Home and End move
+ * between its items, and it opens scrolled to the selected one.
+ */
+declare function DialogList({ className, onKeyDown, children, ...props }: DialogListProps): import("react").JSX.Element;
+declare namespace DialogList {
+    var displayName: string;
+}
+export interface DialogListGroupProps extends Omit<ComponentProps<'div'>, 'title'> {
+    /** The heading over the group, which stays pinned while its items scroll under it. */
+    label: ReactNode;
+}
+/** A run of items in `Dialog.List` under a heading of their own. */
+declare function DialogListGroup({ label, className, children, ...props }: DialogListGroupProps): import("react").JSX.Element;
+declare namespace DialogListGroup {
+    var displayName: string;
+}
+export interface DialogListItemProps extends Omit<ComponentProps<'div'>, 'onSelect'> {
+    /** Whether it is the chosen one: it is tinted and checked. */
+    selected?: boolean;
+    /** Called when it is pressed, or chosen with Enter or Space. */
+    onSelect?: () => void;
+    /** Quieter text at its end, in figures that line up: a time, a count. */
+    meta?: ReactNode;
+    /** Shown, but cannot be chosen. */
+    disabled?: boolean;
+}
+/** One choice in `Dialog.List`, on one line. */
+declare function DialogListItem({ selected, onSelect, meta, disabled, className, onClick, onKeyDown, children, ...props }: DialogListItemProps): import("react").JSX.Element;
+declare namespace DialogListItem {
+    var displayName: string;
+}
+export declare const Dialog: typeof DialogRoot & {
+    Trigger: typeof DialogTrigger;
+    Content: typeof DialogContent;
+    Header: typeof DialogHeader;
+    Title: typeof DialogTitle;
+    Description: typeof DialogDescription;
+    Body: typeof DialogBody;
+    Footer: typeof DialogFooter;
+    Close: typeof DialogClose;
+    List: typeof DialogList;
+    ListGroup: typeof DialogListGroup;
+    ListItem: typeof DialogListItem;
+};
+export { DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogBody, DialogFooter, DialogClose, DialogList, DialogListGroup, DialogListItem, };