@inkra/react 0.0.0-stage → 0.2.0

package/dist/overflow-list/index.d.ts

@@ -0,0 +1,39 @@
+import type { CSSProperties, HTMLAttributes, ReactElement, ReactNode, RefAttributes } from 'react';
+import type { ButtonProps } from '../Button.js';
+import type { OverflowListStrategy } from './layout.js';
+export type { OverflowListStrategy } from './layout.js';
+export interface OverflowListItem {
+    id: string | number;
+    label: ReactNode;
+    disabled?: boolean;
+    priority?: number;
+    measureKey?: string | number;
+}
+export interface OverflowListRenderContext {
+    id: string | number;
+    index: number;
+}
+export interface OverflowListOverflowContext<Item extends OverflowListItem> {
+    count: number;
+    items: readonly Item[];
+}
+export interface OverflowListChange<Item extends OverflowListItem> {
+    visibleItems: readonly Item[];
+    overflowItems: readonly Item[];
+}
+type OverflowButtonProps = Omit<ButtonProps, 'aria-label' | 'children' | 'ref'>;
+export interface OverflowListProps<Item extends OverflowListItem = OverflowListItem> extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'onChange'> {
+    items: readonly Item[];
+    strategy?: OverflowListStrategy;
+    measurementKey?: string | number;
+    gap?: CSSProperties['gap'];
+    renderItem?: (item: Item, context: OverflowListRenderContext) => ReactNode;
+    renderOverflowItem?: (item: Item, context: OverflowListRenderContext) => ReactNode;
+    renderOverflow?: (context: OverflowListOverflowContext<Item>) => ReactNode;
+    getOverflowItemIcon?: (item: Item, context: OverflowListRenderContext) => ReactNode;
+    overflowLabel?: string | ((count: number) => string);
+    overflowButtonProps?: OverflowButtonProps;
+    onOverflowItemSelect?: (item: Item, event: Event) => void;
+    onOverflowChange?: (change: OverflowListChange<Item>) => void;
+}
+export declare const OverflowList: <Item extends OverflowListItem = OverflowListItem>(props: OverflowListProps<Item> & RefAttributes<HTMLDivElement>) => ReactElement;

package/dist/overflow-list/index.js

