@coffer-org/web-ui 4.0.0

package/dist/render/shared.d.ts

@@ -0,0 +1,92 @@
+import React from 'react';
+import type { ReactNode } from 'react';
+import { useTranslation } from 'react-i18next';
+import type { ComboboxItem } from '../components/ui/select-combobox.tsx';
+import type { OptionItem, FieldMeta } from '@coffer-org/sdk/fields';
+import type { FieldRenderProps } from '../types.ts';
+import { MultipleChips, Dash } from './multiple-chips.tsx';
+export declare const parseStrArray: (value: string | string[]) => string[];
+export { RemoveBtn, Chip, ChipList } from './multiple-chips.tsx';
+export { MultipleChips, Dash };
+export declare function RemoveSlot({ onRemove, className }: {
+    onRemove?: () => void;
+    className?: string;
+}): React.JSX.Element;
+export declare function AddBtn({ onClick, children, className, }: {
+    onClick: () => void;
+    children: React.ReactNode;
+    className?: string;
+}): React.JSX.Element;
+export declare function UploadButton({ accept, busy, error, progress, onPick, onRetry, canRetry, compact, }: {
+    accept: string;
+    busy: boolean;
+    error: string | null;
+    progress?: number;
+    onPick: (file: File | null) => void;
+    onRetry?: () => void;
+    canRetry?: boolean;
+    compact?: boolean;
+}): React.JSX.Element;
+export declare function UploadError({ error, onRetry, canRetry }: {
+    error: string;
+    onRetry?: () => void;
+    canRetry?: boolean;
+}): React.JSX.Element;
+export declare function UploadProgress({ progress, label }: {
+    progress: number;
+    label?: string;
+}): React.JSX.Element;
+export declare function toComboItems(opts: OptionItem[], t: (k: string) => string): ComboboxItem[];
+export declare function UiActionSelect({ placeholder, options, onPick, className, }: {
+    placeholder: string;
+    options: {
+        value: string;
+        label: string;
+    }[];
+    onPick: (v: string) => void;
+    className?: string;
+}): React.JSX.Element;
+export { CHIP_CLS } from '../components/ui/chip-cls.ts';
+export declare function circledNum(i: number): string;
+export declare function colsToCheckRow(value: unknown, n: number): {
+    text: string;
+    checks: boolean[];
+};
+export declare function checkRowToCols(row: {
+    text: string;
+    checks: boolean[];
+}): Record<string, unknown>;
+export declare function CheckLegend({ slots }: {
+    slots: string[];
+}): React.JSX.Element | null;
+export declare const checkNumbered: (slotCount: number) => boolean;
+export declare const enterAdd: (add: () => void) => (e: React.KeyboardEvent) => void;
+export declare function MultiTagInput({ value, onChange, renderInput, validate, serialize, display, }: {
+    value: string | string[];
+    onChange: (v: string[] | '') => void;
+    renderInput: (v: string, set: (v: string) => void, add: () => void) => React.ReactNode;
+    validate?: (v: string) => boolean;
+    serialize?: (raw: string) => string | null;
+    display?: (stored: string) => React.ReactNode;
+}): React.JSX.Element;
+export declare function useRowIdentity<T extends object>(rows: T[], onChange: (rows: T[]) => void): {
+    rowId: (row: T) => number;
+    updateRow: (idx: number, next: T) => void;
+    removeRow: (idx: number) => void;
+};
+export declare function useCompositeLiveGate(p: FieldRenderProps): {
+    live: boolean;
+    write?: (next: unknown) => Promise<string | undefined>;
+};
+export declare function compositeRoleValue(v: unknown): unknown;
+export declare function hasValue(v: unknown): boolean;
+export declare function usedElsewhere(rows: Record<string, unknown>[], unique: string[], key: string, idx: number): string[];
+export declare function shortId(id: string): string;
+export declare const trunc: (s: string) => string;
+export { useTranslation };
+export declare function multiView(field: FieldMeta, value: unknown, content: (item: unknown) => ReactNode, commit?: (v: unknown) => void | Promise<string | undefined>, chip?: {
+    chipClassName?: () => string;
+    chipStyle?: (item: unknown) => React.CSSProperties;
+}): ReactNode;
+export declare function orDash(value: unknown, render: (v: unknown) => ReactNode, isEmpty?: (v: unknown) => boolean): ReactNode;
+export declare function firstCoverKey(fm: Record<string, FieldMeta>): string | undefined;

