@script-it/json-views-react 0.1.0-beta.1

package/dist/viewer-state.js

@@ -0,0 +1,79 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useRef, useState } from 'react';
+/** Bounded, instance-owned presentation state. Never shared across host viewers. */
+export class ViewStateCache {
+    onChange;
+    entries;
+    constructor(initial, onChange) {
+        this.onChange = onChange;
+        this.entries = new Map(Object.entries(initial ?? {}).slice(-30));
+    }
+    get(key) { return this.entries.get(key); }
+    set(key, value) {
+        this.entries.delete(key);
+        this.entries.set(key, value);
+        if (this.entries.size > 30)
+            this.entries.delete(this.entries.keys().next().value);
+        this.onChange?.();
+    }
+    delete(key) {
+        if (!this.entries.delete(key))
+            return;
+        this.onChange?.();
+    }
+    toRecord() { return Object.fromEntries(this.entries); }
+}
+function createViewerState(initial, onChange) {
+    let activeView = initial?.version === 1 ? initial.activeView : undefined;
+    const changed = () => onChange();
+    const state = {
+        get activeView() { return activeView; },
+        setActiveView(value) {
+            if (activeView === value)
+                return;
+            activeView = value;
+            changed();
+        },
+        queries: new ViewStateCache(initial?.version === 1 ? initial.queries : undefined, changed),
+        viewDrafts: new ViewStateCache(initial?.version === 1 ? initial.viewDrafts : undefined, changed),
+        navigation: new ViewStateCache(initial?.version === 1 ? initial.navigation : undefined, changed),
+        tables: new ViewStateCache(initial?.version === 1 ? initial.tables : undefined, changed),
+        general: new ViewStateCache(initial?.version === 1 ? initial.general : undefined, changed),
+        snapshot() {
+            const queries = state.queries.toRecord();
+            const viewDrafts = state.viewDrafts.toRecord();
+            const navigation = state.navigation.toRecord();
+            const tables = state.tables.toRecord();
+            const general = state.general.toRecord();
+            return {
+                version: 1,
+                ...(activeView ? { activeView } : {}),
+                ...(Object.keys(queries).length > 0 ? { queries } : {}),
+                ...(Object.keys(viewDrafts).length > 0 ? { viewDrafts } : {}),
+                ...(Object.keys(navigation).length > 0 ? { navigation } : {}),
+                ...(Object.keys(tables).length > 0 ? { tables } : {}),
+                ...(Object.keys(general).length > 0 ? { general } : {}),
+            };
+        },
+    };
+    return state;
+}
+const ViewerStateContext = createContext(undefined);
+export function ViewerStateProvider({ children, initialState, onChange, }) {
+    const changeHandler = useRef(onChange);
+    changeHandler.current = onChange;
+    const stateRef = useRef(undefined);
+    if (!stateRef.current) {
+        stateRef.current = createViewerState(initialState, () => {
+            const state = stateRef.current;
+            if (state)
+                changeHandler.current?.(state.snapshot());
+        });
+    }
+    return _jsx(ViewerStateContext.Provider, { value: stateRef.current, children: children });
+}
+export function useViewerState() {
+    const provided = useContext(ViewerStateContext);
+    const [local] = useState(() => createViewerState(undefined, () => undefined));
+    return provided ?? local;
+}

package/dist/widget-registry.d.ts

