@coffer-org/web-ui 4.0.0

package/dist/render/use-file-upload.js

@@ -0,0 +1,35 @@
+import { useState } from 'react';
+import { uploadFile } from "../host-services.js";
+export const MAX_UPLOAD_BYTES = 25 * 1024 * 1024;
+export function useFileUpload() {
+    const [busy, setBusy] = useState(false);
+    const [progress, setProgress] = useState(0);
+    const [error, setError] = useState(null);
+    const [failedFile, setFailedFile] = useState(null);
+    async function upload(file) {
+        setError(null);
+        if (file.size > MAX_UPLOAD_BYTES) {
+            setFailedFile(null);
+            setError('upload.tooLarge');
+            return null;
+        }
+        setBusy(true);
+        setProgress(0);
+        const rec = await uploadFile(file, setProgress);
+        setBusy(false);
+        if (!rec) {
+            setFailedFile(file);
+            setError('upload.failed');
+            setProgress(0);
+            return null;
+        }
+        setFailedFile(null);
+        return rec;
+    }
+    async function retry() {
+        if (!failedFile || busy)
+            return null;
+        return upload(failedFile);
+    }
+    return { busy, error, progress, upload, retry, canRetry: failedFile !== null };
+}

package/dist/render/use-form-bridge.d.ts

@@ -0,0 +1,21 @@
+import { type FieldMeta } from '@coffer-org/sdk/fields';
+import type { FieldMode, RecordCtx } from '../types.ts';
+import type { FormBridge } from './form-types.ts';
+type Values = Record<string, unknown>;
+export declare function useFormBridge(opts: {
+    fm: Record<string, FieldMeta>;
+    mode: FieldMode;
+    recordCtx: RecordCtx;
+    initial: Values | (() => Values);
+    hiddenFields?: string[];
+}): {
+    values: Values;
+    setValues: React.Dispatch<React.SetStateAction<Values>>;
+    initial: Values;
+    errors: Record<string, string>;
+    setErrors: React.Dispatch<React.SetStateAction<Record<string, string>>>;
+    touched: Set<string>;
+    setTouched: React.Dispatch<React.SetStateAction<Set<string>>>;
+    bridge: FormBridge;
+};
+export {};

package/dist/render/use-form-bridge.js

