@inkra/react 0.1.0 → 0.3.0

package/dist/input-number/index.js

@@ -1,18 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { useBrowserLayoutEffect } from '../internal/useBrowserLayoutEffect.js';
 import { Button } from '../Button.js';
 import { PencilIcon } from '../PencilIcon.js';
 import { Input } from '../form/Input.js';
 import { useResolvedControlProps } from '../form/controlProps.js';
 import { Tooltip } from '../tooltip/Tooltip.js';
+import { normalizeInputNumberRepeat, resolveInputNumberStep, stepInputNumber, } from './model.js';
 // Lucide Plus / Minus ISC geometry uses the shared pencil renderer.
 const plusPaths = [{ d: 'M5 12h14' }, { d: 'M12 5v14' }];
 const minusPaths = [{ d: 'M5 12h14' }];
 const finiteValue = (value) => typeof value === 'number' && Number.isFinite(value) ? value : null;
 const format = (value) => String(finiteValue(value) ?? '');
 const numberFromDraft = (draft) => draft === '' ? null : finiteValue(Number(draft));
-export const InputNumber = forwardRef(function InputNumber({ classNames, controls = true, decrementButtonLabel = 'Decrease value', defaultValue, disabled, incrementButtonLabel = 'Increase value', inputMode = 'decimal', max, min, onChange, onValueChange, readOnly, size = 'md', step = 1, textAlign = 'center', value, ...props }, forwardedRef) {
+export const InputNumber = forwardRef(function InputNumber({ classNames, controls = true, decrementButtonLabel = 'Decrease value', defaultValue, disabled, incrementButtonLabel = 'Increase value', inputMode = 'decimal', max, min, onChange, onBlur, onKeyDown, onValueChange, pressAndHold = true, readOnly, repeatDelay = 400, repeatInterval = 80, size = 'md', step = 1, stepModifiers, textAlign = 'center', value, ...props }, forwardedRef) {
     const inputRef = useRef(null);
     const isControlled = value !== undefined;
     const [draft, setDraft] = useState(() => format(isControlled ? value : defaultValue));
@@ -21,6 +22,50 @@ export const InputNumber = forwardRef(function InputNumber({ classNames, control
     const latest = useRef({ isControlled, value, defaultValue });
     latest.current = { isControlled, value, defaultValue };
     useImperativeHandle(forwardedRef, () => inputRef.current);
+    const holdRef = useRef(null);
+    const timerRef = useRef(undefined);
+    const suppressClickRef = useRef(false);
+    const stopHolding = useCallback(() => {
+        clearTimeout(timerRef.current);
+        timerRef.current = undefined;
+        const hold = holdRef.current;
+        holdRef.current = null;
+        if (hold?.button.hasPointerCapture?.(hold.pointerId)) {
+            try {
+                hold.button.releasePointerCapture(hold.pointerId);
+            }
+            catch { /* The pointer may already be inactive. */ }
+        }
+    }, []);
+    useEffect(() => {
+        const onVisibilityChange = () => { if (document.hidden)
+            stopHolding(); };
+        const onPointerEnd = (event) => {
+            if (event.pointerId === holdRef.current?.pointerId)
+                stopHolding();
+        };
+        const updateModifiers = (event) => {
+            if (holdRef.current)
+                holdRef.current.modifiers = {
+                    shiftKey: event.shiftKey, altKey: event.altKey, ctrlKey: event.ctrlKey, metaKey: event.metaKey,
+                };
+        };
+        window.addEventListener('blur', stopHolding);
+        window.addEventListener('pointerup', onPointerEnd);
+        window.addEventListener('pointercancel', onPointerEnd);
+        window.addEventListener('keydown', updateModifiers);
+        window.addEventListener('keyup', updateModifiers);
+        document.addEventListener('visibilitychange', onVisibilityChange);
+        return () => {
+            stopHolding();
+            window.removeEventListener('blur', stopHolding);
+            window.removeEventListener('pointerup', onPointerEnd);
+            window.removeEventListener('pointercancel', onPointerEnd);
+            window.removeEventListener('keydown', updateModifiers);
+            window.removeEventListener('keyup', updateModifiers);
+            document.removeEventListener('visibilitychange', onVisibilityChange);
+        };
+    }, [stopHolding]);
     useBrowserLayoutEffect(() => {
         if (isControlled && currentValue !== finiteValue(value))
             setDraft(format(value));
@@ -32,6 +77,7 @@ export const InputNumber = forwardRef(function InputNumber({ classNames, control
             return;
         let resetTimer;
         const reset = (event) => {
+            stopHolding();
             clearTimeout(resetTimer);
             // Native reset runs after the event; restore the public default, not the latest draft.
             resetTimer = setTimeout(() => {
@@ -45,33 +91,98 @@ export const InputNumber = forwardRef(function InputNumber({ classNames, control
         };
         form.addEventListener('reset', reset);
         return () => { clearTimeout(resetTimer); form.removeEventListener('reset', reset); };
-    }, [props.form]);
+    }, [props.form, stopHolding]);
     const cannotStep = state.disabled || state.readOnly || step === 'any' || (min !== undefined && max !== undefined && min > max);
     const decreaseDisabled = cannotStep || (currentValue !== null && min !== undefined && currentValue <= min);
     const increaseDisabled = cannotStep || (currentValue !== null && max !== undefined && currentValue >= max);
-    function changeStep(direction) {
+    useBrowserLayoutEffect(() => {
+        const direction = holdRef.current?.direction;
+        if (cannotStep || !controls || !pressAndHold
+            || (direction === 'increment' && increaseDisabled)
+            || (direction === 'decrement' && decreaseDisabled))
+            stopHolding();
+    }, [cannotStep, controls, decreaseDisabled, increaseDisabled, pressAndHold, stopHolding]);
+    function changeStep(direction, modifiers) {
         const input = inputRef.current;
         if (!input || input.matches(':disabled') || input.readOnly || cannotStep)
-            return;
-        const before = input.value;
-        // Native stepping applies the step base and decimal rounding without a custom parser.
-        if (direction === 'increment')
-            input.stepUp();
-        else
-            input.stepDown();
+            return false;
+        const changed = stepInputNumber(input, direction, resolveInputNumberStep(modifiers, stepModifiers));
         input.focus({ preventScroll: true });
-        if (input.value === before)
-            return;
+        if (!changed)
+            return false;
         setDraft(input.value);
         onValueChange?.(Number.isFinite(input.valueAsNumber) ? input.valueAsNumber : null, { reason: direction });
+        return true;
+    }
+    const stepRef = useRef(changeStep);
+    stepRef.current = changeStep;
+    const intervalRef = useRef(repeatInterval);
+    intervalRef.current = repeatInterval;
+    function startHolding(event, direction) {
+        if (event.button !== 0 || !event.isPrimary)
+            return;
+        event.preventDefault();
+        stopHolding();
+        suppressClickRef.current = false;
+        if (!pressAndHold)
+            return;
+        suppressClickRef.current = true;
+        const modifiers = {
+            shiftKey: event.shiftKey, altKey: event.altKey, ctrlKey: event.ctrlKey, metaKey: event.metaKey,
+        };
+        if (!changeStep(direction, modifiers))
+            return;
+        const button = event.currentTarget;
+        if (!button.isConnected || button.disabled)
+            return;
+        holdRef.current = { button, pointerId: event.pointerId, direction, modifiers };
+        try {
+            button.setPointerCapture(event.pointerId);
+        }
+        catch { /* Window listeners retain release handling. */ }
+        const repeat = () => {
+            const hold = holdRef.current;
+            if (!hold || document.hidden || !stepRef.current(hold.direction, hold.modifiers)) {
+                stopHolding();
+                return;
+            }
+            if (holdRef.current)
+                timerRef.current = setTimeout(repeat, normalizeInputNumberRepeat(intervalRef.current, 80, 32));
+        };
+        timerRef.current = setTimeout(repeat, normalizeInputNumberRepeat(repeatDelay, 400, 150));
+    }
+    function buttonEvents(direction) {
+        return {
+            onPointerDown: (event) => startHolding(event, direction),
+            onPointerUp: stopHolding,
+            onPointerCancel: stopHolding,
+            onLostPointerCapture: stopHolding,
+            onBlur: stopHolding,
+            onClick: (event) => {
+                if (event.detail > 0 && suppressClickRef.current) {
+                    suppressClickRef.current = false;
+                    return;
+                }
+                suppressClickRef.current = false;
+                changeStep(direction, event);
+            },
+        };
     }
     const iconSize = size === 'sm' ? 18 : size === 'lg' ? 26 : 22;
     const buttonSize = size === 'sm' ? 'icon-sm' : size === 'lg' ? 'icon-lg' : 'icon';
-    return _jsx(Input, { ...props, ref: inputRef, type: "number", inputMode: inputMode, textAlign: textAlign, clearable: false, size: size, min: min, max: max, step: step, disabled: state.disabled, readOnly: state.readOnly, value: draft, classNames: { ...classNames, root: ['inkra-input-number', classNames?.root].filter(Boolean).join(' ') }, onChange: event => {
+    return _jsx(Input, { ...props, ref: inputRef, type: "number", inputMode: inputMode, textAlign: textAlign, clearable: false, size: size, min: min, max: max, step: step, disabled: state.disabled, readOnly: state.readOnly, value: draft, classNames: { ...classNames, root: ['inkra-input-number', classNames?.root].filter(Boolean).join(' ') }, onBlur: event => { stopHolding(); onBlur?.(event); }, onKeyDown: event => {
+            onKeyDown?.(event);
+            if (event.defaultPrevented || event.nativeEvent.isComposing || (event.key !== 'ArrowUp' && event.key !== 'ArrowDown'))
+                return;
+            if (resolveInputNumberStep(event, stepModifiers) === undefined)
+                return;
+            event.preventDefault();
+            changeStep(event.key === 'ArrowUp' ? 'increment' : 'decrement', event);
+        }, onChange: event => {
             const input = event.currentTarget;
             const nextValue = Number.isFinite(input.valueAsNumber) ? input.valueAsNumber : null;
             setDraft(input.value);
             onChange?.(event);
             onValueChange?.(nextValue, { reason: 'input' });
-        }, startAction: controls ? _jsx(Tooltip.Provider, { children: _jsx("span", { className: "inkra-input-number__controls", children: _jsxs(Tooltip.Root, { children: [_jsx(Tooltip.Trigger, { asChild: true, children: _jsx(Button, { type: "button", size: buttonSize, variant: "ghost", disabled: decreaseDisabled, "aria-label": decrementButtonLabel, onPointerDown: event => event.preventDefault(), onClick: () => changeStep('decrement'), children: _jsx(PencilIcon, { paths: minusPaths, size: iconSize, sourceSize: 24 }) }) }), _jsx(Tooltip.Portal, { children: _jsx(Tooltip.Content, { children: decrementButtonLabel }) })] }) }) }) : undefined, endAction: controls ? _jsx(Tooltip.Provider, { children: _jsx("span", { className: "inkra-input-number__controls", children: _jsxs(Tooltip.Root, { children: [_jsx(Tooltip.Trigger, { asChild: true, children: _jsx(Button, { type: "button", size: buttonSize, variant: "ghost", disabled: increaseDisabled, "aria-label": incrementButtonLabel, onPointerDown: event => event.preventDefault(), onClick: () => changeStep('increment'), children: _jsx(PencilIcon, { paths: plusPaths, size: iconSize, sourceSize: 24 }) }) }), _jsx(Tooltip.Portal, { children: _jsx(Tooltip.Content, { children: incrementButtonLabel }) })] }) }) }) : undefined });
+        }, startAction: controls ? _jsx(Tooltip.Provider, { children: _jsx("span", { className: "inkra-input-number__controls", children: _jsxs(Tooltip.Root, { children: [_jsx(Tooltip.Trigger, { asChild: true, children: _jsx(Button, { type: "button", size: buttonSize, variant: "ghost", disabled: decreaseDisabled, "aria-label": decrementButtonLabel, ...buttonEvents('decrement'), children: _jsx(PencilIcon, { paths: minusPaths, size: iconSize, sourceSize: 24 }) }) }), _jsx(Tooltip.Portal, { children: _jsx(Tooltip.Content, { children: decrementButtonLabel }) })] }) }) }) : undefined, endAction: controls ? _jsx(Tooltip.Provider, { children: _jsx("span", { className: "inkra-input-number__controls", children: _jsxs(Tooltip.Root, { children: [_jsx(Tooltip.Trigger, { asChild: true, children: _jsx(Button, { type: "button", size: buttonSize, variant: "ghost", disabled: increaseDisabled, "aria-label": incrementButtonLabel, ...buttonEvents('increment'), children: _jsx(PencilIcon, { paths: plusPaths, size: iconSize, sourceSize: 24 }) }) }), _jsx(Tooltip.Portal, { children: _jsx(Tooltip.Content, { children: incrementButtonLabel }) })] }) }) }) : undefined });
 });

package/dist/input-number/model.d.ts

@@ -0,0 +1,13 @@
+export interface InputNumberStepModifier {
+    shiftKey?: boolean;
+    altKey?: boolean;
+    ctrlKey?: boolean;
+    metaKey?: boolean;
+    step: number;
+}
+export type InputNumberModifierState = Pick<KeyboardEvent, 'shiftKey' | 'altKey' | 'ctrlKey' | 'metaKey'>;
+export type InputNumberStepDirection = 'increment' | 'decrement';
+export declare const defaultInputNumberStepModifiers: readonly InputNumberStepModifier[];
+export declare function resolveInputNumberStep(modifiers: InputNumberModifierState, rules?: readonly InputNumberStepModifier[]): number | undefined;
+export declare function normalizeInputNumberRepeat(value: number | undefined, fallback: number, minimum: number): number;
+export declare function stepInputNumber(input: HTMLInputElement, direction: InputNumberStepDirection, modifierStep?: number): boolean;

package/dist/input-number/model.js

@@ -0,0 +1,50 @@
+export const defaultInputNumberStepModifiers = [
+    { shiftKey: true, step: 10 },
+];
+export function resolveInputNumberStep(modifiers, rules = defaultInputNumberStepModifiers) {
+    return rules.find(rule => Number.isFinite(rule.step) && rule.step > 0
+        && Boolean(rule.shiftKey) === modifiers.shiftKey
+        && Boolean(rule.altKey) === modifiers.altKey
+        && Boolean(rule.ctrlKey) === modifiers.ctrlKey
+        && Boolean(rule.metaKey) === modifiers.metaKey)?.step;
+}
+export function normalizeInputNumberRepeat(value, fallback, minimum) {
+    return value === undefined || !Number.isFinite(value)
+        ? fallback
+        : Math.min(60000, Math.max(minimum, value));
+}
+export function stepInputNumber(input, direction, modifierStep) {
+    const before = input.value;
+    const min = input.min === '' ? -Infinity : Number(input.min);
+    const max = input.max === '' ? Infinity : Number(input.max);
+    if (input.disabled || input.readOnly || input.step === 'any' || min > max)
+        return false;
+    if ((direction === 'increment' && input.valueAsNumber >= max)
+        || (direction === 'decrement' && input.valueAsNumber <= min))
+        return false;
+    if (modifierStep === undefined) {
+        if (direction === 'increment')
+            input.stepUp();
+        else
+            input.stepDown();
+    }
+    else {
+        // A detached native input anchors the step base at the current value, so
+        // modifier steps are absolute deltas without floating-point arithmetic.
+        const probe = input.cloneNode(false);
+        probe.removeAttribute('min');
+        probe.removeAttribute('max');
+        probe.step = String(modifierStep);
+        probe.defaultValue = before || '0';
+        probe.value = before;
+        if (direction === 'increment')
+            probe.stepUp();
+        else
+            probe.stepDown();
+        const next = probe.valueAsNumber;
+        if (!Number.isFinite(next))
+            return false;
+        input.value = String(Math.min(Number.isFinite(max) ? max : Infinity, Math.max(Number.isFinite(min) ? min : -Infinity, next)));
+    }
+    return before !== input.value;
+}

package/dist/internal/cache.d.ts

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

package/dist/internal/cache.js

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

package/dist/internal/renderTokens.d.ts

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

package/dist/internal/renderTokens.js

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

package/dist/internal/surfaceRenderer.d.ts

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

package/dist/internal/surfaceRenderer.js

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

package/dist/internal/textRenderer.d.ts

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

package/dist/internal/textRenderer.js

@@ -1,15 +1,16 @@
-import { BoundedCache, PENCIL_RENDERER_VERSION, canvasByteCost } from './cache.js';
+import { BoundedCache, PENCIL_RENDERER_VERSION, canvasByteCost, canvasIsUsable } from './cache.js';
 import { seededRandom } from './random.js';
 export const pencilLettering = Object.freeze({
-    variation: 0.52,
-    breaks: 0.18,
-    outline: 0.96,
-    fill: 0.34,
-    grain: 0.45,
+    variation: 0.2,
+    breaks: 0.5,
+    outline: 0.9,
+    fill: 0.9,
+    grain: 0.6,
 });
 export const pencilHandwriting = '"Trip Map Hand","HanziPen SC","Hannotate SC","Kaiti SC","STKaiti",cursive';
 const TEXT_PIXEL_LIMIT = 524288;
 const textCache = new BoundedCache(160, 16 * 1024 * 1024);
+const glyphCache = new BoundedCache(512, 8 * 1024 * 1024);
 const clamp = (value) => Math.max(0, Math.min(1, value));
 function hash(x, y, seed) {
     let value = Math.imul(x ^ seed, 374761393) ^ Math.imul(y, 668265263);
@@ -88,10 +89,11 @@ export function renderPencilText(text, options) {
         resolution,
         settings,
         fontReady,
+        options.glyphSeed,
     ]) : '';
     if (cache) {
         const cached = textCache.get(key);
-        if (cached)
+        if (cached && canvasIsUsable(cached.ink))
             return cached;
     }
     const mask = document.createElement('canvas');
@@ -120,6 +122,30 @@ export function renderPencilText(text, options) {
     if (!context)
         throw new Error('Canvas 2D is unavailable');
     context.scale(resolution, resolution);
+    // Plain Latin labels can reuse bounded character sprites. Complex scripts and
+    // private editable text retain the original whole-line rendering path.
+    if (cache && options.glyphSeed !== undefined && /^[\x20-\x7e]+$/.test(text)) {
+        let left = 0;
+        characters.forEach((character, index) => {
+            if (character !== ' ') {
+                const characterSeed = (options.glyphSeed ^ Math.imul(character.charCodeAt(0), 16777619)
+                    ^ Math.imul(index % 3, 374761393)) >>> 0;
+                const glyphKey = JSON.stringify([
+                    PENCIL_RENDERER_VERSION, character, size, family, color, characterSeed,
+                    resolution, settings, document.fonts?.check(font, character),
+                ]);
+                let glyph = glyphCache.get(glyphKey);
+                if (!glyph || !canvasIsUsable(glyph.ink)) {
+                    glyph = renderPencilText(character, { ...options, seed: characterSeed, glyphSeed: undefined, cache: false });
+                    glyphCache.set(glyphKey, glyph, canvasByteCost(glyph.ink));
+                }
+                context.drawImage(glyph.ink, left, 0, glyph.width, glyph.height);
+            }
+            left += widths[index];
+        });
+        const sprite = { ink: mask, width, height, advance, ascent, descent, padding };
+        return textCache.set(key, sprite, canvasByteCost(mask));
+    }
     context.font = font;
     context.fontKerning = 'none';
     context.fillStyle = color;

package/dist/internal/usePencilSurface.js

@@ -3,6 +3,7 @@ import { PENCIL_RENDERER_VERSION, effectiveDpr } from './cache.js';
 import { observeCanvasRecovery } from './recovery.js';
 import { seedToNumber } from './random.js';
 import { drawPencilSurface } from './surfaceRenderer.js';
+import { maxStrokeRoughness, pencilRenderDefaults, readRenderToken } from './renderTokens.js';
 function token(style, name, fallback) {
     return style.getPropertyValue(name).trim() || fallback;
 }
@@ -32,6 +33,14 @@ export function usePencilSurface(rootRef, canvasRef, borderRef, variant, seed, c
                     ? token(style, '--inkra-danger', '#873e36')
                     : token(style, '--inkra-border-strong', '#778575');
             const dark = style.colorScheme.includes('dark');
+            const strokeWidth = readRenderToken(style, '--inkra-stroke-width', pencilRenderDefaults.strokeWidth, 0.3, 3);
+            const strokeRoughness = readRenderToken(style, '--inkra-stroke-amplitude', pencilRenderDefaults.strokeRoughness, 0, maxStrokeRoughness);
+            const washSettings = {
+                strength: readRenderToken(style, '--inkra-wash-strength', pencilRenderDefaults.washStrength, 0, 1) / 0.48,
+                spacing: readRenderToken(style, '--inkra-wash-spacing', pencilRenderDefaults.washSpacing, 1, 6),
+                roughness: readRenderToken(style, '--inkra-wash-roughness', pencilRenderDefaults.washRoughness, 0, 6),
+                angle: readRenderToken(style, '--inkra-wash-angle', pencilRenderDefaults.washAngle, -85, 85),
+            };
             const wash = variant === 'selection'
                 ? token(style, '--inkra-selection-pigment', dark ? '#c6b873' : '#769566')
                 : variant === 'danger'
@@ -55,11 +64,12 @@ export function usePencilSurface(rootRef, canvasRef, borderRef, variant, seed, c
                 dark,
                 clipContent,
                 radius,
+                strokeWidth, strokeRoughness, washSettings,
             ]);
             if (paintKey === lastPaint && !canvas.getContext('2d')?.isContextLost?.())
                 return;
             try {
-                const points = drawPencilSurface(canvas, borderRef.current, width, height, variant, numericSeed, dpr, { paper, dark, ink, wash }, radius);
+                const points = drawPencilSurface(canvas, borderRef.current, width, height, variant, numericSeed, dpr, { paper, dark, ink, wash, strokeWidth, strokeRoughness, washSettings }, radius);
                 if (clipContent && points) {
                     root.style.setProperty('--inkra-pencil-clip', `polygon(${points.map(([x, y]) => `${x / width * 100}% ${y / height * 100}%`).join(',')})`);
                 }
@@ -82,13 +92,11 @@ export function usePencilSurface(rootRef, canvasRef, borderRef, variant, seed, c
         const resize = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(schedule);
         resize?.observe(root);
         window.addEventListener('resize', schedule, { passive: true });
-        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)');
+        const inheritedStyle = new MutationObserver(schedule);
+        for (let element = root; 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 = '';
@@ -99,7 +107,7 @@ export function usePencilSurface(rootRef, canvasRef, borderRef, variant, seed, c
             disposed = true;
             stopRecovery();
             resize?.disconnect();
-            appearance.disconnect();
+            inheritedStyle.disconnect();
             colorScheme.removeEventListener('change', schedule);
             window.removeEventListener('resize', schedule);
             cancelAnimationFrame(frame);

package/dist/internal/useSelectionDrawing.js

@@ -1,9 +1,10 @@
 import { useRef } from 'react';
 import { useBrowserLayoutEffect } from './useBrowserLayoutEffect.js';
 import { PENCIL_SELECTION_WASH } from './surfaceRenderer.js';
+import { readRenderToken } from './renderTokens.js';
 // Reveal the cached pigment in alternating diagonal strokes, without repainting it.
-function drawingFrames(width, height) {
-    const angle = PENCIL_SELECTION_WASH.angle * Math.PI / 180;
+function drawingFrames(width, height, degrees) {
+    const angle = degrees * Math.PI / 180;
     const cos = Math.cos(angle);
     const sin = Math.sin(angle);
     const u = (Math.abs(cos) * width + Math.abs(sin) * height) / 2 + 2;
@@ -16,14 +17,16 @@ function drawingFrames(width, height) {
         const bottom = -v + (index + 1) * 2 * v / strokes;
         // Limit travel to the visible section of this stripe, not its rotated bounds.
         const middle = (top + bottom) / 2;
-        const ends = [
-            (-width / 2 + sin * middle) / cos,
-            (width / 2 + sin * middle) / cos,
-            (-height / 2 - cos * middle) / sin,
-            (height / 2 - cos * middle) / sin,
-        ];
-        const left = Math.max(Math.min(ends[0], ends[1]), Math.min(ends[2], ends[3]));
-        const right = Math.min(Math.max(ends[0], ends[1]), Math.max(ends[2], ends[3]));
+        let left = -u;
+        let right = u;
+        for (const [direction, offset, halfExtent] of [[cos, -sin * middle, width / 2], [sin, cos * middle, height / 2]]) {
+            if (Math.abs(direction) < 1e-8)
+                continue;
+            const a = (-halfExtent - offset) / direction;
+            const b = (halfExtent - offset) / direction;
+            left = Math.max(left, Math.min(a, b));
+            right = Math.min(right, Math.max(a, b));
+        }
         for (const progress of [0, 0.5, 1]) {
             const x = progress === 0 ? (index % 2 ? u : -u) : progress === 1 ? (index % 2 ? -u : u) : (left + right) / 2;
             const outline = index % 2
@@ -54,7 +57,8 @@ export function useSelectionDrawing(ref, selected, animated = true) {
             return;
         }
         const duration = selected ? 480 : 320;
-        const animation = node.animate(drawingFrames(node.clientWidth, node.clientHeight).map(frame => ({ ...frame, opacity: 1 })), { duration, direction: selected ? 'normal' : 'reverse', easing: 'linear' });
+        const angle = readRenderToken(getComputedStyle(node), '--inkra-wash-angle', PENCIL_SELECTION_WASH.angle, -85, 85);
+        const animation = node.animate(drawingFrames(node.clientWidth, node.clientHeight, angle).map(frame => ({ ...frame, opacity: 1 })), { duration, direction: selected ? 'normal' : 'reverse', easing: 'linear' });
         animation.currentTime = (selected ? progress.current : 1 - progress.current) * duration;
         let settled = false;
         const finish = () => {

package/dist/journey-map/MapScale.js

@@ -43,7 +43,9 @@ export function MapScale({ map }) {
         draw();
         map.on('moveend zoomend resize', draw);
         const observer = new MutationObserver(draw);
-        observer.observe(document.documentElement, { subtree: true, attributes: true, attributeFilter: ['data-theme', 'data-inkra-theme'] });
+        for (let element = bar.current; element; element = element.parentElement) {
+            observer.observe(element, { attributes: true, attributeFilter: ['data-theme', 'data-inkra-theme'] });
+        }
         const scheme = matchMedia('(prefers-color-scheme: dark)');
         scheme.addEventListener('change', draw);
         return () => { map.off('moveend zoomend resize', draw); observer.disconnect(); scheme.removeEventListener('change', draw); };

package/dist/journey-map/index.js

@@ -148,7 +148,9 @@ export function JourneyMap({ places, routes = noRoutes, geography, landCover, wa
                 fit(); schedule(); });
             observer.observe(host.current);
             const appearance = new MutationObserver(schedule);
-            appearance.observe(document.documentElement, { subtree: true, attributes: true, attributeFilter: ['data-theme', 'data-inkra-theme'] });
+            for (let element = host.current; element; element = element.parentElement) {
+                appearance.observe(element, { attributes: true, attributeFilter: ['data-theme', 'data-inkra-theme'] });
+            }
             const scheme = matchMedia('(prefers-color-scheme: dark)');
             scheme.addEventListener('change', schedule);
             fit();