@coffer-org/web-ui 4.0.0

package/dist/render/widgets/edit.js

@@ -0,0 +1,283 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { clientToMeta, partValueKey, partValueKeys } from '@coffer-org/sdk/fields';
+import { resolveUnits } from '@coffer-org/sdk/units';
+import { parseJSON } from "../../lib/json.js";
+import { useRecordLabels, useRecordsByIds } from "../../lib/use-record-labels.js";
+import { recordOption } from "../../lib/record-option.js";
+import { getShelf } from "../../schema-registry.js";
+import { Input } from "../../components/ui/input.js";
+import { InputGroup, InputGroupAddon, InputGroupInput } from "../../components/ui/input-group.js";
+import { Button } from "../../components/ui/button.js";
+import { Combobox, ChipsCombobox } from "../../components/ui/select-combobox.js";
+import { Plus } from 'lucide-react';
+import { RecordInline } from "../../components/RecordInline.js";
+import { RemoveBtn, AddBtn, MultipleChips, CheckLegend, colsToCheckRow, checkRowToCols, Dash, } from "../shared.js";
+import { FieldSlot } from "../dispatch.js";
+import { FieldLabel } from "../chrome.js";
+import { measuredChipContent, measuredUnitLabel } from "./display.js";
+import { ChecklistRow } from "./checklist-row.js";
+import { ChecklistContent, clientChecklistContentFields } from "./checklist-content.js";
+import { FlowRow } from "./flow-row.js";
+export function RowWidget({ value, onChange, field, t, recordCtx = { library: '', shelf: '', recordId: '' }, }) {
+    const multiple = field.hints['rowMultiple'] === true;
+    const subs = field.hints['fields'] ?? [];
+    const unique = field.hints['unique'] ?? [];
+    const fixedSubs = new Set((field.parts ?? []).filter((p) => p.mode !== 'stored').map(partValueKey));
+    const idRef = useRef(0);
+    const keyed = (rs) => rs.map((data) => ({ id: ++idRef.current, data }));
+    const blank = () => Object.fromEntries(subs.map((s) => [s.key, '']));
+    const parse = () => {
+        const v = parseJSON(value, multiple ? [] : {});
+        if (multiple)
+            return Array.isArray(v) ? v : [];
+        return [v && !Array.isArray(v) && Object.keys(v).length ? v : blank()];
+    };
+    const [rows, setRows] = useState(() => keyed(parse()));
+    useEffect(() => {
+        if (!value)
+            setRows(multiple ? [] : keyed([blank()]));
+    }, [value]);
+    const rowFilled = (r) => subs.some((s) => {
+        const v = (r[s.key] ?? '').trim();
+        return s.prim === 'checkbox' ? v === 'true' : v !== '';
+    });
+    function save(next) {
+        setRows(next);
+        const filled = next.map((r) => r.data).filter(rowFilled);
+        if (multiple)
+            onChange(filled.length ? filled : '');
+        else
+            onChange(filled.length ? filled[0] : '');
+    }
+    function updateRow(idx, key, v) {
+        save(rows.map((r, i) => (i === idx ? { ...r, data: { ...r.data, [key]: String(v) } } : r)));
+    }
+    function usedElsewhere(key, idx) {
+        if (!unique.includes(key))
+            return [];
+        return rows
+            .filter((_, i) => i !== idx)
+            .map((r) => r.data[key] ?? '')
+            .filter(Boolean);
+    }
+    function renderRow({ id, data: row }, idx) {
+        return (_jsxs("div", { className: "flex items-start gap-2 flex-wrap border border-border rounded-xl p-3", children: [subs.map((sub) => fixedSubs.has(sub.key) ? (_jsxs("div", { className: "flex flex-col gap-0.5 flex-1 min-w-32", children: [sub.label ? _jsx(FieldLabel, { label: t(sub.label) }) : null, _jsx("div", { className: "flex h-9 items-center rounded-lg border border-transparent px-3 text-sm text-muted", children: row[sub.key] || _jsx(Dash, {}) })] }, sub.key)) : (_jsx("div", { className: "flex flex-col gap-0.5 flex-1 min-w-32", children: _jsx(FieldSlot, { field: clientToMeta(sub), value: sub.prim === 'checkbox' ? row[sub.key] === 'true' : (row[sub.key] ?? ''), excludeValues: usedElsewhere(sub.key, idx), onChange: (v) => updateRow(idx, sub.key, v), label: sub.label ? t(sub.label) : undefined, mode: "edit", recordCtx: recordCtx }) }, sub.key))), multiple && _jsx(RemoveBtn, { className: "mt-6", onClick: () => save(rows.filter((_, i) => i !== idx)) })] }, id));
+    }
+    return (_jsxs("div", { className: "flex flex-col gap-2.5", children: [rows.map(renderRow), multiple && _jsx(AddBtn, { onClick: () => setRows((r) => [...r, ...keyed([blank()])]), children: t('form.addRow') })] }));
+}
+export function MeasuredWidget({ value, onChange, field, }) {
+    const { t } = useTranslation();
+    const units = useMemo(() => resolveUnits(field.hints['units']) ?? [], [field.hints]);
+    const unitPart = field.parts?.find((p) => p.role === 'unit');
+    const unitFixed = unitPart != null && unitPart.mode !== 'stored';
+    const valuePart = field.parts?.find((p) => p.role === 'value');
+    const valueFixed = valuePart != null && valuePart.mode !== 'stored';
+    const slots = useMemo(() => partValueKeys((field.parts ?? [])), [field.parts]);
+    const vKey = slots['value'] ?? 'value';
+    const uKey = slots['unit'] ?? 'unit';
+    const pinnedUnit = unitFixed && typeof unitPart.value === 'string' ? unitPart.value : '';
+    const parsed = useMemo(() => {
+        const obj = value && typeof value === 'object'
+            ? value
+            : parseJSON(String(value), null);
+        if (obj == null || typeof obj !== 'object')
+            return { value: '', unit: pinnedUnit || (units[0]?.value ?? '') };
+        return { value: (obj[vKey] ?? ''), unit: (obj[uKey] ?? '') };
+    }, [value, units, pinnedUnit, vKey, uKey]);
+    const save = (next) => {
+        if (valueFixed) {
+            onChange({ [uKey]: next.unit });
+            return;
+        }
+        onChange(next.value !== ''
+            ? { [vKey]: next.value, [uKey]: next.unit }
+            : '');
+    };
+    return (_jsxs(InputGroup, { className: "min-w-0", children: [valueFixed ? (_jsx("div", { className: "flex h-9 flex-1 min-w-0 items-center px-3 text-sm text-muted", children: parsed.value === '' ? _jsx(Dash, {}) : String(parsed.value) })) : (_jsx(InputGroupInput, { type: "number", className: "min-w-0", value: parsed.value === '' ? '' : String(parsed.value), min: field.hints['min'], max: field.hints['max'], step: field.hints['step'] ?? 'any', onChange: (e) => {
+                    const n = parseFloat(e.target.value);
+                    save({ ...parsed, value: isNaN(n) ? '' : n });
+                }, placeholder: "0" })), _jsx(InputGroupAddon, { align: "inline-end", className: "pr-1", children: unitFixed ? (_jsx("span", { className: "px-2 text-xs text-muted", children: measuredUnitLabel(field, parsed.unit || pinnedUnit, t) })) : (_jsx(Combobox, { value: parsed.unit || '', onChange: (u) => save({ ...parsed, unit: u }), items: units.map((u) => ({ value: u.value, title: t(u.label) })), triggerClassName: "h-7 gap-1 border-0 bg-transparent px-2 text-muted shadow-none focus:ring-0" })) })] }));
+}
+export function RelationPickerWidget({ field, value, onChange, excludeValues, }) {
+    const { t } = useTranslation();
+    const library = field.relation?.library ?? '';
+    const shelf = field.relation?.shelf ?? '';
+    const multi = Boolean(field.hints['multi']);
+    const displayKey = String(field.hints['displayKey'] ?? 'name');
+    const filterQuery = useMemo(() => {
+        const f = field.relation?.filter;
+        if (!f)
+            return undefined;
+        return Object.fromEntries(Object.entries(f).map(([k, v]) => [k, String(v)]));
+    }, [field.relation?.filter]);
+    const { labelMap, records, loadState } = useRecordLabels(library, shelf, displayKey, filterQuery);
+    const m = getShelf(library, shelf);
+    const selected = useMemo(() => {
+        if (!value)
+            return [];
+        if (multi) {
+            if (Array.isArray(value))
+                return value.map(String);
+            return parseJSON(value, []).map(String);
+        }
+        return [String(value)];
+    }, [value, multi]);
+    const selectedMap = useRecordsByIds(library, shelf, selected);
+    const mergedRecords = useMemo(() => {
+        const byId = new Map(records.map((r) => [String(r.id), r]));
+        for (const [id, row] of selectedMap)
+            if (!byId.has(id))
+                byId.set(id, row);
+        return [...byId.values()];
+    }, [records, selectedMap]);
+    const items = useMemo(() => mergedRecords
+        .filter((r) => String(r.id) === String(value) || selected.includes(String(r.id)) || !excludeValues?.includes(String(r.id)))
+        .map((r) => {
+        const opt = m ? recordOption(m, r) : { title: String(r.id) };
+        const node = m ? _jsx(RecordInline, { shelf: m, row: r, size: "sm", height: 28 }) : undefined;
+        return { value: String(r.id), title: opt.title, icon: opt.icon, subtitle: opt.subtitle, node };
+    }), [mergedRecords, excludeValues, value, selected, m]);
+    const labelOf = (id) => labelMap.get(id) ?? items.find((it) => it.value === id)?.title ?? id;
+    if (loadState === 'loading')
+        return _jsx("p", { className: "text-muted text-sm py-1", children: t('form.loading') });
+    if (loadState === 'error')
+        return _jsx("p", { className: "text-danger text-sm py-1", children: t('form.loadError') });
+    if (!items.length)
+        return _jsx("p", { className: "text-muted text-sm py-1", children: t('form.noRecords') });
+    if (!multi)
+        return _jsx(Combobox, { value: value == null ? '' : String(value), onChange: onChange, items: items });
+    return (_jsx(ChipsCombobox, { selected: selected, items: items, placeholder: t('form.addRecord'), labelOf: labelOf, onChange: (next) => onChange(next.length ? next : '') }));
+}
+function emptyCheckRow(n) {
+    return { text: '', checks: Array(n).fill(false) };
+}
+export function CheckWidget({ value, onChange, field, recordCtx = { library: '', shelf: '', recordId: null }, }) {
+    const slots = field.hints['slots'] ?? [''];
+    const contentFields = clientChecklistContentFields(field.hints['fields']);
+    const [data, setData] = useState(() => parseJSON(value, {}));
+    useEffect(() => {
+        if (!value)
+            setData({});
+    }, [value, slots.length]);
+    const row = contentFields.length
+        ? {
+            text: String(data.text ?? ''),
+            checks: Array.from({ length: slots.length }, (_, i) => data['check' + i] === true),
+        }
+        : colsToCheckRow(value, slots.length);
+    function emit(next) {
+        setData(next);
+        const hasContent = contentFields.length
+            ? contentFields.some((f) => {
+                const v = next[f.key];
+                return v != null && v !== '' && !(Array.isArray(v) && v.length === 0);
+            })
+            : String(next.text ?? '').trim() !== '';
+        const legacyChecks = Array.isArray(next.checks) ? next.checks : [];
+        const hasChecks = slots.some((_, i) => next['check' + i] === true) || slots.some((_, i) => legacyChecks[i] === true);
+        if (contentFields.length)
+            onChange(hasContent || hasChecks ? next : '');
+        else {
+            const legacyRow = {
+                text: String(next.text ?? ''),
+                checks: slots.map((_, i) => next['check' + i] === true || legacyChecks[i] === true),
+            };
+            onChange(hasContent || hasChecks ? checkRowToCols(legacyRow) : '');
+        }
+    }
+    return (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx(ChecklistRow, { row: row, slotCount: slots.length, editing: true, onChange: (next) => {
+                    const updated = { ...data };
+                    slots.forEach((_, i) => {
+                        updated['check' + i] = next.checks[i] === true;
+                    });
+                    if (!contentFields.length)
+                        updated.text = next.text;
+                    emit(updated);
+                }, content: contentFields.length ? (_jsx(ChecklistContent, { fields: contentFields, row: data, editing: true, onChange: (key, value) => emit({ ...data, [key]: value }), recordCtx: recordCtx })) : undefined }), _jsx(CheckLegend, { slots: slots })] }));
+}
+export function MultiCheckInput({ value, onChange, field, }) {
+    const { t } = useTranslation();
+    const slots = field.hints['slots'] ?? [''];
+    const [rows, setRows] = useState(() => parseJSON(value, []));
+    useEffect(() => {
+        if (!value)
+            setRows([]);
+    }, [value]);
+    function save(next) {
+        setRows(next);
+        const filled = next.filter((r) => r.text.trim() !== '' || r.checks.some(Boolean));
+        onChange(filled.length ? filled : '');
+    }
+    return (_jsxs("div", { className: "flex flex-col gap-1.5 py-1", children: [rows.map((row, idx) => (_jsx(ChecklistRow, { row: row, slotCount: slots.length, editing: true, onChange: (r) => save(rows.map((x, i) => (i === idx ? r : x))), onRemove: () => save(rows.filter((_, i) => i !== idx)) }, idx))), _jsx(CheckLegend, { slots: slots }), _jsx(AddBtn, { onClick: () => setRows((r) => [...r, emptyCheckRow(slots.length)]), children: t('form.addItem') })] }));
+}
+export function KeyValueWidget({ value, onChange, multiple = true, option, keyLabel, valueLabel, recordCtx = { library: '', shelf: '', recordId: '' }, }) {
+    const { t } = useTranslation();
+    const kLabel = keyLabel ?? t('form.keyPlaceholder');
+    const vLabel = valueLabel ?? t('form.valuePlaceholderShort');
+    const [rows, setRows] = useState(() => {
+        if (Array.isArray(value))
+            return value;
+        if (!value)
+            return [];
+        return parseJSON(value, []);
+    });
+    useEffect(() => {
+        if (!value || (Array.isArray(value) && value.length === 0) || value === '[]')
+            setRows([]);
+    }, [value]);
+    function save(next) {
+        setRows(next);
+        const valid = next.filter((p) => p.key.trim());
+        onChange(valid.length ? valid.map((p) => ({ key: p.key.trim(), value: p.value })) : '');
+    }
+    function updatePairValue(i, v) {
+        save(rows.map((x, idx) => (idx === i ? { ...x, value: v } : x)));
+    }
+    const canAdd = multiple || rows.length < 1;
+    return (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(FlowRow, { items: rows.map((item, idx) => ({
+                    key: String(idx),
+                    node: (_jsxs("div", { className: "flex flex-col gap-0.5 w-56 max-w-full min-w-0", children: [_jsxs("div", { className: "flex items-center gap-1 min-w-0", children: [_jsx(Input, { placeholder: kLabel, value: item.key, className: "h-6 px-1 min-w-0 text-[11px] font-semibold uppercase text-muted", autoComplete: "off", onChange: (e) => save(rows.map((x, i) => (i === idx ? { ...x, key: e.target.value } : x))) }), _jsx(RemoveBtn, { onClick: () => save(rows.filter((_, i) => i !== idx)) })] }), _jsx(FieldSlot, { bare: true, field: option, value: item.value, mode: "edit", onChange: (v) => updatePairValue(idx, String(v)), recordCtx: recordCtx })] })),
+                })) }), canAdd && (_jsxs(AddBtn, { onClick: () => setRows((r) => [...r, { key: '', value: '' }]), children: [kLabel, "/", vLabel] }))] }));
+}
+function parseMeasuredItems(value) {
+    const isItem = (x) => !!x && typeof x === 'object' && 'unit' in x;
+    if (Array.isArray(value))
+        return value.filter(isItem);
+    try {
+        const parsed = JSON.parse(String(value ?? ''));
+        if (Array.isArray(parsed)) {
+            return parsed
+                .map((it) => {
+                if (isItem(it))
+                    return it;
+                try {
+                    return JSON.parse(String(it));
+                }
+                catch {
+                    return null;
+                }
+            })
+                .filter(Boolean);
+        }
+    }
+    catch {
+    }
+    return [];
+}
+export function MeasuredMultiInput({ field, value, onChange, }) {
+    const { t } = useTranslation();
+    const items = useMemo(() => parseMeasuredItems(value), [value]);
+    const [draft, setDraft] = useState('');
+    function save(next) {
+        onChange(next.length ? next : '');
+    }
+    function add() {
+        if (!draft || typeof draft !== 'object' || draft.value === '')
+            return;
+        save([...items, draft]);
+        setDraft('');
+    }
+    return (_jsx(MultipleChips, { items: items, content: measuredChipContent(field, t), onRemove: (idx) => save(items.filter((_, i) => i !== idx)), editor: _jsxs("div", { className: "flex gap-2 items-center min-w-0", children: [_jsx("div", { className: "flex-1 min-w-0", children: _jsx(MeasuredWidget, { value: draft, onChange: (v) => setDraft(v), field: field }) }), _jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: add, children: _jsx(Plus, { size: 14 }) })] }) }));
+}

