@inkra/react 0.3.0 → 0.4.3

package/dist/data-table/index.js

@@ -1,12 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { flexRender, functionalUpdate, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable, } from '@tanstack/react-table';
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { Button } from '../Button.js';
 import { PencilIcon } from '../PencilIcon.js';
+import { PencilSurface } from '../PencilSurface.js';
+import { PencilText } from '../PencilText.js';
 import { Input } from '../form/Input.js';
 import { Table } from '../content/index.js';
 import { Checkbox } from '../selection/Checkbox.js';
+import { normalizeDataTablePagination } from './model.js';
 const sortIcon = [{ d: 'M 8 10 L 12 6 L 16 10 M 8 14 L 12 18 L 16 14' }];
+const sortAscendingIcon = [{ d: 'M 7 15 L 12 10 L 17 15' }];
+const sortDescendingIcon = [{ d: 'M 7 9 L 12 14 L 17 9' }];
 const previousIcon = [{ d: 'M 14 7 L 9 12 L 14 17' }];
 const nextIcon = [{ d: 'M 10 7 L 15 12 L 10 17' }];
 function classes(...values) {
@@ -15,27 +20,41 @@ function classes(...values) {
 function resolve(updater, current) {
     return functionalUpdate(updater, current);
 }
+function pencilCopy(value, seed) {
+    return typeof value === 'string' || typeof value === 'number'
+        ? _jsx(PencilText, { seed: seed, children: String(value) })
+        : value;
+}
 function SelectionCheckbox(props) {
     return _jsx(Checkbox, { className: "inkra-data-table__selection", checked: props.checked, indeterminate: props.indeterminate, disabled: props.disabled, label: _jsx("span", { className: "inkra-visually-hidden", children: props.label }), onCheckedChange: props.onChange });
 }
-export function DataTable({ data, columns, getRowId, caption, density = 'comfortable', layout = 'auto', striped = false, hoverable = true, stickyHeader = false, captionSide = 'top', filterable = false, filterLabel = 'Filter rows', filterPlaceholder = 'Filter rows', globalFilter, defaultGlobalFilter = '', onGlobalFilterChange, sorting, defaultSorting = [], onSortingChange, pagination = false, paginationState, defaultPagination = { pageIndex: 0, pageSize: 10 }, onPaginationChange, selectable = false, rowSelection, defaultRowSelection = {}, onRowSelectionChange, getRowCanSelect, loading = false, loadingMessage = 'Loading rows', emptyMessage = 'No rows', selectAllLabel = 'Select all rows on this page', selectRowLabel = row => `Select row ${row.id}`, previousPageLabel = 'Previous page', nextPageLabel = 'Next page', paginationLabel = 'Table pagination', pageLabel = (page, pageCount) => `Page ${page} of ${pageCount}`, sortStatusLabel = (columnId, direction) => direction === 'asc' ? `${columnId}: sorted ascending` : direction === 'desc' ? `${columnId}: sorted descending` : `${columnId}: not sorted`, className, ...props }) {
+export function DataTable({ data, columns, getRowId, caption, density = 'comfortable', layout = 'auto', striped = false, hoverable = true, stickyHeader = false, captionSide = 'top', filterable = false, filterLabel = 'Filter rows', filterPlaceholder = 'Filter rows', globalFilter, defaultGlobalFilter = '', onGlobalFilterChange, sorting, defaultSorting = [], onSortingChange, pagination = false, manualPagination = false, rowCount, manualSorting = false, manualFiltering = false, paginationState, defaultPagination = { pageIndex: 0, pageSize: 10 }, onPaginationChange, selectable = false, rowSelection, defaultRowSelection = {}, onRowSelectionChange, getRowCanSelect, loading = false, loadingMessage = 'Loading rows', emptyMessage = 'No rows', selectAllLabel = 'Select all rows on this page', selectRowLabel = row => `Select row ${row.id}`, previousPageLabel = 'Previous page', nextPageLabel = 'Next page', paginationLabel = 'Table pagination', pageLabel = (page, pageCount) => `Page ${page} of ${pageCount}`, sortStatusLabel = (columnId, direction) => direction === 'asc' ? `${columnId}: sorted ascending` : direction === 'desc' ? `${columnId}: sorted descending` : `${columnId}: not sorted`, className, ...props }) {
     const [internalFilter, setInternalFilter] = useState(defaultGlobalFilter);
     const [internalSorting, setInternalSorting] = useState(defaultSorting);
     const [internalPagination, setInternalPagination] = useState(defaultPagination);
     const [internalSelection, setInternalSelection] = useState(defaultRowSelection);
+    const paginationCorrection = useRef('');
     const resolvedFilter = globalFilter ?? internalFilter;
     const resolvedSorting = sorting ?? internalSorting;
     const resolvedPagination = paginationState ?? internalPagination;
     const resolvedSelection = rowSelection ?? internalSelection;
+    const paginationRowCount = manualPagination && pagination && rowCount !== undefined
+        ? (Number.isFinite(rowCount) ? Math.max(0, Math.floor(rowCount)) : data.length)
+        : data.length;
+    const initialPagination = useMemo(() => normalizeDataTablePagination(resolvedPagination, paginationRowCount), [resolvedPagination.pageIndex, resolvedPagination.pageSize, paginationRowCount]);
     const handleSorting = updater => {
         if (sorting === undefined)
             setInternalSorting(current => resolve(updater, current));
         onSortingChange?.(updater);
     };
     const handlePagination = updater => {
+        const normalizedUpdater = current => {
+            const rowCount = manualPagination ? paginationRowCount : table.getPrePaginationRowModel().rows.length;
+            return normalizeDataTablePagination(resolve(updater, normalizeDataTablePagination(current, rowCount)), rowCount);
+        };
         if (paginationState === undefined)
-            setInternalPagination(current => resolve(updater, current));
-        onPaginationChange?.(updater);
+            setInternalPagination(normalizedUpdater);
+        onPaginationChange?.(normalizedUpdater);
     };
     const handleSelection = updater => {
         if (rowSelection === undefined)
@@ -53,39 +72,68 @@ export function DataTable({ data, columns, getRowId, caption, density = 'comfort
         data,
         columns,
         getRowId,
+        manualPagination: pagination && manualPagination,
+        rowCount: pagination && manualPagination ? paginationRowCount : undefined,
+        manualSorting,
+        manualFiltering,
         state: {
             globalFilter: resolvedFilter,
             sorting: resolvedSorting,
-            pagination: resolvedPagination,
+            pagination: initialPagination,
             rowSelection: resolvedSelection,
         },
         onGlobalFilterChange: updater => handleFilter(resolve(updater, resolvedFilter)),
         onSortingChange: handleSorting,
         onPaginationChange: handlePagination,
         onRowSelectionChange: handleSelection,
+        defaultColumn: {
+            header: context => pencilCopy(context.column.id, `data-table-header-${context.header.id}`),
+            cell: context => pencilCopy(context.renderValue()?.toString?.() ?? null, `data-table-cell-${context.cell.id}`),
+        },
         enableRowSelection: selectable ? getRowCanSelect ?? true : false,
         getCoreRowModel: getCoreRowModel(),
         getFilteredRowModel: getFilteredRowModel(),
         getSortedRowModel: getSortedRowModel(),
         getPaginationRowModel: pagination ? getPaginationRowModel() : undefined,
     });
+    const filteredRowCount = pagination && manualPagination ? paginationRowCount : table.getPrePaginationRowModel().rows.length;
+    const effectivePagination = useMemo(() => normalizeDataTablePagination(initialPagination, filteredRowCount), [initialPagination, filteredRowCount]);
+    if (table.getState().pagination.pageIndex !== effectivePagination.pageIndex
+        || table.getState().pagination.pageSize !== effectivePagination.pageSize) {
+        table.setOptions(previous => ({
+            ...previous,
+            state: { ...previous.state, pagination: effectivePagination },
+        }));
+    }
     const rows = table.getRowModel().rows;
-    const filteredRowCount = table.getPrePaginationRowModel().rows.length;
-    const pageCount = Math.max(1, table.getPageCount());
+    const pageCount = filteredRowCount === 0 ? 0 : Math.ceil(filteredRowCount / effectivePagination.pageSize);
     const visibleColumnCount = Math.max(1, table.getVisibleLeafColumns().length + (selectable ? 1 : 0));
     const hasSelectableRows = rows.some(row => row.getCanSelect());
     useEffect(() => {
         if (!pagination)
             return;
-        const lastPageIndex = Math.max(0, Math.ceil(filteredRowCount / resolvedPagination.pageSize) - 1);
-        if (resolvedPagination.pageIndex <= lastPageIndex)
+        const matches = resolvedPagination.pageIndex === effectivePagination.pageIndex
+            && resolvedPagination.pageSize === effectivePagination.pageSize;
+        if (matches) {
+            paginationCorrection.current = '';
+            return;
+        }
+        const signature = `${filteredRowCount}:${resolvedPagination.pageIndex}:${resolvedPagination.pageSize}->${effectivePagination.pageIndex}:${effectivePagination.pageSize}`;
+        if (paginationCorrection.current === signature)
             return;
-        const next = { ...resolvedPagination, pageIndex: lastPageIndex };
+        paginationCorrection.current = signature;
         if (paginationState === undefined)
-            setInternalPagination(next);
-        onPaginationChange?.(next);
-    }, [filteredRowCount, onPaginationChange, pagination, paginationState, resolvedPagination]);
-    return _jsxs("div", { ...props, className: classes('inkra-data-table', className), "data-loading": loading || undefined, children: [filterable && _jsx("div", { className: "inkra-data-table__toolbar", children: _jsxs("label", { className: "inkra-data-table__filter", children: [_jsx("span", { children: filterLabel }), _jsx(Input, { type: "search", value: resolvedFilter, placeholder: filterPlaceholder, onChange: event => handleFilter(event.currentTarget.value) })] }) }), _jsx(Table.Container, { className: "inkra-data-table__container", children: _jsxs(Table.Root, { density: density, layout: layout, striped: striped, hoverable: hoverable, stickyHeader: stickyHeader, captionSide: captionSide, children: [caption != null && _jsx(Table.Caption, { children: caption }), _jsx(Table.Header, { children: table.getHeaderGroups().map(headerGroup => _jsxs(Table.Row, { children: [selectable && _jsx(Table.Head, { className: "inkra-data-table__select-cell", children: _jsx(SelectionCheckbox, { checked: pagination ? table.getIsAllPageRowsSelected() : table.getIsAllRowsSelected(), indeterminate: pagination ? table.getIsSomePageRowsSelected() : table.getIsSomeRowsSelected(), label: selectAllLabel, disabled: loading || !hasSelectableRows, onChange: checked => pagination ? table.toggleAllPageRowsSelected(checked) : table.toggleAllRowsSelected(checked) }) }), headerGroup.headers.map(header => _jsx(Table.Head, { colSpan: header.colSpan, "aria-sort": header.column.getIsSorted() === 'asc' ? 'ascending' : header.column.getIsSorted() === 'desc' ? 'descending' : header.column.getCanSort() ? 'none' : undefined, children: header.isPlaceholder ? null : header.column.getCanSort() ? _jsxs("button", { type: "button", className: "inkra-data-table__sort", "data-sorted": header.column.getIsSorted() || undefined, onClick: header.column.getToggleSortingHandler(), children: [_jsx("span", { children: flexRender(header.column.columnDef.header, header.getContext()) }), _jsx(PencilIcon, { "aria-hidden": "true", paths: sortIcon, size: 18, sourceSize: 24, active: Boolean(header.column.getIsSorted()) }), _jsx("span", { className: "inkra-visually-hidden", children: sortStatusLabel(header.column.id, header.column.getIsSorted()) })] }) : flexRender(header.column.columnDef.header, header.getContext()) }, header.id))] }, headerGroup.id)) }), _jsx(Table.Body, { children: loading ? _jsx(Table.Row, { children: _jsx(Table.Cell, { colSpan: visibleColumnCount, children: _jsx("div", { className: "inkra-data-table__state", role: "status", children: loadingMessage }) }) })
-                                : rows.length === 0 ? _jsx(Table.Row, { children: _jsx(Table.Cell, { colSpan: visibleColumnCount, children: _jsx("div", { className: "inkra-data-table__state", children: emptyMessage }) }) })
-                                    : rows.map(row => _jsxs(Table.Row, { selected: row.getIsSelected(), children: [selectable && _jsx(Table.Cell, { className: "inkra-data-table__select-cell", children: _jsx(SelectionCheckbox, { checked: row.getIsSelected(), label: selectRowLabel(row), disabled: !row.getCanSelect(), onChange: checked => row.toggleSelected(checked) }) }), row.getVisibleCells().map(cell => _jsx(Table.Cell, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))] }, row.id)) })] }) }), pagination && _jsxs("nav", { className: "inkra-data-table__pagination", "aria-label": paginationLabel, children: [_jsx(Button, { size: "icon-xs", variant: "ghost", "aria-label": previousPageLabel, disabled: loading || !table.getCanPreviousPage(), onClick: () => table.previousPage(), children: _jsx(PencilIcon, { paths: previousIcon, size: 18, sourceSize: 24 }) }), _jsx("span", { "aria-live": "polite", children: pageLabel(table.getState().pagination.pageIndex + 1, pageCount) }), _jsx(Button, { size: "icon-xs", variant: "ghost", "aria-label": nextPageLabel, disabled: loading || !table.getCanNextPage(), onClick: () => table.nextPage(), children: _jsx(PencilIcon, { paths: nextIcon, size: 18, sourceSize: 24 }) })] })] });
+            setInternalPagination(effectivePagination);
+        onPaginationChange?.(effectivePagination);
+    }, [effectivePagination.pageIndex, effectivePagination.pageSize, filteredRowCount, onPaginationChange, pagination,
+        paginationState, resolvedPagination.pageIndex, resolvedPagination.pageSize]);
+    return _jsxs("div", { ...props, className: classes('inkra-data-table', className), "data-loading": loading || undefined, children: [filterable && _jsx("div", { className: "inkra-data-table__toolbar", children: _jsxs("label", { className: "inkra-data-table__filter", children: [_jsx("span", { children: pencilCopy(filterLabel, 'data-table-filter-label') }), _jsx(Input, { type: "search", value: resolvedFilter, placeholder: filterPlaceholder, onChange: event => handleFilter(event.currentTarget.value) })] }) }), _jsx(Table.Container, { className: "inkra-data-table__container", children: _jsxs(Table.Root, { density: density, layout: layout, striped: striped, hoverable: hoverable, stickyHeader: stickyHeader, captionSide: captionSide, children: [caption != null && _jsx(Table.Caption, { children: caption }), _jsx(Table.Header, { children: table.getHeaderGroups().map(headerGroup => _jsxs(Table.Row, { children: [selectable && _jsx(Table.Head, { className: "inkra-data-table__select-cell", children: _jsx(SelectionCheckbox, { checked: pagination ? table.getIsAllPageRowsSelected() : table.getIsAllRowsSelected(), indeterminate: pagination ? table.getIsSomePageRowsSelected() : table.getIsSomeRowsSelected(), label: selectAllLabel, disabled: loading || !hasSelectableRows, onChange: checked => pagination ? table.toggleAllPageRowsSelected(checked) : table.toggleAllRowsSelected(checked) }) }), headerGroup.headers.map(header => _jsx(Table.Head, { colSpan: header.colSpan, "aria-sort": header.column.getIsSorted() === 'asc' ? 'ascending' : header.column.getIsSorted() === 'desc' ? 'descending' : header.column.getCanSort() ? 'none' : undefined, children: header.isPlaceholder ? null : (() => {
+                                            const rendered = flexRender(header.column.columnDef.header, header.getContext());
+                                            const direction = header.column.getIsSorted();
+                                            if (!header.column.getCanSort())
+                                                return pencilCopy(rendered, `data-table-header-${header.id}`);
+                                            return _jsxs("button", { type: "button", className: "inkra-data-table__sort", "data-sorted": direction || undefined, onClick: header.column.getToggleSortingHandler(), children: [_jsx(PencilSurface, { as: "span", "aria-hidden": "true", className: "inkra-data-table__sort-focus", variant: "outline", radius: 6, seed: `data-table-sort-${header.id}-focus` }), _jsx("span", { className: "inkra-data-table__sort-label", children: pencilCopy(rendered, `data-table-sort-${header.id}`) }), _jsx(PencilIcon, { "aria-hidden": "true", className: "inkra-data-table__sort-icon", "data-direction": direction || 'none', paths: direction === 'asc' ? sortAscendingIcon : direction === 'desc' ? sortDescendingIcon : sortIcon, size: 18, sourceSize: 24, active: Boolean(direction) }), _jsx("span", { className: "inkra-visually-hidden", children: sortStatusLabel(header.column.id, direction) })] });
+                                        })() }, header.id))] }, headerGroup.id)) }), _jsx(Table.Body, { children: loading ? _jsx(Table.Row, { children: _jsx(Table.Cell, { colSpan: visibleColumnCount, children: _jsx("div", { className: "inkra-data-table__state", role: "status", children: pencilCopy(loadingMessage, 'data-table-loading') }) }) })
+                                : rows.length === 0 ? _jsx(Table.Row, { children: _jsx(Table.Cell, { colSpan: visibleColumnCount, children: _jsx("div", { className: "inkra-data-table__state", children: pencilCopy(emptyMessage, 'data-table-empty') }) }) })
+                                    : rows.map(row => _jsxs(Table.Row, { selected: row.getIsSelected(), children: [selectable && _jsx(Table.Cell, { className: "inkra-data-table__select-cell", children: _jsx(SelectionCheckbox, { checked: row.getIsSelected(), label: selectRowLabel(row), disabled: !row.getCanSelect(), onChange: checked => row.toggleSelected(checked) }) }), row.getVisibleCells().map(cell => _jsx(Table.Cell, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))] }, row.id)) })] }) }), pagination && _jsxs("nav", { className: "inkra-data-table__pagination", "aria-label": paginationLabel, children: [_jsx(Button, { size: "icon-xs", variant: "ghost", "aria-label": previousPageLabel, disabled: loading || pageCount === 0 || effectivePagination.pageIndex <= 0, onClick: () => table.previousPage(), children: _jsx(PencilIcon, { className: "inkra-data-table__page-arrow", paths: previousIcon, size: 18, sourceSize: 24 }) }), _jsx("span", { "aria-live": "polite", "aria-atomic": "true", children: pencilCopy(pageLabel(pageCount === 0 ? 0 : effectivePagination.pageIndex + 1, pageCount), 'data-table-page-label') }), _jsx(Button, { size: "icon-xs", variant: "ghost", "aria-label": nextPageLabel, disabled: loading || pageCount === 0 || effectivePagination.pageIndex >= pageCount - 1, onClick: () => table.nextPage(), children: _jsx(PencilIcon, { className: "inkra-data-table__page-arrow", paths: nextIcon, size: 18, sourceSize: 24 }) })] })] });
 }

package/dist/data-table/model.d.ts

@@ -0,0 +1,2 @@
+import type { PaginationState } from '@tanstack/react-table';
+export declare function normalizeDataTablePagination(state: PaginationState, rowCount: number): PaginationState;

package/dist/data-table/model.js

@@ -0,0 +1,7 @@
+export function normalizeDataTablePagination(state, rowCount) {
+    const pageSize = Number.isFinite(state.pageSize) ? Math.max(1, Math.floor(state.pageSize)) : 10;
+    const count = Number.isFinite(rowCount) ? Math.max(0, Math.floor(rowCount)) : 0;
+    const pageCount = count === 0 ? 0 : Math.ceil(count / pageSize);
+    const requestedIndex = Number.isFinite(state.pageIndex) ? Math.max(0, Math.floor(state.pageIndex)) : 0;
+    return { pageIndex: pageCount === 0 ? 0 : Math.min(requestedIndex, pageCount - 1), pageSize };
+}

package/dist/date-picker/index.d.ts

@@ -1,6 +1,7 @@
 import type { AriaAttributes, CSSProperties, FocusEventHandler } from 'react';
 import type { DateRange } from 'react-day-picker';
 import type { CalendarProps } from '../calendar/index.js';
+import type { FieldControlSize } from '../form/types.js';
 export type DatePickerMode = 'single' | 'range';
 export type DatePickerRange = DateRange;
 export type DatePickerValue = Date | DatePickerRange | undefined;
@@ -23,6 +24,7 @@ export interface DatePickerProps {
     onBlur?: FocusEventHandler<HTMLButtonElement>;
     onFocus?: FocusEventHandler<HTMLButtonElement>;
     required?: boolean;
+    size?: FieldControlSize;
     style?: CSSProperties;
     mode?: DatePickerMode;
     value?: DatePickerValue;

package/dist/date-picker/index.js

@@ -1,6 +1,6 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { forwardRef, useEffect, useId, useImperativeHandle, useMemo, useRef, useState, } from 'react';
-import { Button } from '../Button.js';
+import { Button, ButtonGroup } from '../Button.js';
 import { Calendar } from '../calendar/index.js';
 import { mergeAriaIds, useFieldContext } from '../form/context.js';
 import { useResolvedControlProps } from '../form/controlProps.js';
@@ -52,7 +52,7 @@ function defaultCopy(locale) {
 export const DatePicker = forwardRef(function DatePicker(allProps, forwardedRef) {
     const valueControlled = Object.prototype.hasOwnProperty.call(allProps, 'value');
     const openControlled = Object.prototype.hasOwnProperty.call(allProps, 'open');
-    const { 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage, 'aria-invalid': ariaInvalid, 'aria-label': ariaLabel, autoFocus, calendarLabel, calendarProps = {}, className, clearable = true, clearButtonLabel, defaultOpen = false, defaultValue, dir, disabled = false, endName, form, fullWidth = true, id, invalid = false, locale = 'en-US', mode = 'single', name, onBlur, onFocus, onOpenChange, onValueChange, open, openButtonLabel, placeholder, rangeSeparator = ' – ', readOnly = false, required = false, style, value, } = allProps;
+    const { 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage, 'aria-invalid': ariaInvalid, 'aria-label': ariaLabel, autoFocus, calendarLabel, calendarProps = {}, className, clearable = true, clearButtonLabel, defaultOpen = false, defaultValue, dir, disabled = false, endName, form, fullWidth = true, id, invalid = false, locale = 'en-US', mode = 'single', name, onBlur, onFocus, onOpenChange, onValueChange, open, openButtonLabel, placeholder, rangeSeparator = ' – ', readOnly = false, required = false, size = 'md', style, value, } = allProps;
     const generatedId = useId();
     const field = useFieldContext();
     const triggerRef = useRef(null);
@@ -85,6 +85,7 @@ export const DatePicker = forwardRef(function DatePicker(allProps, forwardedRef)
     const captionFormatter = useMemo(() => new Intl.DateTimeFormat(locale, {
         month: 'long', year: 'numeric',
     }), [locale]);
+    const dayFormatter = useMemo(() => new Intl.NumberFormat(locale), [locale]);
     const weekdayFormatter = useMemo(() => new Intl.DateTimeFormat(locale, { weekday: 'short' }), [locale]);
     const displayValue = singleValue
         ? formatter.format(singleValue)
@@ -128,7 +129,7 @@ export const DatePicker = forwardRef(function DatePicker(allProps, forwardedRef)
     const { disabled: disabledDays, formatters, labels, defaultMonth, ...restCalendarProps } = calendarProps;
     const localizedFormatters = {
         formatCaption: date => captionFormatter.format(date),
-        formatDay: date => new Intl.NumberFormat(locale).format(date.getDate()),
+        formatDay: date => dayFormatter.format(date.getDate()),
         formatWeekdayName: date => weekdayFormatter.format(date),
         ...formatters,
     };
@@ -150,11 +151,11 @@ export const DatePicker = forwardRef(function DatePicker(allProps, forwardedRef)
         formatters: localizedFormatters,
         labels: localizedLabels,
     };
-    return (_jsxs(Popover.Root, { open: currentOpen, onOpenChange: updateOpen, children: [_jsxs("span", { className: classes('inkra-date-picker', className), "data-disabled": state.disabled || undefined, "data-full-width": fullWidth || undefined, "data-has-value": hasValue || undefined, "data-invalid": state.invalid || constraintInvalid || undefined, "data-mode": mode, "data-readonly": state.readOnly || undefined, dir: dir, style: style, children: [_jsx(Popover.Trigger, { asChild: true, children: _jsx(Button, { "aria-describedby": mergeAriaIds(state.describedBy, accessibleValueId), "aria-errormessage": state.errorMessage, "aria-invalid": constraintInvalid || state.ariaInvalid, "aria-label": ariaLabel ?? (openButtonLabel ? `${openButtonLabel}: ${displayValue}` : undefined), "aria-required": state.required || undefined, autoFocus: autoFocus, className: "inkra-date-picker__trigger", disabled: state.disabled, form: form, fullWidth: fullWidth, id: triggerId, onBlur: onBlur, onFocus: onFocus, ref: triggerRef, startIcon: _jsx(PencilIcon, { paths: calendarPaths, sourceSize: 24, size: 22 }), variant: "outline", children: _jsx("span", { className: "inkra-date-picker__value", "data-placeholder": !hasValue || undefined, children: displayValue }) }) }), accessibleValueId ? _jsx("span", { className: "inkra-date-picker__accessible-value", id: accessibleValueId, children: displayValue }) : null, clearable ? (_jsx(Button, { "aria-hidden": !hasValue || undefined, "aria-label": clearButtonLabel ?? copy.clear, className: "inkra-date-picker__clear", disabled: !hasValue || state.disabled || state.readOnly, onClick: () => {
-                            commit(undefined, 'clear');
-                            updateOpen(false);
-                            triggerRef.current?.focus({ preventScroll: true });
-                        }, size: "icon", tabIndex: hasValue ? 0 : -1, variant: "ghost", children: _jsx(PencilIcon, { paths: clearPaths, sourceSize: 24, size: 22 }) })) : null, name || state.required ? (mode === 'range' ? _jsxs(_Fragment, { children: [_jsx("input", { "aria-hidden": "true", className: "inkra-date-picker__form-field", disabled: state.disabled, form: form, name: name, onChange: () => undefined, onInvalid: event => { event.preventDefault(); setConstraintInvalid(true); triggerRef.current?.focus(); }, readOnly: state.readOnly, required: state.required, tabIndex: -1, type: "text", value: datePickerLocalValue(rangeValue?.from) }), _jsx("input", { "aria-hidden": "true", className: "inkra-date-picker__form-field", disabled: state.disabled, form: form, name: endName ?? (name ? `${name}End` : undefined), onChange: () => undefined, onInvalid: event => { event.preventDefault(); setConstraintInvalid(true); triggerRef.current?.focus(); }, readOnly: state.readOnly, required: state.required, tabIndex: -1, type: "text", value: datePickerLocalValue(rangeValue?.to) })] }) : _jsx("input", { "aria-hidden": "true", className: "inkra-date-picker__form-field", disabled: state.disabled, form: form, name: name, onChange: () => undefined, onInvalid: event => { event.preventDefault(); setConstraintInvalid(true); triggerRef.current?.focus(); }, readOnly: state.readOnly, required: state.required, tabIndex: -1, type: "text", value: datePickerLocalValue(singleValue) })) : null] }), _jsx(Popover.Portal, { children: _jsxs(Popover.Content, { align: "start", "aria-label": calendarLabel ?? copy.calendar, className: "inkra-date-picker__popover", collisionPadding: 12, onOpenAutoFocus: event => {
+    return (_jsxs(Popover.Root, { open: currentOpen, onOpenChange: updateOpen, children: [_jsxs("span", { className: classes('inkra-date-picker', className), "data-disabled": state.disabled || undefined, "data-full-width": fullWidth || undefined, "data-has-value": hasValue || undefined, "data-invalid": state.invalid || constraintInvalid || undefined, "data-mode": mode, "data-readonly": state.readOnly || undefined, "data-size": size, dir: dir, style: style, children: [_jsxs(ButtonGroup, { "aria-label": copy.calendar, className: "inkra-date-picker__control", "data-size": size, fullWidth: fullWidth, size: size, variant: "outline", children: [_jsx(Popover.Trigger, { asChild: true, children: _jsx(Button, { "aria-describedby": mergeAriaIds(state.describedBy, accessibleValueId), "aria-errormessage": state.errorMessage, "aria-invalid": constraintInvalid || state.ariaInvalid, "aria-label": ariaLabel ?? (openButtonLabel ? `${openButtonLabel}: ${displayValue}` : undefined), "aria-required": state.required || undefined, autoFocus: autoFocus, className: "inkra-date-picker__trigger", disabled: state.disabled, form: form, fullWidth: fullWidth, id: triggerId, onBlur: onBlur, onFocus: onFocus, ref: triggerRef, startIcon: _jsx(PencilIcon, { paths: calendarPaths, sourceSize: 24, size: 22 }), children: _jsx("span", { className: "inkra-date-picker__value", "data-placeholder": !hasValue || undefined, children: displayValue }) }) }), clearable ? (_jsx(Button, { "aria-hidden": !hasValue || undefined, "aria-label": clearButtonLabel ?? copy.clear, className: "inkra-date-picker__clear", disabled: !hasValue || state.disabled || state.readOnly, onPointerDown: event => event.preventDefault(), onClick: () => {
+                                    commit(undefined, 'clear');
+                                    updateOpen(false);
+                                    triggerRef.current?.focus({ preventScroll: true });
+                                }, size: size === 'sm' ? 'icon-sm' : size === 'lg' ? 'icon-lg' : 'icon', tabIndex: hasValue ? 0 : -1, variant: "ghost", children: _jsx(PencilIcon, { paths: clearPaths, sourceSize: 24, size: 22 }) })) : null] }), accessibleValueId ? _jsx("span", { className: "inkra-date-picker__accessible-value", id: accessibleValueId, children: displayValue }) : null, name || state.required ? (mode === 'range' ? _jsxs(_Fragment, { children: [_jsx("input", { "aria-hidden": "true", className: "inkra-date-picker__form-field", disabled: state.disabled, form: form, name: name, onChange: () => undefined, onInvalid: event => { event.preventDefault(); setConstraintInvalid(true); triggerRef.current?.focus(); }, readOnly: state.readOnly, required: state.required, tabIndex: -1, type: "text", value: datePickerLocalValue(rangeValue?.from) }), _jsx("input", { "aria-hidden": "true", className: "inkra-date-picker__form-field", disabled: state.disabled, form: form, name: endName ?? (name ? `${name}End` : undefined), onChange: () => undefined, onInvalid: event => { event.preventDefault(); setConstraintInvalid(true); triggerRef.current?.focus(); }, readOnly: state.readOnly, required: state.required, tabIndex: -1, type: "text", value: datePickerLocalValue(rangeValue?.to) })] }) : _jsx("input", { "aria-hidden": "true", className: "inkra-date-picker__form-field", disabled: state.disabled, form: form, name: name, onChange: () => undefined, onInvalid: event => { event.preventDefault(); setConstraintInvalid(true); triggerRef.current?.focus(); }, readOnly: state.readOnly, required: state.required, tabIndex: -1, type: "text", value: datePickerLocalValue(singleValue) })) : null] }), _jsx(Popover.Portal, { children: _jsxs(Popover.Content, { align: "start", "aria-label": calendarLabel ?? copy.calendar, className: "inkra-date-picker__popover", collisionPadding: 12, onOpenAutoFocus: event => {
                         event.preventDefault();
                         requestAnimationFrame(() => {
                             requestAnimationFrame(() => {

package/dist/day-agenda/index.d.ts

@@ -13,6 +13,7 @@ export interface AgendaEvent {
 }
 export interface DayAgendaProps extends Omit<HTMLAttributes<HTMLElement>, 'onSelect'> {
     date: string;
+    /** Immutable snapshots: replace the events array and changed event records when editing. */
     events: readonly AgendaEvent[];
     selectedEvent?: string;
     onEventSelect?: (event: AgendaEvent) => void;
@@ -32,6 +33,10 @@ export interface DayAgendaProps extends Omit<HTMLAttributes<HTMLElement>, 'onSel
         previous: string;
         next: string;
     };
+    /** Opt-in initial summary. Layout uses every event and all can be revealed. */
+    maxVisibleEvents?: number;
+    showAllEventsLabel?: (count: number) => string;
+    showFewerEventsLabel?: string;
 }
 export declare function agendaTime(minute: number, hourCycle?: 'h12' | 'h23', locale?: string): string;
 export declare function agendaInterval(event: AgendaEvent): {
@@ -40,4 +45,4 @@ export declare function agendaInterval(event: AgendaEvent): {
     before: boolean;
     after: boolean;
 } | null;
-export declare function DayAgenda({ date, events, selectedEvent, onEventSelect, locale, timeZoneLabel, emptyLabel, untimedLabel, showOverview, hourCycle, density, showDescriptions, divided, disabled, onPreviousDay, onNextDay, navigationLabels, className, ...props }: DayAgendaProps): import("react").JSX.Element;
+export declare function DayAgenda({ date, events, selectedEvent, onEventSelect, locale, timeZoneLabel, emptyLabel, untimedLabel, showOverview, hourCycle, density, showDescriptions, divided, disabled, onPreviousDay, onNextDay, navigationLabels, maxVisibleEvents, showAllEventsLabel, showFewerEventsLabel, className, ...props }: DayAgendaProps): import("react").JSX.Element;

package/dist/day-agenda/index.js

@@ -1,19 +1,24 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useId } from 'react';
+import { useId, useMemo, useState } from 'react';
 import { TravelIcon } from '../internal/travelIcons.js';
 import { Button } from '../Button.js';
 import { createAgendaScale, layoutAgendaCards } from './layout.js';
 import { PencilSurface } from '../PencilSurface.js';
 import { PencilLine } from '../PencilLine.js';
 import { PencilText } from '../PencilText.js';
-export function agendaTime(minute, hourCycle = 'h23', locale = 'en') {
+function formatAgendaMinute(minute, formatter) {
     const value = Math.max(0, Math.min(1440, Math.floor(minute)));
-    if (hourCycle === 'h12') {
+    if (formatter) {
         const time = new Date(Date.UTC(2000, 0, 1, 0, value));
-        return new Intl.DateTimeFormat(locale, { timeZone: 'UTC', hour: 'numeric', minute: '2-digit', hourCycle }).format(time) + (value === 1440 ? ' +1' : '');
+        return formatter.format(time) + (value === 1440 ? ' +1' : '');
     }
     return value === 1440 ? '00:00 +1' : `${String(Math.floor(value / 60)).padStart(2, '0')}:${String(value % 60).padStart(2, '0')}`;
 }
+export function agendaTime(minute, hourCycle = 'h23', locale = 'en') {
+    return formatAgendaMinute(minute, hourCycle === 'h12'
+        ? new Intl.DateTimeFormat(locale, { timeZone: 'UTC', hour: 'numeric', minute: '2-digit', hourCycle })
+        : undefined);
+}
 export function agendaInterval(event) {
     if (event.startMinute === undefined || !Number.isFinite(event.startMinute))
         return null;
@@ -24,24 +29,44 @@ export function agendaInterval(event) {
         return null;
     return { start: Math.max(0, event.startMinute), end: Math.min(1440, end ?? event.startMinute), before: event.startMinute < 0, after: (end ?? 0) > 1440 };
 }
-export function DayAgenda({ date, events, selectedEvent, onEventSelect, locale = 'en', timeZoneLabel, emptyLabel = 'No events', untimedLabel = 'Time pending', showOverview = true, hourCycle = 'h23', density = 'comfortable', showDescriptions = true, divided = true, disabled = false, onPreviousDay, onNextDay, navigationLabels = { previous: 'Previous day', next: 'Next day' }, className, ...props }) {
+export function DayAgenda({ date, events, selectedEvent, onEventSelect, locale = 'en', timeZoneLabel, emptyLabel = 'No events', untimedLabel = 'Time pending', showOverview = true, hourCycle = 'h23', density = 'comfortable', showDescriptions = true, divided = true, disabled = false, onPreviousDay, onNextDay, navigationLabels = { previous: 'Previous day', next: 'Next day' }, maxVisibleEvents, showAllEventsLabel = count => `Show all ${count} events`, showFewerEventsLabel = 'Show fewer events', className, ...props }) {
     const id = useId();
-    const validDate = /^\d{4}-\d{2}-\d{2}$/.test(date) ? new Date(`${date}T12:00:00Z`) : new Date(NaN);
-    const title = Number.isFinite(validDate.getTime()) ? new Intl.DateTimeFormat(locale, { timeZone: 'UTC', month: 'long', day: 'numeric', weekday: 'short' }).format(validDate) : date;
-    const ordered = [...events].sort((a, b) => (agendaInterval(a)?.start ?? Infinity) - (agendaInterval(b)?.start ?? Infinity));
-    const formatTime = (minute) => agendaTime(minute, hourCycle, locale);
-    const timed = ordered.flatMap(event => {
-        const interval = agendaInterval(event);
-        return interval ? [{ ...interval, id: event.id, event }] : [];
-    });
-    const intervals = timed.filter(row => row.end > row.start);
-    const points = timed.filter(row => row.end === row.start);
-    const scale = createAgendaScale(intervals, points.map(row => row.start), density === 'compact');
-    const cards = layoutAgendaCards(timed, scale).sort((a, b) => a.start - b.start);
-    const ticks = Array.from({ length: 25 }, (_, hour) => hour * 60).filter((minute, index, list) => index === 0 || index === 24 || scale.position(minute) - scale.position(list[index - 1]) >= 25);
+    const [expandedDate, setExpandedDate] = useState();
+    const displayLimit = maxVisibleEvents !== undefined && Number.isFinite(maxVisibleEvents) ? Math.max(0, Math.floor(maxVisibleEvents)) : Infinity;
+    const expanded = expandedDate === date;
+    const title = useMemo(() => {
+        const validDate = /^\d{4}-\d{2}-\d{2}$/.test(date) ? new Date(`${date}T12:00:00Z`) : new Date(NaN);
+        return Number.isFinite(validDate.getTime()) ? new Intl.DateTimeFormat(locale, { timeZone: 'UTC', month: 'long', day: 'numeric', weekday: 'short' }).format(validDate) : date;
+    }, [date, locale]);
+    const timeFormatter = useMemo(() => hourCycle === 'h12'
+        ? new Intl.DateTimeFormat(locale, { timeZone: 'UTC', hour: 'numeric', minute: '2-digit', hourCycle })
+        : undefined, [hourCycle, locale]);
+    const { ordered, pending, scale, cards, ticks } = useMemo(() => {
+        const records = events.map(event => ({ event, interval: agendaInterval(event) }))
+            .sort((a, b) => (a.interval?.start ?? Infinity) - (b.interval?.start ?? Infinity));
+        const ordered = records.map(row => row.event);
+        const pending = records.filter(row => !row.interval).map(row => row.event);
+        const timed = records.flatMap(({ event, interval }) => interval ? [{ ...interval, id: event.id, event }] : []);
+        const intervals = timed.filter(row => row.end > row.start);
+        const points = timed.filter(row => row.end === row.start);
+        const scale = createAgendaScale(intervals, points.map(row => row.start), density === 'compact');
+        const formatTime = (minute) => formatAgendaMinute(minute, timeFormatter);
+        const cards = layoutAgendaCards(timed, scale).sort((a, b) => a.start - b.start).map(row => ({
+            ...row,
+            time: `${row.before ? '\u2190 ' : ''}${formatTime(row.start)}${row.event.endMinute !== undefined ? ` - ${formatTime(row.end)}` : ''}${row.after ? ' \u2192' : ''}`,
+        }));
+        const ticks = Array.from({ length: 25 }, (_, hour) => hour * 60)
+            .filter((minute, index, list) => index === 0 || index === 24 || scale.position(minute) - scale.position(list[index - 1]) >= 25)
+            .map(minute => ({ minute, label: formatTime(minute) }));
+        return { ordered, pending, scale, cards, ticks };
+    }, [density, events, timeFormatter]);
+    const shownIds = useMemo(() => expanded || displayLimit >= ordered.length ? null
+        : new Set([...ordered.slice(0, displayLimit).map(event => event.id), ...(selectedEvent ? [selectedEvent] : [])]), [expanded, displayLimit, ordered, selectedEvent]);
+    const visibleCards = shownIds === null ? cards : cards.filter(row => shownIds.has(row.id));
+    const visiblePending = shownIds === null ? pending : pending.filter(event => shownIds.has(event.id));
     const renderCard = (event, time) => _jsxs(PencilSurface, { variant: "quiet", radius: 6, className: "inkra-agenda__card", "data-selected": selectedEvent === event.id, style: { '--inkra-accent-soft': event.color ?? (event.kind === 'stay' ? '#c8c38f' : event.kind === 'travel' ? '#87bbc0' : '#a7c7ad') }, children: [onEventSelect && _jsx("button", { type: "button", className: "inkra-agenda__hit", disabled: disabled || event.disabled, "aria-label": `${time}, ${event.title}`, "aria-pressed": selectedEvent === event.id, onClick: () => onEventSelect(event) }), _jsxs("div", { className: "inkra-agenda__card-copy", children: [_jsxs("span", { className: "inkra-agenda__card-title", title: event.title, children: [event.icon && _jsx("span", { "aria-hidden": "true", children: event.icon }), _jsx(PencilText, { ellipsis: true, children: event.title })] }), showDescriptions && event.description && _jsx("span", { className: "inkra-agenda__description", children: event.description })] })] });
-    return _jsxs("section", { ...props, "data-density": density, "data-hour-cycle": hourCycle, className: ['inkra-agenda', className].filter(Boolean).join(' '), "aria-labelledby": props['aria-labelledby'] ?? id, children: [_jsxs("header", { className: "inkra-agenda__heading", children: [_jsx(PencilText, { as: "h3", id: id, children: title }), timeZoneLabel && _jsx(PencilText, { children: timeZoneLabel })] }), _jsx(PencilLine, {}), ordered.length === 0 ? _jsx(PencilText, { as: "p", children: emptyLabel }) : _jsxs(_Fragment, { children: [_jsx("div", { className: "inkra-agenda__timeline", "data-overview": showOverview, children: _jsxs("div", { className: "inkra-agenda__scale", style: { height: scale.height + 24 }, children: [ticks.map(minute => _jsxs("div", { className: "inkra-agenda__tick", style: { top: scale.position(minute) + 12 }, children: [_jsx("span", { children: _jsx(PencilText, { children: formatTime(minute) }) }), divided && _jsx(PencilLine, {})] }, minute)), _jsx("ol", { className: "inkra-agenda__lanes", children: cards.map(row => {
-                                        const time = `${row.before ? '\u2190 ' : ''}${formatTime(row.start)}${row.event.endMinute !== undefined ? ` - ${formatTime(row.end)}` : ''}${row.after ? ' \u2192' : ''}`;
+    return _jsxs("section", { ...props, "data-density": density, "data-hour-cycle": hourCycle, className: ['inkra-agenda', className].filter(Boolean).join(' '), "aria-labelledby": props['aria-labelledby'] ?? id, children: [_jsxs("header", { className: "inkra-agenda__heading", children: [_jsx(PencilText, { as: "h3", id: id, children: title }), timeZoneLabel && _jsx(PencilText, { children: timeZoneLabel })] }), _jsx(PencilLine, {}), ordered.length === 0 ? _jsx(PencilText, { as: "p", children: emptyLabel }) : _jsxs(_Fragment, { children: [_jsx("div", { className: "inkra-agenda__timeline", "data-overview": showOverview, children: _jsxs("div", { className: "inkra-agenda__scale", style: { height: scale.height + 24 }, children: [ticks.map(({ minute, label }) => _jsxs("div", { className: "inkra-agenda__tick", style: { top: scale.position(minute) + 12 }, children: [_jsx("span", { children: _jsx(PencilText, { children: label }) }), divided && _jsx(PencilLine, {})] }, minute)), _jsx("ol", { className: "inkra-agenda__lanes", children: visibleCards.map(row => {
+                                        const time = row.time;
                                         return _jsxs("li", { "data-kind": row.event.kind, style: { top: row.top + 14, height: Math.max(44, row.height - 4), insetInlineStart: `${row.lane / row.lanes * 100}%`, width: `${100 / row.lanes}%` }, children: [renderCard(row.event, time), _jsx("span", { className: "inkra-agenda__accessible-time", children: time })] }, row.id);
-                                    }) })] }) }), ordered.some(event => !agendaInterval(event)) && _jsxs("div", { className: "inkra-agenda__pending", children: [_jsx(PencilText, { children: untimedLabel }), ordered.filter(event => !agendaInterval(event)).map(event => _jsx("div", { children: renderCard(event, untimedLabel) }, event.id))] })] }), (onPreviousDay || onNextDay) && _jsxs("footer", { className: "inkra-agenda__navigation", children: [_jsx(PencilLine, {}), _jsx(Button, { variant: "ghost", size: "icon", "aria-label": navigationLabels.previous, title: navigationLabels.previous, disabled: !onPreviousDay, onClick: onPreviousDay, children: _jsx(TravelIcon, { name: "previous" }) }), _jsx(Button, { variant: "ghost", size: "icon", "aria-label": navigationLabels.next, title: navigationLabels.next, disabled: !onNextDay, onClick: onNextDay, children: _jsx(TravelIcon, { name: "next" }) })] })] });
+                                    }) })] }) }), visiblePending.length > 0 && _jsxs("div", { className: "inkra-agenda__pending", children: [_jsx(PencilText, { children: untimedLabel }), visiblePending.map(event => _jsx("div", { children: renderCard(event, untimedLabel) }, event.id))] }), ordered.length > displayLimit && _jsx(Button, { size: "sm", variant: "ghost", "aria-expanded": expanded, onClick: () => setExpandedDate(expanded ? undefined : date), children: expanded ? showFewerEventsLabel : showAllEventsLabel(ordered.length) })] }), (onPreviousDay || onNextDay) && _jsxs("footer", { className: "inkra-agenda__navigation", children: [_jsx(PencilLine, {}), _jsx(Button, { variant: "ghost", size: "icon", "aria-label": navigationLabels.previous, title: navigationLabels.previous, disabled: !onPreviousDay, onClick: onPreviousDay, children: _jsx(TravelIcon, { name: "previous" }) }), _jsx(Button, { variant: "ghost", size: "icon", "aria-label": navigationLabels.next, title: navigationLabels.next, disabled: !onNextDay, onClick: onNextDay, children: _jsx(TravelIcon, { name: "next" }) })] })] });
 }

package/dist/day-agenda/layout.js

@@ -1,16 +1,56 @@
+function heapPush(heap, value, less) {
+    let index = heap.length;
+    heap.push(value);
+    while (index > 0) {
+        const parent = (index - 1) >>> 1;
+        if (!less(value, heap[parent]))
+            break;
+        heap[index] = heap[parent];
+        index = parent;
+    }
+    heap[index] = value;
+}
+function heapPop(heap, less) {
+    const first = heap[0];
+    const last = heap.pop();
+    if (heap.length) {
+        let index = 0;
+        while (index * 2 + 1 < heap.length) {
+            let child = index * 2 + 1;
+            if (child + 1 < heap.length && less(heap[child + 1], heap[child]))
+                child++;
+            if (!less(heap[child], last))
+                break;
+            heap[index] = heap[child];
+            index = child;
+        }
+        heap[index] = last;
+    }
+    return first;
+}
+const lowerLane = (left, right) => left < right;
+const earlierEnd = (left, right) => left.end < right.end || (left.end === right.end && left.lane < right.lane);
 export function layoutAgendaIntervals(intervals) {
     const sorted = [...intervals].sort((a, b) => a.start - b.start || a.id.localeCompare(b.id));
     const result = [];
-    let group = [], groupEnd = -Infinity, laneEnds = [];
-    const flush = () => { for (const item of group)
-        result.push({ ...item, lanes: laneEnds.length }); group = []; laneEnds = []; };
+    let group = [], groupEnd = -Infinity, laneCount = 0;
+    let occupied = [], available = [];
+    const flush = () => {
+        for (const item of group)
+            result.push({ ...item, lanes: laneCount });
+        group = [];
+        occupied = [];
+        available = [];
+        laneCount = 0;
+    };
     for (const item of sorted) {
         if (item.start >= groupEnd)
             flush();
-        let lane = laneEnds.findIndex(end => end <= item.start);
-        if (lane < 0)
-            lane = laneEnds.length;
-        laneEnds[lane] = item.end;
+        while (occupied.length && occupied[0].end <= item.start) {
+            heapPush(available, heapPop(occupied, earlierEnd).lane, lowerLane);
+        }
+        const lane = available.length ? heapPop(available, lowerLane) : laneCount++;
+        heapPush(occupied, { end: item.end, lane }, earlierEnd);
         group.push({ ...item, lane });
         groupEnd = Math.max(groupEnd, item.end);
     }
@@ -23,6 +63,10 @@ export function createAgendaScale(intervals, pointTimes, compact) {
     const boundaries = [...new Set([0, 1440, ...pointTimes, ...intervals.flatMap(row => [row.start, row.end])])].sort((a, b) => a - b);
     const before = new Map(), after = new Map();
     const segments = [];
+    // Boundaries already contain every endpoint, so the furthest active end is
+    // enough to decide occupancy without rescanning every event for every segment.
+    const ordered = [...intervals].sort((a, b) => a.start - b.start);
+    let intervalIndex = 0, occupiedUntil = -Infinity;
     let height = 0;
     for (let index = 0; index < boundaries.length; index++) {
         const time = boundaries[index];
@@ -33,7 +77,11 @@ export function createAgendaScale(intervals, pointTimes, compact) {
         const next = boundaries[index + 1];
         if (next === undefined)
             continue;
-        const occupied = intervals.some(row => row.start < next && row.end > time);
+        while (intervalIndex < ordered.length && ordered[intervalIndex].start < next) {
+            occupiedUntil = Math.max(occupiedUntil, ordered[intervalIndex].end);
+            intervalIndex++;
+        }
+        const occupied = occupiedUntil > time;
         const size = Math.max(occupied ? rowHeight : 16, (next - time) / 60 * 32);
         segments.push({ start: time, end: next, top: height, size });
         height += size;
@@ -43,7 +91,15 @@ export function createAgendaScale(intervals, pointTimes, compact) {
         const exact = (edge === 'after' ? after : before).get(time);
         if (exact !== undefined)
             return exact;
-        const segment = segments.find(row => time >= row.start && time <= row.end);
+        let low = 0, high = segments.length - 1;
+        while (low <= high) {
+            const middle = (low + high) >>> 1;
+            if (segments[middle].start <= time)
+                low = middle + 1;
+            else
+                high = middle - 1;
+        }
+        const segment = high >= 0 && time <= segments[high].end ? segments[high] : undefined;
         return segment ? segment.top + (time - segment.start) / (segment.end - segment.start) * segment.size : 0;
     };
     return { position, height, rowHeight };

package/dist/display/ProgressRing.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useRef } from 'react';
-import { BoundedCache, PENCIL_RENDERER_VERSION, canvasByteCost, canvasIsUsable, effectiveDpr } from '../internal/cache.js';
+import { BoundedCache, PENCIL_RENDERER_VERSION, boundedCanvasSize, canvasByteCost, canvasIsUsable, effectiveDpr } from '../internal/cache.js';
 import { observeCanvasRecovery } from '../internal/recovery.js';
 import { seedToNumber } from '../internal/random.js';
 import { maxStrokeRoughness, pencilRenderDefaults, readRenderToken } from '../internal/renderTokens.js';
@@ -84,6 +84,7 @@ export function ProgressRing({ diameter, thickness, percent, seed }) {
                 const weight = readRenderToken(style, '--inkra-stroke-width', pencilRenderDefaults.strokeWidth, 0.3, 3);
                 const roughness = readRenderToken(style, '--inkra-stroke-amplitude', pencilRenderDefaults.strokeRoughness, 0, maxStrokeRoughness);
                 const dpr = effectiveDpr(2);
+                const size = boundedCanvasSize(width, width, dpr);
                 const key = JSON.stringify([PENCIL_RENDERER_VERSION, diameter, thickness, width, dpr, style.color, weight, roughness, seed]);
                 if (key === lastPaint && canvasIsUsable(canvas))
                     return;
@@ -94,7 +95,9 @@ export function ProgressRing({ diameter, thickness, percent, seed }) {
                 }
                 if (!image) {
                     image = document.createElement('canvas');
-                    image.width = image.height = Math.ceil(width * dpr);
+                    image.width = size.width;
+                    image.height = size.height;
+                    image.addEventListener('contextlost', () => ringCache.delete(key), { once: true });
                     const context = image.getContext('2d');
                     if (!context)
                         throw new Error('Canvas unavailable');
@@ -116,6 +119,7 @@ export function ProgressRing({ diameter, thickness, percent, seed }) {
                 lastPaint = key;
             }
             catch {
+                canvas.width = canvas.height = 0;
                 delete canvas.dataset.ready;
                 lastPaint = '';
             }
@@ -131,7 +135,7 @@ export function ProgressRing({ diameter, thickness, percent, seed }) {
         const scheme = matchMedia('(prefers-color-scheme: dark)');
         scheme.addEventListener('change', paint);
         window.addEventListener('resize', paint);
-        const stopRecovery = observeCanvasRecovery(paint);
+        const stopRecovery = observeCanvasRecovery(() => { lastPaint = ''; paint(); });
         paint();
         return () => {
             observer.disconnect();

package/dist/display/index.d.ts

@@ -1,4 +1,4 @@
-import type { HTMLAttributes, ReactNode } from 'react';
+import type { CSSProperties, HTMLAttributes, ReactNode } from 'react';
 import { type ProgressPartialSegment, type ProgressThreshold } from '../segmented-progress/SegmentedProgress.js';
 export type { ProgressPartialSegment, ProgressThreshold } from '../segmented-progress/SegmentedProgress.js';
 export type BadgeVariant = 'neutral' | 'accent' | 'success' | 'warning' | 'danger' | 'info';
@@ -22,6 +22,9 @@ export declare const Separator: import("react").ForwardRefExoticComponent<Separa
 export interface SkeletonProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
     seed?: string | number;
     radius?: number;
+    width?: CSSProperties['width'];
+    height?: CSSProperties['height'];
+    animation?: 'none' | 'pulse';
 }
 export declare const Skeleton: import("react").ForwardRefExoticComponent<SkeletonProps & import("react").RefAttributes<HTMLDivElement>>;
 export interface ProgressRenderState {

package/dist/display/index.js

@@ -30,8 +30,9 @@ export const Separator = forwardRef(function Separator({ className, decorative =
         : { 'aria-orientation': orientation, role: 'separator' };
     return (_jsx("div", { ...props, ...semanticProps, className: ['inkra-separator', className].filter(Boolean).join(' '), "data-orientation": orientation, ref: ref, children: _jsx(PencilLine, { className: "inkra-separator__line", orientation: orientation, seed: seed ?? `inkra-separator-${orientation}`, weight: Number.isFinite(weight) ? Math.max(0.3, Math.min(2, weight)) : 0.9 }) }));
 });
-export const Skeleton = forwardRef(function Skeleton({ className, seed = 'inkra-skeleton', radius, ...props }, ref) {
-    return (_jsx(PencilSurface, { ...props, "aria-hidden": "true", as: "div", className: ['inkra-skeleton', className].filter(Boolean).join(' '), ref: ref, seed: seed, radius: radius, variant: "quiet" }));
+export const Skeleton = forwardRef(function Skeleton({ className, seed = 'inkra-skeleton', radius = 7, width, height, animation = 'none', style, ...props }, ref) {
+    const resolvedRadius = Number.isFinite(radius) ? Math.max(0, Math.min(radius, 8)) : 7;
+    return (_jsx(PencilSurface, { ...props, "aria-hidden": "true", as: "div", className: ['inkra-skeleton', className].filter(Boolean).join(' '), "data-animation": animation, style: { width, height, borderRadius: resolvedRadius, ...style }, ref: ref, seed: seed, radius: resolvedRadius, variant: "selection" }));
 });
 function normalizeMax(max) {
     return typeof max === 'number' && Number.isFinite(max) && max > 0 ? max : 100;

package/dist/dockable-panel/index.js

@@ -43,7 +43,7 @@ export const DockablePanelWorkspace = forwardRef(function DockablePanelWorkspace
         return () => observer.disconnect();
     }, []);
     const activate = useCallback((id) => {
-        setOrder(current => promoteDockablePanel(current, id));
+        setOrder(current => current[current.length - 1] === id ? current : promoteDockablePanel(current, id));
         if (activeId === undefined)
             setUncontrolledActiveId(id);
         if (resolvedActiveId !== id)
@@ -51,7 +51,7 @@ export const DockablePanelWorkspace = forwardRef(function DockablePanelWorkspace
     }, [activeId, onActiveChange, resolvedActiveId]);
     useEffect(() => {
         if (activeId != null)
-            setOrder(current => promoteDockablePanel(current, activeId));
+            setOrder(current => current[current.length - 1] === activeId ? current : promoteDockablePanel(current, activeId));
     }, [activeId]);
     const register = useCallback((id) => {
         setOrder(current => current.includes(id) ? current : [...current, id]);
@@ -72,18 +72,18 @@ export const DockablePanelWorkspace = forwardRef(function DockablePanelWorkspace
         titleBarVisibility,
         width: size.width,
     }), [boundaryPadding, size.height, size.width, titleBarVisibility]);
+    const layers = useMemo(() => new Map(order.map((id, index) => [id, index])), [order]);
     const context = useMemo(() => ({
         activeId: resolvedActiveId,
         activate,
         bounds,
         commitDrag,
         layer(id) {
-            const index = order.indexOf(id);
-            return baseZIndex + (resolvedActiveId === id ? order.length : Math.max(0, index));
+            return baseZIndex + (resolvedActiveId === id ? order.length : (layers.get(id) ?? 0));
         },
         register,
         snapThreshold,
-    }), [activate, baseZIndex, bounds, commitDrag, order, register, resolvedActiveId, snapThreshold]);
+    }), [activate, baseZIndex, bounds, commitDrag, layers, order.length, register, resolvedActiveId, snapThreshold]);
     function handleDragEnd(event) {
         const id = String(event.active.id);
         dragCallbacks.current.get(id)?.({ x: event.delta.x, y: event.delta.y });