@inkra/react 0.2.0 → 0.4.3

package/dist/display/ProgressRing.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useRef } from 'react';
-import { BoundedCache, PENCIL_RENDERER_VERSION, canvasByteCost, canvasIsUsable, effectiveDpr } from '../internal/cache.js';
+import { BoundedCache, PENCIL_RENDERER_VERSION, boundedCanvasSize, canvasByteCost, canvasIsUsable, effectiveDpr } from '../internal/cache.js';
 import { observeCanvasRecovery } from '../internal/recovery.js';
 import { seedToNumber } from '../internal/random.js';
 import { maxStrokeRoughness, pencilRenderDefaults, readRenderToken } from '../internal/renderTokens.js';
@@ -84,6 +84,7 @@ export function ProgressRing({ diameter, thickness, percent, seed }) {
                 const weight = readRenderToken(style, '--inkra-stroke-width', pencilRenderDefaults.strokeWidth, 0.3, 3);
                 const roughness = readRenderToken(style, '--inkra-stroke-amplitude', pencilRenderDefaults.strokeRoughness, 0, maxStrokeRoughness);
                 const dpr = effectiveDpr(2);
+                const size = boundedCanvasSize(width, width, dpr);
                 const key = JSON.stringify([PENCIL_RENDERER_VERSION, diameter, thickness, width, dpr, style.color, weight, roughness, seed]);
                 if (key === lastPaint && canvasIsUsable(canvas))
                     return;
@@ -94,7 +95,9 @@ export function ProgressRing({ diameter, thickness, percent, seed }) {
                 }
                 if (!image) {
                     image = document.createElement('canvas');
-                    image.width = image.height = Math.ceil(width * dpr);
+                    image.width = size.width;
+                    image.height = size.height;
+                    image.addEventListener('contextlost', () => ringCache.delete(key), { once: true });
                     const context = image.getContext('2d');
                     if (!context)
                         throw new Error('Canvas unavailable');
@@ -116,6 +119,7 @@ export function ProgressRing({ diameter, thickness, percent, seed }) {
                 lastPaint = key;
             }
             catch {
+                canvas.width = canvas.height = 0;
                 delete canvas.dataset.ready;
                 lastPaint = '';
             }
@@ -131,7 +135,7 @@ export function ProgressRing({ diameter, thickness, percent, seed }) {
         const scheme = matchMedia('(prefers-color-scheme: dark)');
         scheme.addEventListener('change', paint);
         window.addEventListener('resize', paint);
-        const stopRecovery = observeCanvasRecovery(paint);
+        const stopRecovery = observeCanvasRecovery(() => { lastPaint = ''; paint(); });
         paint();
         return () => {
             observer.disconnect();

package/dist/display/index.d.ts

@@ -1,4 +1,4 @@
-import type { HTMLAttributes, ReactNode } from 'react';
+import type { CSSProperties, HTMLAttributes, ReactNode } from 'react';
 import { type ProgressPartialSegment, type ProgressThreshold } from '../segmented-progress/SegmentedProgress.js';
 export type { ProgressPartialSegment, ProgressThreshold } from '../segmented-progress/SegmentedProgress.js';
 export type BadgeVariant = 'neutral' | 'accent' | 'success' | 'warning' | 'danger' | 'info';
@@ -22,6 +22,9 @@ export declare const Separator: import("react").ForwardRefExoticComponent<Separa
 export interface SkeletonProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
     seed?: string | number;
     radius?: number;
+    width?: CSSProperties['width'];
+    height?: CSSProperties['height'];
+    animation?: 'none' | 'pulse';
 }
 export declare const Skeleton: import("react").ForwardRefExoticComponent<SkeletonProps & import("react").RefAttributes<HTMLDivElement>>;
 export interface ProgressRenderState {

package/dist/display/index.js

@@ -30,8 +30,9 @@ export const Separator = forwardRef(function Separator({ className, decorative =
         : { 'aria-orientation': orientation, role: 'separator' };
     return (_jsx("div", { ...props, ...semanticProps, className: ['inkra-separator', className].filter(Boolean).join(' '), "data-orientation": orientation, ref: ref, children: _jsx(PencilLine, { className: "inkra-separator__line", orientation: orientation, seed: seed ?? `inkra-separator-${orientation}`, weight: Number.isFinite(weight) ? Math.max(0.3, Math.min(2, weight)) : 0.9 }) }));
 });
-export const Skeleton = forwardRef(function Skeleton({ className, seed = 'inkra-skeleton', radius, ...props }, ref) {
-    return (_jsx(PencilSurface, { ...props, "aria-hidden": "true", as: "div", className: ['inkra-skeleton', className].filter(Boolean).join(' '), ref: ref, seed: seed, radius: radius, variant: "quiet" }));
+export const Skeleton = forwardRef(function Skeleton({ className, seed = 'inkra-skeleton', radius = 7, width, height, animation = 'none', style, ...props }, ref) {
+    const resolvedRadius = Number.isFinite(radius) ? Math.max(0, Math.min(radius, 8)) : 7;
+    return (_jsx(PencilSurface, { ...props, "aria-hidden": "true", as: "div", className: ['inkra-skeleton', className].filter(Boolean).join(' '), "data-animation": animation, style: { width, height, borderRadius: resolvedRadius, ...style }, ref: ref, seed: seed, radius: resolvedRadius, variant: "selection" }));
 });
 function normalizeMax(max) {
     return typeof max === 'number' && Number.isFinite(max) && max > 0 ? max : 100;

package/dist/dockable-panel/index.js

@@ -43,7 +43,7 @@ export const DockablePanelWorkspace = forwardRef(function DockablePanelWorkspace
         return () => observer.disconnect();
     }, []);
     const activate = useCallback((id) => {
-        setOrder(current => promoteDockablePanel(current, id));
+        setOrder(current => current[current.length - 1] === id ? current : promoteDockablePanel(current, id));
         if (activeId === undefined)
             setUncontrolledActiveId(id);
         if (resolvedActiveId !== id)
@@ -51,7 +51,7 @@ export const DockablePanelWorkspace = forwardRef(function DockablePanelWorkspace
     }, [activeId, onActiveChange, resolvedActiveId]);
     useEffect(() => {
         if (activeId != null)
-            setOrder(current => promoteDockablePanel(current, activeId));
+            setOrder(current => current[current.length - 1] === activeId ? current : promoteDockablePanel(current, activeId));
     }, [activeId]);
     const register = useCallback((id) => {
         setOrder(current => current.includes(id) ? current : [...current, id]);
@@ -72,18 +72,18 @@ export const DockablePanelWorkspace = forwardRef(function DockablePanelWorkspace
         titleBarVisibility,
         width: size.width,
     }), [boundaryPadding, size.height, size.width, titleBarVisibility]);
+    const layers = useMemo(() => new Map(order.map((id, index) => [id, index])), [order]);
     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));
+            return baseZIndex + (resolvedActiveId === id ? order.length : (layers.get(id) ?? 0));
         },
         register,
         snapThreshold,
-    }), [activate, baseZIndex, bounds, commitDrag, order, register, resolvedActiveId, snapThreshold]);
+    }), [activate, baseZIndex, bounds, commitDrag, layers, order.length, register, resolvedActiveId, snapThreshold]);
     function handleDragEnd(event) {
         const id = String(event.active.id);
         dragCallbacks.current.get(id)?.({ x: event.delta.x, y: event.delta.y });

package/dist/drawer/index.d.ts

@@ -8,7 +8,7 @@ export declare function DrawerRoot(props: DrawerRootProps): import("react").JSX.
 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 declare function DrawerPortal({ children, ...props }: DrawerPortalProps): ReactNode;
 export type DrawerBackdropProps = DialogPrimitive.DialogOverlayProps;
 export declare const DrawerBackdrop: import("react").ForwardRefExoticComponent<DialogPrimitive.DialogOverlayProps & import("react").RefAttributes<HTMLDivElement>>;
 export interface DrawerContentProps extends DialogPrimitive.DialogContentProps {

package/dist/drawer/index.js

@@ -8,7 +8,7 @@ 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';
+import { mapPortalChildren, PortalThemeProvider, usePortalThemeProps, usePortalTriggerRef, } from '../overlay/themeBridge.js';
 const classes = (...values) => values.filter(Boolean).join(' ');
 const closePaths = closeIcon.node.map(([, attributes]) => ({ d: attributes.d }));
 function drawerSize(size) {
@@ -29,16 +29,18 @@ export const DrawerTrigger = forwardRef(function DrawerTrigger(props, forwardedR
     return _jsx(DialogPrimitive.Trigger, { ...props, ref: usePortalTriggerRef(forwardedRef) });
 });
 export function DrawerPortal({ children, ...props }) {
-    return _jsx(DialogPrimitive.Portal, { ...props, children: _jsx(PortalThemeBridge, { children: children }) });
+    return mapPortalChildren(children, child => _jsx(DialogPrimitive.Portal, { ...props, children: child }));
 }
 export const DrawerBackdrop = forwardRef(function DrawerBackdrop({ className, ...props }, ref) {
+    props = usePortalThemeProps(props);
     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 themedProps = usePortalThemeProps({ ...props, style });
+    const mergedStyle = { ...themedProps.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 })] }) }));
+    return (_jsxs(DialogPrimitive.Content, { ...themedProps, className: classes('inkra-drawer__content', className), "data-direction": direction, ref: ref, style: mergedStyle, children: [_jsx(PencilSurface, { "aria-hidden": "true", className: "inkra-drawer__focus-ring", radius: 0, seed: `drawer-focus-${id}`, variant: "outline" }), _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();
@@ -61,7 +63,8 @@ export const DrawerCloseButton = forwardRef(function DrawerCloseButton({ classNa
 });
 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] });
+    const hasActions = Boolean(action || showClose);
+    return _jsxs("div", { ...props, className: classes('inkra-drawer__header', className), "data-actions": hasActions || undefined, "data-custom-action": action ? true : undefined, "data-divided": divided || undefined, ref: ref, children: [_jsx("div", { className: "inkra-drawer__heading", children: children }), hasActions ? _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 });
@@ -70,7 +73,7 @@ export const DrawerFooter = forwardRef(function DrawerFooter({ align = 'end', ch
     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({
+export const Drawer = /* @__PURE__ */ Object.freeze({
     Root: DrawerRoot,
     Trigger: DrawerTrigger,
     Portal: DrawerPortal,

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

@@ -4,7 +4,7 @@ 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;
+declare function Portal({ children, ...props }: DropdownMenuPortalProps): ReactNode;
 export interface DropdownMenuContentProps extends Omit<Primitive.DropdownMenuContentProps, 'asChild'> {
     seed?: string | number;
 }

package/dist/dropdown-menu/index.js

@@ -5,16 +5,17 @@ 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';
+import { mapPortalChildren, PortalThemeProvider, usePortalThemeProps, 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 }) }); }
+function Portal({ children, ...props }) { return mapPortalChildren(children, child => _jsx(Primitive.Portal, { ...props, children: child })); }
 const Content = forwardRef(function Content({ className, children, seed, sideOffset = 6, collisionPadding = 8, ...props }, ref) {
     const id = useId();
+    props = usePortalThemeProps(props);
     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 }) {

package/dist/editable/index.d.ts

@@ -1,7 +1,23 @@
-import type { HTMLAttributes, KeyboardEvent, ReactNode } from 'react';
+import type { FocusEvent, HTMLAttributes, KeyboardEvent, ReactNode } from 'react';
+import type { SearchableSelectOption } from '../select/index.js';
 import type { InputProps } from '../form/Input.js';
 import type { TextareaProps } from '../form/Textarea.js';
 export type EditableBlurBehavior = 'ignore' | 'save' | 'cancel';
+export type EditableEditorType = 'input' | 'textarea' | 'select';
+export interface EditableSelectProps {
+    items: readonly SearchableSelectOption[];
+    mode?: 'dropdown' | 'searchable' | 'stepper';
+    size?: 'sm' | 'md' | 'lg';
+    dir?: 'ltr' | 'rtl';
+    searchPlaceholder?: string;
+    emptyContent?: ReactNode;
+    clearable?: boolean;
+    clearLabel?: string;
+    openLabel?: string;
+    previousLabel?: string;
+    nextLabel?: string;
+    loop?: boolean;
+}
 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>;
@@ -9,12 +25,16 @@ export interface EditableEditorProps {
     value: string;
     onValueChange: (value: string) => void;
     onKeyDown: (event: KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
-    onBlur: () => void;
+    onBlur: (event: FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
     disabled?: boolean;
+    readOnly?: boolean;
     invalid?: boolean;
     error?: string;
     autoFocus?: boolean;
     'aria-label'?: string;
+    'aria-describedby'?: string;
+    'aria-errormessage'?: string;
+    'aria-invalid'?: boolean;
 }
 export type EditableEditor = ReactNode | ((props: EditableEditorProps) => ReactNode);
 export interface EditableProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'onChange'> {
@@ -29,6 +49,8 @@ export interface EditableProps extends Omit<HTMLAttributes<HTMLDivElement>, 'chi
     onCancel?: (value: string) => void;
     display?: ReactNode | ((value: string) => ReactNode);
     editor?: EditableEditor;
+    editorType?: EditableEditorType;
+    selectProps?: EditableSelectProps;
     multiline?: boolean;
     inputProps?: Omit<InputProps, 'value' | 'defaultValue' | 'onValueChange' | 'onChange'>;
     textareaProps?: Omit<TextareaProps, 'value' | 'defaultValue' | 'onChange'>;

package/dist/editable/index.js

@@ -1,10 +1,20 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { forwardRef, useCallback, useEffect, useId, useImperativeHandle, useRef, useState, } from 'react';
 import { Button } from '../Button.js';
+import { PencilIcon } from '../PencilIcon.js';
+import { PencilSurface } from '../PencilSurface.js';
+import { PencilText } from '../PencilText.js';
 import { Input } from '../form/Input.js';
 import { Textarea } from '../form/Textarea.js';
+import { Tooltip } from '../tooltip/Tooltip.js';
+import { Select } from '../select/index.js';
 const classes = (...values) => values.filter(Boolean).join(' ');
 const interactiveSelector = 'button, a, input, textarea, select, option, [contenteditable="true"], [data-editable-ignore]';
+const checkIcon = [{ d: 'm20 6-11 11-5-5' }];
+const cancelIcon = [{ d: 'M18 6 6 18' }, { d: 'm6 6 12 12' }];
+function mergeIds(...ids) {
+    return ids.filter(Boolean).join(' ') || undefined;
+}
 function resultMessage(result, fallback) {
     if (typeof result === 'string')
         return result || fallback;
@@ -15,11 +25,15 @@ function resultMessage(result, fallback) {
 function isComposing(event) {
     return event.nativeEvent.isComposing || event.nativeEvent.keyCode === 229;
 }
-export const Editable = forwardRef(function Editable({ 'aria-label': ariaLabel, blurBehavior = 'ignore', className, defaultEditing = false, defaultValue = '', disabled = false, display, editor, editing, id, inputProps, invalid = false, multiline = false, onCancel, onEditingChange, onSave, onValueChange, placeholder = 'Edit value', readOnly = false, saveLabel = 'Save', cancelLabel = 'Cancel', startEditingLabel = 'Edit value', seed, submitOnEnter = !multiline, textareaProps, validate, value, ...props }, forwardedRef) {
+export const Editable = forwardRef(function Editable({ 'aria-label': ariaLabel, blurBehavior = 'ignore', className, defaultEditing = false, defaultValue = '', disabled = false, display, editor, editorType, editing, id, inputProps, invalid = false, multiline = false, onBlur: onRootBlur, onCancel, onEditingChange, onSave, onValueChange, placeholder = 'Edit value', readOnly = false, saveLabel = 'Save', cancelLabel = 'Cancel', startEditingLabel = 'Edit value', seed, selectProps, submitOnEnter = true, textareaProps, validate, value, ...props }, forwardedRef) {
     const generatedId = useId();
     const rootRef = useRef(null);
     const editorRef = useRef(null);
-    const displayRef = useRef(null);
+    const editButtonRef = useRef(null);
+    const blurFrameRef = useRef(undefined);
+    const savingRef = useRef(false);
+    const popupOpenRef = useRef(false);
+    const popupFrameRef = useRef(undefined);
     const controlledValue = value !== undefined;
     const controlledEditing = editing !== undefined;
     const [localValue, setLocalValue] = useState(String(value ?? defaultValue));
@@ -31,6 +45,11 @@ export const Editable = forwardRef(function Editable({ 'aria-label': ariaLabel,
     const isEditing = controlledEditing ? Boolean(editing) : localEditing;
     const resolvedSeed = seed ?? `inkra-editable-${id ?? generatedId}`;
     const resolvedId = id ?? `inkra-editable-${generatedId}`;
+    const resolvedEditorType = editorType ?? (multiline ? 'textarea' : 'input');
+    const isMultiline = resolvedEditorType === 'textarea';
+    const resolvedSize = resolvedEditorType === 'select' ? (selectProps?.size ?? 'md') : isMultiline ? (textareaProps?.size ?? 'md') : (inputProps?.size ?? 'md');
+    const actionSize = resolvedSize === 'sm' ? 'icon-sm' : resolvedSize === 'lg' ? 'icon-lg' : 'icon';
+    const actionIconSize = resolvedSize === 'sm' ? 18 : resolvedSize === 'lg' ? 24 : 20;
     useEffect(() => {
         if (controlledValue) {
             const next = String(value ?? '');
@@ -43,9 +62,18 @@ export const Editable = forwardRef(function Editable({ 'aria-label': ariaLabel,
     useEffect(() => {
         if (!isEditing || disabled || readOnly)
             return;
-        const frame = requestAnimationFrame(() => editorRef.current?.focus({ preventScroll: true }));
+        const frame = requestAnimationFrame(() => {
+            const control = editorRef.current ?? rootRef.current?.querySelector('[data-editable-editor] input:not([type="hidden"]), [data-editable-editor] textarea, [data-editable-editor] [role="combobox"], [data-editable-editor] [role="spinbutton"]');
+            control?.focus({ preventScroll: true });
+        });
         return () => cancelAnimationFrame(frame);
     }, [disabled, isEditing, readOnly]);
+    useEffect(() => () => {
+        if (blurFrameRef.current !== undefined)
+            cancelAnimationFrame(blurFrameRef.current);
+        if (popupFrameRef.current !== undefined)
+            cancelAnimationFrame(popupFrameRef.current);
+    }, []);
     const setEditing = useCallback((next) => {
         if (!controlledEditing)
             setLocalEditing(next);
@@ -57,31 +85,41 @@ export const Editable = forwardRef(function Editable({ 'aria-label': ariaLabel,
         onValueChange?.(next);
     }, [controlledValue, onValueChange]);
     const startEditing = useCallback(() => {
-        if (disabled || readOnly || saving || isEditing)
+        if (disabled || readOnly || savingRef.current || isEditing)
             return;
         setError(undefined);
         previousValueRef.current = currentValue;
         setEditing(true);
-    }, [currentValue, disabled, isEditing, readOnly, saving, setEditing]);
+    }, [currentValue, disabled, isEditing, readOnly, setEditing]);
     const finish = useCallback((restoreFocus = true) => {
+        popupOpenRef.current = false;
         setEditing(false);
         if (restoreFocus)
-            requestAnimationFrame(() => displayRef.current?.focus({ preventScroll: true }));
+            requestAnimationFrame(() => editButtonRef.current?.focus({ preventScroll: true }));
     }, [setEditing]);
-    const cancel = useCallback(() => {
-        if (saving)
+    const cancel = useCallback((restoreFocus = true) => {
+        if (savingRef.current)
             return;
+        if (blurFrameRef.current !== undefined) {
+            cancelAnimationFrame(blurFrameRef.current);
+            blurFrameRef.current = undefined;
+        }
         const previous = previousValueRef.current;
         updateValue(previous);
         setError(undefined);
         onCancel?.(previous);
-        finish();
-    }, [finish, onCancel, saving, updateValue]);
-    const save = useCallback(async () => {
-        if (saving || disabled || readOnly)
+        finish(restoreFocus);
+    }, [finish, onCancel, updateValue]);
+    const save = useCallback(async (restoreFocus = true) => {
+        if (savingRef.current || disabled || readOnly)
             return;
+        if (blurFrameRef.current !== undefined) {
+            cancelAnimationFrame(blurFrameRef.current);
+            blurFrameRef.current = undefined;
+        }
         const next = currentValue;
         const previous = previousValueRef.current;
+        savingRef.current = true;
         setSaving(true);
         setError(undefined);
         try {
@@ -99,64 +137,131 @@ export const Editable = forwardRef(function Editable({ 'aria-label': ariaLabel,
             }
             previousValueRef.current = next;
             updateValue(next);
-            finish();
+            finish(restoreFocus);
         }
         catch (caught) {
             setError(caught instanceof Error ? caught.message : 'Could not save value');
         }
         finally {
+            savingRef.current = false;
             setSaving(false);
         }
-    }, [currentValue, disabled, finish, onSave, readOnly, saving, updateValue, validate]);
-    useImperativeHandle(forwardedRef, () => ({ focus: () => displayRef.current?.focus(), startEditing, save, cancel }), [cancel, save, startEditing]);
+    }, [currentValue, disabled, finish, onSave, readOnly, updateValue, validate]);
+    useImperativeHandle(forwardedRef, () => ({ focus: () => editButtonRef.current?.focus(), startEditing, save, cancel }), [cancel, save, startEditing]);
     const handleDisplayClick = (event) => {
         if (event.target.closest(interactiveSelector))
             return;
         startEditing();
     };
-    const handleKeyDown = (event) => {
-        if (event.key === 'Enter' || event.key === ' ') {
-            event.preventDefault();
-            startEditing();
-        }
-    };
     const handleEditorKeyDown = (event) => {
-        if (isComposing(event))
+        if (event.defaultPrevented || isComposing(event))
             return;
         if (event.key === 'Escape') {
             event.preventDefault();
             cancel();
             return;
         }
-        if (event.key === 'Enter' && submitOnEnter && (!multiline || event.ctrlKey || event.metaKey)) {
+        if (event.key === 'Enter' && submitOnEnter && (!isMultiline || event.ctrlKey || event.metaKey)) {
             event.preventDefault();
             void save();
         }
     };
-    const handleEditorBlur = () => {
-        if (saving || blurBehavior === 'ignore')
+    const handleEditorBlur = (event) => {
+        if (event.defaultPrevented || popupOpenRef.current || rootRef.current?.contains(event.relatedTarget))
             return;
-        if (blurBehavior === 'cancel')
-            cancel();
-        else
-            void save();
+        if (blurFrameRef.current !== undefined)
+            cancelAnimationFrame(blurFrameRef.current);
+        blurFrameRef.current = requestAnimationFrame(() => {
+            blurFrameRef.current = undefined;
+            if (popupOpenRef.current || rootRef.current?.contains(document.activeElement) || savingRef.current || blurBehavior === 'ignore')
+                return;
+            if (blurBehavior === 'cancel')
+                cancel(false);
+            else
+                void save(false);
+        });
     };
-    const displayContent = typeof display === 'function'
-        ? display(currentValue)
-        : (display ?? currentValue) || placeholder;
+    const displayValue = resolvedEditorType === 'select' ? (selectProps?.items.find(item => item.value === currentValue)?.label ?? currentValue) : currentValue;
+    const displayContent = display == null
+        ? _jsx(PencilText, { seed: `${resolvedSeed}-display-text`, children: displayValue || placeholder })
+        : typeof display === 'function' ? display(currentValue) : display;
     const editorProps = {
         value: currentValue,
         onValueChange: updateValue,
         onKeyDown: handleEditorKeyDown,
         onBlur: handleEditorBlur,
         disabled: disabled || saving,
+        readOnly,
         invalid: invalid || Boolean(error),
         error,
         autoFocus: true,
         'aria-label': ariaLabel,
+        'aria-describedby': error ? `${resolvedId}-error` : undefined,
+        'aria-errormessage': error ? `${resolvedId}-error` : undefined,
+        'aria-invalid': invalid || Boolean(error) || undefined,
+    };
+    const inputDescription = mergeIds(inputProps?.['aria-describedby'], error ? `${resolvedId}-error` : undefined);
+    const textareaDescription = mergeIds(textareaProps?.['aria-describedby'], error ? `${resolvedId}-error` : undefined);
+    const actions = _jsx(Tooltip.Provider, { children: _jsxs("span", { "aria-label": `${saveLabel}, ${cancelLabel}`, className: "inkra-editable__actions", role: "group", children: [_jsxs(Tooltip.Root, { children: [_jsx(Tooltip.Trigger, { asChild: true, children: _jsx(Button, { "aria-label": saveLabel, className: "inkra-editable__action", disabled: disabled || readOnly, loading: saving, onClick: () => void save(), size: actionSize, title: saveLabel, type: "button", variant: "ghost", children: _jsx(PencilIcon, { decorative: true, paths: checkIcon, seed: `${resolvedSeed}-save-icon`, size: actionIconSize, sourceSize: 24 }) }) }), _jsx(Tooltip.Portal, { children: _jsx(Tooltip.Content, { children: saveLabel }) })] }), _jsxs(Tooltip.Root, { children: [_jsx(Tooltip.Trigger, { asChild: true, children: _jsx(Button, { "aria-label": cancelLabel, className: "inkra-editable__action", disabled: disabled || saving, onClick: () => cancel(), size: actionSize, title: cancelLabel, type: "button", variant: "ghost", children: _jsx(PencilIcon, { decorative: true, paths: cancelIcon, seed: `${resolvedSeed}-cancel-icon`, size: actionIconSize, sourceSize: 24 }) }) }), _jsx(Tooltip.Portal, { children: _jsx(Tooltip.Content, { children: cancelLabel }) })] })] }) });
+    const changePopupOpen = (open) => {
+        if (popupFrameRef.current !== undefined)
+            cancelAnimationFrame(popupFrameRef.current);
+        if (open)
+            popupOpenRef.current = true;
+        else
+            popupFrameRef.current = requestAnimationFrame(() => {
+                popupOpenRef.current = false;
+                if (!rootRef.current || rootRef.current.contains(document.activeElement) || document.activeElement === document.body || savingRef.current)
+                    return;
+                if (blurBehavior === 'cancel')
+                    cancel(false);
+                else if (blurBehavior === 'save')
+                    void save(false);
+            });
     };
-    const defaultEditor = multiline
-        ? _jsx(Textarea, { ...textareaProps, "aria-label": ariaLabel, autoFocus: true, ref: editorRef, value: currentValue, onChange: event => updateValue(event.currentTarget.value), onKeyDown: handleEditorKeyDown, onBlur: handleEditorBlur, disabled: disabled || saving, invalid: invalid || Boolean(error), placeholder: placeholder, seed: `${resolvedSeed}-textarea` })
-        : _jsx(Input, { ...inputProps, "aria-label": ariaLabel, autoFocus: true, ref: editorRef, value: currentValue, onValueChange: updateValue, onKeyDown: handleEditorKeyDown, onBlur: handleEditorBlur, disabled: disabled || saving, invalid: invalid || Boolean(error), placeholder: placeholder, seed: `${resolvedSeed}-input` });
-    return _jsx("div", { ...props, className: classes('inkra-editable', className), "data-editing": isEditing || undefined, "data-saving": saving || undefined, "data-invalid": Boolean(error) || invalid || undefined, "data-multiline": multiline || undefined, ref: rootRef, children: isEditing ? _jsxs("div", { className: "inkra-editable__editor", "data-editable-editor": "true", children: [editor == null ? defaultEditor : typeof editor === 'function' ? editor(editorProps) : editor, _jsxs("div", { className: "inkra-editable__actions", children: [_jsx(Button, { type: "button", size: "sm", variant: "primary", loading: saving, onClick: () => void save(), "aria-label": saveLabel, children: saveLabel }), _jsx(Button, { type: "button", size: "sm", variant: "ghost", disabled: saving, onClick: cancel, "aria-label": cancelLabel, children: cancelLabel })] }), error ? _jsx("div", { className: "inkra-editable__error", role: "alert", id: `${resolvedId}-error`, children: error }) : null] }) : _jsx("div", { "aria-label": ariaLabel ?? startEditingLabel, className: "inkra-editable__display", "data-editable-display": "true", onClick: handleDisplayClick, onKeyDown: handleKeyDown, ref: displayRef, role: "button", tabIndex: disabled || readOnly ? -1 : 0, "aria-disabled": disabled || readOnly || undefined, children: displayContent }) });
+    const items = selectProps?.items ?? [];
+    const selectState = {
+        value: currentValue,
+        onValueChange: (next) => updateValue(next ?? ''),
+        disabled: disabled || saving,
+        readOnly,
+        size: resolvedSize,
+        dir: selectProps?.dir,
+        placeholder,
+        'aria-label': ariaLabel ?? startEditingLabel,
+        'aria-describedby': error ? `${resolvedId}-error` : undefined,
+        'aria-errormessage': error ? `${resolvedId}-error` : undefined,
+        invalid: invalid || Boolean(error),
+    };
+    const selectEditor = _jsxs("div", { className: "inkra-editable__select-row", onKeyDown: event => {
+            if (event.defaultPrevented || popupOpenRef.current || event.target !== event.currentTarget.ownerDocument.activeElement)
+                return;
+            if (event.key === 'Escape' && !event.nativeEvent.isComposing) {
+                event.preventDefault();
+                cancel();
+            }
+        }, children: [selectProps?.mode === 'searchable' ? _jsx(Select.Searchable, { ...selectState, items: items, searchPlaceholder: selectProps.searchPlaceholder, emptyContent: selectProps.emptyContent, clearable: selectProps.clearable ?? false, clearLabel: selectProps.clearLabel, openLabel: selectProps.openLabel, onOpenChange: changePopupOpen })
+                : selectProps?.mode === 'stepper' ? _jsx(Select.Stepper, { ...selectState, items: items, loop: selectProps.loop, previousLabel: selectProps.previousLabel, nextLabel: selectProps.nextLabel })
+                    : _jsxs(Select.Root, { value: currentValue, onValueChange: updateValue, disabled: disabled || saving, readOnly: readOnly, dir: selectProps?.dir, onOpenChange: changePopupOpen, children: [_jsx(Select.Trigger, { "aria-label": ariaLabel ?? startEditingLabel, "aria-describedby": selectState['aria-describedby'], "aria-errormessage": selectState['aria-errormessage'], invalid: selectState.invalid, size: resolvedSize, children: _jsx(Select.Value, { placeholder: placeholder }) }), _jsx(Select.Portal, { children: _jsx(Select.Content, { children: _jsx(Select.Viewport, { children: items.filter(item => item.value !== '').map(item => _jsxs(Select.Item, { value: item.value, disabled: item.disabled, children: [_jsx(Select.ItemText, { children: item.label }), _jsx(Select.ItemIndicator, {})] }, item.value)) }) }) })] }), actions] });
+    const defaultEditor = resolvedEditorType === 'select' ? selectEditor : isMultiline
+        ? _jsx(Textarea, { variant: "underline", ...textareaProps, endAction: _jsxs(_Fragment, { children: [textareaProps?.endAction, actions] }), "aria-describedby": textareaDescription, "aria-errormessage": error ? `${resolvedId}-error` : textareaProps?.['aria-errormessage'], "aria-invalid": invalid || Boolean(error) || textareaProps?.['aria-invalid'], "aria-label": ariaLabel, autoFocus: true, disabled: disabled || saving, invalid: invalid || Boolean(error), onBlur: event => {
+                textareaProps?.onBlur?.(event);
+                handleEditorBlur(event);
+            }, onChange: event => updateValue(event.currentTarget.value), onKeyDown: event => {
+                textareaProps?.onKeyDown?.(event);
+                handleEditorKeyDown(event);
+            }, placeholder: placeholder, readOnly: readOnly, ref: editorRef, seed: `${resolvedSeed}-textarea`, value: currentValue })
+        : _jsx(Input, { variant: "underline", ...inputProps, endAction: _jsxs(_Fragment, { children: [inputProps?.endAction, actions] }), "aria-describedby": inputDescription, "aria-errormessage": error ? `${resolvedId}-error` : inputProps?.['aria-errormessage'], "aria-invalid": invalid || Boolean(error) || inputProps?.['aria-invalid'], "aria-label": ariaLabel, autoFocus: true, disabled: disabled || saving, invalid: invalid || Boolean(error), onBlur: event => {
+                inputProps?.onBlur?.(event);
+                handleEditorBlur(event);
+            }, onKeyDown: event => {
+                inputProps?.onKeyDown?.(event);
+                handleEditorKeyDown(event);
+            }, onValueChange: updateValue, placeholder: placeholder, readOnly: readOnly, ref: editorRef, seed: `${resolvedSeed}-input`, value: currentValue });
+    return _jsx("div", { ...props, className: classes('inkra-editable', className), "data-disabled": disabled || undefined, "data-editing": isEditing || undefined, "data-saving": saving || undefined, "data-invalid": Boolean(error) || invalid || undefined, "data-multiline": isMultiline || undefined, "data-editor-type": resolvedEditorType, "data-readonly": readOnly || undefined, "data-size": resolvedSize, onBlur: event => {
+            onRootBlur?.(event);
+            handleEditorBlur(event);
+        }, ref: rootRef, children: _jsx("div", { className: "inkra-editable__frame", children: isEditing ? _jsxs("div", { className: "inkra-editable__editor", "data-editable-editor": "true", children: [editor == null ? defaultEditor : _jsxs("div", { className: "inkra-editable__custom-row", children: [typeof editor === 'function' ? editor(editorProps) : editor, actions] }), error ? _jsx(PencilText, { as: "div", className: "inkra-editable__error", role: "alert", id: `${resolvedId}-error`, seed: `${resolvedSeed}-error`, children: error }) : null] }) : _jsxs("div", { className: "inkra-editable__display-shell", children: [_jsx(PencilSurface, { "aria-hidden": "true", as: "span", className: "inkra-editable__focus-ring", seed: `${resolvedSeed}-focus`, variant: "outline" }), display == null
+                        ? _jsx("button", { "aria-label": ariaLabel ?? startEditingLabel, className: "inkra-editable__display", "data-editable-display": "true", disabled: disabled || readOnly, onClick: startEditing, ref: editButtonRef, type: "button", children: displayContent })
+                        : _jsxs(_Fragment, { children: [_jsx("div", { className: "inkra-editable__display", "data-editable-display": "true", onClick: handleDisplayClick, children: displayContent }), _jsx("button", { "aria-label": ariaLabel ?? startEditingLabel, className: "inkra-editable__custom-trigger", disabled: disabled || readOnly, onClick: startEditing, ref: editButtonRef, type: "button", children: startEditingLabel })] })] }) }) });
 });

package/dist/empty/illustrations.d.ts

@@ -0,0 +1,8 @@
+import type { PencilIconPath } from '../PencilIcon.js';
+export type EmptyIllustration = 'inbox' | 'search' | 'folder' | 'documents' | 'messages' | 'image' | 'offline' | 'favorites';
+type Illustration = {
+    ink: readonly PencilIconPath[];
+    accent: readonly PencilIconPath[];
+};
+export declare const emptyIllustrations: Record<EmptyIllustration, Illustration>;
+export {};