package/dist/render/shared.js

@@ -0,0 +1,182 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button } from "../components/ui/button.js";
+import { InputGroup, InputGroupAddon, InputGroupButton } from "../components/ui/input-group.js";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../components/ui/select.js";
+import { Plus, Upload, Loader2, Trash2, RotateCcw } from 'lucide-react';
+import { useHybridScope } from "./hybrid-scope.js";
+import { useSlotOptional } from "./slot.js";
+import { parseJSON } from "../lib/json.js";
+import { MultipleChips, Dash } from "./multiple-chips.js";
+import { useOnPickerSurface } from "./picker-surface.js";
+export const parseStrArray = (value) => Array.isArray(value) ? value : parseJSON(value, []);
+export { RemoveBtn, Chip, ChipList } from "./multiple-chips.js";
+export { MultipleChips, Dash };
+export function RemoveSlot({ onRemove, className }) {
+    const { t } = useTranslation();
+    return (_jsx(Button, { type: "button", variant: "outline", size: "iconSm", onClick: onRemove, title: t('actions.delete'), "aria-hidden": onRemove ? undefined : true, tabIndex: onRemove ? undefined : -1, className: `shrink-0 rounded-lg text-muted hover:border-danger hover:text-danger${onRemove ? '' : ' invisible'}${className ? ` ${className}` : ''}`, children: _jsx(Trash2, { size: 14 }) }));
+}
+export function AddBtn({ onClick, children, className, }) {
+    return (_jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: onClick, className: `self-start font-medium text-xs rounded-lg gap-1.5 transition-colors border-border/80 text-foreground/80 hover:bg-muted/40 hover:text-foreground ${className ?? ''}`, children: children }));
+}
+export function UploadButton({ accept, busy, error, progress, onPick, onRetry, canRetry, compact, }) {
+    const { t } = useTranslation();
+    return (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsxs("label", { className: `inline-flex w-fit cursor-pointer items-center gap-1.5 rounded-lg border border-accent/30 text-xs font-medium text-accent hover:border-accent/60 ${compact ? 'px-2.5 py-1' : 'px-3 py-2'} ${busy ? 'pointer-events-none opacity-60' : ''}`, children: [busy ? _jsx(Loader2, { size: 13, className: "animate-spin" }) : _jsx(Upload, { size: 13 }), " ", t('actions.upload'), _jsx("input", { type: "file", accept: accept, className: "hidden", disabled: busy, onChange: (e) => onPick(e.target.files?.[0] ?? null) })] }), busy && progress != null && _jsx(UploadProgress, { progress: progress }), error && _jsx(UploadError, { error: error, onRetry: onRetry, canRetry: canRetry })] }));
+}
+export function UploadError({ error, onRetry, canRetry }) {
+    const { t } = useTranslation();
+    return (_jsxs("div", { className: "flex items-center gap-2 text-xs text-danger", children: [_jsx("span", { className: "min-w-0 flex-1", children: t(error) }), canRetry && onRetry && (_jsxs("button", { type: "button", className: "inline-flex shrink-0 items-center gap-1 rounded px-1.5 py-0.5 font-medium text-accent hover:bg-elevated", onClick: onRetry, children: [_jsx(RotateCcw, { size: 12 }), " ", t('actions.retry')] }))] }));
+}
+export function UploadProgress({ progress, label = 'upload.progress' }) {
+    const { t } = useTranslation();
+    return (_jsx("div", { role: "progressbar", "aria-label": t(label), "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": progress, className: "h-1.5 w-full overflow-hidden rounded-full bg-border", children: _jsx("div", { className: "h-full rounded-full bg-accent transition-[width]", style: { width: `${Math.max(0, Math.min(100, progress))}%` } }) }));
+}
+export function toComboItems(opts, t) {
+    return opts.map((o) => ({
+        value: o.value,
+        title: t(o.title),
+        subtitle: o.subtitle,
+        icon: o.icon,
+    }));
+}
+export function UiActionSelect({ placeholder, options, onPick, className, }) {
+    const [k, setK] = useState(0);
+    return (_jsxs(Select, { onValueChange: (v) => {
+            onPick(v);
+            setK((n) => n + 1);
+        }, children: [_jsx(SelectTrigger, { className: className, children: _jsx(SelectValue, { placeholder: placeholder }) }), _jsx(SelectContent, { children: options.map((o) => (_jsx(SelectItem, { value: o.value, children: o.label }, o.value))) })] }, k));
+}
+export { CHIP_CLS } from "../components/ui/chip-cls.js";
+export function circledNum(i) {
+    return i >= 0 && i < 20 ? String.fromCodePoint(0x2460 + i) : String(i + 1);
+}
+export function colsToCheckRow(value, n) {
+    let v = value;
+    if (typeof v === 'string') {
+        try {
+            v = JSON.parse(v);
+        }
+        catch {
+            v = {};
+        }
+    }
+    const o = (v && typeof v === 'object' ? v : {});
+    if (Array.isArray(o['checks'])) {
+        const arr = o['checks'];
+        return { text: String(o['text'] ?? ''), checks: Array.from({ length: n }, (_, i) => arr[i] === true) };
+    }
+    return { text: String(o['text'] ?? ''), checks: Array.from({ length: n }, (_, i) => o[`check${i}`] === true) };
+}
+export function checkRowToCols(row) {
+    const out = { text: row.text };
+    row.checks.forEach((c, i) => {
+        out[`check${i}`] = c;
+    });
+    return out;
+}
+export function CheckLegend({ slots }) {
+    const { t } = useTranslation();
+    if (slots.length <= 1 || !slots.some((s) => s))
+        return null;
+    const numbered = slots.length > 3;
+    return (_jsx("div", { className: "flex flex-wrap items-center gap-x-1.5 gap-y-0.5 text-xs text-muted", children: slots.map((s, i) => (_jsxs(React.Fragment, { children: [i > 0 && _jsx("span", { className: "opacity-40", children: "\u2022" }), _jsxs("span", { children: [numbered ? `${circledNum(i)} ` : '', s ? t(s) : '—'] })] }, i))) }));
+}
+export const checkNumbered = (slotCount) => slotCount > 3;
+export const enterAdd = (add) => (e) => {
+    if (e.key === 'Enter') {
+        e.preventDefault();
+        add();
+    }
+};
+export function MultiTagInput({ value, onChange, renderInput, validate, serialize, display, }) {
+    const [items, setItems] = useState(() => parseStrArray(value));
+    const [inputVal, setInputVal] = useState('');
+    const onPicker = useOnPickerSurface();
+    useEffect(() => {
+        setItems(parseStrArray(value));
+    }, [value]);
+    function save(next) {
+        setItems(next);
+        onChange(next.length > 0 ? next : '');
+    }
+    function add() {
+        const raw = inputVal.trim();
+        if (!raw || (validate && !validate(raw)))
+            return;
+        const stored = serialize ? serialize(raw) : raw;
+        if (stored === null || items.includes(stored))
+            return;
+        save([...items, stored]);
+        setInputVal('');
+    }
+    return (_jsx(MultipleChips, { items: onPicker ? [] : items, content: (it) => (display ? display(String(it)) : String(it)), onRemove: onPicker ? undefined : (idx) => save(items.filter((_, i) => i !== idx)), editor: _jsxs(InputGroup, { className: "[&>input]:h-auto [&>input]:rounded-none [&>input]:border-0 [&>input]:bg-transparent [&>input]:shadow-none [&>input]:focus-visible:ring-0 focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50", children: [renderInput(inputVal, setInputVal, add), _jsx(InputGroupAddon, { align: "inline-end", children: _jsx(InputGroupButton, { size: "icon-xs", "aria-label": "add", onClick: add, children: _jsx(Plus, {}) }) })] }) }));
+}
+export function useRowIdentity(rows, onChange) {
+    const rowIds = useRef(new WeakMap());
+    const nextRowId = useRef(0);
+    const rowId = (row) => {
+        let id = rowIds.current.get(row);
+        if (id === undefined) {
+            id = ++nextRowId.current;
+            rowIds.current.set(row, id);
+        }
+        return id;
+    };
+    const updateRow = (idx, next) => {
+        const source = rows[idx];
+        if (source)
+            rowIds.current.set(next, rowId(source));
+        onChange(rows.map((r, i) => (i === idx ? next : r)));
+    };
+    const removeRow = (idx) => onChange(rows.filter((_, i) => i !== idx));
+    return { rowId, updateRow, removeRow };
+}
+export function useCompositeLiveGate(p) {
+    const slot = useSlotOptional();
+    const write = slot?.writable ? slot.write : undefined;
+    const live = useHybridScope() &&
+        p.mode === 'view' &&
+        !p.bare &&
+        !p.field.derived &&
+        p.field.hints['noEditControl'] !== true &&
+        Boolean(write);
+    return { live, write };
+}
+export function compositeRoleValue(v) {
+    return v == null || v === '' ? null : v;
+}
+export function hasValue(v) {
+    return v !== null && v !== undefined && v !== '';
+}
+export function usedElsewhere(rows, unique, key, idx) {
+    if (!unique.includes(key))
+        return [];
+    return rows
+        .filter((_, i) => i !== idx)
+        .map((r) => String(r[key] ?? ''))
+        .filter(Boolean);
+}
+export function shortId(id) {
+    return id.slice(0, 8) + '…';
+}
+export const trunc = (s) => (s.length > 60 ? s.slice(0, 57) + '…' : s);
+export { useTranslation };
+export function multiView(field, value, content, commit, chip) {
+    if (field.hints['multiple'] === true) {
+        const items = parseJSON(value, []);
+        return (_jsx(MultipleChips, { items: items, content: content, ...chip, onRemove: commit
+                ? (idx) => {
+                    const next = items.filter((_, i) => i !== idx);
+                    void commit(next.length ? next : '');
+                }
+                : undefined }));
+    }
+    return hasValue(value) ? _jsx(_Fragment, { children: content(value) }) : _jsx(Dash, {});
+}
+export function orDash(value, render, isEmpty = (v) => !hasValue(v)) {
+    return isEmpty(value) ? _jsx(Dash, {}) : _jsx(_Fragment, { children: render(value) });
+}
+export function firstCoverKey(fm) {
+    return Object.keys(fm).find((k) => fm[k]?.kind === 'cover');
+}

