@inkra/react 0.1.0 → 0.2.0

package/dist/image-viewer/index.d.ts

@@ -0,0 +1,79 @@
+import type { ReactNode } from 'react';
+import type { PanZoomWheelMode } from '../pan-zoom/index.js';
+import type { OverlayContentProps, OverlayRootProps, OverlayTriggerProps } from '../overlay/index.js';
+export interface ImageViewerItem {
+    id: string;
+    src: string;
+    alt: string;
+    thumbnailSrc?: string;
+    thumbnailAlt?: string;
+    width?: number;
+    height?: number;
+}
+export type ImageViewerChangeReason = 'previous' | 'next' | 'thumbnail' | 'home' | 'end' | 'items-change';
+export interface ImageViewerChangeDetails {
+    item: ImageViewerItem | null;
+    reason: ImageViewerChangeReason;
+}
+export interface ImageViewerRootProps extends Omit<OverlayRootProps, 'open' | 'defaultOpen' | 'onOpenChange'> {
+    items: readonly ImageViewerItem[];
+    activeId?: string | null;
+    defaultActiveId?: string | null;
+    onActiveIdChange?: (activeId: string | null, details: ImageViewerChangeDetails) => void;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    loop?: boolean;
+}
+export declare function ImageViewerRoot({ activeId, defaultActiveId, defaultOpen, items, loop, onActiveIdChange, onOpenChange, open, ...props }: ImageViewerRootProps): import("react").JSX.Element;
+export type ImageViewerTriggerProps = OverlayTriggerProps;
+export declare const ImageViewerTrigger: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+export interface ImageViewerLabels {
+    title: string;
+    description: string;
+    close: string;
+    previous: string;
+    next: string;
+    thumbnails: string;
+    imagePosition: (current: number, total: number) => string;
+    thumbnail: (item: ImageViewerItem, current: number, total: number) => string;
+    failedTitle: string;
+    failedDescription: (item: ImageViewerItem) => string;
+    retry: string;
+    zoomIn: string;
+    zoomOut: string;
+    resetZoom: string;
+    rotate: string;
+    panZoom: (item: ImageViewerItem) => string;
+    emptyTitle: string;
+    emptyDescription: string;
+}
+export interface ImageViewerImageRenderProps {
+    alt: string;
+    className: string;
+    height?: number;
+    key: string;
+    onError: () => void;
+    onLoad: () => void;
+    src: string;
+    width?: number;
+}
+export interface ImageViewerContentProps extends Omit<OverlayContentProps, 'children' | 'layout'> {
+    labels?: Partial<ImageViewerLabels>;
+    showThumbnails?: boolean;
+    renderImage?: (item: ImageViewerItem, props: ImageViewerImageRenderProps) => ReactNode;
+    emptyState?: ReactNode;
+    zoomable?: boolean;
+    rotatable?: boolean;
+    minScale?: number;
+    maxScale?: number;
+    wheel?: PanZoomWheelMode;
+}
+export declare const ImageViewerContent: import("react").ForwardRefExoticComponent<ImageViewerContentProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const ImageViewer: Readonly<{
+    Root: typeof ImageViewerRoot;
+    Trigger: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+    Content: import("react").ForwardRefExoticComponent<ImageViewerContentProps & import("react").RefAttributes<HTMLDivElement>>;
+}>;
+export { nextImageViewerIndex, resolveImageViewerSelection } from './model.js';
+export type { ImageViewerIdentifiable, ImageViewerSelection } from './model.js';

package/dist/image-viewer/index.js

