@inkra/react 0.0.0-stage → 0.2.0

package/dist/sortable/index.js

@@ -0,0 +1,278 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DndContext, DragOverlay, KeyboardSensor, MouseSensor, TouchSensor, closestCenter, pointerWithin, rectIntersection, useDroppable, useSensor, useSensors, } from '@dnd-kit/core';
+import { SortableContext, rectSortingStrategy, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy, } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { useMemo, useRef, useState } from 'react';
+import { PencilIcon } from '../PencilIcon.js';
+import { PencilLine } from '../PencilLine.js';
+import { PencilSurface } from '../PencilSurface.js';
+import { PencilText } from '../PencilText.js';
+import { cloneSortableContainers, findSortableLocation, projectSortableMove, sortableContainersEqual, } from './model.js';
+const gripIcon = [
+    { d: 'M 8 7 L 8.01 7 M 16 7 L 16.01 7 M 8 12 L 8.01 12 M 16 12 L 16.01 12 M 8 17 L 8.01 17 M 16 17 L 16.01 17' },
+];
+function engineItemId(id) {
+    return `inkra-sortable-item:${typeof id}:${String(id)}`;
+}
+function engineContainerId(id) {
+    return `inkra-sortable-container:${typeof id}:${String(id)}`;
+}
+function isInteractiveTarget(target) {
+    return target instanceof Element && Boolean(target.closest('button, a, input, select, textarea, [contenteditable="true"], [data-sortable-no-drag]'));
+}
+function filterItemActivatorProps(props) {
+    return {
+        ...props,
+        onKeyDown: (event) => {
+            if (!isInteractiveTarget(event.target))
+                props.onKeyDown?.(event);
+        },
+        onMouseDown: (event) => {
+            if (!isInteractiveTarget(event.target))
+                props.onMouseDown?.(event);
+        },
+        onTouchStart: (event) => {
+            if (!isInteractiveTarget(event.target))
+                props.onTouchStart?.(event);
+        },
+    };
+}
+const defaultLabels = {
+    handle: 'Drag item',
+    screenReaderInstructions: 'Press Space or Enter to pick up an item. Use the arrow keys to move it, Space or Enter to drop it, and Escape to cancel.',
+    pickedUp: (item, container, position, count) => `Picked up ${item}, item ${position} of ${count} in ${container}.`,
+    movedOver: (item, container, position, count) => `${item} is over position ${position} of ${count} in ${container}.`,
+    dropped: (item, container, position, count) => `Dropped ${item} at position ${position} of ${count} in ${container}.`,
+    cancelled: (item) => `Sorting cancelled. ${item} returned to its original position.`,
+};
+function getEngineData(value) {
+    const data = value?.data.current;
+    return data?.type === 'inkra-sortable-item' || data?.type === 'inkra-sortable-container' ? data : null;
+}
+function getCollisionEngineData(collision) {
+    return collision.data?.droppableContainer
+        ? getEngineData(collision.data.droppableContainer)
+        : null;
+}
+function getDropProjection(containers, event, getItemId) {
+    const activeData = getEngineData(event.active);
+    const overData = getEngineData(event.over);
+    if (activeData?.itemId === undefined || !overData || overData.disabled)
+        return cloneSortableContainers(containers);
+    const targetContainer = containers.find((container) => container.id === overData.containerId);
+    const translated = event.active.rect.current.translated;
+    const source = findSortableLocation(containers, activeData.itemId, getItemId);
+    const target = overData.itemId === undefined ? null : findSortableLocation(containers, overData.itemId, getItemId);
+    const keyboardDrag = typeof KeyboardEvent !== 'undefined' && event.activatorEvent instanceof KeyboardEvent;
+    const insertAfter = keyboardDrag
+        ? source !== null && target !== null && source.containerId === target.containerId && source.index < target.index
+        : overData.itemId !== undefined && translated !== null && targetContainer?.layout === 'grid'
+            ? translated.left + translated.width / 2 > event.over.rect.left + event.over.rect.width / 2
+            : overData.itemId !== undefined && translated !== null
+                && translated.top + translated.height / 2 > event.over.rect.top + event.over.rect.height / 2;
+    return projectSortableMove(containers, activeData.itemId, getItemId, {
+        overContainerId: overData.containerId,
+        overItemId: overData.itemId,
+        insertAfter,
+    });
+}
+const collisionDetection = (args) => {
+    const pointer = pointerWithin(args);
+    const pointerItems = pointer.filter((collision) => getCollisionEngineData(collision)?.type === 'inkra-sortable-item');
+    if (pointerItems.length > 0)
+        return pointerItems;
+    if (pointer.length > 0)
+        return pointer;
+    const intersections = rectIntersection(args);
+    const intersectingItems = intersections.filter((collision) => getCollisionEngineData(collision)?.type === 'inkra-sortable-item');
+    if (intersectingItems.length > 0)
+        return intersectingItems;
+    return intersections.length > 0 ? intersections : closestCenter(args);
+};
+function SortableContainer({ container, getItemId, renderItem, renderContainerHeader, handle, isItemDisabled, itemClassName, containerClassName, activeId, handleLabel, getItemLabel, }) {
+    const disabled = container.disabled === true;
+    const { isOver, setNodeRef } = useDroppable({
+        id: engineContainerId(container.id),
+        data: { type: 'inkra-sortable-container', containerId: container.id, disabled },
+    });
+    const ids = container.items.map((item) => engineItemId(getItemId(item)));
+    const layout = container.layout ?? 'list';
+    const acceptingOver = isOver && !disabled;
+    return _jsxs(PencilSurface, { as: "section", className: ['inkra-sortable__container', containerClassName].filter(Boolean).join(' '), "data-disabled": disabled || undefined, "data-layout": layout, "data-over": acceptingOver || undefined, "aria-disabled": disabled || undefined, "aria-label": container.label ?? String(container.id), ref: setNodeRef, seed: `sortable-container-${String(container.id)}`, variant: "paper", children: [acceptingOver && _jsx(PencilSurface, { "aria-hidden": "true", as: "span", className: "inkra-sortable__container-target", seed: `sortable-container-${String(container.id)}-target`, variant: "selection" }), (renderContainerHeader || container.label) && _jsxs("div", { className: "inkra-sortable__container-header", children: [_jsx("div", { className: "inkra-sortable__container-title", children: renderContainerHeader
+                            ? renderContainerHeader({ container, isOver: acceptingOver, itemCount: container.items.length })
+                            : container.label ? _jsx(PencilText, { children: container.label }) : null }), _jsx(PencilLine, { "aria-hidden": "true", className: "inkra-sortable__container-divider", seed: `sortable-container-${String(container.id)}-divider` })] }), _jsx(SortableContext, { items: ids, strategy: layout === 'grid' ? rectSortingStrategy : verticalListSortingStrategy, children: _jsxs("div", { className: "inkra-sortable__items", children: [container.items.map((item, index) => {
+                            const id = getItemId(item);
+                            return _jsx(SortableItem, { activeId: activeId, container: container, disabled: disabled || isItemDisabled?.(item, container) === true, handle: handle, handleLabel: `${handleLabel}: ${getItemLabel(item)}`, id: id, index: index, item: item, itemClassName: itemClassName, renderItem: renderItem }, engineItemId(id));
+                        }), container.items.length === 0 && _jsx("div", { className: "inkra-sortable__empty", "aria-hidden": "true" })] }) })] });
+}
+function SortableItem({ activeId, container, disabled, handle, handleLabel, id, index, item, itemClassName, renderItem, }) {
+    const hasHandle = handle === true || typeof handle === 'function';
+    const { attributes, isDragging, listeners, setActivatorNodeRef, setNodeRef, transform, transition, } = useSortable({
+        id: engineItemId(id),
+        disabled: disabled ? { draggable: true, droppable: false } : false,
+        data: { type: 'inkra-sortable-item', containerId: container.id, itemId: id, disabled },
+    });
+    const state = {
+        item,
+        id,
+        containerId: container.id,
+        index,
+        disabled,
+        isDragging,
+        isOverlay: false,
+    };
+    const activatorProps = { ...attributes, ...listeners };
+    const itemActivatorProps = filterItemActivatorProps({ ...attributes, ...listeners });
+    const setItemRef = (element) => {
+        setNodeRef(element);
+        if (!hasHandle)
+            setActivatorNodeRef(element);
+    };
+    return _jsxs("div", { ...(!hasHandle ? itemActivatorProps : {}), "aria-disabled": disabled || undefined, className: ['inkra-sortable__item', itemClassName].filter(Boolean).join(' '), "data-disabled": disabled || undefined, "data-dragging": isDragging || undefined, "data-sortable-id": String(id), ref: setItemRef, style: { transform: CSS.Transform.toString(transform), transition }, children: [_jsx(PencilSurface, { "aria-hidden": "true", as: "span", className: "inkra-sortable__item-surface", seed: `sortable-item-${String(id)}`, variant: "paper" }), _jsx(PencilSurface, { "aria-hidden": "true", as: "span", className: "inkra-sortable__focus", seed: `sortable-focus-${String(id)}`, variant: "outline" }), activeId === id && _jsx(PencilSurface, { "aria-hidden": "true", as: "span", className: "inkra-sortable__placeholder", seed: `sortable-placeholder-${String(id)}`, variant: "selection" }), _jsx("div", { className: "inkra-sortable__item-content", children: renderItem(state) }), hasHandle && _jsx("div", { className: "inkra-sortable__handle-slot", children: typeof handle === 'function'
+                    ? handle({ ...state, props: { ...activatorProps, 'aria-label': handleLabel, disabled, ref: setActivatorNodeRef } })
+                    : _jsx("button", { ...activatorProps, "aria-label": handleLabel, className: "inkra-sortable__handle", "data-sortable-handle": "", disabled: disabled, ref: setActivatorNodeRef, type: "button", children: _jsx(PencilIcon, { "aria-hidden": "true", paths: gripIcon, size: 24, sourceSize: 24 }) }) })] });
+}
+export function Sortable({ autoScroll = true, className, containerClassName, containers, getContainerLabel = (container) => container.label ?? String(container.id), getItemId, getItemLabel = (item) => String(getItemId(item)), handle = false, isItemDisabled, itemClassName, labels: labelsProp, onChange, onMove, onReorder, renderContainerHeader, renderItem, renderOverlay, }) {
+    const labels = { ...defaultLabels, ...labelsProp };
+    const [activeId, setActiveId] = useState(null);
+    const [activeWidth, setActiveWidth] = useState(null);
+    const [projected, setProjected] = useState(null);
+    const initialRef = useRef([]);
+    const projectedRef = useRef([]);
+    const sensors = useSensors(useSensor(MouseSensor, { activationConstraint: { distance: 6 } }), useSensor(TouchSensor, { activationConstraint: { delay: 180, tolerance: 8 } }), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }));
+    const visibleContainers = projected ?? cloneSortableContainers(containers);
+    const activeLocation = activeId === null ? null : findSortableLocation(visibleContainers, activeId, getItemId);
+    const activeContainer = activeLocation === null
+        ? null
+        : visibleContainers.find((container) => container.id === activeLocation.containerId) ?? null;
+    const activeItem = activeContainer && activeLocation
+        ? activeContainer.items[activeLocation.index]
+        : undefined;
+    const announcements = useMemo(() => ({
+        onDragStart({ active }) {
+            const data = getEngineData(active);
+            if (data?.itemId === undefined)
+                return undefined;
+            const location = findSortableLocation(containers, data.itemId, getItemId);
+            const container = location && containers.find((entry) => entry.id === location.containerId);
+            const item = container && location ? container.items[location.index] : undefined;
+            return container && location && item !== undefined
+                ? labels.pickedUp(getItemLabel(item), getContainerLabel(container), location.index + 1, container.items.length)
+                : undefined;
+        },
+        onDragOver({ active, over }) {
+            const data = getEngineData(active);
+            const overData = getEngineData(over);
+            if (data?.itemId === undefined || !overData || overData.disabled)
+                return undefined;
+            const current = projectedRef.current.length > 0 ? projectedRef.current : containers;
+            const location = findSortableLocation(current, data.itemId, getItemId);
+            const container = location && current.find((entry) => entry.id === location.containerId);
+            const item = container && location ? container.items[location.index] : undefined;
+            return container && location && item !== undefined
+                ? labels.movedOver(getItemLabel(item), getContainerLabel(container), location.index + 1, container.items.length)
+                : undefined;
+        },
+        onDragEnd({ active, over }) {
+            const data = getEngineData(active);
+            const overData = getEngineData(over);
+            if (data?.itemId === undefined || !over)
+                return undefined;
+            if (overData?.disabled) {
+                const location = findSortableLocation(initialRef.current, data.itemId, getItemId);
+                const container = location && initialRef.current.find((entry) => entry.id === location.containerId);
+                const item = container && location ? container.items[location.index] : undefined;
+                return item === undefined ? undefined : labels.cancelled(getItemLabel(item));
+            }
+            const current = projectedRef.current;
+            const location = findSortableLocation(current, data.itemId, getItemId);
+            const container = location && current.find((entry) => entry.id === location.containerId);
+            const item = container && location ? container.items[location.index] : undefined;
+            return container && location && item !== undefined
+                ? labels.dropped(getItemLabel(item), getContainerLabel(container), location.index + 1, container.items.length)
+                : undefined;
+        },
+        onDragCancel({ active }) {
+            const data = getEngineData(active);
+            if (data?.itemId === undefined)
+                return undefined;
+            const location = findSortableLocation(initialRef.current, data.itemId, getItemId);
+            const container = location && initialRef.current.find((entry) => entry.id === location.containerId);
+            const item = container && location ? container.items[location.index] : undefined;
+            return item === undefined ? undefined : labels.cancelled(getItemLabel(item));
+        },
+    }), [containers, getContainerLabel, getItemId, getItemLabel, labels]);
+    function resetDrag() {
+        setActiveId(null);
+        setActiveWidth(null);
+        setProjected(null);
+        projectedRef.current = [];
+    }
+    function handleDragStart(event) {
+        const data = getEngineData(event.active);
+        if (data?.itemId === undefined)
+            return;
+        const snapshot = cloneSortableContainers(containers);
+        initialRef.current = snapshot;
+        projectedRef.current = snapshot;
+        setProjected(snapshot);
+        setActiveId(data.itemId);
+        setActiveWidth(event.active.rect.current.initial?.width ?? null);
+    }
+    function handleDragOver(event) {
+        const overData = getEngineData(event.over);
+        if (!event.over || overData?.disabled) {
+            const restored = cloneSortableContainers(initialRef.current);
+            projectedRef.current = restored;
+            setProjected(restored);
+            return;
+        }
+        const next = getDropProjection(projectedRef.current, event, getItemId);
+        projectedRef.current = next;
+        setProjected(next);
+    }
+    function handleDragEnd(event) {
+        const data = getEngineData(event.active);
+        const overData = getEngineData(event.over);
+        if (data?.itemId === undefined || !event.over || overData?.disabled) {
+            resetDrag();
+            return;
+        }
+        const next = projectedRef.current;
+        const from = findSortableLocation(initialRef.current, data.itemId, getItemId);
+        const to = findSortableLocation(next, data.itemId, getItemId);
+        const sourceContainer = from && initialRef.current.find((container) => container.id === from.containerId);
+        const item = sourceContainer && from ? sourceContainer.items[from.index] : undefined;
+        if (from && to && item !== undefined && !sortableContainersEqual(initialRef.current, next, getItemId)) {
+            const details = {
+                activeId: data.itemId,
+                overId: overData?.itemId ?? null,
+                from,
+                to,
+                item,
+                type: from.containerId === to.containerId ? 'reorder' : 'move',
+            };
+            onChange(next, details);
+            if (details.type === 'reorder')
+                onReorder?.(details);
+            else
+                onMove?.(details);
+        }
+        resetDrag();
+    }
+    function handleDragCancel(_event) {
+        resetDrag();
+    }
+    return _jsxs(DndContext, { accessibility: {
+            announcements,
+            screenReaderInstructions: { draggable: labels.screenReaderInstructions },
+        }, autoScroll: autoScroll, collisionDetection: collisionDetection, onDragCancel: handleDragCancel, onDragEnd: handleDragEnd, onDragOver: handleDragOver, onDragStart: handleDragStart, sensors: sensors, children: [_jsx("div", { className: ['inkra-sortable', className].filter(Boolean).join(' '), "data-dragging": activeId !== null || undefined, children: visibleContainers.map((container) => _jsx(SortableContainer, { activeId: activeId, container: container, containerClassName: containerClassName, getItemId: getItemId, getItemLabel: getItemLabel, handle: handle, handleLabel: labels.handle, isItemDisabled: isItemDisabled, itemClassName: itemClassName, renderContainerHeader: renderContainerHeader, renderItem: renderItem }, container.id)) }), _jsx(DragOverlay, { dropAnimation: null, children: activeItem !== undefined && activeContainer && activeLocation ? _jsxs("div", { className: "inkra-sortable__overlay", style: activeWidth === null ? undefined : { '--inkra-sortable-overlay-width': `${activeWidth}px` }, children: [_jsx(PencilSurface, { "aria-hidden": "true", as: "span", className: "inkra-sortable__overlay-surface", seed: `sortable-overlay-${String(activeId)}`, variant: "paper" }), _jsx("div", { className: "inkra-sortable__item-content", children: (renderOverlay ?? renderItem)({
+                                item: activeItem,
+                                id: activeId,
+                                containerId: activeContainer.id,
+                                index: activeLocation.index,
+                                disabled: false,
+                                isDragging: true,
+                                isOverlay: true,
+                            }) })] }) : null })] });
+}

