@inkra/react 0.0.0-stage → 0.1.0

package/dist/PencilIcon.js

@@ -0,0 +1,212 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
+import { BoundedCache, PENCIL_RENDERER_VERSION, canvasByteCost, canvasIsUsable, effectiveDpr, } from './internal/cache.js';
+import { observeCanvasRecovery } from './internal/recovery.js';
+import { seedToNumber } from './internal/random.js';
+import { pencilStroke } from './internal/stroke.js';
+const geometryCache = new BoundedCache(256, 180000);
+const imageCache = new BoundedCache(128, 24 * 1024 * 1024);
+function cachedPathParts(data) {
+    const key = `${PENCIL_RENDERER_VERSION}:${data}`;
+    const cached = geometryCache.get(key);
+    if (cached)
+        return cached;
+    const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+    path.setAttribute('d', data);
+    const length = path.getTotalLength();
+    const count = Math.max(1, Math.ceil(length / 0.25));
+    const parts = [[]];
+    for (let index = 0; index <= count; index += 1) {
+        const point = path.getPointAtLength(length * index / count);
+        const activePart = parts[parts.length - 1];
+        const previous = activePart[activePart.length - 1];
+        if (previous && Math.hypot(point.x - previous[0], point.y - previous[1]) > 0.5)
+            parts.push([]);
+        parts[parts.length - 1].push([point.x, point.y]);
+    }
+    return geometryCache.set(key, parts, parts.reduce((total, part) => total + part.length, 0));
+}
+function drawFallbackPath(context, data, color, mode, weightScale = 1) {
+    try {
+        const path = new Path2D(data);
+        context.save();
+        context.strokeStyle = color;
+        context.lineCap = 'round';
+        context.lineJoin = 'round';
+        context.lineWidth = (mode === 'scuff' ? 0.65 : 1.4) * weightScale;
+        context.globalAlpha = mode === 'scuff' ? 0.6 : 0.9;
+        context.stroke(path);
+        context.restore();
+    }
+    catch {
+        // Semantic controls remain usable even when a path cannot be painted.
+    }
+}
+function renderIcon(paths, options) {
+    const { seed, size, sourceSize, active, color, dpr } = options;
+    const weightScale = options.weightScale ?? 1;
+    const canvas = document.createElement('canvas');
+    canvas.width = Math.round(size * dpr);
+    canvas.height = Math.round(size * dpr);
+    const context = canvas.getContext('2d');
+    if (!context)
+        return canvas;
+    const coordinateScale = size / 40;
+    context.scale(dpr * coordinateScale, dpr * coordinateScale);
+    const offset = (40 - sourceSize) / 2;
+    context.translate(offset, offset);
+    paths.forEach((path, index) => {
+        const mode = path.mode ?? 'stroke';
+        const pathSeed = seed + index * 137;
+        if (mode === 'wash') {
+            try {
+                context.save();
+                context.clip(new Path2D(path.d));
+                context.globalAlpha = active ? 0.76 : 0.34;
+                for (let y = sourceSize * 0.18; y < sourceSize; y += 1.6) {
+                    pencilStroke(context, [[sourceSize * 0.15, y + 3], [sourceSize * 0.85, y - 3]], color, 1.1, pathSeed + Math.round(y * 17), 0.25, 2, false, { variation: 0.85, breaks: 0.25, grain: 0.7, gain: 2.2, step: 0.35 });
+                }
+                context.restore();
+            }
+            catch {
+                drawFallbackPath(context, path.d, color, mode, weightScale);
+            }
+            return;
+        }
+        try {
+            const parts = cachedPathParts(path.d);
+            for (const points of parts) {
+                pencilStroke(context, points, color, (mode === 'scuff' ? 0.55 : 1.65) * weightScale, pathSeed, 0.3, mode === 'scuff' ? 1 : 3, false, {
+                    variation: 0.82,
+                    breaks: 0.18,
+                    grain: 0.68,
+                    gain: mode === 'scuff' ? 1.5 : 3,
+                    step: 0.35,
+                    taperLength: 0.65,
+                });
+            }
+        }
+        catch {
+            drawFallbackPath(context, path.d, color, mode, weightScale);
+        }
+    });
+    if (active) {
+        pencilStroke(context, [[sourceSize * 0.2, sourceSize - 2], [sourceSize * 0.5, sourceSize - 1.5], [sourceSize * 0.8, sourceSize - 2.2]], color, 1.1, seed + 977, 0.25, 3, false, { variation: 0.8, breaks: 0.25, grain: 0.7, gain: 2.8, step: 0.35 });
+    }
+    if (options.badge?.paths.length) {
+        const badge = options.badge;
+        const scale = Number.isFinite(badge.scale) ? Math.min(0.65, Math.max(0.35, badge.scale)) : 0.55;
+        const badgeSourceSize = Number.isFinite(badge.sourceSize) ? Math.min(32, Math.max(1, badge.sourceSize)) : 24;
+        const position = badge.position ?? 'bottom-end';
+        const onLeft = position.endsWith('start') !== Boolean(options.rtl);
+        const extent = 40 * scale;
+        const x = onLeft ? 0 : 40 - extent;
+        const y = position.startsWith('top') ? 0 : 40 - extent;
+        const badgeImage = renderIcon(badge.paths, {
+            seed: seed + 1543, size: size * scale, sourceSize: badgeSourceSize, active: false, color, dpr,
+            weightScale: 1 / scale,
+        });
+        const mask = document.createElement('canvas');
+        mask.width = badgeImage.width;
+        mask.height = badgeImage.height;
+        const maskContext = mask.getContext('2d');
+        if (maskContext) {
+            maskContext.drawImage(badgeImage, 0, 0);
+            const pixels = maskContext.getImageData(0, 0, mask.width, mask.height);
+            for (let index = 3; index < pixels.data.length; index += 4) {
+                pixels.data[index] = pixels.data[index] ? 255 : 0;
+            }
+            maskContext.putImageData(pixels, 0, 0);
+        }
+        context.save();
+        context.setTransform(dpr * coordinateScale, 0, 0, dpr * coordinateScale, 0, 0);
+        // A narrow contour halo separates the strokes without cutting a disk out of the base icon.
+        context.globalCompositeOperation = 'destination-out';
+        for (let step = 0; step < 8; step += 1) {
+            const angle = step * Math.PI / 4;
+            context.drawImage(mask, x + Math.cos(angle) * 1.25, y + Math.sin(angle) * 1.25, extent, extent);
+        }
+        context.drawImage(mask, x, y, extent, extent);
+        context.globalCompositeOperation = 'source-over';
+        context.drawImage(badgeImage, x, y, extent, extent);
+        context.restore();
+    }
+    return canvas;
+}
+export const PencilIcon = forwardRef(function PencilIcon({ active = false, badge, className = '', decorative = true, paths, seed, size = 40, sourceSize = 32, ...props }, forwardedRef) {
+    const canvasRef = useRef(null);
+    useImperativeHandle(forwardedRef, () => canvasRef.current);
+    const geometryKey = useMemo(() => JSON.stringify(paths), [paths]);
+    const badgeKey = useMemo(() => badge ? JSON.stringify(badge) : '', [badge]);
+    const resolvedSeed = seedToNumber(seed ?? geometryKey);
+    useEffect(() => {
+        const canvas = canvasRef.current;
+        if (!canvas)
+            return undefined;
+        let disposed = false;
+        let lastPaint = '';
+        const paint = () => {
+            if (disposed)
+                return;
+            const dpr = effectiveDpr(3);
+            const computed = getComputedStyle(canvas);
+            const color = computed.color;
+            const rtl = computed.direction === 'rtl';
+            const key = JSON.stringify([
+                PENCIL_RENDERER_VERSION,
+                geometryKey,
+                badgeKey,
+                rtl,
+                resolvedSeed,
+                size,
+                sourceSize,
+                active,
+                color,
+                dpr,
+            ]);
+            if (key === lastPaint && canvasIsUsable(canvas))
+                return;
+            let image = imageCache.get(key);
+            if (image && !canvasIsUsable(image)) {
+                imageCache.delete(key);
+                image = undefined;
+            }
+            if (!image) {
+                image = renderIcon(paths, { seed: resolvedSeed, size, sourceSize, active, color, dpr, badge, rtl });
+                imageCache.set(key, image, canvasByteCost(image));
+            }
+            canvas.width = image.width;
+            canvas.height = image.height;
+            const context = canvas.getContext('2d');
+            if (!context || context.isContextLost?.())
+                return;
+            context.drawImage(image, 0, 0);
+            lastPaint = key;
+        };
+        const appearance = new MutationObserver(paint);
+        appearance.observe(document.documentElement, {
+            attributes: true,
+            subtree: true,
+            attributeFilter: ['data-theme', 'data-inkra-theme'],
+        });
+        const inheritedColor = new MutationObserver(paint);
+        for (let element = canvas; element; element = element.parentElement) {
+            inheritedColor.observe(element, { attributes: true, attributeFilter: ['style', 'class', 'dir'] });
+        }
+        const colorScheme = window.matchMedia('(prefers-color-scheme: dark)');
+        colorScheme.addEventListener('change', paint);
+        const stopRecovery = observeCanvasRecovery(() => { lastPaint = ''; paint(); });
+        paint();
+        return () => {
+            disposed = true;
+            stopRecovery();
+            appearance.disconnect();
+            inheritedColor.disconnect();
+            colorScheme.removeEventListener('change', paint);
+        };
+    }, [active, badge, badgeKey, geometryKey, paths, resolvedSeed, size, sourceSize]);
+    const accessibilityProps = decorative
+        ? { 'aria-hidden': true }
+        : { role: props.role ?? 'img' };
+    return (_jsx("canvas", { ...props, ...accessibilityProps, className: ['inkra-pencil-icon', className].filter(Boolean).join(' '), "data-active": active || undefined, "data-composite": Boolean(badge?.paths.length) || undefined, "data-renderer": "inkra-pressure-pencil", ref: canvasRef, style: { width: size, height: size, ...props.style } }));
+});