package/dist/render/slot.d.ts

@@ -0,0 +1,45 @@
+import { type ReactElement, type ReactNode } from 'react';
+import { type LayoutNode } from '@coffer-org/sdk/fields';
+import type { FieldMode } from '../types.ts';
+export type SlotRender = (handle: SlotHandle, defaultDisplay: ReactNode) => ReactNode;
+export interface SlotHandle {
+    value: unknown;
+    field: LayoutNode;
+    write: (next: unknown) => Promise<string | undefined>;
+    error: string | undefined;
+    busy: boolean;
+    writable: boolean;
+    hidden: boolean;
+    mode: FieldMode;
+}
+export declare function useSlot(name?: string): SlotHandle;
+export declare function useSlotOptional(name?: string): SlotHandle | null;
+export declare function useSlotRender(): SlotRender | undefined;
+export declare function useSlots(): {
+    name: string;
+    handle: SlotHandle;
+}[];
+export declare function SlotProvider(props: {
+    field: LayoutNode;
+    value: unknown;
+    commit?: (next: unknown) => void | Promise<string | undefined>;
+    isHidden?: (key: string) => boolean;
+    mode?: FieldMode;
+    render?: SlotRender;
+    children: ReactNode;
+}): ReactElement;
+export declare function SlotScope({ name, children }: {
+    name: string;
+    children: ReactNode;
+}): ReactElement | null;
+export declare function Slot({ name, render, ownLabel, }: {
+    name: string;
+    render?: SlotRender;
+    ownLabel?: boolean;
+}): ReactElement | null;
+export declare function SlotEditor({ name }: {
+    name: string;
+}): ReactElement | null;
+export declare function SlotValue({ name }: {
+    name: string;
+}): ReactElement | null;

