@inkra/react 0.2.0 → 0.4.3

package/README.md

@@ -1,6 +1,6 @@
 # Inkra
 
-Inkra is a pencil-styled React component library. It includes action, form, overlay, navigation, content and feedback components, plus Calendar, DayAgenda, JourneyMap and deterministic drawing primitives. Version `0.1.0` is published; the component expansion described below is available only in the current, unpublished source candidate.
+Inkra is a pencil-styled React component library. It includes action, form, overlay, navigation, content and feedback components, plus Calendar, DayAgenda, JourneyMap and deterministic drawing primitives. This document describes the APIs shipped with this package; see the repository changelog and npm registry for release status.
 
 Source and maintenance: [inkrajs/inkra](https://github.com/inkrajs/inkra).
 
@@ -80,6 +80,18 @@ All standard `button` props, including `disabled`, `name`, `value`, `form`, `ari
 
 `InputNumber` places decrease and increase buttons on either side of a centered numeric input, with no clear button. Keyboard deletion produces `null`; decimal stepping and out-of-range validation remain native. `Slider` supports single/range values, horizontal/vertical layout and `standard` or `inset` appearance.
 
+`InputNumber` supports Shift-click and Shift-arrow increments of 10 by default.
+Use `stepModifiers={[{ shiftKey: true, step: 10 }, { altKey: true, step: 0.1 }]}`
+to configure exact modifier chords with absolute increments, or `[]` to disable
+overrides. The first valid matching rule wins; unspecified modifiers must be
+released. Values remain bounded by `min`/`max`; `step="any"` disables stepping.
+`pressAndHold` defaults to true, with `repeatDelay={400}` and
+`repeatInterval={80}` in milliseconds. Release, cancellation, blur, backgrounding,
+disabling and value boundaries stop repetition. Delay/interval are bounded to
+150-60000/32-60000 ms. Numeric values use pencil lettering at rest and during
+button stepping. Direct text entry deliberately stays native until blur, keeping
+browser-owned incomplete drafts such as `-`, `1.` and `1e` readable.
+
 `Select.Root` uses string values for single selection and string arrays with `multiple`. Multi-select remains open while toggling items and submits repeated values under the same field name. `Select.Clear` is a separate button; never nest it inside the trigger.
 
 `Select.Trigger` supports `startIcon`, `endIcon`, `hideValue`, `hideIndicator`, `iconOnly`, `fullWidth` and `textAlign`. The existing `icon` prop replaces the dropdown indicator. Icon-only mode keeps a square hit target of at least 44px and retains selected text as an accessible description. Provide a Field/ARIA name and Tooltip for icon-only triggers. Decorative slots must not contain interactive controls.
@@ -195,10 +207,9 @@ Content layout options preserve existing defaults:
 - `Avatar.Root.radius` clamps to 0-8px, including pencil and image corners; `bordered={false}` removes the outline. `Avatar.Image.fit` accepts `cover | contain` (default cover).
 - `Table.Root.striped`, `hoverable` and `stickyHeader` default to false. Constrain `Table.Container` with `style={{ maxHeight: 240 }}` for sticky scrolling. `captionSide` accepts `top | bottom`. `Head.align` and `Cell.align` accept logical `start | center | end`, retaining native alignment values for compatibility. Hover feedback does not imply row actions.
 
-## Component Expansion (Unreleased)
+## Additional Components
 
-These exports are not present in the published 0.1.0 archive. Build, pack and
-install the local candidate to use them. The documentation playground includes
+These exports extend the original core component set. The documentation playground includes
 working examples, live property tabs and per-component API/accessibility notes.
 
 | Component | Contract |
@@ -239,6 +250,77 @@ motion and SSR show deterministic final values. Intermediate frames are visual;
 the polite announcement updates only at the final value. Use `getValueLabel`
 when units or custom rendering need a complete accessible phrase.
 
+Set `compact` to follow `locale` (Chinese units for `zh`, English units otherwise),
+or use `compact="en"` / `compact="zh"` to select a unit table explicitly.
+English uses this library's short-scale suffix convention: K, M, B, T, Qa, Qi,
+Sx, Sp, Oc, No, Dc (10^3 through 10^33, increasing by 10^3).
+Chinese uses 千 (10^3), then 万, 亿, 兆, 京, 垓, 秭, 穰, 沟, 涧, 正, 载, 极,
+恒河沙, 阿僧祇, 那由他, 不可思议, 无量大数 (10^4 through 10^68, increasing by 10^4).
+`numberTickerUnits` exports both tables. A space separates numbers and units by default.
+The default is `false`, preserving existing `formatOptions` behavior. Compact mode
+uses at most one fractional digit by default; customize precision with
+`formatOptions`. Explicit scientific/engineering notation takes priority over compact.
+Currency/percent affixes are preserved. By default rounding can promote the unit
+(999,950 becomes 1 M). Deltas use the same unit
+system with their own precision; announcements and `getValueLabel` receive the
+unabbreviated formatted value. `renderValue` receives the abbreviated value in
+`details.formattedValue`. NumberTicker never changes the supplied numeric value.
+
+`compactOptions` supports:
+
+- `minUnit` / `maxUnit`: allowed unit labels; equal bounds fix the unit. An empty
+  label denotes the unitless base. For example `maxUnit: '万'` keeps 10^8 as `10,000 万`.
+- `separator`: defaults to one space; `''` removes it.
+- `promotionThreshold`: positive multiplier on each unit's factor (default 1).
+  Set 10 to wait until 10,000 before entering K. `promoteAfterRounding: false`
+  compares raw magnitudes instead of rounded current-unit values.
+- `units`: replace the table with `{ factor, label, threshold? }` entries.
+  `threshold` overrides the multiplier with an absolute display-magnitude trigger;
+  e.g. `{ factor: 10000, label: '万', threshold: 100000 }`. Binary factors work too.
+  Entries are sorted without mutation; labels/factors must be unique, factors > 1,
+  and thresholds positive, finite and strictly increasing. Invalid configurations
+  and unknown/reversed bounds throw RangeError. The unitless base is implicit.
+- `overflow`: `unit` keeps the largest permitted unit; `scientific` switches at
+  the next unit's threshold (or extrapolates the last step at the table end).
+  Explicit `maxUnit` defaults to `unit`; otherwise the default is `scientific`.
+
+Use `formatOptions.notation: 'scientific' | 'engineering'` for exponent notation.
+`maximumFractionDigits` controls decimals, `minimumFractionDigits` pads zeros,
+and `roundingMode: 'trunc'` truncates instead of rounding (`halfExpand` is default).
+Other Intl rounding modes are supported when provided by the runtime; unsupported
+nondefault rounding modes throw rather than silently round differently.
+`value`, unit `factor` / `threshold`, and `promotionThreshold` accept
+`number | bigint | string`. Use bigint for exact integers and decimal strings for
+exact fractions or exponents beyond JavaScript's numeric range. Already-rounded
+`number` inputs cannot regain lost digits. Decimal arithmetic uses an isolated
+`decimal.js` context without modifying the application's Decimal settings.
+
+```tsx
+<NumberTicker value={9007199254740993n} showDelta />
+<NumberTicker value="12345678901234567890.123456" formatOptions={{ maximumFractionDigits: 6 }} />
+<NumberTicker value="1.23456789e1000" formatOptions={{ notation: 'scientific' }} />
+```
+
+Strings accept signs, decimal points, e/E exponents and outer whitespace, but
+not grouping separators, hex, empty strings or non-finite spellings. Inputs are
+bounded to 10,000 coefficient digits and written/normalized exponents within
+-10,000..10,000; invalid or oversized exact inputs throw `RangeError`. Decimal
+fractions require exact Intl decimal-string support in the runtime; unsupported
+engines throw rather than silently lose precision. Native number NaN/Infinity
+formatting is unchanged.
+
+`renderValue` and `getValueLabel` retain the input type; prefer the supplied
+formatted text when custom rendering. Deltas between bigints are bigint, between
+numbers are number, and mixed/string deltas are exact decimal strings. Bigint
+animation frames stay integral. Input-type changes or exact arithmetic spanning
+more than 512 digits settle immediately, as do reduced-motion updates.
+`createNumberFormatter` remains a native Intl formatter; use
+`formatTickerValue(formatter, value)` for precise numeric-string formatting.
+
+`prefix` and `suffix` accept icons, text or fragments. Pass `PencilIcon` to keep
+the library material, and `getValueLabel` to describe icon meanings to assistive
+technology; decorative affixes are not announced twice.
+
 `Log` renders caller-ordered records with stable ids, optional level filters and
 pause/follow controls. It follows only append updates while the viewport remains
 near the bottom. The named scroll region supports Home/End and intentionally is
@@ -266,7 +348,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:
 
@@ -285,8 +378,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,

package/dist/alert-dialog/index.d.ts

@@ -11,7 +11,7 @@ export declare function AlertDialogRoot({ defaultOpen, onOpenChange, open, pendi
 export type AlertDialogTriggerProps = DialogPrimitive.DialogTriggerProps;
 export declare const AlertDialogTrigger: import("react").ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
 export type AlertDialogPortalProps = DialogPrimitive.DialogPortalProps;
-export declare function AlertDialogPortal({ children, ...props }: AlertDialogPortalProps): import("react").JSX.Element;
+export declare function AlertDialogPortal({ children, ...props }: AlertDialogPortalProps): ReactNode;
 export type AlertDialogBackdropProps = DialogPrimitive.DialogOverlayProps;
 export declare const AlertDialogBackdrop: import("react").ForwardRefExoticComponent<DialogPrimitive.DialogOverlayProps & import("react").RefAttributes<HTMLDivElement>>;
 export interface AlertDialogContentProps extends DialogPrimitive.DialogContentProps {