@inkra/react 0.1.0 → 0.3.0

package/dist/form/EditablePencilText.js

@@ -1,14 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useRef } from 'react';
 import { useBrowserLayoutEffect } from '../internal/useBrowserLayoutEffect.js';
-import { effectiveDpr } from '../internal/cache.js';
+import { BoundedCache, canvasByteCost, canvasIsUsable, effectiveDpr } from '../internal/cache.js';
 import { observeCanvasRecovery } from '../internal/recovery.js';
 import { seedToNumber } from '../internal/random.js';
-import { renderPencilText } from '../internal/textRenderer.js';
-import { queueTextPaint } from '../internal/textQueue.js';
+import { pencilLettering, renderPencilText } from '../internal/textRenderer.js';
+import { readRenderToken } from '../internal/renderTokens.js';
 const MAX_EDITABLE_TEXT = 4096;
 const MAX_EDITABLE_LINE = 256;
-const complexScript = /[\u0590-\u08ff\u0900-\u0dff\u0e00-\u0fff\u1780-\u18af\u200c\u200d]/u;
+const complexScript = /[\u0300-\u036f\u0590-\u08ff\u0900-\u0dff\u0e00-\u0fff\u1780-\u18af\u200c\u200d\ufe00-\ufe0f]/u;
 function numeric(style, property) {
     const value = Number.parseFloat(style.getPropertyValue(property));
     return Number.isFinite(value) ? value : 0;
@@ -17,29 +17,6 @@ function editableText(control) {
     const placeholder = control.value.length === 0;
     return { text: placeholder ? control.placeholder : control.value, placeholder };
 }
-function visibleText(text, context, scrollLeft, viewportWidth) {
-    const characters = Array.from(text);
-    const overscan = Math.max(16, viewportWidth * 0.2);
-    const startEdge = Math.max(0, scrollLeft - overscan);
-    const endEdge = scrollLeft + viewportWidth + overscan;
-    let offset = 0;
-    let start = 0;
-    let end = characters.length;
-    for (let index = 0; index < characters.length; index += 1) {
-        const width = context.measureText(characters[index]).width;
-        if (offset + width < startEdge)
-            start = index + 1;
-        if (offset <= endEdge)
-            end = index + 1;
-        offset += width;
-        if (offset > endEdge)
-            break;
-    }
-    const visible = characters.slice(start, end).join('');
-    if (Array.from(visible).length > MAX_EDITABLE_LINE)
-        return null;
-    return { text: visible, offset: context.measureText(characters.slice(0, start).join('')).width };
-}
 function copyMirrorStyle(mirror, control, style) {
     Object.assign(mirror.style, {
         boxSizing: 'border-box',
@@ -92,7 +69,7 @@ function measureTextareaLines(control, text, style) {
             const rectangle = range.getBoundingClientRect();
             let line = lines[lines.length - 1];
             if (!line || Math.abs(line.top - rectangle.top) > 1) {
-                line = { text: '', left: rectangle.left - mirrorBox.left, top: rectangle.top - mirrorBox.top };
+                line = { text: '', left: rectangle.left - mirrorBox.left, top: rectangle.top - mirrorBox.top, start: offset - character.length };
                 lines.push(line);
             }
             line.text += character;
@@ -119,22 +96,17 @@ function textStart(direction, textAlign, controlWidth, paddingStart, paddingEnd,
         return controlWidth - paddingEnd - advance;
     return paddingStart;
 }
-function paintEditableText(canvas, control, seed, multiline) {
+function paintEditableText(canvas, buffer, glyphs, control, seed, multiline, composition) {
     const width = control.clientWidth;
     const height = control.clientHeight;
-    const context = canvas.getContext('2d');
-    if (!context || context.isContextLost?.() || width < 2 || height < 2)
+    const target = canvas.getContext('2d');
+    const context = buffer.getContext('2d');
+    const dpr = effectiveDpr(2);
+    if (!target || target.isContextLost?.() || !context || context.isContextLost?.()
+        || width < 2 || height < 2 || width * height * dpr ** 2 > 2 * 1024 * 1024)
         return false;
-    Object.assign(canvas.style, {
-        left: `${control.offsetLeft}px`,
-        top: `${control.offsetTop}px`,
-        right: 'auto',
-        bottom: 'auto',
-        width: `${width}px`,
-        height: `${height}px`,
-    });
     const content = editableText(control);
-    if (Array.from(content.text).length > MAX_EDITABLE_TEXT)
+    if (content.text.length > MAX_EDITABLE_TEXT)
         return false;
     const style = getComputedStyle(control);
     if (style.direction === 'rtl' || complexScript.test(content.text))
@@ -142,170 +114,243 @@ function paintEditableText(canvas, control, seed, multiline) {
     const fontSize = Number.parseFloat(style.fontSize);
     if (!Number.isFinite(fontSize) || fontSize <= 0)
         return false;
-    const dpr = effectiveDpr(2);
-    canvas.width = Math.ceil(width * dpr);
-    canvas.height = Math.ceil(height * dpr);
-    context.setTransform(dpr, 0, 0, dpr, 0, 0);
-    context.clearRect(0, 0, width, height);
-    if (!content.text)
-        return true;
     const family = style.fontFamily;
     const color = content.placeholder
         ? style.getPropertyValue('--inkra-editable-placeholder-color').trim() || style.color
         : style.getPropertyValue('--inkra-editable-text-color').trim() || style.color;
+    const settings = {
+        variation: readRenderToken(style, '--inkra-letter-variation', pencilLettering.variation, 0, 1),
+        breaks: readRenderToken(style, '--inkra-letter-breaks', pencilLettering.breaks, 0, 1),
+        outline: readRenderToken(style, '--inkra-letter-outline', pencilLettering.outline, 0, 1),
+        fill: readRenderToken(style, '--inkra-letter-fill', pencilLettering.fill, 0, 1),
+        grain: readRenderToken(style, '--inkra-letter-grain', pencilLettering.grain, 0, 1),
+    };
+    buffer.width = Math.ceil(width * dpr);
+    buffer.height = Math.ceil(height * dpr);
+    context.setTransform(dpr, 0, 0, dpr, 0, 0);
+    context.font = `400 ${fontSize}px ${family}`;
+    context.fontKerning = 'none';
+    context.fillStyle = color;
+    const metrics = context.measureText('Mg');
+    const ascent = metrics.fontBoundingBoxAscent ?? fontSize;
+    const descent = metrics.fontBoundingBoxDescent ?? fontSize * 0.25;
     const paddingStart = numeric(style, 'padding-inline-start') || numeric(style, 'padding-left');
     const paddingEnd = numeric(style, 'padding-inline-end') || numeric(style, 'padding-right');
-    const measure = document.createElement('canvas').getContext('2d');
-    if (!measure)
+    if (!multiline && content.text.length > MAX_EDITABLE_LINE)
         return false;
-    measure.font = `400 ${fontSize}px ${family}`;
-    measure.fontKerning = 'none';
-    if (!multiline && Array.from(content.text).length > MAX_EDITABLE_LINE)
-        return false;
-    if (!multiline && style.direction === 'rtl'
-        && measure.measureText(content.text).width > control.clientWidth - paddingStart - paddingEnd)
-        return false;
-    const measuredLines = multiline
+    const lines = multiline
         ? measureTextareaLines(control, content.text, style)
-        : [{ text: content.text, left: 0, top: 0 }];
-    if (!measuredLines)
+        : [{ text: content.text, left: 0, top: 0, start: 0 }];
+    if (!lines)
         return false;
     const baseSeed = seedToNumber(seed);
-    context.save();
-    context.beginPath();
-    context.rect(0, 0, width, height);
-    context.clip();
-    for (let index = 0; index < measuredLines.length; index += 1) {
-        const line = measuredLines[index];
-        const visible = multiline && control.wrap !== 'off'
-            ? { text: line.text, offset: 0 }
-            : visibleText(line.text, measure, control.scrollLeft, width - paddingStart - paddingEnd);
-        if (!visible?.text)
-            continue;
-        const sprite = renderPencilText(visible.text, {
-            size: fontSize,
-            family,
-            color,
-            seed: baseSeed + index * 131,
-            dpr,
-            cache: false,
-        });
-        const start = multiline
-            ? line.left
-            : textStart(style.direction, style.textAlign, control.clientWidth, paddingStart, paddingEnd, sprite.advance);
-        const x = start + visible.offset - control.scrollLeft - sprite.padding;
-        const y = multiline
-            ? line.top - control.scrollTop - sprite.padding
-            : (control.clientHeight - sprite.height) / 2;
-        if (y > height || y + sprite.height < 0)
+    const glyphAppearance = JSON.stringify([fontSize, family, color, baseSeed, dpr, settings]);
+    const composingStart = composition?.start ?? -1;
+    const composingEnd = composition
+        ? Math.max(composition.start, control.value.length - (composition.value.length - composition.end))
+        : -1;
+    for (const line of lines) {
+        const baseline = multiline
+            ? line.top - control.scrollTop + ascent
+            : (height - ascent - descent) / 2 + ascent;
+        if (baseline - ascent > height || baseline + descent < 0)
             continue;
-        context.drawImage(sprite.ink, x, y, sprite.width, sprite.height);
+        let left = (multiline ? line.left : textStart(style.direction, style.textAlign, width, paddingStart, paddingEnd, context.measureText(line.text).width)) - control.scrollLeft;
+        let offset = line.start;
+        for (const character of line.text) {
+            const advance = character === '\n' || character === '\r' ? 0
+                : character === '\t' ? numeric(style, 'tab-size') * context.measureText(' ').width
+                    : context.measureText(character).width;
+            if (advance && left + advance >= 0 && left <= width) {
+                if (composition && !content.placeholder && offset >= composingStart && offset < composingEnd) {
+                    // Keep preedit visibly underlined without changing the native IME session.
+                    context.fillText(character, left, baseline);
+                    context.fillRect(left, baseline + 2, advance, 1 / dpr);
+                }
+                else if (character.trim()) {
+                    const key = glyphAppearance + character;
+                    let glyph = glyphs.get(key);
+                    if (!glyph || !canvasIsUsable(glyph.ink)) {
+                        glyph = renderPencilText(character, {
+                            size: fontSize, family, color, seed: baseSeed ^ seedToNumber(character),
+                            dpr, settings, cache: false,
+                        });
+                        glyphs.set(key, glyph, canvasByteCost(glyph.ink));
+                    }
+                    context.drawImage(glyph.ink, left - glyph.padding, baseline - glyph.ascent - glyph.padding, glyph.width, glyph.height);
+                }
+            }
+            left += advance;
+            offset += character.length;
+        }
     }
-    context.restore();
+    // Commit only a complete frame. The visible canvas never waits empty for idle work.
+    if (canvas.width !== buffer.width)
+        canvas.width = buffer.width;
+    if (canvas.height !== buffer.height)
+        canvas.height = buffer.height;
+    target.setTransform(1, 0, 0, 1, 0, 0);
+    target.clearRect(0, 0, canvas.width, canvas.height);
+    target.drawImage(buffer, 0, 0);
+    Object.assign(canvas.style, {
+        left: `${control.offsetLeft}px`, top: `${control.offsetTop}px`,
+        right: 'auto', bottom: 'auto', width: `${width}px`, height: `${height}px`,
+    });
     return true;
 }
 export function EditablePencilText({ controlRef, defaultValue, multiline = false, placeholder, seed, value, }) {
     const canvasRef = useRef(null);
     const scheduleRef = useRef(() => { });
-    const composingRef = useRef(false);
+    const composingRef = useRef(null);
     useBrowserLayoutEffect(() => {
         const control = controlRef.current;
         const canvas = canvasRef.current;
         if (!control || !canvas)
             return undefined;
         const root = control.closest('.inkra-field-control-hit');
-        let frame = 0;
-        let pending = null;
+        const buffer = document.createElement('canvas');
+        // Private, bounded, per-editor glyphs. Never enter the shared text cache.
+        let glyphs = new BoundedCache(128, 4 * 1024 * 1024);
         let disposed = false;
+        let lastAppearance = '';
+        const numericControl = control instanceof HTMLInputElement && control.type === 'number';
+        let nativeNumberEditing = false;
+        const appearanceKey = () => {
+            const style = getComputedStyle(control);
+            return JSON.stringify([
+                control.clientWidth, control.clientHeight, control.offsetLeft, control.offsetTop,
+                control.scrollLeft, control.scrollTop, control.value, control.placeholder, effectiveDpr(2),
+                composingRef.current?.start, composingRef.current?.end, composingRef.current?.value.length,
+                ...['font-family', 'font-size', 'line-height', 'text-align', 'text-indent',
+                    'letter-spacing', 'white-space', 'word-break', 'overflow-wrap', 'direction', 'tab-size',
+                    'padding-top', 'padding-left', 'padding-right', 'padding-bottom',
+                    '--inkra-letter-variation', '--inkra-letter-breaks', '--inkra-letter-outline',
+                    '--inkra-letter-fill', '--inkra-letter-grain',
+                    '--inkra-editable-text-color', '--inkra-editable-placeholder-color'].map(name => style.getPropertyValue(name)),
+            ]);
+        };
         const paint = () => {
-            pending = null;
-            if (disposed || composingRef.current)
+            if (disposed)
+                return;
+            // Number inputs expose a sanitized value, not incomplete drafts such as "-" or "1.".
+            if (numericControl && (nativeNumberEditing || control.validity.badInput || composingRef.current)) {
+                root?.removeAttribute('data-pencil-editable-ready');
+                lastAppearance = '';
+                return;
+            }
+            const key = appearanceKey();
+            if (key === lastAppearance && root?.hasAttribute('data-pencil-editable-ready'))
                 return;
             try {
-                const ready = paintEditableText(canvas, control, seed, multiline);
-                if (ready)
+                if (paintEditableText(canvas, buffer, glyphs, control, seed, multiline, composingRef.current)) {
                     root?.setAttribute('data-pencil-editable-ready', 'true');
-                else
+                    lastAppearance = key;
+                }
+                else {
                     root?.removeAttribute('data-pencil-editable-ready');
+                    lastAppearance = '';
+                }
             }
             catch {
                 root?.removeAttribute('data-pencil-editable-ready');
+                lastAppearance = '';
             }
         };
-        const schedule = () => {
-            if (disposed || composingRef.current || frame || pending)
+        scheduleRef.current = paint;
+        const beforeInput = (event) => {
+            if (!numericControl || event.defaultPrevented)
                 return;
-            frame = requestAnimationFrame(() => {
-                frame = 0;
-                pending = queueTextPaint(paint);
-            });
+            nativeNumberEditing = true;
+            root?.setAttribute('data-pencil-number-editing', 'true');
+            paint();
         };
-        scheduleRef.current = schedule;
-        const invalidate = () => {
-            root?.removeAttribute('data-pencil-editable-ready');
-            schedule();
+        const finishNumberEditing = () => {
+            if (!numericControl)
+                return;
+            nativeNumberEditing = false;
+            root?.removeAttribute('data-pencil-number-editing');
+            paint();
         };
-        const showNativeComposition = () => {
-            composingRef.current = true;
-            pending?.();
-            pending = null;
+        const startComposition = () => {
+            if (numericControl) {
+                nativeNumberEditing = true;
+                root?.setAttribute('data-pencil-number-editing', 'true');
+            }
+            composingRef.current = {
+                value: control.value,
+                start: control.selectionStart ?? control.value.length,
+                end: control.selectionEnd ?? control.value.length,
+            };
             root?.setAttribute('data-composing', 'true');
-            root?.removeAttribute('data-pencil-editable-ready');
+            paint();
         };
         const finishComposition = () => {
-            composingRef.current = false;
+            composingRef.current = null;
             root?.removeAttribute('data-composing');
-            schedule();
+            paint();
         };
-        const reset = () => window.setTimeout(invalidate, 0);
+        const refreshFonts = () => {
+            glyphs = new BoundedCache(128, 4 * 1024 * 1024);
+            lastAppearance = '';
+            paint();
+        };
+        const reset = () => queueMicrotask(() => {
+            if (disposed)
+                return;
+            composingRef.current = null;
+            root?.removeAttribute('data-composing');
+            nativeNumberEditing = false;
+            root?.removeAttribute('data-pencil-number-editing');
+            refreshFonts();
+        });
         const form = control.form;
-        const resize = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(invalidate);
+        const resize = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(paint);
         resize?.observe(control);
-        const appearance = new MutationObserver(invalidate);
-        appearance.observe(document.documentElement, {
-            attributes: true,
-            subtree: true,
-            attributeFilter: ['data-theme', 'data-inkra-theme'],
-        });
+        const appearance = new MutationObserver(paint);
+        for (let element = control; element; element = element.parentElement) {
+            appearance.observe(element, { attributes: true, attributeFilter: ['style', 'class', 'dir', 'data-theme', 'data-inkra-theme'] });
+        }
         const colorScheme = window.matchMedia('(prefers-color-scheme: dark)');
-        colorScheme.addEventListener('change', invalidate);
-        control.addEventListener('input', invalidate);
-        control.addEventListener('scroll', invalidate, { passive: true });
-        control.addEventListener('compositionstart', showNativeComposition);
+        colorScheme.addEventListener('change', paint);
+        control.addEventListener('beforeinput', beforeInput);
+        control.addEventListener('blur', finishNumberEditing);
+        control.addEventListener('input', paint);
+        control.addEventListener('scroll', paint, { passive: true });
+        control.addEventListener('compositionstart', startComposition);
         control.addEventListener('compositionend', finishComposition);
         form?.addEventListener('reset', reset);
-        document.fonts?.addEventListener('loadingdone', invalidate);
-        document.fonts?.addEventListener('loadingerror', invalidate);
+        document.fonts?.addEventListener('loadingdone', refreshFonts);
+        document.fonts?.addEventListener('loadingerror', refreshFonts);
         document.fonts?.ready.then(() => { if (!disposed)
-            invalidate(); });
-        const stopRecovery = observeCanvasRecovery(invalidate);
-        invalidate();
+            refreshFonts(); });
+        const stopRecovery = observeCanvasRecovery(refreshFonts);
+        paint();
         return () => {
             disposed = true;
             stopRecovery();
-            pending?.();
             resize?.disconnect();
             appearance.disconnect();
-            colorScheme.removeEventListener('change', invalidate);
-            control.removeEventListener('input', invalidate);
-            control.removeEventListener('scroll', invalidate);
-            control.removeEventListener('compositionstart', showNativeComposition);
+            colorScheme.removeEventListener('change', paint);
+            control.removeEventListener('beforeinput', beforeInput);
+            control.removeEventListener('blur', finishNumberEditing);
+            control.removeEventListener('input', paint);
+            control.removeEventListener('scroll', paint);
+            control.removeEventListener('compositionstart', startComposition);
             control.removeEventListener('compositionend', finishComposition);
             form?.removeEventListener('reset', reset);
-            document.fonts?.removeEventListener('loadingdone', invalidate);
-            document.fonts?.removeEventListener('loadingerror', invalidate);
-            cancelAnimationFrame(frame);
+            document.fonts?.removeEventListener('loadingdone', refreshFonts);
+            document.fonts?.removeEventListener('loadingerror', refreshFonts);
             root?.removeAttribute('data-pencil-editable-ready');
             root?.removeAttribute('data-composing');
-            composingRef.current = false;
+            root?.removeAttribute('data-pencil-number-editing');
+            composingRef.current = null;
+            glyphs = new BoundedCache(0, 0);
+            buffer.width = buffer.height = 0;
+            canvas.width = canvas.height = 0;
             scheduleRef.current = () => { };
         };
     }, [controlRef, multiline, seed]);
     useBrowserLayoutEffect(() => {
-        if (composingRef.current)
-            return;
-        controlRef.current?.closest('.inkra-field-control-hit')
-            ?.removeAttribute('data-pencil-editable-ready');
         scheduleRef.current();
     }, [controlRef, defaultValue, placeholder, value]);
     return _jsx("canvas", { "aria-hidden": "true", className: "inkra-editable-text", "data-renderer": "inkra-editable-lettering", ref: canvasRef });

package/dist/form/Input.js

@@ -7,7 +7,7 @@ import { PencilText } from '../PencilText.js';
 import { InputAction } from './InputAction.js';
 import { useResolvedControlProps } from './controlProps.js';
 import { EditablePencilText } from './EditablePencilText.js';
-const editablePencilInputTypes = new Set(['text', 'search', 'email', 'url', 'tel']);
+const editablePencilInputTypes = new Set(['text', 'search', 'email', 'url', 'tel', 'number']);
 const clearableInputTypes = new Set(['text', 'search', 'email', 'url', 'tel', 'password', 'number']);
 // Lucide X / LoaderCircle ISC geometry, rendered by the shared pencil engine.
 const clearPaths = [{ d: 'M18 6 6 18' }, { d: 'm6 6 12 12' }];

package/dist/form/Textarea.d.ts

@@ -1,5 +1,17 @@
 import type { TextareaHTMLAttributes } from 'react';
 import type { FieldControlStateProps } from './types.js';
+export interface TextareaCountDetails {
+    count: number;
+    maxLength: number;
+    remaining: number;
+}
 export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement>, FieldControlStateProps {
+    countMode?: 'remaining' | 'fraction' | 'progress' | 'none';
+    countDisplay?: 'auto' | 'always';
+    /** Ratio of maxLength at which the automatic counter appears. */
+    countThreshold?: number;
+    getCountLabel?: (details: TextareaCountDetails) => string;
+    resize?: 'none' | 'vertical';
+    resizeLabel?: string;
 }
 export declare const Textarea: import("react").ForwardRefExoticComponent<TextareaProps & import("react").RefAttributes<HTMLTextAreaElement>>;

package/dist/form/Textarea.js

@@ -1,14 +1,64 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useId, useImperativeHandle, useRef } from 'react';
+import { forwardRef, useEffect, useId, useImperativeHandle, useRef, useState } from 'react';
 import { PencilSurface } from '../PencilSurface.js';
+import { PencilText } from '../PencilText.js';
+import { PencilIcon } from '../PencilIcon.js';
+import { Button } from '../Button.js';
+import { Progress } from '../display/index.js';
 import { useResolvedControlProps } from './controlProps.js';
 import { EditablePencilText } from './EditablePencilText.js';
-export const Textarea = forwardRef(function Textarea({ 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage, 'aria-invalid': ariaInvalid, className, disabled, id, invalid = false, readOnly, required, seed, size = 'md', ...props }, ref) {
+const resizePaths = [{ d: 'M12 3v18M8 7l4-4 4 4M8 17l4 4 4-4' }];
+const defaultCountLabel = ({ remaining }) => remaining < 0 ? `${-remaining} over limit` : `${remaining} remaining`;
+export const Textarea = forwardRef(function Textarea({ 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage, 'aria-invalid': ariaInvalid, className, disabled, id, invalid = false, readOnly, required, seed, size = 'md', countMode = 'remaining', countDisplay = 'auto', countThreshold = 0.8, getCountLabel = defaultCountLabel, resize = 'none', resizeLabel = 'Resize text area', ...props }, ref) {
     const generatedId = useId();
     const textareaRef = useRef(null);
+    const [uncontrolledCount, setUncontrolledCount] = useState(() => String(props.defaultValue ?? '').length);
+    const [height, setHeight] = useState();
+    const [measuredHeight, setMeasuredHeight] = useState();
+    const drag = useRef(null);
+    const controlled = props.value != null;
+    const count = controlled ? String(props.value).length : uncontrolledCount;
+    const maximum = props.maxLength;
+    const hasCount = countMode !== 'none' && typeof maximum === 'number' && Number.isFinite(maximum) && maximum >= 0;
+    const threshold = Number.isFinite(countThreshold) ? Math.max(0, Math.min(1, countThreshold)) : 0.8;
+    const showCount = hasCount && (countDisplay === 'always' || count >= maximum * threshold);
+    const countId = `inkra-textarea-${generatedId}-count`;
+    const controlId = id ?? `inkra-textarea-${generatedId}`;
+    const remaining = hasCount ? maximum - count : 0;
+    const countLabel = hasCount ? getCountLabel({ count, maxLength: maximum, remaining }) : '';
+    const minimumHeight = size === 'sm' ? 80 : size === 'lg' ? 112 : 96;
+    const resizeTo = (next) => setHeight(Math.max(minimumHeight, Math.min(1200, next)));
+    useEffect(() => {
+        const control = textareaRef.current;
+        if (resize !== 'vertical' || !control)
+            return;
+        const measure = () => setMeasuredHeight(control.getBoundingClientRect().height);
+        measure();
+        if (typeof ResizeObserver === 'undefined')
+            return;
+        const observer = new ResizeObserver(measure);
+        observer.observe(control);
+        return () => observer.disconnect();
+    }, [resize]);
+    useEffect(() => {
+        const control = textareaRef.current;
+        const form = control?.form;
+        let frame = 0;
+        const reset = () => {
+            cancelAnimationFrame(frame);
+            frame = requestAnimationFrame(() => setUncontrolledCount(control?.value.length ?? 0));
+        };
+        form?.addEventListener('reset', reset);
+        if (!controlled)
+            setUncontrolledCount(control?.value.length ?? 0);
+        return () => {
+            cancelAnimationFrame(frame);
+            form?.removeEventListener('reset', reset);
+        };
+    }, [controlled, props.defaultValue, props.form]);
     useImperativeHandle(ref, () => textareaRef.current);
     const state = useResolvedControlProps({
-        id,
+        id: controlId,
         required,
         disabled,
         readOnly,
@@ -19,5 +69,34 @@ export const Textarea = forwardRef(function Textarea({ 'aria-describedby': ariaD
     });
     const resolvedSeed = seed ?? `inkra-textarea-${state.id ?? generatedId}`;
     const classes = ['inkra-textarea', className].filter(Boolean).join(' ');
-    return (_jsx("span", { className: "inkra-field-control-hit inkra-field-control-hit--textarea", "data-disabled": state.disabled || undefined, "data-invalid": state.invalid || undefined, "data-readonly": state.readOnly || undefined, "data-size": size, children: _jsxs(PencilSurface, { as: "span", className: "inkra-field-control inkra-field-control--textarea", seed: resolvedSeed, variant: state.invalid ? 'danger' : 'outline', children: [_jsx("textarea", { ...props, "aria-describedby": state.describedBy, "aria-errormessage": state.errorMessage, "aria-invalid": state.ariaInvalid, className: classes, disabled: state.disabled, id: state.id, readOnly: state.readOnly, ref: textareaRef, required: state.required }), _jsx(EditablePencilText, { controlRef: textareaRef, defaultValue: props.defaultValue, multiline: true, placeholder: props.placeholder, seed: `${resolvedSeed}-editable`, value: props.value })] }) }));
+    return (_jsx("div", { className: "inkra-field-control-hit inkra-field-control-hit--textarea", "data-disabled": state.disabled || undefined, "data-invalid": state.invalid || undefined, "data-readonly": state.readOnly || undefined, "data-size": size, children: _jsxs(PencilSurface, { className: "inkra-field-control inkra-field-control--textarea", seed: resolvedSeed, variant: state.invalid ? 'danger' : 'outline', children: [_jsx("textarea", { ...props, "aria-describedby": [state.describedBy, showCount && countId].filter(Boolean).join(' ') || undefined, "aria-errormessage": state.errorMessage, "aria-invalid": state.ariaInvalid, className: classes, disabled: state.disabled, id: state.id, readOnly: state.readOnly, ref: textareaRef, required: state.required, style: { ...props.style, ...(resize === 'vertical' && height !== undefined ? { height } : {}), resize: 'none' }, onInput: event => {
+                        if (!controlled)
+                            setUncontrolledCount(event.currentTarget.value.length);
+                        props.onInput?.(event);
+                    } }), _jsx(EditablePencilText, { controlRef: textareaRef, defaultValue: props.defaultValue, multiline: true, placeholder: props.placeholder, seed: `${resolvedSeed}-editable`, value: props.value }), (hasCount || resize === 'vertical') && _jsxs("div", { className: "inkra-textarea__footer", children: [hasCount && _jsxs("div", { className: "inkra-textarea__count", id: countId, "data-visible": showCount, "data-limit": remaining <= 0 ? 'reached' : 'near', "aria-hidden": !showCount || undefined, children: [countMode === 'progress' && _jsx(Progress, { size: "sm", value: maximum === 0 ? 1 : count, max: maximum === 0 ? 1 : maximum, "aria-label": countLabel, "aria-valuetext": countLabel }), _jsx(PencilText, { children: countMode === 'fraction' ? `${count} / ${maximum}` : countLabel })] }), resize === 'vertical' && _jsx(Button, { className: "inkra-textarea__resize", variant: "ghost", size: "icon", role: "slider", "aria-label": resizeLabel, title: resizeLabel, "aria-controls": state.id, "aria-orientation": "vertical", "aria-valuemin": minimumHeight, "aria-valuemax": 1200, "aria-valuenow": Math.round(measuredHeight ?? minimumHeight), disabled: state.disabled, onPointerDown: event => {
+                                if (event.button !== 0)
+                                    return;
+                                drag.current = { y: event.clientY, height: textareaRef.current?.getBoundingClientRect().height ?? minimumHeight };
+                                event.currentTarget.setPointerCapture(event.pointerId);
+                            }, onPointerMove: event => {
+                                if (drag.current)
+                                    resizeTo(drag.current.height + event.clientY - drag.current.y);
+                            }, onPointerUp: event => {
+                                drag.current = null;
+                                if (event.currentTarget.hasPointerCapture(event.pointerId))
+                                    event.currentTarget.releasePointerCapture(event.pointerId);
+                            }, onPointerCancel: () => { drag.current = null; }, onLostPointerCapture: () => { drag.current = null; }, onKeyDown: event => {
+                                const current = textareaRef.current?.getBoundingClientRect().height ?? minimumHeight;
+                                if (event.key === 'ArrowUp')
+                                    resizeTo(current - 20);
+                                else if (event.key === 'ArrowDown')
+                                    resizeTo(current + 20);
+                                else if (event.key === 'Home')
+                                    resizeTo(minimumHeight);
+                                else if (event.key === 'End')
+                                    resizeTo(1200);
+                                else
+                                    return;
+                                event.preventDefault();
+                            }, children: _jsx(PencilIcon, { paths: resizePaths, size: 22 }) })] })] }) }));
 });

package/dist/form/index.d.ts

@@ -3,5 +3,5 @@ export type { FieldProps } from './Field.js';
 export { Input } from './Input.js';
 export type { InputProps, InputVariant, InputTextAlign, InputValueChangeDetails, InputClassNames } from './Input.js';
 export { Textarea } from './Textarea.js';
-export type { TextareaProps } from './Textarea.js';
+export type { TextareaProps, TextareaCountDetails } from './Textarea.js';
 export type { FieldControlSize, FieldControlStateProps } from './types.js';

package/dist/heatmap/index.d.ts

@@ -0,0 +1,59 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+export type HeatmapKey = string | number;
+export type HeatmapScaleType = 'continuous' | 'quantize';
+export interface HeatmapAxisItem {
+    id: HeatmapKey;
+    label: ReactNode;
+    ariaLabel?: string;
+}
+export interface HeatmapCell {
+    rowId: HeatmapKey;
+    columnId: HeatmapKey;
+    value?: number | null;
+    disabled?: boolean;
+    data?: unknown;
+}
+export interface HeatmapSelection {
+    rowId: HeatmapKey;
+    columnId: HeatmapKey;
+}
+export interface HeatmapCellContext {
+    row: HeatmapAxisItem;
+    column: HeatmapAxisItem;
+    color: string | null;
+    missing: boolean;
+    selected: boolean;
+    active: boolean;
+}
+export interface HeatmapDetailsContext extends HeatmapCellContext {
+    valueLabel: string;
+}
+export interface HeatmapProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'onChange'> {
+    rows: readonly HeatmapAxisItem[];
+    columns: readonly HeatmapAxisItem[];
+    cells: readonly HeatmapCell[];
+    label: ReactNode;
+    description?: ReactNode;
+    scaleType?: HeatmapScaleType;
+    domain?: readonly [number, number];
+    colorRange?: readonly string[];
+    binCount?: number;
+    showLegend?: boolean;
+    showValues?: boolean;
+    legendLabel?: ReactNode;
+    missingLabel?: ReactNode;
+    missingValueLabel?: string;
+    selectionMode?: 'single' | 'none';
+    selectedCell?: HeatmapSelection | null;
+    defaultSelectedCell?: HeatmapSelection | null;
+    onSelectedCellChange?: (selection: HeatmapSelection | null, cell: HeatmapCell | null) => void;
+    getValueLabel?: (value: number) => string;
+    getCellAriaLabel?: (cell: HeatmapCell, context: HeatmapDetailsContext) => string;
+    renderCell?: (cell: HeatmapCell, context: HeatmapCellContext) => ReactNode;
+    renderDetails?: (cell: HeatmapCell, context: HeatmapDetailsContext) => ReactNode;
+    cellSize?: number | string;
+    rowLabelWidth?: number | string;
+    rowHeaderLabel?: string;
+    emptyMessage?: ReactNode;
+}
+export declare const Heatmap: import("react").ForwardRefExoticComponent<HeatmapProps & import("react").RefAttributes<HTMLDivElement>>;