package/dist/PencilLine.d.ts

@@ -0,0 +1,10 @@
+import type { CanvasHTMLAttributes } from 'react';
+import type { PencilLineOrientation } from './internal/line.js';
+export interface PencilLineProps extends Omit<CanvasHTMLAttributes<HTMLCanvasElement>, 'children'> {
+    seed?: string | number;
+    weight?: number;
+    roughness?: number;
+    orientation?: PencilLineOrientation;
+}
+export declare const PencilLine: import("react").ForwardRefExoticComponent<PencilLineProps & import("react").RefAttributes<HTMLCanvasElement>>;
+export type { PencilLineOrientation };

package/dist/PencilLine.js

@@ -0,0 +1,85 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
+import { BoundedCache, PENCIL_RENDERER_VERSION, canvasByteCost, canvasIsUsable, effectiveDpr, } from './internal/cache.js';
+import { observeCanvasRecovery } from './internal/recovery.js';
+import { seedToNumber } from './internal/random.js';
+import { createPencilLinePoints, pencilLineHasDrawableSize } from './internal/line.js';
+import { pencilStroke } from './internal/stroke.js';
+const lineCache = new BoundedCache(96, 12 * 1024 * 1024);
+function renderLine(width, height, color, seed, weight, roughness, orientation, dpr) {
+    const canvas = document.createElement('canvas');
+    canvas.width = Math.ceil(width * dpr);
+    canvas.height = Math.ceil(height * dpr);
+    const context = canvas.getContext('2d');
+    if (!context)
+        return canvas;
+    context.scale(dpr, dpr);
+    pencilStroke(context, createPencilLinePoints(width, height, orientation, roughness), color, weight, seed, roughness, 3, false, { variation: 0.82, breaks: 0.18, grain: 0.68, gain: 2.6, step: 0.5, taperLength: 1.4 });
+    return canvas;
+}
+export const PencilLine = forwardRef(function PencilLine({ className = '', orientation = 'horizontal', roughness = 0.6, seed = 'inkra-pencil-line', weight = 1.2, ...props }, forwardedRef) {
+    const canvasRef = useRef(null);
+    useImperativeHandle(forwardedRef, () => canvasRef.current);
+    useEffect(() => {
+        const canvas = canvasRef.current;
+        if (!canvas)
+            return undefined;
+        let frame = 0;
+        let disposed = false;
+        const paint = () => {
+            frame = 0;
+            if (disposed)
+                return;
+            const width = canvas.clientWidth;
+            const height = canvas.clientHeight;
+            if (!pencilLineHasDrawableSize(width, height, orientation))
+                return;
+            const dpr = effectiveDpr(2);
+            const color = getComputedStyle(canvas).color;
+            const numericSeed = seedToNumber(seed);
+            const key = JSON.stringify([
+                PENCIL_RENDERER_VERSION, orientation, width, height, color, numericSeed, weight, roughness, dpr,
+            ]);
+            let image = lineCache.get(key);
+            if (image && !canvasIsUsable(image)) {
+                lineCache.delete(key);
+                image = undefined;
+            }
+            if (!image) {
+                image = renderLine(width, height, color, numericSeed, weight, roughness, orientation, dpr);
+                lineCache.set(key, image, canvasByteCost(image));
+            }
+            canvas.width = image.width;
+            canvas.height = image.height;
+            const context = canvas.getContext('2d');
+            if (!context || context.isContextLost?.())
+                return;
+            context.drawImage(image, 0, 0);
+        };
+        const schedule = () => {
+            if (!frame)
+                frame = requestAnimationFrame(paint);
+        };
+        const resize = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(schedule);
+        resize?.observe(canvas);
+        const appearance = new MutationObserver(schedule);
+        appearance.observe(document.documentElement, {
+            attributes: true,
+            subtree: true,
+            attributeFilter: ['data-theme', 'data-inkra-theme'],
+        });
+        const colorScheme = window.matchMedia('(prefers-color-scheme: dark)');
+        colorScheme.addEventListener('change', schedule);
+        const stopRecovery = observeCanvasRecovery(schedule);
+        paint();
+        return () => {
+            disposed = true;
+            stopRecovery();
+            resize?.disconnect();
+            appearance.disconnect();
+            colorScheme.removeEventListener('change', schedule);
+            cancelAnimationFrame(frame);
+        };
+    }, [orientation, roughness, seed, weight]);
+    return (_jsx("canvas", { ...props, "aria-hidden": "true", className: ['inkra-pencil-line', className].filter(Boolean).join(' '), "data-orientation": orientation, "data-renderer": "inkra-pressure-pencil", ref: canvasRef }));
+});