@@ -0,0 +1,60 @@
+import { type ComponentType, type ReactNode } from 'react';
+import { type JsonViewSchemaDescriptor, type JsonViewTypeRegistry } from '@script-it/json-views-core';
+export interface JsonViewEditWidgetProps {
+    descriptor: JsonViewSchemaDescriptor;
+    disabled: boolean;
+    error?: string;
+    label: string;
+    value: unknown;
+    stringValue: string;
+    onChange: (value: unknown) => void;
+    onClear?: () => void;
+    onCommit: (value?: unknown) => void;
+    onCancel: () => void;
+    /** Keeps a multiline editor at least as tall as the value it replaced. */
+    minHeight?: number;
+    /** Persists a built-in choice color in the matching annotation descriptor. */
+    onOptionColorChange?: (optionValue: string, color: string) => void | Promise<void>;
+}
+export type JsonViewEditWidget = ComponentType<JsonViewEditWidgetProps>;
+export interface JsonViewDisplayWidgetProps {
+    compact: boolean;
+    descriptor: JsonViewSchemaDescriptor;
+    onOpen: () => void;
+    renderMarkdown?: (content: string) => ReactNode;
+    value: unknown;
+}
+export type JsonViewDisplayWidget = ComponentType<JsonViewDisplayWidgetProps>;
+export interface JsonViewWidgetDefinition {
+    editor: JsonViewEditWidget;
+    display?: JsonViewDisplayWidget;
+    /** Optional single-action editor; returns an editor-model candidate. */
+    quickEdit?: (value: unknown) => unknown;
+}
+export type JsonViewWidgetRegistration = JsonViewEditWidget | JsonViewWidgetDefinition;
+export declare class JsonViewWidgetRegistry {
+    private readonly widgets;
+    private readonly listeners;
+    private revision;
+    get version(): number;
+    readonly subscribe: (listener: () => void) => (() => void);
+    private changed;
+    constructor(widgets?: readonly [string, JsonViewWidgetRegistration][]);
+    register(type: string, widget: JsonViewWidgetRegistration): this;
+    unregister(type: string): this;
+    get(type: string): JsonViewEditWidget | undefined;
+    getDefinition(type: string): JsonViewWidgetDefinition | undefined;
+    getDisplay(type: string): JsonViewDisplayWidget | undefined;
+    clone(): JsonViewWidgetRegistry;
+}
+export declare function createDefaultWidgetRegistry(): JsonViewWidgetRegistry;
+export interface JsonViewsRegistryValue {
+    types: JsonViewTypeRegistry;
+    widgets: JsonViewWidgetRegistry;
+}
+export declare function JsonViewsProvider({ children, types, widgets, }: {
+    children: ReactNode;
+    types?: JsonViewTypeRegistry;
+    widgets?: JsonViewWidgetRegistry;
+}): import("react").JSX.Element;
+export declare function useJsonViewsRegistries(): JsonViewsRegistryValue;

package/dist/widget-registry.js

