@inkra/react 0.0.0-stage → 0.2.0

package/dist/internal/surfaceRenderer.js

@@ -0,0 +1,178 @@
+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,
+});
+export const PENCIL_QUIET_WASH = Object.freeze({
+    lightStrength: 0.12,
+    darkStrength: 0.08,
+});
+const surfaceStyles = {
+    paper: { radius: 8, width: 1.2, passes: 3 },
+    action: {
+        radius: 7,
+        width: 1.35,
+        passes: 3,
+        themeStrength: { light: PENCIL_ACTION_WASH.lightStrength, dark: PENCIL_ACTION_WASH.darkStrength },
+    },
+    quiet: {
+        radius: 7,
+        width: 0.75,
+        passes: 2,
+        themeStrength: { light: PENCIL_QUIET_WASH.lightStrength, dark: PENCIL_QUIET_WASH.darkStrength },
+    },
+    badge: { radius: 6, width: 0.9, passes: 2, strength: 0.25 },
+    outline: { radius: 7, width: 1.2, passes: 3 },
+    danger: { radius: 7, width: 0.75, passes: 2, strength: 0.18 },
+};
+export const PENCIL_FILL_WASH = Object.freeze({
+    angle: pencilRenderDefaults.washAngle,
+    spacing: pencilRenderDefaults.washSpacing,
+    roughness: pencilRenderDefaults.washRoughness,
+    inset: 2,
+    edgeReach: 0,
+});
+export const PENCIL_SELECTION_WASH = Object.freeze({
+    ...PENCIL_FILL_WASH,
+    lightStrength: PENCIL_ACTION_WASH.lightStrength,
+    darkStrength: PENCIL_ACTION_WASH.darkStrength,
+    radius: 8,
+});
+function outline(width, height, radius, seed) {
+    const left = 2.5;
+    const top = 2.5;
+    const right = width - 2.5;
+    const bottom = height - 2.5;
+    const points = [];
+    for (let corner = 0; corner < 4; corner += 1) {
+        const variation = radius === 0 ? 0 : ((seed >>> (corner * 4)) & 7) * 0.12;
+        const resolvedRadius = Math.min(radius + variation, (right - left) / 2, (bottom - top) / 2);
+        const centerX = corner < 2 ? right - resolvedRadius : left + resolvedRadius;
+        const centerY = corner === 0 || corner === 3 ? top + resolvedRadius : bottom - resolvedRadius;
+        for (let step = 0; step <= 6; step += 1) {
+            const angle = (corner - 1 + step / 6) * Math.PI / 2;
+            points.push([
+                centerX + Math.cos(angle) * resolvedRadius,
+                centerY + Math.sin(angle) * resolvedRadius,
+            ]);
+        }
+    }
+    return points;
+}
+function paperPattern(context, color, dark, dpr) {
+    const pattern = context.createPattern(pencilPaper(color, dark, dpr), 'repeat');
+    if (!pattern)
+        return color;
+    if (typeof pattern.setTransform === 'function' && typeof DOMMatrix !== 'undefined') {
+        pattern.setTransform(new DOMMatrix().scale(1 / dpr));
+    }
+    return pattern;
+}
+export function drawPencilSurface(canvas, borderCanvas, width, height, variant, seed, dpr, theme, radius) {
+    const bleed = variant === 'wash' ? 12 : 0;
+    canvas.width = Math.ceil((width + bleed * 2) * dpr);
+    canvas.height = Math.ceil((height + bleed * 2) * dpr);
+    const context = canvas.getContext('2d');
+    if (!context)
+        throw new Error('Canvas 2D is unavailable');
+    context.setTransform(canvas.width / (width + bleed * 2), 0, 0, canvas.height / (height + bleed * 2), 0, 0);
+    if (variant === 'wash') {
+        if (borderCanvas) {
+            borderCanvas.width = canvas.width;
+            borderCanvas.height = canvas.height;
+        }
+        context.translate(bleed, bleed);
+        drawPencilWash(context, { x: 0, y: 0, width, height }, theme.wash, seed, {
+            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,
+            dpr,
+        });
+        return undefined;
+    }
+    if (variant === 'selection') {
+        if (borderCanvas) {
+            borderCanvas.width = canvas.width;
+            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) * (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: theme.washSettings?.angle ?? PENCIL_SELECTION_WASH.angle,
+            dpr,
+        });
+        return undefined;
+    }
+    if (variant === 'ghost') {
+        if (borderCanvas) {
+            borderCanvas.width = canvas.width;
+            borderCanvas.height = canvas.height;
+        }
+        return undefined;
+    }
+    if (variant === 'full') {
+        if (borderCanvas) {
+            borderCanvas.width = canvas.width;
+            borderCanvas.height = canvas.height;
+        }
+        context.fillStyle = paperPattern(context, theme.paper, theme.dark, dpr);
+        context.fillRect(0, 0, width, height);
+        return undefined;
+    }
+    const style = surfaceStyles[variant];
+    const strength = style.themeStrength
+        ? (theme.dark ? style.themeStrength.dark : style.themeStrength.light)
+        : style.strength;
+    const resolvedRadius = radius !== undefined && Number.isFinite(radius) ? Math.max(0, Math.min(radius, 8)) : style.radius;
+    const points = outline(width, height, resolvedRadius, seed);
+    if (variant !== 'outline') {
+        context.save();
+        context.beginPath();
+        context.moveTo(...points[0]);
+        for (const point of points.slice(1))
+            context.lineTo(...point);
+        context.closePath();
+        context.clip();
+        context.fillStyle = paperPattern(context, theme.paper, theme.dark, dpr);
+        context.fillRect(0, 0, width, height);
+        if (strength) {
+            drawPencilWash(context, { x: 0, y: 0, width, height }, theme.wash, seed, {
+                ...PENCIL_FILL_WASH,
+                ...theme.washSettings,
+                strength: strength * (theme.washSettings?.strength ?? pencilRenderDefaults.washStrength / 0.48),
+                radius: resolvedRadius,
+                dpr,
+            });
+        }
+        context.restore();
+    }
+    let borderContext = context;
+    if (borderCanvas) {
+        borderCanvas.width = canvas.width;
+        borderCanvas.height = canvas.height;
+        const separateContext = borderCanvas.getContext('2d');
+        if (separateContext) {
+            separateContext.setTransform(canvas.width / width, 0, 0, canvas.height / height, 0, 0);
+            borderContext = separateContext;
+        }
+    }
+    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,
+        gain: variant === 'action' ? 2.5 : 2.1,
+        step: 0.8,
+    });
+    return points;
+}