@@ -0,0 +1,220 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { __iconData as chevronLeftIcon } from 'lucide-react/dist/esm/icons/chevron-left.mjs';
+import { __iconData as chevronRightIcon } from 'lucide-react/dist/esm/icons/chevron-right.mjs';
+import { __iconData as imageOffIcon } from 'lucide-react/dist/esm/icons/image-off.mjs';
+import { __iconData as rotateIcon } from 'lucide-react/dist/esm/icons/rotate-cw.mjs';
+import { __iconData as zoomInIcon } from 'lucide-react/dist/esm/icons/zoom-in.mjs';
+import { __iconData as zoomOutIcon } from 'lucide-react/dist/esm/icons/zoom-out.mjs';
+import { createContext, forwardRef, useCallback, useContext, useEffect, useMemo, 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 { PanZoom } from '../pan-zoom/index.js';
+import { OverlayBackdrop, OverlayContent, OverlayDescription, OverlayHeader, OverlayPortal, OverlayRoot, OverlayTitle, OverlayTrigger, } from '../overlay/index.js';
+import { nextImageViewerIndex, resolveImageViewerSelection } from './model.js';
+const chevronLeftPaths = chevronLeftIcon.node.map(([, attributes]) => ({ d: attributes.d }));
+const chevronRightPaths = chevronRightIcon.node.map(([, attributes]) => ({ d: attributes.d }));
+const imageOffPaths = imageOffIcon.node.map(([, attributes]) => ({ d: attributes.d }));
+const rotatePaths = rotateIcon.node.map(([, attributes]) => ({ d: attributes.d }));
+const zoomInPaths = zoomInIcon.node.map(([, attributes]) => ({ d: attributes.d }));
+const zoomOutPaths = zoomOutIcon.node.map(([, attributes]) => ({ d: attributes.d }));
+const ImageViewerContext = createContext(null);
+function useImageViewerContext() {
+    const context = useContext(ImageViewerContext);
+    if (!context)
+        throw new Error('ImageViewer components must be used inside ImageViewer.Root.');
+    return context;
+}
+export function ImageViewerRoot({ activeId, defaultActiveId, defaultOpen = false, items, loop = true, onActiveIdChange, onOpenChange, open, ...props }) {
+    const activeControlled = activeId !== undefined;
+    const openControlled = open !== undefined;
+    const [internalActiveId, setInternalActiveId] = useState(defaultActiveId ?? items[0]?.id ?? null);
+    const [internalOpen, setInternalOpen] = useState(defaultOpen);
+    const previousIndexRef = useRef(0);
+    const repairRef = useRef('');
+    const requestedId = activeControlled ? activeId : internalActiveId;
+    const selection = resolveImageViewerSelection(items, requestedId, previousIndexRef.current);
+    if (selection.index >= 0)
+        previousIndexRef.current = selection.index;
+    const commitActiveId = useCallback((nextId, reason) => {
+        if (!activeControlled)
+            setInternalActiveId(nextId);
+        onActiveIdChange?.(nextId, {
+            item: items.find(item => item.id === nextId) ?? null,
+            reason,
+        });
+    }, [activeControlled, items, onActiveIdChange]);
+    useEffect(() => {
+        if (requestedId === selection.activeId) {
+            repairRef.current = '';
+            return;
+        }
+        const repairKey = `${String(requestedId)}:${String(selection.activeId)}:${items.map(item => item.id).join('|')}`;
+        if (repairRef.current === repairKey)
+            return;
+        repairRef.current = repairKey;
+        commitActiveId(selection.activeId, 'items-change');
+    }, [commitActiveId, items, requestedId, selection.activeId]);
+    const selectIndex = useCallback((index, reason) => {
+        if (items.length === 0)
+            return;
+        const nextIndex = Math.min(Math.max(0, index), items.length - 1);
+        if (items[nextIndex].id !== selection.activeId)
+            commitActiveId(items[nextIndex].id, reason);
+    }, [commitActiveId, items, selection.activeId]);
+    const step = useCallback((direction) => {
+        const nextIndex = nextImageViewerIndex(items.length, selection.index, direction, loop);
+        if (nextIndex !== selection.index)
+            selectIndex(nextIndex, direction < 0 ? 'previous' : 'next');
+    }, [items.length, loop, selectIndex, selection.index]);
+    const context = useMemo(() => ({
+        items,
+        activeItem: selection.index < 0 ? null : items[selection.index],
+        activeIndex: selection.index,
+        loop,
+        selectIndex,
+        step,
+    }), [items, loop, selectIndex, selection.index, step]);
+    return (_jsx(ImageViewerContext.Provider, { value: context, children: _jsx(OverlayRoot, { ...props, open: openControlled ? open : internalOpen, onOpenChange: (nextOpen) => {
+                if (!openControlled)
+                    setInternalOpen(nextOpen);
+                onOpenChange?.(nextOpen);
+            } }) }));
+}
+export const ImageViewerTrigger = forwardRef(function ImageViewerTrigger(props, ref) {
+    return _jsx(OverlayTrigger, { ...props, ref: ref });
+});
+const defaultLabels = {
+    title: 'Image viewer',
+    description: 'Use the previous and next controls or arrow keys to browse images.',
+    close: 'Close image viewer',
+    previous: 'Previous image',
+    next: 'Next image',
+    thumbnails: 'Image thumbnails',
+    imagePosition: (current, total) => `${current} of ${total}`,
+    thumbnail: (item, current, total) => `Show ${item.alt}, ${current} of ${total}`,
+    failedTitle: 'Image unavailable',
+    failedDescription: item => `${item.alt} could not be loaded.`,
+    retry: 'Retry',
+    zoomIn: 'Zoom in',
+    zoomOut: 'Zoom out',
+    resetZoom: 'Reset zoom',
+    rotate: 'Rotate clockwise',
+    panZoom: item => `Pan and zoom ${item.alt}`,
+    emptyTitle: 'No images',
+    emptyDescription: 'There are no images to show.',
+};
+function directionFor(node) {
+    return getComputedStyle(node).direction === 'rtl' ? 'rtl' : 'ltr';
+}
+export const ImageViewerContent = forwardRef(function ImageViewerContent({ className, emptyState, labels: labelOverrides, onOpenAutoFocus, renderImage, rotatable = false, showThumbnails = true, zoomable = true, minScale = 0.5, maxScale = 6, wheel = 'modifier', ...props }, forwardedRef) {
+    const { activeIndex, activeItem, items, loop, selectIndex, step } = useImageViewerContext();
+    const labels = { ...defaultLabels, ...labelOverrides };
+    const stageRef = useRef(null);
+    const thumbnailRefs = useRef(new Map());
+    const panZoomRef = useRef(null);
+    const [failedIds, setFailedIds] = useState(() => new Set());
+    const [attempts, setAttempts] = useState({});
+    const [rotation, setRotation] = useState(0);
+    const total = items.length;
+    const atStart = activeIndex <= 0;
+    const atEnd = activeIndex >= total - 1;
+    useEffect(() => {
+        if (activeItem)
+            thumbnailRefs.current.get(activeItem.id)?.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+        setRotation(0);
+    }, [activeItem]);
+    const handleStageKeyDown = (event) => {
+        if (event.target !== event.currentTarget)
+            return;
+        const rtl = directionFor(event.currentTarget) === 'rtl';
+        if (event.key === 'ArrowLeft') {
+            event.preventDefault();
+            step(rtl ? 1 : -1);
+        }
+        else if (event.key === 'ArrowRight') {
+            event.preventDefault();
+            step(rtl ? -1 : 1);
+        }
+        else if (event.key === 'Home') {
+            event.preventDefault();
+            selectIndex(0, 'home');
+        }
+        else if (event.key === 'End') {
+            event.preventDefault();
+            selectIndex(total - 1, 'end');
+        }
+    };
+    const selectThumbnail = (index, reason = 'thumbnail') => {
+        selectIndex(index, reason);
+        const item = items[index];
+        if (item)
+            requestAnimationFrame(() => thumbnailRefs.current.get(item.id)?.focus());
+    };
+    const renderDefaultImage = (item, { key, ...imageProps }) => (_jsx("img", { ...imageProps, draggable: false }, key));
+    const failed = activeItem ? failedIds.has(activeItem.id) : false;
+    const imageProps = activeItem ? {
+        alt: activeItem.alt,
+        className: 'inkra-image-viewer__image',
+        height: activeItem.height,
+        key: `${activeItem.id}:${attempts[activeItem.id] ?? 0}`,
+        onError: () => setFailedIds(current => new Set(current).add(activeItem.id)),
+        onLoad: () => setFailedIds(current => {
+            if (!current.has(activeItem.id))
+                return current;
+            const next = new Set(current);
+            next.delete(activeItem.id);
+            return next;
+        }),
+        src: activeItem.src,
+        width: activeItem.width,
+    } : null;
+    return (_jsxs(OverlayPortal, { children: [_jsx(OverlayBackdrop, {}), _jsxs(OverlayContent, { ...props, className: ['inkra-image-viewer', className].filter(Boolean).join(' '), layout: "sections", onOpenAutoFocus: (event) => {
+                    onOpenAutoFocus?.(event);
+                    if (event.defaultPrevented)
+                        return;
+                    event.preventDefault();
+                    stageRef.current?.focus();
+                }, ref: forwardedRef, surfaceRadius: 8, children: [_jsxs(OverlayHeader, { closeLabel: labels.close, children: [_jsx(OverlayTitle, { children: labels.title }), _jsx(OverlayDescription, { className: "inkra-image-viewer__description", children: labels.description }), total > 0 ? _jsx(PencilText, { as: "span", className: "inkra-image-viewer__counter", children: labels.imagePosition(activeIndex + 1, total) }) : null] }), _jsx("div", { className: "inkra-image-viewer__body", children: activeItem && imageProps ? _jsx(_Fragment, { children: _jsxs("div", { "aria-label": activeItem.alt, className: "inkra-image-viewer__stage", onKeyDown: handleStageKeyDown, ref: stageRef, tabIndex: 0, children: [failed ? _jsxs("div", { className: "inkra-image-viewer__state", role: "alert", children: [_jsx(PencilIcon, { decorative: true, paths: imageOffPaths, size: 48, sourceSize: 24 }), _jsx(PencilText, { as: "h3", children: labels.failedTitle }), _jsx(PencilText, { as: "p", children: labels.failedDescription(activeItem) }), _jsx(Button, { variant: "outline", onClick: () => {
+                                                    const failedId = activeItem.id;
+                                                    setFailedIds(current => {
+                                                        const next = new Set(current);
+                                                        next.delete(failedId);
+                                                        return next;
+                                                    });
+                                                    setAttempts(current => ({ ...current, [failedId]: (current[failedId] ?? 0) + 1 }));
+                                                }, children: labels.retry })] }) : _jsx(PanZoom, { "aria-label": labels.panZoom(activeItem), centerOnInit: true, className: "inkra-image-viewer__pan-zoom", fitOnInit: "contain", keyboard: zoomable, maxScale: maxScale, minScale: minScale, pan: zoomable, pinch: zoomable, readOnly: !zoomable, ref: panZoomRef, wheel: zoomable ? wheel : 'disabled', children: _jsx("div", { className: "inkra-image-viewer__image-transform", style: { transform: `rotate(${rotation}deg)` }, children: (renderImage ?? renderDefaultImage)(activeItem, imageProps) }) }, activeItem.id), !failed && (zoomable || rotatable) ? _jsxs("div", { className: "inkra-image-viewer__tools", role: "group", "aria-label": labels.panZoom(activeItem), "data-pan-zoom-no-drag": true, children: [zoomable ? _jsxs(_Fragment, { children: [_jsx(Button, { "aria-label": labels.zoomOut, onClick: () => void panZoomRef.current?.zoomOut(), size: "icon-sm", variant: "outline", children: _jsx(PencilIcon, { decorative: true, paths: zoomOutPaths, size: 24, sourceSize: 24 }) }), _jsx(Button, { "aria-label": labels.resetZoom, onClick: () => void panZoomRef.current?.reset(), size: "sm", variant: "outline", children: "100%" }), _jsx(Button, { "aria-label": labels.zoomIn, onClick: () => void panZoomRef.current?.zoomIn(), size: "icon-sm", variant: "outline", children: _jsx(PencilIcon, { decorative: true, paths: zoomInPaths, size: 24, sourceSize: 24 }) })] }) : null, rotatable ? _jsx(Button, { "aria-label": labels.rotate, onClick: () => {
+                                                    setRotation(current => (current + 90) % 360);
+                                                    requestAnimationFrame(() => void panZoomRef.current?.fit({ mode: 'contain' }));
+                                                }, size: "icon-sm", variant: "outline", children: _jsx(PencilIcon, { decorative: true, paths: rotatePaths, size: 24, sourceSize: 24 }) }) : null] }) : null, total > 1 ? _jsxs("div", { className: "inkra-image-viewer__navigation", children: [_jsx(Button, { "aria-label": labels.previous, className: "inkra-image-viewer__previous", disabled: !loop && atStart, onClick: () => step(-1), size: "icon", variant: "outline", children: _jsx(PencilIcon, { decorative: true, paths: chevronLeftPaths, size: 30, sourceSize: 24 }) }), _jsx(Button, { "aria-label": labels.next, className: "inkra-image-viewer__next", disabled: !loop && atEnd, onClick: () => step(1), size: "icon", variant: "outline", children: _jsx(PencilIcon, { decorative: true, paths: chevronRightPaths, size: 30, sourceSize: 24 }) })] }) : null] }) }) : _jsx("div", { className: "inkra-image-viewer__state", ref: stageRef, tabIndex: 0, children: emptyState ?? _jsxs(_Fragment, { children: [_jsx(PencilIcon, { decorative: true, paths: imageOffPaths, size: 48, sourceSize: 24 }), _jsx(PencilText, { as: "h3", children: labels.emptyTitle }), _jsx(PencilText, { as: "p", children: labels.emptyDescription })] }) }) }), showThumbnails && total > 1 ? _jsx("div", { "aria-label": labels.thumbnails, className: "inkra-image-viewer__thumbnails", role: "listbox", children: items.map((item, index) => {
+                            const selected = index === activeIndex;
+                            return _jsxs("button", { "aria-label": labels.thumbnail(item, index + 1, total), "aria-selected": selected, className: "inkra-image-viewer__thumbnail", onClick: () => selectIndex(index, 'thumbnail'), onKeyDown: (event) => {
+                                    const rtl = directionFor(event.currentTarget) === 'rtl';
+                                    let nextIndex = index;
+                                    if (event.key === 'ArrowLeft')
+                                        nextIndex = nextImageViewerIndex(total, index, rtl ? 1 : -1, loop);
+                                    else if (event.key === 'ArrowRight')
+                                        nextIndex = nextImageViewerIndex(total, index, rtl ? -1 : 1, loop);
+                                    else if (event.key === 'Home')
+                                        nextIndex = 0;
+                                    else if (event.key === 'End')
+                                        nextIndex = total - 1;
+                                    else
+                                        return;
+                                    event.preventDefault();
+                                    selectThumbnail(nextIndex, event.key === 'Home' ? 'home' : event.key === 'End' ? 'end' : 'thumbnail');
+                                }, ref: (node) => {
+                                    if (node)
+                                        thumbnailRefs.current.set(item.id, node);
+                                    else
+                                        thumbnailRefs.current.delete(item.id);
+                                }, role: "option", tabIndex: selected ? 0 : -1, type: "button", children: [_jsx(PencilSurface, { as: "span", className: "inkra-image-viewer__thumbnail-surface", radius: 6, variant: selected ? 'selection' : 'outline', children: _jsx("img", { alt: "", className: "inkra-image-viewer__thumbnail-image", draggable: false, src: item.thumbnailSrc ?? item.src }) }), _jsx(PencilSurface, { as: "span", "aria-hidden": "true", className: "inkra-image-viewer__thumbnail-focus", radius: 6, variant: "outline" })] }, item.id);
+                        }) }) : null] })] }));
+});
+export const ImageViewer = Object.freeze({
+    Root: ImageViewerRoot,
+    Trigger: ImageViewerTrigger,
+    Content: ImageViewerContent,
+});
+export { nextImageViewerIndex, resolveImageViewerSelection } from './model.js';

package/dist/image-viewer/model.d.ts

@@ -0,0 +1,9 @@
+export interface ImageViewerIdentifiable {
+    id: string;
+}
+export interface ImageViewerSelection {
+    activeId: string | null;
+    index: number;
+}
+export declare function resolveImageViewerSelection(items: readonly ImageViewerIdentifiable[], requestedId: string | null | undefined, previousIndex?: number): ImageViewerSelection;
+export declare function nextImageViewerIndex(length: number, index: number, direction: -1 | 1, loop: boolean): number;

package/dist/image-viewer/model.js

@@ -0,0 +1,18 @@
+export function resolveImageViewerSelection(items, requestedId, previousIndex = 0) {
+    if (items.length === 0)
+        return { activeId: null, index: -1 };
+    const requestedIndex = requestedId == null ? -1 : items.findIndex(item => item.id === requestedId);
+    const index = requestedIndex >= 0
+        ? requestedIndex
+        : Math.min(Math.max(0, previousIndex), items.length - 1);
+    return { activeId: items[index].id, index };
+}
+export function nextImageViewerIndex(length, index, direction, loop) {
+    if (length <= 0)
+        return -1;
+    const current = Math.min(Math.max(0, index), length - 1);
+    const next = current + direction;
+    if (loop)
+        return (next + length) % length;
+    return Math.min(Math.max(0, next), length - 1);
+}

package/dist/index.d.ts

@@ -15,6 +15,53 @@ export * from './dropdown-menu/index.js';
 export * from './calendar/index.js';
 export * from './day-agenda/index.js';
 export * from './journey-map/index.js';
+export * from './toast/index.js';
+export * from './empty/index.js';
+export * from './toggle-group/index.js';
+export * from './alert-dialog/index.js';
+export * from './drawer/index.js';
+export * from './date-picker/index.js';
+export * from './time-picker/index.js';
+export * from './pagination/index.js';
+export * from './command/index.js';
+export * from './data-table/index.js';
+export * from './tree/index.js';
+export * from './upload/index.js';
+export * from './steps/index.js';
+export * from './timeline/index.js';
+export * from './layout/index.js';
+export * from './slot/index.js';
+export * from './log/index.js';
+export * from './hotkey/index.js';
+export * from './number-ticker/index.js';
+export * from './audio-player/index.js';
+export * from './carousel/index.js';
+export * from './choice-grid/index.js';
+export * from './color-picker/index.js';
+export * from './context-menu/index.js';
+export * from './dockable-panel/index.js';
+export * from './editable/index.js';
+export * from './flip/index.js';
+export * from './heatmap/index.js';
+export * from './hover-card/index.js';
+export * from './image-cropper/index.js';
+export * from './image-viewer/index.js';
+export * from './keypad/index.js';
+export * from './node-graph/index.js';
+export * from './overflow-list/index.js';
+export * from './pan-zoom/index.js';
+export * from './radar/index.js';
+export * from './range-slider/index.js';
+export * from './rating/index.js';
+export * from './resizable/index.js';
+export * from './scroll-area/index.js';
+export * from './sortable/index.js';
+export * from './sparkline/index.js';
+export * from './tag-input/index.js';
+export * from './transfer/index.js';
+export * from './tree-select/index.js';
+export * from './typewriter/index.js';
+export * from './virtual-list/index.js';
 export type { ButtonGroupOrientation, ButtonAlign, ButtonLoadingPosition, ButtonGroupProps, ButtonLinkProps, ButtonProps, ButtonSize, ButtonVariant, } from './Button.js';
 export { PencilLine } from './PencilLine.js';
 export type { PencilLineOrientation, PencilLineProps } from './PencilLine.js';

package/dist/index.js

@@ -15,6 +15,53 @@ export * from './dropdown-menu/index.js';
 export * from './calendar/index.js';
 export * from './day-agenda/index.js';
 export * from './journey-map/index.js';
+export * from './toast/index.js';
+export * from './empty/index.js';
+export * from './toggle-group/index.js';
+export * from './alert-dialog/index.js';
+export * from './drawer/index.js';
+export * from './date-picker/index.js';
+export * from './time-picker/index.js';
+export * from './pagination/index.js';
+export * from './command/index.js';
+export * from './data-table/index.js';
+export * from './tree/index.js';
+export * from './upload/index.js';
+export * from './steps/index.js';
+export * from './timeline/index.js';
+export * from './layout/index.js';
+export * from './slot/index.js';
+export * from './log/index.js';
+export * from './hotkey/index.js';
+export * from './number-ticker/index.js';
+export * from './audio-player/index.js';
+export * from './carousel/index.js';
+export * from './choice-grid/index.js';
+export * from './color-picker/index.js';
+export * from './context-menu/index.js';
+export * from './dockable-panel/index.js';
+export * from './editable/index.js';
+export * from './flip/index.js';
+export * from './heatmap/index.js';
+export * from './hover-card/index.js';
+export * from './image-cropper/index.js';
+export * from './image-viewer/index.js';
+export * from './keypad/index.js';
+export * from './node-graph/index.js';
+export * from './overflow-list/index.js';
+export * from './pan-zoom/index.js';
+export * from './radar/index.js';
+export * from './range-slider/index.js';
+export * from './rating/index.js';
+export * from './resizable/index.js';
+export * from './scroll-area/index.js';
+export * from './sortable/index.js';
+export * from './sparkline/index.js';
+export * from './tag-input/index.js';
+export * from './transfer/index.js';
+export * from './tree-select/index.js';
+export * from './typewriter/index.js';
+export * from './virtual-list/index.js';
 export { PencilLine } from './PencilLine.js';
 export { PencilSurface } from './PencilSurface.js';
 export { PencilText } from './PencilText.js';

package/dist/internal/cache.d.ts

@@ -1,4 +1,4 @@
-export declare const PENCIL_RENDERER_VERSION = "inkra-pencil-v4";
+export declare const PENCIL_RENDERER_VERSION = "inkra-pencil-v5";
 export declare class BoundedCache<Value> {
     private readonly maxEntries;
     private readonly maxCost;

package/dist/internal/cache.js

@@ -1,4 +1,4 @@
-export const PENCIL_RENDERER_VERSION = 'inkra-pencil-v4';
+export const PENCIL_RENDERER_VERSION = 'inkra-pencil-v5';
 export class BoundedCache {
     constructor(maxEntries, maxCost) {
         this.maxEntries = maxEntries;

package/dist/internal/renderTokens.d.ts

@@ -0,0 +1,10 @@
+export declare const pencilRenderDefaults: Readonly<{
+    strokeWidth: 2;
+    strokeRoughness: 1.5;
+    washStrength: 0.8;
+    washSpacing: 2;
+    washRoughness: 3;
+    washAngle: -45;
+}>;
+export declare const maxStrokeRoughness = 4;
+export declare function readRenderToken(style: Pick<CSSStyleDeclaration, 'getPropertyValue'>, name: string, fallback: number, min: number, max: number): number;

package/dist/internal/renderTokens.js

@@ -0,0 +1,13 @@
+export const pencilRenderDefaults = Object.freeze({
+    strokeWidth: 2,
+    strokeRoughness: 1.5,
+    washStrength: 0.8,
+    washSpacing: 2,
+    washRoughness: 3,
+    washAngle: -45,
+});
+export const maxStrokeRoughness = 4;
+export function readRenderToken(style, name, fallback, min, max) {
+    const value = Number.parseFloat(style.getPropertyValue(name));
+    return Number.isFinite(value) ? Math.max(min, Math.min(max, value)) : fallback;
+}

package/dist/internal/surfaceRenderer.d.ts

@@ -4,6 +4,14 @@ export interface PencilSurfaceTheme {
     dark: boolean;
     ink: string;
     wash: string;
+    strokeWidth?: number;
+    strokeRoughness?: number;
+    washSettings?: {
+        strength: number;
+        spacing: number;
+        roughness: number;
+        angle: number;
+    };
 }
 export declare const PENCIL_ACTION_WASH: Readonly<{
     lightStrength: 0.2;
@@ -14,9 +22,9 @@ export declare const PENCIL_QUIET_WASH: Readonly<{
     darkStrength: 0.08;
 }>;
 export declare const PENCIL_FILL_WASH: Readonly<{
-    angle: -35;
-    spacing: 1.8;
-    roughness: 3.5;
+    angle: -45;
+    spacing: 2;
+    roughness: 3;
     inset: 2;
     edgeReach: 0;
 }>;
@@ -24,9 +32,9 @@ export declare const PENCIL_SELECTION_WASH: Readonly<{
     lightStrength: 0.2;
     darkStrength: 0.12;
     radius: 8;
-    angle: -35;
-    spacing: 1.8;
-    roughness: 3.5;
+    angle: -45;
+    spacing: 2;
+    roughness: 3;
     inset: 2;
     edgeReach: 0;
 }>;

package/dist/internal/surfaceRenderer.js

@@ -1,6 +1,7 @@
 import { pencilPaper } from './paper.js';
 import { pencilStroke } from './stroke.js';
 import { drawPencilWash } from './wash.js';
+import { pencilRenderDefaults } from './renderTokens.js';
 export const PENCIL_ACTION_WASH = Object.freeze({
     lightStrength: 0.2,
     darkStrength: 0.12,
@@ -28,9 +29,9 @@ const surfaceStyles = {
     danger: { radius: 7, width: 0.75, passes: 2, strength: 0.18 },
 };
 export const PENCIL_FILL_WASH = Object.freeze({
-    angle: -35,
-    spacing: 1.8,
-    roughness: 3.5,
+    angle: pencilRenderDefaults.washAngle,
+    spacing: pencilRenderDefaults.washSpacing,
+    roughness: pencilRenderDefaults.washRoughness,
     inset: 2,
     edgeReach: 0,
 });
@@ -85,9 +86,10 @@ export function drawPencilSurface(canvas, borderCanvas, width, height, variant,
         }
         context.translate(bleed, bleed);
         drawPencilWash(context, { x: 0, y: 0, width, height }, theme.wash, seed, {
-            strength: 1,
-            spacing: 1.8,
-            roughness: 3.5,
+            strength: theme.washSettings?.strength ?? pencilRenderDefaults.washStrength / 0.48,
+            spacing: theme.washSettings?.spacing ?? pencilRenderDefaults.washSpacing,
+            roughness: theme.washSettings?.roughness ?? pencilRenderDefaults.washRoughness,
+            angle: (theme.washSettings?.angle ?? pencilRenderDefaults.washAngle) + 35,
             inset: 2,
             radius: 8,
             edgeReach: 8,
@@ -101,13 +103,13 @@ export function drawPencilSurface(canvas, borderCanvas, width, height, variant,
             borderCanvas.height = canvas.height;
         }
         drawPencilWash(context, { x: 0, y: 0, width, height }, theme.wash, seed, {
-            strength: theme.dark ? PENCIL_SELECTION_WASH.darkStrength : PENCIL_SELECTION_WASH.lightStrength,
-            spacing: PENCIL_SELECTION_WASH.spacing,
-            roughness: PENCIL_SELECTION_WASH.roughness,
+            strength: (theme.dark ? PENCIL_SELECTION_WASH.darkStrength : PENCIL_SELECTION_WASH.lightStrength) * (theme.washSettings?.strength ?? pencilRenderDefaults.washStrength / 0.48),
+            spacing: theme.washSettings?.spacing ?? PENCIL_SELECTION_WASH.spacing,
+            roughness: theme.washSettings?.roughness ?? PENCIL_SELECTION_WASH.roughness,
             inset: PENCIL_SELECTION_WASH.inset,
             radius: PENCIL_SELECTION_WASH.radius,
             edgeReach: PENCIL_SELECTION_WASH.edgeReach,
-            angle: PENCIL_SELECTION_WASH.angle,
+            angle: theme.washSettings?.angle ?? PENCIL_SELECTION_WASH.angle,
             dpr,
         });
         return undefined;
@@ -147,7 +149,8 @@ export function drawPencilSurface(canvas, borderCanvas, width, height, variant,
         if (strength) {
             drawPencilWash(context, { x: 0, y: 0, width, height }, theme.wash, seed, {
                 ...PENCIL_FILL_WASH,
-                strength,
+                ...theme.washSettings,
+                strength: strength * (theme.washSettings?.strength ?? pencilRenderDefaults.washStrength / 0.48),
                 radius: resolvedRadius,
                 dpr,
             });
@@ -164,7 +167,7 @@ export function drawPencilSurface(canvas, borderCanvas, width, height, variant,
             borderContext = separateContext;
         }
     }
-    pencilStroke(borderContext, points, theme.ink, style.width, seed, 0.6, style.passes, true, {
+    pencilStroke(borderContext, points, theme.ink, style.width * ((theme.strokeWidth ?? pencilRenderDefaults.strokeWidth) / 1.2), seed, theme.strokeRoughness ?? pencilRenderDefaults.strokeRoughness, style.passes, true, {
         variation: 0.82,
         breaks: variant === 'paper' ? 0.2 : 0.25,
         grain: 0.7,

package/dist/internal/textRenderer.d.ts

@@ -24,4 +24,5 @@ export declare function renderPencilText(text: string, options: {
     dpr: number;
     settings?: PencilLetteringSettings;
     cache?: boolean;
+    glyphSeed?: number;
 }): PencilTextSprite;