@inkra/react 0.0.0-stage → 0.1.0

package/dist/internal/stroke.js

@@ -0,0 +1,144 @@
+function hash(index, seed) {
+    let value = Math.imul(index ^ seed, 0x45d9f3b);
+    value = Math.imul(value ^ (value >>> 16), 0x45d9f3b);
+    return ((value ^ (value >>> 16)) >>> 0) / 4294967296;
+}
+function noise(at, seed) {
+    const cell = Math.floor(at);
+    const progress = at - cell;
+    const blend = progress * progress * (3 - 2 * progress);
+    return hash(cell, seed) * (1 - blend) + hash(cell + 1, seed) * blend;
+}
+const clamp = (value) => Math.max(0, Math.min(1, value));
+export function strokeProfile(at, total, seed, settings = {}) {
+    const variation = settings.variation ?? 1;
+    const breaks = settings.breaks ?? 0.8;
+    const grainValue = settings.grain ?? 0.7;
+    const force = clamp(0.12 + noise(at / 19, seed + 17) * 0.97
+        + (noise(at / 5.3, seed + 39) - 0.5) * 0.3);
+    const pressure = clamp(0.72 * (1 - variation) + force * variation);
+    let contact = 1;
+    const cell = Math.floor(at / 37);
+    for (let index = cell - 1; index <= cell + 1; index += 1) {
+        if (hash(index, seed + 277) > breaks * 0.9)
+            continue;
+        const middle = index * 37 + 5 + hash(index, seed + 283) * 27;
+        const halfGap = (1.1 + hash(index, seed + 293) * 3.6) * breaks;
+        contact = Math.min(contact, clamp((Math.abs(at - middle) - halfGap) / 2.1));
+    }
+    const tooth = noise(at * 1.6, seed + 401);
+    const deposit = clamp((tooth - grainValue * 0.22) / Math.max(0.2, 1 - grainValue * 0.22));
+    const taper = 0.2 + 0.8 * clamp(Math.min(at, total - at) / (settings.taperLength ?? 3));
+    return { pressure, contact, deposit, taper };
+}
+export function pencilStroke(context, points, color, width, seed, amplitude, passes = 2, closed = false, settings = {}) {
+    if (points.length < 2)
+        return;
+    const scale = Math.max(0.4, settings.scale ?? 1);
+    const line = points.map(point => [...point]);
+    const lastPoint = line[line.length - 1];
+    if (closed && Math.hypot(line[0][0] - lastPoint[0], line[0][1] - lastPoint[1]) > 0.01) {
+        line.push(line[0]);
+    }
+    const segments = [];
+    let total = 0;
+    for (let index = 1; index < line.length; index += 1) {
+        const a = line[index - 1];
+        const b = line[index];
+        const length = Math.hypot(b[0] - a[0], b[1] - a[1]) / scale;
+        if (length < 0.0001)
+            continue;
+        segments.push({ a, b, start: total, length });
+        total += length;
+    }
+    if (!total)
+        return;
+    const distanceOffset = settings.distanceOffset ?? 0;
+    const totalDistance = settings.totalDistance ?? distanceOffset + total;
+    const step = settings.step ?? (settings.detail === 'fill' ? 2.1 : 1.05);
+    const samples = [];
+    let segmentIndex = 0;
+    for (let at = 0;; at = Math.min(total, at + step)) {
+        while (segmentIndex < segments.length - 1
+            && at > segments[segmentIndex].start + segments[segmentIndex].length)
+            segmentIndex += 1;
+        const segment = segments[segmentIndex];
+        const progress = clamp((at - segment.start) / segment.length);
+        const normalX = -(segment.b[1] - segment.a[1]) / (segment.length * scale);
+        const normalY = (segment.b[0] - segment.a[0]) / (segment.length * scale);
+        const globalAt = distanceOffset + at;
+        const offset = (noise(globalAt / 8, seed + 503) - 0.5) * amplitude * Math.sqrt(scale);
+        samples.push({
+            at: globalAt,
+            x: segment.a[0] + (segment.b[0] - segment.a[0]) * progress + normalX * offset,
+            y: segment.a[1] + (segment.b[1] - segment.a[1]) * progress + normalY * offset,
+            normalX,
+            normalY,
+            ...strokeProfile(globalAt, totalDistance, seed, settings),
+        });
+        if (at === total)
+            break;
+    }
+    const inheritedAlpha = context.globalAlpha;
+    const material = 0.65 + hash(0, seed + 619) * 0.65;
+    const viewport = settings.viewport;
+    const filaments = Math.max(0, settings.filaments ?? 3);
+    context.save();
+    context.strokeStyle = color;
+    context.lineCap = 'round';
+    for (let pass = 0; pass < passes; pass += 1) {
+        for (let index = 1; index < samples.length; index += 1) {
+            const a = samples[index - 1];
+            const b = samples[index];
+            if (viewport && ((a.x < -8 && b.x < -8) || (a.x > viewport[0] + 8 && b.x > viewport[0] + 8)
+                || (a.y < (settings.viewportTop ?? 36) && b.y < (settings.viewportTop ?? 36))
+                || (a.y > viewport[1] + 8 && b.y > viewport[1] + 8)))
+                continue;
+            const contact = Math.min(a.contact, b.contact);
+            if (!contact || (pass > 0 && noise(a.at / 11, seed + pass * 127) < 0.48))
+                continue;
+            const pressure = (a.pressure + b.pressure) / 2;
+            const deposit = 0.12 + 0.88 * (a.deposit + b.deposit) / 2;
+            const opacity = Math.pow(pressure, 1.4) * contact * deposit * material * a.taper;
+            if (opacity < 0.012)
+                continue;
+            const nib = width * (0.3 + pressure * 1.65) * Math.pow(scale, 0.32);
+            const drift = pass ? (noise(a.at / 6, seed + pass * 107) - 0.5) * width * 1.1 : 0;
+            context.globalAlpha = Math.min(1, inheritedAlpha * opacity * (pass ? 0.56 : 1.2)
+                * (settings.gain ?? 1));
+            context.lineWidth = Math.max(0.18, nib * (pass ? 0.4 : 1));
+            const baseAlpha = context.globalAlpha;
+            const grainValue = settings.grain ?? 0.7;
+            context.globalAlpha = baseAlpha * (1 - grainValue * 0.78);
+            context.beginPath();
+            context.moveTo(a.x + a.normalX * drift, a.y + a.normalY * drift);
+            context.lineTo(b.x + b.normalX * drift, b.y + b.normalY * drift);
+            context.stroke();
+            if (grainValue > 0.05) {
+                for (let filament = 0; filament < filaments; filament += 1) {
+                    const tooth = noise(a.at * 2.7, seed + filament * 191 + pass * 317);
+                    if (tooth < 0.28)
+                        continue;
+                    const offset = drift + (filament - (filaments - 1) / 2) * nib * 0.3;
+                    context.globalAlpha = baseAlpha * grainValue * tooth;
+                    context.lineWidth = Math.max(0.15, nib * (0.12 + tooth * 0.17));
+                    context.beginPath();
+                    context.moveTo(a.x + a.normalX * offset, a.y + a.normalY * offset);
+                    context.lineTo(b.x + b.normalX * offset, b.y + b.normalY * offset);
+                    context.stroke();
+                }
+            }
+            if (pass === 0 && settings.detail !== 'fill' && settings.edgeGrain !== false
+                && a.deposit > 0.52 && grainValue > 0.05) {
+                const toothOffset = (noise(a.at * 2, seed + 727) - 0.5) * nib * 1.9;
+                context.lineWidth = 0.18 + pressure * 0.24;
+                context.globalAlpha = baseAlpha * 0.55;
+                context.beginPath();
+                context.moveTo(a.x + a.normalX * toothOffset, a.y + a.normalY * toothOffset);
+                context.lineTo(b.x + b.normalX * toothOffset, b.y + b.normalY * toothOffset);
+                context.stroke();
+            }
+        }
+    }
+    context.restore();
+}

