@inkra/react 0.1.0 → 0.2.0

package/dist/internal/textRenderer.js

@@ -1,15 +1,16 @@
-import { BoundedCache, PENCIL_RENDERER_VERSION, canvasByteCost } from './cache.js';
+import { BoundedCache, PENCIL_RENDERER_VERSION, canvasByteCost, canvasIsUsable } from './cache.js';
 import { seededRandom } from './random.js';
 export const pencilLettering = Object.freeze({
-    variation: 0.52,
-    breaks: 0.18,
-    outline: 0.96,
-    fill: 0.34,
-    grain: 0.45,
+    variation: 0.2,
+    breaks: 0.5,
+    outline: 0.9,
+    fill: 0.9,
+    grain: 0.6,
 });
 export const pencilHandwriting = '"Trip Map Hand","HanziPen SC","Hannotate SC","Kaiti SC","STKaiti",cursive';
 const TEXT_PIXEL_LIMIT = 524288;
 const textCache = new BoundedCache(160, 16 * 1024 * 1024);
+const glyphCache = new BoundedCache(512, 8 * 1024 * 1024);
 const clamp = (value) => Math.max(0, Math.min(1, value));
 function hash(x, y, seed) {
     let value = Math.imul(x ^ seed, 374761393) ^ Math.imul(y, 668265263);
@@ -88,10 +89,11 @@ export function renderPencilText(text, options) {
         resolution,
         settings,
         fontReady,
+        options.glyphSeed,
     ]) : '';
     if (cache) {
         const cached = textCache.get(key);
-        if (cached)
+        if (cached && canvasIsUsable(cached.ink))
             return cached;
     }
     const mask = document.createElement('canvas');
