@inkra/react 0.1.0 → 0.3.0

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>>;

package/dist/log/index.js

@@ -0,0 +1,159 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useMemo, useRef, useState, } from 'react';
+import { Button } from '../Button.js';
+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';
+import { isNearLogBottom, shouldFollowLogUpdate } from './model.js';
+const defaultLabels = {
+    filters: 'Filter log levels',
+    allLevels: 'All',
+    pause: 'Pause automatic follow',
+    resume: 'Resume automatic follow',
+    latest: 'Go to latest record',
+    empty: 'No records yet',
+    noMatches: 'No records match the selected levels',
+    list: 'Log records',
+};
+const defaultTones = {
+    debug: 'neutral',
+    info: 'info',
+    success: 'success',
+    warning: 'warning',
+    error: 'danger',
+};
+const pausePaths = [
+    { d: 'M8 5v14' },
+    { d: 'M16 5v14' },
+];
+const followPaths = [
+    { d: 'M12 5v14' },
+    { d: 'm6 13 6 6 6-6' },
+];
+function classes(...values) {
+    return values.filter(Boolean).join(' ');
+}
+function renderText(value, className) {
+    return typeof value === 'string' ? _jsx(PencilText, { className: className, children: value }) : value;
+}
+function normalizedThreshold(value) {
+    return Number.isFinite(value) ? Math.max(0, value) : 32;
+}
+export const Log = forwardRef(function Log({ 'aria-label': ariaLabel, className, defaultFilteredLevels, defaultPaused = false, empty, filteredLevels, items, labels: labelOverrides, levels, nearBottomThreshold, noMatches, onFilteredLevelsChange, onPausedChange, paused, showFollowControl = true, showLevelFilter = true, viewportProps, ...props }, ref) {
+    const labels = { ...defaultLabels, ...labelOverrides };
+    const resolvedLevels = useMemo(() => {
+        if (levels)
+            return levels;
+        const seen = new Set();
+        return items.flatMap((item) => {
+            if (!item.level || seen.has(item.level))
+                return [];
+            seen.add(item.level);
+            return [{ value: item.level, label: item.level, tone: defaultTones[item.level] ?? 'neutral' }];
+        });
+    }, [items, levels]);
+    const availableLevels = useMemo(() => new Set(resolvedLevels.map(level => level.value)), [resolvedLevels]);
+    const [uncontrolledLevels, setUncontrolledLevels] = useState(defaultFilteredLevels);
+    const selectedLevels = (filteredLevels ?? uncontrolledLevels)?.filter(level => availableLevels.has(level));
+    const allLevelsSelected = selectedLevels == null
+        || (selectedLevels.length === resolvedLevels.length && resolvedLevels.every(level => selectedLevels.includes(level.value)));
+    const [uncontrolledPaused, setUncontrolledPaused] = useState(defaultPaused);
+    const resolvedPaused = paused ?? uncontrolledPaused;
+    const [nearBottom, setNearBottom] = useState(true);
+    const viewportRef = useRef(null);
+    const previousItemIdsRef = useRef(null);
+    const previousVisibleIdsRef = useRef(null);
+    const previousPausedRef = useRef(resolvedPaused);
+    const nearBottomRef = useRef(true);
+    const threshold = normalizedThreshold(nearBottomThreshold);
+    const visibleItems = selectedLevels == null
+        ? items
+        : items.filter(item => item.level != null && selectedLevels.includes(item.level));
+    const itemIds = items.map(item => item.id);
+    const visibleIds = visibleItems.map(item => item.id);
+    const scrollToLatest = useCallback((behavior = 'smooth') => {
+        const viewport = viewportRef.current;
+        if (!viewport)
+            return;
+        viewport.scrollTo({ top: viewport.scrollHeight, behavior });
+        nearBottomRef.current = true;
+        setNearBottom(true);
+    }, []);
+    useBrowserLayoutEffect(() => {
+        const previousItemIds = previousItemIdsRef.current;
+        const previousVisibleIds = previousVisibleIdsRef.current;
+        const initial = previousItemIds == null;
+        const resumed = previousPausedRef.current && !resolvedPaused;
+        if (resumed || shouldFollowLogUpdate({
+            initial,
+            nearBottom: nearBottomRef.current,
+            paused: resolvedPaused,
+            previousItemIds: previousItemIds ?? [],
+            nextItemIds: itemIds,
+            previousVisibleIds: previousVisibleIds ?? [],
+            nextVisibleIds: visibleIds,
+        }))
+            scrollToLatest('auto');
+        previousItemIdsRef.current = itemIds;
+        previousVisibleIdsRef.current = visibleIds;
+        previousPausedRef.current = resolvedPaused;
+    }, [itemIds.join('\u0000'), resolvedPaused, scrollToLatest, visibleIds.join('\u0000')]);
+    function changePaused(nextPaused) {
+        if (paused === undefined)
+            setUncontrolledPaused(nextPaused);
+        onPausedChange?.(nextPaused);
+    }
+    function changeLevels(nextLevels) {
+        if (filteredLevels === undefined)
+            setUncontrolledLevels(nextLevels);
+        onFilteredLevelsChange?.(nextLevels ?? resolvedLevels.map(level => level.value));
+    }
+    function handleScroll(event) {
+        viewportProps?.onScroll?.(event);
+        const viewport = event.currentTarget;
+        const nextNearBottom = isNearLogBottom(viewport, threshold);
+        nearBottomRef.current = nextNearBottom;
+        setNearBottom(current => current === nextNearBottom ? current : nextNearBottom);
+    }
+    function handleViewportKeyDown(event) {
+        viewportProps?.onKeyDown?.(event);
+        if (event.defaultPrevented || event.target !== event.currentTarget)
+            return;
+        if (event.key === 'Home') {
+            event.preventDefault();
+            event.currentTarget.scrollTo({ top: 0 });
+        }
+        else if (event.key === 'End') {
+            event.preventDefault();
+            scrollToLatest();
+        }
+    }
+    const hasFilter = !allLevelsSelected;
+    const isEmpty = items.length === 0;
+    const viewportLabel = viewportProps?.['aria-label'] ?? ariaLabel ?? labels.list;
+    const viewportClassName = classes('inkra-log__viewport', viewportProps?.className);
+    const viewportTabIndex = viewportProps?.tabIndex ?? 0;
+    const levelMap = new Map(resolvedLevels.map(level => [level.value, level]));
+    return (_jsxs(PencilSurface, { ...props, as: "div", className: classes('inkra-log', className), "data-paused": resolvedPaused || undefined, "data-toolbar": ((showLevelFilter && resolvedLevels.length > 0) || showFollowControl) || undefined, ref: ref, variant: "paper", children: [(showLevelFilter && resolvedLevels.length > 0) || showFollowControl ? _jsxs("div", { className: "inkra-log__toolbar", children: [showLevelFilter && resolvedLevels.length > 0 ? _jsxs("div", { "aria-label": labels.filters, className: "inkra-log__filters", role: "group", children: [_jsx(Button, { "aria-pressed": !hasFilter, size: "sm", variant: !hasFilter ? 'secondary' : 'ghost', onClick: () => changeLevels(undefined), children: labels.allLevels }), resolvedLevels.map(level => {
+                                const selected = allLevelsSelected || selectedLevels?.includes(level.value) === true;
+                                return _jsx(Button, { "aria-pressed": selected, "data-level": level.value, "data-tone": level.tone ?? defaultTones[level.value] ?? 'neutral', size: "sm", variant: selected ? 'secondary' : 'ghost', onClick: () => {
+                                        const active = selectedLevels ?? resolvedLevels.map(option => option.value);
+                                        changeLevels(selected
+                                            ? active.filter(value => value !== level.value)
+                                            : [...active, level.value]);
+                                    }, children: level.label }, level.value);
+                            })] }) : null, showFollowControl ? _jsx(Button, { "aria-pressed": resolvedPaused, className: "inkra-log__follow-control", size: "sm", startIcon: _jsx(PencilIcon, { paths: resolvedPaused ? followPaths : pausePaths, size: 18, sourceSize: 24 }), variant: "outline", onClick: () => changePaused(!resolvedPaused), children: resolvedPaused ? labels.resume : labels.pause }) : null, _jsx(PencilLine, { className: "inkra-log__toolbar-divider", seed: "inkra-log-toolbar-divider" })] }) : null, _jsx("div", { ...viewportProps, "aria-label": viewportLabel, className: viewportClassName, onKeyDown: handleViewportKeyDown, onScroll: handleScroll, ref: viewportRef, role: "region", tabIndex: viewportTabIndex, children: visibleItems.length > 0 ? _jsx("ol", { className: "inkra-log__list", children: visibleItems.map((item, index) => {
+                        const definition = item.level ? levelMap.get(item.level) : undefined;
+                        const tone = definition?.tone ?? (item.level ? defaultTones[item.level] : undefined) ?? 'neutral';
+                        return _jsxs("li", { className: "inkra-log__item", "data-has-icon": item.icon != null || undefined, "data-level": item.level, "data-tone": tone, children: [index > 0 ? _jsx(PencilLine, { className: "inkra-log__item-divider", seed: `inkra-log-item-${item.id}-divider` }) : null, item.icon == null ? null : _jsx("span", { "aria-hidden": "true", className: "inkra-log__icon", children: item.icon }), _jsxs("div", { className: "inkra-log__record", children: [item.time == null && item.level == null ? null : _jsxs("div", { className: "inkra-log__meta", children: [item.time == null ? null : item.dateTime
+                                                    ? _jsx("time", { dateTime: item.dateTime, children: renderText(item.time) })
+                                                    : _jsx("span", { children: renderText(item.time) }), item.level == null ? null : _jsx("span", { className: "inkra-log__level", children: renderText(definition?.label ?? item.level) })] }), _jsx("div", { className: "inkra-log__content", children: renderText(item.content) })] })] }, item.id);
+                    }) }) : _jsx("div", { className: "inkra-log__empty", children: renderText(isEmpty ? (empty ?? labels.empty) : (noMatches ?? labels.noMatches)) }) }), (!nearBottom || resolvedPaused) && visibleItems.length > 0 ? _jsx("div", { className: "inkra-log__latest", children: _jsx(Button, { size: "sm", startIcon: _jsx(PencilIcon, { paths: followPaths, size: 18, sourceSize: 24 }), variant: "secondary", onClick: () => {
+                        if (resolvedPaused)
+                            changePaused(false);
+                        else
+                            scrollToLatest();
+                    }, children: resolvedPaused ? labels.resume : labels.latest }) }) : null] }));
+});

