@coffer-org/web-ui 4.0.0

package/dist/render/live-kind.js

@@ -0,0 +1,104 @@
+export const LIVE_ENABLED = new Set(['popover', 'heavy']);
+export const NON_FIELD_KINDS = new Set(['button', 'divider', 'info']);
+export const BY_KIND = {
+    text: 'popover',
+    smalltext: 'popover',
+    textarea: 'popover',
+    title: 'popover',
+    slug: 'popover',
+    snippet: 'popover',
+    email: 'popover',
+    tel: 'popover',
+    password: 'popover',
+    url: 'popover',
+    link: 'popover',
+    number: 'popover',
+    amount: 'popover',
+    money: 'popover',
+    weight: 'popover',
+    unit: 'popover',
+    dataSize: 'popover',
+    duration: 'popover',
+    numberRange: 'popover',
+    realRange: 'popover',
+    dimensions: 'popover',
+    measured: 'popover',
+    geo: 'popover',
+    localFile: 'popover',
+    localDir: 'popover',
+    ip: 'popover',
+    cidr: 'popover',
+    scalar: 'popover',
+    boolean: 'popover',
+    triState: 'popover',
+    rating: 'popover',
+    check: 'popover',
+    color: 'popover',
+    select: 'popover',
+    tag: 'popover',
+    relation: 'popover',
+    date: 'popover',
+    datetime: 'popover',
+    time: 'popover',
+    period: 'popover',
+    reminder: 'popover',
+    source: 'popover',
+    markdown: 'popover',
+    code: 'popover',
+    json: 'popover',
+    i18n: 'popover',
+    file: 'popover',
+    embed: 'popover',
+    document: 'popover',
+    image: 'popover',
+    media: 'popover',
+    avatar: 'popover',
+    cover: 'popover',
+    poster: 'popover',
+    audio: 'popover',
+    video: 'popover',
+    collection: 'heavy',
+    embedded: 'heavy',
+    checklist: 'heavy',
+    illustrated: 'heavy',
+    illustratedList: 'heavy',
+    'per-weekday': 'heavy',
+    group: 'heavy',
+    block: 'heavy',
+    calendar: 'heavy',
+    journal: 'heavy',
+    manifest: 'heavy',
+    table: 'heavy',
+    internalApiToken: 'heavy',
+    internalOauthGrants: 'heavy',
+};
+const BY_PRIM = {
+    text: 'popover',
+    number: 'popover',
+    measured: 'popover',
+    money: 'popover',
+    geo: 'popover',
+    lookup: 'popover',
+    checkbox: 'popover',
+    triState: 'popover',
+    check: 'popover',
+    'per-weekday': 'heavy',
+    select: 'popover',
+    relation: 'popover',
+    date: 'popover',
+    time: 'popover',
+    datetime: 'popover',
+    json: 'popover',
+    code: 'popover',
+    file: 'popover',
+};
+export function defaultLiveKind(field) {
+    const hinted = field.hints?.['live'];
+    if (hinted === 'popover' || hinted === 'heavy')
+        return hinted;
+    return BY_KIND[field.kind] ?? BY_PRIM[field.prim] ?? 'popover';
+}
+export function liveKind(field) {
+    const k = defaultLiveKind(field);
+    return LIVE_ENABLED.has(k) ? k : null;
+}

package/dist/render/markdown-view.d.ts

@@ -0,0 +1,5 @@
+export declare function markdownToSafeHtml(src: string): string;
+export declare function MarkdownView({ value }: {
+    value: string;
+}): import("react").JSX.Element;
+export default MarkdownView;

package/dist/render/markdown-view.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { marked } from 'marked';
+import DOMPurify from 'dompurify';
+DOMPurify.addHook('afterSanitizeAttributes', (node) => {
+    if (node.tagName === 'A') {
+        node.setAttribute('target', '_blank');
+        node.setAttribute('rel', 'noopener noreferrer');
+    }
+});
+export function markdownToSafeHtml(src) {
+    const raw = marked.parse(src, { async: false });
+    return DOMPurify.sanitize(raw);
+}
+export function MarkdownView({ value }) {
+    return _jsx("div", { className: "md-static", dangerouslySetInnerHTML: { __html: markdownToSafeHtml(value) } });
+}
+export default MarkdownView;