@@ -120,6 +122,30 @@ export function renderPencilText(text, options) {
     if (!context)
         throw new Error('Canvas 2D is unavailable');
     context.scale(resolution, resolution);
+    // Plain Latin labels can reuse bounded character sprites. Complex scripts and
+    // private editable text retain the original whole-line rendering path.
+    if (cache && options.glyphSeed !== undefined && /^[\x20-\x7e]+$/.test(text)) {
+        let left = 0;
+        characters.forEach((character, index) => {
+            if (character !== ' ') {
+                const characterSeed = (options.glyphSeed ^ Math.imul(character.charCodeAt(0), 16777619)
+                    ^ Math.imul(index % 3, 374761393)) >>> 0;
+                const glyphKey = JSON.stringify([
+                    PENCIL_RENDERER_VERSION, character, size, family, color, characterSeed,
+                    resolution, settings, document.fonts?.check(font, character),
+                ]);
+                let glyph = glyphCache.get(glyphKey);
+                if (!glyph || !canvasIsUsable(glyph.ink)) {
+                    glyph = renderPencilText(character, { ...options, seed: characterSeed, glyphSeed: undefined, cache: false });
+                    glyphCache.set(glyphKey, glyph, canvasByteCost(glyph.ink));
+                }
+                context.drawImage(glyph.ink, left, 0, glyph.width, glyph.height);
+            }
+            left += widths[index];
+        });
+        const sprite = { ink: mask, width, height, advance, ascent, descent, padding };
+        return textCache.set(key, sprite, canvasByteCost(mask));
+    }
     context.font = font;
     context.fontKerning = 'none';
     context.fillStyle = color;

package/dist/internal/usePencilSurface.js

@@ -3,6 +3,7 @@ import { PENCIL_RENDERER_VERSION, effectiveDpr } from './cache.js';
 import { observeCanvasRecovery } from './recovery.js';
 import { seedToNumber } from './random.js';
 import { drawPencilSurface } from './surfaceRenderer.js';
+import { maxStrokeRoughness, pencilRenderDefaults, readRenderToken } from './renderTokens.js';
 function token(style, name, fallback) {
     return style.getPropertyValue(name).trim() || fallback;
 }
@@ -32,6 +33,14 @@ export function usePencilSurface(rootRef, canvasRef, borderRef, variant, seed, c
                     ? token(style, '--inkra-danger', '#873e36')
                     : token(style, '--inkra-border-strong', '#778575');
             const dark = style.colorScheme.includes('dark');
+            const strokeWidth = readRenderToken(style, '--inkra-stroke-width', pencilRenderDefaults.strokeWidth, 0.3, 3);
+            const strokeRoughness = readRenderToken(style, '--inkra-stroke-amplitude', pencilRenderDefaults.strokeRoughness, 0, maxStrokeRoughness);
+            const washSettings = {
+                strength: readRenderToken(style, '--inkra-wash-strength', pencilRenderDefaults.washStrength, 0, 1) / 0.48,
+                spacing: readRenderToken(style, '--inkra-wash-spacing', pencilRenderDefaults.washSpacing, 1, 6),
+                roughness: readRenderToken(style, '--inkra-wash-roughness', pencilRenderDefaults.washRoughness, 0, 6),
+                angle: readRenderToken(style, '--inkra-wash-angle', pencilRenderDefaults.washAngle, -85, 85),
+            };
             const wash = variant === 'selection'
                 ? token(style, '--inkra-selection-pigment', dark ? '#c6b873' : '#769566')
                 : variant === 'danger'
@@ -55,11 +64,12 @@ export function usePencilSurface(rootRef, canvasRef, borderRef, variant, seed, c
                 dark,
                 clipContent,
                 radius,
+                strokeWidth, strokeRoughness, washSettings,
             ]);
             if (paintKey === lastPaint && !canvas.getContext('2d')?.isContextLost?.())
                 return;
             try {
-                const points = drawPencilSurface(canvas, borderRef.current, width, height, variant, numericSeed, dpr, { paper, dark, ink, wash }, radius);
+                const points = drawPencilSurface(canvas, borderRef.current, width, height, variant, numericSeed, dpr, { paper, dark, ink, wash, strokeWidth, strokeRoughness, washSettings }, radius);
                 if (clipContent && points) {
                     root.style.setProperty('--inkra-pencil-clip', `polygon(${points.map(([x, y]) => `${x / width * 100}% ${y / height * 100}%`).join(',')})`);
                 }
@@ -82,13 +92,11 @@ export function usePencilSurface(rootRef, canvasRef, borderRef, variant, seed, c
         const resize = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(schedule);
         resize?.observe(root);
         window.addEventListener('resize', schedule, { passive: true });
-        const appearance = new MutationObserver(schedule);
-        appearance.observe(document.documentElement, {
-            attributes: true,
-            subtree: true,
-            attributeFilter: ['data-theme', 'data-inkra-theme'],
-        });
         const colorScheme = window.matchMedia('(prefers-color-scheme: dark)');
+        const inheritedStyle = new MutationObserver(schedule);
+        for (let element = root; element; element = element.parentElement) {
+            inheritedStyle.observe(element, { attributes: true, attributeFilter: ['style', 'class', 'data-theme', 'data-inkra-theme'] });
+        }
         colorScheme.addEventListener('change', schedule);
         const stopRecovery = observeCanvasRecovery(() => {
             lastPaint = '';
@@ -99,7 +107,7 @@ export function usePencilSurface(rootRef, canvasRef, borderRef, variant, seed, c
             disposed = true;
             stopRecovery();
             resize?.disconnect();
-            appearance.disconnect();
+            inheritedStyle.disconnect();
             colorScheme.removeEventListener('change', schedule);
             window.removeEventListener('resize', schedule);
             cancelAnimationFrame(frame);

package/dist/internal/useSelectionDrawing.js

@@ -1,9 +1,10 @@
 import { useRef } from 'react';
 import { useBrowserLayoutEffect } from './useBrowserLayoutEffect.js';
 import { PENCIL_SELECTION_WASH } from './surfaceRenderer.js';
+import { readRenderToken } from './renderTokens.js';
 // Reveal the cached pigment in alternating diagonal strokes, without repainting it.
-function drawingFrames(width, height) {
-    const angle = PENCIL_SELECTION_WASH.angle * Math.PI / 180;
+function drawingFrames(width, height, degrees) {
+    const angle = degrees * Math.PI / 180;
     const cos = Math.cos(angle);
     const sin = Math.sin(angle);
     const u = (Math.abs(cos) * width + Math.abs(sin) * height) / 2 + 2;
@@ -16,14 +17,16 @@ function drawingFrames(width, height) {
         const bottom = -v + (index + 1) * 2 * v / strokes;
         // Limit travel to the visible section of this stripe, not its rotated bounds.
         const middle = (top + bottom) / 2;
-        const ends = [
-            (-width / 2 + sin * middle) / cos,
-            (width / 2 + sin * middle) / cos,
-            (-height / 2 - cos * middle) / sin,
-            (height / 2 - cos * middle) / sin,
-        ];
-        const left = Math.max(Math.min(ends[0], ends[1]), Math.min(ends[2], ends[3]));
-        const right = Math.min(Math.max(ends[0], ends[1]), Math.max(ends[2], ends[3]));
+        let left = -u;
+        let right = u;
+        for (const [direction, offset, halfExtent] of [[cos, -sin * middle, width / 2], [sin, cos * middle, height / 2]]) {
+            if (Math.abs(direction) < 1e-8)
+                continue;
+            const a = (-halfExtent - offset) / direction;
+            const b = (halfExtent - offset) / direction;
+            left = Math.max(left, Math.min(a, b));
+            right = Math.min(right, Math.max(a, b));
+        }
         for (const progress of [0, 0.5, 1]) {
             const x = progress === 0 ? (index % 2 ? u : -u) : progress === 1 ? (index % 2 ? -u : u) : (left + right) / 2;
             const outline = index % 2
@@ -54,7 +57,8 @@ export function useSelectionDrawing(ref, selected, animated = true) {
             return;
         }
         const duration = selected ? 480 : 320;
-        const animation = node.animate(drawingFrames(node.clientWidth, node.clientHeight).map(frame => ({ ...frame, opacity: 1 })), { duration, direction: selected ? 'normal' : 'reverse', easing: 'linear' });
+        const angle = readRenderToken(getComputedStyle(node), '--inkra-wash-angle', PENCIL_SELECTION_WASH.angle, -85, 85);
+        const animation = node.animate(drawingFrames(node.clientWidth, node.clientHeight, angle).map(frame => ({ ...frame, opacity: 1 })), { duration, direction: selected ? 'normal' : 'reverse', easing: 'linear' });
         animation.currentTime = (selected ? progress.current : 1 - progress.current) * duration;
         let settled = false;
         const finish = () => {

package/dist/journey-map/MapScale.js

@@ -43,7 +43,9 @@ export function MapScale({ map }) {
         draw();
         map.on('moveend zoomend resize', draw);
         const observer = new MutationObserver(draw);
-        observer.observe(document.documentElement, { subtree: true, attributes: true, attributeFilter: ['data-theme', 'data-inkra-theme'] });
+        for (let element = bar.current; element; element = element.parentElement) {
+            observer.observe(element, { attributes: true, attributeFilter: ['data-theme', 'data-inkra-theme'] });
+        }
         const scheme = matchMedia('(prefers-color-scheme: dark)');
         scheme.addEventListener('change', draw);
         return () => { map.off('moveend zoomend resize', draw); observer.disconnect(); scheme.removeEventListener('change', draw); };

package/dist/journey-map/index.js

@@ -148,7 +148,9 @@ export function JourneyMap({ places, routes = noRoutes, geography, landCover, wa
                 fit(); schedule(); });
             observer.observe(host.current);
             const appearance = new MutationObserver(schedule);
-            appearance.observe(document.documentElement, { subtree: true, attributes: true, attributeFilter: ['data-theme', 'data-inkra-theme'] });
+            for (let element = host.current; element; element = element.parentElement) {
+                appearance.observe(element, { attributes: true, attributeFilter: ['data-theme', 'data-inkra-theme'] });
+            }
             const scheme = matchMedia('(prefers-color-scheme: dark)');
             scheme.addEventListener('change', schedule);
             fit();

package/dist/keypad/index.d.ts

@@ -0,0 +1,23 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import type { KeypadAction, KeypadKey } from './model.js';
+export interface KeypadPressDetails {
+    action: KeypadAction;
+    key: KeypadKey;
+    previousValue: string;
+    nextValue: string;
+}
+export interface KeypadProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'onKeyPress'> {
+    layout: readonly (readonly KeypadKey[])[];
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string, details: KeypadPressDetails) => void;
+    onKeyPress?: (details: KeypadPressDetails) => void;
+    onConfirm?: (value: string, details: KeypadPressDetails) => void;
+    disabled?: boolean;
+    maxLength?: number;
+    label?: string;
+    emptyContent?: ReactNode;
+}
+export declare const Keypad: import("react").ForwardRefExoticComponent<KeypadProps & import("react").RefAttributes<HTMLDivElement>>;
+export { applyKeypadKey, getKeypadAction, getKeypadColumnCount } from './model.js';
+export type { KeypadAction, KeypadKey, KeypadKeyVariant, KeypadValueResult } from './model.js';

package/dist/keypad/index.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useId, useRef, useState } from 'react';
+import { PencilSurface } from '../PencilSurface.js';
+import { PencilText } from '../PencilText.js';
+import { applyKeypadKey, getKeypadAction, getKeypadColumnCount } from './model.js';
+function keyLabel(key) {
+    if (key.ariaLabel)
+        return key.ariaLabel;
+    if (typeof key.label === 'string' || typeof key.label === 'number')
+        return String(key.label);
+    return undefined;
+}
+function keyVariant(key) {
+    if (key.variant)
+        return key.variant;
+    const action = getKeypadAction(key);
+    if (action === 'confirm')
+        return 'confirm';
+    if (action === 'delete')
+        return 'secondary';
+    return 'default';
+}
+export const Keypad = forwardRef(function Keypad({ 'aria-label': ariaLabel, className, defaultValue = '', disabled = false, emptyContent = null, label = 'Keypad', layout, maxLength, onConfirm, onKeyPress, onValueChange, value, ...props }, ref) {
+    const id = useId();
+    const controlled = value !== undefined;
+    const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+    const currentValue = controlled ? value : uncontrolledValue;
+    const valueRef = useRef(currentValue);
+    valueRef.current = currentValue;
+    const columns = getKeypadColumnCount(layout);
+    const classes = ['inkra-keypad', className].filter(Boolean).join(' ');
+    const style = { '--inkra-keypad-columns': columns, ...props.style };
+    const press = (key) => {
+        const previousValue = valueRef.current;
+        const result = applyKeypadKey(previousValue, key, maxLength);
+        const details = {
+            action: getKeypadAction(key),
+            key,
+            previousValue,
+            nextValue: result.nextValue,
+        };
+        if (result.changed) {
+            if (!controlled) {
+                valueRef.current = result.nextValue;
+                setUncontrolledValue(result.nextValue);
+            }
+            onValueChange?.(result.nextValue, details);
+        }
+        onKeyPress?.(details);
+        if (details.action === 'confirm')
+            onConfirm?.(previousValue, details);
+    };
+    return (_jsx("div", { ...props, "aria-disabled": disabled || undefined, "aria-label": ariaLabel ?? label, className: classes, "data-disabled": disabled || undefined, ref: ref, role: "group", style: style, children: layout.length === 0 ? emptyContent : layout.map((row, rowIndex) => (_jsx("div", { className: "inkra-keypad__row", children: row.map(key => {
+                const action = getKeypadAction(key);
+                const atLimit = action === 'input' && maxLength !== undefined && !applyKeypadKey(currentValue, key, maxLength).changed;
+                const keyDisabled = disabled || key.disabled === true || atLimit;
+                const accessibleName = keyLabel(key);
+                return (_jsxs("button", { "aria-label": accessibleName, className: "inkra-keypad__key", "data-action": action, "data-key-id": key.id, "data-variant": keyVariant(key), disabled: keyDisabled, onClick: () => press(key), style: { '--inkra-keypad-span': Math.max(1, Math.floor(key.span ?? 1)) }, type: "button", children: [_jsx(PencilSurface, { as: "span", className: "inkra-keypad__key-surface", radius: 6, seed: `inkra-keypad-${id}-${key.id}`, variant: keyVariant(key) === 'confirm' ? 'action' : keyVariant(key) === 'danger' ? 'danger' : keyVariant(key) === 'secondary' ? 'quiet' : 'outline', children: _jsx("span", { className: "inkra-keypad__key-label", children: typeof key.label === 'string' || typeof key.label === 'number'
+                                    ? _jsx(PencilText, { seed: `inkra-keypad-${id}-${key.id}-label`, children: String(key.label) })
+                                    : key.label }) }), _jsx(PencilSurface, { "aria-hidden": "true", as: "span", className: "inkra-keypad__focus", seed: `inkra-keypad-${id}-${key.id}-focus`, variant: "outline" })] }, key.id));
+            }) }, `row-${rowIndex}`))) }));
+});
+export { applyKeypadKey, getKeypadAction, getKeypadColumnCount } from './model.js';

package/dist/keypad/model.d.ts

@@ -0,0 +1,20 @@
+import type { ReactNode } from 'react';
+export type KeypadAction = 'input' | 'delete' | 'confirm' | 'custom';
+export type KeypadKeyVariant = 'default' | 'secondary' | 'confirm' | 'danger';
+export interface KeypadKey {
+    id: string;
+    label: ReactNode;
+    action?: KeypadAction;
+    value?: string;
+    ariaLabel?: string;
+    disabled?: boolean;
+    span?: number;
+    variant?: KeypadKeyVariant;
+}
+export interface KeypadValueResult {
+    nextValue: string;
+    changed: boolean;
+}
+export declare function getKeypadAction(key: KeypadKey): KeypadAction;
+export declare function applyKeypadKey(value: string, key: KeypadKey, maxLength?: number): KeypadValueResult;
+export declare function getKeypadColumnCount(layout: readonly (readonly KeypadKey[])[]): number;

package/dist/keypad/model.js

@@ -0,0 +1,33 @@
+function removeLastGrapheme(value) {
+    if (value.length === 0)
+        return value;
+    const Segmenter = Intl.Segmenter;
+    if (Segmenter) {
+        const segments = Array.from(new Segmenter(undefined, { granularity: 'grapheme' }).segment(value));
+        const last = segments[segments.length - 1];
+        return last ? value.slice(0, last.index) : '';
+    }
+    return Array.from(value).slice(0, -1).join('');
+}
+export function getKeypadAction(key) {
+    return key.action ?? 'input';
+}
+export function applyKeypadKey(value, key, maxLength) {
+    const action = getKeypadAction(key);
+    if (action === 'delete') {
+        const nextValue = removeLastGrapheme(value);
+        return { nextValue, changed: nextValue !== value };
+    }
+    if (action !== 'input')
+        return { nextValue: value, changed: false };
+    const addition = key.value ?? (typeof key.label === 'string' || typeof key.label === 'number' ? String(key.label) : '');
+    if (addition.length === 0)
+        return { nextValue: value, changed: false };
+    if (maxLength !== undefined && value.length + addition.length > maxLength) {
+        return { nextValue: value, changed: false };
+    }
+    return { nextValue: value + addition, changed: true };
+}
+export function getKeypadColumnCount(layout) {
+    return Math.max(1, ...layout.map(row => row.reduce((total, key) => total + Math.max(1, Math.floor(key.span ?? 1)), 0)));
+}

package/dist/layout/index.d.ts

@@ -0,0 +1,63 @@
+import type { CSSProperties, HTMLAttributes } from 'react';
+export type LayoutSpace = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16;
+export type LayoutElement = 'div' | 'section' | 'article' | 'nav' | 'header' | 'footer' | 'main' | 'aside' | 'ul' | 'ol' | 'li';
+export type LayoutAlign = 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+export type LayoutJustify = 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
+interface LayoutElementProps extends HTMLAttributes<HTMLElement> {
+    as?: LayoutElement;
+}
+export interface FlexProps extends LayoutElementProps {
+    direction?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
+    gap?: LayoutSpace;
+    align?: LayoutAlign;
+    justify?: LayoutJustify;
+    wrap?: boolean;
+    inline?: boolean;
+}
+export declare const Flex: import("react").ForwardRefExoticComponent<FlexProps & import("react").RefAttributes<HTMLElement>>;
+export type StackProps = FlexProps;
+export declare const Stack: import("react").ForwardRefExoticComponent<FlexProps & import("react").RefAttributes<HTMLElement>>;
+export interface GridColumns {
+    base?: number;
+    sm?: number;
+    md?: number;
+    lg?: number;
+}
+export interface GridProps extends LayoutElementProps {
+    columns?: number | GridColumns;
+    gap?: LayoutSpace;
+    rowGap?: LayoutSpace;
+    columnGap?: LayoutSpace;
+    align?: LayoutAlign;
+}
+export declare const Grid: import("react").ForwardRefExoticComponent<GridProps & import("react").RefAttributes<HTMLElement>>;
+export interface ContainerProps extends LayoutElementProps {
+    size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
+    padding?: LayoutSpace;
+    centered?: boolean;
+}
+export declare const Container: import("react").ForwardRefExoticComponent<ContainerProps & import("react").RefAttributes<HTMLElement>>;
+export interface LayoutProps extends LayoutElementProps {
+    gap?: LayoutSpace;
+    collapseAt?: 'sm' | 'md' | 'never';
+}
+export interface LayoutBodyProps extends LayoutElementProps {
+    gap?: LayoutSpace;
+}
+export interface LayoutRegionProps extends LayoutElementProps {
+    padding?: LayoutSpace;
+    divided?: boolean;
+}
+export interface LayoutSidebarProps extends LayoutRegionProps {
+    width?: CSSProperties['width'];
+}
+export type LayoutContentProps = Omit<LayoutRegionProps, 'divided'>;
+export declare const Layout: Readonly<{
+    Root: import("react").ForwardRefExoticComponent<LayoutProps & import("react").RefAttributes<HTMLElement>>;
+    Header: import("react").ForwardRefExoticComponent<LayoutRegionProps & import("react").RefAttributes<HTMLElement>>;
+    Body: import("react").ForwardRefExoticComponent<LayoutBodyProps & import("react").RefAttributes<HTMLElement>>;
+    Sidebar: import("react").ForwardRefExoticComponent<LayoutSidebarProps & import("react").RefAttributes<HTMLElement>>;
+    Content: import("react").ForwardRefExoticComponent<LayoutContentProps & import("react").RefAttributes<HTMLElement>>;
+    Footer: import("react").ForwardRefExoticComponent<LayoutRegionProps & import("react").RefAttributes<HTMLElement>>;
+}>;
+export {};

package/dist/layout/index.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { createElement, forwardRef } from 'react';
+import { PencilLine } from '../PencilLine.js';
+const Box = forwardRef(function Box({ as = 'div', ...props }, ref) {
+    return createElement(as, { ...props, ref });
+});
+const classes = (...values) => values.filter(Boolean).join(' ');
+const space = (value) => `var(--inkra-space-${value}, ${value * 4}px)`;
+const justifyValues = { start: 'flex-start', center: 'center', end: 'flex-end', between: 'space-between', around: 'space-around', evenly: 'space-evenly' };
+const alignValues = { start: 'flex-start', center: 'center', end: 'flex-end', stretch: 'stretch', baseline: 'baseline' };
+export const Flex = forwardRef(function Flex({ as: Element = 'div', direction = 'row', gap = 3, align = 'stretch', justify = 'start', wrap = false, inline = false, className, style, ...props }, ref) {
+    return _jsx(Box, { as: Element, ...props, ref: ref, className: classes('inkra-flex', className), style: { display: inline ? 'inline-flex' : 'flex', flexDirection: direction,
+            gap: space(gap), alignItems: alignValues[align], justifyContent: justifyValues[justify],
+            flexWrap: wrap ? 'wrap' : 'nowrap', ...style } });
+});
+export const Stack = forwardRef(function Stack({ direction = 'column', className, ...props }, ref) {
+    return _jsx(Flex, { ...props, ref: ref, direction: direction, className: classes('inkra-stack', className) });
+});
+const columnCount = (value, fallback) => value === undefined || !Number.isFinite(value) ? fallback : Math.min(12, Math.max(1, Math.trunc(value)));
+export const Grid = forwardRef(function Grid({ as: Element = 'div', columns = 1, gap = 3, rowGap = gap, columnGap = gap, align = 'stretch', className, style, ...props }, ref) {
+    const responsive = typeof columns === 'number' ? { base: columns } : columns;
+    const base = columnCount(responsive.base, 1);
+    const sm = columnCount(responsive.sm, base);
+    const md = columnCount(responsive.md, sm);
+    const lg = columnCount(responsive.lg, md);
+    const resolvedStyle = {
+        '--inkra-grid-base': base, '--inkra-grid-sm': sm, '--inkra-grid-md': md, '--inkra-grid-lg': lg,
+        rowGap: space(rowGap), columnGap: space(columnGap), alignItems: alignValues[align], ...style,
+    };
+    return _jsx(Box, { as: Element, ...props, ref: ref, className: classes('inkra-grid', className), style: resolvedStyle });
+});
+const containerWidths = { sm: '640px', md: '768px', lg: '1024px', xl: '1280px', full: 'none' };
+export const Container = forwardRef(function Container({ as: Element = 'div', size = 'lg', padding = 5, centered = true, className, style, ...props }, ref) {
+    return _jsx(Box, { as: Element, ...props, ref: ref, className: classes('inkra-container', className), style: { maxWidth: containerWidths[size], paddingInline: space(padding),
+            marginInline: centered ? 'auto' : 0, ...style } });
+});
+const LayoutRoot = forwardRef(function LayoutRoot({ as: Element = 'div', gap = 0, collapseAt = 'sm', className, style, ...props }, ref) {
+    return _jsx(Box, { as: Element, ...props, ref: ref, className: classes('inkra-layout', className), "data-collapse-at": collapseAt, style: { gap: space(gap), ...style } });
+});
+const LayoutBody = forwardRef(function LayoutBody({ as: Element = 'div', gap = 0, className, style, ...props }, ref) {
+    return _jsx(Box, { as: Element, ...props, ref: ref, className: classes('inkra-layout__body', className), style: { gap: space(gap), ...style } });
+});
+const LayoutHeader = forwardRef(function LayoutHeader({ as: Element = 'header', padding = 5, divided = false, className, style, children, ...props }, ref) {
+    return _jsxs(Box, { as: Element, ...props, ref: ref, className: classes('inkra-layout__header', className), style: { padding: space(padding), ...style }, children: [children, divided && _jsx(PencilLine, { className: "inkra-layout__divider" })] });
+});
+const LayoutFooter = forwardRef(function LayoutFooter({ as: Element = 'footer', padding = 5, divided = false, className, style, children, ...props }, ref) {
+    return _jsxs(Box, { as: Element, ...props, ref: ref, className: classes('inkra-layout__footer', className), style: { padding: space(padding), ...style }, children: [divided && _jsx(PencilLine, { className: "inkra-layout__divider" }), children] });
+});
+const LayoutSidebar = forwardRef(function LayoutSidebar({ as: Element = 'aside', width = 240, padding = 5, divided = false, className, style, children, ...props }, ref) {
+    const resolvedStyle = {
+        '--inkra-layout-sidebar-width': typeof width === 'number' ? `${width}px` : width,
+        padding: space(padding), ...style,
+    };
+    return _jsxs(Box, { as: Element, ...props, ref: ref, className: classes('inkra-layout__sidebar', className), style: resolvedStyle, children: [children, divided && _jsxs(_Fragment, { children: [_jsx(PencilLine, { className: "inkra-layout__sidebar-divider", orientation: "vertical" }), _jsx(PencilLine, { className: "inkra-layout__sidebar-divider-mobile" })] })] });
+});
+const LayoutContent = forwardRef(function LayoutContent({ as: Element = 'div', padding = 5, className, style, ...props }, ref) {
+    return _jsx(Box, { as: Element, ...props, ref: ref, className: classes('inkra-layout__content', className), style: { padding: space(padding), ...style } });
+});
+export const Layout = Object.freeze({
+    Root: LayoutRoot, Header: LayoutHeader, Body: LayoutBody,
+    Sidebar: LayoutSidebar, Content: LayoutContent, Footer: LayoutFooter,
+});

package/dist/log/index.d.ts

@@ -0,0 +1,45 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+export type LogLevelTone = 'neutral' | 'info' | 'success' | 'warning' | 'danger';
+export interface LogLevelDefinition {
+    value: string;
+    label: ReactNode;
+    tone?: LogLevelTone;
+}
+export interface LogEntry {
+    /** Stable and unique within this Log. Changing an id replaces that record. */
+    id: string;
+    /** Entries render in the exact order supplied by the items array. */
+    level?: string;
+    time?: ReactNode;
+    dateTime?: string;
+    icon?: ReactNode;
+    content: ReactNode;
+}
+export interface LogLabels {
+    filters: string;
+    allLevels: string;
+    pause: string;
+    resume: string;
+    latest: string;
+    empty: string;
+    noMatches: string;
+    list: string;
+}
+export interface LogProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    items: readonly LogEntry[];
+    levels?: readonly LogLevelDefinition[];
+    filteredLevels?: readonly string[];
+    defaultFilteredLevels?: readonly string[];
+    onFilteredLevelsChange?: (levels: readonly string[]) => void;
+    paused?: boolean;
+    defaultPaused?: boolean;
+    onPausedChange?: (paused: boolean) => void;
+    showLevelFilter?: boolean;
+    showFollowControl?: boolean;
+    nearBottomThreshold?: number;
+    empty?: ReactNode;
+    noMatches?: ReactNode;
+    labels?: Partial<LogLabels>;
+    viewportProps?: Omit<HTMLAttributes<HTMLDivElement>, 'children'>;
+}
+export declare const Log: import("react").ForwardRefExoticComponent<LogProps & import("react").RefAttributes<HTMLDivElement>>;