package/dist/render/widgets/fixed-collection.d.ts

@@ -0,0 +1,11 @@
+import type { ContainerNode } from '@coffer-org/sdk/fields';
+import type { RecordCtx, FieldMode } from '../../types.ts';
+type Row = Record<string, unknown>;
+export declare function FixedCollection({ group, value, onChange, recordCtx, mode, }: {
+    group: ContainerNode;
+    value: unknown;
+    onChange: (v: Row[]) => void;
+    recordCtx: RecordCtx;
+    mode?: FieldMode;
+}): import("react").JSX.Element;
+export {};

package/dist/render/widgets/fixed-collection.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation } from 'react-i18next';
+import { isNamedField } from '@coffer-org/sdk/fields';
+import { optionLabel as fmtOptionLabel, fieldOptions } from "../../lib/format.js";
+import { FieldSlot } from "../dispatch.js";
+import { FieldLabel, Rail, STACK, GroupTitle, groupIcon, useGroupDepth, groupScopeClass } from "../chrome.js";
+import { FlowRow } from "./flow-row.js";
+import { subFull } from "./group.js";
+import { useGroupEdit } from "./group-edit.js";
+import { useHybridScope } from "../hybrid-scope.js";
+export function FixedCollection({ group, value, onChange, recordCtx, mode = 'edit', }) {
+    const { t } = useTranslation();
+    const depth = useGroupDepth();
+    const g = useGroupEdit(mode, value, (v) => onChange(v));
+    const editing = g.mode !== 'view';
+    const live = useHybridScope() && mode === 'view';
+    const byKey = group.view?.by;
+    const by = group.fields.find((f) => isNamedField(f) && f.key === byKey);
+    const valueFields = group.fields.filter((f) => isNamedField(f) && f.key !== byKey);
+    const byOpts = fieldOptions(by.type);
+    const stored = Array.isArray(g.value) ? g.value : [];
+    const rows = byOpts.map((opt) => stored.find((r) => String(r[by.key] ?? '') === String(opt.value)) ?? { [by.key]: opt.value });
+    function commit(next) {
+        g.onChange(next.filter((r) => valueFields.some((f) => r[f.key] != null && r[f.key] !== '')));
+    }
+    function update(idx, key, v) {
+        commit(rows.map((r, i) => (i === idx ? { ...r, [key]: v } : r)));
+    }
+    return (_jsxs("fieldset", { className: `${groupScopeClass(depth)} flex flex-col min-w-0 ${STACK}`, children: [_jsx(GroupTitle, { as: "legend", label: t(group.label), icon: groupIcon(group), actions: live ? null : g.actions }), _jsx("div", { className: `flex flex-col ${STACK}`, children: rows.map((row, idx) => (_jsx(Rail, { children: _jsxs("div", { className: "flex items-start gap-2", children: [_jsxs("div", { className: "flex flex-col gap-0.5 min-w-0 shrink-0", children: [by.type.label ? _jsx(FieldLabel, { label: t(by.type.label) }) : null, _jsx("span", { className: "text-sm px-1 py-2", children: fmtOptionLabel(t, { options: byOpts }, String(row[by.key] ?? '')) })] }), _jsx("div", { className: "flex-1 min-w-0", children: _jsx(FlowRow, { items: valueFields.map((sub) => ({
+                                        key: sub.key,
+                                        full: subFull(sub.type),
+                                        node: editing ? (_jsx("div", { className: "flex flex-col gap-0.5 min-w-0", children: _jsx(FieldSlot, { field: sub.type, value: row[sub.key] ?? '', onChange: (v) => update(idx, sub.key, v), label: sub.type.label ? t(sub.type.label) : undefined, mode: "edit", recordCtx: recordCtx }) })) : (_jsxs("div", { className: "flex flex-col gap-0.5 min-w-0", children: [sub.type.label ? _jsx(FieldLabel, { label: t(sub.type.label) }) : null, _jsx(FieldSlot, { field: sub.type, fieldKey: live ? sub.key : undefined, value: row[sub.key] ?? '', onChange: live ? (v) => update(idx, sub.key, v) : undefined, mode: "view", bare: !live, recordCtx: recordCtx })] })),
+                                    })) }) })] }) }, String(row[by.key])))) })] }));
+}