package/dist/render/multi.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+export declare function asArray(value: unknown): unknown[];
+export declare function firstOf(value: unknown): unknown;
+export declare function MultipleField({ value, onChange, renderItem, renderEditItem, editing, }: {
+    value: unknown;
+    onChange?: (v: unknown) => void | Promise<string | undefined>;
+    renderItem: (v: unknown, i: number) => ReactNode;
+    renderEditItem: (v: unknown, set: (nv: unknown) => void, i: number) => ReactNode;
+    editing: boolean;
+}): import("react").JSX.Element;

package/dist/render/multi.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { parseJSON } from "../lib/json.js";
+import { AddBtn, RemoveBtn } from "./shared.js";
+export function asArray(value) {
+    if (Array.isArray(value))
+        return value;
+    if (typeof value === 'string')
+        return parseJSON(value, []);
+    return value == null || value === '' ? [] : [value];
+}
+export function firstOf(value) {
+    const a = asArray(value);
+    return a.length ? a[0] : '';
+}
+export function MultipleField({ value, onChange, renderItem, renderEditItem, editing, }) {
+    const arr = asArray(value);
+    if (!editing) {
+        if (!arr.length)
+            return _jsx("span", { className: "text-muted", children: "\u2014" });
+        return (_jsx("div", { className: "flex flex-col gap-1", children: arr.map((v, i) => (_jsx("div", { children: renderItem(v, i) }, i))) }));
+    }
+    const setAt = (i, nv) => onChange?.(arr.map((x, j) => (j === i ? nv : x)));
+    const add = () => onChange?.([...arr, '']);
+    const removeAt = (i) => onChange?.(arr.filter((_, j) => j !== i));
+    return (_jsxs("div", { className: "flex flex-col gap-1.5", children: [arr.map((v, i) => (_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("div", { className: "min-w-0 flex-1", children: renderEditItem(v, (nv) => setAt(i, nv), i) }), _jsx(RemoveBtn, { onClick: () => removeAt(i) })] }, i))), _jsx(AddBtn, { onClick: add, children: "Add" })] }));
+}

package/dist/render/multiple-chips.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+export declare const Dash: () => React.JSX.Element;
+export declare function RemoveBtn({ onClick, className }: {
+    onClick: () => void;
+    className?: string;
+}): React.JSX.Element;
+export declare function Chip({ children, className, style, onRemove, }: {
+    children: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+    onRemove?: () => void;
+}): React.JSX.Element;
+export declare function ChipList({ children }: {
+    children: React.ReactNode;
+}): React.JSX.Element;
+export declare function MultipleChips({ items, content, chipClassName, chipStyle, onRemove, editor, emptyDash, }: {
+    items: unknown[];
+    content: (item: unknown, idx: number) => React.ReactNode;
+    chipClassName?: (item: unknown, idx: number) => string;
+    chipStyle?: (item: unknown, idx: number) => React.CSSProperties;
+    onRemove?: (idx: number) => void;
+    editor?: React.ReactNode;
+    emptyDash?: boolean;
+}): React.JSX.Element | null;