@@ -0,0 +1,53 @@
+import { useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { resolveFlag } from '@coffer-org/sdk/condition';
+import { validateField } from '@coffer-org/sdk/fields';
+import { makeIssueText } from "./field-errors.js";
+export function useFormBridge(opts) {
+    const { fm, mode, recordCtx } = opts;
+    const { t } = useTranslation();
+    const issueText = makeIssueText(t);
+    const [initial] = useState(opts.initial);
+    const [values, setValues] = useState(initial);
+    const [errors, setErrors] = useState({});
+    const [touched, setTouched] = useState(() => new Set());
+    const hidden = useMemo(() => new Set(opts.hiddenFields ?? []), [opts.hiddenFields]);
+    const bridge = useMemo(() => ({
+        mode,
+        recordCtx,
+        values,
+        getValue: (k) => values[k],
+        setValue: (k, v) => {
+            setValues((s) => ({ ...s, [k]: v }));
+            if (touched.has(k)) {
+                const f = fm[k];
+                const issue = f ? validateField(f, v) : null;
+                setErrors((e) => {
+                    const next = { ...e };
+                    if (issue)
+                        next[k] = issueText(issue.code, issue.params);
+                    else
+                        delete next[k];
+                    return next;
+                });
+            }
+        },
+        touch: (k) => {
+            setTouched((s) => (s.has(k) ? s : new Set(s).add(k)));
+            const f = fm[k];
+            const issue = f ? validateField(f, values[k]) : null;
+            setErrors((e) => {
+                const next = { ...e };
+                if (issue)
+                    next[k] = issueText(issue.code, issue.params);
+                else
+                    delete next[k];
+                return next;
+            });
+        },
+        isHidden: (k) => hidden.has(k) || resolveFlag(fm[k]?.hidden, values),
+        requiredOf: (k) => resolveFlag(fm[k]?.required, values),
+        error: (k) => errors[k],
+    }), [values, errors, touched, hidden, fm, mode, recordCtx, issueText]);
+    return { values, setValues, initial, errors, setErrors, touched, setTouched, bridge };
+}

package/dist/render/use-hybrid.d.ts

@@ -0,0 +1,2 @@
+import type { FieldMeta } from '@coffer-org/sdk/fields';
+export declare function useHybrid(field: Pick<FieldMeta, 'kind' | 'prim' | 'hints'>): boolean;

package/dist/render/use-hybrid.js

@@ -0,0 +1,5 @@
+import { useHybridScope } from "./hybrid-scope.js";
+import { liveKind } from "./live-kind.js";
+export function useHybrid(field) {
+    return useHybridScope() && liveKind(field) !== null;
+}

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { registerRenderer } from "../../registry.js";
+import { Input } from "../../components/ui/input.js";
+import { Dash, compositeRoleValue } from "../shared.js";
+import { twoCellGroupPage } from "./two-cell-group.js";
+import { ReadOnlyFiles, SingleFileWidget } from "../core/file.js";
+import { AttachmentBody, AttachmentStack, attachmentSlots, attachmentFileKind, attachmentRoleFixed, AttachmentFileCell, AttachmentLabelCell, } from "../core/attachment.js";
+function AttachmentRowEdit({ meta, row, onChange }) {
+    const { lKey, fKey } = attachmentSlots(meta);
+    const kind = attachmentFileKind(meta);
+    const label = row[lKey];
+    const file = row[fKey];
+    const labelFixed = attachmentRoleFixed(meta, 'label');
+    const fileFixed = attachmentRoleFixed(meta, 'file');
+    return (_jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-2", children: [labelFixed ? (_jsx("p", { className: "text-[15px] text-muted", children: label != null && label !== '' ? String(label) : _jsx(Dash, {}) })) : (_jsx(Input, { value: label == null ? '' : String(label), onChange: (e) => onChange({ ...row, [lKey]: compositeRoleValue(e.target.value) }) })), fileFixed ? (_jsx(ReadOnlyFiles, { kind: kind, value: file ?? '' })) : (_jsx(SingleFileWidget, { kind: kind, value: file ?? '', onChange: (v) => onChange({ ...row, [fKey]: compositeRoleValue(v) }) }))] }));
+}
+function AttachmentRowLive({ meta, row, onChange }) {
+    const { lKey, fKey } = attachmentSlots(meta);
+    const kind = attachmentFileKind(meta);
+    const label = row[lKey];
+    const file = row[fKey];
+    const labelPart = meta.parts?.find((p) => p.role === 'label');
+    const labelFixed = attachmentRoleFixed(meta, 'label');
+    const fileFixed = attachmentRoleFixed(meta, 'file');
+    return (_jsx("div", { className: "min-w-0 flex-1", children: _jsx(AttachmentStack, { name: _jsx(AttachmentLabelCell, { label: label, fixed: labelFixed, meta: labelPart?.meta ?? meta, onChange: labelFixed ? undefined : (v) => onChange({ ...row, [lKey]: compositeRoleValue(v) }) }), file: _jsx(AttachmentFileCell, { file: file, fixed: fileFixed, kind: kind, onChange: fileFixed ? undefined : (v) => onChange({ ...row, [fKey]: compositeRoleValue(v) }) }) }) }));
+}
+const AttachmentGroupPage = twoCellGroupPage({
+    kind: 'attachment',
+    testid: 'attachment-list',
+    rowGap: 'gap-3',
+    RowEdit: AttachmentRowEdit,
+    RowLive: AttachmentRowLive,
+    Body: AttachmentBody,
+});
+registerRenderer({ kinds: ['attachmentList'], layout: 'block', Page: AttachmentGroupPage, editor: 'custom' });

package/dist/render/widgets/checklist-content.d.ts

@@ -0,0 +1,15 @@
+import { type FieldMeta, type RowSubField } from '@coffer-org/sdk/fields';
+import type { RecordCtx } from '../../types.ts';
+export type ChecklistContentField = {
+    key: string;
+    type: FieldMeta;
+};
+export declare function clientChecklistContentFields(fields: RowSubField[] | undefined): ChecklistContentField[];
+export declare function ChecklistContent({ fields, row, editing, onChange, recordCtx, error, }: {
+    fields: ChecklistContentField[];
+    row: Record<string, unknown>;
+    editing: boolean;
+    onChange?: (key: string, value: unknown) => void;
+    recordCtx: RecordCtx;
+    error?: (key: string) => string | undefined;
+}): import("react").JSX.Element;

package/dist/render/widgets/checklist-content.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { clientToMeta } from '@coffer-org/sdk/fields';
+import { Input } from "../../components/ui/input.js";
+import { FieldSlot } from "../dispatch.js";
+import { useHybridScope } from "../hybrid-scope.js";
+export function clientChecklistContentFields(fields) {
+    return (fields ?? []).map((field) => ({ key: field.key, type: clientToMeta(field) }));
+}
+export function ChecklistContent({ fields, row, editing, onChange, recordCtx, error, }) {
+    const live = useHybridScope() && !editing;
+    return (_jsx("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: fields.map((field) => (_jsx("span", { className: "min-w-0 flex-1", children: field.type.kind === 'text' && editing ? (_jsx(Input, { value: String(row[field.key] ?? ''), onChange: (event) => onChange?.(field.key, event.target.value), className: "min-w-0 w-full" })) : (_jsx(FieldSlot, { field: field.type, fieldKey: live ? field.key : undefined, value: row[field.key] ?? '', mode: editing ? 'edit' : 'view', bare: !live, recordCtx: recordCtx, onChange: editing || live ? (value) => onChange?.(field.key, value) : undefined, error: error?.(field.key) })) }, field.key))) }));
+}

package/dist/render/widgets/checklist-group.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 ChecklistGroup({ 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/checklist-group.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation } from 'react-i18next';
+import { isNamedField } from '@coffer-org/sdk/fields';
+import { AddBtn, CheckLegend, useRowIdentity } from "../shared.js";
+import { useGroupDepth, GroupDepthProvider, groupScopeClass } from "../chrome.js";
+import { useGroupEdit } from "./group-edit.js";
+import { useHybridScope } from "../hybrid-scope.js";
+import { ChecklistRow } from "./checklist-row.js";
+import { ChecklistContent } from "./checklist-content.js";
+import { PopoverField } from "../popover-field.js";
+import { Checkbox } from "../../components/ui/checkbox.js";
+export function ChecklistGroup({ group, value, onChange, recordCtx, mode, }) {
+    const { t } = useTranslation();
+    const depth = useGroupDepth();
+    const boolCols = group.fields.filter((f) => isNamedField(f) && /^check\d+$/.test(f.key));
+    const contentCols = group.fields.filter((f) => isNamedField(f) && !/^check\d+$/.test(f.key));
+    const contentFields = contentCols.map((field) => ({ key: field.key, type: field.type }));
+    const textCol = contentCols.find((f) => f.key === 'text');
+    const slots = boolCols.map((f) => f.type.label ?? '');
+    const g = useGroupEdit(mode, value, (v) => onChange(v));
+    const rows = Array.isArray(g.value) ? g.value : [];
+    const { rowId, updateRow, removeRow } = useRowIdentity(rows, g.onChange);
+    const controlled = g.mode !== 'view';
+    const live = useHybridScope() && mode === 'view';
+    const rowTools = controlled || live;
+    const toChecklistRow = (row) => ({
+        text: textCol ? String(row[textCol.key] ?? '') : '',
+        checks: boolCols.map((col) => row[col.key] === true),
+    });
+    const fromChecklistRow = (row, source) => {
+        const next = { ...source };
+        boolCols.forEach((col, i) => {
+            next[col.key] = row.checks[i] === true;
+        });
+        if (textCol)
+            next[textCol.key] = row.text;
+        return next;
+    };
+    const checkCell = (row, idx, col) => (_jsx(PopoverField, { field: { ...col.type, hints: { ...col.type.hints, noLabel: true } }, label: col.type.label ? t(col.type.label) : undefined, value: row[col.key] === true, geom: "none", width: "w-fit", view: (v, commit) => (_jsx(Checkbox, { checked: v === true, disabled: !commit, "aria-label": col.type.label ? t(col.type.label) : undefined, onCheckedChange: (c) => commit?.(c === true) })), edit: (v, set) => _jsx(Checkbox, { checked: v === true, onCheckedChange: (c) => set(c === true) }), onCommit: (v) => updateRow(idx, { ...row, [col.key]: v === true }) }, col.key));
+    const content = (_jsxs("div", { className: "flex flex-col gap-2 min-w-0", children: [_jsx("ul", { className: "flex flex-col gap-1.5", children: rows.map((row, idx) => {
+                    const checklistRow = toChecklistRow(row);
+                    return (_jsx("li", { children: _jsx(ChecklistRow, { row: checklistRow, slotCount: slots.length, editing: controlled, checkCells: live ? boolCols.map((col) => checkCell(row, idx, col)) : undefined, onChange: (next) => updateRow(idx, fromChecklistRow(next, row)), onRemove: rowTools ? () => removeRow(idx) : undefined, content: _jsx(ChecklistContent, { fields: contentFields, row: row, editing: controlled, onChange: (key, value) => updateRow(idx, { ...row, [key]: value }), recordCtx: recordCtx }) }) }, rowId(row)));
+                }) }), rowTools && _jsx(AddBtn, { onClick: () => g.onChange([...rows, {}]), children: t('form.addRow') }), _jsx(CheckLegend, { slots: slots })] }));
+    if (mode !== 'view')
+        return content;
+    return (_jsxs("section", { className: `${groupScopeClass(depth)} flex flex-col gap-1 min-w-0`, children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("h3", { className: "text-[13px] font-semibold text-accent", children: t(group.label) }), !live && g.actions && _jsx("span", { className: "ml-auto flex shrink-0 items-center gap-1.5", children: g.actions })] }), _jsx(GroupDepthProvider, { depth: depth + 1, children: content })] }));
+}

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

@@ -0,0 +1,14 @@
+import type { ReactNode } from 'react';
+export type ChecklistRowValue = {
+    text: string;
+    checks: boolean[];
+};
+export declare function ChecklistRow({ row, slotCount, editing, onChange, onRemove, checkCells, content, }: {
+    row: ChecklistRowValue;
+    slotCount: number;
+    editing?: boolean;
+    onChange?: (row: ChecklistRowValue) => void;
+    onRemove?: () => void;
+    checkCells?: ReactNode[];
+    content?: ReactNode;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Trash2 } from 'lucide-react';
+import { Button } from "../../components/ui/button.js";
+import { Checkbox } from "../../components/ui/checkbox.js";
+import { Input } from "../../components/ui/input.js";
+import { useTranslation } from 'react-i18next';
+import { checkNumbered, circledNum } from "../shared.js";
+export function ChecklistRow({ row, slotCount, editing, onChange, onRemove, checkCells, content, }) {
+    const { t } = useTranslation();
+    const checks = Array.from({ length: slotCount }, (_, i) => Boolean(row.checks[i]));
+    const numbered = checkNumbered(slotCount);
+    return (_jsxs("div", { className: "flex items-center gap-3.5 min-h-9 text-sm min-w-0", children: [checks.map((checked, i) => (_jsxs("span", { className: "inline-flex items-center gap-0.5 shrink-0", children: [numbered && _jsx("span", { className: "text-[10px] text-muted tabular-nums", children: circledNum(i) }), editing ? (_jsx(Checkbox, { checked: checked, onCheckedChange: (next) => onChange?.({ ...row, checks: checks.map((value, j) => (j === i ? next === true : value)) }) })) : ((checkCells?.[i] ?? (_jsx(Checkbox, { checked: checked, disabled: true, tabIndex: -1, "aria-readonly": true, className: "pointer-events-none" }))))] }, i))), content ??
+                (editing ? (_jsx(Input, { value: row.text, onChange: (event) => onChange?.({ ...row, text: event.target.value }), className: "min-w-0 flex-1" })) : (_jsx("span", { className: "min-w-0 flex-1 truncate text-sm text-text", children: row.text || '—' }))), onRemove && (_jsx(Button, { type: "button", variant: "ghost", size: "iconSm", onClick: onRemove, title: t('actions.delete'), className: "h-5 w-5 shrink-0 rounded text-muted hover:text-danger", children: _jsx(Trash2, { size: 12 }) }))] }));
+}

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

@@ -0,0 +1,33 @@
+import type { RecordCtx } from '../../types.ts';
+import type { FieldMeta } from '@coffer-org/sdk/fields';
+type TFn = (key: string, opts?: Record<string, unknown>) => string;
+export declare function KeyValueList({ value, option, recordCtx, }: {
+    value: unknown;
+    option: FieldMeta;
+    recordCtx?: RecordCtx;
+}): import("react").JSX.Element;
+export declare function CheckDisplay({ value, slots, fields, recordCtx, }: {
+    value: unknown;
+    slots?: string[];
+    fields?: import('@coffer-org/sdk/fields').RowSubField[];
+    recordCtx?: RecordCtx;
+}): import("react").JSX.Element;
+export declare function MultiCheckDisplay({ value, slots }: {
+    value: unknown;
+    slots?: string[];
+}): import("react").JSX.Element;
+export declare function RelationValues({ field, value }: {
+    field: FieldMeta;
+    value: unknown;
+}): import("react").JSX.Element;
+export declare function measuredUnitLabel(field: FieldMeta, unit: string, t: TFn): string;
+export declare function measuredSlots(field: FieldMeta): {
+    vKey: string;
+    uKey: string;
+};
+export declare function measuredChipContent(field: FieldMeta, t: TFn): (it: unknown) => import("react").JSX.Element;
+export declare function MeasuredDisplay({ field, value }: {
+    field: FieldMeta;
+    value: unknown;
+}): import("react").JSX.Element;
+export {};

package/dist/render/widgets/display.js

@@ -0,0 +1,97 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Link } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { partValueKeys } from '@coffer-org/sdk/fields';
+import { resolveUnits } from '@coffer-org/sdk/units';
+import { parseJSON } from "../../lib/json.js";
+import { useRecordsByIds } from "../../lib/use-record-labels.js";
+import { getShelf } from "../../schema-registry.js";
+import { RecordInline } from "../../components/RecordInline.js";
+import { Dash, hasValue, shortId, CheckLegend, colsToCheckRow } from "../shared.js";
+import { FieldSlot } from "../dispatch.js";
+import { FlowRow } from "./flow-row.js";
+import { ChecklistRow } from "./checklist-row.js";
+import { ChecklistContent, clientChecklistContentFields } from "./checklist-content.js";
+export function KeyValueList({ value, option, recordCtx = { library: '', shelf: '', recordId: '' }, }) {
+    const list = parseJSON(value, []).filter((p) => p && p.key);
+    if (!list.length)
+        return _jsx(Dash, {});
+    return (_jsx(FlowRow, { items: list.map((p, i) => ({
+            key: String(i),
+            node: (_jsxs("div", { children: [_jsx("dt", { className: "text-[11px] font-semibold text-muted uppercase", children: p.key }), _jsx("dd", { className: "text-sm text-text break-all", children: _jsx(FieldSlot, { bare: true, field: option, value: p.value, mode: "view", recordCtx: recordCtx }) })] })),
+        })) }));
+}
+export function CheckDisplay({ value, slots = [], fields, recordCtx = { library: '', shelf: '', recordId: null }, }) {
+    const contentFields = clientChecklistContentFields(fields);
+    const data = parseJSON(value, {});
+    const row = contentFields.length
+        ? {
+            text: String(data.text ?? ''),
+            checks: Array.from({ length: slots.length }, (_, i) => data['check' + i] === true),
+        }
+        : colsToCheckRow(value, slots.length);
+    const hasContent = contentFields.length
+        ? contentFields.some((field) => hasValue(data[field.key]))
+        : Boolean(row.text);
+    if (!row.text && !hasContent && !row.checks.some(Boolean))
+        return (_jsx("div", { className: "flex text-sm", children: _jsx(Dash, {}) }));
+    return (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("div", { className: "flex flex-col gap-1.5", children: _jsx(ChecklistRow, { row: row, slotCount: slots.length, content: contentFields.length ? (_jsx(ChecklistContent, { fields: contentFields, row: data, editing: false, recordCtx: recordCtx })) : undefined }) }), _jsx(CheckLegend, { slots: slots })] }));
+}
+export function MultiCheckDisplay({ value, slots = [] }) {
+    const rows = parseJSON(value, []).filter((r) => r && (r.text || (r.checks ?? []).some(Boolean)));
+    if (!rows.length)
+        return _jsx(Dash, {});
+    return (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("div", { className: "flex flex-col gap-1.5", children: rows.map((row, i) => (_jsx(ChecklistRow, { row: row, slotCount: slots.length }, i))) }), _jsx(CheckLegend, { slots: slots })] }));
+}
+export function RelationValues({ field, value }) {
+    const library = field.relation?.library ?? '';
+    const shelf = field.relation?.shelf ?? '';
+    const multi = Boolean(field.hints['multi']);
+    const ids = multi ? parseJSON(value, []).map(String) : hasValue(value) ? [String(value)] : [];
+    const recordMap = useRecordsByIds(library, shelf, ids);
+    const m = getShelf(library, shelf);
+    if (!ids.length)
+        return _jsx(Dash, {});
+    return (_jsx("div", { className: "flex flex-wrap gap-2", children: ids.map((id) => {
+            const row = recordMap.get(id);
+            return (_jsx(Link, { to: `/${library}/${shelf}/${id}`, className: "inline-flex items-center gap-1.5 min-h-9 text-accent border border-transparent rounded-lg px-3 text-sm hover:text-accent2 transition-colors", children: m && row ? _jsx(RecordInline, { shelf: m, row: row, size: "sm", height: 28 }) : shortId(id) }, id));
+        }) }));
+}
+export function measuredUnitLabel(field, unit, t) {
+    const units = resolveUnits(field.hints['units']) ?? [];
+    const u = units.find((x) => x.value === unit);
+    return u ? t(u.label) : unit;
+}
+export function measuredSlots(field) {
+    const slots = partValueKeys((field.parts ?? []));
+    return { vKey: slots['value'] ?? 'value', uKey: slots['unit'] ?? 'unit' };
+}
+export function measuredChipContent(field, t) {
+    const { vKey, uKey } = measuredSlots(field);
+    const MeasuredChipContent = (it) => {
+        const o = it && typeof it === 'object'
+            ? it
+            : (() => {
+                try {
+                    return JSON.parse(String(it));
+                }
+                catch {
+                    return null;
+                }
+            })();
+        if (o && typeof o === 'object' && vKey in o && uKey in o) {
+            const rec = o;
+            return _jsx("span", { className: "font-mono", children: `${rec[vKey]} ${measuredUnitLabel(field, String(rec[uKey]), t)}` });
+        }
+        return _jsx("span", { className: "font-mono", children: String(it) });
+    };
+    return MeasuredChipContent;
+}
+export function MeasuredDisplay({ field, value }) {
+    const { t } = useTranslation();
+    const { vKey, uKey } = measuredSlots(field);
+    const raw = parseJSON(value, null);
+    if (!raw || raw[vKey] == null)
+        return _jsx(Dash, {});
+    return (_jsxs("span", { className: "font-mono text-sm", children: [raw[vKey], ' ', _jsx("span", { className: "text-xs text-muted", children: measuredUnitLabel(field, String(raw[uKey] ?? ''), t) })] }));
+}

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