package/dist/render/widgets/flow-row.d.ts

@@ -0,0 +1,14 @@
+export interface GridItem {
+    key: string;
+    node: React.ReactNode;
+    full?: boolean;
+    span?: number;
+}
+export declare const FlowCtx: import("react").Context<boolean>;
+export declare const useInFlow: () => boolean;
+export type FlowItem = GridItem;
+export declare function getSpanClass(span?: number): string;
+export declare function FlowRow({ items, scroll }: {
+    items: FlowItem[];
+    scroll?: boolean;
+}): import("react").JSX.Element;

package/dist/render/widgets/flow-row.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from 'react';
+export const FlowCtx = createContext(false);
+export const useInFlow = () => useContext(FlowCtx);
+export function getSpanClass(span) {
+    if (!span || span >= 12)
+        return 'col-span-12 min-w-0';
+    if (span >= 9)
+        return 'col-span-12 @lg:col-span-9 min-w-0';
+    if (span >= 8)
+        return 'col-span-12 @md:col-span-8 min-w-0';
+    if (span >= 6)
+        return 'col-span-12 @sm:col-span-6 min-w-0';
+    if (span >= 4)
+        return 'col-span-12 @sm:col-span-6 @md:col-span-4 min-w-0';
+    if (span >= 3)
+        return 'col-span-6 @sm:col-span-6 @md:col-span-3 min-w-0';
+    if (span === 2)
+        return 'col-span-6 @sm:col-span-4 @md:col-span-2 min-w-0';
+    return 'col-span-12 @sm:col-span-6 @md:col-span-4 min-w-0';
+}
+export function FlowRow({ items, scroll }) {
+    if (scroll) {
+        return (_jsx(FlowCtx.Provider, { value: true, children: _jsx("div", { className: "flex gap-x-3 gap-y-2 items-start flex-nowrap overflow-x-auto", children: items.map((it) => (_jsx("div", { className: it.full ? 'basis-full min-w-0' : 'flex-none min-w-0 max-w-[min(16rem,100%)]', children: it.node }, it.key))) }) }));
+    }
+    return (_jsx(FlowCtx.Provider, { value: true, children: _jsx("div", { className: "@container grid grid-cols-12 gap-x-3.5 gap-y-3 items-start", children: items.map((it) => (_jsx("div", { className: it.full ? 'col-span-12 min-w-0' : getSpanClass(it.span), children: it.node }, it.key))) }) }));
+}