@@ -0,0 +1,230 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useEffect, useId, useMemo, useRef, useState, } from 'react';
+import { Button } from '../Button.js';
+import { DropdownMenu } from '../dropdown-menu/index.js';
+import { PencilIcon } from '../PencilIcon.js';
+import { useBrowserLayoutEffect } from '../internal/useBrowserLayoutEffect.js';
+import { calculateOverflowListLayout } from './layout.js';
+const ellipsisPaths = [{ d: 'M5 12h.01M12 12h.01M19 12h.01' }];
+function itemKey(id) {
+    return `${typeof id}:${String(id)}`;
+}
+function finitePriority(value) {
+    if (value === Number.POSITIVE_INFINITY)
+        return Number.MAX_SAFE_INTEGER;
+    if (value === Number.NEGATIVE_INFINITY)
+        return Number.MIN_SAFE_INTEGER;
+    return Number.isFinite(value) ? value : 0;
+}
+function sameKeys(current, next) {
+    if (current.size !== next.length)
+        return false;
+    return next.every(key => current.has(key));
+}
+function assignRef(ref, value) {
+    if (typeof ref === 'function')
+        ref(value);
+    else if (ref)
+        ref.current = value;
+}
+function defaultOverflowLabel(count) {
+    return `More items (${count})`;
+}
+function OverflowListInner({ 'aria-label': ariaLabel, className, gap, getOverflowItemIcon, items, measurementKey = '', onOverflowChange, onOverflowItemSelect, overflowButtonProps, overflowLabel = defaultOverflowLabel, renderItem, renderOverflow, renderOverflowItem, role, strategy = 'end', style, ...props }, forwardedRef) {
+    const generatedId = useId();
+    const rootRef = useRef(null);
+    const triggerRef = useRef(null);
+    const itemRefs = useRef(new Map());
+    const widthCache = useRef(new Map());
+    const frameRef = useRef(null);
+    const focusOverflowRef = useRef(false);
+    const lastChangeRef = useRef('');
+    const onOverflowChangeRef = useRef(onOverflowChange);
+    onOverflowChangeRef.current = onOverflowChange;
+    const entries = useMemo(() => {
+        const nextEntries = items.map((item, index) => ({
+            item,
+            index,
+            key: itemKey(item.id),
+            priority: finitePriority(item.priority),
+        }));
+        const duplicateCheck = new Set();
+        for (const entry of nextEntries) {
+            if (duplicateCheck.has(entry.key)) {
+                throw new Error(`OverflowList item ids must be unique. Received duplicate id: ${String(entry.item.id)}`);
+            }
+            duplicateCheck.add(entry.key);
+        }
+        return nextEntries;
+    }, [items]);
+    const signature = useMemo(() => JSON.stringify([
+        measurementKey,
+        strategy,
+        entries.map(entry => [entry.key, entry.item.measureKey ?? entry.key, entry.priority]),
+    ]), [entries, measurementKey, strategy]);
+    const allKeys = useMemo(() => entries.map(entry => entry.key), [entries]);
+    const [layout, setLayout] = useState(() => ({
+        signature,
+        visibleKeys: new Set(allKeys),
+        needsOverflow: false,
+        measuring: true,
+    }));
+    const effectiveLayout = layout.signature === signature
+        ? layout
+        : { signature, visibleKeys: new Set(allKeys), needsOverflow: false, measuring: true };
+    const visibleEntries = useMemo(() => effectiveLayout.measuring
+        ? entries
+        : entries.filter(entry => effectiveLayout.visibleKeys.has(entry.key)), [effectiveLayout.measuring, effectiveLayout.visibleKeys, entries]);
+    const overflowEntries = useMemo(() => effectiveLayout.measuring
+        ? []
+        : entries.filter(entry => !effectiveLayout.visibleKeys.has(entry.key)), [effectiveLayout.measuring, effectiveLayout.visibleKeys, entries]);
+    const setRootRef = useCallback((node) => {
+        rootRef.current = node;
+        assignRef(forwardedRef, node);
+    }, [forwardedRef]);
+    const setItemRef = useCallback((key, node) => {
+        if (node)
+            itemRefs.current.set(key, node);
+        else
+            itemRefs.current.delete(key);
+    }, []);
+    const updateLayout = useCallback(() => {
+        const root = rootRef.current;
+        if (!root)
+            return;
+        const containerWidth = root.getBoundingClientRect().width;
+        if (containerWidth <= 0)
+            return;
+        const computedGap = Number.parseFloat(getComputedStyle(root).columnGap) || 0;
+        for (const entry of entries) {
+            const node = itemRefs.current.get(entry.key);
+            if (!node)
+                continue;
+            const width = node.getBoundingClientRect().width;
+            if (width > 0)
+                widthCache.current.set(entry.key, width);
+        }
+        if (entries.some(entry => !widthCache.current.has(entry.key)))
+            return;
+        const triggerWidth = triggerRef.current?.getBoundingClientRect().width;
+        const result = calculateOverflowListLayout({
+            containerWidth,
+            gap: computedGap,
+            items: entries.map(entry => ({
+                key: entry.key,
+                priority: entry.priority,
+                width: widthCache.current.get(entry.key) ?? 0,
+            })),
+            strategy,
+            triggerWidth,
+        });
+        if (result.needsTriggerMeasurement) {
+            setLayout(current => current.signature === signature
+                && current.needsOverflow
+                && current.measuring
+                && sameKeys(current.visibleKeys, allKeys)
+                ? current
+                : { signature, visibleKeys: new Set(allKeys), needsOverflow: true, measuring: true });
+            return;
+        }
+        const activeElement = typeof document === 'undefined' ? null : document.activeElement;
+        if (activeElement && result.overflowKeys.some(key => itemRefs.current.get(key)?.contains(activeElement))) {
+            focusOverflowRef.current = true;
+        }
+        setLayout(current => current.signature === signature
+            && !current.measuring
+            && current.needsOverflow === (result.overflowKeys.length > 0)
+            && sameKeys(current.visibleKeys, result.visibleKeys)
+            ? current
+            : {
+                signature,
+                visibleKeys: new Set(result.visibleKeys),
+                needsOverflow: result.overflowKeys.length > 0,
+                measuring: false,
+            });
+    }, [allKeys, entries, signature, strategy]);
+    const scheduleLayout = useCallback(() => {
+        if (frameRef.current !== null || typeof window === 'undefined')
+            return;
+        frameRef.current = window.requestAnimationFrame(() => {
+            frameRef.current = null;
+            updateLayout();
+        });
+    }, [updateLayout]);
+    useBrowserLayoutEffect(() => {
+        if (layout.signature === signature)
+            return;
+        widthCache.current.clear();
+        setLayout({ signature, visibleKeys: new Set(allKeys), needsOverflow: false, measuring: true });
+    }, [allKeys, layout.signature, signature]);
+    useEffect(() => {
+        const root = rootRef.current;
+        if (!root)
+            return undefined;
+        const observer = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(scheduleLayout);
+        observer?.observe(root);
+        itemRefs.current.forEach(node => observer?.observe(node));
+        if (triggerRef.current)
+            observer?.observe(triggerRef.current);
+        if (!observer)
+            window.addEventListener('resize', scheduleLayout);
+        scheduleLayout();
+        return () => {
+            observer?.disconnect();
+            window.removeEventListener('resize', scheduleLayout);
+            if (frameRef.current !== null) {
+                window.cancelAnimationFrame(frameRef.current);
+                frameRef.current = null;
+            }
+        };
+    }, [effectiveLayout.measuring, effectiveLayout.needsOverflow, scheduleLayout, signature]);
+    useEffect(() => {
+        const fonts = typeof document === 'undefined' ? undefined : document.fonts;
+        if (!fonts?.addEventListener)
+            return undefined;
+        const remeasure = () => {
+            widthCache.current.clear();
+            setLayout({ signature, visibleKeys: new Set(allKeys), needsOverflow: effectiveLayout.needsOverflow, measuring: true });
+        };
+        fonts.addEventListener('loadingdone', remeasure);
+        return () => fonts.removeEventListener('loadingdone', remeasure);
+    }, [allKeys, effectiveLayout.needsOverflow, signature]);
+    useBrowserLayoutEffect(() => {
+        if (!focusOverflowRef.current || !effectiveLayout.needsOverflow || effectiveLayout.measuring)
+            return;
+        focusOverflowRef.current = false;
+        triggerRef.current?.focus();
+    }, [effectiveLayout.measuring, effectiveLayout.needsOverflow, effectiveLayout.visibleKeys]);
+    useEffect(() => {
+        if (effectiveLayout.measuring)
+            return;
+        const changeKey = `${signature}:${visibleEntries.map(entry => entry.key).join('|')}`;
+        if (lastChangeRef.current === changeKey)
+            return;
+        lastChangeRef.current = changeKey;
+        onOverflowChangeRef.current?.({
+            visibleItems: visibleEntries.map(entry => entry.item),
+            overflowItems: overflowEntries.map(entry => entry.item),
+        });
+    }, [effectiveLayout.measuring, overflowEntries, signature, visibleEntries]);
+    const resolvedLabel = typeof overflowLabel === 'function'
+        ? overflowLabel(overflowEntries.length)
+        : overflowLabel;
+    const overflowContext = useMemo(() => ({
+        count: overflowEntries.length,
+        items: overflowEntries.map(entry => entry.item),
+    }), [overflowEntries]);
+    const { className: overflowButtonClassName, size: overflowButtonSize, title: overflowButtonTitle, variant: overflowButtonVariant, ...overflowButtonRest } = overflowButtonProps ?? {};
+    const resolvedStyle = {
+        ...style,
+        ...(gap !== undefined ? { '--inkra-overflow-list-gap': typeof gap === 'number' ? `${gap}px` : String(gap) } : {}),
+    };
+    return _jsxs("div", { ...props, "aria-label": ariaLabel, className: ['inkra-overflow-list', className].filter(Boolean).join(' '), "data-measuring": effectiveLayout.measuring || undefined, ref: setRootRef, role: role, style: resolvedStyle, children: [visibleEntries.map(({ item, index, key }) => _jsx("div", { className: "inkra-overflow-list__item", "data-overflow-list-item": String(item.id), ref: node => setItemRef(key, node), children: renderItem
+                    ? renderItem(item, { id: item.id, index })
+                    : _jsx("span", { className: "inkra-overflow-list__default-item", children: item.label }) }, key)), effectiveLayout.needsOverflow ? _jsxs(DropdownMenu.Root, { children: [_jsx(DropdownMenu.Trigger, { asChild: true, children: _jsx(Button, { ...overflowButtonRest, "aria-label": resolvedLabel, className: ['inkra-overflow-list__trigger', overflowButtonClassName].filter(Boolean).join(' '), ref: triggerRef, size: overflowButtonSize ?? (renderOverflow ? 'sm' : 'icon-sm'), title: overflowButtonTitle ?? resolvedLabel, variant: overflowButtonVariant ?? 'outline', children: renderOverflow
+                                ? renderOverflow(overflowContext)
+                                : _jsx(PencilIcon, { paths: ellipsisPaths, seed: `${generatedId}-overflow`, size: 16, sourceSize: 24 }) }) }), _jsx(DropdownMenu.Portal, { children: _jsx(DropdownMenu.Content, { align: "end", "aria-label": resolvedLabel, children: overflowEntries.map(({ item, index, key }) => _jsx(DropdownMenu.Item, { disabled: item.disabled, icon: getOverflowItemIcon?.(item, { id: item.id, index }), onSelect: event => onOverflowItemSelect?.(item, event), children: renderOverflowItem
+                                    ? renderOverflowItem(item, { id: item.id, index })
+                                    : item.label }, key)) }) })] }) : null] });
+}
+export const OverflowList = forwardRef(OverflowListInner);