package/dist/internal/textQueue.d.ts

@@ -0,0 +1 @@
+export declare function queueTextPaint(job: () => void): () => void;

package/dist/internal/textQueue.js

@@ -0,0 +1,37 @@
+const jobs = new Set();
+let pending = null;
+function schedule() {
+    if (pending !== null || !jobs.size)
+        return;
+    const run = (deadline) => {
+        pending = null;
+        const start = performance.now();
+        do {
+            const job = jobs.values().next().value;
+            if (!job)
+                break;
+            jobs.delete(job);
+            job();
+        } while (jobs.size && performance.now() - start < 6 && (deadline?.timeRemaining() ?? 3) > 2);
+        schedule();
+    };
+    const idleWindow = window;
+    pending = idleWindow.requestIdleCallback
+        ? idleWindow.requestIdleCallback(run, { timeout: 300 })
+        : window.setTimeout(run, 16);
+}
+export function queueTextPaint(job) {
+    jobs.add(job);
+    schedule();
+    return () => {
+        jobs.delete(job);
+        if (!jobs.size && pending !== null) {
+            const idleWindow = window;
+            if (idleWindow.cancelIdleCallback)
+                idleWindow.cancelIdleCallback(pending);
+            else
+                window.clearTimeout(pending);
+            pending = null;
+        }
+    };
+}

package/dist/internal/textRenderer.d.ts