package/dist/sortable/model.d.ts

@@ -0,0 +1,30 @@
+export type SortableIdentifier = string | number;
+export type SortableLayout = 'list' | 'grid';
+export interface SortableContainerData<Item> {
+    id: SortableIdentifier;
+    items: readonly Item[];
+    label?: string;
+    disabled?: boolean;
+    layout?: SortableLayout;
+}
+export interface SortableLocation {
+    containerId: SortableIdentifier;
+    index: number;
+}
+export interface SortableChangeDetails<Item> {
+    activeId: SortableIdentifier;
+    overId: SortableIdentifier | null;
+    from: SortableLocation;
+    to: SortableLocation;
+    item: Item;
+    type: 'reorder' | 'move';
+}
+export interface SortableProjectionOptions {
+    overContainerId: SortableIdentifier;
+    overItemId?: SortableIdentifier;
+    insertAfter?: boolean;
+}
+export declare function cloneSortableContainers<Item>(containers: readonly SortableContainerData<Item>[]): SortableContainerData<Item>[];
+export declare function findSortableLocation<Item>(containers: readonly SortableContainerData<Item>[], itemId: SortableIdentifier, getItemId: (item: Item) => SortableIdentifier): SortableLocation | null;
+export declare function projectSortableMove<Item>(containers: readonly SortableContainerData<Item>[], activeId: SortableIdentifier, getItemId: (item: Item) => SortableIdentifier, options: SortableProjectionOptions): SortableContainerData<Item>[];
+export declare function sortableContainersEqual<Item>(left: readonly SortableContainerData<Item>[], right: readonly SortableContainerData<Item>[], getItemId: (item: Item) => SortableIdentifier): boolean;