@@ -0,0 +1,126 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useState, useSyncExternalStore } from 'react';
+import { createDefaultTypeRegistry, } from '@script-it/json-views-core';
+import { BooleanWidget } from './widgets/boolean-widget.js';
+import { DateValueDisplay, DateValueEditor } from './widgets/date-picker-widget.js';
+import { DropdownWidget } from './widgets/dropdown-widget.js';
+import { MultiSelectWidget } from './widgets/multi-select-widget.js';
+import { NumberWidget } from './widgets/number-widget.js';
+import { TextareaWidget } from './widgets/textarea-widget.js';
+import { TextWidget } from './widgets/text-widget.js';
+function common(props) {
+    return {
+        value: props.stringValue,
+        onChange: props.onChange,
+        onBlur: () => props.onCommit(),
+        disabled: props.disabled,
+        ariaLabel: `Edit ${props.label}`,
+        invalid: Boolean(props.error),
+        minHeight: props.minHeight,
+        surface: 'inline',
+    };
+}
+const TextEditWidget = (props) => {
+    const Control = props.descriptor.multiline === true ? TextareaWidget : TextWidget;
+    return (_jsx(Control, { ...common(props), uiHint: {
+            type: 'text',
+            placeholder: typeof props.descriptor.placeholder === 'string' ? props.descriptor.placeholder : undefined,
+            multiline: props.descriptor.multiline === true,
+        } }));
+};
+const NumberEditWidget = (props) => (_jsx(NumberWidget, { ...common(props), metadata: { type: 'float' }, uiHint: {
+        type: 'number',
+        min: typeof props.descriptor.minimum === 'number' ? props.descriptor.minimum : undefined,
+        max: typeof props.descriptor.maximum === 'number' ? props.descriptor.maximum : undefined,
+        step: props.descriptor.step,
+    } }));
+const CheckboxEditWidget = (props) => (_jsx(BooleanWidget, { ...common(props), onDirectSave: (value) => {
+        props.onChange(value);
+        props.onCommit(value);
+    } }));
+const SelectEditWidget = (props) => (_jsx(DropdownWidget, { ...common(props), onChange: (value) => {
+        props.onChange(value);
+        props.onCommit(value);
+    }, onBlur: () => undefined, onDismiss: props.onCancel, options: (props.descriptor.options ?? []).map((value) => ({ value, label: value, color: props.descriptor.optionColors?.[value] })), profile: "pill-cell", creatable: true, openOnMount: true, emptyOptionLabel: props.descriptor.required ? undefined : 'None', onOptionColorChange: props.onOptionColorChange }));
+const MultiSelectEditWidget = (props) => (_jsx(MultiSelectWidget, { ...common(props), value: JSON.stringify(Array.isArray(props.value) ? props.value : []), options: (props.descriptor.options ?? []).map((value) => ({ value, label: value, color: props.descriptor.optionColors?.[value] })), profile: "pill-cell", creatable: true, openOnMount: true, onDirectSave: (value) => {
+        props.onChange(value);
+        props.onCommit(value);
+    }, onBlur: () => undefined, onDismiss: props.onCancel, onOptionColorChange: props.onOptionColorChange }));
+const DateEditWidget = (props) => (_jsx(DateValueEditor, { descriptor: props.descriptor, disabled: props.disabled, error: props.error, label: props.label, value: props.value, onCancel: props.onCancel, onClear: props.onClear, onCommit: props.onCommit }));
+const DateDisplayWidget = ({ compact, value }) => (_jsx(DateValueDisplay, { compact: compact, value: value }));
+const LinkedTextEditWidget = (props) => (_jsx("input", { autoFocus: true, "aria-label": `Edit ${props.label}`, "aria-invalid": Boolean(props.error) || undefined, type: props.descriptor.type === 'email' ? 'email' : 'url', value: props.stringValue, disabled: props.disabled, className: "h-7 w-full min-w-0 rounded-sm border border-transparent bg-transparent px-1 py-0 text-xs text-foreground outline-none hover:bg-accent/40 focus:ring-1 focus:ring-inset focus:ring-ring disabled:opacity-60", onChange: (event) => props.onChange(event.target.value), onBlur: () => props.onCommit() }));
+const MarkdownEditWidget = (props) => (_jsx(TextareaWidget, { ...common(props), autoSize: true, metadata: { type: 'string' }, uiHint: { type: 'text', multiline: true, placeholder: typeof props.descriptor.placeholder === 'string' ? props.descriptor.placeholder : undefined } }));
+export class JsonViewWidgetRegistry {
+    widgets = new Map();
+    listeners = new Set();
+    revision = 0;
+    get version() { return this.revision; }
+    subscribe = (listener) => {
+        this.listeners.add(listener);
+        return () => { this.listeners.delete(listener); };
+    };
+    changed() {
+        this.revision += 1;
+        this.listeners.forEach((listener) => listener());
+    }
+    constructor(widgets = []) {
+        widgets.forEach(([type, widget]) => this.register(type, widget));
+    }
+    register(type, widget) {
+        if (!type.trim())
+            throw new TypeError('A widget type must have a name');
+        // memo/forwardRef components are React component objects at runtime.
+        const registration = typeof widget === 'object' && widget !== null && 'editor' in widget
+            ? widget : { editor: widget };
+        this.widgets.set(type, Object.freeze({ display: this.widgets.get(type)?.display, ...registration }));
+        this.changed();
+        return this;
+    }
+    unregister(type) {
+        if (this.widgets.delete(type))
+            this.changed();
+        return this;
+    }
+    get(type) {
+        return this.widgets.get(type)?.editor;
+    }
+    getDefinition(type) {
+        return this.widgets.get(type);
+    }
+    getDisplay(type) {
+        return this.widgets.get(type)?.display;
+    }
+    clone() {
+        return new JsonViewWidgetRegistry([...this.widgets.entries()]);
+    }
+}
+export function createDefaultWidgetRegistry() {
+    return new JsonViewWidgetRegistry([
+        ['text', TextEditWidget],
+        ['number', NumberEditWidget],
+        ['checkbox', { editor: CheckboxEditWidget, quickEdit: (value) => value !== true }],
+        ['select', SelectEditWidget],
+        ['multi-select', MultiSelectEditWidget],
+        ['date', { editor: DateEditWidget, display: DateDisplayWidget }],
+        ['url', LinkedTextEditWidget],
+        ['email', LinkedTextEditWidget],
+        ['markdown', MarkdownEditWidget],
+        ['html', MarkdownEditWidget],
+        ['body', MarkdownEditWidget],
+    ]);
+}
+const defaultRegistries = {
+    types: createDefaultTypeRegistry(),
+    widgets: createDefaultWidgetRegistry(),
+};
+const JsonViewsRegistryContext = createContext(defaultRegistries);
+export function JsonViewsProvider({ children, types, widgets, }) {
+    const [defaults] = useState(() => ({ types: createDefaultTypeRegistry(), widgets: createDefaultWidgetRegistry() }));
+    return (_jsx(JsonViewsRegistryContext.Provider, { value: { types: types ?? defaults.types, widgets: widgets ?? defaults.widgets }, children: children }));
+}
+export function useJsonViewsRegistries() {
+    const registries = useContext(JsonViewsRegistryContext);
+    useSyncExternalStore(registries.types.subscribe, () => registries.types.version, () => registries.types.version);
+    useSyncExternalStore(registries.widgets.subscribe, () => registries.widgets.version, () => registries.widgets.version);
+    return registries;
+}

package/dist/widgets/boolean-widget.d.ts

@@ -0,0 +1,2 @@
+import type { DirectSaveWidgetProps } from './types.js';
+export declare function BooleanWidget({ value, onChange, onDirectSave, ariaLabel, ariaDescribedBy, invalid, readOnly, disabled, }: DirectSaveWidgetProps): import("react").JSX.Element;