@@ -0,0 +1,28 @@
+export interface PencilLetteringSettings {
+    variation: number;
+    breaks: number;
+    outline: number;
+    fill: number;
+    grain: number;
+}
+export interface PencilTextSprite {
+    ink: HTMLCanvasElement;
+    width: number;
+    height: number;
+    advance: number;
+    ascent: number;
+    descent: number;
+    padding: number;
+}
+export declare const pencilLettering: PencilLetteringSettings;
+export declare const pencilHandwriting = "\"Trip Map Hand\",\"HanziPen SC\",\"Hannotate SC\",\"Kaiti SC\",\"STKaiti\",cursive";
+export declare function renderPencilText(text: string, options: {
+    size: number;
+    family?: string;
+    color: string;
+    seed: number;
+    dpr: number;
+    settings?: PencilLetteringSettings;
+    cache?: boolean;
+    glyphSeed?: number;
+}): PencilTextSprite;

package/dist/internal/textRenderer.js

@@ -0,0 +1,239 @@
+import { BoundedCache, PENCIL_RENDERER_VERSION, canvasByteCost, canvasIsUsable } from './cache.js';
+import { seededRandom } from './random.js';
+export const pencilLettering = Object.freeze({
+    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);
+    value = Math.imul(value ^ (value >>> 13), 1274126177);
+    return ((value ^ (value >>> 16)) >>> 0) / 4294967296;
+}
+function field(x, y, seed) {
+    const integerX = Math.floor(x);
+    const integerY = Math.floor(y);
+    const fractionX = x - integerX;
+    const fractionY = y - integerY;
+    const smoothX = fractionX * fractionX * (3 - 2 * fractionX);
+    const smoothY = fractionY * fractionY * (3 - 2 * fractionY);
+    return (hash(integerX, integerY, seed) * (1 - smoothX)
+        + hash(integerX + 1, integerY, seed) * smoothX) * (1 - smoothY)
+        + (hash(integerX, integerY + 1, seed) * (1 - smoothX)
+            + hash(integerX + 1, integerY + 1, seed) * smoothX) * smoothY;
+}
+function distanceTo(mask, width, height, inside) {
+    const distance = new Float32Array(width * height);
+    for (let index = 0; index < distance.length; index += 1) {
+        distance[index] = (mask[index * 4 + 3] > 100) === inside ? 0 : 1000;
+    }
+    const relax = (index, neighbor, cost) => {
+        distance[index] = Math.min(distance[index], distance[neighbor] + cost);
+    };
+    for (let y = 0; y < height; y += 1) {
+        for (let x = 0; x < width; x += 1) {
+            const index = y * width + x;
+            if (x)
+                relax(index, index - 1, 1);
+            if (y) {
+                relax(index, index - width, 1);
+                if (x)
+                    relax(index, index - width - 1, 1.414);
+                if (x + 1 < width)
+                    relax(index, index - width + 1, 1.414);
+            }
+        }
+    }
+    for (let y = height - 1; y >= 0; y -= 1) {
+        for (let x = width - 1; x >= 0; x -= 1) {
+            const index = y * width + x;
+            if (x + 1 < width)
+                relax(index, index + 1, 1);
+            if (y + 1 < height) {
+                relax(index, index + width, 1);
+                if (x)
+                    relax(index, index + width - 1, 1.414);
+                if (x + 1 < width)
+                    relax(index, index + width + 1, 1.414);
+            }
+        }
+    }
+    return distance;
+}
+export function renderPencilText(text, options) {
+    const { size, color, seed, dpr } = options;
+    const family = options.family ?? pencilHandwriting;
+    const settings = options.settings ?? pencilLettering;
+    const cache = options.cache ?? true;
+    if (text.length > 256 || !Number.isFinite(size) || size <= 0 || size > 128) {
+        throw new RangeError('Pencil text exceeds the bounded renderer input');
+    }
+    const resolution = Math.max(2, Math.min(4, Math.ceil(dpr * 2)));
+    const font = `400 ${size}px ${family}`;
+    const fontReady = document.fonts?.check(font, text) ?? false;
+    const key = cache ? JSON.stringify([
+        PENCIL_RENDERER_VERSION,
+        text,
+        size,
+        family,
+        color,
+        seed,
+        dpr,
+        resolution,
+        settings,
+        fontReady,
+        options.glyphSeed,
+    ]) : '';
+    if (cache) {
+        const cached = textCache.get(key);
+        if (cached && canvasIsUsable(cached.ink))
+            return cached;
+    }
+    const mask = document.createElement('canvas');
+    const measure = mask.getContext('2d', { willReadFrequently: true });
+    if (!measure)
+        throw new Error('Canvas 2D is unavailable');
+    measure.fillStyle = color;
+    measure.fillRect(0, 0, 1, 1);
+    const rgb = measure.getImageData(0, 0, 1, 1).data;
+    measure.font = font;
+    measure.fontKerning = 'none';
+    const characters = Array.from(text);
+    const widths = characters.map(character => measure.measureText(character).width);
+    const advance = Math.ceil(widths.reduce((sum, width) => sum + width, 0));
+    const padding = 5;
+    const ascent = Math.ceil(size * 1.1);
+    const descent = Math.ceil(size * 0.35);
+    const width = advance + padding * 2;
+    const height = ascent + descent + padding * 2;
+    if (width * height * resolution ** 2 > TEXT_PIXEL_LIMIT) {
+        throw new RangeError('Pencil text exceeds the bounded pixel budget');
+    }
+    mask.width = width * resolution;
+    mask.height = height * resolution;
+    const context = mask.getContext('2d', { willReadFrequently: true });
+    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;
+    context.strokeStyle = color;
+    context.lineWidth = size >= 16 ? 0.48 : 0.24;
+    const random = seededRandom(seed);
+    let x = padding;
+    characters.forEach((character, index) => {
+        const center = x + widths[index] / 2;
+        const baseline = padding + ascent + (random() - 0.5) * 0.55;
+        context.save();
+        context.translate(center, baseline);
+        context.rotate((random() - 0.5) * 0.035);
+        context.globalAlpha = 1;
+        context.fillText(character, -widths[index] / 2, 0);
+        context.strokeText(character, -widths[index] / 2, 0);
+        context.restore();
+        x += widths[index];
+    });
+    const image = context.getImageData(0, 0, mask.width, mask.height);
+    const shape = new Uint8ClampedArray(image.data);
+    const outside = distanceTo(shape, mask.width, mask.height, true);
+    const inside = distanceTo(shape, mask.width, mask.height, false);
+    const cuts = [];
+    let characterLeft = padding;
+    for (let character = 0; character < characters.length; character += 1) {
+        for (let attempt = 0, found = 0; attempt < 80 && found < 2; attempt += 1) {
+            const centerX = characterLeft + random() * widths[character];
+            const centerY = padding + ascent - size + random() * size;
+            const pixel = Math.floor(centerY * resolution) * mask.width + Math.floor(centerX * resolution);
+            if (shape[pixel * 4 + 3] < 130)
+                continue;
+            const angle = random() * Math.PI;
+            cuts.push({
+                x: centerX,
+                y: centerY,
+                cosine: Math.cos(angle),
+                sine: Math.sin(angle),
+                long: 1.1 + random() * 0.7,
+                short: 0.22 + random() * 0.2,
+            });
+            found += 1;
+        }
+        characterLeft += widths[character];
+    }
+    const columnCuts = Array.from({ length: mask.width }, (_, column) => cuts.filter(cut => Math.abs(column / resolution - cut.x)
+        <= Math.hypot(cut.cosine * cut.long, cut.sine * cut.short) * 1.55));
+    for (let y = 0; y < mask.height; y += 1) {
+        for (let xIndex = 0; xIndex < mask.width; xIndex += 1) {
+            const index = (y * mask.width + xIndex) * 4;
+            const pixel = y * mask.width + xIndex;
+            if (outside[pixel] > resolution * 1.1) {
+                image.data[index + 3] = 0;
+                continue;
+            }
+            const pixelX = xIndex / resolution;
+            const pixelY = y / resolution;
+            const force = field(pixelX / 2.7, pixelY / 2.4, seed + 31);
+            const pressure = 1 - settings.variation * 0.94
+                * (1 - clamp((force - 0.23) / 0.46) ** 0.85);
+            const paperTooth = field(pixelX * 2.3, pixelY * 2.1, seed + 113);
+            const tooth = 1 - settings.grain * 0.76
+                * (1 - clamp((paperTooth - 0.2) / 0.53));
+            let contact = 1;
+            for (const cut of columnCuts[xIndex]) {
+                const deltaX = pixelX - cut.x;
+                const deltaY = pixelY - cut.y;
+                const radius = Math.hypot((deltaX * cut.cosine + deltaY * cut.sine) / cut.long, (-deltaX * cut.sine + deltaY * cut.cosine) / cut.short);
+                contact = Math.min(contact, clamp((radius - 0.85) / 0.7));
+            }
+            const distance = shape[index + 3] > 100
+                ? -(inside[pixel] - 0.5) / resolution
+                : (outside[pixel] - 0.5) / resolution;
+            const edgeWidth = 0.34 + settings.outline * 0.5;
+            const edgeWobble = (field(pixelX * 0.9, pixelY * 0.9, seed + 209) - 0.5)
+                * 0.32 * settings.outline;
+            const rim = clamp(1 - Math.abs(distance + edgeWobble) / edgeWidth);
+            const core = (shape[index + 3] / 255) * (0.28 + 0.64 * settings.fill);
+            const lift = 1 - settings.breaks * 1.75 * (1 - contact);
+            const pigment = clamp(Math.max(core, rim * (0.48 + 0.52 * settings.outline))
+                * pressure * tooth * Math.max(0.08, lift) * 1.38);
+            image.data[index] = rgb[0];
+            image.data[index + 1] = rgb[1];
+            image.data[index + 2] = rgb[2];
+            image.data[index + 3] = Math.round(255 * pigment);
+        }
+    }
+    context.putImageData(image, 0, 0);
+    const sprite = { ink: mask, width, height, advance, ascent, descent, padding };
+    return cache ? textCache.set(key, sprite, canvasByteCost(mask)) : sprite;
+}