package/dist/overflow-list/layout.d.ts

@@ -0,0 +1,19 @@
+export type OverflowListStrategy = 'end' | 'start' | 'priority';
+export interface OverflowListLayoutItem {
+    key: string;
+    priority: number;
+    width: number;
+}
+export interface OverflowListLayoutInput {
+    items: readonly OverflowListLayoutItem[];
+    containerWidth: number;
+    gap: number;
+    strategy: OverflowListStrategy;
+    triggerWidth?: number;
+}
+export interface OverflowListLayoutResult {
+    visibleKeys: string[];
+    overflowKeys: string[];
+    needsTriggerMeasurement: boolean;
+}
+export declare function calculateOverflowListLayout({ containerWidth, gap, items, strategy, triggerWidth, }: OverflowListLayoutInput): OverflowListLayoutResult;

package/dist/overflow-list/layout.js

@@ -0,0 +1,44 @@
+const finiteSize = (value) => Number.isFinite(value) ? Math.max(0, value) : 0;
+function itemsWidth(items, gap) {
+    if (items.length === 0)
+        return 0;
+    return items.reduce((total, item) => total + finiteSize(item.width), 0)
+        + finiteSize(gap) * (items.length - 1);
+}
+function candidateOrder(items, strategy) {
+    const indexed = items.map((item, index) => ({ item, index }));
+    if (strategy === 'start')
+        return indexed.reverse();
+    if (strategy === 'priority') {
+        return indexed.sort((left, right) => right.item.priority - left.item.priority || left.index - right.index);
+    }
+    return indexed;
+}
+export function calculateOverflowListLayout({ containerWidth, gap, items, strategy, triggerWidth, }) {
+    const availableWidth = finiteSize(containerWidth);
+    const resolvedGap = finiteSize(gap);
+    const allKeys = items.map(item => item.key);
+    if (itemsWidth(items, resolvedGap) <= availableWidth + 0.5) {
+        return { visibleKeys: allKeys, overflowKeys: [], needsTriggerMeasurement: false };
+    }
+    if (triggerWidth === undefined || !Number.isFinite(triggerWidth) || triggerWidth <= 0) {
+        return { visibleKeys: allKeys, overflowKeys: [], needsTriggerMeasurement: true };
+    }
+    const visible = new Set();
+    let occupied = finiteSize(triggerWidth);
+    for (const { item } of candidateOrder(items, strategy)) {
+        const nextWidth = occupied + resolvedGap + finiteSize(item.width);
+        if (nextWidth > availableWidth + 0.5) {
+            if (strategy === 'priority')
+                continue;
+            break;
+        }
+        visible.add(item.key);
+        occupied = nextWidth;
+    }
+    return {
+        visibleKeys: allKeys.filter(key => visible.has(key)),
+        overflowKeys: allKeys.filter(key => !visible.has(key)),
+        needsTriggerMeasurement: false,
+    };
+}

