@inkra/react 0.0.0-stage → 0.2.0

package/dist/PencilIcon.js

@@ -0,0 +1,210 @@
+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';
+import { maxStrokeRoughness, pencilRenderDefaults, readRenderToken } from './internal/renderTokens.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 roughnessScale = options.roughnessScale ?? 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 * roughnessScale, 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 * weightScale, seed + 977, 0.25 * roughnessScale, 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: weightScale / scale, roughnessScale,
+        });
+        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);
+    const lastPaintRef = useRef('');
+    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;
+        const paint = () => {
+            if (disposed)
+                return;
+            const dpr = effectiveDpr(3);
+            const computed = getComputedStyle(canvas);
+            const color = computed.color;
+            const rtl = computed.direction === 'rtl';
+            const weightScale = readRenderToken(computed, '--inkra-stroke-width', pencilRenderDefaults.strokeWidth, 0.3, 3) / 1.2;
+            const roughnessScale = readRenderToken(computed, '--inkra-stroke-amplitude', pencilRenderDefaults.strokeRoughness, 0, maxStrokeRoughness) / 0.6;
+            const key = JSON.stringify([
+                PENCIL_RENDERER_VERSION,
+                geometryKey,
+                badgeKey,
+                rtl,
+                resolvedSeed,
+                size,
+                sourceSize,
+                active,
+                color,
+                dpr,
+                weightScale, roughnessScale,
+            ]);
+            if (key === lastPaintRef.current && 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, weightScale, roughnessScale });
+                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);
+            lastPaintRef.current = key;
+        };
+        const inheritedColor = new MutationObserver(paint);
+        for (let element = canvas; element; element = element.parentElement) {
+            inheritedColor.observe(element, { attributes: true, attributeFilter: ['style', 'class', 'dir', 'data-theme', 'data-inkra-theme'] });
+        }
+        const colorScheme = window.matchMedia('(prefers-color-scheme: dark)');
+        colorScheme.addEventListener('change', paint);
+        const stopRecovery = observeCanvasRecovery(() => { lastPaintRef.current = ''; paint(); });
+        paint();
+        return () => {
+            disposed = true;
+            stopRecovery();
+            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,91 @@
+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';
+import { maxStrokeRoughness, pencilRenderDefaults, readRenderToken } from './internal/renderTokens.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, seed = 'inkra-pencil-line', weight, ...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;
+        let lastPaint = '';
+        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 style = getComputedStyle(canvas);
+            const color = style.color;
+            const resolvedWeight = weight ?? readRenderToken(style, '--inkra-stroke-width', pencilRenderDefaults.strokeWidth, 0.3, 3);
+            const resolvedRoughness = roughness ?? readRenderToken(style, '--inkra-stroke-amplitude', pencilRenderDefaults.strokeRoughness, 0, maxStrokeRoughness);
+            const numericSeed = seedToNumber(seed);
+            const key = JSON.stringify([
+                PENCIL_RENDERER_VERSION, orientation, width, height, color, numericSeed, resolvedWeight, resolvedRoughness, dpr,
+            ]);
+            if (key === lastPaint && canvasIsUsable(canvas))
+                return;
+            let image = lineCache.get(key);
+            if (image && !canvasIsUsable(image)) {
+                lineCache.delete(key);
+                image = undefined;
+            }
+            if (!image) {
+                image = renderLine(width, height, color, numericSeed, resolvedWeight, resolvedRoughness, 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);
+            lastPaint = key;
+        };
+        const schedule = () => {
+            if (!frame)
+                frame = requestAnimationFrame(paint);
+        };
+        const resize = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(schedule);
+        resize?.observe(canvas);
+        const colorScheme = window.matchMedia('(prefers-color-scheme: dark)');
+        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'] });
+        }
+        colorScheme.addEventListener('change', schedule);
+        const stopRecovery = observeCanvasRecovery(() => { lastPaint = ''; schedule(); });
+        paint();
+        return () => {
+            disposed = true;
+            stopRecovery();
+            resize?.disconnect();
+            inheritedStyle.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 {};