@inkra/react 0.8.0 → 0.10.0

package/dist/infinite-scroll/model.js

@@ -0,0 +1,168 @@
+export const infiniteScrollDirections = ['top', 'bottom', 'left', 'right'];
+export function completeDirectionalRecord(value, fallback) {
+    return {
+        top: value?.top ?? fallback('top'),
+        bottom: value?.bottom ?? fallback('bottom'),
+        left: value?.left ?? fallback('left'),
+        right: value?.right ?? fallback('right'),
+    };
+}
+export function normalizeDirections(value) {
+    const requested = value === undefined ? ['bottom'] : Array.isArray(value) ? value : [value];
+    return infiniteScrollDirections.filter(direction => requested.includes(direction));
+}
+export function directionAxis(direction) {
+    return direction === 'top' || direction === 'bottom' ? 'vertical' : 'horizontal';
+}
+export function directionSign(direction) {
+    return direction === 'top' || direction === 'left' ? 1 : -1;
+}
+export function directionalValue(value, direction, fallback) {
+    if (value === undefined)
+        return fallback;
+    if (typeof value === 'object' && value !== null && !Array.isArray(value)) {
+        return value[direction] ?? fallback;
+    }
+    return value;
+}
+export function finiteDistance(value, fallback, minimum = 0) {
+    return typeof value === 'number' && Number.isFinite(value)
+        ? Math.max(minimum, value)
+        : fallback;
+}
+const rtlScrollTypes = new WeakMap();
+export function boundaryDistance(metrics, direction) {
+    if (direction === 'top')
+        return Math.max(0, metrics.scrollTop);
+    if (direction === 'bottom') {
+        return Math.max(0, metrics.scrollHeight - metrics.clientHeight - metrics.scrollTop);
+    }
+    // Horizontal browser scroll coordinates differ in RTL. Physical edge
+    // detection is performed from sentinels in the component; these values are
+    // the LTR/non-negative fallback used when geometry is unavailable.
+    if (direction === 'left')
+        return Math.max(0, metrics.scrollLeft);
+    return Math.max(0, metrics.scrollWidth - metrics.clientWidth - metrics.scrollLeft);
+}
+export function physicalHorizontalBoundaryDistance(metrics, direction, rtl = false, rtlType = 'negative') {
+    const maximum = Math.max(0, metrics.scrollWidth - metrics.clientWidth);
+    const fromLeft = !rtl ? metrics.scrollLeft
+        : rtlType === 'negative' ? maximum + metrics.scrollLeft
+            : rtlType === 'reverse' ? maximum - metrics.scrollLeft
+                : metrics.scrollLeft;
+    const normalized = Math.max(0, Math.min(maximum, fromLeft));
+    return direction === 'left' ? normalized : maximum - normalized;
+}
+function detectRtlScrollType(document) {
+    const cached = rtlScrollTypes.get(document);
+    if (cached)
+        return cached;
+    if (!document.body || typeof document.createElement !== 'function')
+        return 'negative';
+    const outer = document.createElement('div');
+    const inner = document.createElement('div');
+    Object.assign(outer.style, {
+        direction: 'rtl',
+        height: '1px',
+        overflow: 'scroll',
+        position: 'absolute',
+        top: '-1000px',
+        width: '4px',
+    });
+    Object.assign(inner.style, { height: '1px', width: '8px' });
+    outer.append(inner);
+    document.body.append(outer);
+    let type;
+    if (outer.scrollLeft > 0)
+        type = 'default';
+    else {
+        outer.scrollLeft = 1;
+        type = outer.scrollLeft === 0 ? 'negative' : 'reverse';
+    }
+    outer.remove();
+    rtlScrollTypes.set(document, type);
+    return type;
+}
+function scrollBoundaryDistance(container, direction) {
+    if (direction === 'top' || direction === 'bottom')
+        return boundaryDistance(container, direction);
+    const rtl = container.ownerDocument.defaultView?.getComputedStyle(container).direction === 'rtl';
+    return physicalHorizontalBoundaryDistance(container, direction, rtl, rtl ? detectRtlScrollType(container.ownerDocument) : 'negative');
+}
+export function dampPullDistance(distance, threshold) {
+    const safeDistance = finiteDistance(distance, 0);
+    const limit = finiteDistance(threshold, 72, 1) * 2;
+    // Continuous resistance, bounded to twice the trigger distance even on a long pull.
+    return limit * (safeDistance / (limit + safeDistance));
+}
+export function pullProgress(distance, threshold) {
+    return Math.max(0, Math.min(1, distance / Math.max(1, threshold)));
+}
+export function gestureStatusEnabled(status) {
+    return status === 'idle' || status === 'pulling' || status === 'ready';
+}
+export function indicatorVisible(status, automatic, gesture = false) {
+    return status !== 'idle' || (!automatic && !gesture);
+}
+export function statusAfterCancellation(status) {
+    return status === 'loading' || status === 'pulling' || status === 'ready' ? 'idle' : status;
+}
+export function localScrollDelta(container, direction, physicalDelta) {
+    const rect = container.getBoundingClientRect();
+    const renderedSize = direction === 'top' ? rect.height : rect.width;
+    const localSize = direction === 'top' ? container.clientHeight : container.clientWidth;
+    return renderedSize > 0 && localSize > 0 ? physicalDelta * localSize / renderedSize : physicalDelta;
+}
+export function boundarySignature(container, root) {
+    return [
+        container.scrollWidth,
+        container.scrollHeight,
+        container.clientWidth,
+        container.clientHeight,
+        root.childElementCount,
+        root.querySelectorAll('[data-infinite-scroll-anchor]').length,
+    ].join(':');
+}
+export function isPageScrollContainer(container) {
+    const doc = container.ownerDocument;
+    return container === doc.documentElement || container === doc.body || container === doc.scrollingElement;
+}
+export function physicalBoundaryDistance(container, sentinel, direction, root) {
+    if (container === root || !sentinel)
+        return scrollBoundaryDistance(container, direction);
+    const viewport = container.getBoundingClientRect();
+    const edge = sentinel.getBoundingClientRect();
+    const scaleX = viewport.width > 0 && container.offsetWidth > 0 ? viewport.width / container.offsetWidth : 1;
+    const scaleY = viewport.height > 0 && container.offsetHeight > 0 ? viewport.height / container.offsetHeight : 1;
+    const top = viewport.top + container.clientTop * scaleY;
+    const left = viewport.left + container.clientLeft * scaleX;
+    const bottom = top + container.clientHeight * scaleY;
+    const right = left + container.clientWidth * scaleX;
+    if (direction === 'top')
+        return Math.abs(top - edge.top) / scaleY;
+    if (direction === 'bottom')
+        return Math.abs(edge.bottom - bottom) / scaleY;
+    if (direction === 'left')
+        return Math.abs(left - edge.left) / scaleX;
+    return Math.abs(edge.right - right) / scaleX;
+}
+export function isEditableOrInteractiveTarget(target) {
+    return Boolean(target?.closest('input, textarea, select, button, a[href], [contenteditable]:not([contenteditable="false"]), '
+        + '[role="slider"], [role="spinbutton"], [role="combobox"], [role="listbox"], '
+        + 'video, audio, [data-infinite-scroll-gesture-ignore]'));
+}
+export function hasNestedScrollOwner(target, root, container, axis) {
+    const view = root.ownerDocument.defaultView;
+    if (!view)
+        return false;
+    for (let node = target; node && node !== root && node !== container; node = node.parentElement) {
+        const style = view.getComputedStyle(node);
+        if (axis === 'vertical') {
+            if (node.scrollHeight > node.clientHeight + 1 && /auto|scroll|overlay/.test(style.overflowY))
+                return true;
+        }
+        else if (node.scrollWidth > node.clientWidth + 1 && /auto|scroll|overlay/.test(style.overflowX))
+            return true;
+    }
+    return false;
+}

