panelui-web 0.9.0 → 0.10.0

package/dist/components/workbench/index.js

@@ -0,0 +1,306 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Workbench — the frame of an editor: a canvas with the work on it, a
+ * toolbar floating over it, an inspector beside it and a timeline under it.
+ *
+ * ```tsx
+ * <Workbench className="h-[640px]">
+ *   <Workbench.Bar><Toolbar>…</Toolbar></Workbench.Bar>
+ *   <Workbench.Canvas>
+ *     <Workbench.Artboard aspect="16 / 9">…</Workbench.Artboard>
+ *   </Workbench.Canvas>
+ *   <Workbench.Inspector><Inspector>…</Inspector></Workbench.Inspector>
+ *   <Workbench.Timeline><Timeline>…</Timeline></Workbench.Timeline>
+ * </Workbench>
+ * ```
+ *
+ * ## The work is in the middle
+ *
+ * Everything else stands round the canvas as a panel of its own, floating
+ * a few pixels clear of its neighbours, so the work reads as the thing on
+ * the desk and the tools as things beside it. The artboard sits centred on
+ * a field of dots at the largest size its shape fits.
+ *
+ * ## Focus clears the desk
+ *
+ * In focus the sidebar, the inspector and the timeline slide away and the
+ * canvas takes the room they leave. `\` toggles it from the keyboard, and
+ * `useWorkbench()` gives a button of your own the same switch.
+ *
+ * ## On a narrow screen the inspector becomes a sheet
+ *
+ * Below `compactBelow` pixels wide there is no room for a column beside the
+ * canvas. The inspector then opens as a sheet from the side, and
+ * `Workbench.InspectorTrigger` is the button that opens it. The width that
+ * counts is the workbench's own, not the window's, so it works in a pane.
+ */
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, } from 'react';
+import { tv } from 'tailwind-variants';
+import { Sheet } from '../sheet/index.js';
+const EASE = 'ease-[cubic-bezier(0.32,0.72,0,1)]';
+const workbenchVariants = tv({
+    slots: {
+        root: [
+            'group/workbench relative grid w-full min-w-0 overflow-hidden rounded-[26px] bg-muted/60 p-2 text-foreground',
+            'ring-1 ring-foreground/[0.06] dark:bg-muted/40 dark:ring-foreground/10',
+            '[grid-template-areas:"sidebar_canvas_inspector""timeline_timeline_timeline"]',
+            'grid-cols-[var(--wb-sidebar)_minmax(0,1fr)_var(--wb-inspector)] grid-rows-[minmax(0,1fr)_var(--wb-timeline)]',
+            // No grid gap: each panel carries its own 8px on the canvas side, so a
+            // column that closes takes its gap with it.
+            `transition-[grid-template-columns,grid-template-rows] duration-500 ${EASE} motion-reduce:transition-none`,
+            'data-resizing:transition-none',
+        ],
+        sidebar: [
+            'flex min-h-0 min-w-0 flex-col overflow-hidden pe-2 [grid-area:sidebar]',
+            `transition-[opacity,translate] duration-500 ${EASE} motion-reduce:transition-none`,
+            'group-data-focus/workbench:-translate-x-4 group-data-focus/workbench:opacity-0',
+        ],
+        canvas: [
+            'relative isolate flex min-h-0 min-w-0 items-center justify-center overflow-hidden rounded-[20px] px-6 pt-[4.5rem] pb-6 [grid-area:canvas] [container-type:size]',
+            // The top padding is the floating bar's room, so the work is centred in what is left.
+            'bg-background ring-1 ring-foreground/[0.05] dark:bg-background/70',
+            'bg-[radial-gradient(color-mix(in_oklab,var(--foreground)_13%,transparent)_1px,transparent_1.5px)] bg-size-[20px_20px] bg-center',
+        ],
+        artboard: [
+            'relative overflow-hidden rounded-xl bg-background shadow-[0_24px_60px_-24px_rgb(0_0_0/0.45)] ring-1 ring-foreground/10',
+            'aspect-(--wb-aspect) w-[min(100cqw,100cqh*var(--wb-ratio))]',
+            `transition-[width] duration-500 ${EASE} motion-reduce:transition-none`,
+        ],
+        bar: 'pointer-events-none z-10 mt-3 flex justify-center self-start justify-self-center [grid-area:canvas] *:pointer-events-auto',
+        inspector: [
+            'flex min-h-0 min-w-0 justify-end overflow-hidden ps-2 [grid-area:inspector]',
+            `transition-[opacity,translate] duration-500 ${EASE} motion-reduce:transition-none`,
+            'group-data-focus/workbench:translate-x-4 group-data-focus/workbench:opacity-0',
+            // The panel inside fills the column's height.
+            '[&_[data-slot=inspector]]:h-full [&_[data-slot=inspector-panel]]:h-full',
+        ],
+        timeline: [
+            'relative flex min-h-0 min-w-0 flex-col overflow-hidden pt-2 [grid-area:timeline]',
+            `transition-[opacity,translate] duration-500 ${EASE} motion-reduce:transition-none`,
+            'group-data-focus/workbench:translate-y-4 group-data-focus/workbench:opacity-0',
+            '[&>[data-slot=timeline]]:min-h-0 [&>[data-slot=timeline]]:flex-1',
+        ],
+        resize: [
+            'absolute inset-x-0 top-0 z-20 flex h-2 cursor-row-resize items-center justify-center outline-none',
+            "after:h-1 after:w-10 after:rounded-full after:bg-foreground/20 after:transition-[background-color,width] after:duration-150 after:content-['']",
+            'hover:after:w-16 hover:after:bg-foreground/40 focus-visible:after:w-16 focus-visible:after:bg-ring data-active:after:w-16 data-active:after:bg-foreground/50',
+        ],
+        trigger: [
+            'inline-flex size-9 shrink-0 cursor-pointer items-center justify-center rounded-xl text-muted-foreground outline-none',
+            'transition-[color,background-color,scale] duration-150 hover:bg-foreground/[0.06] hover:text-foreground active:scale-[0.94]',
+            'focus-visible:ring-2 focus-visible:ring-ring [&_svg]:size-[1.125rem] [&_svg]:shrink-0',
+        ],
+        // In the sheet, the sheet is the surface: the inspector's own card gives
+        // up its fill, ring and shadow rather than stand as a box in a box.
+        sheetBody: [
+            'flex min-h-0 flex-1 px-2 pb-2 [&_[data-slot=inspector]]:h-full [&_[data-slot=inspector]]:w-full',
+            '[&_[data-slot=inspector-panel]]:h-full [&_[data-slot=inspector-panel]]:w-full [&_[data-slot=inspector-panel]]:bg-transparent',
+            '[&_[data-slot=inspector-panel]]:shadow-none [&_[data-slot=inspector-panel]]:ring-0',
+        ],
+    },
+});
+const WorkbenchContext = createContext(null);
+function useWorkbenchContext(part) {
+    const context = useContext(WorkbenchContext);
+    if (!context)
+        throw new Error(`${part} must be used inside a <Workbench>.`);
+    return context;
+}
+/**
+ * The workbench's state, for controls of your own: a focus button in the
+ * toolbar, a button that opens the inspector on a narrow screen.
+ */
+export function useWorkbench() {
+    const { focus, setFocus, compact, inspectorOpen, setInspectorOpen } = useWorkbenchContext('useWorkbench');
+    return { focus, setFocus, compact, inspectorOpen, setInspectorOpen };
+}
+/** The editor's frame. Give it a height, such as `h-[640px]` or `h-dvh`. */
+function WorkbenchRoot({ focus: focusProp, defaultFocus = false, onFocusChange, focusShortcut = true, compactBelow = 760, inspectorWidth = 348, sidebarWidth = 240, defaultTimelineHeight = 232, className, style, children, ...props }) {
+    const slots = workbenchVariants();
+    const [innerFocus, setInnerFocus] = useState(defaultFocus);
+    const focus = focusProp ?? innerFocus;
+    const [compact, setCompact] = useState(false);
+    const [inspectorOpen, setInspectorOpen] = useState(false);
+    const [parts, setParts] = useState({ sidebar: false, inspector: false, timeline: false });
+    const [timelineHeight, setTimelineHeight] = useState(defaultTimelineHeight);
+    const [resizing, setResizing] = useState(false);
+    const root = useRef(null);
+    const live = useRef({ focus, onFocusChange, controlled: focusProp !== undefined });
+    live.current = { focus, onFocusChange, controlled: focusProp !== undefined };
+    const setFocus = useCallback((next) => {
+        if (!live.current.controlled)
+            setInnerFocus(next);
+        live.current.onFocusChange?.(next);
+    }, []);
+    // The workbench's own width decides, so it works in a pane as on a page.
+    useEffect(() => {
+        const box = root.current;
+        if (!box)
+            return;
+        const observer = new ResizeObserver(() => setCompact(box.clientWidth < compactBelow));
+        observer.observe(box);
+        return () => observer.disconnect();
+    }, [compactBelow]);
+    useEffect(() => {
+        if (!compact)
+            setInspectorOpen(false);
+    }, [compact]);
+    useEffect(() => {
+        if (!focusShortcut)
+            return;
+        const onKey = (event) => {
+            if (event.key !== '\\' || event.metaKey || event.ctrlKey || event.altKey || event.defaultPrevented)
+                return;
+            const target = event.target;
+            if (target instanceof Element && target.closest('input, textarea, select, [contenteditable=""], [contenteditable="true"]')) {
+                return;
+            }
+            event.preventDefault();
+            setFocus(!live.current.focus);
+        };
+        document.addEventListener('keydown', onKey);
+        return () => document.removeEventListener('keydown', onKey);
+    }, [focusShortcut, setFocus]);
+    const mark = (part) => (present) => setParts((all) => (all[part] === present ? all : { ...all, [part]: present }));
+    const context = useMemo(() => ({
+        focus,
+        setFocus,
+        compact,
+        inspectorOpen,
+        setInspectorOpen,
+        hasSidebar: mark('sidebar'),
+        hasInspector: mark('inspector'),
+        hasTimeline: mark('timeline'),
+        timelineHeight,
+        setTimelineHeight,
+        setResizing,
+        rootHeight: () => root.current?.clientHeight ?? 0,
+    }), [focus, setFocus, compact, inspectorOpen, timelineHeight]);
+    const showSidebar = parts.sidebar && !focus && !compact;
+    const showInspector = parts.inspector && !focus && !compact;
+    const showTimeline = parts.timeline && !focus;
+    return (_jsx(WorkbenchContext.Provider, { value: context, children: _jsx("div", { ref: root, "data-slot": "workbench", "data-focus": focus ? '' : undefined, "data-compact": compact ? '' : undefined, "data-resizing": resizing ? '' : undefined, className: slots.root({ className }), style: {
+                ...style,
+                '--wb-sidebar': showSidebar ? `${sidebarWidth}px` : '0px',
+                '--wb-inspector': showInspector ? `${inspectorWidth}px` : '0px',
+                '--wb-timeline': showTimeline ? `${timelineHeight}px` : '0px',
+            }, ...props, children: children }) }));
+}
+WorkbenchRoot.displayName = 'Workbench';
+/** Tells the workbench a part is in it, so its column or row gets room. */
+function usePresence(register) {
+    useEffect(() => {
+        register(true);
+        return () => register(false);
+    }, []);
+}
+/** The strip floating at the top of the canvas, for a toolbar. */
+function WorkbenchBar({ className, ...props }) {
+    useWorkbenchContext('Workbench.Bar');
+    const slots = workbenchVariants();
+    return _jsx("div", { "data-slot": "workbench-bar", className: slots.bar({ className }), ...props });
+}
+WorkbenchBar.displayName = 'Workbench.Bar';
+/** A column before the canvas, for layers, pages or assets. It is hidden on a narrow screen and in focus. */
+function WorkbenchSidebar({ className, ...props }) {
+    const workbench = useWorkbenchContext('Workbench.Sidebar');
+    usePresence(workbench.hasSidebar);
+    const slots = workbenchVariants();
+    return (_jsx("aside", { "data-slot": "workbench-sidebar", inert: workbench.focus || workbench.compact || undefined, className: slots.sidebar({ className }), ...props }));
+}
+WorkbenchSidebar.displayName = 'Workbench.Sidebar';
+/** The stage in the middle: a field of dots with the work centred on it. */
+function WorkbenchCanvas({ className, ...props }) {
+    useWorkbenchContext('Workbench.Canvas');
+    const slots = workbenchVariants();
+    return _jsx("div", { "data-slot": "workbench-canvas", className: slots.canvas({ className }), ...props });
+}
+WorkbenchCanvas.displayName = 'Workbench.Canvas';
+/** The work itself: as large as its shape fits on the canvas, clear of the floating bar. */
+function WorkbenchArtboard({ aspect = '16 / 9', className, style, ...props }) {
+    const slots = workbenchVariants();
+    const [wide, tall] = aspect.split('/').map((part) => Number(part.trim()) || 1);
+    return (_jsx("div", { "data-slot": "workbench-artboard", className: slots.artboard({ className }), style: { ...style, '--wb-aspect': aspect, '--wb-ratio': (wide ?? 1) / (tall ?? 1) }, ...props }));
+}
+WorkbenchArtboard.displayName = 'Workbench.Artboard';
+/**
+ * The column after the canvas, for an `Inspector`. On a narrow screen the
+ * same children open in a sheet from the side instead.
+ */
+function WorkbenchInspector({ title = 'Inspector', className, children, ...props }) {
+    const workbench = useWorkbenchContext('Workbench.Inspector');
+    usePresence(workbench.hasInspector);
+    const slots = workbenchVariants();
+    if (workbench.compact) {
+        return (_jsx(Sheet, { side: "right", open: workbench.inspectorOpen, onOpenChange: workbench.setInspectorOpen, children: _jsxs(Sheet.Content, { size: "full", children: [_jsx(Sheet.Header, { title: title }), _jsx("div", { "data-slot": "workbench-inspector", className: slots.sheetBody(), children: children })] }) }));
+    }
+    return (_jsx("div", { "data-slot": "workbench-inspector", inert: workbench.focus || undefined, className: slots.inspector({ className }), ...props, children: children }));
+}
+WorkbenchInspector.displayName = 'Workbench.Inspector';
+/**
+ * The button that opens the inspector's sheet on a narrow screen. It is
+ * only there when the inspector is a sheet, so put it where it belongs on
+ * either size: in the bar, beside the tools.
+ */
+function WorkbenchInspectorTrigger({ className, children, onClick, ...props }) {
+    const workbench = useWorkbenchContext('Workbench.InspectorTrigger');
+    const slots = workbenchVariants();
+    if (!workbench.compact)
+        return null;
+    return (_jsx("button", { type: "button", "data-slot": "workbench-inspector-trigger", "aria-label": "Open inspector", "aria-expanded": workbench.inspectorOpen, className: slots.trigger({ className }), onClick: (event) => {
+            onClick?.(event);
+            if (!event.defaultPrevented)
+                workbench.setInspectorOpen(true);
+        }, ...props, children: children ?? (_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: [_jsx("path", { d: "M4 6h10M18 6h2M4 12h4M12 12h8M4 18h12M20 18h0" }), _jsx("circle", { cx: "16", cy: "6", r: "2" }), _jsx("circle", { cx: "10", cy: "12", r: "2" }), _jsx("circle", { cx: "18", cy: "18", r: "2" })] })) }));
+}
+WorkbenchInspectorTrigger.displayName = 'Workbench.InspectorTrigger';
+/** The row under everything, for a `Timeline`. Its top edge drags to resize it. */
+function WorkbenchTimeline({ resizable = true, minHeight = 140, className, children, ...props }) {
+    const workbench = useWorkbenchContext('Workbench.Timeline');
+    usePresence(workbench.hasTimeline);
+    const slots = workbenchVariants();
+    const [active, setActive] = useState(false);
+    const maxHeight = () => Math.max(minHeight, workbench.rootHeight() * 0.6);
+    const drag = (event) => {
+        if (event.button !== 0)
+            return;
+        event.preventDefault();
+        event.currentTarget.setPointerCapture(event.pointerId);
+        const startY = event.clientY;
+        const startHeight = workbench.timelineHeight;
+        setActive(true);
+        workbench.setResizing(true);
+        const target = event.currentTarget;
+        const move = (next) => workbench.setTimelineHeight(Math.round(Math.min(Math.max(startHeight + startY - next.clientY, minHeight), maxHeight())));
+        const end = () => {
+            setActive(false);
+            workbench.setResizing(false);
+            target.removeEventListener('pointermove', move);
+            target.removeEventListener('pointerup', end);
+            target.removeEventListener('pointercancel', end);
+        };
+        target.addEventListener('pointermove', move);
+        target.addEventListener('pointerup', end);
+        target.addEventListener('pointercancel', end);
+    };
+    const keys = (event) => {
+        const by = event.key === 'ArrowUp' ? 16 : event.key === 'ArrowDown' ? -16 : 0;
+        if (!by)
+            return;
+        event.preventDefault();
+        workbench.setTimelineHeight(Math.min(Math.max(workbench.timelineHeight + by, minHeight), maxHeight()));
+    };
+    return (_jsxs("div", { "data-slot": "workbench-timeline", inert: workbench.focus || undefined, className: slots.timeline({ className }), ...props, children: [resizable ? (_jsx("div", { role: "separator", tabIndex: 0, "aria-orientation": "horizontal", "aria-label": "Timeline height", "aria-valuenow": workbench.timelineHeight, "aria-valuemin": minHeight, "data-slot": "workbench-resize", "data-active": active ? '' : undefined, className: slots.resize(), onPointerDown: drag, onKeyDown: keys })) : null, children] }));
+}
+WorkbenchTimeline.displayName = 'Workbench.Timeline';
+export const Workbench = Object.assign(WorkbenchRoot, {
+    Bar: WorkbenchBar,
+    Sidebar: WorkbenchSidebar,
+    Canvas: WorkbenchCanvas,
+    Artboard: WorkbenchArtboard,
+    Inspector: WorkbenchInspector,
+    InspectorTrigger: WorkbenchInspectorTrigger,
+    Timeline: WorkbenchTimeline,
+});
+export { WorkbenchBar, WorkbenchSidebar, WorkbenchCanvas, WorkbenchArtboard, WorkbenchInspector, WorkbenchInspectorTrigger, WorkbenchTimeline, workbenchVariants, };

package/dist/components/xy-pad/index.d.ts

@@ -0,0 +1,180 @@
+/**
+ * XYPad — two numbers set with one drag: a point moved across a field.
+ *
+ * ```tsx
+ * <XYPad label="Framing" defaultValue={{ x: 0.2, y: -0.1 }}>
+ *   <XYPad.Value />
+ * </XYPad>
+ * ```
+ *
+ * ## Two values that belong together
+ *
+ * A position, a pan, a balance between two pairs of things: values that the
+ * hand thinks of as one place are set as one place. Two sliders would make
+ * the reader find a point by turning two knobs in turn.
+ *
+ * ## The field reads like a chart
+ *
+ * A grid of dots marks the steps, two hairlines mark zero on each axis, and
+ * two fainter lines run through the handle to the edges, so where it stands
+ * can be read against both axes at once. While it is held, four brackets
+ * close round it.
+ *
+ * ## Joystick and trail
+ *
+ * `snapBack` makes it a joystick: it springs back to the centre when let go,
+ * for a value that only means something while it is held, such as a pan
+ * speed. `trail` draws the last moves as a fading line, for a value whose
+ * path matters as much as where it ends.
+ */
+import { type ComponentProps, type ReactNode } from 'react';
+export type XYPadColor = 'primary' | 'info' | 'success' | 'warning' | 'destructive';
+export interface XYPadPoint {
+    x: number;
+    y: number;
+}
+declare const xyPadVariants: import("tailwind-variants").TVReturnType<{
+    color: {
+        primary: {
+            root: string;
+        };
+        info: {
+            root: string;
+        };
+        success: {
+            root: string;
+        };
+        warning: {
+            root: string;
+        };
+        destructive: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    field: string[];
+    plane: string;
+    dots: string;
+    axis: string;
+    guide: string[];
+    trail: string;
+    handle: string[];
+    bracket: string[];
+    value: string;
+    axisName: string;
+}, undefined, {
+    color: {
+        primary: {
+            root: string;
+        };
+        info: {
+            root: string;
+        };
+        success: {
+            root: string;
+        };
+        warning: {
+            root: string;
+        };
+        destructive: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    field: string[];
+    plane: string;
+    dots: string;
+    axis: string;
+    guide: string[];
+    trail: string;
+    handle: string[];
+    bracket: string[];
+    value: string;
+    axisName: string;
+}, import("tailwind-variants").TVReturnType<{
+    color: {
+        primary: {
+            root: string;
+        };
+        info: {
+            root: string;
+        };
+        success: {
+            root: string;
+        };
+        warning: {
+            root: string;
+        };
+        destructive: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    field: string[];
+    plane: string;
+    dots: string;
+    axis: string;
+    guide: string[];
+    trail: string;
+    handle: string[];
+    bracket: string[];
+    value: string;
+    axisName: string;
+}, undefined, unknown, unknown, undefined>>;
+export interface XYPadProps extends Omit<ComponentProps<'div'>, 'defaultValue' | 'onChange' | 'children'> {
+    /** Where the point is, when the caller holds it. */
+    value?: XYPadPoint;
+    /** Where it starts, when the caller does not hold it. Default the centre. */
+    defaultValue?: XYPadPoint;
+    /** Called with the new point while it moves. */
+    onValueChange?: (value: XYPadPoint) => void;
+    /** Called once a move ends: on release, or after a key press. */
+    onValueCommitted?: (value: XYPadPoint) => void;
+    /** The range of `x`, left to right. Default `[-1, 1]`. */
+    x?: [number, number];
+    /** The range of `y`, bottom to top. Default `[-1, 1]`. */
+    y?: [number, number];
+    /** The granularity of both values. Default `0.01`. */
+    step?: number;
+    /** How many cells the dot grid has across. Default 8. */
+    grid?: number;
+    /** Snap the point to the dots of the grid. */
+    snapToGrid?: boolean;
+    /** Spring back to the centre on release, like a joystick. */
+    snapBack?: boolean;
+    /** Draw the last moves as a fading line behind the point. */
+    trail?: boolean;
+    /** The colour of the point, its guides and its trail. Default `info`. */
+    color?: XYPadColor;
+    /** The shape of the field, as a CSS aspect ratio. Default `16 / 10`. */
+    aspect?: string;
+    /** What it sets. Read out with its values. */
+    label?: string;
+    /** How each value is written, here and to a screen reader. Default two decimals. */
+    format?: (value: number, axis: 'x' | 'y') => string;
+    /** Turns it off. */
+    disabled?: boolean;
+    /** Submits `<name>.x` and `<name>.y` with a form. */
+    name?: string;
+    /** An `XYPad.Value` readout, set under the field. */
+    children?: ReactNode;
+}
+/** A field with a point in it, moved by a drag, a press or the arrow keys. */
+declare function XYPadRoot({ value: valueProp, defaultValue, onValueChange, onValueCommitted, x: xRange, y: yRange, step, grid, snapToGrid, snapBack, trail, color, aspect, label, format, disabled, name, className, style, children, ...props }: XYPadProps): import("react").JSX.Element;
+declare namespace XYPadRoot {
+    var displayName: string;
+}
+export interface XYPadValueProps extends ComponentProps<'div'> {
+}
+/** The two values written out, under the field. */
+declare function XYPadValue({ className, ...props }: XYPadValueProps): import("react").JSX.Element;
+declare namespace XYPadValue {
+    var displayName: string;
+}
+export declare const XYPad: typeof XYPadRoot & {
+    Value: typeof XYPadValue;
+};
+export { XYPadValue, xyPadVariants };