package/dist/render/slot.js

@@ -0,0 +1,194 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, } from 'react';
+import { useTranslation } from 'react-i18next';
+import { hasChildren, isNamedField, wrapKey, } from '@coffer-org/sdk/fields';
+import { elementKind, resolveRenderer } from "../registry.js";
+import { FieldAddressProvider, useFieldAddress } from "./field-address.js";
+import { makeIssueText } from "./field-errors.js";
+import { makeWriter, notWritable } from "./write.js";
+const SlotContext = createContext(null);
+function slotChildren(field) {
+    if (hasChildren(field))
+        return field.fields;
+    const parts = field.type?.parts;
+    if (parts?.length)
+        return parts.map((p) => ({ ...wrapKey(p.role, {}, p.meta), name: p.role }));
+    return [];
+}
+function findChild(field, name) {
+    return slotChildren(field).find((c) => c.name === name);
+}
+function asRecord(v) {
+    return v !== null && typeof v === 'object' && !Array.isArray(v) ? v : {};
+}
+function ownHandle(ctx) {
+    return {
+        value: ctx.value,
+        field: ctx.field,
+        write: ctx.ownWrite,
+        error: ctx.ownState.error,
+        busy: ctx.ownState.busy,
+        writable: ctx.writable,
+        hidden: ctx.field.key !== undefined && (ctx.isHidden?.(ctx.field.key) ?? false),
+        mode: ctx.mode,
+    };
+}
+function childHandle(ctx, name) {
+    const child = findChild(ctx.field, name);
+    if (!child)
+        throw new Error(`useSlot: '${name}' is not a field this node declares`);
+    const state = ctx.childStates[name] ?? { busy: false };
+    return {
+        value: child.key !== undefined ? asRecord(ctx.value)[child.key] : ctx.value,
+        field: child,
+        write: ctx.childWrite(child, name),
+        error: state.error,
+        busy: state.busy,
+        writable: child.key !== undefined && ctx.writable,
+        hidden: child.key !== undefined && (ctx.isHidden?.(child.key) ?? false),
+        mode: ctx.mode,
+    };
+}
+export function useSlot(name) {
+    const ctx = useContext(SlotContext);
+    if (!ctx)
+        throw new Error('useSlot: no SlotProvider found in the tree');
+    return name === undefined ? ownHandle(ctx) : childHandle(ctx, name);
+}
+export function useSlotOptional(name) {
+    const ctx = useContext(SlotContext);
+    if (!ctx)
+        return null;
+    return name === undefined ? ownHandle(ctx) : childHandle(ctx, name);
+}
+export function useSlotRender() {
+    return useContext(SlotContext)?.render ?? undefined;
+}
+export function useSlots() {
+    const ctx = useContext(SlotContext);
+    if (!ctx)
+        throw new Error('useSlots: no SlotProvider found in the tree');
+    const named = [];
+    for (const c of slotChildren(ctx.field)) {
+        if (c.name === undefined)
+            continue;
+        named.push({ name: c.name, handle: childHandle(ctx, c.name) });
+    }
+    return named;
+}
+export function SlotProvider(props) {
+    const { field, value, commit, isHidden, mode = 'view', render, children } = props;
+    const writable = commit !== undefined;
+    const [ownState, setOwnState] = useState({ busy: false });
+    const [childStates, setChildStates] = useState({});
+    const { t } = useTranslation();
+    const issueText = useMemo(() => makeIssueText(t), [t]);
+    const fallback = useMemo(() => notWritable(issueText), [issueText]);
+    const lastValueProp = useRef(value);
+    const valueRef = useRef(value);
+    if (lastValueProp.current !== value) {
+        lastValueProp.current = value;
+        valueRef.current = value;
+    }
+    useEffect(() => {
+        setOwnState({ busy: false });
+        setChildStates({});
+    }, [field, value]);
+    const ownWrite = useCallback(async (next) => {
+        setOwnState({ busy: true });
+        const err = await makeWriter(field.type, commit ?? fallback, issueText)(next);
+        setOwnState({ busy: false, error: err });
+        return err;
+    }, [field, commit, fallback, issueText]);
+    const childWrite = useCallback((child, name) => async (next) => {
+        setChildStates((m) => ({ ...m, [name]: { busy: true } }));
+        const key = child.key;
+        const childCommit = key === undefined || commit === undefined
+            ? fallback
+            : (v) => {
+                const merged = { ...asRecord(valueRef.current), [key]: v };
+                valueRef.current = merged;
+                return commit(merged);
+            };
+        const err = await makeWriter(child.type, childCommit, issueText)(next);
+        setChildStates((m) => ({ ...m, [name]: { busy: false, error: err } }));
+        return err;
+    }, [commit, fallback, issueText]);
+    const ctx = useMemo(() => ({ field, value, ownState, ownWrite, childStates, childWrite, writable, commit, isHidden, mode, render }), [field, value, ownState, ownWrite, childStates, childWrite, writable, commit, isHidden, mode, render]);
+    return _jsx(SlotContext.Provider, { value: ctx, children: children });
+}
+function useResolvedChild(name) {
+    const ctx = useContext(SlotContext);
+    if (!ctx)
+        throw new Error('useSlot: no SlotProvider found in the tree');
+    const handle = childHandle(ctx, name);
+    const el = handle.field;
+    const isField = isNamedField(el);
+    const r = resolveRenderer({ kind: elementKind(el) });
+    const { recordCtx } = useFieldAddress();
+    const commit = el.key !== undefined ? (handle.writable ? handle.write : undefined) : ctx.commit;
+    const { t } = useTranslation();
+    return {
+        handle,
+        el,
+        isField,
+        r,
+        recordCtx: recordCtx ?? { library: '', shelf: '', recordId: null },
+        commit,
+        t,
+        isHidden: ctx.isHidden,
+        mode: ctx.mode,
+    };
+}
+function DefaultChildren() {
+    return (_jsx(_Fragment, { children: useSlots().map((s) => (_jsx(Slot, { name: s.name }, s.name))) }));
+}
+function childProps(base, extra) {
+    const { handle, el, isField, recordCtx, t, mode } = base;
+    const meta = isField ? el.type : undefined;
+    const labelKey = el.label ?? meta?.label;
+    return {
+        el,
+        field: meta,
+        fieldKey: el.key,
+        value: handle.value,
+        label: labelKey ? t(labelKey) : undefined,
+        error: handle.error,
+        mode,
+        recordCtx,
+        children: hasChildren(el) ? _jsx(DefaultChildren, {}) : undefined,
+        ...extra,
+    };
+}
+function ChildFrame({ resolved, extra, render, ownLabel, }) {
+    const { r, handle, el, recordCtx, commit, isHidden, mode } = resolved;
+    if (!r || handle.hidden)
+        return null;
+    const effectiveMode = extra.mode ?? mode;
+    const labelExtra = ownLabel && effectiveMode === 'view' ? { ...extra, label: undefined } : extra;
+    return (_jsx(FieldAddressProvider, { fieldKey: el.key, recordCtx: recordCtx, children: _jsx(SlotProvider, { field: el, value: handle.value, commit: commit, isHidden: isHidden, mode: effectiveMode, render: render, children: _jsx(r.Page, { ...childProps(resolved, labelExtra) }) }) }));
+}
+export function SlotScope({ name, children }) {
+    const { handle, el, recordCtx, commit, isHidden, mode } = useResolvedChild(name);
+    if (handle.hidden)
+        return null;
+    return (_jsx(FieldAddressProvider, { fieldKey: el.key, recordCtx: recordCtx, children: _jsx(SlotProvider, { field: el, value: handle.value, commit: commit, isHidden: isHidden, mode: mode, children: children }) }));
+}
+export function Slot({ name, render, ownLabel, }) {
+    return _jsx(ChildFrame, { resolved: useResolvedChild(name), extra: {}, render: render, ownLabel: ownLabel });
+}
+export function SlotEditor({ name }) {
+    return _jsx(ChildFrame, { resolved: useResolvedChild(name), extra: { mode: 'edit', bare: true } });
+}
+export function SlotValue({ name }) {
+    const resolved = useResolvedChild(name);
+    const { handle, el, isField, r } = resolved;
+    if (isField)
+        return _jsx(ChildFrame, { resolved: resolved, extra: { mode: 'view', bare: true } });
+    if (handle.hidden)
+        return null;
+    const Value = r?.Value;
+    if (!Value)
+        return _jsx("span", { children: String(handle.value ?? '') });
+    return _jsx(Value, { field: undefined, value: handle.value, el: el });
+}

