panelui-web 0.9.0 → 0.10.0

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

@@ -0,0 +1,185 @@
+import { Toolbar as BaseToolbar } from '@base-ui/react/toolbar';
+import { type ComponentProps, type CSSProperties, type ReactElement, type ReactNode } from 'react';
+export type ToolbarVariant = 'floating' | 'inline';
+export type ToolbarSize = 'sm' | 'md' | 'lg';
+declare const toolbarVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        floating: {
+            root: string[];
+        };
+        inline: {};
+    };
+    size: {
+        sm: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+    };
+}, {
+    root: string[];
+    group: string;
+    marker: string[];
+    item: string[];
+    tool: string;
+    separator: string[];
+    caret: string[];
+    tooltip: string[];
+    kbd: string;
+}, undefined, {
+    variant: {
+        floating: {
+            root: string[];
+        };
+        inline: {};
+    };
+    size: {
+        sm: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+    };
+}, {
+    root: string[];
+    group: string;
+    marker: string[];
+    item: string[];
+    tool: string;
+    separator: string[];
+    caret: string[];
+    tooltip: string[];
+    kbd: string;
+}, import("tailwind-variants").TVReturnType<{
+    variant: {
+        floating: {
+            root: string[];
+        };
+        inline: {};
+    };
+    size: {
+        sm: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+    };
+}, {
+    root: string[];
+    group: string;
+    marker: string[];
+    item: string[];
+    tool: string;
+    separator: string[];
+    caret: string[];
+    tooltip: string[];
+    kbd: string;
+}, undefined, unknown, unknown, undefined>>;
+export interface ToolbarProps extends Omit<BaseToolbar.Root.Props, 'className' | 'style'> {
+    /** `floating` sits on a raised surface of its own; `inline` draws only the buttons. Default `floating`. */
+    variant?: ToolbarVariant;
+    /** The size of every button in it. Default `md`. */
+    size?: ToolbarSize;
+    /**
+     * Answer single-key shortcuts anywhere on the page: a key in a tool's or
+     * button's `shortcut` chooses that tool or presses that button. Keys typed
+     * into a field are left alone. Off by default; turn it on for the one
+     * toolbar that owns the page.
+     */
+    shortcuts?: boolean;
+    /** Which side of a button its tooltip opens on. Default below a row and beside a column. */
+    tooltipSide?: 'top' | 'bottom' | 'left' | 'right';
+    className?: string;
+    style?: CSSProperties;
+}
+/** The strip. `orientation="vertical"` stands it up as a rail. */
+declare function ToolbarRoot({ variant, size, shortcuts, tooltipSide, orientation, className, children, ...props }: ToolbarProps): import("react").JSX.Element;
+declare namespace ToolbarRoot {
+    var displayName: string;
+}
+export interface ToolbarGroupProps extends Omit<ComponentProps<'div'>, 'defaultValue' | 'onChange' | 'dir'> {
+    /** The chosen tool's `value`, when the caller holds it. */
+    value?: string;
+    /** The tool chosen at first, when the caller does not hold it. */
+    defaultValue?: string;
+    /** Called with the `value` of the tool that was chosen. */
+    onValueChange?: (value: string) => void;
+    /** Turns every tool in the group off. */
+    disabled?: boolean;
+}
+/**
+ * Tools of which exactly one is on: the select tool, the pen, the shape.
+ * Choosing the one already on leaves it on.
+ */
+declare function ToolbarGroup({ value: valueProp, defaultValue, onValueChange, disabled, className, children, ...props }: ToolbarGroupProps): import("react").JSX.Element;
+declare namespace ToolbarGroup {
+    var displayName: string;
+}
+export interface ToolbarToolProps extends Omit<ComponentProps<'button'>, 'value' | 'children'> {
+    /** Names the tool in its group's `value`. */
+    value: string;
+    /** What the tool is called: its tooltip, and what a screen reader reads. */
+    label?: string;
+    /** The key that chooses it, shown in the tooltip, such as `V`. */
+    shortcut?: string;
+    /** Usually an icon, and a `Toolbar.Caret` when it has options. */
+    children?: ReactNode;
+}
+/** One tool in a `Toolbar.Group`. Choosing it moves the marker onto it. */
+declare function ToolbarTool({ value, label, shortcut, className, children, disabled, ...props }: ToolbarToolProps): import("react").JSX.Element;
+declare namespace ToolbarTool {
+    var displayName: string;
+}
+export interface ToolbarButtonProps extends Omit<ComponentProps<'button'>, 'children'> {
+    /** What it does: its tooltip, and what a screen reader reads. */
+    label?: string;
+    /** The key or keys that press it, shown in the tooltip, such as `⌘Z`. A single key is also answered. */
+    shortcut?: string;
+    /**
+     * Another trigger to be the button, such as a `Menu.Trigger`, so a menu
+     * opens from the strip and keeps its place in the arrow-key order.
+     */
+    render?: ReactElement;
+    /** Usually an icon. */
+    children?: ReactNode;
+}
+/** An action on the strip: undo, zoom, export. It does not stay on. */
+declare function ToolbarButton({ label, shortcut, render, className, children, ...props }: ToolbarButtonProps): import("react").JSX.Element;
+declare namespace ToolbarButton {
+    var displayName: string;
+}
+export interface ToolbarSeparatorProps extends Omit<BaseToolbar.Separator.Props, 'className'> {
+    className?: string;
+}
+/** A short line between groups of tools that belong apart. */
+declare function ToolbarSeparator({ className, ...props }: ToolbarSeparatorProps): import("react").JSX.Element;
+declare namespace ToolbarSeparator {
+    var displayName: string;
+}
+export interface ToolbarCaretProps extends ComponentProps<'span'> {
+}
+/** A small chevron after a tool's icon, saying it opens more choices. */
+declare function ToolbarCaret({ className, children, ...props }: ToolbarCaretProps): import("react").JSX.Element;
+declare namespace ToolbarCaret {
+    var displayName: string;
+}
+export declare const Toolbar: typeof ToolbarRoot & {
+    Group: typeof ToolbarGroup;
+    Tool: typeof ToolbarTool;
+    Button: typeof ToolbarButton;
+    Separator: typeof ToolbarSeparator;
+    Caret: typeof ToolbarCaret;
+};
+export { ToolbarGroup, ToolbarTool, ToolbarButton, ToolbarSeparator, ToolbarCaret, toolbarVariants };