package/dist/render/widgets/group-edit.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode } from 'react';
+import type { FieldMode } from '../../types.ts';
+export type GroupEditState = {
+    mode: FieldMode;
+    value: unknown;
+    onChange: (v: unknown) => void;
+    actions: ReactNode;
+};
+export declare function useGroupEdit(mode: FieldMode, value: unknown, onChange: (v: unknown) => void | Promise<string | undefined>): GroupEditState;

package/dist/render/widgets/group-edit.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useValueEdit } from "../use-field-edit.js";
+import { EditToggle, SaveCancel } from "../chrome.js";
+export function useGroupEdit(mode, value, onChange) {
+    const ge = useValueEdit(value, onChange);
+    if (mode !== 'view') {
+        return { mode, value, onChange: (v) => onChange(v), actions: null };
+    }
+    if (!ge.editing) {
+        return {
+            mode: 'view',
+            value,
+            onChange: (v) => onChange(v),
+            actions: _jsx(EditToggle, { scope: "group", onEdit: ge.beginEdit }),
+        };
+    }
+    return {
+        mode: 'edit',
+        value: ge.draft,
+        onChange: ge.setDraft,
+        actions: _jsx(SaveCancel, { size: "xs", busy: ge.busy, onSave: () => ge.commit(), onCancel: ge.cancel }),
+    };
+}