package/dist/overlay/Overlay.d.ts

@@ -0,0 +1,65 @@
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
+import type { ButtonProps } from '../Button.js';
+import type { PencilSurfaceVariant } from '../PencilSurface.js';
+export type OverlayRootProps = DialogPrimitive.DialogProps;
+export declare function OverlayRoot(props: OverlayRootProps): import("react").JSX.Element;
+export type OverlayTriggerProps = DialogPrimitive.DialogTriggerProps;
+export declare const OverlayTrigger: import("react").ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+export type OverlayPortalProps = DialogPrimitive.DialogPortalProps;
+export declare function OverlayPortal({ children, ...props }: OverlayPortalProps): import("react").JSX.Element;
+export type OverlayBackdropProps = DialogPrimitive.DialogOverlayProps;
+export declare const OverlayBackdrop: import("react").ForwardRefExoticComponent<DialogPrimitive.DialogOverlayProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface OverlayContentProps extends DialogPrimitive.DialogContentProps {
+    /** Plain preserves the padded legacy content; sections fixes Header/Footer around a scrolling Body. */
+    layout?: 'plain' | 'sections';
+    seed?: string | number;
+    surfaceVariant?: PencilSurfaceVariant;
+    surfaceRadius?: number;
+    surfaceClassName?: string;
+}
+export declare const OverlayContent: import("react").ForwardRefExoticComponent<OverlayContentProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface OverlayTitleProps extends Omit<ComponentPropsWithoutRef<typeof DialogPrimitive.Title>, 'children'> {
+    children: string;
+    seed?: string | number;
+}
+export declare const OverlayTitle: import("react").ForwardRefExoticComponent<OverlayTitleProps & import("react").RefAttributes<HTMLHeadingElement>>;
+export interface OverlayDescriptionProps extends Omit<ComponentPropsWithoutRef<typeof DialogPrimitive.Description>, 'children'> {
+    children: string;
+    seed?: string | number;
+}
+export declare const OverlayDescription: import("react").ForwardRefExoticComponent<OverlayDescriptionProps & import("react").RefAttributes<HTMLParagraphElement>>;
+export type OverlayCloseProps = ComponentPropsWithoutRef<typeof DialogPrimitive.Close>;
+export declare const OverlayClose: import("react").ForwardRefExoticComponent<Omit<DialogPrimitive.DialogCloseProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+export interface OverlayCloseButtonProps extends Omit<ButtonProps, 'children' | 'size' | 'variant' | 'loading' | 'aria-label' | 'type'> {
+    label?: string;
+}
+export declare const OverlayCloseButton: import("react").ForwardRefExoticComponent<OverlayCloseButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export interface OverlayHeaderProps extends ComponentPropsWithoutRef<'div'> {
+    divided?: boolean;
+    showClose?: boolean;
+    closeLabel?: string;
+    action?: ReactNode;
+}
+export declare const OverlayHeader: import("react").ForwardRefExoticComponent<OverlayHeaderProps & import("react").RefAttributes<HTMLDivElement>>;
+export type OverlayBodyProps = ComponentPropsWithoutRef<'div'>;
+export declare const OverlayBody: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export interface OverlayFooterProps extends ComponentPropsWithoutRef<'div'> {
+    divided?: boolean;
+    align?: 'start' | 'center' | 'end';
+}
+export declare const OverlayFooter: import("react").ForwardRefExoticComponent<OverlayFooterProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const Overlay: Readonly<{
+    Root: typeof OverlayRoot;
+    Trigger: import("react").ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+    Portal: typeof OverlayPortal;
+    Backdrop: import("react").ForwardRefExoticComponent<DialogPrimitive.DialogOverlayProps & import("react").RefAttributes<HTMLDivElement>>;
+    Content: import("react").ForwardRefExoticComponent<OverlayContentProps & import("react").RefAttributes<HTMLDivElement>>;
+    Header: import("react").ForwardRefExoticComponent<OverlayHeaderProps & 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<OverlayFooterProps & import("react").RefAttributes<HTMLDivElement>>;
+    CloseButton: import("react").ForwardRefExoticComponent<OverlayCloseButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+    Title: import("react").ForwardRefExoticComponent<OverlayTitleProps & import("react").RefAttributes<HTMLHeadingElement>>;
+    Description: import("react").ForwardRefExoticComponent<OverlayDescriptionProps & import("react").RefAttributes<HTMLParagraphElement>>;
+    Close: import("react").ForwardRefExoticComponent<Omit<DialogPrimitive.DialogCloseProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+}>;