package/dist/log/model.d.ts

@@ -0,0 +1,16 @@
+export interface LogScrollMetrics {
+    scrollHeight: number;
+    scrollTop: number;
+    clientHeight: number;
+}
+export declare function isNearLogBottom(metrics: LogScrollMetrics, threshold?: number): boolean;
+export declare function isLogAppend(previous: readonly string[], next: readonly string[]): boolean;
+export declare function shouldFollowLogUpdate({ initial, nearBottom, paused, previousItemIds, nextItemIds, previousVisibleIds, nextVisibleIds, }: {
+    initial: boolean;
+    nearBottom: boolean;
+    paused: boolean;
+    previousItemIds: readonly string[];
+    nextItemIds: readonly string[];
+    previousVisibleIds: readonly string[];
+    nextVisibleIds: readonly string[];
+}): boolean;

package/dist/log/model.js

@@ -0,0 +1,13 @@
+export function isNearLogBottom(metrics, threshold = 32) {
+    const safeThreshold = Number.isFinite(threshold) ? Math.max(0, threshold) : 32;
+    return metrics.scrollHeight - metrics.scrollTop - metrics.clientHeight <= safeThreshold;
+}
+export function isLogAppend(previous, next) {
+    return previous.length < next.length && previous.every((id, index) => id === next[index]);
+}
+export function shouldFollowLogUpdate({ initial, nearBottom, paused, previousItemIds, nextItemIds, previousVisibleIds, nextVisibleIds, }) {
+    if (paused || !nearBottom)
+        return false;
+    return initial
+        || (isLogAppend(previousItemIds, nextItemIds) && isLogAppend(previousVisibleIds, nextVisibleIds));
+}