package/dist/render/widgets/group-field.d.ts

@@ -0,0 +1,9 @@
+import type { ContainerNode } from '@coffer-org/sdk/fields';
+import type { RecordCtx, FieldMode } from '../../types.ts';
+export declare function GroupField({ group, value, onChange, recordCtx, mode, }: {
+    group: ContainerNode;
+    value: unknown;
+    onChange: (v: unknown) => void;
+    recordCtx: RecordCtx;
+    mode: FieldMode;
+}): import("react").JSX.Element | null;

package/dist/render/widgets/group-field.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation } from 'react-i18next';
+import { isNamedField, isCollectionGroup, isEmbeddedGroup, isStorageGroup } from '@coffer-org/sdk/fields';
+import { resolveRenderer } from "../../registry.js";
+import { FieldSlot } from "../dispatch.js";
+import { useFieldErrors } from "../field-errors.js";
+import { STACK, GroupTitle, Rail, groupIcon } from "../chrome.js";
+import { CollectionGroup, subFull } from "./group.js";
+import { TableGroup } from "./table-group.js";
+import { FlowRow } from "./flow-row.js";
+import { FixedCollection } from "./fixed-collection.js";
+import { useHybridScope } from "../hybrid-scope.js";
+import { SlotProvider } from "../slot.js";
+export function GroupField({ group, value, onChange, recordCtx, mode, }) {
+    const { t } = useTranslation();
+    const live = useHybridScope() && mode === 'view';
+    const errorAt = useFieldErrors();
+    const custom = group.kind ? resolveRenderer({ kind: group.kind }) : undefined;
+    if (custom) {
+        return (_jsx(SlotProvider, { field: group, value: value, commit: onChange, children: _jsx(custom.Page, { el: group, value: value, mode: mode, recordCtx: recordCtx }) }));
+    }
+    if (isCollectionGroup(group) && group.fixed) {
+        return (_jsx(FixedCollection, { group: group, value: value, onChange: (v) => onChange(v), recordCtx: recordCtx, mode: mode }));
+    }
+    if (isCollectionGroup(group) && group.display === 'scroll') {
+        return (_jsx(TableGroup, { group: group, value: value, onChange: (v) => onChange(v), recordCtx: recordCtx, mode: mode }));
+    }
+    if (isCollectionGroup(group)) {
+        return (_jsx(CollectionGroup, { group: group, value: value, onChange: (v) => onChange(v), recordCtx: recordCtx, mode: mode }));
+    }
+    if (isEmbeddedGroup(group)) {
+        const obj = value ?? {};
+        const set = (k, v) => onChange({ ...obj, [k]: v });
+        const fieldItems = group.fields.filter((f) => isNamedField(f));
+        return (_jsxs("fieldset", { className: `flex flex-col min-w-0 ${STACK}`, children: [_jsx(GroupTitle, { as: "legend", label: t(group.label), icon: groupIcon(group) }), _jsx(Rail, { children: _jsx(FlowRow, { items: fieldItems.map((sub) => ({
+                            key: sub.key,
+                            full: subFull(sub.type),
+                            node: (_jsx(FieldSlot, { field: sub.type, fieldKey: live ? sub.key : undefined, value: obj[sub.key] ?? '', onChange: (v) => set(sub.key, v), label: sub.type.label ? t(sub.type.label) : undefined, mode: mode, recordCtx: recordCtx, error: isStorageGroup(group) ? errorAt([group.key, sub.key]) : undefined })),
+                        })) }) })] }));
+    }
+    return null;
+}