package/dist/render/sort-rows.d.ts

@@ -0,0 +1,3 @@
+import type { FieldMeta } from '@coffer-org/sdk/fields';
+import type { FieldKeyCtx } from '../types.ts';
+export declare function sortByField(rows: Record<string, unknown>[], sortKey: string, dir: 'asc' | 'desc', fdef: FieldMeta | undefined, ctx: FieldKeyCtx): Record<string, unknown>[];

package/dist/render/sort-rows.js

@@ -0,0 +1,38 @@
+import { cellValue, magnitudeSub, subValue } from '@coffer-org/sdk/shelf';
+import { fieldKeys } from "./dispatch.js";
+function magnitudeOrder(fdef, sortKey) {
+    const sub = magnitudeSub(fdef);
+    if (sub === undefined) {
+        console.warn(`[sort] '${sortKey}' has no column to sort by; the order is unchanged.`);
+        return undefined;
+    }
+    const col = fdef.columns?.[sub];
+    return { sub, numeric: col === 'real' || col === 'integer' };
+}
+export function sortByField(rows, sortKey, dir, fdef, ctx) {
+    const order = fdef?.columns ? magnitudeOrder(fdef, sortKey) : undefined;
+    const magnitudeOf = (row) => subValue(cellValue(fdef, sortKey, row), order.sub);
+    if (order?.numeric) {
+        const numOf = (row) => {
+            const raw = magnitudeOf(row);
+            const n = raw == null || raw === '' ? NaN : Number(raw);
+            return Number.isFinite(n) ? n : -Infinity;
+        };
+        return [...rows].sort((a, b) => {
+            const cmp = numOf(a) - numOf(b);
+            return dir === 'asc' ? cmp : -cmp;
+        });
+    }
+    const keyOf = (row) => {
+        if (!fdef)
+            return String(row[sortKey] ?? '');
+        if (order)
+            return String(magnitudeOf(row) ?? '');
+        const k = fieldKeys(fdef, cellValue(fdef, sortKey, row), ctx)[0];
+        return k?.sort ?? k?.value ?? '';
+    };
+    return [...rows].sort((a, b) => {
+        const cmp = keyOf(a).localeCompare(keyOf(b), undefined, { numeric: true, sensitivity: 'base' });
+        return dir === 'asc' ? cmp : -cmp;
+    });
+}