package/dist/sortable/model.js

@@ -0,0 +1,64 @@
+export function cloneSortableContainers(containers) {
+    return containers.map((container) => ({ ...container, items: [...container.items] }));
+}
+export function findSortableLocation(containers, itemId, getItemId) {
+    for (const container of containers) {
+        const index = container.items.findIndex((item) => getItemId(item) === itemId);
+        if (index >= 0)
+            return { containerId: container.id, index };
+    }
+    return null;
+}
+export function projectSortableMove(containers, activeId, getItemId, options) {
+    const source = findSortableLocation(containers, activeId, getItemId);
+    const targetContainerIndex = containers.findIndex((container) => container.id === options.overContainerId);
+    if (!source || targetContainerIndex < 0 || containers[targetContainerIndex]?.disabled) {
+        return cloneSortableContainers(containers);
+    }
+    if (options.overItemId === activeId)
+        return cloneSortableContainers(containers);
+    const sourceContainerIndex = containers.findIndex((container) => container.id === source.containerId);
+    const result = cloneSortableContainers(containers);
+    const sourceItems = [...result[sourceContainerIndex].items];
+    const [activeItem] = sourceItems.splice(source.index, 1);
+    if (activeItem === undefined)
+        return result;
+    if (sourceContainerIndex === targetContainerIndex) {
+        const originalTargetIndex = options.overItemId === undefined
+            ? sourceItems.length
+            : containers[targetContainerIndex].items.findIndex((item) => getItemId(item) === options.overItemId);
+        if (originalTargetIndex < 0)
+            return result;
+        let targetIndex = originalTargetIndex;
+        if (source.index < originalTargetIndex)
+            targetIndex -= 1;
+        if (options.insertAfter)
+            targetIndex += 1;
+        targetIndex = Math.max(0, Math.min(targetIndex, sourceItems.length));
+        sourceItems.splice(targetIndex, 0, activeItem);
+        result[sourceContainerIndex] = { ...result[sourceContainerIndex], items: sourceItems };
+        return result;
+    }
+    const targetItems = [...result[targetContainerIndex].items];
+    let targetIndex = options.overItemId === undefined
+        ? targetItems.length
+        : targetItems.findIndex((item) => getItemId(item) === options.overItemId);
+    if (targetIndex < 0)
+        targetIndex = targetItems.length;
+    if (options.insertAfter)
+        targetIndex += 1;
+    targetIndex = Math.max(0, Math.min(targetIndex, targetItems.length));
+    targetItems.splice(targetIndex, 0, activeItem);
+    result[sourceContainerIndex] = { ...result[sourceContainerIndex], items: sourceItems };
+    result[targetContainerIndex] = { ...result[targetContainerIndex], items: targetItems };
+    return result;
+}
+export function sortableContainersEqual(left, right, getItemId) {
+    return left.length === right.length && left.every((container, containerIndex) => {
+        const other = right[containerIndex];
+        return other !== undefined
+            && container.id === other.id
+            && container.items.length === other.items.length
+            && container.items.every((item, itemIndex) => getItemId(item) === getItemId(other.items[itemIndex]));
+    });
+}