package/dist/render/multiple-chips.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { X } from 'lucide-react';
+import { CHIP_CLS } from "../components/ui/chip-cls.js";
+export const Dash = () => _jsx("span", { className: "text-sm text-muted/50 select-none", children: "\u2014" });
+export function RemoveBtn({ onClick, className }) {
+    return (_jsx("button", { type: "button", onClick: onClick, "aria-label": "remove", className: `inline-flex shrink-0 items-center text-muted transition-colors hover:text-danger ${className ?? ''}`, children: _jsx(X, { size: 13 }) }));
+}
+export function Chip({ children, className, style, onRemove, }) {
+    return (_jsxs("span", { className: `${CHIP_CLS} ${className ?? ''}`, style: style, children: [children, onRemove && _jsx(RemoveBtn, { onClick: onRemove })] }));
+}
+export function ChipList({ children }) {
+    return _jsx("div", { className: "flex flex-wrap gap-1.5", children: children });
+}
+export function MultipleChips({ items, content, chipClassName, chipStyle, onRemove, editor, emptyDash = true, }) {
+    if (!items.length && !editor)
+        return emptyDash ? _jsx(Dash, {}) : null;
+    return (_jsxs("div", { className: `flex flex-col gap-2 ${editor ? 'px-2' : ''}`, children: [items.length > 0 && (_jsx(ChipList, { children: items.map((it, idx) => (_jsx(Chip, { className: chipClassName?.(it, idx), style: chipStyle?.(it, idx), onRemove: onRemove ? () => onRemove(idx) : undefined, children: content(it, idx) }, idx))) })), editor] }));
+}

package/dist/render/option-list.d.ts

@@ -0,0 +1,15 @@
+import { type ReactNode } from 'react';
+import type { FieldMeta, OptionItem } from '@coffer-org/sdk/fields';
+export type ListItem = OptionItem & {
+    node?: ReactNode;
+};
+export declare function OptionList({ field, options, value, multiple, literal, autoFocusSearch, search, onPick, }: {
+    field?: FieldMeta;
+    options: ListItem[];
+    value: unknown;
+    multiple: boolean;
+    literal?: boolean;
+    autoFocusSearch?: boolean;
+    search?: boolean;
+    onPick: (next: unknown) => void;
+}): import("react").JSX.Element;

package/dist/render/option-list.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Check } from 'lucide-react';
+import { resolveRenderer } from "../registry.js";
+import { OptionIconView } from "../components/ui/option-icon.js";
+const SEARCH_THRESHOLD = 8;
+export function OptionList({ field, options, value, multiple, literal, autoFocusSearch = true, search, onPick, }) {
+    const Value = field ? resolveRenderer(field)?.Value : undefined;
+    const { t } = useTranslation();
+    const [query, setQuery] = useState('');
+    const listRef = useRef(null);
+    const title = (o) => (literal ? o.title : t(o.title));
+    const selected = useMemo(() => {
+        if (!multiple)
+            return value == null || value === '' ? [] : [String(value)];
+        if (Array.isArray(value))
+            return value.map(String);
+        return [];
+    }, [value, multiple]);
+    const shown = useMemo(() => {
+        const q = query.trim().toLowerCase();
+        if (!q)
+            return options;
+        return options.filter((o) => title(o).toLowerCase().includes(q) ||
+            o.value.toLowerCase().includes(q) ||
+            (o.subtitle?.toLowerCase().includes(q) ?? false));
+    }, [options, query, t, literal]);
+    function pick(v) {
+        if (!multiple) {
+            onPick(v);
+            return;
+        }
+        onPick(selected.includes(v) ? selected.filter((s) => s !== v) : [...selected, v]);
+    }
+    useEffect(() => {
+        const box = listRef.current;
+        const on = box?.querySelector('[aria-selected="true"]');
+        if (!box || !on)
+            return;
+        box.scrollTop = Math.max(0, on.offsetTop - box.clientHeight / 2 + on.offsetHeight / 2);
+    }, []);
+    return (_jsxs("div", { className: "flex flex-col gap-1 min-w-0", children: [(search ?? options.length > SEARCH_THRESHOLD) && (_jsx("input", { autoFocus: autoFocusSearch, value: query, onChange: (e) => setQuery(e.target.value), placeholder: t('form.search'), "aria-label": t('form.search'), className: "mb-1 text-sm" })), _jsxs("div", { ref: listRef, role: "listbox", "aria-multiselectable": multiple, className: "flex max-h-72 flex-col overflow-y-auto", children: [shown.length === 0 && _jsx("span", { className: "px-2 py-1.5 text-sm text-muted", children: t('common.empty') }), shown.map((o) => {
+                        const on = selected.includes(o.value);
+                        return (_jsxs("button", { type: "button", role: "option", "aria-selected": on, onClick: () => pick(o.value), className: "flex min-w-0 items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm hover:bg-elevated focus-visible:bg-elevated focus-visible:outline-none", children: [o.node ? (_jsx("span", { className: "flex min-w-0 flex-1 items-center gap-1.5", children: o.node })) : Value && field ? (_jsx("span", { className: "flex min-w-0 flex-1 items-center gap-1.5", children: _jsx(Value, { field: field, value: o.value }) })) : (_jsxs(_Fragment, { children: [o.icon && _jsx(OptionIconView, { icon: o.icon, size: "xs" }), _jsx("span", { className: "min-w-0 flex-1 truncate", children: title(o) }), o.subtitle && o.subtitle !== title(o) && (_jsx("span", { className: "shrink-0 text-xs text-muted", children: o.subtitle }))] })), on && _jsx(Check, { size: 14, className: "shrink-0 text-accent" })] }, o.value));
+                    })] })] }));
+}