package/dist/overlay/Overlay.js

@@ -0,0 +1,77 @@
+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 './themeBridge.js';
+function classes(...values) {
+    return values.filter(Boolean).join(' ');
+}
+export function OverlayRoot(props) {
+    return (_jsx(PortalThemeProvider, { children: _jsx(DialogPrimitive.Root, { ...props }) }));
+}
+export const OverlayTrigger = forwardRef(function OverlayTrigger(props, forwardedRef) {
+    const ref = usePortalTriggerRef(forwardedRef);
+    return _jsx(DialogPrimitive.Trigger, { ...props, ref: ref });
+});
+export function OverlayPortal({ children, ...props }) {
+    return (_jsx(DialogPrimitive.Portal, { ...props, children: _jsx(PortalThemeBridge, { children: children }) }));
+}
+export const OverlayBackdrop = forwardRef(function OverlayBackdrop({ className, ...props }, ref) {
+    return (_jsx(DialogPrimitive.Overlay, { ...props, className: classes('inkra-overlay__backdrop', className), ref: ref }));
+});
+export const OverlayContent = forwardRef(function OverlayContent({ children, className, layout = 'plain', seed, surfaceClassName, surfaceRadius = 8, surfaceVariant = 'paper', ...props }, ref) {
+    const id = useId();
+    return (_jsx(DialogPrimitive.Content, { ...props, className: classes('inkra-overlay__content', className), "data-layout": layout, ref: ref, children: _jsx(PencilSurface, { className: classes('inkra-overlay__surface', surfaceClassName), radius: surfaceRadius, seed: seed ?? `inkra-overlay-${id}`, variant: surfaceVariant, children: _jsx("div", { className: "inkra-overlay__content-body", children: children }) }) }));
+});
+export const OverlayTitle = forwardRef(function OverlayTitle({ children, className, seed, ...props }, ref) {
+    const id = useId();
+    return (_jsx(DialogPrimitive.Title, { ...props, className: classes('inkra-overlay__title', className), ref: ref, children: _jsx(PencilText, { seed: seed ?? `inkra-overlay-title-${id}`, children: children }) }));
+});
+export const OverlayDescription = forwardRef(function OverlayDescription({ children, className, seed, ...props }, ref) {
+    const id = useId();
+    return (_jsx(DialogPrimitive.Description, { ...props, className: classes('inkra-overlay__description', className), ref: ref, children: _jsx(PencilText, { seed: seed ?? `inkra-overlay-description-${id}`, children: children }) }));
+});
+export const OverlayClose = forwardRef(function OverlayClose(props, ref) {
+    return _jsx(DialogPrimitive.Close, { ...props, ref: ref });
+});
+const closePaths = closeIcon.node.map(([, attributes]) => ({ d: attributes.d }));
+export const OverlayCloseButton = forwardRef(function OverlayCloseButton({ label = 'Close', className, 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, ref: ref, type: "button", size: "icon", variant: "ghost", className: classes('inkra-overlay__close-button', className), "aria-label": label, onFocus: event => {
+                                onFocus?.(event);
+                                const dialog = event.currentTarget.closest('[role="dialog"]');
+                                // Initial dialog focus must not open a tooltip that consumes the first Escape.
+                                if (dialog && (!event.relatedTarget || !dialog.contains(event.relatedTarget)))
+                                    event.preventDefault();
+                            }, children: _jsx(PencilIcon, { paths: closePaths, size: 30, sourceSize: 24, decorative: true }) }) }) }), _jsx(Tooltip.Portal, { children: _jsx(Tooltip.Content, { side: "bottom", align: "end", children: label }) })] }) });
+});
+export const OverlayHeader = forwardRef(function OverlayHeader({ children, className, divided = true, showClose = true, closeLabel = 'Close', action, ...props }, ref) {
+    const id = useId();
+    return _jsxs("div", { ...props, ref: ref, className: classes('inkra-overlay__header', className), "data-divided": divided || undefined, children: [_jsx("div", { className: "inkra-overlay__heading", children: children }), (action || showClose) && _jsxs("div", { className: "inkra-overlay__header-actions", children: [action, showClose && _jsx(OverlayCloseButton, { label: closeLabel })] }), divided && _jsx(PencilLine, { className: "inkra-overlay__section-divider", seed: `overlay-header-${id}` })] });
+});
+export const OverlayBody = forwardRef(function OverlayBody({ className, ...props }, ref) {
+    return _jsx("div", { ...props, ref: ref, className: classes('inkra-overlay__body', className) });
+});
+export const OverlayFooter = forwardRef(function OverlayFooter({ children, className, divided = true, align = 'end', ...props }, ref) {
+    const id = useId();
+    return _jsxs("div", { ...props, ref: ref, className: classes('inkra-overlay__footer', className), "data-divided": divided || undefined, "data-align": align, children: [divided && _jsx(PencilLine, { className: "inkra-overlay__section-divider", seed: `overlay-footer-${id}` }), children] });
+});
+export const Overlay = Object.freeze({
+    Root: OverlayRoot,
+    Trigger: OverlayTrigger,
+    Portal: OverlayPortal,
+    Backdrop: OverlayBackdrop,
+    Content: OverlayContent,
+    Header: OverlayHeader,
+    Body: OverlayBody,
+    Footer: OverlayFooter,
+    CloseButton: OverlayCloseButton,
+    Title: OverlayTitle,
+    Description: OverlayDescription,
+    Close: OverlayClose,
+});