package/dist/render/use-collection-rows.d.ts

@@ -0,0 +1,10 @@
+import type { ContainerNode, ValueNode } from '@coffer-org/sdk/fields';
+export declare function partField(el: ContainerNode, key: string | undefined): ValueNode | undefined;
+export type Row = Record<string, unknown>;
+export interface CollectionRowsApi {
+    rowId: (row: Row) => number;
+    updateRow: (idx: number, key: string, v: unknown) => void;
+    removeRow: (idx: number) => void;
+    addRow: () => void;
+}
+export declare function useCollectionRows(rows: Row[], onChange: (next: Row[]) => void): CollectionRowsApi;

package/dist/render/use-collection-rows.js

@@ -0,0 +1,11 @@
+import { isNamedField } from '@coffer-org/sdk/fields';
+import { useRowIdentity } from "./shared.js";
+export function partField(el, key) {
+    return el.fields.find((f) => isNamedField(f) && f.key === key);
+}
+export function useCollectionRows(rows, onChange) {
+    const { rowId, updateRow: replaceRow, removeRow } = useRowIdentity(rows, onChange);
+    const updateRow = (idx, key, v) => replaceRow(idx, { ...rows[idx], [key]: v });
+    const addRow = () => onChange([...rows, {}]);
+    return { rowId, updateRow, removeRow, addRow };
+}