package/dist/components/toolbar/index.js

@@ -0,0 +1,270 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Toolbar — a strip of tools and actions for an editor: one tool chosen at a
+ * time, and buttons that act at once.
+ *
+ * ```tsx
+ * <Toolbar shortcuts>
+ *   <Toolbar.Group defaultValue="select" aria-label="Tools">
+ *     <Toolbar.Tool value="select" label="Select" shortcut="V"><PointerIcon /></Toolbar.Tool>
+ *     <Toolbar.Tool value="pen" label="Pen" shortcut="P"><PenIcon /></Toolbar.Tool>
+ *   </Toolbar.Group>
+ *   <Toolbar.Separator />
+ *   <Toolbar.Button label="Undo" shortcut="⌘Z"><UndoIcon /></Toolbar.Button>
+ * </Toolbar>
+ * ```
+ *
+ * ## One marker, and it travels
+ *
+ * The chosen tool sits on a filled marker in the primary colour. There is
+ * one marker per group and it glides from tool to tool, so changing tools
+ * reads as moving a hand along the strip rather than as one button going
+ * dark while another lights up.
+ *
+ * ## Tools and actions are different things
+ *
+ * `Toolbar.Tool` is a mode: exactly one in a `Toolbar.Group` is on, and it
+ * stays on until another is chosen. `Toolbar.Button` is an action, undo or
+ * zoom, and leaves nothing behind. Keeping the two apart is what lets the
+ * strip say at a glance which mode the editor is in.
+ *
+ * ## The keyboard
+ *
+ * Arrow keys move along the strip and Home and End jump to its ends. Give a
+ * tool or button a `shortcut` and its tooltip shows the key; set `shortcuts`
+ * on the toolbar and a single key press, anywhere on the page outside a text
+ * field, chooses that tool or presses that button.
+ */
+import { Toggle } from '@base-ui/react/toggle';
+import { ToggleGroup } from '@base-ui/react/toggle-group';
+import { Toolbar as BaseToolbar } from '@base-ui/react/toolbar';
+import { Tooltip } from '@base-ui/react/tooltip';
+import { createContext, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState, } from 'react';
+import { tv } from 'tailwind-variants';
+const toolbarVariants = tv({
+    slots: {
+        root: [
+            'group/toolbar relative inline-flex w-fit items-center gap-0.5 outline-none',
+            'data-[orientation=vertical]:flex-col',
+            'data-disabled:pointer-events-none data-disabled:opacity-50',
+        ],
+        group: 'relative isolate flex items-center gap-0.5 group-data-[orientation=vertical]/toolbar:flex-col',
+        marker: [
+            'pointer-events-none absolute -z-10 rounded-(--toolbar-radius) bg-primary opacity-0 data-ready:opacity-100',
+            'shadow-[0_1px_2px_rgb(0_0_0/0.18),inset_0_1px_0_rgb(255_255_255/0.18)]',
+            'top-(--marker-y) left-(--marker-x) h-(--marker-h) w-(--marker-w)',
+            'data-ready:transition-[left,top,width,height] data-ready:duration-[380ms] data-ready:ease-[cubic-bezier(0.3,1.2,0.4,1)] motion-reduce:transition-none',
+        ],
+        item: [
+            'relative inline-flex h-(--toolbar-item) min-w-(--toolbar-item) shrink-0 cursor-pointer items-center justify-center gap-0.5 rounded-(--toolbar-radius) px-[calc((var(--toolbar-item)-var(--toolbar-icon))/2)]',
+            'text-muted-foreground outline-none select-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 focus-visible:ring-inset',
+            'data-disabled:pointer-events-none data-disabled:opacity-40 disabled:pointer-events-none disabled:opacity-40',
+            // Menus opened from the strip keep their button marked while open.
+            'data-popup-open:bg-foreground/[0.08] data-popup-open:text-foreground',
+            '[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-(--toolbar-icon)',
+            // A button that is only a caret is the options of the tool before it:
+            // a slim chevron against that tool, with no fill of its own.
+            'has-[>[data-slot=toolbar-caret]:only-child]:w-3.5 has-[>[data-slot=toolbar-caret]:only-child]:min-w-0 has-[>[data-slot=toolbar-caret]:only-child]:px-0',
+            'has-[>[data-slot=toolbar-caret]:only-child]:bg-transparent has-[>[data-slot=toolbar-caret]:only-child]:active:scale-100',
+            'has-[>[data-slot=toolbar-caret]:only-child]:data-popup-open:bg-transparent',
+        ],
+        // A chosen tool sits on the marker; the hover fill would hide it.
+        tool: 'data-pressed:bg-transparent data-pressed:text-primary-foreground data-pressed:hover:bg-transparent',
+        separator: [
+            'mx-1 h-[calc(var(--toolbar-item)*0.5)] w-px shrink-0 rounded-full bg-foreground/15',
+            'data-[orientation=horizontal]:mx-0 data-[orientation=horizontal]:my-1 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-[calc(var(--toolbar-item)*0.5)]',
+        ],
+        caret: [
+            'pointer-events-none -me-1 flex size-3 shrink-0 items-center justify-center opacity-60 transition-opacity duration-150 [&_svg]:size-3',
+            // On its own it takes its button's colour: muted until the hand is on
+            // it or its menu is open.
+            'only:me-0 only:opacity-100 motion-reduce:transition-none',
+        ],
+        tooltip: [
+            'flex origin-(--transform-origin) items-center gap-2 rounded-lg bg-foreground px-2 py-1 text-xs font-medium text-background shadow-md',
+            'transition-[opacity,scale] duration-150 data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:opacity-0',
+            'data-instant:duration-0 motion-reduce:transition-none',
+        ],
+        kbd: 'rounded bg-background/15 px-1 font-sans text-[11px] tabular-nums text-background/80',
+    },
+    variants: {
+        variant: {
+            floating: {
+                root: [
+                    'rounded-[calc(var(--toolbar-radius)+var(--toolbar-pad))] bg-popover p-(--toolbar-pad) text-popover-foreground',
+                    'shadow-[0_10px_30px_-12px_rgb(0_0_0/0.3)] ring-1 ring-foreground/[0.06] dark:ring-foreground/10',
+                ],
+            },
+            inline: {},
+        },
+        size: {
+            sm: { root: '[--toolbar-item:1.75rem] [--toolbar-icon:0.875rem] [--toolbar-radius:0.5rem] [--toolbar-pad:0.25rem]' },
+            md: { root: '[--toolbar-item:2.25rem] [--toolbar-icon:1.125rem] [--toolbar-radius:0.75rem] [--toolbar-pad:0.3125rem]' },
+            lg: { root: '[--toolbar-item:2.75rem] [--toolbar-icon:1.25rem] [--toolbar-radius:0.875rem] [--toolbar-pad:0.375rem]' },
+        },
+    },
+    defaultVariants: { variant: 'floating', size: 'md' },
+});
+const ToolbarContext = createContext(null);
+function useToolbar(part) {
+    const context = useContext(ToolbarContext);
+    if (!context)
+        throw new Error(`${part} must be used inside a <Toolbar>.`);
+    return context;
+}
+/** Whether a key press belongs to something being typed into. */
+function typing(target) {
+    if (!(target instanceof HTMLElement))
+        return false;
+    return Boolean(target.closest('input, textarea, select, [contenteditable=""], [contenteditable="true"], [role="textbox"]'));
+}
+/** The key a shortcut is pressed with, when it is one key on its own: "V" is, "⌘Z" is not. */
+function plainKey(shortcut) {
+    return [...shortcut].length === 1 && !'⌘⌥⌃⇧'.includes(shortcut) ? shortcut.toLowerCase() : null;
+}
+const TooltipSideContext = createContext('bottom');
+/** The strip. `orientation="vertical"` stands it up as a rail. */
+function ToolbarRoot({ variant, size, shortcuts = false, tooltipSide, orientation = 'horizontal', className, children, ...props }) {
+    const slots = toolbarVariants({ variant, size });
+    const bindings = useRef(new Map());
+    useEffect(() => {
+        if (!shortcuts)
+            return;
+        const onKey = (event) => {
+            if (event.metaKey || event.ctrlKey || event.altKey || event.defaultPrevented || typing(event.target))
+                return;
+            const run = bindings.current.get(event.key.toLowerCase());
+            if (!run)
+                return;
+            event.preventDefault();
+            run();
+        };
+        document.addEventListener('keydown', onKey);
+        return () => document.removeEventListener('keydown', onKey);
+    }, [shortcuts]);
+    const context = useMemo(() => ({
+        orientation,
+        bind: (key, run) => {
+            bindings.current.set(key, run);
+            return () => {
+                if (bindings.current.get(key) === run)
+                    bindings.current.delete(key);
+            };
+        },
+    }), [orientation]);
+    return (_jsx(ToolbarContext.Provider, { value: context, children: _jsx(TooltipSideContext.Provider, { value: tooltipSide ?? (orientation === 'vertical' ? 'right' : 'bottom'), children: _jsx(Tooltip.Provider, { delay: 500, closeDelay: 0, children: _jsx(BaseToolbar.Root, { "data-slot": "toolbar", orientation: orientation, className: slots.root({ className }), ...props, children: children }) }) }) }));
+}
+ToolbarRoot.displayName = 'Toolbar';
+const GroupContext = createContext(null);
+/**
+ * Tools of which exactly one is on: the select tool, the pen, the shape.
+ * Choosing the one already on leaves it on.
+ */
+function ToolbarGroup({ value: valueProp, defaultValue, onValueChange, disabled, className, children, ...props }) {
+    const { orientation } = useToolbar('Toolbar.Group');
+    const slots = toolbarVariants();
+    const [inner, setInner] = useState(defaultValue ?? '');
+    const value = valueProp ?? inner;
+    const live = useRef({ onValueChange, controlled: valueProp !== undefined });
+    live.current = { onValueChange, controlled: valueProp !== undefined };
+    const choose = useCallback((next) => {
+        if (!live.current.controlled)
+            setInner(next);
+        live.current.onValueChange?.(next);
+    }, []);
+    // The marker follows the chosen tool, measured where it sits in the group.
+    const group = useRef(null);
+    const marker = useRef(null);
+    useIsomorphicLayoutEffect(() => {
+        const box = group.current;
+        const mark = marker.current;
+        if (!box || !mark)
+            return;
+        const place = () => {
+            const tool = box.querySelector(':scope > [data-pressed], :scope > * > [data-pressed]');
+            if (!tool) {
+                mark.removeAttribute('data-ready');
+                return;
+            }
+            mark.style.setProperty('--marker-x', `${tool.offsetLeft}px`);
+            mark.style.setProperty('--marker-y', `${tool.offsetTop}px`);
+            mark.style.setProperty('--marker-w', `${tool.offsetWidth}px`);
+            mark.style.setProperty('--marker-h', `${tool.offsetHeight}px`);
+            // Shown only once placed, so it never slides in from the corner.
+            requestAnimationFrame(() => mark.setAttribute('data-ready', ''));
+        };
+        place();
+        const observer = new ResizeObserver(place);
+        observer.observe(box);
+        return () => observer.disconnect();
+    }, [value]);
+    return (_jsx(GroupContext.Provider, { value: useMemo(() => ({ choose }), [choose]), children: _jsxs(ToggleGroup, { ref: group, "data-slot": "toolbar-group", value: value ? [value] : [], onValueChange: (next) => {
+                // A tool cannot be switched off by choosing it again.
+                const picked = next.find((each) => each !== value) ?? next[0];
+                if (picked && picked !== value)
+                    choose(picked);
+            }, orientation: orientation, disabled: disabled, className: slots.group({ className }), ...props, children: [_jsx("span", { ref: marker, "aria-hidden": true, "data-slot": "toolbar-marker", className: slots.marker() }), children] }) }));
+}
+ToolbarGroup.displayName = 'Toolbar.Group';
+const useIsomorphicLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;
+/** Wraps a button in its tooltip, when it has something to say. */
+function WithTooltip({ label, shortcut, trigger }) {
+    const side = useContext(TooltipSideContext);
+    const slots = toolbarVariants();
+    if (!label)
+        return trigger;
+    return (_jsxs(Tooltip.Root, { children: [_jsx(Tooltip.Trigger, { render: trigger }), _jsx(Tooltip.Portal, { children: _jsx(Tooltip.Positioner, { side: side, sideOffset: 10, className: "z-50", children: _jsxs(Tooltip.Popup, { "data-slot": "toolbar-tooltip", className: slots.tooltip(), children: [label, shortcut ? _jsx("kbd", { className: slots.kbd(), children: shortcut }) : null] }) }) })] }));
+}
+/** Answers the toolbar's single-key shortcut, when there is one. */
+function useShortcut(shortcut, run) {
+    const { bind } = useToolbar('A toolbar item');
+    const latest = useRef(run);
+    latest.current = run;
+    useEffect(() => {
+        const key = shortcut ? plainKey(shortcut) : null;
+        if (!key)
+            return;
+        return bind(key, () => latest.current());
+    }, [shortcut, bind]);
+}
+/** One tool in a `Toolbar.Group`. Choosing it moves the marker onto it. */
+function ToolbarTool({ value, label, shortcut, className, children, disabled, ...props }) {
+    const group = useContext(GroupContext);
+    if (!group)
+        throw new Error('Toolbar.Tool must be used inside a <Toolbar.Group>.');
+    const slots = toolbarVariants();
+    useShortcut(disabled ? undefined : shortcut, () => group.choose(value));
+    return (_jsx(WithTooltip, { label: label, shortcut: shortcut, trigger: _jsx(BaseToolbar.Button, { "data-slot": "toolbar-tool", "aria-label": label, disabled: disabled, className: slots.item({ className: [slots.tool(), className] }), render: _jsx(Toggle, { value: value }), ...props, children: children }) }));
+}
+ToolbarTool.displayName = 'Toolbar.Tool';
+/** An action on the strip: undo, zoom, export. It does not stay on. */
+function ToolbarButton({ label, shortcut, render, className, children, ...props }) {
+    const slots = toolbarVariants();
+    const self = useRef(null);
+    useShortcut(props.disabled ? undefined : shortcut, () => self.current?.click());
+    return (_jsx(WithTooltip, { label: label, shortcut: shortcut, trigger: _jsx(BaseToolbar.Button, { ref: self, "data-slot": "toolbar-button", "aria-label": label, render: render, className: slots.item({ className }), ...props, children: children }) }));
+}
+ToolbarButton.displayName = 'Toolbar.Button';
+/** A short line between groups of tools that belong apart. */
+function ToolbarSeparator({ className, ...props }) {
+    const slots = toolbarVariants();
+    return _jsx(BaseToolbar.Separator, { "data-slot": "toolbar-separator", className: slots.separator({ className }), ...props });
+}
+ToolbarSeparator.displayName = 'Toolbar.Separator';
+/** A small chevron after a tool's icon, saying it opens more choices. */
+function ToolbarCaret({ className, children, ...props }) {
+    const slots = toolbarVariants();
+    return (_jsx("span", { "aria-hidden": true, "data-slot": "toolbar-caret", className: slots.caret({ className }), ...props, children: children ?? (_jsx("svg", { viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: 1.8, strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "M3.5 4.75 6 7.25l2.5-2.5" }) })) }));
+}
+ToolbarCaret.displayName = 'Toolbar.Caret';
+export const Toolbar = Object.assign(ToolbarRoot, {
+    Group: ToolbarGroup,
+    Tool: ToolbarTool,
+    Button: ToolbarButton,
+    Separator: ToolbarSeparator,
+    Caret: ToolbarCaret,
+});
+export { ToolbarGroup, ToolbarTool, ToolbarButton, ToolbarSeparator, ToolbarCaret, toolbarVariants };

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