package/dist/overlay/Popover.d.ts

@@ -0,0 +1,43 @@
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import type { ComponentPropsWithoutRef } from 'react';
+import type { PencilSurfaceVariant } from '../PencilSurface.js';
+export type PopoverRootProps = PopoverPrimitive.PopoverProps;
+export declare function PopoverRoot(props: PopoverRootProps): import("react").JSX.Element;
+export type PopoverAnchorProps = PopoverPrimitive.PopoverAnchorProps;
+export declare const PopoverAnchor: import("react").ForwardRefExoticComponent<PopoverPrimitive.PopoverAnchorProps & import("react").RefAttributes<HTMLDivElement>>;
+export type PopoverTriggerProps = PopoverPrimitive.PopoverTriggerProps;
+export declare const PopoverTrigger: import("react").ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+export type PopoverPortalProps = PopoverPrimitive.PopoverPortalProps;
+export declare function PopoverPortal({ children, ...props }: PopoverPortalProps): import("react").JSX.Element;
+export interface PopoverContentProps extends PopoverPrimitive.PopoverContentProps {
+    arrowProps?: PopoverArrowProps;
+    seed?: string | number;
+    showArrow?: boolean;
+    surfaceVariant?: PencilSurfaceVariant;
+    surfaceRadius?: number;
+    surfaceClassName?: string;
+}
+export declare const PopoverContent: import("react").ForwardRefExoticComponent<PopoverContentProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface PopoverTitleProps extends Omit<ComponentPropsWithoutRef<typeof PopoverPrimitive.Title>, 'children'> {
+    children: string;
+    seed?: string | number;
+}
+export declare const PopoverTitle: import("react").ForwardRefExoticComponent<PopoverTitleProps & import("react").RefAttributes<HTMLHeadingElement>>;
+export interface PopoverDescriptionProps extends Omit<ComponentPropsWithoutRef<typeof PopoverPrimitive.Description>, 'children'> {
+    children: string;
+    seed?: string | number;
+}
+export declare const PopoverDescription: import("react").ForwardRefExoticComponent<PopoverDescriptionProps & import("react").RefAttributes<HTMLParagraphElement>>;
+export type PopoverCloseProps = ComponentPropsWithoutRef<typeof PopoverPrimitive.Close>;
+export declare const PopoverClose: import("react").ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverCloseProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+export type PopoverArrowProps = ComponentPropsWithoutRef<typeof PopoverPrimitive.Arrow>;
+export declare const Popover: Readonly<{
+    Root: typeof PopoverRoot;
+    Anchor: import("react").ForwardRefExoticComponent<PopoverPrimitive.PopoverAnchorProps & import("react").RefAttributes<HTMLDivElement>>;
+    Trigger: import("react").ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+    Portal: typeof PopoverPortal;
+    Content: import("react").ForwardRefExoticComponent<PopoverContentProps & import("react").RefAttributes<HTMLDivElement>>;
+    Title: import("react").ForwardRefExoticComponent<PopoverTitleProps & import("react").RefAttributes<HTMLHeadingElement>>;
+    Description: import("react").ForwardRefExoticComponent<PopoverDescriptionProps & import("react").RefAttributes<HTMLParagraphElement>>;
+    Close: import("react").ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverCloseProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+}>;