package/dist/PencilSurface.d.ts

@@ -0,0 +1,19 @@
+import type { ComponentPropsWithoutRef, ComponentPropsWithRef, ElementType, ReactElement, ReactNode } from 'react';
+import type { PencilSurfaceVariant } from './internal/surfaceRenderer.js';
+interface PencilSurfaceBaseProps {
+    variant?: PencilSurfaceVariant;
+    seed?: string | number;
+    clipContent?: boolean;
+    radius?: number;
+    className?: string;
+    children?: ReactNode;
+}
+type PencilSurfaceOwnProps<Element extends ElementType> = PencilSurfaceBaseProps & {
+    as?: Element;
+};
+export type PencilSurfaceProps<Element extends ElementType = 'div'> = PencilSurfaceOwnProps<Element> & Omit<ComponentPropsWithoutRef<Element>, keyof PencilSurfaceOwnProps<Element>>;
+type PencilSurfaceComponent = <Element extends ElementType = 'div'>(props: PencilSurfaceProps<Element> & {
+    ref?: ComponentPropsWithRef<Element>['ref'];
+}) => ReactElement | null;
+export declare const PencilSurface: PencilSurfaceComponent;
+export type { PencilSurfaceVariant };

package/dist/PencilSurface.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useImperativeHandle, useRef } from 'react';
+import { usePencilSurface } from './internal/usePencilSurface.js';
+const PencilSurfaceImplementation = forwardRef(function PencilSurface({ as: Element = 'div', variant = 'paper', seed = 23, className = '', clipContent = false, radius, children, ...props }, forwardedRef) {
+    const rootRef = useRef(null);
+    const canvasRef = useRef(null);
+    const borderRef = useRef(null);
+    useImperativeHandle(forwardedRef, () => rootRef.current);
+    usePencilSurface(rootRef, canvasRef, borderRef, variant, seed, clipContent, radius);
+    const classes = [
+        'inkra-pencil-surface',
+        `inkra-pencil-surface--${variant}`,
+        clipContent && 'inkra-pencil-surface--clipped',
+        className,
+    ].filter(Boolean).join(' ');
+    const nativeProps = Element === 'button' ? { type: 'button', ...props } : props;
+    return (_jsxs(Element, { ...nativeProps, className: classes, ref: rootRef, children: [_jsx("canvas", { "aria-hidden": "true", className: "inkra-pencil-surface__ink", ref: canvasRef }), clipContent ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "inkra-pencil-surface__content", children: children }), _jsx("canvas", { "aria-hidden": "true", className: "inkra-pencil-surface__border", ref: borderRef })] })) : children] }));
+});
+export const PencilSurface = PencilSurfaceImplementation;