package/dist/render/option-value.d.ts

@@ -0,0 +1,20 @@
+import type { CSSProperties, ReactNode } from 'react';
+import type { FieldMeta, OptionItem } from '@coffer-org/sdk/fields';
+import type { FieldKey, FieldKeyCtx } from '../types.ts';
+export { fieldOptions } from '../lib/format.ts';
+export declare function OptionValue({ field, value }: {
+    field: FieldMeta;
+    value: unknown;
+}): ReactNode;
+export declare function optionChipProps(field: Pick<FieldMeta, 'options' | 'hints'>): {
+    chipClassName?: () => string;
+    chipStyle?: (item: unknown) => CSSProperties;
+};
+export declare function optionKeys(value: unknown, field: FieldMeta, ctx: FieldKeyCtx): FieldKey[];
+export declare function OptionInput({ field, value, onChange, offered, exclude, }: {
+    field: FieldMeta;
+    value: unknown;
+    onChange: (v: string | string[]) => void;
+    offered?: OptionItem[];
+    exclude?: string[];
+}): import("react").JSX.Element;

package/dist/render/option-value.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { hasOptions } from '@coffer-org/sdk/fields';
+import { OptionIconView } from "../components/ui/option-icon.js";
+import { Combobox, ChipsCombobox } from "../components/ui/select-combobox.js";
+import { optionLabel, fieldOptions } from "../lib/format.js";
+import { catColor } from "../lib/cat-color.js";
+import { parseJSON } from "../lib/json.js";
+import { toComboItems, useTranslation } from "./shared.js";
+export { fieldOptions } from "../lib/format.js";
+export function OptionValue({ field, value }) {
+    const { t } = useTranslation();
+    const str = String(value ?? '');
+    const opt = fieldOptions(field).find((o) => o.value === str);
+    const label = opt ? t(opt.title) : str;
+    return (_jsxs("span", { className: "inline-flex min-w-0 items-center gap-1.5", children: [opt?.icon && _jsx(OptionIconView, { icon: opt.icon, size: "xs" }), _jsx("span", { className: "min-w-0 truncate", children: label }), opt?.subtitle && opt.subtitle !== label && _jsx("span", { className: "text-muted text-xs shrink-0", children: opt.subtitle })] }));
+}
+export function optionChipProps(field) {
+    if (!hasOptions(field))
+        return {};
+    return {
+        chipClassName: () => 'cat-chip',
+        chipStyle: (item) => ({ '--cat': catColor(String(item)) }),
+    };
+}
+export function optionKeys(value, field, ctx) {
+    if (value == null || value === '')
+        return [];
+    const code = String(value);
+    const label = optionLabel(ctx.t, field, code);
+    return [{ value: code, rawValue: value, label, sort: label }];
+}
+export function OptionInput({ field, value, onChange, offered, exclude, }) {
+    const { t } = useTranslation();
+    const all = offered ?? fieldOptions(field);
+    if (field.hints['multiple'] === true) {
+        const raw = Array.isArray(value) ? value : parseJSON(value, []);
+        return (_jsx(ChipsCombobox, { selected: raw.map(String), items: toComboItems(all, t), onChange: (next) => onChange(next), placeholder: t('form.search'), chipClassName: () => 'cat-chip', chipStyle: (v) => ({ '--cat': catColor(v) }) }));
+    }
+    const opts = exclude?.length ? all.filter((o) => o.value === value || !exclude.includes(o.value)) : all;
+    return (_jsx(Combobox, { value: typeof value === 'string' ? value : '', onChange: onChange, items: toComboItems(opts, t), placeholder: t('form.search') }));
+}