package/dist/overlay/Popover.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import { forwardRef, useId } from 'react';
+import { PencilSurface } from '../PencilSurface.js';
+import { PencilText } from '../PencilText.js';
+import { PortalThemeBridge, PortalThemeProvider, usePortalTriggerRef, } from './themeBridge.js';
+function classes(...values) {
+    return values.filter(Boolean).join(' ');
+}
+export function PopoverRoot(props) {
+    return (_jsx(PortalThemeProvider, { children: _jsx(PopoverPrimitive.Root, { ...props }) }));
+}
+export const PopoverAnchor = PopoverPrimitive.Anchor;
+export const PopoverTrigger = forwardRef(function PopoverTrigger(props, forwardedRef) {
+    const ref = usePortalTriggerRef(forwardedRef);
+    return _jsx(PopoverPrimitive.Trigger, { ...props, ref: ref });
+});
+export function PopoverPortal({ children, ...props }) {
+    return (_jsx(PopoverPrimitive.Portal, { ...props, children: _jsx(PortalThemeBridge, { children: children }) }));
+}
+export const PopoverContent = forwardRef(function PopoverContent({ arrowProps, children, className, seed, showArrow = false, surfaceClassName, surfaceRadius = 8, surfaceVariant = 'paper', ...props }, ref) {
+    const id = useId();
+    return (_jsxs(PopoverPrimitive.Content, { ...props, className: classes('inkra-popover__content', className), ref: ref, children: [_jsx(PencilSurface, { className: classes('inkra-popover__surface', surfaceClassName), radius: surfaceRadius, seed: seed ?? `inkra-popover-${id}`, variant: surfaceVariant, children: _jsx("div", { className: "inkra-popover__content-body", children: children }) }), showArrow ? (_jsx(PopoverPrimitive.Arrow, { ...arrowProps, className: classes('inkra-popover__arrow', arrowProps?.className) })) : null] }));
+});
+export const PopoverTitle = forwardRef(function PopoverTitle({ children, className, seed, ...props }, ref) {
+    const id = useId();
+    return (_jsx(PopoverPrimitive.Title, { ...props, className: classes('inkra-popover__title', className), ref: ref, children: _jsx(PencilText, { seed: seed ?? `inkra-popover-title-${id}`, children: children }) }));
+});
+export const PopoverDescription = forwardRef(function PopoverDescription({ children, className, seed, ...props }, ref) {
+    const id = useId();
+    return (_jsx(PopoverPrimitive.Description, { ...props, className: classes('inkra-popover__description', className), ref: ref, children: _jsx(PencilText, { seed: seed ?? `inkra-popover-description-${id}`, children: children }) }));
+});
+export const PopoverClose = forwardRef(function PopoverClose(props, ref) {
+    return _jsx(PopoverPrimitive.Close, { ...props, ref: ref });
+});
+export const Popover = Object.freeze({
+    Root: PopoverRoot,
+    Anchor: PopoverAnchor,
+    Trigger: PopoverTrigger,
+    Portal: PopoverPortal,
+    Content: PopoverContent,
+    Title: PopoverTitle,
+    Description: PopoverDescription,
+    Close: PopoverClose,
+});

