@inkra/react 0.0.0-stage → 0.2.0

package/dist/dockable-panel/index.js

@@ -0,0 +1,253 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DndContext, MouseSensor, TouchSensor, useDraggable, useSensor, useSensors, } from '@dnd-kit/core';
+import { createContext, forwardRef, useCallback, useContext, useEffect, useId, useMemo, useRef, useState, } from 'react';
+import { Button } from '../Button.js';
+import { PencilIcon } from '../PencilIcon.js';
+import { PencilLine } from '../PencilLine.js';
+import { PencilSurface } from '../PencilSurface.js';
+import { PencilText } from '../PencilText.js';
+import { useBrowserLayoutEffect } from '../internal/useBrowserLayoutEffect.js';
+import { clampDockablePanelPosition, placeDockablePanel, promoteDockablePanel, } from './model.js';
+const WorkspaceContext = createContext(null);
+function classes(...values) {
+    return values.filter(Boolean).join(' ');
+}
+export const DockablePanelWorkspace = forwardRef(function DockablePanelWorkspace({ activeId, baseZIndex = 0, boundaryPadding = 8, children, className, defaultActiveId = null, onActiveChange, snapThreshold = 12, titleBarVisibility = 56, ...props }, forwardedRef) {
+    const rootRef = useRef(null);
+    const dragCallbacks = useRef(new Map());
+    const [order, setOrder] = useState([]);
+    const [uncontrolledActiveId, setUncontrolledActiveId] = useState(defaultActiveId);
+    const resolvedActiveId = activeId === undefined ? uncontrolledActiveId : activeId;
+    const [size, setSize] = useState({ width: 0, height: 0 });
+    const sensors = useSensors(useSensor(MouseSensor, { activationConstraint: { distance: 4 } }), useSensor(TouchSensor, { activationConstraint: { delay: 180, tolerance: 8 } }));
+    const setRoot = useCallback((node) => {
+        rootRef.current = node;
+        if (typeof forwardedRef === 'function')
+            forwardedRef(node);
+        else if (forwardedRef)
+            forwardedRef.current = node;
+    }, [forwardedRef]);
+    useBrowserLayoutEffect(() => {
+        const root = rootRef.current;
+        if (!root)
+            return undefined;
+        const update = () => setSize(current => {
+            const next = { width: root.clientWidth, height: root.clientHeight };
+            return current.width === next.width && current.height === next.height ? current : next;
+        });
+        update();
+        if (typeof ResizeObserver === 'undefined')
+            return undefined;
+        const observer = new ResizeObserver(update);
+        observer.observe(root);
+        return () => observer.disconnect();
+    }, []);
+    const activate = useCallback((id) => {
+        setOrder(current => promoteDockablePanel(current, id));
+        if (activeId === undefined)
+            setUncontrolledActiveId(id);
+        if (resolvedActiveId !== id)
+            onActiveChange?.(id);
+    }, [activeId, onActiveChange, resolvedActiveId]);
+    useEffect(() => {
+        if (activeId != null)
+            setOrder(current => promoteDockablePanel(current, activeId));
+    }, [activeId]);
+    const register = useCallback((id) => {
+        setOrder(current => current.includes(id) ? current : [...current, id]);
+        return () => {
+            dragCallbacks.current.delete(id);
+            setOrder(current => current.filter(value => value !== id));
+        };
+    }, []);
+    const commitDrag = useCallback((id, callback) => {
+        if (callback)
+            dragCallbacks.current.set(id, callback);
+        else
+            dragCallbacks.current.delete(id);
+    }, []);
+    const bounds = useMemo(() => ({
+        height: size.height,
+        padding: boundaryPadding,
+        titleBarVisibility,
+        width: size.width,
+    }), [boundaryPadding, size.height, size.width, titleBarVisibility]);
+    const context = useMemo(() => ({
+        activeId: resolvedActiveId,
+        activate,
+        bounds,
+        commitDrag,
+        layer(id) {
+            const index = order.indexOf(id);
+            return baseZIndex + (resolvedActiveId === id ? order.length : Math.max(0, index));
+        },
+        register,
+        snapThreshold,
+    }), [activate, baseZIndex, bounds, commitDrag, order, register, resolvedActiveId, snapThreshold]);
+    function handleDragEnd(event) {
+        const id = String(event.active.id);
+        dragCallbacks.current.get(id)?.({ x: event.delta.x, y: event.delta.y });
+    }
+    return _jsx(WorkspaceContext.Provider, { value: context, children: _jsx(DndContext, { sensors: sensors, onDragStart: (event) => activate(String(event.active.id)), onDragEnd: handleDragEnd, children: _jsx("div", { ...props, className: classes('inkra-dockable-panel-workspace', className), ref: setRoot, children: children }) }) });
+});
+const collapsePaths = [{ d: 'M6 12h12' }];
+const expandPaths = [{ d: 'M6 9h12M12 3v12' }];
+const resetPaths = [
+    { d: 'M4 12a8 8 0 1 0 2.34-5.66L4 8.68' },
+    { d: 'M4 4v4.68h4.68' },
+];
+const defaultLabels = {
+    move: 'Move panel',
+    collapse: 'Collapse panel',
+    expand: 'Expand panel',
+    reset: 'Restore panel position',
+    keyboardInstructions: 'Use the arrow keys to move this panel. Hold Shift for larger steps. Press Home to restore its position.',
+};
+function renderTitle(title) {
+    return typeof title === 'string' ? _jsx(PencilText, { children: title }) : title;
+}
+function isInteractiveTarget(target) {
+    return target instanceof Element && Boolean(target.closest('button, a, input, select, textarea, [contenteditable="true"], [data-dockable-panel-no-drag]'));
+}
+export const DockablePanel = forwardRef(function DockablePanel({ children, className, collapsed, collapsible = true, defaultCollapsed = false, defaultPosition = { x: 8, y: 8 }, headerActions, id, keyboardStep = 8, labels: labelOverrides, movable = true, onCollapsedChange, onFocusCapture, onPointerDown, onPositionChange, position, style, title, ...props }, forwardedRef) {
+    const workspace = useContext(WorkspaceContext);
+    if (!workspace)
+        throw new Error('DockablePanel must be rendered inside DockablePanelWorkspace.');
+    const generatedId = useId();
+    const titleId = `${generatedId}-title`;
+    const instructionsId = `${generatedId}-instructions`;
+    const panelRef = useRef(null);
+    const titleBarRef = useRef(null);
+    const [uncontrolledPosition, setUncontrolledPosition] = useState(defaultPosition);
+    const [uncontrolledCollapsed, setUncontrolledCollapsed] = useState(defaultCollapsed);
+    const [panelSize, setPanelSize] = useState({ width: 0, height: 0, titleBarHeight: 44 });
+    const resolvedPosition = position ?? uncontrolledPosition;
+    const resolvedCollapsed = collapsed ?? uncontrolledCollapsed;
+    const positionRef = useRef(resolvedPosition);
+    positionRef.current = resolvedPosition;
+    const labels = { ...defaultLabels, ...labelOverrides };
+    const { activate, bounds, commitDrag, layer, register, snapThreshold, } = workspace;
+    const { attributes, isDragging, listeners, setActivatorNodeRef, setNodeRef, transform } = useDraggable({
+        id,
+        disabled: !movable,
+        attributes: { role: 'button', roleDescription: labels.move, tabIndex: 0 },
+    });
+    const setPanelRef = useCallback((node) => {
+        panelRef.current = node;
+        setNodeRef(node);
+        if (typeof forwardedRef === 'function')
+            forwardedRef(node);
+        else if (forwardedRef)
+            forwardedRef.current = node;
+    }, [forwardedRef, setNodeRef]);
+    const changePosition = useCallback((next, reason, snap) => {
+        const panel = panelRef.current;
+        const titleBar = titleBarRef.current;
+        if (!panel || !titleBar || bounds.width <= 0 || bounds.height <= 0)
+            return;
+        const measuredBounds = { ...bounds, titleBarHeight: titleBar.offsetHeight };
+        const placement = snap
+            ? placeDockablePanel(next, { width: panel.offsetWidth, height: panel.offsetHeight }, measuredBounds, snapThreshold)
+            : { position: clampDockablePanelPosition(next, { width: panel.offsetWidth, height: panel.offsetHeight }, measuredBounds), snappedEdges: [] };
+        if (placement.position.x === positionRef.current.x && placement.position.y === positionRef.current.y)
+            return;
+        if (position === undefined)
+            setUncontrolledPosition(placement.position);
+        positionRef.current = placement.position;
+        onPositionChange?.(placement.position, { reason, snappedEdges: placement.snappedEdges });
+    }, [bounds, onPositionChange, position, snapThreshold]);
+    useEffect(() => register(id), [id, register]);
+    useEffect(() => {
+        commitDrag(id, delta => changePosition({
+            x: positionRef.current.x + delta.x,
+            y: positionRef.current.y + delta.y,
+        }, 'drag', true));
+        return () => commitDrag(id, null);
+    }, [changePosition, commitDrag, id]);
+    useBrowserLayoutEffect(() => {
+        const panel = panelRef.current;
+        if (!panel || typeof ResizeObserver === 'undefined')
+            return undefined;
+        const update = () => {
+            const titleBarHeight = titleBarRef.current?.offsetHeight ?? 44;
+            const next = { width: panel.offsetWidth, height: panel.offsetHeight, titleBarHeight };
+            setPanelSize(current => current.width === next.width
+                && current.height === next.height
+                && current.titleBarHeight === next.titleBarHeight ? current : next);
+            changePosition(positionRef.current, 'viewport', false);
+        };
+        update();
+        const observer = new ResizeObserver(update);
+        observer.observe(panel);
+        return () => observer.disconnect();
+    }, [changePosition]);
+    useBrowserLayoutEffect(() => {
+        changePosition(positionRef.current, 'viewport', false);
+    }, [bounds.height, bounds.width, changePosition, resolvedPosition.x, resolvedPosition.y]);
+    function resetPosition() {
+        activate(id);
+        changePosition(defaultPosition, 'reset', false);
+        titleBarRef.current?.focus();
+    }
+    function changeCollapsed(next) {
+        if (collapsed === undefined)
+            setUncontrolledCollapsed(next);
+        onCollapsedChange?.(next);
+    }
+    function handleTitleKeyDown(event) {
+        if (!movable || event.defaultPrevented || isInteractiveTarget(event.target))
+            return;
+        if (event.key === 'Home') {
+            event.preventDefault();
+            resetPosition();
+            return;
+        }
+        const direction = {
+            ArrowLeft: { x: -1, y: 0 },
+            ArrowRight: { x: 1, y: 0 },
+            ArrowUp: { x: 0, y: -1 },
+            ArrowDown: { x: 0, y: 1 },
+        }[event.key];
+        if (!direction)
+            return;
+        event.preventDefault();
+        activate(id);
+        const step = Math.max(1, keyboardStep) * (event.shiftKey ? 4 : 1);
+        changePosition({
+            x: positionRef.current.x + direction.x * step,
+            y: positionRef.current.y + direction.y * step,
+        }, 'keyboard', false);
+    }
+    const nativeListeners = movable ? listeners : undefined;
+    const translatedPosition = {
+        x: resolvedPosition.x + (transform?.x ?? 0),
+        y: resolvedPosition.y + (transform?.y ?? 0),
+    };
+    const visualPosition = panelSize.width > 0 && panelSize.height > 0 && bounds.width > 0 && bounds.height > 0
+        ? clampDockablePanelPosition(translatedPosition, panelSize, { ...bounds, titleBarHeight: panelSize.titleBarHeight })
+        : translatedPosition;
+    const panelStyle = {
+        ...style,
+        '--inkra-dockable-panel-x': `${visualPosition.x}px`,
+        '--inkra-dockable-panel-y': `${visualPosition.y}px`,
+        zIndex: layer(id),
+    };
+    return _jsxs(PencilSurface, { ...props, as: "section", "aria-labelledby": titleId, className: classes('inkra-dockable-panel', className), "data-active": workspace.activeId === id || undefined, "data-collapsed": resolvedCollapsed || undefined, "data-dragging": isDragging || undefined, onFocusCapture: event => {
+            onFocusCapture?.(event);
+            if (!event.defaultPrevented)
+                activate(id);
+        }, onPointerDown: event => {
+            onPointerDown?.(event);
+            if (!event.defaultPrevented)
+                activate(id);
+        }, ref: setPanelRef, style: panelStyle, variant: "paper", children: [_jsxs("div", { className: "inkra-dockable-panel__header", children: [_jsx("div", { ...attributes, ...nativeListeners, "aria-describedby": movable ? instructionsId : undefined, "aria-label": labels.move, className: "inkra-dockable-panel__handle", "data-dockable-panel-handle": true, onKeyDown: handleTitleKeyDown, onMouseDown: event => {
+                            if (!isInteractiveTarget(event.target))
+                                nativeListeners?.onMouseDown?.(event);
+                        }, onTouchStart: event => {
+                            if (!isInteractiveTarget(event.target))
+                                nativeListeners?.onTouchStart?.(event);
+                        }, ref: node => {
+                            titleBarRef.current = node;
+                            setActivatorNodeRef(node);
+                        }, children: _jsx("span", { className: "inkra-dockable-panel__title", id: titleId, children: renderTitle(title) }) }), _jsxs("div", { className: "inkra-dockable-panel__actions", "data-dockable-panel-no-drag": true, children: [headerActions, movable && _jsx(Button, { "aria-label": labels.reset, "data-dockable-panel-reset": true, size: "icon-xs", variant: "ghost", onClick: resetPosition, children: _jsx(PencilIcon, { decorative: true, paths: resetPaths, size: 18, sourceSize: 24 }) }), collapsible && _jsx(Button, { "aria-expanded": !resolvedCollapsed, "aria-label": resolvedCollapsed ? labels.expand : labels.collapse, "data-dockable-panel-collapse": true, size: "icon-xs", variant: "ghost", onClick: () => changeCollapsed(!resolvedCollapsed), children: _jsx(PencilIcon, { decorative: true, paths: resolvedCollapsed ? expandPaths : collapsePaths, size: 18, sourceSize: 24 }) })] })] }), _jsx(PencilLine, { className: "inkra-dockable-panel__divider" }), !resolvedCollapsed && _jsx("div", { className: "inkra-dockable-panel__body", children: children }), movable && _jsx("span", { className: "inkra-visually-hidden", id: instructionsId, children: labels.keyboardInstructions })] });
+});