package/dist/render/picker-scrim.d.ts

@@ -0,0 +1,7 @@
+import { type ReactNode } from 'react';
+export declare function registerOpenPicker(): () => void;
+export declare function useAnyPickerOpen(): boolean;
+export declare function PickerScrimArea({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function useRegisterPicker(isOpen: boolean): void;

package/dist/render/picker-scrim.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useSyncExternalStore } from 'react';
+let open = 0;
+const listeners = new Set();
+const emit = () => listeners.forEach((l) => l());
+export function registerOpenPicker() {
+    open += 1;
+    emit();
+    let done = false;
+    return () => {
+        if (done)
+            return;
+        done = true;
+        open -= 1;
+        emit();
+    };
+}
+function subscribe(l) {
+    listeners.add(l);
+    return () => listeners.delete(l);
+}
+const snapshot = () => open > 0;
+export function useAnyPickerOpen() {
+    return useSyncExternalStore(subscribe, snapshot, () => false);
+}
+export function PickerScrimArea({ children }) {
+    const covered = useAnyPickerOpen();
+    return (_jsxs("div", { className: "relative min-w-0 flex-1", children: [children, covered && _jsx("div", { className: "absolute inset-0 z-40", "data-testid": "picker-scrim", "aria-hidden": true })] }));
+}
+export function useRegisterPicker(isOpen) {
+    useEffect(() => (isOpen ? registerOpenPicker() : undefined), [isOpen]);
+}

package/dist/render/picker-surface.d.ts

@@ -0,0 +1,5 @@
+import { type ReactNode } from 'react';
+export declare function PickerSurface({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function useOnPickerSurface(): boolean;

package/dist/render/picker-surface.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from 'react';
+const PickerSurfaceContext = createContext(false);
+export function PickerSurface({ children }) {
+    return _jsx(PickerSurfaceContext.Provider, { value: true, children: children });
+}
+export function useOnPickerSurface() {
+    return useContext(PickerSurfaceContext);
+}

package/dist/render/popover-field.d.ts

@@ -0,0 +1,16 @@
+import { type ReactNode } from 'react';
+import { type FieldMeta, type OptionItem } from '@coffer-org/sdk/fields';
+import type { BoxGeom } from '../types.ts';
+export declare function PopoverField({ field, value, label, required, error, geom, view, edit, pickerOptions, onCommit, width, }: {
+    field: FieldMeta;
+    value: unknown;
+    label?: string;
+    required?: boolean;
+    error?: string;
+    geom: BoxGeom;
+    view: (value: unknown, commit: (v: unknown) => void) => ReactNode;
+    edit: (value: unknown, onChange: (v: unknown) => void) => ReactNode;
+    pickerOptions?: OptionItem[];
+    onCommit: (v: unknown) => void | Promise<string | undefined>;
+    width?: string;
+}): import("react").JSX.Element;

package/dist/render/popover-field.js

@@ -0,0 +1,153 @@
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { wrapKey } from '@coffer-org/sdk/fields';
+import { fieldLayout, resolveRenderer } from "../registry.js";
+import { Popover, PopoverAnchor, PopoverArrow, PopoverContent } from "../components/ui/popover.js";
+import { Dialog, DialogBody, DialogContent, DialogHeader, DialogTitle } from "../components/ui/dialog.js";
+import { Button } from "../components/ui/button.js";
+import { Plus } from 'lucide-react';
+import { useMinWidth } from "../hooks/use-media-query.js";
+import { FieldLabel, FieldError, FieldBox } from "./chrome.js";
+import { makeIssueText } from "./field-errors.js";
+import { normalizeValue } from "./use-field-edit.js";
+import { focusInPopup } from "./field-frame.js";
+import { editorMode } from "./editor-mode.js";
+import { useRegisterPicker } from "./picker-scrim.js";
+import { useFieldAddress } from "./field-address.js";
+import { PickerSurface } from "./picker-surface.js";
+import { OptionList } from "./option-list.js";
+import { fieldOptions } from "./option-value.js";
+import { hasValue } from "./shared.js";
+import { parseJSON } from "../lib/json.js";
+import { makeWriter } from "./write.js";
+import { SlotProvider } from "./slot.js";
+function Picker({ field, validateWith, trigger, seed, options, listMultiple, pickDecides, showInput, size, label, edit, build, onCommit, onDelete, removeLabel, }) {
+    const { t } = useTranslation();
+    const wide = useMinWidth('sm', 640);
+    const [open, setOpen] = useState(false);
+    const [draft, setDraft] = useState(seed);
+    const [busy, setBusy] = useState(false);
+    const [localError, setLocalError] = useState();
+    const bodyRef = useRef(null);
+    useRegisterPicker(open);
+    useEffect(() => {
+        if (!open)
+            return;
+        const id = requestAnimationFrame(() => {
+            const el = bodyRef.current?.querySelector('input:not([type="hidden"]), textarea, [contenteditable="true"]');
+            el?.focus();
+        });
+        return () => cancelAnimationFrame(id);
+    }, [open]);
+    function start() {
+        setDraft(seed);
+        setLocalError(undefined);
+        setOpen(true);
+    }
+    function cancel() {
+        setLocalError(undefined);
+        setOpen(false);
+    }
+    async function write(next) {
+        setBusy(true);
+        const err = await makeWriter(field, onCommit, makeIssueText(t), validateWith)(next);
+        setBusy(false);
+        if (err) {
+            setLocalError(err);
+            return;
+        }
+        setLocalError(undefined);
+        setOpen(false);
+    }
+    function pick(next) {
+        if (pickDecides)
+            void write(build(next));
+        else
+            setDraft(next);
+    }
+    const Custom = resolveRenderer(field)?.Picker;
+    const body = (_jsxs(PickerSurface, { children: [_jsx("div", { ref: bodyRef, className: `flex min-w-0 flex-col gap-2 ${size === 'modal' ? 'min-h-0 flex-1' : ''}`, children: Custom ? (_jsx(Custom, { field: field, draft: draft, setDraft: setDraft, options: options, save: (v) => void write(build(v === undefined ? draft : v)), cancel: cancel, remove: onDelete ? () => void write(onDelete()) : undefined, removeLabel: removeLabel })) : (_jsxs(_Fragment, { children: [showInput &&
+                            edit(normalizeValue(field, draft), setDraft), options && (_jsx(OptionList, { field: field, options: options, value: draft, multiple: listMultiple, onPick: pick }))] })) }), _jsx(FieldError, { error: localError }), !Custom && (showInput || onDelete) && (_jsxs("div", { className: "mt-2 flex items-center justify-end gap-2 border-t border-border pt-2", children: [onDelete && (_jsx(Button, { type: "button", variant: "destructiveOutline", size: "sm", className: "mr-auto", disabled: busy, onClick: () => void write(onDelete()), children: removeLabel })), showInput && (_jsx(Button, { type: "button", size: "sm", disabled: busy, onClick: () => void write(build(draft)), children: t('actions.save') }))] }))] }));
+    const asWindow = size === 'modal' || !wide;
+    const panelWidth = size === 'large' ? 'w-[min(32rem,calc(100vw-2rem))]' : 'w-72';
+    const anchored = (_jsxs(Popover, { open: open, onOpenChange: (o) => (o ? start() : cancel()), children: [_jsxs(TriggerBox, { open: open, label: label, onOpen: start, children: [trigger, _jsx(PopoverAnchor, { asChild: true, children: _jsx("span", { "aria-hidden": true, className: `pointer-events-none absolute inset-y-0 left-0 max-w-full ${panelWidth}` }) })] }), _jsxs(PopoverContent, { align: "start", className: `${panelWidth} p-2`, onInteractOutside: (e) => {
+                    if (focusInPopup(e.target))
+                        e.preventDefault();
+                }, onEscapeKeyDown: cancel, children: [_jsx(PopoverArrow, {}), body] })] }));
+    if (!asWindow)
+        return anchored;
+    return (_jsxs(_Fragment, { children: [_jsx(TriggerBox, { open: open, label: label, onOpen: start, children: trigger }), _jsx(Dialog, { open: open, onOpenChange: (o) => (o ? start() : cancel()), children: _jsxs(DialogContent, { onEscapeKeyDown: cancel, className: "h-[88dvh] md:h-[min(80dvh,52rem)] md:max-w-5xl md:overflow-hidden", children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: label ?? '' }) }), _jsx(DialogBody, { children: body })] }) })] }));
+}
+function TriggerBox({ open, label, onOpen, children, ...rest }) {
+    return (_jsx("div", { ...rest, role: "button", tabIndex: 0, "aria-haspopup": "dialog", "aria-expanded": open, "aria-label": label, className: "relative min-w-0 cursor-pointer rounded-lg border border-transparent focus-visible:border-accent focus-visible:outline-none", onClick: (e) => {
+            const inner = e.target.closest('a,button,[role="button"],audio,video,input,label');
+            if (inner && inner !== e.currentTarget)
+                return;
+            onOpen();
+        }, onKeyDown: (e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                onOpen();
+            }
+        }, children: children }));
+}
+export function PopoverField({ field, value, label, required, error, geom, view, edit, pickerOptions, onCommit, width = 'w-64', }) {
+    const { t } = useTranslation();
+    const R = resolveRenderer(field);
+    const declared = R?.pickerSize;
+    const size = editorMode(field) === 'modal'
+        ? 'modal'
+        : ((typeof declared === 'function' ? declared(field) : declared) ??
+            (fieldLayout(field) === 'block' || geom === 'textarea' ? 'large' : 'small'));
+    const multi = field.hints['multiple'] === true;
+    const opts = pickerOptions ?? fieldOptions(field);
+    const options = opts?.length ? opts : undefined;
+    const showInput = !(options && field.strict);
+    const Value = R?.Value;
+    const perValue = multi && Value;
+    const address = useFieldAddress();
+    const scalarField = useMemo(() => ({ ...field, hints: { ...field.hints, multiple: false }, json: undefined }), [field]);
+    const freeField = useMemo(() => ({ ...field, options: undefined, hints: { ...field.hints, source: null, suggestions: undefined } }), [field]);
+    const freeScalarField = useMemo(() => ({ ...freeField, hints: { ...freeField.hints, multiple: false }, json: undefined }), [freeField]);
+    const bareEdit = (f, v, onChange) => R ? (_jsx(SlotProvider, { field: wrapKey('value', {}, f), value: v, commit: onChange, children: _jsx(R.Page, { field: f, value: v, mode: "edit", bare: true, recordCtx: address.recordCtx ?? { library: '', shelf: '', recordId: null } }) })) : (edit(v, onChange));
+    const scalarEdit = (v, onChange) => bareEdit(freeScalarField, v, onChange);
+    const inputEdit = options ? (v, onChange) => bareEdit(freeField, v, onChange) : edit;
+    const emphasis = field.hints['emphasis'];
+    const noLabel = field.hints['noLabel'] === true || label === undefined;
+    const inplace = editorMode(field) === 'inplace' && !perValue;
+    const triggerDisplay = view;
+    const shell = (children) => {
+        if (emphasis === 'muted')
+            return (_jsxs("div", { className: "group/field grid grid-cols-[110px_1fr] items-center gap-x-3 text-xs text-muted min-w-0", children: [_jsx("span", { children: label }), _jsx("span", { className: "min-w-0", children: children }), _jsx(FieldError, { error: error })] }));
+        if (noLabel)
+            return (_jsxs("div", { className: "group/field relative min-w-0", children: [children, _jsx(FieldError, { error: error })] }));
+        return (_jsxs("div", { className: `group/field relative ${width}`, children: [_jsx(FieldLabel, { label: label, required: required }), children, _jsx(FieldError, { error: error })] }));
+    };
+    if (inplace) {
+        return shell(_jsx(FieldBox, { geom: geom, field: field, children: view(value, (v) => void onCommit(v)) }));
+    }
+    if (perValue) {
+        const items = Array.isArray(value) ? value : parseJSON(value, []);
+        const at = (idx, next) => items.map((it, i) => (i === idx ? next : it));
+        const without = (idx) => {
+            const left = items.filter((_, i) => i !== idx);
+            return left.length ? left : '';
+        };
+        const one = {
+            field: scalarField,
+            edit: scalarEdit,
+            options,
+            listMultiple: false,
+            pickDecides: true,
+            showInput,
+            size,
+            label,
+            removeLabel: t('actions.delete'),
+        };
+        return shell(_jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-1.5", children: [items.map((item, idx) => (_createElement(Picker, { ...one, key: `${String(item)}-${idx}`, validateWith: field, seed: item, build: (d) => at(idx, d), onDelete: () => without(idx), onCommit: onCommit, trigger: _jsx("span", { className: "inline-flex min-w-0 items-center gap-1.5 rounded-full border border-border px-2 py-0.5 text-sm", children: _jsx(Value, { field: field, value: item }) }) }))), _jsx(Picker, { ...one, validateWith: field, seed: "", build: (d) => [...items, d], onCommit: onCommit, trigger: _jsx("span", { className: "inline-flex items-center gap-1 rounded-full border border-dashed border-border px-2 py-0.5 text-sm text-muted", title: t('actions.add'), children: _jsx(Plus, { size: 14 }) }) })] }));
+    }
+    const clearable = !multi && !field.required && !required && hasValue(value);
+    return shell(_jsx(Picker, { field: field, label: label, size: size, options: options, listMultiple: multi, pickDecides: !multi, showInput: showInput, seed: value, edit: inputEdit, build: (d) => d, onCommit: onCommit, onDelete: clearable ? () => '' : undefined, removeLabel: t('actions.clear'), trigger: _jsx(FieldBox, { geom: geom, field: field, children: triggerDisplay(value, (v) => void onCommit(v)) }) }));
+}

package/dist/render/record-save-ctx.d.ts

@@ -0,0 +1,11 @@
+import { type ReactNode } from 'react';
+export type RunFn = (fn: () => Promise<string | undefined> | string | undefined | void) => Promise<string | undefined>;
+type Ctx = {
+    saving: boolean;
+    run: RunFn;
+};
+export declare function RecordSaveProvider({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function useRecordSave(): Ctx;
+export {};

package/dist/render/record-save-ctx.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { toast } from 'sonner';
+const RecordSaveContext = createContext(null);
+export function RecordSaveProvider({ children }) {
+    const { t } = useTranslation();
+    const [count, setCount] = useState(0);
+    const run = useCallback(async (fn) => {
+        const tid = toast.loading(t('save.saving'));
+        setCount((c) => c + 1);
+        try {
+            const r = await fn();
+            const msg = typeof r === 'string' ? r : undefined;
+            if (msg)
+                toast.error(msg, { id: tid });
+            else
+                toast.success(t('save.done'), { id: tid });
+            return msg;
+        }
+        catch {
+            toast.error(t('save.failed'), { id: tid });
+            return t('save.failed');
+        }
+        finally {
+            setCount((c) => c - 1);
+        }
+    }, [t]);
+    const value = useMemo(() => ({ saving: count > 0, run }), [count, run]);
+    return _jsx(RecordSaveContext.Provider, { value: value, children: children });
+}
+const NOOP = {
+    saving: false,
+    run: async (fn) => {
+        const r = await fn();
+        return typeof r === 'string' ? r : undefined;
+    },
+};
+export function useRecordSave() {
+    return useContext(RecordSaveContext) ?? NOOP;
+}