package/dist/overlay/index.d.ts

@@ -0,0 +1,4 @@
+export { Overlay, OverlayBackdrop, OverlayClose, OverlayContent, OverlayHeader, OverlayBody, OverlayFooter, OverlayCloseButton, OverlayDescription, OverlayPortal, OverlayRoot, OverlayTitle, OverlayTrigger, } from './Overlay.js';
+export type { OverlayBackdropProps, OverlayCloseProps, OverlayContentProps, OverlayHeaderProps, OverlayBodyProps, OverlayFooterProps, OverlayCloseButtonProps, OverlayDescriptionProps, OverlayPortalProps, OverlayRootProps, OverlayTitleProps, OverlayTriggerProps, } from './Overlay.js';
+export { Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverDescription, PopoverPortal, PopoverRoot, PopoverTitle, PopoverTrigger, } from './Popover.js';
+export type { PopoverAnchorProps, PopoverArrowProps, PopoverCloseProps, PopoverContentProps, PopoverDescriptionProps, PopoverPortalProps, PopoverRootProps, PopoverTitleProps, PopoverTriggerProps, } from './Popover.js';

package/dist/overlay/index.js

@@ -0,0 +1,2 @@
+export { Overlay, OverlayBackdrop, OverlayClose, OverlayContent, OverlayHeader, OverlayBody, OverlayFooter, OverlayCloseButton, OverlayDescription, OverlayPortal, OverlayRoot, OverlayTitle, OverlayTrigger, } from './Overlay.js';
+export { Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverDescription, PopoverPortal, PopoverRoot, PopoverTitle, PopoverTrigger, } from './Popover.js';

package/dist/overlay/themeBridge.d.ts

@@ -0,0 +1,8 @@
+import type { ForwardedRef, ReactNode } from 'react';
+export declare function PortalThemeProvider({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function usePortalTriggerRef<Element extends HTMLElement>(forwardedRef: ForwardedRef<Element>): (node: Element | null) => void;
+export declare const PortalThemeBridge: import("react").ForwardRefExoticComponent<{
+    children: ReactNode;
+} & import("react").RefAttributes<HTMLDivElement>>;