package/dist/widgets/boolean-widget.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { BooleanToggle } from '../primitives/boolean-toggle.js';
+import { ReadOnlyChip } from './read-only-field.js';
+import { cn } from '../lib/cn.js';
+export function BooleanWidget({ value, onChange, onDirectSave, ariaLabel, ariaDescribedBy, invalid = false, readOnly = false, disabled = false, }) {
+    const boolValue = value.toLowerCase() === 'true';
+    if (readOnly) {
+        return (_jsxs("div", { className: "flex items-center gap-2", "aria-readonly": "true", children: [_jsx(ReadOnlyChip, { emphasis: boolValue, children: "True" }), _jsx(ReadOnlyChip, { emphasis: !boolValue, children: "False" })] }));
+    }
+    const handleChange = (next) => {
+        onChange(String(next));
+        onDirectSave(next);
+    };
+    return _jsx(BooleanToggle, { "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, "aria-invalid": invalid || undefined, value: boolValue, onChange: handleChange, disabled: disabled, className: cn(invalid && '[&_button]:border-destructive') });
+}

package/dist/widgets/date-picker-widget.d.ts

@@ -0,0 +1,18 @@
+import { type DateTypeDescriptor } from '@script-it/json-views-core';
+interface DateValueDisplayProps {
+    compact?: boolean;
+    value: unknown;
+}
+interface DateValueEditorProps {
+    descriptor: DateTypeDescriptor;
+    disabled: boolean;
+    error?: string;
+    label: string;
+    value: unknown;
+    onCancel: () => void;
+    onClear?: () => void;
+    onCommit: (value?: unknown) => void;
+}
+export declare function DateValueDisplay({ compact, value }: DateValueDisplayProps): import("react").JSX.Element;
+export declare function DateValueEditor({ descriptor, disabled, error, label, value, onCancel, onClear, onCommit, }: DateValueEditorProps): import("react").JSX.Element;
+export type { DateValueDisplayProps, DateValueEditorProps };

package/dist/widgets/date-picker-widget.js

@@ -0,0 +1,265 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useMemo, useRef, useState } from 'react';
+import { AlertTriangle, ChevronLeft, ChevronRight } from 'lucide-react';
+import { convertDateTimeToOffset, formatFixedOffset, localOffsetForDate, parseDateValue, serializeDateEditorValue, validateDateValue, } from '@script-it/json-views-core';
+import { cn } from '../lib/cn.js';
+import { MenuSelect } from '../primitives/menu-select.js';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger, } from '../primitives/dropdown-menu.js';
+function pad(value, size = 2) {
+    return String(value).padStart(size, '0');
+}
+function calendarDate(year, month, day) {
+    return `${pad(year, 4)}-${pad(month)}-${pad(day)}`;
+}
+function localToday() {
+    const today = new Date();
+    return calendarDate(today.getFullYear(), today.getMonth() + 1, today.getDate());
+}
+function calendarDays(year, month) {
+    const first = new Date(Date.UTC(year, month - 1, 1));
+    const mondayOffset = (first.getUTCDay() + 6) % 7;
+    return Array.from({ length: 42 }, (_, index) => {
+        const current = new Date(Date.UTC(year, month - 1, index - mondayOffset + 1));
+        return {
+            date: calendarDate(current.getUTCFullYear(), current.getUTCMonth() + 1, current.getUTCDate()),
+            day: current.getUTCDate(),
+            inMonth: current.getUTCMonth() === month - 1,
+        };
+    });
+}
+function dateParts(value) {
+    const [year, month, day] = value.split('-').map(Number);
+    return { year, month, day };
+}
+function shiftDate(value, days) {
+    const parts = dateParts(value);
+    const shifted = new Date(Date.UTC(parts.year, parts.month - 1, parts.day + days));
+    return calendarDate(shifted.getUTCFullYear(), shifted.getUTCMonth() + 1, shifted.getUTCDate());
+}
+function shiftMonth(value, months) {
+    const parts = dateParts(value);
+    const shifted = new Date(Date.UTC(parts.year, parts.month - 1 + months, 1));
+    return calendarDate(shifted.getUTCFullYear(), shifted.getUTCMonth() + 1, 1);
+}
+function offsetLabel(timezone, padded = false) {
+    if (timezone === 'Z')
+        return 'UTC';
+    if (!padded) {
+        const match = /^([+-])0?(\d{1,2}):(\d{2})$/.exec(timezone);
+        if (match)
+            return `GMT${match[1]}${Number(match[2])}${match[3] === '00' ? '' : `:${match[3]}`}`;
+    }
+    return `GMT${timezone}`;
+}
+function wallClockDate(parsed) {
+    if (parsed.year === undefined || parsed.month === undefined || parsed.day === undefined)
+        return undefined;
+    return new Date(Date.UTC(parsed.year, parsed.month - 1, parsed.day, parsed.hour ?? 12, parsed.minute ?? 0, parsed.second ?? 0));
+}
+export function DateValueDisplay({ compact = false, value }) {
+    const parsed = parseDateValue(value);
+    if (parsed.kind === 'empty')
+        return _jsx("span", { className: "italic text-muted-foreground", children: "\u2014" });
+    if (parsed.kind === 'invalid')
+        return _jsx("span", { className: "break-words", children: String(value) });
+    const wall = wallClockDate(parsed);
+    if (!wall)
+        return _jsx("span", { children: String(value) });
+    const date = new Intl.DateTimeFormat(undefined, {
+        day: 'numeric',
+        month: 'short',
+        ...(compact && parsed.year === new Date().getFullYear() ? {} : { year: 'numeric' }),
+        timeZone: 'UTC',
+    }).format(wall);
+    if (parsed.kind === 'date')
+        return _jsx("span", { title: String(value), children: date });
+    const time = new Intl.DateTimeFormat(undefined, {
+        hour: 'numeric',
+        minute: '2-digit',
+        timeZone: 'UTC',
+    }).format(wall);
+    const timezone = parsed.kind === 'datetime' ? ` ${offsetLabel(parsed.timezone ?? 'Z')}` : '';
+    return _jsxs("span", { title: String(value), children: [date, " \u00B7 ", time, timezone] });
+}
+function timezoneChoices(original, local) {
+    const choices = new Map();
+    if (original)
+        choices.set(original, `Original · ${offsetLabel(original, true)}`);
+    if (!choices.has(local))
+        choices.set(local, `Local · ${offsetLabel(local, true)}`);
+    choices.set('Z', 'UTC');
+    for (let offset = -14 * 60; offset <= 14 * 60; offset += 15) {
+        const value = formatFixedOffset(offset);
+        if (!choices.has(value))
+            choices.set(value, offsetLabel(value, true));
+    }
+    return [...choices].map(([value, label]) => ({ value, label }));
+}
+export function DateValueEditor({ descriptor, disabled, error, label, value, onCancel, onClear, onCommit, }) {
+    const editorId = useId();
+    const popoverRef = useRef(null);
+    const parsed = useMemo(() => parseDateValue(value), [value]);
+    const today = useMemo(localToday, []);
+    const initialDate = parsed.calendarDate ?? '';
+    const initialMonth = dateParts(initialDate || today);
+    const [open, setOpen] = useState(true);
+    const [selectedDate, setSelectedDate] = useState(initialDate);
+    const [focusDate, setFocusDate] = useState(initialDate || today);
+    const [month, setMonth] = useState({ year: initialMonth.year, month: initialMonth.month });
+    const existingHasTime = parsed.kind === 'datetime' || parsed.kind === 'floating-datetime';
+    const [includeTime, setIncludeTime] = useState(existingHasTime || (parsed.kind === 'empty' && descriptor.defaultIncludeTime === true));
+    const [time, setTime] = useState(existingHasTime ? `${pad(parsed.hour ?? 0)}:${pad(parsed.minute ?? 0)}` : '');
+    const [seconds, setSeconds] = useState(existingHasTime ? parsed.second ?? 0 : 0);
+    const [fractionalSeconds, setFractionalSeconds] = useState(existingHasTime ? parsed.fractionalSeconds ?? '' : '');
+    const defaultTimezone = localOffsetForDate(initialDate || today, time || '12:00');
+    const [timezone, setTimezone] = useState(parsed.kind === 'datetime' ? parsed.timezone ?? defaultTimezone : '');
+    const [attemptedSave, setAttemptedSave] = useState(false);
+    const completed = useRef(false);
+    const days = useMemo(() => calendarDays(month.year, month.month), [month]);
+    const localTimezone = localOffsetForDate(selectedDate || today, time || '12:00');
+    const timezoneOptions = useMemo(() => timezoneChoices(parsed.kind === 'datetime' ? parsed.timezone : undefined, localTimezone), [localTimezone, parsed.kind, parsed.timezone]);
+    const serialized = useMemo(() => {
+        if (!selectedDate)
+            return { value: undefined, error: 'Select a date' };
+        try {
+            const next = serializeDateEditorValue({
+                date: selectedDate,
+                includeTime,
+                time,
+                seconds,
+                fractionalSeconds,
+                timezone,
+            });
+            return { value: next, error: validateDateValue(next, descriptor) };
+        }
+        catch (serializeError) {
+            return { value: undefined, error: serializeError instanceof Error ? serializeError.message : 'Enter a valid date' };
+        }
+    }, [descriptor, fractionalSeconds, includeTime, seconds, selectedDate, time, timezone]);
+    const monthLabel = new Intl.DateTimeFormat(undefined, { month: 'long', year: 'numeric', timeZone: 'UTC' })
+        .format(new Date(Date.UTC(month.year, month.month - 1, 1)));
+    const weekdays = useMemo(() => Array.from({ length: 7 }, (_, index) => (new Intl.DateTimeFormat(undefined, { weekday: 'short', timeZone: 'UTC' })
+        .format(new Date(Date.UTC(2024, 0, index + 1))))), []);
+    useEffect(() => {
+        if (!open)
+            return;
+        const timer = window.setTimeout(() => {
+            popoverRef.current?.querySelector(`[data-date="${focusDate}"]`)?.focus();
+        });
+        return () => window.clearTimeout(timer);
+    }, [focusDate, open]);
+    const cancel = () => {
+        completed.current = true;
+        setOpen(false);
+        onCancel();
+    };
+    const save = () => {
+        setAttemptedSave(true);
+        if (!serialized.value || serialized.error || disabled)
+            return;
+        completed.current = true;
+        onCommit(serialized.value);
+    };
+    const clear = () => {
+        if (descriptor.required || disabled)
+            return;
+        completed.current = true;
+        if (onClear)
+            onClear();
+        else
+            onCommit(null);
+    };
+    const chooseDate = (date) => {
+        const parts = dateParts(date);
+        setSelectedDate(date);
+        setFocusDate(date);
+        setMonth({ year: parts.year, month: parts.month });
+    };
+    const moveFocus = (next) => {
+        const parts = dateParts(next);
+        setFocusDate(next);
+        setMonth({ year: parts.year, month: parts.month });
+    };
+    const onCalendarKeyDown = (event) => {
+        const target = event.target instanceof HTMLElement ? event.target.closest('[data-date]') : null;
+        const current = target?.dataset.date;
+        if (!current)
+            return;
+        const weekday = (new Date(`${current}T00:00:00Z`).getUTCDay() + 6) % 7;
+        let next;
+        if (event.key === 'ArrowLeft')
+            next = shiftDate(current, -1);
+        else if (event.key === 'ArrowRight')
+            next = shiftDate(current, 1);
+        else if (event.key === 'ArrowUp')
+            next = shiftDate(current, -7);
+        else if (event.key === 'ArrowDown')
+            next = shiftDate(current, 7);
+        else if (event.key === 'Home')
+            next = shiftDate(current, -weekday);
+        else if (event.key === 'End')
+            next = shiftDate(current, 6 - weekday);
+        else if (event.key === 'PageUp')
+            next = shiftMonth(current, -1);
+        else if (event.key === 'PageDown')
+            next = shiftMonth(current, 1);
+        if (!next)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        moveFocus(next);
+    };
+    const changeTimezone = (nextTimezone) => {
+        if (includeTime && selectedDate && time && timezone && nextTimezone) {
+            try {
+                const current = serializeDateEditorValue({ date: selectedDate, includeTime: true, time, seconds, fractionalSeconds, timezone });
+                const converted = parseDateValue(convertDateTimeToOffset(current, nextTimezone));
+                if (converted.kind === 'datetime') {
+                    setSelectedDate(converted.calendarDate ?? selectedDate);
+                    setTime(`${pad(converted.hour ?? 0)}:${pad(converted.minute ?? 0)}`);
+                    setSeconds(converted.second ?? 0);
+                    setFractionalSeconds(converted.fractionalSeconds ?? '');
+                    if (converted.year && converted.month)
+                        setMonth({ year: converted.year, month: converted.month });
+                }
+            }
+            catch {
+                // An incomplete draft has no instant yet; choosing a timezone simply
+                // establishes the offset that will be used when it becomes complete.
+            }
+        }
+        setTimezone(nextTimezone);
+    };
+    const visibleError = error ?? (attemptedSave || (selectedDate && serialized.error?.startsWith('Date must')) ? serialized.error : undefined);
+    return (_jsxs(DropdownMenu, { open: open, onOpenChange: (nextOpen) => {
+            setOpen(nextOpen);
+            if (!nextOpen && !completed.current)
+                onCancel();
+        }, children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx("button", { type: "button", "data-id": "date-editor-trigger", "aria-label": `Edit ${label}`, className: "flex min-h-7 w-full items-center rounded-sm px-1 text-left text-xs outline-none ring-1 ring-inset ring-ring", children: selectedDate || descriptor.placeholder || 'Select a date' }) }), _jsxs(DropdownMenuContent, { ref: popoverRef, "data-id": "date-editor-popover", align: "start", sideOffset: 6, onOpenAutoFocus: (event) => event.preventDefault(), className: "w-[min(21rem,calc(100vw-1.5rem))] p-3 text-foreground", onKeyDown: (event) => {
+                    if (event.key === 'Escape') {
+                        event.preventDefault();
+                        event.stopPropagation();
+                        cancel();
+                    }
+                }, children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsx("strong", { className: "text-sm font-medium", children: monthLabel }), _jsxs("div", { className: "flex gap-1", children: [_jsx("button", { type: "button", "aria-label": "Previous month", className: "grid h-8 w-8 place-items-center rounded-md hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", onClick: () => {
+                                            const next = shiftMonth(calendarDate(month.year, month.month, 1), -1);
+                                            const parts = dateParts(next);
+                                            setMonth({ year: parts.year, month: parts.month });
+                                            setFocusDate(next);
+                                        }, children: _jsx(ChevronLeft, { className: "h-4 w-4" }) }), _jsx("button", { type: "button", "aria-label": "Next month", className: "grid h-8 w-8 place-items-center rounded-md hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", onClick: () => {
+                                            const next = shiftMonth(calendarDate(month.year, month.month, 1), 1);
+                                            const parts = dateParts(next);
+                                            setMonth({ year: parts.year, month: parts.month });
+                                            setFocusDate(next);
+                                        }, children: _jsx(ChevronRight, { className: "h-4 w-4" }) })] })] }), _jsxs("div", { role: "grid", "aria-label": `${monthLabel} calendar`, className: "mt-2 grid grid-cols-7 gap-0.5", onKeyDown: onCalendarKeyDown, children: [_jsx("div", { role: "row", className: "contents", children: weekdays.map((weekday) => _jsx("div", { role: "columnheader", className: "py-1 text-center text-[0.6875rem] font-medium text-muted-foreground", children: weekday }, weekday)) }), Array.from({ length: 6 }, (_, row) => (_jsx("div", { role: "row", className: "contents", children: days.slice(row * 7, row * 7 + 7).map((item) => {
+                                    const selected = item.date === selectedDate;
+                                    const current = item.date === today;
+                                    const readable = new Intl.DateTimeFormat(undefined, { dateStyle: 'full', timeZone: 'UTC' })
+                                        .format(new Date(`${item.date}T00:00:00Z`));
+                                    return (_jsx("div", { role: "gridcell", "aria-selected": selected, className: "grid place-items-center", children: _jsx("button", { type: "button", "data-date": item.date, "aria-label": `Choose ${readable}`, "aria-current": current ? 'date' : undefined, tabIndex: item.date === focusDate ? 0 : -1, className: cn('grid h-8 w-8 place-items-center rounded-md text-xs outline-none focus-visible:ring-2 focus-visible:ring-ring', item.inMonth ? 'text-foreground' : 'text-muted-foreground/55', selected ? 'bg-primary font-semibold text-primary-foreground' : 'hover:bg-accent', current && !selected && 'ring-1 ring-inset ring-ring'), onClick: () => chooseDate(item.date), children: item.day }) }, item.date));
+                                }) }, row)))] }), _jsxs("div", { className: "mt-3 border-t border-border pt-3", children: [_jsxs("label", { className: "flex min-h-8 items-center gap-2 text-xs font-medium", children: [_jsx("input", { type: "checkbox", "aria-label": "Include time", checked: includeTime, disabled: disabled, className: "h-4 w-4 accent-primary", onChange: (event) => setIncludeTime(event.target.checked) }), "Include time"] }), includeTime && (_jsxs("div", { className: "mt-2 grid grid-cols-[5rem_minmax(0,1fr)] items-center gap-2 text-xs", children: [_jsx("label", { htmlFor: `${editorId}-time`, className: "text-muted-foreground", children: "Time" }), _jsx("input", { id: `${editorId}-time`, type: "time", "aria-label": "Time", value: time, disabled: disabled, className: "h-8 rounded-md border border-border bg-background px-2 outline-none focus-visible:ring-2 focus-visible:ring-ring", onInput: (event) => {
+                                            setTime(event.currentTarget.value);
+                                            setSeconds(0);
+                                            setFractionalSeconds('');
+                                        } }), _jsx("span", { className: "text-muted-foreground", children: "Timezone" }), _jsx(MenuSelect, { ariaLabel: "Timezone", disabled: disabled, className: "min-w-0", emptyOptionLabel: "No timezone \u00B7 floating time", options: timezoneOptions, value: timezone, onChange: changeTimezone })] })), !includeTime && existingHasTime && (_jsxs("p", { className: "mt-2 flex items-start gap-1.5 text-[0.6875rem] text-amber-700 dark:text-amber-300", children: [_jsx(AlertTriangle, { className: "mt-0.5 h-3 w-3 shrink-0" }), " Saving will remove the stored time."] })), visibleError && _jsx("p", { role: "alert", className: "mt-2 text-[0.6875rem] text-destructive", children: visibleError })] }), _jsxs("footer", { className: "mt-3 flex items-center gap-1 border-t border-border pt-2", children: [_jsx("button", { type: "button", "data-id": "date-editor-clear", disabled: descriptor.required || disabled, className: "h-8 rounded-md px-2 text-xs text-muted-foreground hover:bg-accent hover:text-foreground disabled:opacity-40", onClick: clear, children: "Clear" }), _jsx("span", { className: "flex-1" }), _jsx("button", { type: "button", "data-id": "date-editor-cancel", className: "h-8 rounded-md px-3 text-xs text-muted-foreground hover:bg-accent hover:text-foreground", onClick: cancel, children: "Cancel" }), _jsx("button", { type: "button", "data-id": "date-editor-save", disabled: disabled || !serialized.value || Boolean(serialized.error), className: "h-8 rounded-md bg-primary px-3 text-xs font-medium text-primary-foreground hover:bg-primary/90 disabled:opacity-40", onClick: save, children: "Save" })] })] })] }));
+}