package/dist/PencilText.d.ts

@@ -0,0 +1,16 @@
+import type { ComponentPropsWithoutRef, ComponentPropsWithRef, ElementType, ReactElement } from 'react';
+interface PencilTextBaseProps {
+    children: string;
+    seed?: string | number;
+    ellipsis?: boolean;
+    className?: string;
+}
+type PencilTextOwnProps<Element extends ElementType> = PencilTextBaseProps & {
+    as?: Element;
+};
+export type PencilTextProps<Element extends ElementType = 'span'> = PencilTextOwnProps<Element> & Omit<ComponentPropsWithoutRef<Element>, keyof PencilTextOwnProps<Element>>;
+type PencilTextComponent = <Element extends ElementType = 'span'>(props: PencilTextProps<Element> & {
+    ref?: ComponentPropsWithRef<Element>['ref'];
+}) => ReactElement | null;
+export declare const PencilText: PencilTextComponent;
+export {};

package/dist/PencilText.js

@@ -0,0 +1,205 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
+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 { renderPencilText } from './internal/textRenderer.js';
+import { queueTextPaint } from './internal/textQueue.js';
+function textSeed(text) {
+    return Array.from(text).reduce((seed, character) => Math.imul(seed ^ character.codePointAt(0), 16777619), 71) >>> 0;
+}
+function paintText(element, source, canvas, text, seed) {
+    const box = element.getBoundingClientRect();
+    if (!box.width || !box.height || text.length > 4096 || !source.firstChild)
+        return false;
+    const style = getComputedStyle(element);
+    const size = Number.parseFloat(style.fontSize);
+    const context = canvas.getContext('2d');
+    const padding = 5;
+    const width = box.width + padding * 2;
+    const height = box.height + padding * 2;
+    const dpr = effectiveDpr(2);
+    if (width * height * dpr ** 2 > 2 * 1024 * 1024 || !context || context.isContextLost?.())
+        return false;
+    canvas.width = Math.ceil(width * dpr);
+    canvas.height = Math.ceil(height * dpr);
+    Object.assign(canvas.style, {
+        left: `-${padding}px`,
+        top: `-${padding}px`,
+        right: 'auto',
+        bottom: 'auto',
+        width: `${width}px`,
+        height: `${height}px`,
+    });
+    context.scale(dpr, dpr);
+    context.font = `400 ${size}px ${style.fontFamily}`;
+    context.fontKerning = 'none';
+    const ascent = context.measureText(text).fontBoundingBoxAscent ?? size;
+    const range = document.createRange();
+    const lines = [];
+    let offset = 0;
+    for (const character of text) {
+        range.setStart(source.firstChild, offset);
+        offset += character.length;
+        range.setEnd(source.firstChild, offset);
+        const rectangle = range.getBoundingClientRect();
+        let line = lines[lines.length - 1];
+        if (!line || Math.abs(line.top - rectangle.top) > 1) {
+            line = { text: '', left: rectangle.left, top: rectangle.top };
+            lines.push(line);
+        }
+        line.text += character;
+    }
+    for (const line of lines) {
+        const lineText = line.text.trimEnd();
+        if (!lineText)
+            continue;
+        const sprite = renderPencilText(lineText, {
+            size,
+            seed: seedToNumber(seed) ^ textSeed(line.text),
+            color: style.color,
+            family: style.fontFamily,
+            dpr,
+        });
+        if (sprite.ink.getContext('2d')?.isContextLost?.())
+            return false;
+        context.drawImage(sprite.ink, padding + line.left - box.left - sprite.padding, padding + line.top - box.top + ascent - sprite.ascent - sprite.padding, sprite.width, sprite.height);
+    }
+    canvas.dataset.lines = String(lines.length);
+    element.dataset.pencilReady = 'true';
+    return true;
+}
+const PencilTextImplementation = forwardRef(function PencilText({ as: Element = 'span', children, seed, ellipsis = false, className = '', ...props }, forwardedRef) {
+    const [text, setText] = useState(children);
+    const elementRef = useRef(null);
+    const sourceRef = useRef(null);
+    const canvasRef = useRef(null);
+    const resolvedSeed = seed ?? children;
+    useImperativeHandle(forwardedRef, () => elementRef.current);
+    useBrowserLayoutEffect(() => {
+        if (!ellipsis) {
+            setText(children);
+            return undefined;
+        }
+        const node = elementRef.current;
+        const canvas = canvasRef.current;
+        if (!node || !canvas)
+            return undefined;
+        let disposed = false;
+        const fit = () => {
+            const width = node.clientWidth - 8;
+            if (width <= 0)
+                return;
+            const style = getComputedStyle(node);
+            const context = canvas.getContext('2d');
+            if (!context || context.isContextLost?.())
+                return;
+            context.font = `400 ${style.fontSize} ${style.fontFamily}`;
+            context.fontKerning = 'none';
+            const measure = (value) => context.measureText(value).width;
+            if (measure(children) <= width) {
+                setText(previous => previous === children ? previous : children);
+                return;
+            }
+            const characters = Array.from(children);
+            let low = 0;
+            let high = characters.length;
+            while (low < high) {
+                const middle = Math.ceil((low + high) / 2);
+                if (measure(`${characters.slice(0, middle).join('')}…`) <= width)
+                    low = middle;
+                else
+                    high = middle - 1;
+            }
+            const clipped = `${characters.slice(0, low).join('').trimEnd()}…`;
+            setText(previous => previous === clipped ? previous : clipped);
+        };
+        const resize = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(fit);
+        resize?.observe(node);
+        document.fonts?.ready.then(() => { if (!disposed)
+            fit(); });
+        fit();
+        return () => {
+            disposed = true;
+            resize?.disconnect();
+        };
+    }, [children, ellipsis]);
+    useEffect(() => {
+        const node = elementRef.current;
+        const source = sourceRef.current;
+        const canvas = canvasRef.current;
+        if (!node || !source || !canvas)
+            return undefined;
+        delete node.dataset.pencilReady;
+        let disposed = false;
+        let visible = typeof IntersectionObserver === 'undefined';
+        let pending = null;
+        let dirty = true;
+        const schedule = () => {
+            if (!visible || !dirty || pending || disposed)
+                return;
+            pending = queueTextPaint(() => {
+                pending = null;
+                if (!disposed && visible && dirty) {
+                    try {
+                        paintText(node, source, canvas, text, resolvedSeed);
+                    }
+                    catch {
+                        delete node.dataset.pencilReady;
+                    }
+                    dirty = false;
+                }
+            });
+        };
+        const markDirty = () => {
+            dirty = true;
+            delete node.dataset.pencilReady;
+            schedule();
+        };
+        const resize = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(markDirty);
+        resize?.observe(node);
+        const appearance = new MutationObserver(markDirty);
+        appearance.observe(document.documentElement, {
+            attributes: true,
+            subtree: true,
+            attributeFilter: ['data-theme', 'data-inkra-theme'],
+        });
+        const colorScheme = window.matchMedia('(prefers-color-scheme: dark)');
+        colorScheme.addEventListener('change', markDirty);
+        const intersection = typeof IntersectionObserver === 'undefined' ? null : new IntersectionObserver(entries => {
+            visible = entries[entries.length - 1]?.isIntersecting ?? false;
+            schedule();
+        }, { rootMargin: '80px' });
+        intersection?.observe(node);
+        const fonts = document.fonts;
+        fonts?.addEventListener('loading', markDirty);
+        fonts?.addEventListener('loadingdone', markDirty);
+        fonts?.addEventListener('loadingerror', markDirty);
+        fonts?.ready.then(() => { if (!disposed)
+            markDirty(); });
+        const stopRecovery = observeCanvasRecovery(() => {
+            pending?.();
+            pending = null;
+            markDirty();
+        });
+        schedule();
+        return () => {
+            disposed = true;
+            stopRecovery();
+            pending?.();
+            resize?.disconnect();
+            intersection?.disconnect();
+            appearance.disconnect();
+            colorScheme.removeEventListener('change', markDirty);
+            fonts?.removeEventListener('loading', markDirty);
+            fonts?.removeEventListener('loadingdone', markDirty);
+            fonts?.removeEventListener('loadingerror', markDirty);
+        };
+    }, [text, resolvedSeed]);
+    const classes = ['inkra-pencil-text', ellipsis && 'inkra-pencil-text--ellipsis', className]
+        .filter(Boolean).join(' ');
+    const title = props.title ?? (ellipsis ? children : undefined);
+    return (_jsxs(Element, { ...props, className: classes, ref: elementRef, title: title, children: [_jsx("span", { className: "inkra-pencil-text__source", ref: sourceRef, children: children }), _jsx("canvas", { "aria-hidden": "true", "data-renderer": "inkra-pencil-lettering-c", ref: canvasRef })] }));
+});
+export const PencilText = PencilTextImplementation;

