@inkra/react 0.3.0 → 0.5.0

package/dist/date-picker/index.js

@@ -1,6 +1,8 @@
-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 { useInkraLocale, resolveInkraLocale } from '../i18n/index.js';
+import { calendarLocales } from '../calendar/locales.js';
 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';
@@ -35,24 +37,19 @@ function initialForMode(mode, value) {
         return validDate(value) ? value : undefined;
     return isRange(value) ? value : undefined;
 }
-function defaultCopy(locale) {
-    const chinese = locale.toLowerCase().startsWith('zh');
+function defaultCopy(t) {
     return {
-        calendar: chinese ? '选择日期' : 'Choose date',
-        clear: chinese ? '清空日期' : 'Clear date',
-        next: chinese ? '下个月' : 'Next month',
-        open: chinese ? '打开日期选择器' : 'Open date picker',
-        placeholder: chinese ? '选择日期' : 'Choose a date',
-        previous: chinese ? '上个月' : 'Previous month',
-        rangePlaceholder: chinese ? '选择日期范围' : 'Choose a date range',
-        selected: chinese ? '已选择' : 'selected',
-        today: chinese ? '今天' : 'today',
+        calendar: t('datePicker.calendar'), clear: t('datePicker.clear'),
+        next: t('datePicker.next'), open: t('datePicker.open'),
+        placeholder: t('datePicker.placeholder'), previous: t('datePicker.previous'),
+        rangePlaceholder: t('datePicker.range'), selected: t('datePicker.selected'), today: t('datePicker.today'),
     };
 }
 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: localeProp, mode = 'single', name, onBlur, onFocus, onOpenChange, onValueChange, open, openButtonLabel, placeholder, rangeSeparator = ' – ', readOnly = false, required = false, size = 'md', style, value, } = allProps;
+    const { locale, t } = useInkraLocale(localeProp);
     const generatedId = useId();
     const field = useFieldContext();
     const triggerRef = useRef(null);
@@ -71,7 +68,7 @@ export const DatePicker = forwardRef(function DatePicker(allProps, forwardedRef)
         'aria-errormessage': ariaErrorMessage,
         'aria-invalid': ariaInvalid,
     });
-    const copy = defaultCopy(locale);
+    const copy = defaultCopy(t);
     const currentValue = initialForMode(mode, valueControlled ? value : uncontrolledValue);
     const currentOpen = openControlled ? Boolean(open) : uncontrolledOpen;
     const singleValue = validDate(currentValue) ? currentValue : undefined;
@@ -85,6 +82,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 +126,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,
     };
@@ -143,6 +141,7 @@ export const DatePicker = forwardRef(function DatePicker(allProps, forwardedRef)
         ...labels,
     };
     const sharedCalendarProps = {
+        locale: calendarLocales[resolveInkraLocale(locale)],
         ...restCalendarProps,
         appearance: 'picker',
         defaultMonth: defaultMonth ?? firstDate,
@@ -150,11 +149,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(inkraProps: DayAgendaProps): import("react").JSX.Element;

package/dist/day-agenda/index.js

@@ -1,19 +1,25 @@
 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 { useInkraLocale } from '../i18n/index.js';
 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 +30,46 @@ 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(inkraProps) {
+    const { locale, t } = useInkraLocale(inkraProps.locale);
+    const { date, events, selectedEvent, onEventSelect, locale: _locale, timeZoneLabel, emptyLabel = t('agenda.empty'), untimedLabel = t('agenda.pending'), showOverview = true, hourCycle = 'h23', density = 'comfortable', showDescriptions = true, divided = true, disabled = false, onPreviousDay, onNextDay, navigationLabels = { previous: t('agenda.previous'), next: t('agenda.next') }, maxVisibleEvents, showAllEventsLabel = count => t('agenda.all', { count }), showFewerEventsLabel = t('agenda.fewer'), className, ...props } = inkraProps;
     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

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useInkraLocale } from '../i18n/index.js';
 import { DndContext, MouseSensor, TouchSensor, useDraggable, useSensor, useSensors, } from '@dnd-kit/core';
 import { createContext, forwardRef, useCallback, useContext, useEffect, useId, useMemo, useRef, useState, } from 'react';
 import { Button } from '../Button.js';
@@ -43,7 +44,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 +52,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 +73,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 });
@@ -96,13 +97,13 @@ const resetPaths = [
     { d: 'M4 12a8 8 0 1 0 2.34-5.66L4 8.68' },
     { d: 'M4 4v4.68h4.68' },
 ];