package/dist/dockable-panel/model.d.ts

@@ -0,0 +1,21 @@
+export interface DockablePanelPosition {
+    x: number;
+    y: number;
+}
+export interface DockablePanelSize {
+    width: number;
+    height: number;
+}
+export interface DockablePanelBounds extends DockablePanelSize {
+    padding: number;
+    titleBarHeight: number;
+    titleBarVisibility: number;
+}
+export type DockablePanelSnapEdge = 'top' | 'right' | 'bottom' | 'left';
+export interface DockablePanelPlacement {
+    position: DockablePanelPosition;
+    snappedEdges: DockablePanelSnapEdge[];
+}
+export declare function clampDockablePanelPosition(position: DockablePanelPosition, panel: DockablePanelSize, bounds: DockablePanelBounds): DockablePanelPosition;
+export declare function placeDockablePanel(position: DockablePanelPosition, panel: DockablePanelSize, bounds: DockablePanelBounds, snapThreshold?: number): DockablePanelPlacement;
+export declare function promoteDockablePanel(order: readonly string[], id: string): string[];

package/dist/dockable-panel/model.js

@@ -0,0 +1,61 @@
+function finite(value, fallback = 0) {
+    return Number.isFinite(value) ? value : fallback;
+}
+function range(minimum, maximum, value) {
+    return Math.min(Math.max(value, minimum), Math.max(minimum, maximum));
+}
+export function clampDockablePanelPosition(position, panel, bounds) {
+    const padding = Math.max(0, finite(bounds.padding));
+    const viewportWidth = Math.max(0, finite(bounds.width));
+    const viewportHeight = Math.max(0, finite(bounds.height));
+    const panelWidth = Math.max(0, finite(panel.width));
+    const panelHeight = Math.max(0, finite(panel.height));
+    const titleBarHeight = Math.max(1, finite(bounds.titleBarHeight, 44));
+    const titleBarVisibility = Math.max(1, finite(bounds.titleBarVisibility, 56));
+    const availableWidth = Math.max(0, viewportWidth - padding * 2);
+    const availableHeight = Math.max(0, viewportHeight - padding * 2);
+    const visibleTitleWidth = Math.min(panelWidth, titleBarVisibility);
+    const minimumX = panelWidth <= availableWidth
+        ? padding
+        : padding + visibleTitleWidth - panelWidth;
+    const maximumX = panelWidth <= availableWidth
+        ? viewportWidth - padding - panelWidth
+        : Math.max(minimumX, viewportWidth - padding - visibleTitleWidth);
+    const minimumY = padding;
+    const maximumY = panelHeight <= availableHeight
+        ? viewportHeight - padding - panelHeight
+        : Math.max(minimumY, viewportHeight - padding - Math.min(panelHeight, titleBarHeight));
+    return {
+        x: range(minimumX, maximumX, finite(position.x)),
+        y: range(minimumY, maximumY, finite(position.y)),
+    };
+}
+export function placeDockablePanel(position, panel, bounds, snapThreshold = 12) {
+    const clamped = clampDockablePanelPosition(position, panel, bounds);
+    const padding = Math.max(0, finite(bounds.padding));
+    const threshold = Math.max(0, finite(snapThreshold));
+    const maximumX = Math.max(padding, bounds.width - padding - panel.width);
+    const maximumY = Math.max(padding, bounds.height - padding - panel.height);
+    const snappedEdges = [];
+    let { x, y } = clamped;
+    if (Math.abs(x - padding) <= threshold) {
+        x = padding;
+        snappedEdges.push('left');
+    }
+    else if (panel.width <= bounds.width - padding * 2 && Math.abs(x - maximumX) <= threshold) {
+        x = maximumX;
+        snappedEdges.push('right');
+    }
+    if (Math.abs(y - padding) <= threshold) {
+        y = padding;
+        snappedEdges.push('top');
+    }
+    else if (panel.height <= bounds.height - padding * 2 && Math.abs(y - maximumY) <= threshold) {
+        y = maximumY;
+        snappedEdges.push('bottom');
+    }
+    return { position: { x, y }, snappedEdges };
+}
+export function promoteDockablePanel(order, id) {
+    return [...order.filter(value => value !== id), id];
+}