package/dist/internal/travelIcons.d.ts

@@ -0,0 +1,24 @@
+declare const paths: {
+    plus: {
+        d: string;
+    }[];
+    minus: {
+        d: string;
+    }[];
+    reset: {
+        d: string;
+    }[];
+    previous: {
+        d: string;
+    }[];
+    next: {
+        d: string;
+    }[];
+    info: {
+        d: string;
+    }[];
+};
+export declare function TravelIcon({ name }: {
+    name: keyof typeof paths;
+}): import("react").JSX.Element;
+export {};

package/dist/internal/travelIcons.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PencilIcon } from '../PencilIcon.js';
+// Lucide ISC geometry rendered through the same pencil renderer as the trip tools.
+const paths = {
+    plus: [{ d: 'M5 12h14' }, { d: 'M12 5v14' }],
+    minus: [{ d: 'M5 12h14' }],
+    reset: [{ d: 'M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8' }, { d: 'M3 3v5h5' }],
+    previous: [{ d: 'm12 19-7-7 7-7' }, { d: 'M19 12H5' }],
+    next: [{ d: 'M5 12h14' }, { d: 'm12 5 7 7-7 7' }],
+    info: [{ d: 'M22 12a10 10 0 1 1-20 0 10 10 0 0 1 20 0' }, { d: 'M12 16v-4' }, { d: 'M12 8h.01' }],
+};
+export function TravelIcon({ name }) {
+    return _jsx(PencilIcon, { paths: paths[name], sourceSize: 24, size: 30 });
+}