package/dist/sparkline/index.d.ts

@@ -0,0 +1,19 @@
+import type { HTMLAttributes } from 'react';
+import type { SparklineDatum } from './model.js';
+export type SparklineType = 'line' | 'bar';
+export interface SparklineProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    data: readonly SparklineDatum[];
+    type?: SparklineType;
+    width?: number;
+    height?: number;
+    min?: number;
+    max?: number;
+    label?: string;
+    showPoints?: boolean;
+    showArea?: boolean;
+    showSummary?: boolean;
+    getLabel?: (value: number | null, index: number) => string;
+}
+export declare const Sparkline: import("react").ForwardRefExoticComponent<SparklineProps & import("react").RefAttributes<HTMLDivElement>>;
+export { createSparklineGeometry, normalizeSparklineData, sparklineDomain } from './model.js';
+export type { SparklineDatum, SparklinePoint } from './model.js';

package/dist/sparkline/index.js

@@ -0,0 +1,240 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useMemo, useRef, useState } from 'react';
+import { PencilText } from '../PencilText.js';
+import { useBrowserLayoutEffect } from '../internal/useBrowserLayoutEffect.js';
+import { effectiveDpr } from '../internal/cache.js';
+import { observeCanvasRecovery } from '../internal/recovery.js';
+import { seedToNumber } from '../internal/random.js';
+import { pencilStroke } from '../internal/stroke.js';
+import { drawPencilWash } from '../internal/wash.js';
+import { pencilRenderDefaults, readRenderToken } from '../internal/renderTokens.js';
+import { createSparklineGeometry, normalizeSparklineData, sparklineDomain } from './model.js';
+function defaultLabel(value, index) {
+    return value === null ? `Point ${index + 1}: missing` : `Point ${index + 1}: ${value}`;
+}
+function resolveCssColor(host, style, token, fallback) {
+    const value = style.getPropertyValue(token).trim();
+    if (!value || !value.includes('var('))
+        return value || fallback;
+    const probe = document.createElement('span');
+    probe.style.color = `var(${token})`;
+    host.appendChild(probe);
+    const resolved = getComputedStyle(probe).color;
+    probe.remove();
+    return resolved || fallback;
+}
+export const Sparkline = forwardRef(function Sparkline({ data, type = 'line', width = 180, height = 56, min, max, label = 'Sparkline', showPoints = true, showArea = true, showSummary = true, getLabel = defaultLabel, className, ...props }, ref) {
+    const canvasRef = useRef(null);
+    const interactionCanvasRef = useRef(null);
+    const [pencilReady, setPencilReady] = useState(false);
+    const [interactionReady, setInteractionReady] = useState(false);
+    const points = useMemo(() => normalizeSparklineData(data), [data]);
+    const values = useMemo(() => points.flatMap(point => point.value === null ? [] : [point.value]), [points]);
+    const domain = useMemo(() => sparklineDomain(points), [points]);
+    const boundedPoints = useMemo(() => points.map(point => ({
+        ...point,
+        value: point.value === null ? null : Math.min(max ?? Infinity, Math.max(min ?? -Infinity, point.value)),
+    })), [max, min, points]);
+    const geometry = useMemo(() => createSparklineGeometry(boundedPoints, width, height), [boundedPoints, height, width]);
+    const [activeIndex, setActiveIndex] = useState(values.length ? [...points].reverse().find(point => point.value !== null)?.index ?? null : null);
+    const activePoint = activeIndex === null ? null : points[activeIndex] ?? null;
+    const effectiveShowPoints = showPoints || values.length === 1;
+    const summary = values.length === 0 ? 'No data' : `Current ${values[values.length - 1]}, min ${Math.min(...values)}, max ${Math.max(...values)}`;
+    const onKeyDown = (event) => {
+        if (!points.length || !['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key))
+            return;
+        event.preventDefault();
+        const current = activeIndex ?? 0;
+        const next = event.key === 'Home' ? 0 : event.key === 'End' ? points.length - 1 : Math.min(points.length - 1, Math.max(0, current + (event.key === 'ArrowRight' ? 1 : -1)));
+        setActiveIndex(next);
+    };
+    const classes = ['inkra-sparkline', `inkra-sparkline--${type}`, className].filter(Boolean).join(' ');
+    useBrowserLayoutEffect(() => {
+        const canvas = canvasRef.current;
+        if (!canvas || typeof window === 'undefined')
+            return undefined;
+        let frame = 0;
+        let disposed = false;
+        const paint = () => {
+            frame = 0;
+            if (disposed)
+                return;
+            const cssWidth = canvas.clientWidth;
+            const cssHeight = canvas.clientHeight;
+            const clear = () => { canvas.width = 1; canvas.height = 1; setPencilReady(false); };
+            if (!values.length || cssWidth < 4 || cssHeight < 4) {
+                clear();
+                return;
+            }
+            const dpr = effectiveDpr(2);
+            const context = canvas.getContext('2d');
+            if (!context || context.isContextLost?.()) {
+                clear();
+                return;
+            }
+            const style = getComputedStyle(canvas);
+            const lineColor = resolveCssColor(canvas, style, '--inkra-accent-strong', style.color);
+            const washColor = resolveCssColor(canvas, style, '--inkra-accent', lineColor);
+            const strokeWidth = readRenderToken(style, '--inkra-stroke-width', pencilRenderDefaults.strokeWidth, 0.3, 3);
+            const roughness = readRenderToken(style, '--inkra-stroke-amplitude', pencilRenderDefaults.strokeRoughness, 0, 4);
+            const washStrength = readRenderToken(style, '--inkra-wash-strength', pencilRenderDefaults.washStrength, 0, 1) / 0.48;
+            const washSpacing = readRenderToken(style, '--inkra-wash-spacing', pencilRenderDefaults.washSpacing, 1, 6);
+            const washRoughness = readRenderToken(style, '--inkra-wash-roughness', pencilRenderDefaults.washRoughness, 0, 6);
+            const washAngle = readRenderToken(style, '--inkra-wash-angle', pencilRenderDefaults.washAngle, -85, 85);
+            canvas.width = Math.ceil(cssWidth * dpr);
+            canvas.height = Math.ceil(cssHeight * dpr);
+            context.setTransform(dpr, 0, 0, dpr, 0, 0);
+            context.clearRect(0, 0, cssWidth, cssHeight);
+            const scaleX = cssWidth / width;
+            const scaleY = cssHeight / height;
+            const segments = [];
+            let segment = [];
+            boundedPoints.forEach(point => {
+                if (point.value === null) {
+                    if (segment.length)
+                        segments.push(segment);
+                    segment = [];
+                    return;
+                }
+                segment.push([geometry.x(point.index) * scaleX, geometry.y(point.value) * scaleY]);
+            });
+            if (segment.length)
+                segments.push(segment);
+            const seed = seedToNumber(`sparkline-${type}-${data.length}`);
+            if (type === 'line' && segments.some(points => points.length > 1)) {
+                if (showArea && typeof Path2D !== 'undefined' && geometry.areaPath) {
+                    context.save();
+                    context.scale(scaleX, scaleY);
+                    context.clip(new Path2D(geometry.areaPath));
+                    context.setTransform(dpr, 0, 0, dpr, 0, 0);
+                    drawPencilWash(context, { x: 0, y: 0, width: cssWidth, height: cssHeight }, washColor, seed + 17, { strength: washStrength * 0.22, spacing: washSpacing, roughness: washRoughness, angle: washAngle, inset: 2, radius: 2, dpr });
+                    context.restore();
+                }
+                segments.forEach((points, index) => {
+                    if (points.length > 1)
+                        pencilStroke(context, points, lineColor, strokeWidth, seed + index * 47, roughness, 2, false, { variation: 0.82, breaks: 0.25, grain: 0.62, gain: 2.1, step: 0.8 });
+                });
+            }
+            else if (type === 'bar') {
+                const baseline = geometry.y(0) * scaleY;
+                const barWidth = Math.max(2, cssWidth / Math.max(16, points.length * 2));
+                boundedPoints.forEach(point => {
+                    if (point.value === null)
+                        return;
+                    const y = geometry.y(point.value) * scaleY;
+                    drawPencilWash(context, { x: geometry.x(point.index) * scaleX - barWidth / 2, y: Math.min(y, baseline), width: barWidth, height: Math.max(2, Math.abs(baseline - y)) }, washColor, seed + point.index * 31, { strength: washStrength * 0.34, spacing: washSpacing, roughness: washRoughness, angle: washAngle, inset: 1, radius: 1, dpr });
+                    pencilStroke(context, [[geometry.x(point.index) * scaleX - barWidth / 2, Math.min(y, baseline)], [geometry.x(point.index) * scaleX + barWidth / 2, Math.min(y, baseline)]], lineColor, strokeWidth * 0.55, seed + point.index * 43, roughness, 1, false, { variation: 0.8, breaks: 0.2, grain: 0.65, step: 0.8 });
+                });
+            }
+            if (!disposed)
+                setPencilReady(true);
+        };
+        const schedule = () => {
+            if (frame)
+                return;
+            frame = requestAnimationFrame(() => {
+                try {
+                    paint();
+                }
+                catch {
+                    canvas.width = 1;
+                    canvas.height = 1;
+                    setPencilReady(false);
+                }
+            });
+        };
+        const resize = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(schedule);
+        resize?.observe(canvas);
+        const media = window.matchMedia('(prefers-color-scheme: dark)');
+        media.addEventListener('change', schedule);
+        const inheritedStyle = new MutationObserver(schedule);
+        for (let element = canvas; element; element = element.parentElement)
+            inheritedStyle.observe(element, { attributes: true, attributeFilter: ['style', 'class', 'data-theme', 'data-inkra-theme'] });
+        const stopRecovery = observeCanvasRecovery(() => { setPencilReady(false); schedule(); });
+        try {
+            paint();
+        }
+        catch {
+            canvas.width = 1;
+            canvas.height = 1;
+            setPencilReady(false);
+        }
+        return () => { disposed = true; setPencilReady(false); resize?.disconnect(); inheritedStyle.disconnect(); stopRecovery(); media.removeEventListener('change', schedule); cancelAnimationFrame(frame); };
+    }, [boundedPoints, data.length, geometry, height, showArea, type, values.length, width]);
+    useBrowserLayoutEffect(() => {
+        const canvas = interactionCanvasRef.current;
+        if (!canvas || typeof window === 'undefined')
+            return undefined;
+        let frame = 0;
+        const paint = () => {
+            frame = 0;
+            const cssWidth = canvas.clientWidth;
+            const cssHeight = canvas.clientHeight;
+            const context = canvas.getContext('2d');
+            const clearInteraction = () => { canvas.width = 1; canvas.height = 1; setInteractionReady(false); };
+            if (!context || cssWidth < 4 || cssHeight < 4 || !values.length) {
+                clearInteraction();
+                return;
+            }
+            const dpr = effectiveDpr(2);
+            const style = getComputedStyle(canvas);
+            const lineColor = resolveCssColor(canvas, style, '--inkra-accent-strong', style.color);
+            const strokeWidth = readRenderToken(style, '--inkra-stroke-width', pencilRenderDefaults.strokeWidth, 0.3, 3);
+            const roughness = readRenderToken(style, '--inkra-stroke-amplitude', pencilRenderDefaults.strokeRoughness, 0, 4);
+            canvas.width = Math.ceil(cssWidth * dpr);
+            canvas.height = Math.ceil(cssHeight * dpr);
+            context.setTransform(dpr, 0, 0, dpr, 0, 0);
+            context.clearRect(0, 0, cssWidth, cssHeight);
+            const scaleX = cssWidth / width;
+            const scaleY = cssHeight / height;
+            const seed = seedToNumber(`sparkline-interaction-${type}-${data.length}`);
+            if (type === 'line' && effectiveShowPoints)
+                boundedPoints.forEach(point => {
+                    if (point.value === null)
+                        return;
+                    const x = geometry.x(point.index) * scaleX;
+                    const y = geometry.y(point.value) * scaleY;
+                    pencilStroke(context, [[x - 2.8, y], [x, y - 2.8], [x + 2.8, y], [x, y + 2.8], [x - 2.8, y]], lineColor, strokeWidth * 0.7, seed + point.index * 61, roughness, 1, true, { variation: 0.75, breaks: 0.12, grain: 0.62, gain: 1.8, step: 0.8 });
+                });
+            if (activePoint && activePoint.value !== null) {
+                const x = geometry.x(activePoint.index) * scaleX;
+                pencilStroke(context, [[x, 2], [x, cssHeight - 2]], lineColor, strokeWidth * 0.18, seed + 401, roughness, 1, false, { variation: 0.55, breaks: 0.45, grain: 0.5, gain: 1.1, step: 1.2 });
+            }
+            setInteractionReady(true);
+        };
+        const schedule = () => { if (!frame)
+            frame = requestAnimationFrame(() => { try {
+                paint();
+            }
+            catch {
+                canvas.width = 1;
+                canvas.height = 1;
+                setInteractionReady(false);
+            } }); };
+        const resize = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(schedule);
+        resize?.observe(canvas);
+        const media = window.matchMedia('(prefers-color-scheme: dark)');
+        media.addEventListener('change', schedule);
+        const inheritedStyle = new MutationObserver(schedule);
+        for (let element = canvas; element; element = element.parentElement)
+            inheritedStyle.observe(element, { attributes: true, attributeFilter: ['style', 'class', 'data-theme', 'data-inkra-theme'] });
+        const stopRecovery = observeCanvasRecovery(() => { setInteractionReady(false); schedule(); });
+        try {
+            paint();
+        }
+        catch {
+            canvas.width = 1;
+            canvas.height = 1;
+            setInteractionReady(false);
+        }
+        return () => { setInteractionReady(false); resize?.disconnect(); inheritedStyle.disconnect(); stopRecovery(); media.removeEventListener('change', schedule); cancelAnimationFrame(frame); };
+    }, [activeIndex, activePoint, boundedPoints, data.length, effectiveShowPoints, geometry, height, type, values.length, width]);
+    return _jsxs("div", { ...props, ref: ref, className: `${classes}${pencilReady ? ' inkra-sparkline--pencil-ready' : ''}${interactionReady ? ' inkra-sparkline--interaction-ready' : ''}`, "data-empty": values.length === 0 || undefined, "data-show-points": effectiveShowPoints || undefined, children: [_jsxs("svg", { className: "inkra-sparkline__svg", viewBox: `0 0 ${width} ${height}`, role: "img", "aria-label": label, tabIndex: 0, onKeyDown: onKeyDown, children: [showArea && type === 'line' && geometry.areaPath && _jsx("path", { className: "inkra-sparkline__area", d: geometry.areaPath, "aria-hidden": "true" }), type === 'line' && geometry.linePath && _jsx("path", { className: "inkra-sparkline__line", d: geometry.linePath, "aria-hidden": "true" }), type === 'bar' && boundedPoints.map(point => {
+                        if (point.value === null)
+                            return null;
+                        const baseline = geometry.y(0);
+                        const valueY = geometry.y(point.value);
+                        return _jsx("rect", { className: "inkra-sparkline__bar", x: geometry.x(point.index) - Math.max(2, width / Math.max(16, points.length * 2)) / 2, width: Math.max(2, width / Math.max(16, points.length * 2)), y: Math.min(baseline, valueY), height: Math.max(1, Math.abs(baseline - valueY)), "data-index": point.index, "data-active": activeIndex === point.index || undefined, onMouseEnter: () => setActiveIndex(point.index) }, point.index);
+                    }), (showPoints || values.length === 1) && type === 'line' && boundedPoints.map(point => point.value === null ? null : _jsx("circle", { className: "inkra-sparkline__point", cx: geometry.x(point.index), cy: geometry.y(point.value), r: activeIndex === point.index ? 3.5 : 2, "data-active": activeIndex === point.index || undefined, onMouseEnter: () => setActiveIndex(point.index) }, point.index)), activePoint && activePoint.value !== null && _jsx("line", { className: "inkra-sparkline__guide", x1: geometry.x(activePoint.index), x2: geometry.x(activePoint.index), y1: 4, y2: height - 4, "aria-hidden": "true" })] }), _jsx("canvas", { ref: canvasRef, className: "inkra-sparkline__pencil inkra-sparkline__pencil--static", style: { aspectRatio: `${width} / ${height}` }, "aria-hidden": "true" }), _jsx("canvas", { ref: interactionCanvasRef, className: "inkra-sparkline__pencil inkra-sparkline__pencil--interaction", style: { aspectRatio: `${width} / ${height}` }, "aria-hidden": "true" }), activePoint && _jsx("div", { className: "inkra-sparkline__tooltip", "aria-hidden": "true", children: _jsx(PencilText, { children: getLabel(activePoint.value, activePoint.index) }) }), showSummary && _jsxs("p", { className: "inkra-sparkline__summary", children: [_jsxs("span", { className: "visually-hidden", children: [label, ": "] }), _jsx(PencilText, { seed: `sparkline-summary-${label}-${summary}`, children: summary })] }), _jsx("div", { className: "inkra-sparkline__data", "aria-label": `${label} data`, children: points.map(point => _jsx("span", { children: getLabel(point.value, point.index) }, point.index)) }), _jsxs("span", { className: "visually-hidden", children: ["Domain ", domain[0], " to ", domain[1]] })] });
+});
+export { createSparklineGeometry, normalizeSparklineData, sparklineDomain } from './model.js';