package/dist/render/use-field-edit.d.ts

@@ -0,0 +1,28 @@
+import type { FieldMeta } from '@coffer-org/sdk/fields';
+export declare function isChecked(value: unknown): boolean;
+export declare function normalizeValue(field: Pick<FieldMeta, 'prim'>, value: unknown): unknown;
+export declare function commitDraft(next: unknown, onChange?: (v: unknown) => void | Promise<string | undefined>): Promise<{
+    ok: boolean;
+    error: string | undefined;
+}>;
+export declare function focusLeft(currentTarget: Element, related: EventTarget | null): boolean;
+export declare function useValueEdit(value: unknown, onChange?: (v: unknown) => void | Promise<string | undefined>, normalize?: (v: unknown) => unknown): {
+    editing: boolean;
+    draft: unknown;
+    setDraft: import("react").Dispatch<unknown>;
+    busy: boolean;
+    error: string | undefined;
+    beginEdit: () => void;
+    cancel: () => void;
+    commit: (next?: unknown) => Promise<void>;
+};
+export declare function useFieldEdit(field: FieldMeta, value: unknown, onChange?: (v: unknown) => void | Promise<string | undefined>): {
+    editing: boolean;
+    draft: unknown;
+    setDraft: import("react").Dispatch<unknown>;
+    busy: boolean;
+    error: string | undefined;
+    beginEdit: () => void;
+    cancel: () => void;
+    commit: (next?: unknown) => Promise<void>;
+};