package/dist/internal/iconFill.d.ts

@@ -0,0 +1,16 @@
+import type { PencilIconPath } from '../PencilIcon.js';
+import { type PencilPoint } from './stroke.js';
+export declare function isClosedIconContour(points: readonly PencilPoint[]): boolean;
+export declare function softenIconFillMask(pixels: Uint8ClampedArray, width: number, height: number, scale: number, seed: number, roughness: number): void;
+export declare function paintFilledIcon(target: CanvasRenderingContext2D, paths: readonly PencilIconPath[], options: {
+    color: string;
+    fillColor: string;
+    sourceSize: number;
+    seed: number;
+    weightScale: number;
+    roughnessScale: number;
+    breaks: number;
+    breakCount: number;
+    pressureVariation: number;
+    coordinateScale: number;
+}): void;

package/dist/internal/iconFill.js

@@ -0,0 +1,275 @@
+import { cachedPathParts } from './iconGeometry.js';
+import { pencilStroke } from './stroke.js';
+export function isClosedIconContour(points) {
+    if (points.length < 4)
+        return false;
+    const first = points[0];
+    const last = points[points.length - 1];
+    if (Math.hypot(first[0] - last[0], first[1] - last[1]) > 0.3)
+        return false;
+    let area = 0;
+    for (let i = 1; i < points.length; i++) {
+        area += points[i - 1][0] * points[i][1] - points[i][0] * points[i - 1][1];
+    }
+    return Math.abs(area) > 0.1;
+}
+function contourPath(points) {
+    const path = new Path2D();
+    if (!points.length)
+        return path;
+    path.moveTo(points[0][0], points[0][1]);
+    for (const [x, y] of points.slice(1))
+        path.lineTo(x, y);
+    return path;
+}
+export function softenIconFillMask(pixels, width, height, scale, seed, roughness) {
+    const distance = new Float32Array(width * height);
+    const feather = Math.max(1.5, scale * 0.8);
+    for (let i = 0; i < distance.length; i++) {
+        const alpha = pixels[i * 4 + 3];
+        distance[i] = alpha === 255 ? feather : alpha / 255;
+    }
+    // Distance into the silhouette, including holes, without spreading pigment outside it.
+    for (let y = 0; y < height; y++)
+        for (let x = 0; x < width; x++) {
+            const i = y * width + x;
+            if (x)
+                distance[i] = Math.min(distance[i], distance[i - 1] + 1);
+            if (y)
+                distance[i] = Math.min(distance[i], distance[i - width] + 1);
+            if (x && y)
+                distance[i] = Math.min(distance[i], distance[i - width - 1] + Math.SQRT2);
+            if (x + 1 < width && y)
+                distance[i] = Math.min(distance[i], distance[i - width + 1] + Math.SQRT2);
+        }
+    for (let y = height - 1; y >= 0; y--)
+        for (let x = width - 1; x >= 0; x--) {
+            const i = y * width + x;
+            if (x + 1 < width)
+                distance[i] = Math.min(distance[i], distance[i + 1] + 1);
+            if (y + 1 < height)
+                distance[i] = Math.min(distance[i], distance[i + width] + 1);
+            if (x && y + 1 < height)
+                distance[i] = Math.min(distance[i], distance[i + width - 1] + Math.SQRT2);
+            if (x + 1 < width && y + 1 < height)
+                distance[i] = Math.min(distance[i], distance[i + width + 1] + Math.SQRT2);
+        }
+    const grain = Math.min(1, Math.max(0, roughness));
+    for (let y = 0; y < height; y++)
+        for (let x = 0; x < width; x++) {
+            const i = y * width + x;
+            if (!pixels[i * 4 + 3] || distance[i] >= feather)
+                continue;
+            const t = distance[i] / feather;
+            const edge = 1 - t * t * (3 - 2 * t);
+            let hash = Math.imul(Math.floor(x / scale * 3) + seed, 374761393)
+                ^ Math.imul(Math.floor(y / scale * 3), 668265263);
+            hash = Math.imul(hash ^ (hash >>> 13), 1274126177);
+            const tooth = ((hash ^ (hash >>> 16)) >>> 0) / 4294967295;
+            // Keep at least half the existing coverage so fine details remain legible.
+            pixels[i * 4 + 3] *= 1 - edge * (0.35 + tooth * 0.15 * grain);
+        }
+}
+export function paintFilledIcon(target, paths, options) {
+    const { color, fillColor, seed, weightScale, roughnessScale } = options;
+    const layer = () => {
+        const canvas = document.createElement('canvas');
+        canvas.width = target.canvas.width;
+        canvas.height = target.canvas.height;
+        const context = canvas.getContext('2d');
+        context.setTransform(target.getTransform());
+        return { canvas, context };
+    };
+    const body = layer();
+    const outline = layer();
+    const washOutline = paths.some(path => path.mode === 'wash') ? layer() : null;
+    const texture = layer();
+    const automatic = [];
+    const details = new Path2D();
+    const fills = [];
+    const cutouts = [];
+    let samples = 0;
+    paths.forEach((path, index) => {
+        if (path.d.length > 65536)
+            return;
+        if (path.mode === 'fill' || path.mode === 'wash' || path.mode === 'cutout') {
+            const shape = { path: new Path2D(path.d), rule: path.fillRule ?? 'nonzero' };
+            if (path.mode === 'cutout') {
+                const closedParts = new Path2D();
+                let closedCount = 0;
+                const openParts = new Path2D();
+                for (const part of cachedPathParts(path.d)) {
+                    samples += part.length;
+                    if (samples > 65536)
+                        throw new RangeError('Pencil icon exceeds the bounded sampling budget');
+                    if (isClosedIconContour(part)) {
+                        closedParts.addPath(contourPath(part));
+                        closedCount++;
+                    }
+                    else
+                        openParts.addPath(contourPath(part));
+                }
+                // Native stroking preserves tiny disjoint dots that distance sampling can skip.
+                details.addPath(closedCount ? openParts : shape.path);
+                cutouts.push({ path: closedParts, rule: shape.rule });
+            }
+            else {
+                let narrowest = Infinity;
+                if (washOutline) {
+                    // A front region covers earlier edges, but retains its own complete stroke.
+                    washOutline.context.globalCompositeOperation = 'destination-out';
+                    washOutline.context.fill(shape.path, shape.rule);
+                    washOutline.context.globalCompositeOperation = 'source-over';
+                }
+                if (path.mode === 'wash')
+                    for (const points of cachedPathParts(path.d)) {
+                        samples += points.length;
+                        if (samples > 65536)
+                            throw new RangeError('Pencil icon exceeds the bounded sampling budget');
+                        let left = Infinity, top = Infinity, right = -Infinity, bottom = -Infinity;
+                        for (const [x, y] of points) {
+                            left = Math.min(left, x);
+                            top = Math.min(top, y);
+                            right = Math.max(right, x);
+                            bottom = Math.max(bottom, y);
+                        }
+                        const breadth = Math.max(0, Math.min(right - left, bottom - top)) * options.coordinateScale;
+                        narrowest = Math.min(narrowest, breadth);
+                        // Subpixel color accents need lighter edges, not a full-size ink border.
+                        const edgeWeight = Math.min(1, breadth / 2);
+                        pencilStroke(washOutline.context, points, color, 0.65 * weightScale * edgeWeight, seed + index * 137, 0.3 * roughnessScale, 2, false, { variation: options.pressureVariation, fitPressure: true, breaks: options.breaks,
+                            breakCount: options.breakCount, breakScale: options.coordinateScale, continuousBreaks: true,
+                            grain: 0.68, gain: 1.5, step: 0.35, taperLength: 0.65 });
+                    }
+                fills.push({ ...shape, color: path.color, wash: path.mode === 'wash', narrowest });
+            }
+            return;
+        }
+        const parts = cachedPathParts(path.d);
+        samples += parts.reduce((total, part) => total + part.length, 0);
+        if (samples > 65536)
+            throw new RangeError('Pencil icon exceeds the bounded sampling budget');
+        for (const points of parts) {
+            const closed = path.mode !== 'stroke' && isClosedIconContour(points);
+            const shape = contourPath(points);
+            if (closed) {
+                shape.closePath();
+                const bounds = [Infinity, Infinity, -Infinity, -Infinity];
+                for (const [x, y] of points) {
+                    bounds[0] = Math.min(bounds[0], x);
+                    bounds[1] = Math.min(bounds[1], y);
+                    bounds[2] = Math.max(bounds[2], x);
+                    bounds[3] = Math.max(bounds[3], y);
+                }
+                automatic.push({ path: shape, points, bounds, depth: 0 });
+            }
+            else
+                details.addPath(shape);
+            pencilStroke(outline.context, points, color, (closed ? 1.65 : 2.4) * weightScale, seed + index * 137, 0.2 * roughnessScale, 3, false, { variation: options.pressureVariation, fitPressure: true, breaks: options.breaks,
+                breakCount: options.breakCount, breakScale: options.coordinateScale, continuousBreaks: true,
+                grain: 0.68, gain: 3, step: 0.35 });
+            if (!closed)
+                pencilStroke(outline.context, points, fillColor, 1.5 * weightScale, seed + index * 137, 0.15 * roughnessScale, 3, false, { variation: 0.25, fitPressure: true, breaks: 0, grain: 0.68, gain: 3, step: 0.35 });
+        }
+        if (parts.every(points => !isClosedIconContour(points)))
+            details.addPath(new Path2D(path.d));
+    });
+    // Only containment creates a hole. Overlapping independent silhouettes are a union.
+    const area = (bounds) => (bounds[2] - bounds[0]) * (bounds[3] - bounds[1]);
+    automatic.sort((a, b) => area(b.bounds) - area(a.bounds));
+    let containmentChecks = 0;
+    texture.context.save();
+    texture.context.resetTransform();
+    for (let index = 0; index < automatic.length; index++) {
+        const shape = automatic[index];
+        for (let parentIndex = index - 1; parentIndex >= 0; parentIndex--) {
+            const parent = automatic[parentIndex];
+            const a = shape.bounds, b = parent.bounds;
+            if (area(a) >= area(b) || a[0] < b[0] || a[1] < b[1] || a[2] > b[2] || a[3] > b[3])
+                continue;
+            const inside = shape.points.every(([x, y]) => {
+                if (++containmentChecks > 131072)
+                    throw new RangeError('Pencil icon exceeds the bounded containment budget');
+                return texture.context.isPointInPath(parent.path, x, y, 'evenodd');
+            });
+            if (inside) {
+                shape.depth = parent.depth + 1;
+                break;
+            }
+        }
+        body.context.globalCompositeOperation = shape.depth % 2 ? 'destination-out' : 'source-over';
+        body.context.fill(shape.path, 'evenodd');
+    }
+    texture.context.restore();
+    body.context.globalCompositeOperation = 'source-over';
+    for (const fill of fills)
+        body.context.fill(fill.path, fill.rule);
+    // Keep the exterior contour, but do not paint positive strokes over interior details.
+    outline.context.save();
+    outline.context.resetTransform();
+    outline.context.globalCompositeOperation = 'destination-out';
+    outline.context.drawImage(body.canvas, 0, 0);
+    outline.context.restore();
+    outline.context.globalCompositeOperation = 'destination-out';
+    for (const shape of automatic) {
+        if (shape.depth % 2)
+            outline.context.fill(shape.path, 'evenodd');
+    }
+    body.context.globalCompositeOperation = 'destination-out';
+    body.context.lineWidth = 1.5 * weightScale;
+    body.context.lineCap = 'round';
+    body.context.lineJoin = 'round';
+    body.context.stroke(details);
+    for (const shape of automatic) {
+        if (shape.depth % 2 && Math.min(shape.bounds[2] - shape.bounds[0], shape.bounds[3] - shape.bounds[1]) < 1.5) {
+            // Tiny negative dots must survive the normal 24-40px icon sizes.
+            body.context.lineWidth = 0.8;
+            body.context.stroke(shape.path);
+        }
+    }
+    for (const cutout of cutouts)
+        body.context.fill(cutout.path, cutout.rule);
+    if (washOutline) {
+        washOutline.context.globalCompositeOperation = 'destination-out';
+        washOutline.context.lineWidth = 1.5 * weightScale;
+        washOutline.context.lineCap = 'round';
+        washOutline.context.lineJoin = 'round';
+        washOutline.context.stroke(details);
+        for (const cutout of cutouts)
+            washOutline.context.fill(cutout.path, cutout.rule);
+    }
+    const mask = body.context.getImageData(0, 0, body.canvas.width, body.canvas.height);
+    softenIconFillMask(mask.data, mask.width, mask.height, target.getTransform().a, seed, roughnessScale);
+    body.context.putImageData(mask, 0, 0);
+    const paint = (pigment, wash = false, narrowest = Infinity) => {
+        // Wash leaves paper between strokes; solid fill retains its established density.
+        texture.context.fillStyle = pigment;
+        texture.context.globalAlpha = wash ? 0.32 + 0.2 * Math.max(0, 1 - narrowest / 2) : 0.65;
+        const start = (options.sourceSize - 40) / 2;
+        texture.context.fillRect(start, start, 40, 40);
+        texture.context.globalAlpha = 1;
+        for (let y = start - 10; y < start + 50; y += wash ? 1.1 : 0.8) {
+            pencilStroke(texture.context, [[start - 2, y + 6], [start + 42, y - 6]], pigment, wash ? 0.8 : 0.9, seed + Math.round(y * 97), (wash ? 0.2 : 0.15) * roughnessScale, 1, false, { variation: 0.3, fitPressure: true, breaks: 0, grain: 0.7, gain: wash ? 0.75 : 1.5, step: 0.5 });
+        }
+    };
+    paint(fillColor);
+    for (const fill of fills) {
+        if (!fill.color && !fill.wash)
+            continue;
+        texture.context.save();
+        texture.context.clip(fill.path, fill.rule);
+        texture.context.clearRect(-4096, -4096, 8192, 8192);
+        paint(fill.color ?? fillColor, fill.wash, fill.narrowest);
+        texture.context.restore();
+    }
+    texture.context.resetTransform();
+    texture.context.globalCompositeOperation = 'destination-in';
+    texture.context.drawImage(body.canvas, 0, 0);
+    target.save();
+    target.resetTransform();
+    target.drawImage(texture.canvas, 0, 0);
+    target.drawImage(outline.canvas, 0, 0);
+    if (washOutline)
+        target.drawImage(washOutline.canvas, 0, 0);
+    target.restore();
+}