-const defaultLabels = {
-    move: 'Move panel',
-    collapse: 'Collapse panel',
-    expand: 'Expand panel',
-    reset: 'Restore panel position',
-    keyboardInstructions: 'Use the arrow keys to move this panel. Hold Shift for larger steps. Press Home to restore its position.',
-};
+const defaultLabels = (t) => ({
+    move: t('dockable.move'),
+    collapse: t('dockable.collapse'),
+    expand: t('dockable.expand'),
+    reset: t('dockable.reset'),
+    keyboardInstructions: t('dockable.instructions'),
+});
 function renderTitle(title) {
     return typeof title === 'string' ? _jsx(PencilText, { children: title }) : title;
 }
@@ -110,6 +111,7 @@ function isInteractiveTarget(target) {
     return target instanceof Element && Boolean(target.closest('button, a, input, select, textarea, [contenteditable="true"], [data-dockable-panel-no-drag]'));
 }
 export const DockablePanel = forwardRef(function DockablePanel({ children, className, collapsed, collapsible = true, defaultCollapsed = false, defaultPosition = { x: 8, y: 8 }, headerActions, id, keyboardStep = 8, labels: labelOverrides, movable = true, onCollapsedChange, onFocusCapture, onPointerDown, onPositionChange, position, style, title, ...props }, forwardedRef) {
+    const { t } = useInkraLocale();
     const workspace = useContext(WorkspaceContext);
     if (!workspace)
         throw new Error('DockablePanel must be rendered inside DockablePanelWorkspace.');
@@ -125,7 +127,7 @@ export const DockablePanel = forwardRef(function DockablePanel({ children, class
     const resolvedCollapsed = collapsed ?? uncontrolledCollapsed;
     const positionRef = useRef(resolvedPosition);
     positionRef.current = resolvedPosition;
-    const labels = { ...defaultLabels, ...labelOverrides };
+    const labels = { ...defaultLabels(t), ...labelOverrides };
     const { activate, bounds, commitDrag, layer, register, snapThreshold, } = workspace;
     const { attributes, isDragging, listeners, setActivatorNodeRef, setNodeRef, transform } = useDraggable({
         id,

package/dist/drawer/index.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useInkraLocale } from '../i18n/index.js';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { forwardRef, useId } from 'react';
 import { __iconData as closeIcon } from 'lucide-react/dist/esm/icons/x.mjs';
@@ -40,7 +41,7 @@ export const DrawerContent = forwardRef(function DrawerContent({ children, class
     const themedProps = usePortalThemeProps({ ...props, style });
     const mergedStyle = { ...themedProps.style, '--inkra-drawer-size': drawerSize(size) };
     const edgeOrientation = direction === 'left' || direction === 'right' ? 'vertical' : 'horizontal';
-    return (_jsx(DialogPrimitive.Content, { ...themedProps, className: classes('inkra-drawer__content', className), "data-direction": direction, ref: ref, style: mergedStyle, children: _jsxs(PencilSurface, { className: "inkra-drawer__surface", radius: 0, seed: seed ?? `inkra-drawer-${id}`, variant: "full", children: [_jsx(PencilLine, { className: "inkra-drawer__edge", orientation: edgeOrientation, seed: `drawer-edge-${id}` }), _jsx("div", { className: "inkra-drawer__layout", children: children })] }) }));
+    return (_jsxs(DialogPrimitive.Content, { ...themedProps, className: classes('inkra-drawer__content', className), "data-direction": direction, ref: ref, style: mergedStyle, children: [_jsx(PencilSurface, { "aria-hidden": "true", className: "inkra-drawer__focus-ring", radius: 0, seed: `drawer-focus-${id}`, variant: "outline" }), _jsxs(PencilSurface, { className: "inkra-drawer__surface", radius: 0, seed: seed ?? `inkra-drawer-${id}`, variant: "full", children: [_jsx(PencilLine, { className: "inkra-drawer__edge", orientation: edgeOrientation, seed: `drawer-edge-${id}` }), _jsx("div", { className: "inkra-drawer__layout", children: children })] })] }));
 });
 export const DrawerTitle = forwardRef(function DrawerTitle({ children, className, seed, ...props }, ref) {
     const id = useId();
@@ -53,7 +54,9 @@ export const DrawerDescription = forwardRef(function DrawerDescription({ childre
 export const DrawerClose = forwardRef(function DrawerClose(props, ref) {
     return _jsx(DialogPrimitive.Close, { ...props, ref: ref });
 });
-export const DrawerCloseButton = forwardRef(function DrawerCloseButton({ className, label = 'Close', onFocus, ...props }, ref) {
+export const DrawerCloseButton = forwardRef(function DrawerCloseButton(inkraProps, ref) {
+    const { t } = useInkraLocale();
+    const { className, label = t('common.close'), onFocus, ...props } = inkraProps;
     return _jsx(Tooltip.Provider, { children: _jsxs(Tooltip.Root, { children: [_jsx(Tooltip.Trigger, { asChild: true, children: _jsx(DialogPrimitive.Close, { asChild: true, children: _jsx(Button, { ...props, "aria-label": label, className: classes('inkra-drawer__close-button', className), ref: ref, size: "icon", type: "button", variant: "outline", onFocus: event => {
                                 onFocus?.(event);
                                 const dialog = event.currentTarget.closest('[role="dialog"]');
@@ -61,9 +64,12 @@ export const DrawerCloseButton = forwardRef(function DrawerCloseButton({ classNa
                                     event.preventDefault();
                             }, children: _jsx(PencilIcon, { decorative: true, paths: closePaths, size: 30, sourceSize: 24 }) }) }) }), _jsx(Tooltip.Portal, { children: _jsx(Tooltip.Content, { align: "end", side: "bottom", children: label }) })] }) });
 });
-export const DrawerHeader = forwardRef(function DrawerHeader({ action, children, className, closeLabel = 'Close', divided = true, showClose = true, ...props }, ref) {
+export const DrawerHeader = forwardRef(function DrawerHeader(inkraProps, ref) {
+    const { t } = useInkraLocale();
+    const { action, children, className, closeLabel = t('common.close'), divided = true, showClose = true, ...props } = inkraProps;
     const id = useId();
-    return _jsxs("div", { ...props, className: classes('inkra-drawer__header', className), "data-divided": divided || undefined, ref: ref, children: [_jsx("div", { className: "inkra-drawer__heading", children: children }), (action || showClose) ? _jsxs("div", { className: "inkra-drawer__header-actions", children: [action, showClose ? _jsx(DrawerCloseButton, { label: closeLabel }) : null] }) : null, divided ? _jsx(PencilLine, { className: "inkra-drawer__divider", seed: `drawer-header-${id}` }) : null] });
+    const hasActions = Boolean(action || showClose);
+    return _jsxs("div", { ...props, className: classes('inkra-drawer__header', className), "data-actions": hasActions || undefined, "data-custom-action": action ? true : undefined, "data-divided": divided || undefined, ref: ref, children: [_jsx("div", { className: "inkra-drawer__heading", children: children }), hasActions ? _jsxs("div", { className: "inkra-drawer__header-actions", children: [action, showClose ? _jsx(DrawerCloseButton, { label: closeLabel }) : null] }) : null, divided ? _jsx(PencilLine, { className: "inkra-drawer__divider", seed: `drawer-header-${id}` }) : null] });
 });
 export const DrawerBody = forwardRef(function DrawerBody({ className, ...props }, ref) {
     return _jsx("div", { ...props, className: classes('inkra-drawer__body', className), ref: ref });
@@ -72,7 +78,7 @@ export const DrawerFooter = forwardRef(function DrawerFooter({ align = 'end', ch
     const id = useId();
     return _jsxs("div", { ...props, className: classes('inkra-drawer__footer', className), "data-align": align, "data-divided": divided || undefined, ref: ref, children: [divided ? _jsx(PencilLine, { className: "inkra-drawer__divider", seed: `drawer-footer-${id}` }) : null, children] });
 });
-export const Drawer = Object.freeze({
+export const Drawer = /* @__PURE__ */ Object.freeze({
     Root: DrawerRoot,
     Trigger: DrawerTrigger,
     Portal: DrawerPortal,

package/dist/editable/index.d.ts

@@ -1,7 +1,23 @@
-import type { HTMLAttributes, KeyboardEvent, ReactNode } from 'react';
+import type { FocusEvent, HTMLAttributes, KeyboardEvent, ReactNode } from 'react';
+import type { SearchableSelectOption } from '../select/index.js';
 import type { InputProps } from '../form/Input.js';
 import type { TextareaProps } from '../form/Textarea.js';
 export type EditableBlurBehavior = 'ignore' | 'save' | 'cancel';
+export type EditableEditorType = 'input' | 'textarea' | 'select';
+export interface EditableSelectProps {
+    items: readonly SearchableSelectOption[];
+    mode?: 'dropdown' | 'searchable' | 'stepper';
+    size?: 'sm' | 'md' | 'lg';
+    dir?: 'ltr' | 'rtl';
+    searchPlaceholder?: string;
+    emptyContent?: ReactNode;
+    clearable?: boolean;
+    clearLabel?: string;
+    openLabel?: string;
+    previousLabel?: string;
+    nextLabel?: string;
+    loop?: boolean;
+}
 export type EditableSaveResult = boolean | string | void | null | undefined;
 export type EditableSaveHandler = (value: string, previousValue: string) => EditableSaveResult | Promise<EditableSaveResult>;
 export type EditableValidateHandler = (value: string, previousValue: string) => EditableSaveResult | Promise<EditableSaveResult>;
@@ -9,12 +25,16 @@ export interface EditableEditorProps {
     value: string;
     onValueChange: (value: string) => void;
     onKeyDown: (event: KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
-    onBlur: () => void;
+    onBlur: (event: FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
     disabled?: boolean;
+    readOnly?: boolean;
     invalid?: boolean;
     error?: string;
     autoFocus?: boolean;
     'aria-label'?: string;
+    'aria-describedby'?: string;
+    'aria-errormessage'?: string;
+    'aria-invalid'?: boolean;
 }
 export type EditableEditor = ReactNode | ((props: EditableEditorProps) => ReactNode);
 export interface EditableProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'onChange'> {
@@ -29,6 +49,8 @@ export interface EditableProps extends Omit<HTMLAttributes<HTMLDivElement>, 'chi
     onCancel?: (value: string) => void;
     display?: ReactNode | ((value: string) => ReactNode);
     editor?: EditableEditor;
+    editorType?: EditableEditorType;
+    selectProps?: EditableSelectProps;
     multiline?: boolean;
     inputProps?: Omit<InputProps, 'value' | 'defaultValue' | 'onValueChange' | 'onChange'>;
     textareaProps?: Omit<TextareaProps, 'value' | 'defaultValue' | 'onChange'>;