package/dist/widgets/dropdown-widget.d.ts

@@ -0,0 +1,10 @@
+import { type ChoiceControlProfile } from '../primitives/choice-control.js';
+import type { WidgetProps } from './types.js';
+export interface DropdownWidgetProps extends WidgetProps {
+    profile?: Extract<ChoiceControlProfile, 'pill' | 'pill-cell'>;
+    creatable?: boolean;
+    openOnMount?: boolean;
+    onDismiss?: () => void;
+    onOptionColorChange?: (optionValue: string, color: string) => void;
+}
+export declare function DropdownWidget({ value, onChange, onBlur, ariaLabel, ariaDescribedBy, invalid, options: optionOverrides, emptyOptionLabel, profile, creatable, openOnMount, onDismiss, onOptionColorChange, readOnly, disabled, uiHint, }: DropdownWidgetProps): import("react").JSX.Element;

package/dist/widgets/dropdown-widget.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDown } from 'lucide-react';
+import { ChoiceControl } from '../primitives/choice-control.js';
+import { cn } from '../lib/cn.js';
+import { READONLY_FIELD_CLASSES, ReadOnlyEmpty } from './read-only-field.js';
+export function DropdownWidget({ value, onChange, onBlur, ariaLabel, ariaDescribedBy, invalid = false, options: optionOverrides, emptyOptionLabel, profile, creatable = false, openOnMount, onDismiss, onOptionColorChange, readOnly = false, disabled = false, uiHint, }) {
+    const options = optionOverrides ?? (uiHint && 'options' in uiHint && Array.isArray(uiHint.options)
+        ? uiHint.options
+        : []);
+    const normalizedOptions = options.map((option) => typeof option === 'object'
+        ? option
+        : { value: String(option), label: String(option) });
+    if (readOnly) {
+        const match = options.find((option) => (typeof option === 'object' ? option.value : String(option)) === value);
+        const label = typeof match === 'object' ? match.label : match ?? value;
+        return (_jsxs("div", { className: "relative w-full", "aria-readonly": "true", children: [_jsx("div", { className: cn(READONLY_FIELD_CLASSES, 'truncate pr-9'), children: label ? label : _jsx(ReadOnlyEmpty, {}) }), _jsx(ChevronDown, { "aria-hidden": true, className: "pointer-events-none absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground opacity-50" })] }));
+    }
+    return (_jsx(ChoiceControl, { mode: "single", profile: profile ?? 'menu', "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, invalid: invalid, creatable: creatable, openOnMount: openOnMount, onDismiss: onDismiss, value: value ? [value] : [], onValueChange: (next) => onChange(next[0] ?? ''), onSelectionBlur: onBlur, disabled: disabled, emptyOptionLabel: emptyOptionLabel, options: normalizedOptions, onOptionColorChange: onOptionColorChange }));
+}

package/dist/widgets/multi-select-widget.d.ts

@@ -0,0 +1,11 @@
+import type { ChoiceControlProfile } from '../primitives/choice-control.js';
+import type { WidgetProps } from './types.js';
+export interface MultiSelectWidgetProps extends WidgetProps {
+    onDirectSave?: (value: unknown) => void;
+    profile?: ChoiceControlProfile;
+    creatable?: boolean;
+    openOnMount?: boolean;
+    onDismiss?: () => void;
+    onOptionColorChange?: (optionValue: string, color: string) => void;
+}
+export declare function MultiSelectWidget({ value, onChange, onDirectSave, onBlur, ariaLabel, ariaDescribedBy, invalid, options: optionOverrides, profile, creatable, openOnMount, onDismiss, onOptionColorChange, readOnly, disabled, uiHint, }: MultiSelectWidgetProps): import("react").JSX.Element;