package/dist/internal/surfaceRenderer.d.ts

@@ -14,8 +14,8 @@ export interface PencilSurfaceTheme {
     };
 }
 export declare const PENCIL_ACTION_WASH: Readonly<{
-    lightStrength: 0.2;
-    darkStrength: 0.12;
+    lightStrength: 0.15;
+    darkStrength: 0.09;
 }>;
 export declare const PENCIL_QUIET_WASH: Readonly<{
     lightStrength: 0.12;
@@ -29,8 +29,8 @@ export declare const PENCIL_FILL_WASH: Readonly<{
     edgeReach: 0;
 }>;
 export declare const PENCIL_SELECTION_WASH: Readonly<{
-    lightStrength: 0.2;
-    darkStrength: 0.12;
+    lightStrength: 0.15;
+    darkStrength: 0.09;
     radius: 8;
     angle: -45;
     spacing: 2;

package/dist/internal/surfaceRenderer.js

@@ -5,8 +5,8 @@ import { pencilRenderDefaults } from './renderTokens.js';
 import { BoundedCache, PENCIL_RENDERER_VERSION, canvasByteCost, canvasIsUsable } from './cache.js';
 import { releaseSurfaceBitmaps, resizeSurfaceBitmap, resolveSurfaceAllocation } from './surfaceBudget.js';
 export const PENCIL_ACTION_WASH = Object.freeze({
-    lightStrength: 0.2,
-    darkStrength: 0.12,
+    lightStrength: 0.15,
+    darkStrength: 0.09,
 });
 export const PENCIL_QUIET_WASH = Object.freeze({
     lightStrength: 0.12,

package/dist/internal/textRenderer.d.ts

@@ -15,7 +15,7 @@ export interface PencilTextSprite {
     padding: number;
 }
 export declare const pencilLettering: PencilLetteringSettings;
-export declare const pencilHandwriting = "\"Trip Map Hand\",\"HanziPen SC\",\"Hannotate SC\",\"Kaiti SC\",\"STKaiti\",cursive";
+export declare const pencilHandwriting = "\"Inkra Xiaolai\",\"Trip Map Hand\",\"Kaiti SC\",\"STKaiti\",cursive";
 export declare function boundedTextResolution(width: number, height: number, dpr: number): number;
 export declare function renderPencilText(text: string, options: {
     size: number;

package/dist/internal/textRenderer.js

@@ -1,13 +1,13 @@
 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,
+    variation: 0.1,
+    breaks: 0.31,
+    outline: 0.44,
+    fill: 0.85,
+    grain: 0.4,
 });
-export const pencilHandwriting = '"Trip Map Hand","HanziPen SC","Hannotate SC","Kaiti SC","STKaiti",cursive';
+export const pencilHandwriting = '"Inkra Xiaolai","Trip Map Hand","Kaiti SC","STKaiti",cursive';
 const TEXT_PIXEL_LIMIT = 524288;
 export function boundedTextResolution(width, height, dpr) {
     if (![width, height, dpr].every(value => Number.isFinite(value) && value > 0))
@@ -17,6 +17,16 @@ export function boundedTextResolution(width, height, dpr) {
 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));
+const Segmenter = Intl.Segmenter;
+const graphemeSegmenter = Segmenter ? new Segmenter(undefined, { granularity: 'grapheme' }) : undefined;
+const asciiText = /^[\x20-\x7e]*$/;
+function letteringUnits(text) {
+    if (asciiText.test(text))
+        return Array.from(text);
+    return graphemeSegmenter
+        ? Array.from(graphemeSegmenter.segment(text), entry => entry.segment)
+        : [text];
+}
 function hash(x, y, seed) {
     let value = Math.imul(x ^ seed, 374761393) ^ Math.imul(y, 668265263);
     value = Math.imul(value ^ (value >>> 13), 1274126177);
@@ -80,12 +90,14 @@ export function renderPencilText(text, options) {
     if (text.length > 256 || !Number.isFinite(size) || size <= 0 || size > 128) {
         throw new RangeError('Pencil text exceeds the bounded renderer input');
     }
+    // Normalize only this decorative rendering copy, never the selectable DOM.
+    text = text.normalize('NFC');
     let resolution = Math.max(2, Math.min(4, Math.ceil(dpr * 2)));
     const font = `${options.style ?? 'normal'} ${options.weight ?? '400'} ${size}px ${family}`;
     const fontReady = document.fonts?.check(font, text) ?? false;
     const key = cache ? JSON.stringify([
         PENCIL_RENDERER_VERSION,
-        'adaptive-text-raster-v1',
+        'grapheme-text-raster-v2',
         text,
         size,
         font,
@@ -111,7 +123,7 @@ export function renderPencilText(text, options) {
     const rgb = measure.getImageData(0, 0, 1, 1).data;
     measure.font = font;
     measure.fontKerning = 'none';
-    const characters = Array.from(text);
+    const characters = letteringUnits(text);
     const widths = characters.map(character => measure.measureText(character).width);
     const advance = Math.ceil(widths.reduce((sum, width) => sum + width, 0));
     const padding = 5;
@@ -130,9 +142,9 @@ 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)) {
+    // Plain Latin labels reuse bounded character sprites. Other text is measured
+    // and painted as complete grapheme clusters, with one material pass per line.
+    if (cache && options.glyphSeed !== undefined && text.length > 0 && asciiText.test(text)) {
         let left = 0;
         characters.forEach((character, index) => {
             if (character !== ' ') {

package/dist/inventory-grid/index.js

@@ -11,14 +11,24 @@ import { PencilText } from '../PencilText.js';
 import { useInkraLocale } from '../i18n/index.js';
 import { PortalThemeBridge, PortalThemeProvider, usePortalTriggerRef } from '../overlay/themeBridge.js';
 import { assertInventoryContainers, projectInventoryMove, rotateInventoryCells, validateInventoryPlacement } from './model.js';
+import { inventoryOutline } from './outline.js';
 export { assertInventoryContainers, projectInventoryMove, rotateInventoryCells, validateInventoryPlacement } from './model.js';
 const rotateIcon = rotateIconData.node.map(([, attributes]) => ({ d: String(attributes.d) }));
 const boardId = (id) => `inkra-inventory-board:${id}`;
 const itemId = (id) => `inkra-inventory-item:${id}`;
 const bounds = (cells) => ({ width: Math.max(...cells.map(cell => cell.x)) + 1, height: Math.max(...cells.map(cell => cell.y)) + 1 });
 const collisionDetection = args => args.pointerCoordinates ? pointerWithin(args) : rectIntersection(args);
-function Shape({ cells, size, seed, children, preview = false }) {
-    return _jsx(_Fragment, { children: cells.map((cell, index) => _jsxs("span", { className: "inkra-inventory-grid__cell", style: { left: cell.x * size, top: cell.y * size, width: size, height: size }, children: [_jsx(PencilSurface, { as: "span", variant: preview ? 'selection' : 'quiet', radius: 3, seed: `${seed}-${cell.x}-${cell.y}`, className: "inkra-inventory-grid__cell-surface" }), !preview && _jsx(PencilSurface, { as: "span", variant: "outline", radius: 3, seed: `${seed}-${cell.x}-${cell.y}-focus`, className: "inkra-inventory-grid__cell-focus" }), index === 0 && _jsx("span", { className: "inkra-inventory-grid__item-content", children: children })] }, `${cell.x}:${cell.y}`)) });
+function Shape({ cells, size, seed, children }) {
+    const outline = useMemo(() => inventoryOutline(cells, size), [cells, size]);
+    const box = bounds(cells);
+    return _jsxs(_Fragment, { children: [_jsxs("span", { className: "inkra-inventory-grid__shape", "aria-hidden": "true", style: { width: box.width * size, height: box.height * size }, children: [_jsx(PencilSurface, { as: "span", variant: "full", seed: seed, className: "inkra-inventory-grid__shape-fill", style: { clipPath: `path("${outline.path}")` }, children: _jsx(PencilSurface, { as: "span", variant: "selection", seed: `${seed}-wash`, className: "inkra-inventory-grid__shape-wash" }) }), _jsx("svg", { className: "inkra-inventory-grid__shape-fallback", width: "100%", height: "100%", children: _jsx("path", { d: outline.path, fill: "none", stroke: "currentColor" }) }), outline.segments.map(({ start, end }, index) => {
+                        const vertical = start.x === end.x;
+                        const style = { left: Math.min(start.x, end.x) - (vertical ? 4 : 1),
+                            top: Math.min(start.y, end.y) - (vertical ? 1 : 4),
+                            width: vertical ? 8 : Math.abs(end.x - start.x) + 2,
+                            height: vertical ? Math.abs(end.y - start.y) + 2 : 8 };
+                        return _jsx(PencilLine, { orientation: vertical ? 'vertical' : 'horizontal', seed: `${seed}-edge-${index}`, className: "inkra-inventory-grid__shape-edge", style: style }, index);
+                    })] }), cells.map((cell, index) => _jsx("span", { className: "inkra-inventory-grid__cell", style: { left: cell.x * size, top: cell.y * size, width: size, height: size }, children: index === 0 && _jsx("span", { className: "inkra-inventory-grid__item-content", children: children }) }, `${cell.x}:${cell.y}`))] });
 }
 function ItemView({ item, container, size, disabled, selected, onSelect, onRotate, renderItem, getItemLabel, allowRotation }) {
     const { attributes, listeners, setNodeRef, isDragging } = useDraggable({ id: itemId(item.id), disabled,
@@ -41,7 +51,7 @@ function ContainerView({ container, size, disabled, selectedId, onSelect, onRota
     const selected = container.items.find(item => item.id === selectedId);
     const projectedCells = projection && activeItem ? rotateInventoryCells(activeItem.cells, projection.rotation) : [];
     return _jsxs("section", { className: "inkra-inventory-grid__container", "aria-label": container.label ?? container.id, "data-disabled": container.disabled || undefined, children: [_jsxs("div", { className: "inkra-inventory-grid__header", children: [_jsx(PencilText, { children: container.label ?? container.id }), allowRotation && _jsx(Button, { variant: "ghost", size: "icon", "aria-label": rotateLabel, title: rotateLabel, disabled: disabled || container.disabled || !selected || selected.disabled || selected.rotatable === false, onClick: () => { if (selected)
-                            onRotate(selected.id); }, children: _jsx(PencilIcon, { paths: rotateIcon, size: 24 }) })] }), _jsx("div", { className: "inkra-inventory-grid__scroll", tabIndex: 0, role: "region", "aria-label": container.label ?? container.id, children: _jsxs("div", { ref: setNodeRef, className: "inkra-inventory-grid__board", "data-inventory-container": container.id, style: { width: container.columns * size, height: container.rows * size }, children: [_jsxs("div", { className: "inkra-inventory-grid__lines", "aria-hidden": "true", children: [Array.from({ length: container.columns + 1 }, (_, index) => _jsx(PencilLine, { orientation: "vertical", seed: `${container.id}-x${index}`, style: { left: index * size - 4, top: -1, width: 8, height: container.rows * size + 2 } }, `x${index}`)), Array.from({ length: container.rows + 1 }, (_, index) => _jsx(PencilLine, { seed: `${container.id}-y${index}`, style: { top: index * size - 4, left: -1, height: 8, width: container.columns * size + 2 } }, `y${index}`))] }), container.disabledCells?.map(cell => _jsx("span", { "aria-hidden": "true", className: "inkra-inventory-grid__blocked", style: { left: cell.x * size, top: cell.y * size, width: size, height: size }, children: _jsx(PencilIcon, { size: 24, paths: [{ d: 'M5 5l14 14M19 5L5 19' }] }) }, `${cell.x}:${cell.y}`)), container.items.map(item => _jsx(ItemView, { item: item, container: container, size: size, disabled: disabled || Boolean(container.disabled) || Boolean(item.disabled), selected: selectedId === item.id, onSelect: onSelect, onRotate: onRotate, renderItem: renderItem, getItemLabel: getItemLabel, allowRotation: allowRotation }, item.id)), projection && projection.containerId === container.id && _jsx("div", { "aria-hidden": "true", className: "inkra-inventory-grid__preview", "data-valid": valid, style: { left: projection.position.x * size, top: projection.position.y * size }, children: _jsx(Shape, { cells: projectedCells, size: size, seed: "inventory-preview", preview: true }) })] }) })] });
+                            onRotate(selected.id); }, children: _jsx(PencilIcon, { paths: rotateIcon, size: 24 }) })] }), _jsx("div", { className: "inkra-inventory-grid__scroll", tabIndex: 0, role: "region", "aria-label": container.label ?? container.id, children: _jsxs("div", { ref: setNodeRef, className: "inkra-inventory-grid__board", "data-inventory-container": container.id, style: { width: container.columns * size, height: container.rows * size }, children: [_jsxs("div", { className: "inkra-inventory-grid__lines", "aria-hidden": "true", children: [Array.from({ length: container.columns + 1 }, (_, index) => _jsx(PencilLine, { orientation: "vertical", seed: `${container.id}-x${index}`, style: { left: index * size - 4, top: -1, width: 8, height: container.rows * size + 2 } }, `x${index}`)), Array.from({ length: container.rows + 1 }, (_, index) => _jsx(PencilLine, { seed: `${container.id}-y${index}`, style: { top: index * size - 4, left: -1, height: 8, width: container.columns * size + 2 } }, `y${index}`))] }), container.disabledCells?.map(cell => _jsx("span", { "aria-hidden": "true", className: "inkra-inventory-grid__blocked", style: { left: cell.x * size, top: cell.y * size, width: size, height: size }, children: _jsx(PencilIcon, { size: 24, paths: [{ d: 'M5 5l14 14M19 5L5 19' }] }) }, `${cell.x}:${cell.y}`)), container.items.map(item => _jsx(ItemView, { item: item, container: container, size: size, disabled: disabled || Boolean(container.disabled) || Boolean(item.disabled), selected: selectedId === item.id, onSelect: onSelect, onRotate: onRotate, renderItem: renderItem, getItemLabel: getItemLabel, allowRotation: allowRotation }, item.id)), projection && projection.containerId === container.id && _jsx("div", { "aria-hidden": "true", className: "inkra-inventory-grid__preview", "data-valid": valid, style: { left: projection.position.x * size, top: projection.position.y * size }, children: _jsx(Shape, { cells: projectedCells, size: size, seed: "inventory-preview" }) })] }) })] });
 }
 export function InventoryGrid(props) {
     return _jsx(PortalThemeProvider, { children: _jsx(InventoryGridContent, { ...props }) });

package/dist/inventory-grid/outline.d.ts

@@ -0,0 +1,9 @@
+import type { InventoryCell } from './model.js';
+/** Trace occupied-cell boundaries, keeping holes and disconnected islands separate. */
+export declare function inventoryOutline(cells: readonly InventoryCell[], size: number, inset?: number): {
+    path: string;
+    segments: {
+        start: InventoryCell;
+        end: InventoryCell;
+    }[];
+};