package/dist/internal/useBrowserLayoutEffect.d.ts

@@ -0,0 +1,2 @@
+import { useEffect } from 'react';
+export declare const useBrowserLayoutEffect: typeof useEffect;

package/dist/internal/useBrowserLayoutEffect.js

@@ -0,0 +1,3 @@
+import { useEffect, useLayoutEffect } from 'react';
+// Layout and canvas work only runs after the server markup reaches a browser.
+export const useBrowserLayoutEffect = typeof document === 'undefined' ? useEffect : useLayoutEffect;

package/dist/internal/usePencilSurface.d.ts

@@ -0,0 +1,3 @@
+import type { RefObject } from 'react';
+import type { PencilSurfaceVariant } from './surfaceRenderer.js';
+export declare function usePencilSurface(rootRef: RefObject<HTMLElement | null>, canvasRef: RefObject<HTMLCanvasElement | null>, borderRef: RefObject<HTMLCanvasElement | null>, variant: PencilSurfaceVariant, seed: string | number, clipContent: boolean, radius?: number): void;

package/dist/internal/usePencilSurface.js

@@ -0,0 +1,116 @@
+import { useBrowserLayoutEffect } from './useBrowserLayoutEffect.js';
+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;
+}
+export function usePencilSurface(rootRef, canvasRef, borderRef, variant, seed, clipContent, radius) {
+    useBrowserLayoutEffect(() => {
+        const root = rootRef.current;
+        const canvas = canvasRef.current;
+        if (!root || !canvas)
+            return undefined;
+        let frame = 0;
+        let lastPaint = '';
+        let disposed = false;
+        const paint = () => {
+            frame = 0;
+            if (disposed)
+                return;
+            const width = root.clientWidth;
+            const height = root.clientHeight;
+            if (width < 6 || height < 6)
+                return;
+            const dpr = effectiveDpr(2);
+            const style = getComputedStyle(root);
+            const paper = token(style, '--inkra-paper', '#fcfcfa');
+            const ink = variant === 'action' || variant === 'outline'
+                ? token(style, '--inkra-accent-strong', '#234e39')
+                : variant === 'danger'
+                    ? 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'
+                    ? token(style, '--inkra-danger-soft', '#d49b8b')
+                    : variant === 'badge'
+                        ? token(style, '--inkra-coral-soft', '#f8ebe7')
+                        : variant === 'quiet'
+                            ? token(style, '--inkra-accent-soft', '#e6efe8')
+                            : token(style, '--inkra-accent', '#2e634a');
+            const numericSeed = seedToNumber(seed);
+            const paintKey = JSON.stringify([
+                PENCIL_RENDERER_VERSION,
+                variant,
+                numericSeed,
+                width,
+                height,
+                dpr,
+                paper,
+                ink,
+                wash,
+                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, 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(',')})`);
+                }
+                else {
+                    root.style.removeProperty('--inkra-pencil-clip');
+                }
+                delete root.dataset.pencilFallback;
+                lastPaint = paintKey;
+            }
+            catch {
+                root.dataset.pencilFallback = 'true';
+                root.style.removeProperty('--inkra-pencil-clip');
+                lastPaint = '';
+            }
+        };
+        const schedule = () => {
+            if (!frame)
+                frame = requestAnimationFrame(paint);
+        };
+        const resize = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(schedule);
+        resize?.observe(root);
+        window.addEventListener('resize', schedule, { passive: true });
+        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 = '';
+            schedule();
+        });
+        paint();
+        return () => {
+            disposed = true;
+            stopRecovery();
+            resize?.disconnect();
+            inheritedStyle.disconnect();
+            colorScheme.removeEventListener('change', schedule);
+            window.removeEventListener('resize', schedule);
+            cancelAnimationFrame(frame);
+        };
+    }, [variant, seed, clipContent, radius, rootRef, canvasRef, borderRef]);
+}

package/dist/internal/useSelectionDrawing.d.ts

@@ -0,0 +1,2 @@
+import { type RefObject } from 'react';
+export declare function useSelectionDrawing(ref: RefObject<HTMLElement | null>, selected: boolean, animated?: boolean): void;