package/dist/drawer/index.d.ts

@@ -0,0 +1,63 @@
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
+import type { ButtonProps } from '../Button.js';
+export type DrawerDirection = 'top' | 'right' | 'bottom' | 'left';
+export type DrawerSize = 'sm' | 'md' | 'lg' | number | string;
+export type DrawerRootProps = DialogPrimitive.DialogProps;
+export declare function DrawerRoot(props: DrawerRootProps): import("react").JSX.Element;
+export type DrawerTriggerProps = DialogPrimitive.DialogTriggerProps;
+export declare const DrawerTrigger: import("react").ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+export type DrawerPortalProps = DialogPrimitive.DialogPortalProps;
+export declare function DrawerPortal({ children, ...props }: DrawerPortalProps): import("react").JSX.Element;
+export type DrawerBackdropProps = DialogPrimitive.DialogOverlayProps;
+export declare const DrawerBackdrop: import("react").ForwardRefExoticComponent<DialogPrimitive.DialogOverlayProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface DrawerContentProps extends DialogPrimitive.DialogContentProps {
+    direction?: DrawerDirection;
+    seed?: string | number;
+    size?: DrawerSize;
+}
+export declare const DrawerContent: import("react").ForwardRefExoticComponent<DrawerContentProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface DrawerTitleProps extends Omit<ComponentPropsWithoutRef<typeof DialogPrimitive.Title>, 'children'> {
+    children: string;
+    seed?: string | number;
+}
+export declare const DrawerTitle: import("react").ForwardRefExoticComponent<DrawerTitleProps & import("react").RefAttributes<HTMLHeadingElement>>;
+export interface DrawerDescriptionProps extends Omit<ComponentPropsWithoutRef<typeof DialogPrimitive.Description>, 'children'> {
+    children: string;
+    seed?: string | number;
+}
+export declare const DrawerDescription: import("react").ForwardRefExoticComponent<DrawerDescriptionProps & import("react").RefAttributes<HTMLParagraphElement>>;
+export type DrawerCloseProps = ComponentPropsWithoutRef<typeof DialogPrimitive.Close>;
+export declare const DrawerClose: import("react").ForwardRefExoticComponent<Omit<DialogPrimitive.DialogCloseProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+export interface DrawerCloseButtonProps extends Omit<ButtonProps, 'aria-label' | 'children' | 'loading' | 'size' | 'type' | 'variant'> {
+    label?: string;
+}
+export declare const DrawerCloseButton: import("react").ForwardRefExoticComponent<DrawerCloseButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export interface DrawerHeaderProps extends ComponentPropsWithoutRef<'div'> {
+    action?: ReactNode;
+    closeLabel?: string;
+    divided?: boolean;
+    showClose?: boolean;
+}
+export declare const DrawerHeader: import("react").ForwardRefExoticComponent<DrawerHeaderProps & import("react").RefAttributes<HTMLDivElement>>;
+export type DrawerBodyProps = ComponentPropsWithoutRef<'div'>;
+export declare const DrawerBody: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export interface DrawerFooterProps extends ComponentPropsWithoutRef<'div'> {
+    align?: 'start' | 'center' | 'end';
+    divided?: boolean;
+}
+export declare const DrawerFooter: import("react").ForwardRefExoticComponent<DrawerFooterProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const Drawer: Readonly<{
+    Root: typeof DrawerRoot;
+    Trigger: import("react").ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+    Portal: typeof DrawerPortal;
+    Backdrop: import("react").ForwardRefExoticComponent<DialogPrimitive.DialogOverlayProps & import("react").RefAttributes<HTMLDivElement>>;
+    Content: import("react").ForwardRefExoticComponent<DrawerContentProps & import("react").RefAttributes<HTMLDivElement>>;
+    Header: import("react").ForwardRefExoticComponent<DrawerHeaderProps & import("react").RefAttributes<HTMLDivElement>>;
+    Body: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Footer: import("react").ForwardRefExoticComponent<DrawerFooterProps & import("react").RefAttributes<HTMLDivElement>>;
+    Title: import("react").ForwardRefExoticComponent<DrawerTitleProps & import("react").RefAttributes<HTMLHeadingElement>>;
+    Description: import("react").ForwardRefExoticComponent<DrawerDescriptionProps & import("react").RefAttributes<HTMLParagraphElement>>;
+    Close: import("react").ForwardRefExoticComponent<Omit<DialogPrimitive.DialogCloseProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    CloseButton: import("react").ForwardRefExoticComponent<DrawerCloseButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+}>;