@@ -0,0 +1,224 @@
+/**
+ * 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 { type ComponentProps, type ReactNode } from 'react';
+declare const workbenchVariants: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            root?: import("tailwind-merge").ClassNameValue;
+            canvas?: import("tailwind-merge").ClassNameValue;
+            bar?: import("tailwind-merge").ClassNameValue;
+            resize?: import("tailwind-merge").ClassNameValue;
+            trigger?: import("tailwind-merge").ClassNameValue;
+            inspector?: import("tailwind-merge").ClassNameValue;
+            timeline?: import("tailwind-merge").ClassNameValue;
+            sidebar?: import("tailwind-merge").ClassNameValue;
+            artboard?: import("tailwind-merge").ClassNameValue;
+            sheetBody?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            root?: import("tailwind-merge").ClassNameValue;
+            canvas?: import("tailwind-merge").ClassNameValue;
+            bar?: import("tailwind-merge").ClassNameValue;
+            resize?: import("tailwind-merge").ClassNameValue;
+            trigger?: import("tailwind-merge").ClassNameValue;
+            inspector?: import("tailwind-merge").ClassNameValue;
+            timeline?: import("tailwind-merge").ClassNameValue;
+            sidebar?: import("tailwind-merge").ClassNameValue;
+            artboard?: import("tailwind-merge").ClassNameValue;
+            sheetBody?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    root: string[];
+    sidebar: string[];
+    canvas: string[];
+    artboard: string[];
+    bar: string;
+    inspector: string[];
+    timeline: string[];
+    resize: string[];
+    trigger: string[];
+    sheetBody: string[];
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            root?: import("tailwind-merge").ClassNameValue;
+            canvas?: import("tailwind-merge").ClassNameValue;
+            bar?: import("tailwind-merge").ClassNameValue;
+            resize?: import("tailwind-merge").ClassNameValue;
+            trigger?: import("tailwind-merge").ClassNameValue;
+            inspector?: import("tailwind-merge").ClassNameValue;
+            timeline?: import("tailwind-merge").ClassNameValue;
+            sidebar?: import("tailwind-merge").ClassNameValue;
+            artboard?: import("tailwind-merge").ClassNameValue;
+            sheetBody?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    root: string[];
+    sidebar: string[];
+    canvas: string[];
+    artboard: string[];
+    bar: string;
+    inspector: string[];
+    timeline: string[];
+    resize: string[];
+    trigger: string[];
+    sheetBody: string[];
+}, import("tailwind-variants").TVReturnType<unknown, {
+    root: string[];
+    sidebar: string[];
+    canvas: string[];
+    artboard: string[];
+    bar: string;
+    inspector: string[];
+    timeline: string[];
+    resize: string[];
+    trigger: string[];
+    sheetBody: string[];
+}, undefined, unknown, unknown, undefined>>;
+/**
+ * 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 declare function useWorkbench(): {
+    focus: boolean;
+    setFocus: (focus: boolean) => void;
+    compact: boolean;
+    inspectorOpen: boolean;
+    setInspectorOpen: (open: boolean) => void;
+};
+export interface WorkbenchProps extends ComponentProps<'div'> {
+    /** Whether the panels are cleared away, when the caller holds it. */
+    focus?: boolean;
+    /** Whether it starts in focus. Default false. */
+    defaultFocus?: boolean;
+    /** Called when focus turns on or off. */
+    onFocusChange?: (focus: boolean) => void;
+    /** Toggle focus with the `\` key while nothing is being typed. Default true. */
+    focusShortcut?: boolean;
+    /** Below this many pixels wide, the inspector opens as a sheet. Default 760. */
+    compactBelow?: number;
+    /** The inspector column's width in pixels. Default 348, a rail and a panel. */
+    inspectorWidth?: number;
+    /** The sidebar's width in pixels. Default 240. */
+    sidebarWidth?: number;
+    /** The timeline's height in pixels to start at. Default 232. */
+    defaultTimelineHeight?: number;
+}
+/** The editor's frame. Give it a height, such as `h-[640px]` or `h-dvh`. */
+declare function WorkbenchRoot({ focus: focusProp, defaultFocus, onFocusChange, focusShortcut, compactBelow, inspectorWidth, sidebarWidth, defaultTimelineHeight, className, style, children, ...props }: WorkbenchProps): import("react").JSX.Element;
+declare namespace WorkbenchRoot {
+    var displayName: string;
+}
+export interface WorkbenchBarProps extends ComponentProps<'div'> {
+}
+/** The strip floating at the top of the canvas, for a toolbar. */
+declare function WorkbenchBar({ className, ...props }: WorkbenchBarProps): import("react").JSX.Element;
+declare namespace WorkbenchBar {
+    var displayName: string;
+}
+export interface WorkbenchSidebarProps extends ComponentProps<'aside'> {
+}
+/** A column before the canvas, for layers, pages or assets. It is hidden on a narrow screen and in focus. */
+declare function WorkbenchSidebar({ className, ...props }: WorkbenchSidebarProps): import("react").JSX.Element;
+declare namespace WorkbenchSidebar {
+    var displayName: string;
+}
+export interface WorkbenchCanvasProps extends ComponentProps<'div'> {
+}
+/** The stage in the middle: a field of dots with the work centred on it. */
+declare function WorkbenchCanvas({ className, ...props }: WorkbenchCanvasProps): import("react").JSX.Element;
+declare namespace WorkbenchCanvas {
+    var displayName: string;
+}
+export interface WorkbenchArtboardProps extends ComponentProps<'div'> {
+    /** The work's shape, as a CSS aspect ratio such as `16 / 9` or `4 / 5`. Default `16 / 9`. */
+    aspect?: string;
+}
+/** The work itself: as large as its shape fits on the canvas, clear of the floating bar. */
+declare function WorkbenchArtboard({ aspect, className, style, ...props }: WorkbenchArtboardProps): import("react").JSX.Element;
+declare namespace WorkbenchArtboard {
+    var displayName: string;
+}
+export interface WorkbenchInspectorProps extends ComponentProps<'div'> {
+    /** The sheet's heading on a narrow screen, read out when it opens. Default `Inspector`. */
+    title?: string;
+    children?: ReactNode;
+}
+/**
+ * The column after the canvas, for an `Inspector`. On a narrow screen the
+ * same children open in a sheet from the side instead.
+ */
+declare function WorkbenchInspector({ title, className, children, ...props }: WorkbenchInspectorProps): import("react").JSX.Element;
+declare namespace WorkbenchInspector {
+    var displayName: string;
+}
+export interface WorkbenchInspectorTriggerProps extends ComponentProps<'button'> {
+}
+/**
+ * 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.
+ */
+declare function WorkbenchInspectorTrigger({ className, children, onClick, ...props }: WorkbenchInspectorTriggerProps): import("react").JSX.Element | null;
+declare namespace WorkbenchInspectorTrigger {
+    var displayName: string;
+}
+export interface WorkbenchTimelineProps extends ComponentProps<'div'> {
+    /** Let its top edge be dragged to make it taller or shorter. Default true. */
+    resizable?: boolean;
+    /** The shortest it can be dragged to, in pixels. Default 140. */
+    minHeight?: number;
+}
+/** The row under everything, for a `Timeline`. Its top edge drags to resize it. */
+declare function WorkbenchTimeline({ resizable, minHeight, className, children, ...props }: WorkbenchTimelineProps): import("react").JSX.Element;
+declare namespace WorkbenchTimeline {
+    var displayName: string;
+}
+export declare const Workbench: typeof WorkbenchRoot & {
+    Bar: typeof WorkbenchBar;
+    Sidebar: typeof WorkbenchSidebar;
+    Canvas: typeof WorkbenchCanvas;
+    Artboard: typeof WorkbenchArtboard;
+    Inspector: typeof WorkbenchInspector;
+    InspectorTrigger: typeof WorkbenchInspectorTrigger;
+    Timeline: typeof WorkbenchTimeline;
+};
+export { WorkbenchBar, WorkbenchSidebar, WorkbenchCanvas, WorkbenchArtboard, WorkbenchInspector, WorkbenchInspectorTrigger, WorkbenchTimeline, workbenchVariants, };