@coffer-org/web-ui 4.0.0

package/dist/render/core/text.js

@@ -0,0 +1,370 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { Suspense, lazy } from 'react';
+import { Input } from "../../components/ui/input.js";
+import { Button } from "../../components/ui/button.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../../components/ui/popover.js";
+import { Textarea } from "../../components/ui/textarea.js";
+import { Icon } from "../../components/Icon.js";
+import { darkTheme } from '@uiw/react-json-view/dark';
+import { lightTheme } from '@uiw/react-json-view/light';
+import { MaskInput } from "../../components/ui/mask-input.js";
+import { OptionIconView } from "../../components/ui/option-icon.js";
+import { registerRenderer } from "../../registry.js";
+import { hasOptions } from '@coffer-org/sdk/fields';
+import { MultiTagInput, MultipleChips, useTranslation, Dash, hasValue, trunc, parseStrArray, multiView, orDash, } from "../shared.js";
+import { parseJSON } from "../../lib/json.js";
+import { stripMarkdown } from "../../strip-markdown.js";
+import { optionLabel as fmtOptionLabel } from "../../lib/format.js";
+import { OptionValue, OptionInput, optionChipProps, optionKeys } from "../option-value.js";
+import { FieldFrame } from "../field-frame.js";
+import { MarkdownView } from "../markdown-view.js";
+const MarkdownEditor = lazy(() => import("../../MarkdownEditor.js"));
+let markdownEditorWarm;
+function warmMarkdownEditor() {
+    markdownEditorWarm ??= import("../../MarkdownEditor.js");
+}
+const CodeEditor = lazy(() => import('@uiw/react-textarea-code-editor'));
+const JsonView = lazy(() => import('@uiw/react-json-view'));
+const HexColorPicker = lazy(() => import('react-colorful').then((m) => ({ default: m.HexColorPicker })));
+const PhoneInput = lazy(() => import("../../components/ui/phone-input.js").then((m) => ({ default: m.PhoneInput })));
+const EXTRA_MASKS = {
+    iban: {
+        pattern: '#### #### #### #### #### #### #### ##',
+        transform: (v) => v.replace(/[^a-z0-9]/gi, '').toUpperCase(),
+    },
+};
+function TextInput({ name, field, value, onChange, selectOptions, excludeValues }) {
+    const h = field.hints;
+    const inputType = h.inputType ?? 'text';
+    if (hasOptions(field))
+        return (_jsx(OptionInput, { field: field, value: value, onChange: onChange, offered: selectOptions, exclude: excludeValues }));
+    if (h.multiple === true) {
+        return (_jsx(MultiTagInput, { value: value, onChange: onChange, renderInput: (v, set, add) => (_jsx(Input, { type: inputType, value: v, onChange: (e) => set(e.target.value), className: "flex-1", onKeyDown: (e) => {
+                    if (e.key === 'Enter') {
+                        e.preventDefault();
+                        add();
+                    }
+                } })) }));
+    }
+    const single = typeof value === 'string' ? value : String(value ?? '');
+    if (typeof h.mask === 'string') {
+        const maskDef = EXTRA_MASKS[h.mask] ?? h.mask;
+        const storeUnmasked = h.maskStore === 'unmasked';
+        return (_jsx(MaskInput, { id: name, mask: maskDef, value: single, onValueChange: (masked, unmasked) => onChange(storeUnmasked ? unmasked : masked) }));
+    }
+    return (_jsx(Input, { id: name, type: inputType, value: single, onChange: (e) => onChange(e.target.value), minLength: h.minLength, maxLength: h.maxLength }));
+}
+function TextDisplay({ field, value }) {
+    return multiView(field, value, (i) => _jsx(PlainValue, { field: field, value: i }), undefined, optionChipProps(field));
+}
+function TextPage(p) {
+    return (_jsx(FieldFrame, { field: p.field, value: p.value, label: p.label, required: p.required, error: p.error, mode: p.mode, geom: "inline", bare: p.bare, view: (v) => _jsx(TextDisplay, { field: p.field, value: v }), edit: (value, onChange) => (_jsx(TextInput, { name: `field-${p.field.label}`, field: p.field, value: value, onChange: onChange, selectOptions: p.selectOptions, excludeValues: p.excludeValues })) }));
+}
+function PlainValue({ field, value }) {
+    return _jsx(OptionValue, { field: field, value: value });
+}
+function TextInline({ field, value }) {
+    const { t } = useTranslation();
+    if (field.hints['multiple'] === true) {
+        const items = (Array.isArray(value) ? value : parseStrArray(value)).map((v) => fmtOptionLabel(t, field, v));
+        return _jsx("span", { className: "truncate", children: items.length ? items.join(', ') : '—' });
+    }
+    return _jsx("span", { className: "truncate", children: trunc(fmtOptionLabel(t, field, value)) });
+}
+registerRenderer({
+    kinds: ['text', 'email', 'slug', 'unit'],
+    Page: TextPage,
+    Inline: TextInline,
+    Value: PlainValue,
+    keys: optionKeys,
+});
+function TelPage(p) {
+    return (_jsx(FieldFrame, { field: p.field, value: p.value, label: p.label, required: p.required, error: p.error, mode: p.mode, geom: "inline", width: "w-48", bare: p.bare, view: (v) => (hasValue(v) ? _jsx("span", { children: String(v) }) : _jsx(Dash, {})), edit: (value, onChange) => (_jsx(Suspense, { fallback: _jsx("div", { className: "text-sm text-muted", children: "\u2026" }), children: _jsx(PhoneInput, { value: String(value), onChange: (v) => onChange(v ?? '') }) })) }));
+}
+function TelInline({ value }) {
+    return _jsx("span", { className: "truncate", children: trunc(String(value ?? '')) });
+}
+registerRenderer({
+    kinds: ['tel'],
+    Page: TelPage,
+    Inline: TelInline,
+});
+const hrefOf = (s) => (/^[a-z][a-z0-9+.-]*:\/\//i.test(s) ? s : `https://${s}`);
+function LinkAnchor({ value }) {
+    const s = String(value ?? '');
+    if (!s)
+        return _jsx(Dash, {});
+    return (_jsx("a", { href: hrefOf(s), target: "_blank", rel: "noopener noreferrer", className: "inline-block max-w-full truncate align-bottom text-primary underline hover:text-primary/80 transition-colors", title: s, children: s }));
+}
+function LinkPage(p) {
+    return (_jsx(FieldFrame, { field: p.field, value: p.value, label: p.label, required: p.required, error: p.error, mode: p.mode, geom: "inline", bare: p.bare, view: (v) => _jsx(LinkAnchor, { value: v }), edit: (value, onChange) => (_jsx(Input, { type: "url", value: String(value), onChange: (e) => onChange(e.target.value) })) }));
+}
+registerRenderer({
+    kinds: ['link'],
+    Page: LinkPage,
+    Inline: ({ value }) => _jsx(LinkAnchor, { value: value }),
+    Value: ({ value }) => _jsx(LinkAnchor, { value: value }),
+});
+function PasswordInput({ name, field, value, onChange }) {
+    if (field.hints['multiple'] === true) {
+        return (_jsx(MultiTagInput, { value: value, onChange: onChange, display: () => '•••', renderInput: (v, set, add) => (_jsx(Input, { type: "password", value: v, autoComplete: "new-password", onChange: (e) => set(e.target.value), className: "flex-1", onKeyDown: (e) => {
+                    if (e.key === 'Enter') {
+                        e.preventDefault();
+                        add();
+                    }
+                } })) }));
+    }
+    return (_jsx(Input, { id: name, type: "password", value: value, autoComplete: "current-password", onChange: (e) => onChange(e.target.value) }));
+}
+function PasswordDisplay({ field, value }) {
+    if (field.hints['multiple'] === true) {
+        return _jsx(MultipleChips, { items: parseJSON(value, []), content: () => '•••' });
+    }
+    return _jsx("span", { className: "text-muted text-sm select-none", children: "\u2022\u2022\u2022" });
+}
+function PasswordPage(p) {
+    return (_jsx(FieldFrame, { field: p.field, value: p.value, label: p.label, required: p.required, error: p.error, mode: p.mode, geom: "inline", bare: p.bare, view: (v) => _jsx(PasswordDisplay, { field: p.field, value: v }), edit: (value, onChange) => (_jsx(PasswordInput, { name: `field-${p.field.label}`, field: p.field, value: String(value), onChange: onChange })) }));
+}
+function PasswordInline() {
+    return _jsx("span", { children: "\u2022\u2022\u2022" });
+}
+registerRenderer({
+    kinds: ['password'],
+    Page: PasswordPage,
+    Inline: PasswordInline,
+});
+function TextareaPage(p) {
+    const maxLength = p.field.hints['maxLength'];
+    return (_jsx(FieldFrame, { field: p.field, value: p.value, label: p.label, required: p.required, error: p.error, mode: p.mode, geom: "textarea", width: "w-full", bare: p.bare, view: (v) => {
+            if (!hasValue(v))
+                return _jsx(Dash, {});
+            return _jsx("p", { className: "text-[15px] text-text/90 leading-relaxed whitespace-pre-wrap", children: String(v) });
+        }, edit: (value, onChange) => (_jsx(Textarea, { id: `field-${p.field.label}`, value: String(value), maxLength: maxLength, onChange: (e) => onChange(e.target.value) })) }));
+}
+function TextareaInline({ value }) {
+    return _jsx("span", { className: "truncate", children: trunc(String(value ?? '')) });
+}
+registerRenderer({
+    kinds: ['textarea'],
+    layout: 'block',
+    box: 'textarea',
+    Page: TextareaPage,
+    Inline: TextareaInline,
+});
+registerRenderer({
+    kinds: ['smalltext'],
+    Page: TextareaPage,
+    Inline: TextareaInline,
+});
+function I18nPage(p) {
+    const { t } = useTranslation();
+    const maxLength = p.field.hints['maxLength'];
+    return (_jsx(FieldFrame, { field: p.field, value: p.value, label: p.label, required: p.required, error: p.error, mode: p.mode, geom: "textarea", width: "w-full", bare: p.bare, view: (v) => {
+            if (!hasValue(v))
+                return _jsx(Dash, {});
+            const s = String(v);
+            return (_jsx("p", { className: "text-[15px] text-text/90 leading-relaxed whitespace-pre-wrap", children: t(s, { defaultValue: s }) }));
+        }, edit: (value, onChange) => (_jsx(Textarea, { id: `field-${p.field.label}`, value: String(value), maxLength: maxLength, onChange: (e) => onChange(e.target.value) })) }));
+}
+function I18nInline({ value }) {
+    const { t } = useTranslation();
+    const s = String(value ?? '');
+    return _jsx("span", { className: "truncate", children: trunc(t(s, { defaultValue: s })) });
+}
+registerRenderer({
+    kinds: ['i18n'],
+    layout: 'block',
+    box: 'textarea',
+    Page: I18nPage,
+    Inline: I18nInline,
+});
+function MarkdownInput({ value, onChange }) {
+    const { t } = useTranslation();
+    return (_jsx("div", { className: "md-editor flex min-h-0 min-w-0 flex-1 flex-col", children: _jsx(Suspense, { fallback: _jsx("div", { className: "text-sm text-muted", children: "\u2026" }), children: _jsx(MarkdownEditor, { value: value, onChange: onChange, placeholder: t('form.mdPlaceholder') }) }) }));
+}
+function MarkdownDisplay({ value }) {
+    return orDash(value, (v) => _jsx(MarkdownView, { value: String(v) }));
+}
+function MarkdownPage(p) {
+    return (_jsx(FieldFrame, { field: p.field, value: p.value, label: p.label, required: p.required, error: p.error, mode: p.mode, geom: "none", width: "w-full", bare: p.bare, view: (v) => (_jsx("div", { onPointerEnter: warmMarkdownEditor, onPointerDown: warmMarkdownEditor, onFocus: warmMarkdownEditor, children: _jsx(MarkdownDisplay, { field: p.field, value: v }) })), edit: (value, onChange) => (_jsx(MarkdownInput, { name: `field-${p.field.label}`, field: p.field, value: String(value), onChange: onChange })) }));
+}
+function MarkdownInline({ value }) {
+    const s = stripMarkdown(String(value ?? ''));
+    return _jsx("span", { className: "truncate", children: trunc(s) || '—' });
+}
+registerRenderer({
+    kinds: ['markdown'],
+    layout: 'block',
+    pickerSize: 'modal',
+    Page: MarkdownPage,
+    Inline: MarkdownInline,
+});
+function CodePage(p) {
+    return (_jsx(FieldFrame, { field: p.field, value: p.value, label: p.label, required: p.required, error: p.error, mode: p.mode, geom: "none", width: "w-full", bare: p.bare, view: (v) => (_jsx("pre", { className: "min-w-0 min-h-32 text-[13px] leading-normal font-mono border border-transparent rounded-lg p-3 overflow-x-auto whitespace-pre-wrap text-text/90", children: hasValue(v) ? String(v) : _jsx(Dash, {}) })), edit: (value, onChange) => (_jsx("div", { "data-color-mode": "dark", className: "json-editor-wrap min-w-0", children: _jsx("div", { className: "rounded-xl overflow-hidden border border-border min-w-0", children: _jsx(Suspense, { fallback: _jsx("div", { className: "text-sm text-muted", children: "\u2026" }), children: _jsx(CodeEditor, { value: String(value), language: p.field.hints['language'] ?? 'text', onChange: (e) => onChange(e.target.value), padding: 12, style: {
+                            fontFamily: 'ui-monospace, monospace',
+                            fontSize: 13,
+                            background: 'transparent',
+                            minHeight: '8rem',
+                        } }) }) }) })) }));
+}
+function CodeInline({ value }) {
+    return _jsx("span", { className: "truncate", children: trunc(String(value ?? '')) });
+}
+registerRenderer({
+    kinds: ['snippet'],
+    layout: 'block',
+    pickerSize: 'modal',
+    Page: CodePage,
+    Inline: CodeInline,
+});
+function jsonEditText(value) {
+    if (typeof value === 'string')
+        return value;
+    if (value == null)
+        return '';
+    return JSON.stringify(value, null, 2);
+}
+function JsonInput({ value, onChange }) {
+    let valid = true;
+    if (value.trim()) {
+        try {
+            JSON.parse(value);
+        }
+        catch {
+            valid = false;
+        }
+    }
+    return (_jsxs("div", { "data-color-mode": "dark", className: "json-editor-wrap min-w-0", children: [_jsx("div", { className: `rounded-xl overflow-hidden border min-w-0 ${valid ? 'border-border' : 'border-danger/60'}`, children: _jsx(Suspense, { fallback: _jsx("div", { className: "text-sm text-muted", children: "\u2026" }), children: _jsx(CodeEditor, { value: value, language: "json", placeholder: "{ }", onChange: (e) => onChange(e.target.value), padding: 12, style: {
+                            fontFamily: 'ui-monospace, monospace',
+                            fontSize: 13,
+                            background: 'transparent',
+                            minHeight: '8rem',
+                        } }) }) }), !valid && (_jsxs("p", { className: "text-xs text-danger mt-1 flex items-center gap-1", children: [_jsx(Icon, { name: "lucide:alert-triangle", size: 12, className: "shrink-0" }), " JSON"] }))] }));
+}
+function JsonDisplay({ value }) {
+    if (value == null || value === '')
+        return _jsx("span", { className: "text-muted", children: "\u2014" });
+    let obj;
+    try {
+        obj = typeof value === 'object' ? value : JSON.parse(String(value));
+    }
+    catch {
+        obj = undefined;
+    }
+    const isDark = typeof document !== 'undefined' && document.documentElement.classList.contains('dark');
+    if (obj === null || typeof obj !== 'object') {
+        return (_jsx("pre", { className: "min-w-0 text-xs bg-surface border border-border rounded-lg p-3 overflow-x-auto text-muted font-mono", children: String(value) }));
+    }
+    return (_jsx("div", { className: "min-w-0 bg-surface border border-border rounded-lg p-3 overflow-x-auto font-mono text-xs", children: _jsx(Suspense, { fallback: _jsx("div", { className: "text-sm text-muted", children: "\u2026" }), children: _jsx(JsonView, { value: obj, style: { ...(isDark ? darkTheme : lightTheme), '--w-rjv-background-color': 'transparent' }, displayDataTypes: false, enableClipboard: true, collapsed: 2 }) }) }));
+}
+function JsonPage(p) {
+    return (_jsx(FieldFrame, { field: p.field, value: p.value, label: p.label, required: p.required, error: p.error, mode: p.mode, geom: "none", width: "w-full", bare: p.bare, view: (v) => _jsx(JsonDisplay, { field: p.field, value: v }), edit: (value, onChange) => (_jsx(JsonInput, { name: `field-${p.field.label}`, field: p.field, value: jsonEditText(value), onChange: onChange })) }));
+}
+registerRenderer({ kinds: ['json'], layout: 'block', pickerSize: 'modal', Page: JsonPage });
+function colorChipContent(item) {
+    const str = String(item);
+    const valid = /^#[0-9a-fA-F]{6}$/.test(str);
+    return (_jsxs(_Fragment, { children: [valid && _jsx(OptionIconView, { icon: { kind: 'swatch', value: str }, size: "xs" }), _jsx("span", { className: "font-mono", children: str })] }));
+}
+function ColorPickerRow({ value, onChange, onEnter, }) {
+    const hex = /^#[0-9a-fA-F]{6}$/.test(value) ? value : '#000000';
+    return (_jsxs("div", { className: "flex min-h-9 items-center gap-2 pl-2", children: [_jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx("button", { type: "button", "aria-label": "pick color", className: "h-5 w-5 shrink-0 cursor-pointer rounded-full border border-border", style: { background: hex } }) }), _jsx(PopoverContent, { className: "w-auto p-2", children: _jsx(Suspense, { fallback: _jsx("div", { className: "flex h-[200px] w-[200px] items-center justify-center text-sm text-muted", children: "\u2026" }), children: _jsx(HexColorPicker, { color: hex, onChange: onChange }) }) })] }), _jsx(Input, { value: value, onChange: (e) => onChange(e.target.value), pattern: "#[0-9a-fA-F]{6}", maxLength: 7, className: "h-auto w-28 border-0 bg-transparent p-0 font-mono text-sm shadow-none focus-visible:ring-0", placeholder: "#000000", onKeyDown: onEnter
+                    ? (e) => {
+                        if (e.key !== 'Enter')
+                            return;
+                        e.preventDefault();
+                        onEnter();
+                    }
+                    : undefined })] }));
+}
+export function ColorInput({ value, onChange, field }) {
+    if (field.hints['multiple'] === true) {
+        return (_jsx(MultiTagInput, { value: value, onChange: onChange, validate: (v) => /^#[0-9a-fA-F]{6}$/.test(v), display: colorChipContent, renderInput: (v, set, add) => _jsx(ColorPickerRow, { value: v, onChange: set, onEnter: add }) }));
+    }
+    return _jsx(ColorPickerRow, { value: typeof value === 'string' ? value : '', onChange: onChange });
+}
+function ColorValue({ value }) {
+    return _jsx(_Fragment, { children: colorChipContent(value) });
+}
+function ColorSwatches({ field, items }) {
+    const { t } = useTranslation();
+    const named = hasOptions(field);
+    return (_jsx("div", { className: "flex flex-wrap gap-2", children: items.map((item, idx) => {
+            const hex = String(item);
+            const valid = /^#[0-9a-fA-F]{6}$/.test(hex);
+            const name = named ? fmtOptionLabel(t, field, hex) : '';
+            return (_jsxs("figure", { className: "w-24 overflow-hidden rounded-xl border border-border", title: hex, children: [_jsx("div", { className: valid ? 'h-16 w-full' : 'h-16 w-full bg-elevated', style: valid ? { backgroundColor: hex } : undefined }), _jsxs("figcaption", { className: "flex flex-col bg-surface px-2 py-1 leading-tight", children: [name && name !== hex && _jsx("span", { className: "truncate text-xs", children: name }), _jsx("span", { className: "truncate font-mono text-xs text-muted", children: hex })] })] }, idx));
+        }) }));
+}
+function ColorDisplay({ field, value }) {
+    if (field.hints['multiple'] === true) {
+        const items = parseJSON(value, []);
+        if (!items.length)
+            return _jsx(Dash, {});
+        return _jsx(ColorSwatches, { field: field, items: items });
+    }
+    const hex = String(value);
+    if (!hex || !/^#[0-9a-fA-F]{6}$/.test(hex))
+        return _jsx(Dash, {});
+    return (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(OptionIconView, { icon: { kind: 'swatch', value: hex }, size: "md" }), _jsx("span", { className: "font-mono text-sm", children: hex })] }));
+}
+function ColorPage(p) {
+    return (_jsx(FieldFrame, { field: p.field, value: p.value, label: p.label, required: p.required, error: p.error, mode: p.mode, geom: "inline", width: "w-fit", bare: p.bare, view: (v) => _jsx(ColorDisplay, { field: p.field, value: v }), edit: (value, onChange) => (_jsx(ColorInput, { name: `field-${p.field.label}`, field: p.field, value: value, onChange: onChange })) }));
+}
+function ColorPickerBody({ draft, setDraft, save, remove, removeLabel }) {
+    const { t } = useTranslation();
+    const raw = typeof draft === 'string' ? draft : '';
+    const hex = /^#[0-9a-fA-F]{6}$/.test(raw) ? raw : '#000000';
+    return (_jsxs("div", { className: "flex min-w-0 flex-col gap-2", children: [_jsx(Suspense, { fallback: _jsx("div", { className: "flex h-40 items-center justify-center text-sm text-muted", children: "\u2026" }), children: _jsx(HexColorPicker, { color: hex, onChange: setDraft, style: { width: '100%' } }) }), _jsx(Input, { value: raw, onChange: (e) => setDraft(e.target.value), pattern: "#[0-9a-fA-F]{6}", maxLength: 7, placeholder: "#000000", className: "font-mono text-sm" }), _jsxs("div", { className: "flex items-center justify-end gap-2 border-t border-border pt-2", children: [remove && (_jsx(Button, { type: "button", variant: "destructiveOutline", size: "sm", className: "mr-auto", onClick: remove, children: removeLabel ?? t('actions.delete') })), _jsx(Button, { type: "button", size: "sm", onClick: () => save(), children: t('actions.save') })] })] }));
+}
+registerRenderer({ kinds: ['color'], Page: ColorPage, Value: ColorValue, Picker: ColorPickerBody });
+function TagInput({ value, onChange, field }) {
+    const { t } = useTranslation();
+    const suggestions = field.hints['suggestions'];
+    const datalistId = React.useId();
+    const datalist = (taken) => suggestions && suggestions.length > 0 ? (_jsx("datalist", { id: datalistId, children: suggestions
+            .filter((s) => !taken.includes(s))
+            .map((s) => (_jsx("option", { value: s }, s))) })) : null;
+    if (field.hints['multiple'] === true) {
+        const items = parseStrArray(value);
+        return (_jsx(MultiTagInput, { value: value, onChange: onChange, renderInput: (v, set, add) => (_jsxs(_Fragment, { children: [datalist(items), _jsx(Input, { value: v, list: suggestions?.length ? datalistId : undefined, onChange: (e) => set(e.target.value), onKeyDown: (e) => {
+                            if (e.key === 'Enter') {
+                                e.preventDefault();
+                                add();
+                            }
+                        }, placeholder: t('form.addTag'), className: "flex-1" })] })) }));
+    }
+    const single = typeof value === 'string' ? value : String(value ?? '');
+    return (_jsxs(_Fragment, { children: [datalist(single ? [single] : []), _jsx(Input, { value: single, list: suggestions?.length ? datalistId : undefined, onChange: (e) => onChange(e.target.value) })] }));
+}
+function TagDisplay({ field, value }) {
+    const items = field.hints['multiple'] === true ? parseJSON(value, []) : value ? [String(value)] : [];
+    return _jsx(MultipleChips, { items: items, content: (t) => String(t) });
+}
+function TagPage(p) {
+    return (_jsx(FieldFrame, { field: p.field, value: p.value, label: p.label, required: p.required, error: p.error, mode: p.mode, geom: "inline", bare: p.bare, view: (v) => _jsx(TagDisplay, { field: p.field, value: v }), edit: (value, onChange) => (_jsx(TagInput, { name: `field-${p.field.label}`, field: p.field, value: value, onChange: onChange })) }));
+}
+function TagInline({ field, value }) {
+    if (field.hints['multiple'] === true) {
+        const a = parseStrArray(String(value ?? ''));
+        return _jsx("span", { className: "truncate", children: a.length ? String(a.length) : '—' });
+    }
+    return _jsx("span", { className: "truncate", children: trunc(String(value ?? '')) });
+}
+registerRenderer({
+    kinds: ['tag'],
+    Page: TagPage,
+    Inline: TagInline,
+    Value: PlainValue,
+});
+function TitlePage(p) {
+    return (_jsx(FieldFrame, { field: p.field, value: p.value, label: p.label, required: p.required, error: p.error, mode: p.mode, geom: "title", bare: p.bare, view: (v) => hasValue(v) ? _jsx("span", { className: "text-[28px] font-bold text-text leading-tight", children: String(v) }) : _jsx(Dash, {}), edit: (value, onChange) => (_jsx("input", { id: `field-${p.field.label}`, value: String(value), onChange: (e) => onChange(e.target.value), style: { fontSize: '28px', padding: '4px 12px' }, className: "w-full rounded-lg border border-input bg-background font-bold text-text leading-tight outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring placeholder:text-muted/40", placeholder: "\u2026" })) }));
+}
+function TitleInline({ value }) {
+    return _jsx("span", { className: "truncate", children: trunc(String(value ?? '')) });
+}
+registerRenderer({
+    kinds: ['title'],
+    Page: TitlePage,
+    Inline: TitleInline,
+});

package/dist/render/core/tristate.d.ts

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

package/dist/render/core/tristate.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import { Check, Minus, X } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { registerRenderer } from "../../registry.js";
+import { cn } from "../../lib/utils.js";
+import { FieldFrame } from "../field-frame.js";
+import { OptionList } from "../option-list.js";
+import { useRecordSave } from "../record-save-ctx.js";
+const CYCLE = { unknown: 'yes', yes: 'no', no: 'unknown' };
+const CHECKED = { yes: true, no: false, unknown: 'indeterminate' };
+const ORDER = ['yes', 'no', 'unknown'];
+function TriCheckbox({ value, onChange, label }) {
+    const { saving } = useRecordSave();
+    const cur = (value || 'unknown');
+    return (_jsx(CheckboxPrimitive.Root, { checked: CHECKED[cur], disabled: saving, onCheckedChange: () => onChange?.(CYCLE[cur]), "aria-label": label, className: cn('peer h-4.5 w-4.5 shrink-0 rounded border border-input bg-background ring-offset-background transition-colors', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring', 'data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground', 'data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground'), children: _jsx(CheckboxPrimitive.Indicator, { className: "flex items-center justify-center text-current", children: cur === 'yes' ? (_jsx(Check, { className: "h-3.5 w-3.5", strokeWidth: 3 })) : (_jsx(Minus, { className: "h-3.5 w-3.5", strokeWidth: 3 })) }) }));
+}
+function TriStateValue({ value }) {
+    const v = String(value || 'unknown') ?? 'unknown';
+    const Ico = INLINE_ICON[v] ?? Minus;
+    return _jsx(Ico, { size: 16, className: v === 'yes' ? 'text-accent' : v === 'no' ? 'text-danger' : 'text-muted' });
+}
+function TriStatePicker({ draft, save }) {
+    const { t } = useTranslation();
+    return (_jsx(OptionList, { options: ORDER.map((v) => ({ value: v, title: t(`triState.${v}`) })), value: String(draft || 'unknown'), multiple: false, literal: true, search: false, onPick: (v) => save(v) }));
+}
+function TriStatePage(p) {
+    return (_jsx(FieldFrame, { field: p.field, value: p.value, label: p.label, required: p.required, error: p.error, mode: p.mode, geom: "inline", width: "w-32", bare: p.bare, view: (v) => _jsx(TriStateValue, { field: p.field, value: v }), edit: (v, onChange) => _jsx(TriCheckbox, { value: String(v ?? ''), onChange: onChange, label: p.label }) }));
+}
+const INLINE_ICON = { yes: Check, unknown: Minus, no: X };
+function TriStateInline({ value }) {
+    const v = String(value ?? 'unknown');
+    const Ico = INLINE_ICON[v] ?? Minus;
+    return _jsx(Ico, { size: 16, className: v === 'yes' ? 'text-accent' : v === 'no' ? 'text-danger' : 'text-muted' });
+}
+registerRenderer({
+    kinds: ['triState'],
+    Page: TriStatePage,
+    Inline: TriStateInline,
+    Value: TriStateValue,
+    Picker: TriStatePicker,
+});

package/dist/render/core/weight.d.ts

@@ -0,0 +1,4 @@
+export declare function weightParts(grams: number | null | undefined): {
+    n: number;
+    unit: 'g' | 'kg';
+} | null;

package/dist/render/core/weight.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Input } from "../../components/ui/input.js";
+import { registerRenderer } from "../../registry.js";
+import { FieldFrame } from "../field-frame.js";
+import { Dash } from "../shared.js";
+export function weightParts(grams) {
+    if (grams == null || grams === '' || Number.isNaN(Number(grams)))
+        return null;
+    const g = Number(grams);
+    return g < 1000 ? { n: g, unit: 'g' } : { n: Number((g / 1000).toFixed(2)), unit: 'kg' };
+}
+function WeightView({ value }) {
+    const { t } = useTranslation();
+    const p = weightParts(value);
+    if (!p)
+        return _jsx(Dash, {});
+    return (_jsxs("span", { className: "tabular-nums", children: [p.n, " ", t(`core.units.${p.unit}`)] }));
+}
+function ScaleToggle({ unit, onPick, label }) {
+    const { t } = useTranslation();
+    return (_jsx("div", { role: "radiogroup", "aria-label": label, className: "flex shrink-0 rounded-lg border border-border p-0.5", children: ['g', 'kg'].map((u) => (_jsx("button", { type: "button", role: "radio", "aria-checked": u === unit, onClick: () => onPick(u), className: `rounded-md px-2 py-1 text-xs transition-colors ${u === unit ? 'bg-accent/15 text-accent' : 'text-muted hover:text-fg'}`, children: t(`core.units.${u}`) }, u))) }));
+}
+function WeightInput({ value, onChange, label }) {
+    const g = value === '' ? '' : Number(value);
+    const [unit, setUnit] = useState(g !== '' && Number(g) >= 1000 ? 'kg' : 'g');
+    const shown = g === '' ? '' : unit === 'kg' ? Number(g) / 1000 : g;
+    const toGrams = (n) => Math.round(unit === 'kg' ? n * 1000 : n);
+    return (_jsxs("div", { className: "flex gap-2 min-w-0", children: [_jsx(Input, { type: "number", className: "flex-1 min-w-0", min: 0, value: shown, onChange: (e) => onChange(e.target.value === '' ? '' : String(toGrams(Number(e.target.value)))) }), _jsx(ScaleToggle, { unit: unit, onPick: setUnit, label: label })] }));
+}
+function WeightPage(p) {
+    return (_jsx(FieldFrame, { field: p.field, value: p.value, label: p.label, required: p.required, error: p.error, mode: p.mode, geom: "inline", width: "w-40", bare: p.bare, view: (v) => _jsx(WeightView, { value: v }), edit: (value, onChange) => (_jsx(WeightInput, { value: String(value ?? ''), onChange: onChange, label: p.label ?? '' })) }));
+}
+function WeightInline({ value }) {
+    return _jsx(WeightView, { value: value });
+}
+registerRenderer({ kinds: ['weight'], Page: WeightPage, Inline: WeightInline });

package/dist/render/dispatch.d.ts

@@ -0,0 +1,12 @@
+import { type FieldMeta } from '@coffer-org/sdk/fields';
+import type { FieldRenderProps, FieldKey, FieldKeyCtx } from '../types.ts';
+export declare function FieldSlot(p: FieldRenderProps & {
+    extId?: string;
+    onChange?: (v: unknown) => void | Promise<string | undefined>;
+}): import("react").JSX.Element;
+export declare function FieldCell({ field, value, height }: {
+    field: FieldMeta;
+    value: unknown;
+    height?: number;
+}): import("react").JSX.Element;
+export declare function fieldKeys(field: FieldMeta, value: unknown, ctx: FieldKeyCtx): FieldKey[];

package/dist/render/dispatch.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { wrapKey } from '@coffer-org/sdk/fields';
+import { resolveRenderer } from "../registry.js";
+import { parseTagValues, isMultiValued } from "../lib/multi-value.js";
+import { FieldAddressProvider } from "./field-address.js";
+import { SlotProvider } from "./slot.js";
+export function FieldSlot(p) {
+    const { onChange, ...rest } = p;
+    const r = resolveRenderer(p.field);
+    const node = useMemo(() => {
+        if (p.el)
+            return p.el;
+        if (p.fieldKey === undefined)
+            return undefined;
+        return wrapKey(p.fieldKey, {}, p.field);
+    }, [p.el, p.fieldKey, p.field]);
+    if (!r) {
+        console.warn('[render] no renderer for', p.field.kind);
+        return _jsx("span", { children: String(p.value) });
+    }
+    const page = _jsx(r.Page, { ...rest });
+    return (_jsx(FieldAddressProvider, { fieldKey: p.fieldKey, extId: p.extId, recordCtx: p.recordCtx, children: node ? (_jsx(SlotProvider, { field: node, value: p.value, commit: onChange, mode: p.mode, children: page })) : (page) }));
+}
+export function FieldCell({ field, value, height }) {
+    const r = resolveRenderer(field);
+    const inner = r?.Inline ? (_jsx(r.Inline, { field: field, value: value, height: height })) : (_jsx("span", { className: "truncate", children: String(value ?? '') }));
+    if (!height)
+        return inner;
+    return (_jsx("span", { className: "inline-flex min-w-0 items-center font-medium", style: { fontSize: Math.round(height * 0.7), lineHeight: 1.15 }, children: inner }));
+}
+export function fieldKeys(field, value, ctx) {
+    const r = resolveRenderer(field);
+    const one = (v) => {
+        if (r?.keys)
+            return r.keys(v, field, ctx);
+        if (v == null || v === '')
+            return [];
+        return [{ value: String(v), rawValue: v, label: String(v) }];
+    };
+    const elems = isMultiValued(field) ? parseTagValues(value) : [value];
+    const seen = new Set();
+    const out = [];
+    for (const e of elems) {
+        for (const k of one(e)) {
+            if (seen.has(k.value))
+                continue;
+            seen.add(k.value);
+            out.push(k);
+        }
+    }
+    return out;
+}

package/dist/render/display-override.d.ts

@@ -0,0 +1,25 @@
+import { type ReactNode } from 'react';
+import type { FieldMeta } from '@coffer-org/sdk/fields';
+export type DisplayParams = {
+    value: unknown;
+    field: FieldMeta;
+    rendered: ReactNode;
+    label?: string;
+    renderedLabel: ReactNode;
+};
+export interface DisplayOverride {
+    (p: DisplayParams): ReactNode;
+    ownsLabel?: boolean;
+}
+export declare function DisplayOverrideProvider({ fn, children }: {
+    fn: DisplayOverride;
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function DisplayOverrideReset({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function useDisplayOverride(): DisplayOverride | undefined;
+export declare function applyDisplay<A extends unknown[]>(view: (value: unknown, ...rest: A) => ReactNode, field: FieldMeta, override: DisplayOverride | undefined, chrome?: {
+    label?: string;
+    renderedLabel: ReactNode;
+}): (value: unknown, ...rest: A) => ReactNode;

package/dist/render/display-override.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from 'react';
+const DisplayOverrideContext = createContext(undefined);
+export function DisplayOverrideProvider({ fn, children }) {
+    return _jsx(DisplayOverrideContext.Provider, { value: fn, children: children });
+}
+export function DisplayOverrideReset({ children }) {
+    return _jsx(DisplayOverrideContext.Provider, { value: undefined, children: children });
+}
+export function useDisplayOverride() {
+    return useContext(DisplayOverrideContext);
+}
+export function applyDisplay(view, field, override, chrome) {
+    if (!override)
+        return view;
+    return (value, ...rest) => override({
+        value,
+        field,
+        rendered: view(value, ...rest),
+        label: chrome?.label,
+        renderedLabel: chrome?.renderedLabel ?? null,
+    });
+}

package/dist/render/editor-mode.d.ts

@@ -0,0 +1,4 @@
+import type { FieldClient } from '@coffer-org/sdk/fields';
+import type { EditorMode } from '../types.ts';
+export type { EditorMode } from '../types.ts';
+export declare function editorMode(field: Pick<FieldClient, 'kind' | 'hints'>): EditorMode;

package/dist/render/editor-mode.js

@@ -0,0 +1,11 @@
+import { resolveRenderer } from "../registry.js";
+const MODES = new Set(['popover', 'modal', 'inplace', 'custom']);
+function isEditorMode(v) {
+    return typeof v === 'string' && MODES.has(v);
+}
+export function editorMode(field) {
+    const override = field.hints?.['editor'];
+    if (isEditorMode(override))
+        return override;
+    return resolveRenderer(field)?.editor ?? 'popover';
+}

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

@@ -0,0 +1,14 @@
+import { type ReactNode } from 'react';
+import type { RecordCtx } from '../types.ts';
+export type FieldAddress = {
+    key?: string;
+    extId?: string;
+    recordCtx?: RecordCtx;
+};
+export declare function FieldAddressProvider({ fieldKey, extId, recordCtx, children, }: {
+    fieldKey?: string;
+    extId?: string;
+    recordCtx?: RecordCtx;
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function useFieldAddress(): FieldAddress;

package/dist/render/field-address.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useMemo } from 'react';
+const FieldAddressContext = createContext({});
+export function FieldAddressProvider({ fieldKey, extId, recordCtx, children, }) {
+    const value = useMemo(() => ({ key: fieldKey, extId, recordCtx }), [fieldKey, extId, recordCtx]);
+    return _jsx(FieldAddressContext.Provider, { value: value, children: children });
+}
+export function useFieldAddress() {
+    return useContext(FieldAddressContext);
+}

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

@@ -0,0 +1,8 @@
+import type { ServerIssue } from '../host-services.ts';
+export type ErrorAt = (path: (string | number)[]) => string | undefined;
+export declare const FieldErrorsContext: import("react").Context<ErrorAt>;
+export declare const useFieldErrors: () => ErrorAt;
+export declare const pathKey: (path: (string | number)[]) => string;
+export declare function makeIssueText(t: (k: string, params?: Record<string, unknown>) => string): (code: string, params?: Record<string, unknown>) => string;
+export declare function mapIssues(issues: ServerIssue[], text: (code: string, params?: Record<string, unknown>) => string): Record<string, string>;
+export declare function clearPrefix(errors: Record<string, string>, key: string): Record<string, string>;