package/dist/drawer/index.js

@@ -0,0 +1,86 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { forwardRef, useId } from 'react';
+import { __iconData as closeIcon } from 'lucide-react/dist/esm/icons/x.mjs';
+import { Button } from '../Button.js';
+import { PencilIcon } from '../PencilIcon.js';
+import { PencilLine } from '../PencilLine.js';
+import { PencilSurface } from '../PencilSurface.js';
+import { PencilText } from '../PencilText.js';
+import { Tooltip } from '../tooltip/Tooltip.js';
+import { PortalThemeBridge, PortalThemeProvider, usePortalTriggerRef, } from '../overlay/themeBridge.js';
+const classes = (...values) => values.filter(Boolean).join(' ');
+const closePaths = closeIcon.node.map(([, attributes]) => ({ d: attributes.d }));
+function drawerSize(size) {
+    if (typeof size === 'number')
+        return `${size}px`;
+    if (size === 'sm')
+        return '20rem';
+    if (size === 'md')
+        return '28rem';
+    if (size === 'lg')
+        return '36rem';
+    return size;
+}
+export function DrawerRoot(props) {
+    return _jsx(PortalThemeProvider, { children: _jsx(DialogPrimitive.Root, { ...props }) });
+}
+export const DrawerTrigger = forwardRef(function DrawerTrigger(props, forwardedRef) {
+    return _jsx(DialogPrimitive.Trigger, { ...props, ref: usePortalTriggerRef(forwardedRef) });
+});
+export function DrawerPortal({ children, ...props }) {
+    return _jsx(DialogPrimitive.Portal, { ...props, children: _jsx(PortalThemeBridge, { children: children }) });
+}
+export const DrawerBackdrop = forwardRef(function DrawerBackdrop({ className, ...props }, ref) {
+    return _jsx(DialogPrimitive.Overlay, { ...props, className: classes('inkra-drawer__backdrop', className), ref: ref });
+});
+export const DrawerContent = forwardRef(function DrawerContent({ children, className, direction = 'right', seed, size = 'md', style, ...props }, ref) {
+    const id = useId();
+    const mergedStyle = { ...style, '--inkra-drawer-size': drawerSize(size) };
+    const edgeOrientation = direction === 'left' || direction === 'right' ? 'vertical' : 'horizontal';
+    return (_jsx(DialogPrimitive.Content, { ...props, className: classes('inkra-drawer__content', className), "data-direction": direction, ref: ref, style: mergedStyle, children: _jsxs(PencilSurface, { className: "inkra-drawer__surface", radius: 0, seed: seed ?? `inkra-drawer-${id}`, variant: "full", children: [_jsx(PencilLine, { className: "inkra-drawer__edge", orientation: edgeOrientation, seed: `drawer-edge-${id}` }), _jsx("div", { className: "inkra-drawer__layout", children: children })] }) }));
+});
+export const DrawerTitle = forwardRef(function DrawerTitle({ children, className, seed, ...props }, ref) {
+    const id = useId();
+    return _jsx(DialogPrimitive.Title, { ...props, className: classes('inkra-drawer__title', className), ref: ref, children: _jsx(PencilText, { seed: seed ?? `inkra-drawer-title-${id}`, children: children }) });
+});
+export const DrawerDescription = forwardRef(function DrawerDescription({ children, className, seed, ...props }, ref) {
+    const id = useId();
+    return _jsx(DialogPrimitive.Description, { ...props, className: classes('inkra-drawer__description', className), ref: ref, children: _jsx(PencilText, { seed: seed ?? `inkra-drawer-description-${id}`, children: children }) });
+});
+export const DrawerClose = forwardRef(function DrawerClose(props, ref) {
+    return _jsx(DialogPrimitive.Close, { ...props, ref: ref });
+});
+export const DrawerCloseButton = forwardRef(function DrawerCloseButton({ className, label = 'Close', onFocus, ...props }, ref) {
+    return _jsx(Tooltip.Provider, { children: _jsxs(Tooltip.Root, { children: [_jsx(Tooltip.Trigger, { asChild: true, children: _jsx(DialogPrimitive.Close, { asChild: true, children: _jsx(Button, { ...props, "aria-label": label, className: classes('inkra-drawer__close-button', className), ref: ref, size: "icon", type: "button", variant: "outline", onFocus: event => {
+                                onFocus?.(event);
+                                const dialog = event.currentTarget.closest('[role="dialog"]');
+                                if (dialog && (!event.relatedTarget || !dialog.contains(event.relatedTarget)))
+                                    event.preventDefault();
+                            }, children: _jsx(PencilIcon, { decorative: true, paths: closePaths, size: 30, sourceSize: 24 }) }) }) }), _jsx(Tooltip.Portal, { children: _jsx(Tooltip.Content, { align: "end", side: "bottom", children: label }) })] }) });
+});
+export const DrawerHeader = forwardRef(function DrawerHeader({ action, children, className, closeLabel = 'Close', divided = true, showClose = true, ...props }, ref) {
+    const id = useId();
+    return _jsxs("div", { ...props, className: classes('inkra-drawer__header', className), "data-divided": divided || undefined, ref: ref, children: [_jsx("div", { className: "inkra-drawer__heading", children: children }), (action || showClose) ? _jsxs("div", { className: "inkra-drawer__header-actions", children: [action, showClose ? _jsx(DrawerCloseButton, { label: closeLabel }) : null] }) : null, divided ? _jsx(PencilLine, { className: "inkra-drawer__divider", seed: `drawer-header-${id}` }) : null] });
+});
+export const DrawerBody = forwardRef(function DrawerBody({ className, ...props }, ref) {
+    return _jsx("div", { ...props, className: classes('inkra-drawer__body', className), ref: ref });
+});
+export const DrawerFooter = forwardRef(function DrawerFooter({ align = 'end', children, className, divided = true, ...props }, ref) {
+    const id = useId();
+    return _jsxs("div", { ...props, className: classes('inkra-drawer__footer', className), "data-align": align, "data-divided": divided || undefined, ref: ref, children: [divided ? _jsx(PencilLine, { className: "inkra-drawer__divider", seed: `drawer-footer-${id}` }) : null, children] });
+});
+export const Drawer = Object.freeze({
+    Root: DrawerRoot,
+    Trigger: DrawerTrigger,
+    Portal: DrawerPortal,
+    Backdrop: DrawerBackdrop,
+    Content: DrawerContent,
+    Header: DrawerHeader,
+    Body: DrawerBody,
+    Footer: DrawerFooter,
+    Title: DrawerTitle,
+    Description: DrawerDescription,
+    Close: DrawerClose,
+    CloseButton: DrawerCloseButton,
+});