package/dist/render/use-field-edit.js

@@ -0,0 +1,50 @@
+import { useEffect, useRef, useState } from 'react';
+export function isChecked(value) {
+    return value === 1 || value === true || value === '1' || value === 'true';
+}
+export function normalizeValue(field, value) {
+    if (field.prim === 'checkbox')
+        return isChecked(value);
+    return value == null ? '' : value;
+}
+export async function commitDraft(next, onChange) {
+    const err = await onChange?.(next);
+    const error = typeof err === 'string' ? err : undefined;
+    return { ok: !error, error };
+}
+export function focusLeft(currentTarget, related) {
+    return !(related instanceof Node) || !currentTarget.contains(related);
+}
+export function useValueEdit(value, onChange, normalize = (v) => v) {
+    const [editing, setEditing] = useState(false);
+    const norm = useRef(normalize);
+    norm.current = normalize;
+    const [draft, setDraft] = useState(() => normalize(value));
+    const [busy, setBusy] = useState(false);
+    const [error, setError] = useState(undefined);
+    useEffect(() => {
+        if (!editing)
+            setDraft(norm.current(value));
+    }, [editing, value]);
+    const beginEdit = () => {
+        setError(undefined);
+        setEditing(true);
+    };
+    const cancel = () => {
+        setDraft(norm.current(value));
+        setError(undefined);
+        setEditing(false);
+    };
+    const commit = async (next = draft) => {
+        setBusy(true);
+        const { ok, error: err } = await commitDraft(next, onChange);
+        setBusy(false);
+        setError(err);
+        if (ok)
+            setEditing(false);
+    };
+    return { editing, draft, setDraft, busy, error, beginEdit, cancel, commit };
+}
+export function useFieldEdit(field, value, onChange) {
+    return useValueEdit(value, onChange, (v) => normalizeValue(field, v));
+}

package/dist/render/use-file-upload.d.ts

@@ -0,0 +1,10 @@
+import type { FileRec } from './image.tsx';
+export declare const MAX_UPLOAD_BYTES: number;
+export declare function useFileUpload(): {
+    busy: boolean;
+    error: string | null;
+    progress: number;
+    upload: (file: File) => Promise<FileRec | null>;
+    retry: () => Promise<FileRec | null>;
+    canRetry: boolean;
+};