package/dist/node-graph/index.d.ts

@@ -0,0 +1,123 @@
+import type { Connection, Edge, EdgeChange, FitViewOptions, Node, NodeChange, OnConnect, Viewport } from '@xyflow/react';
+import type { HTMLAttributes, ReactElement, ReactNode, RefAttributes } from 'react';
+export type NodeGraphPortPosition = 'top' | 'right' | 'bottom' | 'left';
+export interface NodeGraphPortDefinition {
+    id: string;
+    type: 'source' | 'target';
+    position?: NodeGraphPortPosition;
+    label: string;
+    connectable?: boolean;
+}
+export interface NodeGraphNodeData extends Record<string, unknown> {
+    label?: ReactNode;
+    description?: ReactNode;
+    content?: ReactNode;
+    ports?: NodeGraphPortDefinition[];
+}
+export interface NodeGraphEdgeData extends Record<string, unknown> {
+    tone?: 'neutral' | 'accent';
+}
+export type NodeGraphNode<Data extends Record<string, unknown> = NodeGraphNodeData> = Node<Data>;
+export type NodeGraphEdge<Data extends Record<string, unknown> = NodeGraphEdgeData> = Edge<Data>;
+export type NodeGraphNodeChange<NodeType extends NodeGraphNode = NodeGraphNode> = NodeChange<NodeType>;
+export type NodeGraphEdgeChange<EdgeType extends NodeGraphEdge = NodeGraphEdge> = EdgeChange<EdgeType>;
+export type NodeGraphConnection = Connection;
+export type NodeGraphViewport = Viewport;
+export interface NodeGraphRenderNodeProps<Data extends Record<string, unknown> = NodeGraphNodeData> {
+    id: string;
+    data: Data;
+    selected: boolean;
+    dragging: boolean;
+    readOnly: boolean;
+}
+export interface NodeGraphRenderEdgeProps<EdgeType extends NodeGraphEdge = NodeGraphEdge> {
+    id: string;
+    edge: EdgeType;
+    selected: boolean;
+    path: string;
+    labelX: number;
+    labelY: number;
+}
+export interface NodeGraphRef {
+    fitView: (options?: FitViewOptions) => Promise<boolean>;
+    zoomIn: () => Promise<boolean>;
+    zoomOut: () => Promise<boolean>;
+    getViewport: () => NodeGraphViewport;
+}
+export interface NodeGraphControlLabels {
+    zoomIn: string;
+    zoomOut: string;
+    fitView: string;
+}
+export interface NodeGraphRootProps<NodeType extends NodeGraphNode = NodeGraphNode, EdgeType extends NodeGraphEdge = NodeGraphEdge> extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'onError'> {
+    nodes: NodeType[];
+    edges: EdgeType[];
+    onNodesChange?: (changes: NodeGraphNodeChange<NodeType>[]) => void;
+    onEdgesChange?: (changes: NodeGraphEdgeChange<EdgeType>[]) => void;
+    onConnect?: OnConnect;
+    isValidConnection?: (connection: NodeGraphConnection | EdgeType) => boolean;
+    renderNode?: (props: NodeGraphRenderNodeProps<NodeType['data']>) => ReactNode;
+    renderEdge?: (props: NodeGraphRenderEdgeProps<EdgeType>) => ReactNode;
+    renderEdgeLabel?: (edge: EdgeType) => ReactNode;
+    readOnly?: boolean;
+    emptyState?: ReactNode;
+    controls?: boolean;
+    controlLabels?: Partial<NodeGraphControlLabels>;
+    fitView?: boolean;
+    fitViewOptions?: FitViewOptions<NodeType>;
+    defaultViewport?: NodeGraphViewport;
+    viewport?: NodeGraphViewport;
+    onViewportChange?: (viewport: NodeGraphViewport) => void;
+    minZoom?: number;
+    maxZoom?: number;
+    panOnDrag?: boolean;
+    zoomOnScroll?: boolean;
+    zoomOnPinch?: boolean;
+    connectOnClick?: boolean;
+    onlyRenderVisibleElements?: boolean;
+}
+export interface NodeGraphPortProps extends Omit<HTMLAttributes<HTMLDivElement>, 'id' | 'children'> {
+    id: string;
+    type: 'source' | 'target';
+    position?: NodeGraphPortPosition;
+    label: string;
+    connectable?: boolean;
+}
+export interface NodeGraphNodeProps extends HTMLAttributes<HTMLDivElement> {
+    selected?: boolean;
+    dragging?: boolean;
+    readOnly?: boolean;
+    label?: ReactNode;
+    description?: ReactNode;
+    ports?: NodeGraphPortDefinition[];
+    children?: ReactNode;
+    seed?: string;
+}
+export interface NodeGraphEdgeProps {
+    id: string;
+    path: string;
+    labelX?: number;
+    labelY?: number;
+    selected?: boolean;
+    interactionWidth?: number;
+    label?: ReactNode;
+    className?: string;
+}
+export interface NodeGraphControlsProps extends HTMLAttributes<HTMLDivElement> {
+    fitViewOptions?: FitViewOptions;
+    zoomInLabel?: string;
+    zoomOutLabel?: string;
+    fitViewLabel?: string;
+}
+declare function NodeGraphControls({ className, fitViewOptions, zoomInLabel, zoomOutLabel, fitViewLabel, ...props }: NodeGraphControlsProps): import("react").JSX.Element;
+export declare function applyNodeGraphNodeChanges<NodeType extends NodeGraphNode>(changes: NodeGraphNodeChange<NodeType>[], nodes: NodeType[]): NodeType[];
+export declare function applyNodeGraphEdgeChanges<EdgeType extends NodeGraphEdge>(changes: NodeGraphEdgeChange<EdgeType>[], edges: EdgeType[]): EdgeType[];
+export declare function addNodeGraphEdge<EdgeType extends NodeGraphEdge>(connection: NodeGraphConnection | EdgeType, edges: EdgeType[]): EdgeType[];
+export declare const NodeGraph: {
+    Root: <NodeType extends NodeGraphNode = NodeGraphNode<NodeGraphNodeData>, EdgeType extends NodeGraphEdge = NodeGraphEdge<NodeGraphEdgeData>>(props: NodeGraphRootProps<NodeType, EdgeType> & RefAttributes<NodeGraphRef>) => ReactElement | null;
+    Node: import("react").ForwardRefExoticComponent<NodeGraphNodeProps & RefAttributes<HTMLDivElement>>;
+    Port: import("react").ForwardRefExoticComponent<NodeGraphPortProps & RefAttributes<HTMLDivElement>>;
+    Edge: import("react").NamedExoticComponent<NodeGraphEdgeProps>;
+    Controls: typeof NodeGraphControls;
+};
+export {};