package/dist/accordion/Accordion.d.ts

@@ -0,0 +1,27 @@
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
+import type { ReactNode } from 'react';
+export type AccordionRootProps = AccordionPrimitive.AccordionSingleProps | AccordionPrimitive.AccordionMultipleProps;
+export declare const AccordionRoot: import("react").ForwardRefExoticComponent<AccordionRootProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface AccordionItemProps extends AccordionPrimitive.AccordionItemProps {
+    dividerSeed?: string | number;
+    showDivider?: boolean;
+}
+export declare const AccordionItem: import("react").ForwardRefExoticComponent<AccordionItemProps & import("react").RefAttributes<HTMLDivElement>>;
+export type AccordionHeaderProps = AccordionPrimitive.AccordionHeaderProps;
+export declare const AccordionHeader: import("react").ForwardRefExoticComponent<AccordionPrimitive.AccordionHeaderProps & import("react").RefAttributes<HTMLHeadingElement>>;
+export interface AccordionTriggerProps extends AccordionPrimitive.AccordionTriggerProps {
+    icon?: ReactNode;
+    seed?: string | number;
+}
+export declare const AccordionTrigger: import("react").ForwardRefExoticComponent<AccordionTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+export interface AccordionContentProps extends AccordionPrimitive.AccordionContentProps {
+    contentClassName?: string;
+}
+export declare const AccordionContent: import("react").ForwardRefExoticComponent<AccordionContentProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const Accordion: Readonly<{
+    Root: import("react").ForwardRefExoticComponent<AccordionRootProps & import("react").RefAttributes<HTMLDivElement>>;
+    Item: import("react").ForwardRefExoticComponent<AccordionItemProps & import("react").RefAttributes<HTMLDivElement>>;
+    Header: import("react").ForwardRefExoticComponent<AccordionPrimitive.AccordionHeaderProps & import("react").RefAttributes<HTMLHeadingElement>>;
+    Trigger: import("react").ForwardRefExoticComponent<AccordionTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+    Content: import("react").ForwardRefExoticComponent<AccordionContentProps & import("react").RefAttributes<HTMLDivElement>>;
+}>;