package/dist/dropdown-menu/index.d.ts

@@ -0,0 +1,34 @@
+import * as Primitive from '@radix-ui/react-dropdown-menu';
+import { type ReactNode } from 'react';
+export type DropdownMenuProps = Primitive.DropdownMenuProps;
+declare function Root(props: DropdownMenuProps): import("react").JSX.Element;
+export type DropdownMenuTriggerProps = Primitive.DropdownMenuTriggerProps;
+export type DropdownMenuPortalProps = Primitive.DropdownMenuPortalProps;
+declare function Portal({ children, ...props }: DropdownMenuPortalProps): import("react").JSX.Element;
+export interface DropdownMenuContentProps extends Omit<Primitive.DropdownMenuContentProps, 'asChild'> {
+    seed?: string | number;
+}
+export interface DropdownMenuItemProps extends Omit<Primitive.DropdownMenuItemProps, 'asChild'> {
+    destructive?: boolean;
+    icon?: ReactNode;
+}
+export type DropdownMenuCheckboxItemProps = Omit<Primitive.DropdownMenuCheckboxItemProps, 'asChild'>;
+export type DropdownMenuRadioItemProps = Omit<Primitive.DropdownMenuRadioItemProps, 'asChild'>;
+export type DropdownMenuLabelProps = Omit<Primitive.DropdownMenuLabelProps, 'asChild'>;
+export type DropdownMenuSeparatorProps = Omit<Primitive.DropdownMenuSeparatorProps, 'asChild' | 'children'>;
+export type DropdownMenuGroupProps = Primitive.DropdownMenuGroupProps;
+export type DropdownMenuRadioGroupProps = Primitive.DropdownMenuRadioGroupProps;
+export declare const DropdownMenu: {
+    Root: typeof Root;
+    Trigger: import("react").ForwardRefExoticComponent<Primitive.DropdownMenuTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+    Portal: typeof Portal;
+    Content: import("react").ForwardRefExoticComponent<DropdownMenuContentProps & import("react").RefAttributes<HTMLDivElement>>;
+    Item: import("react").ForwardRefExoticComponent<DropdownMenuItemProps & import("react").RefAttributes<HTMLDivElement>>;
+    CheckboxItem: import("react").ForwardRefExoticComponent<DropdownMenuCheckboxItemProps & import("react").RefAttributes<HTMLDivElement>>;
+    RadioItem: import("react").ForwardRefExoticComponent<DropdownMenuRadioItemProps & import("react").RefAttributes<HTMLDivElement>>;
+    Label: import("react").ForwardRefExoticComponent<DropdownMenuLabelProps & import("react").RefAttributes<HTMLDivElement>>;
+    Separator: import("react").ForwardRefExoticComponent<DropdownMenuSeparatorProps & import("react").RefAttributes<HTMLDivElement>>;
+    Group: import("react").ForwardRefExoticComponent<Primitive.DropdownMenuGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+    RadioGroup: import("react").ForwardRefExoticComponent<Primitive.DropdownMenuRadioGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+};
+export {};