@@ -0,0 +1,63 @@
+import type { TFunction } from 'i18next';
+import type { FieldMeta } from '@coffer-org/sdk/fields';
+import type { RecordCtx } from '../../types.ts';
+import { type ChecklistRowValue } from './checklist-row.tsx';
+export declare function RowWidget({ value, onChange, field, t, recordCtx, }: {
+    value: unknown;
+    onChange: (v: Record<string, string> | Record<string, string>[] | '') => void;
+    field: FieldMeta;
+    t: TFunction<'translation', undefined>;
+    recordCtx?: RecordCtx;
+}): import("react").JSX.Element;
+export declare function MeasuredWidget({ value, onChange, field, }: {
+    value: string | {
+        value: number | '';
+        unit: string;
+    } | '';
+    onChange: (v: {
+        value: number | '';
+        unit: string;
+    } | '') => void;
+    field: FieldMeta;
+}): import("react").JSX.Element;
+export declare function RelationPickerWidget({ field, value, onChange, excludeValues, }: {
+    field: FieldMeta;
+    value: unknown;
+    onChange: (v: string | string[]) => void;
+    excludeValues?: string[];
+}): import("react").JSX.Element;
+type CheckRow = ChecklistRowValue;
+export declare function CheckWidget({ value, onChange, field, recordCtx, }: {
+    value: unknown;
+    onChange: (v: Record<string, unknown> | '') => void;
+    field: FieldMeta;
+    recordCtx?: RecordCtx;
+}): import("react").JSX.Element;
+export declare function MultiCheckInput({ value, onChange, field, }: {
+    value: unknown;
+    onChange: (v: CheckRow[] | '') => void;
+    field: FieldMeta;
+}): import("react").JSX.Element;
+interface KV {
+    key: string;
+    value: string;
+}
+export declare function KeyValueWidget({ value, onChange, multiple, option, keyLabel, valueLabel, recordCtx, }: {
+    value: unknown;
+    onChange: (v: KV[] | '') => void;
+    multiple?: boolean;
+    option: FieldMeta;
+    keyLabel?: string;
+    valueLabel?: string;
+    recordCtx?: RecordCtx;
+}): import("react").JSX.Element;
+type MeasuredItem = {
+    value: number | '';
+    unit: string;
+};
+export declare function MeasuredMultiInput({ field, value, onChange, }: {
+    field: FieldMeta;
+    value: unknown;
+    onChange: (v: MeasuredItem[] | '') => void;
+}): import("react").JSX.Element;
+export {};