package/dist/accordion/Accordion.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
+import { createContext, forwardRef, useContext, useId } from 'react';
+import { PencilIcon } from '../PencilIcon.js';
+import { PencilLine } from '../PencilLine.js';
+import { PencilSurface } from '../PencilSurface.js';
+import { PencilText } from '../PencilText.js';
+const chevronDownPaths = [
+    { d: 'M6 9L12 15L18 9' },
+];
+const AccordionOrientationContext = createContext('vertical');
+function classes(...values) {
+    return values.filter(Boolean).join(' ');
+}
+export const AccordionRoot = forwardRef(function AccordionRoot({ className, orientation = 'vertical', ...props }, ref) {
+    return (_jsx(AccordionOrientationContext.Provider, { value: orientation, children: _jsx(AccordionPrimitive.Root, { ...props, className: classes('inkra-accordion', className), orientation: orientation, ref: ref }) }));
+});
+export const AccordionItem = forwardRef(function AccordionItem({ children, className, dividerSeed, showDivider = true, value, ...props }, ref) {
+    const orientation = useContext(AccordionOrientationContext);
+    return (_jsxs(AccordionPrimitive.Item, { ...props, className: classes('inkra-accordion__item', className), ref: ref, value: value, children: [children, showDivider ? (_jsx(PencilLine, { className: "inkra-accordion__divider", orientation: orientation === 'horizontal' ? 'vertical' : 'horizontal', seed: dividerSeed ?? `inkra-accordion-divider-${value}`, weight: 0.8 })) : null] }));
+});
+export const AccordionHeader = forwardRef(function AccordionHeader({ className, ...props }, ref) {
+    return (_jsx(AccordionPrimitive.Header, { ...props, className: classes('inkra-accordion__header', className), ref: ref }));
+});
+export const AccordionTrigger = forwardRef(function AccordionTrigger({ children, className, icon, seed, ...props }, ref) {
+    const generatedId = useId();
+    const resolvedSeed = seed ?? `inkra-accordion-trigger-${generatedId}`;
+    const triggerIcon = icon === undefined ? (_jsx(PencilIcon, { className: "inkra-accordion__trigger-glyph", paths: chevronDownPaths, seed: `${resolvedSeed}-chevron`, size: 16, sourceSize: 24 })) : icon;
+    return (_jsxs(AccordionPrimitive.Trigger, { ...props, className: classes('inkra-accordion__trigger', className), ref: ref, children: [_jsx(PencilSurface, { "aria-hidden": "true", as: "span", className: "inkra-accordion__focus-ring", radius: 6, seed: `${resolvedSeed}-focus`, variant: "outline" }), _jsx("span", { className: "inkra-accordion__trigger-label", children: typeof children === 'string' ? (_jsx(PencilText, { seed: `${resolvedSeed}-text`, children: children })) : children }), triggerIcon == null ? null : (_jsx("span", { "aria-hidden": "true", className: "inkra-accordion__trigger-icon", children: triggerIcon }))] }));
+});
+export const AccordionContent = forwardRef(function AccordionContent({ children, className, contentClassName, ...props }, ref) {
+    return (_jsx(AccordionPrimitive.Content, { ...props, className: classes('inkra-accordion__content', className), ref: ref, children: _jsx("div", { className: classes('inkra-accordion__content-body', contentClassName), children: children }) }));
+});
+export const Accordion = Object.freeze({
+    Root: AccordionRoot,
+    Item: AccordionItem,
+    Header: AccordionHeader,
+    Trigger: AccordionTrigger,
+    Content: AccordionContent,
+});

package/dist/accordion/index.d.ts

@@ -0,0 +1,2 @@
+export { Accordion, AccordionContent, AccordionHeader, AccordionItem, AccordionRoot, AccordionTrigger, } from './Accordion.js';
+export type { AccordionContentProps, AccordionHeaderProps, AccordionItemProps, AccordionRootProps, AccordionTriggerProps, } from './Accordion.js';

package/dist/accordion/index.js

@@ -0,0 +1 @@
+export { Accordion, AccordionContent, AccordionHeader, AccordionItem, AccordionRoot, AccordionTrigger, } from './Accordion.js';