package/dist/dropdown-menu/index.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import * as Primitive from '@radix-ui/react-dropdown-menu';
+import { forwardRef, useId } from 'react';
+import { PencilSurface } from '../PencilSurface.js';
+import { PencilText } from '../PencilText.js';
+import { PencilIcon } from '../PencilIcon.js';
+import { PencilLine } from '../PencilLine.js';
+import { PortalThemeBridge, PortalThemeProvider, usePortalTriggerRef } from '../overlay/themeBridge.js';
+const classes = (...values) => values.filter(Boolean).join(' ');
+const copy = (children) => typeof children === 'string' ? _jsx(PencilText, { children: children }) : children;
+function Root(props) { return _jsx(PortalThemeProvider, { children: _jsx(Primitive.Root, { ...props }) }); }
+const Trigger = forwardRef(function Trigger(props, ref) {
+    return _jsx(Primitive.Trigger, { ...props, ref: usePortalTriggerRef(ref) });
+});
+function Portal({ children, ...props }) { return _jsx(Primitive.Portal, { ...props, children: _jsx(PortalThemeBridge, { children: children }) }); }
+const Content = forwardRef(function Content({ className, children, seed, sideOffset = 6, collisionPadding = 8, ...props }, ref) {
+    const id = useId();
+    return _jsx(Primitive.Content, { ...props, ref: ref, sideOffset: sideOffset, collisionPadding: collisionPadding, className: classes('inkra-menu', className), children: _jsx(PencilSurface, { variant: "paper", radius: 8, seed: seed ?? `menu-${id}`, className: "inkra-menu__paper", children: children }) });
+});
+function ItemBody({ children, icon }) {
+    return _jsxs(_Fragment, { children: [_jsx(PencilSurface, { as: "span", "aria-hidden": "true", variant: "selection", className: "inkra-menu__highlight" }), _jsx("span", { className: "inkra-menu__icon", "aria-hidden": "true", children: icon }), _jsx("span", { className: "inkra-menu__label", children: copy(children) })] });
+}
+const Item = forwardRef(function Item({ className, children, destructive = false, icon, ...props }, ref) {
+    return _jsx(Primitive.Item, { ...props, ref: ref, "data-destructive": destructive || undefined, className: classes('inkra-menu__item', className), children: _jsx(ItemBody, { icon: icon, children: children }) });
+});
+const CheckboxItem = forwardRef(function CheckboxItem({ className, children, checked, ...props }, ref) {
+    const indicator = _jsx(Primitive.ItemIndicator, { children: _jsx(PencilIcon, { size: 16, sourceSize: 24, paths: [{ d: checked === 'indeterminate' ? 'M5 12h14' : 'M5 12.5L10 17L19 7' }] }) });
+    return _jsx(Primitive.CheckboxItem, { ...props, checked: checked, ref: ref, className: classes('inkra-menu__item', className), children: _jsx(ItemBody, { icon: indicator, children: children }) });
+});
+const RadioItem = forwardRef(function RadioItem({ className, children, ...props }, ref) {
+    const indicator = _jsx(Primitive.ItemIndicator, { children: _jsx(PencilIcon, { size: 16, sourceSize: 24, paths: [{ d: 'M5 12.5L10 17L19 7' }] }) });
+    return _jsx(Primitive.RadioItem, { ...props, ref: ref, className: classes('inkra-menu__item', className), children: _jsx(ItemBody, { icon: indicator, children: children }) });
+});
+const Label = forwardRef(function Label({ className, children, ...props }, ref) {
+    return _jsx(Primitive.Label, { ...props, ref: ref, className: classes('inkra-menu__group-label', className), children: copy(children) });
+});
+const Separator = forwardRef(function Separator({ className, ...props }, ref) {
+    return _jsx(Primitive.Separator, { ...props, ref: ref, className: classes('inkra-menu__separator', className), children: _jsx(PencilLine, {}) });
+});
+export const DropdownMenu = { Root, Trigger, Portal, Content, Item, CheckboxItem, RadioItem, Label, Separator, Group: Primitive.Group, RadioGroup: Primitive.RadioGroup };