package/dist/internal/surfaceRenderer.d.ts

@@ -0,0 +1,33 @@
+export type PencilSurfaceVariant = 'paper' | 'action' | 'quiet' | 'badge' | 'outline' | 'danger' | 'ghost' | 'selection' | 'wash' | 'full';
+export interface PencilSurfaceTheme {
+    paper: string;
+    dark: boolean;
+    ink: string;
+    wash: string;
+}
+export declare const PENCIL_ACTION_WASH: Readonly<{
+    lightStrength: 0.2;
+    darkStrength: 0.12;
+}>;
+export declare const PENCIL_QUIET_WASH: Readonly<{
+    lightStrength: 0.12;
+    darkStrength: 0.08;
+}>;
+export declare const PENCIL_FILL_WASH: Readonly<{
+    angle: -35;
+    spacing: 1.8;
+    roughness: 3.5;
+    inset: 2;
+    edgeReach: 0;
+}>;
+export declare const PENCIL_SELECTION_WASH: Readonly<{
+    lightStrength: 0.2;
+    darkStrength: 0.12;
+    radius: 8;
+    angle: -35;
+    spacing: 1.8;
+    roughness: 3.5;
+    inset: 2;
+    edgeReach: 0;
+}>;
+export declare function drawPencilSurface(canvas: HTMLCanvasElement, borderCanvas: HTMLCanvasElement | null, width: number, height: number, variant: PencilSurfaceVariant, seed: number, dpr: number, theme: PencilSurfaceTheme, radius?: number): Array<readonly [number, number]> | undefined;

package/dist/internal/surfaceRenderer.js

@@ -0,0 +1,175 @@
+import { pencilPaper } from './paper.js';
+import { pencilStroke } from './stroke.js';
+import { drawPencilWash } from './wash.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: -35,
+    spacing: 1.8,
+    roughness: 3.5,
+    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: 1,
+            spacing: 1.8,
+            roughness: 3.5,
+            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,
+            spacing: PENCIL_SELECTION_WASH.spacing,
+            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,
+            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,
+                strength,
+                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, seed, 0.6, 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,27 @@
+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;
+}): PencilTextSprite;

package/dist/internal/textRenderer.js

@@ -0,0 +1,213 @@
+import { BoundedCache, PENCIL_RENDERER_VERSION, canvasByteCost } 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,
+});
+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 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,
+    ]) : '';
+    if (cache) {
+        const cached = textCache.get(key);
+        if (cached)
+            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);
+    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;