package/dist/render/widgets/group-widgets.d.ts

@@ -0,0 +1,2 @@
+import './illustrated-group.tsx';
+import './attachment-group.tsx';

package/dist/render/widgets/group-widgets.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation } from 'react-i18next';
+import { registerRenderer } from "../../registry.js";
+import { STACK, FieldLabel } from "../chrome.js";
+import { useHybridScope } from "../hybrid-scope.js";
+import { PopoverField } from "../popover-field.js";
+import { useSlot } from "../slot.js";
+import { WeekdayGrid } from "./weekday-grid.js";
+import { UrlWidget } from "./url-widget.js";
+import { ChecklistGroup } from "./checklist-group.js";
+import "./illustrated-group.js";
+import "./attachment-group.js";
+function WeekdayGroupPage({ el, value, mode, bare }) {
+    const { t } = useTranslation();
+    const { write } = useSlot();
+    const group = el;
+    const widget = _jsx(WeekdayGrid, { group: group, value: value, onChange: (v) => void write(v), mode: mode });
+    if (bare)
+        return widget;
+    return (_jsxs("div", { className: `group/field flex flex-col min-w-0 ${STACK}`, children: [group.label && _jsx(FieldLabel, { label: t(group.label) }), widget] }));
+}
+const URL_META = { kind: 'url', prim: 'text', column: 'text', label: '', required: false, hints: {} };
+function UrlGroupPage({ el, value, mode, bare }) {
+    const { t } = useTranslation();
+    const slot = useSlot();
+    const group = el;
+    const hybrid = useHybridScope();
+    const widget = (m, v, set) => (_jsx(UrlWidget, { value: v, onChange: (nv) => set(nv), mode: m }));
+    if (bare)
+        return widget(mode !== 'view' ? 'edit' : 'view', value, (v) => void slot.write(v));
+    if (hybrid && slot.writable)
+        return (_jsx(PopoverField, { field: URL_META, value: value, label: group.label ? t(group.label) : undefined, geom: "none", width: "w-full", view: (v) => widget('view', v, () => { }), edit: (v, set) => widget('edit', v, set), onCommit: slot.write }));
+    return (_jsxs("div", { className: `group/field flex flex-col min-w-0 ${STACK}`, children: [group.label && _jsx(FieldLabel, { label: t(group.label) }), widget(mode !== 'view' ? 'edit' : 'view', value, (v) => void slot.write(v))] }));
+}
+function ChecklistPage({ el, value, recordCtx, mode }) {
+    const { write } = useSlot();
+    return (_jsx(ChecklistGroup, { group: el, value: value, onChange: (v) => void write(v), recordCtx: recordCtx, mode: mode }));
+}
+registerRenderer({ kinds: ['per-weekday'], layout: 'block', Page: WeekdayGroupPage, editor: 'custom' });
+registerRenderer({ kinds: ['url'], layout: 'block', Page: UrlGroupPage });
+registerRenderer({ kinds: ['checklist'], layout: 'block', Page: ChecklistPage, editor: 'custom' });

package/dist/render/widgets/group.d.ts

@@ -0,0 +1,26 @@
+import { type ReactNode } from 'react';
+import type { ContainerNode, ValueNode } from '@coffer-org/sdk/fields';
+import type { RecordCtx, FieldMode } from '../../types.ts';
+export declare const subFull: (f: ValueNode["type"]) => boolean;
+export type Row = Record<string, unknown>;
+export declare function CollectionWidget({ group, value, onChange, recordCtx, }: {
+    group: ContainerNode;
+    value: unknown;
+    onChange: (v: Row[]) => void;
+    recordCtx: RecordCtx;
+}): import("react").JSX.Element;
+export declare function CollectionGroup({ group, value, onChange, recordCtx, mode, }: {
+    group: ContainerNode;
+    value: unknown;
+    onChange: (v: Row[]) => void;
+    recordCtx: RecordCtx;
+    mode: FieldMode;
+}): import("react").JSX.Element;
+export declare function CollectionView({ group, value, onChange, recordCtx, actions, editable, }: {
+    group: ContainerNode;
+    value: unknown;
+    onChange: (v: Row[]) => void;
+    recordCtx: RecordCtx;
+    actions?: ReactNode;
+    editable?: boolean;
+}): import("react").JSX.Element;