package/dist/editable/index.d.ts

@@ -0,0 +1,53 @@
+import type { HTMLAttributes, KeyboardEvent, ReactNode } from 'react';
+import type { InputProps } from '../form/Input.js';
+import type { TextareaProps } from '../form/Textarea.js';
+export type EditableBlurBehavior = 'ignore' | 'save' | 'cancel';
+export type EditableSaveResult = boolean | string | void | null | undefined;
+export type EditableSaveHandler = (value: string, previousValue: string) => EditableSaveResult | Promise<EditableSaveResult>;
+export type EditableValidateHandler = (value: string, previousValue: string) => EditableSaveResult | Promise<EditableSaveResult>;
+export interface EditableEditorProps {
+    value: string;
+    onValueChange: (value: string) => void;
+    onKeyDown: (event: KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    onBlur: () => void;
+    disabled?: boolean;
+    invalid?: boolean;
+    error?: string;
+    autoFocus?: boolean;
+    'aria-label'?: string;
+}
+export type EditableEditor = ReactNode | ((props: EditableEditorProps) => ReactNode);
+export interface EditableProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'onChange'> {
+    value?: string;
+    defaultValue?: string;
+    editing?: boolean;
+    defaultEditing?: boolean;
+    onValueChange?: (value: string) => void;
+    onEditingChange?: (editing: boolean) => void;
+    onSave?: EditableSaveHandler;
+    validate?: EditableValidateHandler;
+    onCancel?: (value: string) => void;
+    display?: ReactNode | ((value: string) => ReactNode);
+    editor?: EditableEditor;
+    multiline?: boolean;
+    inputProps?: Omit<InputProps, 'value' | 'defaultValue' | 'onValueChange' | 'onChange'>;
+    textareaProps?: Omit<TextareaProps, 'value' | 'defaultValue' | 'onChange'>;
+    placeholder?: string;
+    startEditingLabel?: string;
+    saveLabel?: string;
+    cancelLabel?: string;
+    blurBehavior?: EditableBlurBehavior;
+    submitOnEnter?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+    invalid?: boolean;
+    seed?: string | number;
+}
+export interface EditableHandle {
+    focus: () => void;
+    startEditing: () => void;
+    save: () => void;
+    cancel: () => void;
+}
+export declare const Editable: import("react").ForwardRefExoticComponent<EditableProps & import("react").RefAttributes<EditableHandle>>;
+export type { InputProps, TextareaProps };