@inkra/react 0.3.0 → 0.5.0

package/README.md

@@ -48,6 +48,104 @@ export function Actions() {
 
 To use only the design tokens, import `@inkra/react/tokens.css` instead.
 
+## Theme Provider
+
+```tsx
+import '@inkra/react/styles.css';
+import { ThemeProvider } from '@inkra/react/theme';
+import type { InkraThemeTokens } from '@inkra/react/theme';
+
+const tokens = {
+  '--inkra-accent': '#4b96aa',
+  '--inkra-icon-stroke-width': '1.5px',
+} satisfies InkraThemeTokens;
+
+<ThemeProvider theme="auto" tokens={tokens}>
+  <App />
+</ThemeProvider>
+```
+
+`ThemeProvider` is also exported from the package root. It renders a local `div`
+scope, accepts its normal HTML attributes and forwards its ref. It never changes
+the document theme or stores a preference. `theme` supports `light`, `dark`, and
+`auto`; omit it to inherit the surrounding CSS theme. Auto uses native CSS media
+queries and works with SSR without resolving the system preference in JavaScript.
+
+`tokens` accepts partial `--inkra-*` variables for color, fonts, geometry and
+pencil rendering. Supply units for lengths (`"1.5px"`); unitless numbers work for
+intensity and similar values. An inner scope without `theme` inherits outer
+tokens; an explicit mode establishes that mode's built-in variables before local
+overrides. `style` takes precedence over `tokens`. User token overrides are
+suspended while forced colors are active so the system palette can take over.
+
+Custom colors do not automatically adapt to light/dark modes. Supply appropriate
+variables for each mode, or use CSS media queries. Existing component portals
+inherit the trigger scope and track its live changes. The scope has no default
+background or spacing; use a surface or your own layout when needed. It composes
+with `InkraProvider` for language configuration without changing input state.
+
+## Internationalization
+
+Wrap your application in `InkraProvider` to localize component-owned copy and
+accessible labels. Built-in dictionaries are `en`, `zh-CN`, `ja`, `ko`, and `fr`.
+All five share the same typed keys. Regional tags such as `en-GB`, `ja-JP`,
+`ko-KR`, `fr-CA` and `zh-Hans-CN` select the matching language while keeping
+regional date/number formatting. No provider preserves the English defaults.
+
+```tsx
+import { InkraProvider, Input, Pagination } from '@inkra/react';
+import type { InkraDictionary } from '@inkra/react/i18n';
+
+const messages = {
+  'input.clear': 'Clear note',
+  'pagination.page': 'Open page {page}',
+} satisfies InkraDictionary;
+
+<InkraProvider locale="fr-CA" messages={messages}>
+  <Input clearable defaultValue="My note" aria-label="Note" />
+  <Pagination totalPages={5} />
+</InkraProvider>;
+```
+
+`messages` is a partial dictionary; developers can import JSON or adapt their
+existing i18n resource into these flat keys. Inspect `inkraLocales.en` for the
+complete key list and source templates, or copy another built-in dictionary.
+The provider, dictionaries, types, `useInkraLocale` and
+`createInkraTranslator` are also exported from `@inkra/react/i18n`.
+
+- Precedence: explicit component labels/props, inner provider overrides, inherited
+  overrides, then the built-in dictionary. Unknown languages use English copy
+  while valid `Intl` locale formatting is preserved. Invalid locale strings use `en-US`.
+- Nested providers merge by key, even when the inner locale changes. Pass the
+  desired override dictionary on language changes; inherited overrides are intentional.
+- `undefined` entries do not override; empty strings do. Avoid empty accessible
+  labels on interactive controls. Use `satisfies InkraDictionary` to catch key typos.
+- Preserve template placeholders such as `{page}`, `{count}` and `{label}`.
+  Interpolation is a single literal-text pass, not HTML, ICU, or executable code.
+  Missing placeholder values are left visible rather than silently removed.
+- Explicit component `locale` props take priority over the provider. Calendar
+  also retains its DayPicker locale/labels/formatters API. NumberTicker's
+  explicit compact-unit policies remain independent of regional number formatting.
+- Language and dictionary updates do not remount children or clear form drafts.
+  The provider adds no HTML wrapper and does not mutate the document language.
+  Set `lang` on your page or locale-scoped container; set `dir` separately if needed.
+- Application labels, option content, errors supplied by your application, and
+  stored/submitted values are not automatically translated. InkraProvider also
+  passes its locale to React Aria's internal announcements; third-party/native
+  messages are not keys in the Inkra dictionary.
+- Use identical locale/dictionary data for SSR and hydration. Messages may change
+  after hydration; the provider does not read browser language or local storage.
+
+```tsx
+import { InkraProvider, inkraLocales } from '@inkra/react/i18n';
+
+const customLanguage = { ...inkraLocales.en, 'input.clear': 'Effacer la note' };
+
+<InkraProvider locale="fr" messages={customLanguage}>
+  {children}
+</InkraProvider>;
+```
+
 ## Button
 
 `Button` forwards its ref and native button attributes. Its default `type` is `button`, so placing it inside a form will not submit unexpectedly.
@@ -348,7 +446,18 @@ All examples use public sample data.
 
 `PencilText` keeps its string in the DOM for selection, copy, search, and assistive technology. Browser enhancement paints the same glyph geometry with the traced C lettering preset; unavailable canvas or font loading leaves the readable DOM fallback visible.
 
-`PencilIcon` accepts familiar SVG path data and deposits pigment along sampled geometry. See `docs/pencil-contract.md` in the workspace for the current alpha contract.
+`PencilIcon` accepts familiar SVG path data and deposits pigment along sampled geometry.
+Use `size` for the displayed canvas size (default 40px), `strokeWidth` (0.3-3,
+default 1.5), `intensity` (0-1, default 1), `breaks` (0-1, default 0.18),
+`pressureVariation` (0-1, default 0.82), and `breakCount` (integer 0-12, default 1).
+The gap count is a maximum: short displayed paths use fewer or no gaps, while
+larger icons can use more up to that limit. Device pixel ratio does not change
+the count. Zero breaks or zero breakCount removes intentional gaps; zero pressure
+variation keeps constant pressure without removing the grain or endpoint taper.
+The matching inherited tokens are `--inkra-icon-stroke-width`,
+`--inkra-icon-intensity`, `--inkra-icon-breaks`, `--inkra-icon-pressure-variation`
+and `--inkra-icon-break-count`. Finite explicit props override those tokens.
+See `docs/pencil-contract.md` in the workspace for the material contract.
 
 `PencilLine` is an aria-hidden canvas decoration using the same pressure, grain, breaks, and repeated-pass renderer as surfaces and icons. It defaults to horizontal and supports a native vertical stroke without rotating a horizontal bitmap:
 
@@ -367,8 +476,9 @@ text within that scope without changing layout, selectable text, or labels.
 
 `PencilLine` reads `--inkra-stroke-width` (0.3-3) and
 `--inkra-stroke-amplitude` (0-4) when `weight` or `roughness` is omitted.
-Explicit props take precedence. These tokens also scale surface outlines and icon
-strokes relative to their original presets, including button/card/input borders.
+Explicit props take precedence. These tokens also scale surface outlines,
+including button/card/input borders. Icon weight uses its independent token;
+the general amplitude token still controls icon roughness.
 The default values are 2 and 1.5. They do not change layout or text lettering.
 
 Surface fills read `--inkra-wash-strength` (0-1, default 0.8),

package/dist/Button.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { createContext, forwardRef, useContext, useId } from 'react';
+import { createContext, forwardRef, useContext, useId, useMemo } from 'react';
 import { PencilSurface } from './PencilSurface.js';
 import { PencilText } from './PencilText.js';
 import { PencilLine } from './PencilLine.js';
@@ -85,5 +85,6 @@ export const ButtonLink = forwardRef(function ButtonLink({ children, 'aria-label
 export const ButtonGroup = forwardRef(function ButtonGroup({ children, className, orientation = 'horizontal', size, variant, disabled = false, fullWidth = false, equalWidth = false, ...props }, ref) {
     const classes = ['inkra-button-group', className].filter(Boolean).join(' ');
     const id = useId();
-    return (_jsx(ButtonGroupContext.Provider, { value: { orientation, size, variant, disabled }, children: _jsx(PencilSurface, { ...props, className: classes, "data-orientation": orientation, "data-full-width": fullWidth || undefined, "data-equal-width": equalWidth || undefined, "aria-disabled": disabled || undefined, radius: 8, ref: ref, role: "group", seed: `inkra-button-group-${id}`, variant: "outline", children: children }) }));
+    const context = useMemo(() => ({ orientation, size, variant, disabled }), [orientation, size, variant, disabled]);
+    return (_jsx(ButtonGroupContext.Provider, { value: context, children: _jsx(PencilSurface, { ...props, className: classes, "data-orientation": orientation, "data-full-width": fullWidth || undefined, "data-equal-width": equalWidth || undefined, "aria-disabled": disabled || undefined, radius: 8, ref: ref, role: "group", seed: `inkra-button-group-${id}`, variant: "outline", children: children }) }));
 });

package/dist/PencilIcon.d.ts

@@ -17,6 +17,16 @@ export interface PencilIconProps extends Omit<CanvasHTMLAttributes<HTMLCanvasEle
     size?: number;
     sourceSize?: number;
     active?: boolean;
+    /** Overrides icon/theme stroke weight. Clamped to 0.3-3. */
+    strokeWidth?: number;
+    /** Pigment opacity, clamped to 0-1. Defaults to the icon intensity token or 1. */
+    intensity?: number;
+    /** Stroke gap amount, clamped to 0-1. Zero disables gaps, not pigment grain. */
+    breaks?: number;
+    /** Maximum gaps per continuous path, limited by displayed length; floored/clamped to 0-12, default 1. */
+    breakCount?: number;
+    /** Pressure-driven stroke width variation, clamped to 0-1. Defaults to 0.82. */
+    pressureVariation?: number;
     decorative?: boolean;
 }
 export declare const PencilIcon: import("react").ForwardRefExoticComponent<PencilIconProps & import("react").RefAttributes<HTMLCanvasElement>>;

package/dist/PencilIcon.js

@@ -1,32 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
-import { BoundedCache, PENCIL_RENDERER_VERSION, canvasByteCost, canvasIsUsable, effectiveDpr, } from './internal/cache.js';
+import { BoundedCache, PENCIL_RENDERER_VERSION, boundedCanvasSize, canvasByteCost, canvasIsUsable, effectiveDpr, } from './internal/cache.js';
 import { observeCanvasRecovery } from './internal/recovery.js';
 import { seedToNumber } from './internal/random.js';
 import { pencilStroke } from './internal/stroke.js';
 import { maxStrokeRoughness, pencilRenderDefaults, readRenderToken } from './internal/renderTokens.js';
-const geometryCache = new BoundedCache(256, 180000);
+import { cachedPathParts } from './internal/iconGeometry.js';
 const imageCache = new BoundedCache(128, 24 * 1024 * 1024);
-function cachedPathParts(data) {
-    const key = `${PENCIL_RENDERER_VERSION}:${data}`;
-    const cached = geometryCache.get(key);
-    if (cached)
-        return cached;
-    const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-    path.setAttribute('d', data);
-    const length = path.getTotalLength();
-    const count = Math.max(1, Math.ceil(length / 0.25));
-    const parts = [[]];
-    for (let index = 0; index <= count; index += 1) {
-        const point = path.getPointAtLength(length * index / count);
-        const activePart = parts[parts.length - 1];
-        const previous = activePart[activePart.length - 1];
-        if (previous && Math.hypot(point.x - previous[0], point.y - previous[1]) > 0.5)
-            parts.push([]);
-        parts[parts.length - 1].push([point.x, point.y]);
-    }
-    return geometryCache.set(key, parts, parts.reduce((total, part) => total + part.length, 0));
-}
 function drawFallbackPath(context, data, color, mode, weightScale = 1) {
     try {
         const path = new Path2D(data);
@@ -47,9 +27,18 @@ function renderIcon(paths, options) {
     const { seed, size, sourceSize, active, color, dpr } = options;
     const weightScale = options.weightScale ?? 1;
     const roughnessScale = options.roughnessScale ?? 1;
+    const breaks = options.breaks ?? pencilRenderDefaults.iconBreaks;
+    const breakCount = options.breakCount ?? pencilRenderDefaults.iconBreakCount;
+    const pressureVariation = options.pressureVariation ?? pencilRenderDefaults.iconPressureVariation;
+    const variationScale = pressureVariation / pencilRenderDefaults.iconPressureVariation;
+    const pixels = Math.round(size * dpr);
+    boundedCanvasSize(pixels, pixels, 1);
+    if (!Number.isFinite(sourceSize) || sourceSize <= 0 || sourceSize > 4096 || paths.length > 1024) {
+        throw new RangeError('Pencil icon exceeds the bounded geometry budget');
+    }
     const canvas = document.createElement('canvas');
-    canvas.width = Math.round(size * dpr);
-    canvas.height = Math.round(size * dpr);
+    canvas.width = pixels;
+    canvas.height = pixels;
     const context = canvas.getContext('2d');
     if (!context)
         return canvas;
@@ -57,7 +46,10 @@ function renderIcon(paths, options) {
     context.scale(dpr * coordinateScale, dpr * coordinateScale);
     const offset = (40 - sourceSize) / 2;
     context.translate(offset, offset);
+    let sampledPoints = 0;
     paths.forEach((path, index) => {
+        if (path.d.length > 65536)
+            return;
         const mode = path.mode ?? 'stroke';
         const pathSeed = seed + index * 137;
         if (mode === 'wash') {
@@ -66,7 +58,7 @@ function renderIcon(paths, options) {
                 context.clip(new Path2D(path.d));
                 context.globalAlpha = active ? 0.76 : 0.34;
                 for (let y = sourceSize * 0.18; y < sourceSize; y += 1.6) {
-                    pencilStroke(context, [[sourceSize * 0.15, y + 3], [sourceSize * 0.85, y - 3]], color, 1.1, pathSeed + Math.round(y * 17), 0.25, 2, false, { variation: 0.85, breaks: 0.25, grain: 0.7, gain: 2.2, step: 0.35 });
+                    pencilStroke(context, [[sourceSize * 0.15, y + 3], [sourceSize * 0.85, y - 3]], color, 1.1 * weightScale / (pencilRenderDefaults.strokeWidth / 1.2), pathSeed + Math.round(y * 17), 0.25, 2, false, { variation: Math.min(1, 0.85 * variationScale), fitPressure: true, breaks, breakCount, breakScale: coordinateScale, continuousBreaks: true, grain: 0.7, gain: 2.2, step: 0.35 });
                 }
                 context.restore();
             }
@@ -76,11 +68,24 @@ function renderIcon(paths, options) {
             return;
         }
         try {
+            if (sampledPoints >= 65536) {
+                drawFallbackPath(context, path.d, color, mode, weightScale);
+                return;
+            }
             const parts = cachedPathParts(path.d);
+            sampledPoints += parts.reduce((total, part) => total + part.length, 0);
+            if (sampledPoints > 65536) {
+                drawFallbackPath(context, path.d, color, mode, weightScale);
+                return;
+            }
             for (const points of parts) {
                 pencilStroke(context, points, color, (mode === 'scuff' ? 0.55 : 1.65) * weightScale, pathSeed, 0.3 * roughnessScale, mode === 'scuff' ? 1 : 3, false, {
-                    variation: 0.82,
-                    breaks: 0.18,
+                    variation: pressureVariation,
+                    fitPressure: true,
+                    breaks,
+                    breakCount,
+                    breakScale: coordinateScale,
+                    continuousBreaks: true,
                     grain: 0.68,
                     gain: mode === 'scuff' ? 1.5 : 3,
                     step: 0.35,
@@ -93,7 +98,7 @@ function renderIcon(paths, options) {
         }
     });
     if (active) {
-        pencilStroke(context, [[sourceSize * 0.2, sourceSize - 2], [sourceSize * 0.5, sourceSize - 1.5], [sourceSize * 0.8, sourceSize - 2.2]], color, 1.1 * weightScale, seed + 977, 0.25 * roughnessScale, 3, false, { variation: 0.8, breaks: 0.25, grain: 0.7, gain: 2.8, step: 0.35 });
+        pencilStroke(context, [[sourceSize * 0.2, sourceSize - 2], [sourceSize * 0.5, sourceSize - 1.5], [sourceSize * 0.8, sourceSize - 2.2]], color, 1.1 * weightScale, seed + 977, 0.25 * roughnessScale, 3, false, { variation: 0.8 * variationScale, fitPressure: true, breaks, breakCount, breakScale: coordinateScale, continuousBreaks: true, grain: 0.7, gain: 2.8, step: 0.35 });
     }
     if (options.badge?.paths.length) {
         const badge = options.badge;
@@ -106,7 +111,7 @@ function renderIcon(paths, options) {
         const y = position.startsWith('top') ? 0 : 40 - extent;
         const badgeImage = renderIcon(badge.paths, {
             seed: seed + 1543, size: size * scale, sourceSize: badgeSourceSize, active: false, color, dpr,
-            weightScale: weightScale / scale, roughnessScale,
+            weightScale: weightScale / scale, roughnessScale, breaks, breakCount, pressureVariation,
         });
         const mask = document.createElement('canvas');
         mask.width = badgeImage.width;
@@ -135,29 +140,47 @@ function renderIcon(paths, options) {
     }
     return canvas;
 }
-export const PencilIcon = forwardRef(function PencilIcon({ active = false, badge, className = '', decorative = true, paths, seed, size = 40, sourceSize = 32, ...props }, forwardedRef) {
+export const PencilIcon = forwardRef(function PencilIcon({ active = false, badge, className = '', decorative = true, paths, seed, size = 40, sourceSize = 32, strokeWidth, intensity, breaks, breakCount, pressureVariation, ...props }, forwardedRef) {
     const canvasRef = useRef(null);
     const lastPaintRef = useRef('');
     useImperativeHandle(forwardedRef, () => canvasRef.current);
-    const geometryKey = useMemo(() => JSON.stringify(paths), [paths]);
-    const badgeKey = useMemo(() => badge ? JSON.stringify(badge) : '', [badge]);
+    // Compare values, not caller object identity. Serializing each render also
+    // detects in-place edits; the effect receives a stable snapshot of that value.
+    const geometryKey = JSON.stringify(paths);
+    const badgeKey = badge ? JSON.stringify(badge) : '';
+    const stablePaths = useMemo(() => JSON.parse(geometryKey), [geometryKey]);
+    const stableBadge = useMemo(() => badgeKey ? JSON.parse(badgeKey) : undefined, [badgeKey]);
     const resolvedSeed = seedToNumber(seed ?? geometryKey);
     useEffect(() => {
         const canvas = canvasRef.current;
         if (!canvas)
             return undefined;
         let disposed = false;
-        const paint = () => {
+        const paintIcon = () => {
             if (disposed)
                 return;
             const dpr = effectiveDpr(3);
             const computed = getComputedStyle(canvas);
             const color = computed.color;
             const rtl = computed.direction === 'rtl';
-            const weightScale = readRenderToken(computed, '--inkra-stroke-width', pencilRenderDefaults.strokeWidth, 0.3, 3) / 1.2;
+            const iconWeight = readRenderToken(computed, '--inkra-icon-stroke-width', pencilRenderDefaults.iconStrokeWidth, 0.3, 3);
+            const weightScale = (typeof strokeWidth === 'number' && Number.isFinite(strokeWidth) ? Math.min(3, Math.max(0.3, strokeWidth)) : iconWeight) / 1.2;
+            const pigmentOpacity = typeof intensity === 'number' && Number.isFinite(intensity)
+                ? Math.min(1, Math.max(0, intensity))
+                : readRenderToken(computed, '--inkra-icon-intensity', 1, 0, 1);
             const roughnessScale = readRenderToken(computed, '--inkra-stroke-amplitude', pencilRenderDefaults.strokeRoughness, 0, maxStrokeRoughness) / 0.6;
+            const strokeBreaks = typeof breaks === 'number' && Number.isFinite(breaks)
+                ? Math.min(1, Math.max(0, breaks))
+                : readRenderToken(computed, '--inkra-icon-breaks', pencilRenderDefaults.iconBreaks, 0, 1);
+            const strokeVariation = typeof pressureVariation === 'number' && Number.isFinite(pressureVariation)
+                ? Math.min(1, Math.max(0, pressureVariation))
+                : readRenderToken(computed, '--inkra-icon-pressure-variation', pencilRenderDefaults.iconPressureVariation, 0, 1);
+            const strokeBreakCount = Math.floor(typeof breakCount === 'number' && Number.isFinite(breakCount)
+                ? Math.min(12, Math.max(0, breakCount))
+                : readRenderToken(computed, '--inkra-icon-break-count', pencilRenderDefaults.iconBreakCount, 0, 12));
             const key = JSON.stringify([
                 PENCIL_RENDERER_VERSION,
+                'icon-path-pressure-gaps-v4',
                 geometryKey,
                 badgeKey,
                 rtl,
@@ -167,17 +190,19 @@ export const PencilIcon = forwardRef(function PencilIcon({ active = false, badge
                 active,
                 color,
                 dpr,
-                weightScale, roughnessScale,
+                weightScale, roughnessScale, strokeBreaks, strokeBreakCount, strokeVariation,
             ]);
-            if (key === lastPaintRef.current && canvasIsUsable(canvas))
+            const paintKey = `${key}:${pigmentOpacity}`;
+            if (paintKey === lastPaintRef.current && canvasIsUsable(canvas))
                 return;
+            delete canvas.dataset.pencilIconReady;
             let image = imageCache.get(key);
             if (image && !canvasIsUsable(image)) {
                 imageCache.delete(key);
                 image = undefined;
             }
             if (!image) {
-                image = renderIcon(paths, { seed: resolvedSeed, size, sourceSize, active, color, dpr, badge, rtl, weightScale, roughnessScale });
+                image = renderIcon(stablePaths, { seed: resolvedSeed, size, sourceSize, active, color, dpr, badge: stableBadge, rtl, weightScale, roughnessScale, breaks: strokeBreaks, breakCount: strokeBreakCount, pressureVariation: strokeVariation });
                 imageCache.set(key, image, canvasByteCost(image));
             }
             canvas.width = image.width;
@@ -185,9 +210,27 @@ export const PencilIcon = forwardRef(function PencilIcon({ active = false, badge
             const context = canvas.getContext('2d');
             if (!context || context.isContextLost?.())
                 return;
+            // Composite once so overlapping strokes and badges share the same intensity.
+            context.save();
+            context.globalAlpha = pigmentOpacity;
             context.drawImage(image, 0, 0);
-            lastPaintRef.current = key;
+            context.restore();
+            lastPaintRef.current = paintKey;
+            canvas.dataset.pencilIconReady = 'true';
+        };
+        const paint = () => {
+            try {
+                paintIcon();
+            }
+            catch {
+                // Invalid/oversized decoration must not throw from a React effect.
+                canvas.width = canvas.height = 0;
+                lastPaintRef.current = '';
+                delete canvas.dataset.pencilIconReady;
+            }
         };
+        const onContextLost = () => { delete canvas.dataset.pencilIconReady; lastPaintRef.current = ''; };
+        canvas.addEventListener('contextlost', onContextLost);
         const inheritedColor = new MutationObserver(paint);
         for (let element = canvas; element; element = element.parentElement) {
             inheritedColor.observe(element, { attributes: true, attributeFilter: ['style', 'class', 'dir', 'data-theme', 'data-inkra-theme'] });
@@ -198,11 +241,12 @@ export const PencilIcon = forwardRef(function PencilIcon({ active = false, badge
         paint();
         return () => {
             disposed = true;
+            canvas.removeEventListener('contextlost', onContextLost);
             stopRecovery();
             inheritedColor.disconnect();
             colorScheme.removeEventListener('change', paint);
         };
-    }, [active, badge, badgeKey, geometryKey, paths, resolvedSeed, size, sourceSize]);
+    }, [active, stableBadge, badgeKey, geometryKey, stablePaths, resolvedSeed, size, sourceSize, strokeWidth, intensity, breaks, breakCount, pressureVariation]);
     const accessibilityProps = decorative
         ? { 'aria-hidden': true }
         : { role: props.role ?? 'img' };

package/dist/PencilLine.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
-import { BoundedCache, PENCIL_RENDERER_VERSION, canvasByteCost, canvasIsUsable, effectiveDpr, } from './internal/cache.js';
+import { BoundedCache, PENCIL_RENDERER_VERSION, boundedCanvasSize, canvasByteCost, canvasIsUsable, effectiveDpr, } from './internal/cache.js';
 import { observeCanvasRecovery } from './internal/recovery.js';
 import { seedToNumber } from './internal/random.js';
 import { createPencilLinePoints, pencilLineHasDrawableSize } from './internal/line.js';
@@ -37,6 +37,14 @@ export const PencilLine = forwardRef(function PencilLine({ className = '', orien
             if (!pencilLineHasDrawableSize(width, height, orientation))
                 return;
             const dpr = effectiveDpr(2);
+            try {
+                boundedCanvasSize(width, height, dpr);
+            }
+            catch {
+                canvas.width = canvas.height = 0;
+                lastPaint = '';
+                return;
+            }
             const style = getComputedStyle(canvas);
             const color = style.color;
             const resolvedWeight = weight ?? readRenderToken(style, '--inkra-stroke-width', pencilRenderDefaults.strokeWidth, 0.3, 3);

package/dist/PencilText.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useImperativeHandle, useRef, useState } from 'react';
 import { useBrowserLayoutEffect } from './internal/useBrowserLayoutEffect.js';
-import { effectiveDpr } from './internal/cache.js';
+import { boundedCanvasSize, effectiveDpr } from './internal/cache.js';
 import { observeCanvasRecovery } from './internal/recovery.js';
 import { seedToNumber } from './internal/random.js';
 import { pencilLettering, renderPencilText } from './internal/textRenderer.js';
@@ -108,8 +108,9 @@ function paintText(element, source, canvas, text, seed, glyphSeed) {
     const dpr = effectiveDpr(2);
     if (width * height * dpr ** 2 > 2 * 1024 * 1024 || !context || context.isContextLost?.())
         return false;
-    canvas.width = Math.ceil(width * dpr);
-    canvas.height = Math.ceil(height * dpr);
+    const pixels = boundedCanvasSize(width, height, dpr);
+    canvas.width = pixels.width;
+    canvas.height = pixels.height;
     Object.assign(canvas.style, {
         left: `-${padding}px`,
         top: `-${padding}px`,
@@ -119,7 +120,7 @@ function paintText(element, source, canvas, text, seed, glyphSeed) {
         height: `${height}px`,
     });
     context.scale(dpr, dpr);
-    context.font = `400 ${size}px ${style.fontFamily}`;
+    context.font = `${style.fontStyle} ${style.fontWeight} ${size}px ${style.fontFamily}`;
     context.fontKerning = 'none';
     const ascent = context.measureText(text).fontBoundingBoxAscent ?? size;
     const lines = measureLocalTextLines(element, source, text, localWidth, localHeight);
@@ -133,6 +134,8 @@ function paintText(element, source, canvas, text, seed, glyphSeed) {
             glyphSeed,
             color: style.color,
             family: style.fontFamily,
+            weight: style.fontWeight,
+            style: style.fontStyle,
             dpr,
             settings: {
                 variation: readRenderToken(style, '--inkra-letter-variation', pencilLettering.variation, 0, 1),
@@ -176,7 +179,7 @@ const PencilTextImplementation = forwardRef(function PencilText({ as: Element =
             const context = canvas.getContext('2d');
             if (!context || context.isContextLost?.())
                 return;
-            context.font = `400 ${style.fontSize} ${style.fontFamily}`;
+            context.font = `${style.fontStyle} ${style.fontWeight} ${style.fontSize} ${style.fontFamily}`;
             context.fontKerning = 'none';
             const measure = (value) => context.measureText(value).width;
             if (measure(children) <= width) {
@@ -248,8 +251,8 @@ const PencilTextImplementation = forwardRef(function PencilText({ as: Element =
             return JSON.stringify([
                 localBox.width, localBox.height, effectiveDpr(2),
                 style.fontSize && style.fontFamily
-                    ? document.fonts?.check(`400 ${style.fontSize} ${style.fontFamily}`, text) : false,
-                ...['color', 'font-family', 'font-size', 'line-height', 'text-align', 'text-indent',
+                    ? document.fonts?.check(`${style.fontStyle} ${style.fontWeight} ${style.fontSize} ${style.fontFamily}`, text) : false,
+                ...['color', 'font-family', 'font-size', 'font-weight', 'font-style', 'line-height', 'text-align', 'text-indent',
                     'letter-spacing', 'white-space', 'word-break', 'overflow-wrap', 'direction',
                     'padding-top', 'padding-left', 'padding-right', 'padding-bottom',
                     '--inkra-letter-variation', '--inkra-letter-breaks', '--inkra-letter-outline',
@@ -260,12 +263,15 @@ const PencilTextImplementation = forwardRef(function PencilText({ as: Element =
             pending = null;
             if (!disposed && visible && dirty) {
                 try {
-                    if (paintText(node, source, canvas, text, resolvedSeed, glyphSeed))
-                        lastAppearance = appearanceKey();
+                    paintText(node, source, canvas, text, resolvedSeed, glyphSeed);
                 }
                 catch {
                     delete node.dataset.pencilReady;
                 }
+                // Remember fallback appearances too. An oversized/unsupported label
+                // must not retry expensive measurement for unrelated ancestor styles.
+                // Theme/font/size changes and explicit canvas recovery still retry.
+                lastAppearance = appearanceKey();
                 dirty = false;
             }
         };

package/dist/accordion/Accordion.js

@@ -1,23 +1,49 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
-import { createContext, forwardRef, useContext, useId } from 'react';
+import { createContext, forwardRef, useCallback, useContext, useId, useRef, useState } from 'react';
 import { PencilIcon } from '../PencilIcon.js';
 import { PencilLine } from '../PencilLine.js';
 import { PencilSurface } from '../PencilSurface.js';
 import { PencilText } from '../PencilText.js';
+import { useBrowserLayoutEffect } from '../internal/useBrowserLayoutEffect.js';
 const chevronDownPaths = [
     { d: 'M6 9L12 15L18 9' },
 ];
 const AccordionOrientationContext = createContext('vertical');
+const AccordionOpenValuesContext = createContext(new Set());
+const AccordionItemOpenContext = createContext(false);
 function classes(...values) {
     return values.filter(Boolean).join(' ');
 }
+function assignRef(ref, value) {
+    if (typeof ref === 'function')
+        return ref(value);
+    if (ref)
+        ref.current = value;
+}
+function values(value) {
+    if (Array.isArray(value))
+        return value;
+    return value ? [value] : [];
+}
 export const AccordionRoot = forwardRef(function AccordionRoot({ className, orientation = 'vertical', ...props }, ref) {
-    return (_jsx(AccordionOrientationContext.Provider, { value: orientation, children: _jsx(AccordionPrimitive.Root, { ...props, className: classes('inkra-accordion', className), orientation: orientation, ref: ref }) }));
+    const controlled = props.value !== undefined;
+    const [uncontrolledValues, setUncontrolledValues] = useState(() => values(props.defaultValue));
+    const currentValues = controlled ? values(props.value) : uncontrolledValues;
+    const handleValueChange = (nextValue) => {
+        if (!controlled)
+            setUncontrolledValues(values(nextValue));
+        if (props.type === 'single')
+            props.onValueChange?.(nextValue);
+        else
+            props.onValueChange?.(nextValue);
+    };
+    return (_jsx(AccordionOrientationContext.Provider, { value: orientation, children: _jsx(AccordionOpenValuesContext.Provider, { value: new Set(currentValues), children: props.type === 'single' ? (_jsx(AccordionPrimitive.Root, { ...props, className: classes('inkra-accordion', className), onValueChange: handleValueChange, orientation: orientation, ref: ref })) : (_jsx(AccordionPrimitive.Root, { ...props, className: classes('inkra-accordion', className), onValueChange: handleValueChange, orientation: orientation, ref: ref })) }) }));
 });
 export const AccordionItem = forwardRef(function AccordionItem({ children, className, dividerSeed, showDivider = true, value, ...props }, ref) {
     const orientation = useContext(AccordionOrientationContext);
-    return (_jsxs(AccordionPrimitive.Item, { ...props, className: classes('inkra-accordion__item', className), ref: ref, value: value, children: [children, showDivider ? (_jsx(PencilLine, { className: "inkra-accordion__divider", orientation: orientation === 'horizontal' ? 'vertical' : 'horizontal', seed: dividerSeed ?? `inkra-accordion-divider-${value}`, weight: 0.8 })) : null] }));
+    const open = useContext(AccordionOpenValuesContext).has(value);
+    return (_jsx(AccordionItemOpenContext.Provider, { value: open, children: _jsxs(AccordionPrimitive.Item, { ...props, className: classes('inkra-accordion__item', className), ref: ref, value: value, children: [children, showDivider ? (_jsx(PencilLine, { className: "inkra-accordion__divider", orientation: orientation === 'horizontal' ? 'vertical' : 'horizontal', seed: dividerSeed ?? `inkra-accordion-divider-${value}`, weight: 0.8 })) : null] }) }));
 });
 export const AccordionHeader = forwardRef(function AccordionHeader({ className, ...props }, ref) {
     return (_jsx(AccordionPrimitive.Header, { ...props, className: classes('inkra-accordion__header', className), ref: ref }));
@@ -29,9 +55,43 @@ export const AccordionTrigger = forwardRef(function AccordionTrigger({ children,
     return (_jsxs(AccordionPrimitive.Trigger, { ...props, className: classes('inkra-accordion__trigger', className), ref: ref, children: [_jsx(PencilSurface, { "aria-hidden": "true", as: "span", className: "inkra-accordion__focus-ring", radius: 6, seed: `${resolvedSeed}-focus`, variant: "outline" }), _jsx("span", { className: "inkra-accordion__trigger-label", children: typeof children === 'string' ? (_jsx(PencilText, { seed: `${resolvedSeed}-text`, children: children })) : children }), triggerIcon == null ? null : (_jsx("span", { "aria-hidden": "true", className: "inkra-accordion__trigger-icon", children: triggerIcon }))] }));
 });
 export const AccordionContent = forwardRef(function AccordionContent({ children, className, contentClassName, ...props }, ref) {
-    return (_jsx(AccordionPrimitive.Content, { ...props, className: classes('inkra-accordion__content', className), ref: ref, children: _jsx("div", { className: classes('inkra-accordion__content-body', contentClassName), children: children }) }));
+    const open = useContext(AccordionItemOpenContext);
+    const contentRef = useRef(null);
+    const focusWithinRef = useRef(false);
+    const callerAriaHidden = props['aria-hidden'];
+    const callerInert = props.inert;
+    const callerOnBlurCapture = props.onBlurCapture;
+    const callerOnFocusCapture = props.onFocusCapture;
+    const setContentRef = useCallback((node) => {
+        contentRef.current = node;
+        const cleanup = assignRef(ref, node);
+        return () => {
+            contentRef.current = null;
+            if (typeof cleanup === 'function')
+                cleanup();
+            else
+                assignRef(ref, null);
+        };
+    }, [ref]);
+    useBrowserLayoutEffect(() => {
+        const content = contentRef.current;
+        if (open || !content || !focusWithinRef.current)
+            return;
+        focusWithinRef.current = false;
+        const triggerId = content.getAttribute('aria-labelledby');
+        if (triggerId)
+            content.ownerDocument.getElementById(triggerId)?.focus({ preventScroll: true });
+    }, [open]);
+    return (_jsx(AccordionPrimitive.Content, { ...props, "aria-hidden": open ? callerAriaHidden : true, className: classes('inkra-accordion__content', className), inert: open ? callerInert : true, onBlurCapture: event => {
+            callerOnBlurCapture?.(event);
+            if (open && !event.currentTarget.contains(event.relatedTarget))
+                focusWithinRef.current = false;
+        }, onFocusCapture: event => {
+            focusWithinRef.current = true;
+            callerOnFocusCapture?.(event);
+        }, ref: setContentRef, children: _jsx("div", { className: classes('inkra-accordion__content-body', contentClassName), children: children }) }));
 });
-export const Accordion = Object.freeze({
+export const Accordion = /* @__PURE__ */ Object.freeze({
     Root: AccordionRoot,
     Item: AccordionItem,
     Header: AccordionHeader,