@coffer-org/web-ui 4.0.0 → 6.0.0

package/dist/render/blocks/table.js

@@ -7,10 +7,11 @@ import { registerRenderer } from "../../registry.js";
 import { Icon } from "../../components/Icon.js";
 import { AddBtn } from "../shared.js";
 import { RemoveBtn } from "../multiple-chips.js";
-import { groupScopeClass, useGroupDepth, GroupDepthProvider } from "../chrome.js";
+import { groupScopeClass, useGroupDepth, GroupDepthProvider, CHROME_LABEL_CLS } from "../chrome.js";
 import { useGroupEdit } from "../widgets/group-edit.js";
 import { useHybridScope } from "../hybrid-scope.js";
 import { FieldSlot, fieldKeys } from "../dispatch.js";
+import { datumClass } from "../datum.js";
 import { useFieldErrors } from "../field-errors.js";
 import { sortByField } from "../sort-rows.js";
 import { useCollectionRows } from "../use-collection-rows.js";
@@ -123,12 +124,12 @@ function TablePage({ el, value, recordCtx, mode }) {
     const totalRow = (bucketRows, testId) => (_jsxs("tr", { "data-testid": testId, className: "text-xs text-muted", children: [numbered && _jsx("td", { className: "border-b border-border py-1.5 pr-3" }), cols.map((f, i) => {
                 const kind = totals?.[f.key];
                 const n = kind && colOf(f.key) ? aggregate(kind, f, bucketRows) : undefined;
-                return (_jsxs("td", { className: "border-b border-border py-1.5 pr-4", children: [i === 0 && !totals?.[f.key] ? t('table.total') : null, n === undefined ? null : (_jsx(FieldSlot, { el: f, field: f.type, value: totalValue(f, bucketRows, n), mode: "view", bare: true, recordCtx: recordCtx }))] }, f.key));
+                return (_jsxs("td", { className: `border-b border-border py-1.5 pr-4 ${datumClass(f.type)}`.trim(), children: [i === 0 && !totals?.[f.key] ? t('table.total') : null, n === undefined ? null : (_jsx(FieldSlot, { el: f, field: f.type, value: totalValue(f, bucketRows, n), mode: "view", bare: true, recordCtx: recordCtx }))] }, f.key));
             }), rowTools && _jsx("td", { className: "border-b border-border" })] }));
     const { rowId, updateRow, removeRow, addRow } = useCollectionRows(rows, (v) => g.onChange(v));
     const errorFor = (idx, key) => isStorageGroup(group) ? errorAt([group.key, idx, key]) : undefined;
-    const bodyRow = (row, idx, seq) => (_jsxs("tr", { "data-testid": `table-row-${idx}`, children: [numbered && _jsx("td", { className: "border-b border-border py-2 pr-3 text-xs text-muted", children: seq }), cols.map((f) => (_jsx("td", { className: "border-b border-border py-2 pr-4 align-top", children: cellNode(f, row, editing, live, (v) => updateRow(idx, f.key, v), recordCtx, errorFor(idx, f.key)) }, f.key))), rowTools && (_jsx("td", { className: "border-b border-border py-2 align-top", children: _jsx(RemoveBtn, { className: "mt-0.5", onClick: () => removeRow(idx) }) }))] }, rowId(row)));
-    const content = (_jsxs("div", { className: "flex flex-col gap-2 min-w-0", children: [_jsx("div", { className: "overflow-auto max-h-[60vh]", children: _jsxs("table", { className: "w-full border-separate border-spacing-0 text-sm", "data-testid": "table-block", children: [_jsx("thead", { className: "eink-solid sticky top-0 z-10 bg-bg/95 backdrop-blur", children: _jsxs("tr", { children: [numbered && _jsx("th", { className: "border-b border-border py-1.5 pr-3" }), cols.map((f) => (_jsx("th", { className: "border-b border-border py-1.5 pr-4 text-left text-xs font-normal text-muted", children: _jsxs("button", { type: "button", className: "inline-flex items-center gap-1 focus-visible:outline-2 focus-visible:outline-accent", onClick: () => cycle(f.key), children: [t(f.type.label), !editing && sort?.key === f.key && (_jsx(Icon, { name: sort.dir === 'asc' ? 'lucide:arrow-up' : 'lucide:arrow-down', className: "size-3" }))] }) }, f.key))), rowTools && _jsx("th", { className: "border-b border-border" })] }) }), buckets.map((b) => (_jsxs("tbody", { className: "tabular-nums", children: [b.key !== null && (_jsx("tr", { "data-testid": `table-group-${b.key}`, children: _jsxs("th", { colSpan: cols.length + (numbered ? 1 : 0) + (rowTools ? 1 : 0), className: "border-b border-border pt-4 pb-1 text-left text-xs font-medium text-muted", children: [b.key === NO_VALUE || !groupFld ? (b.label) : (_jsx(FieldSlot, { el: groupFld, field: groupFld.type, value: b.rows[0]?.[groupKey ?? ''], mode: "view", bare: true, recordCtx: recordCtx })), ' ', _jsx("span", { className: "text-muted/70", children: b.rows.length })] }) })), b.rows.map((row, i) => bodyRow(row, indexOf.get(row) ?? -1, i + 1)), hasTotals && b.key !== null && totalRow(b.rows, `table-subtotal-${b.key}`)] }, b.key ?? 'all'))), hasTotals && _jsx("tfoot", { children: totalRow(rows, 'table-total') })] }) }), rowTools && _jsx(AddBtn, { onClick: addRow, children: t('form.addRow') })] }));
+    const bodyRow = (row, idx, seq) => (_jsxs("tr", { "data-testid": `table-row-${idx}`, children: [numbered && _jsx("td", { className: "border-b border-border py-2 pr-3 text-xs text-muted", children: seq }), cols.map((f) => (_jsx("td", { className: `border-b border-border py-2 pr-4 align-top ${datumClass(f.type)}`.trim(), children: cellNode(f, row, editing, live, (v) => updateRow(idx, f.key, v), recordCtx, errorFor(idx, f.key)) }, f.key))), rowTools && (_jsx("td", { className: "border-b border-border py-2 align-top", children: _jsx(RemoveBtn, { className: "mt-0.5", onClick: () => removeRow(idx) }) }))] }, rowId(row)));
+    const content = (_jsxs("div", { className: "flex flex-col gap-2 min-w-0", children: [_jsx("div", { className: "overflow-auto max-h-[60vh]", children: _jsxs("table", { className: "w-full border-separate border-spacing-0 text-sm", "data-testid": "table-block", children: [_jsx("thead", { className: "eink-solid sticky top-0 z-10 bg-bg/95 backdrop-blur", children: _jsxs("tr", { children: [numbered && _jsx("th", { className: "border-b border-border py-1.5 pr-3" }), cols.map((f) => (_jsx("th", { className: `border-b border-border py-1.5 pr-4 text-left ${CHROME_LABEL_CLS}`, children: _jsxs("button", { type: "button", className: "inline-flex items-center gap-1 focus-visible:outline-2 focus-visible:outline-accent", onClick: () => cycle(f.key), children: [t(f.type.label), !editing && sort?.key === f.key && (_jsx(Icon, { name: sort.dir === 'asc' ? 'lucide:arrow-up' : 'lucide:arrow-down', className: "size-3" }))] }) }, f.key))), rowTools && _jsx("th", { className: "border-b border-border" })] }) }), buckets.map((b) => (_jsxs("tbody", { children: [b.key !== null && (_jsx("tr", { "data-testid": `table-group-${b.key}`, children: _jsxs("th", { colSpan: cols.length + (numbered ? 1 : 0) + (rowTools ? 1 : 0), className: `border-b border-border pt-4 pb-1 text-left ${CHROME_LABEL_CLS} ${groupFld ? datumClass(groupFld.type) : ''}`.trim(), children: [b.key === NO_VALUE || !groupFld ? (b.label) : (_jsx(FieldSlot, { el: groupFld, field: groupFld.type, value: b.rows[0]?.[groupKey ?? ''], mode: "view", bare: true, recordCtx: recordCtx })), ' ', _jsx("span", { className: "text-muted/70", children: b.rows.length })] }) })), b.rows.map((row, i) => bodyRow(row, indexOf.get(row) ?? -1, i + 1)), hasTotals && b.key !== null && totalRow(b.rows, `table-subtotal-${b.key}`)] }, b.key ?? 'all'))), hasTotals && _jsx("tfoot", { children: totalRow(rows, 'table-total') })] }) }), rowTools && _jsx(AddBtn, { onClick: addRow, children: t('form.addRow') })] }));
     if (mode !== 'view')
         return content;
     return (_jsxs("section", { className: `${groupScopeClass(depth)} flex flex-col gap-1 min-w-0`, "data-testid": "table", children: [group.label && (_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/chrome.d.ts

@@ -1,4 +1,4 @@
-import { type ReactNode } from 'react';
+import { type HTMLAttributes, type ReactNode } from 'react';
 import type { BoxGeom } from '../types.ts';
 import type { FieldMeta, ContainerNode } from '@coffer-org/sdk/fields';
 export declare const STACK = "gap-3.5";
@@ -14,6 +14,10 @@ export declare function FieldLabel({ label, required, actions, reserveAction, }:
     reserveAction?: boolean;
     htmlFor?: string;
 }): import("react").JSX.Element;
+export declare const CHROME_LABEL_CLS = "min-w-0 text-[11px] font-medium tracking-wide text-muted";
+export declare function ChromeLabel({ children, ...rest }: {
+    children: ReactNode;
+} & HTMLAttributes<HTMLSpanElement>): import("react").JSX.Element;
 export declare function FieldLabelText({ label, required }: {
     label: string;
     required?: boolean;
@@ -41,11 +45,18 @@ export declare function groupScopeClass(depth: number): string;
 export declare function groupRevealClass(depth: number): string;
 export declare const ACTION_CHIP = "h-7 w-7 rounded-md border border-border bg-surface/80 text-muted hover:border-accent/60 hover:text-accent";
 export declare const ACTION_CHIP_ACCENT = "h-7 w-7 rounded-md border border-accent/40 bg-accent/10 text-accent hover:border-accent hover:bg-accent/20 hover:text-accent";
-export declare function EditToggle({ onEdit, variant, scope, }: {
+export declare function EditToggle({ onEdit, scope }: {
     onEdit: () => void;
-    variant?: 'inline' | 'overlay';
     scope?: 'field' | 'group';
 }): import("react").JSX.Element;
+export declare function ValueActions({ getText, onEdit }: {
+    getText: () => string;
+    onEdit: () => void;
+}): import("react").JSX.Element;
+export declare function ValueActionsOverlay({ onEdit, children }: {
+    onEdit: () => void;
+    children: ReactNode;
+}): import("react").JSX.Element;
 export declare function SaveCancel({ size, busy, disabled, onSave, onCancel, }: {
     size: 'xs' | 'sm';
     busy: boolean;
@@ -59,6 +70,13 @@ export declare function FieldBox({ geom, field, children }: {
     field: FieldMeta;
     children: ReactNode;
 }): import("react").JSX.Element;
+export declare function TriggerBox({ expanded, label, onOpen, haspopup, children, }: {
+    expanded?: boolean;
+    label?: string;
+    onOpen: () => void;
+    haspopup?: 'dialog';
+    children: ReactNode;
+}): import("react").JSX.Element;
 export declare function FieldError({ error }: {
     error?: string;
 }): import("react").JSX.Element | null;

package/dist/render/chrome.js

@@ -1,11 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { createContext, useContext } from 'react';
+import { createContext, useContext, useLayoutEffect, useRef, useState, } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Check, Pencil, X } from 'lucide-react';
 import { Button } from "../components/ui/button.js";
+import { CopyButton } from "../components/ui/copy-button.js";
 import { Icon } from "../components/Icon.js";
 import { resolveBox, boxClass, FIELD_ROW_CLS } from "./box.js";
 import { isCollectionGroup } from '@coffer-org/sdk/fields';
+import { datumClass } from "./datum.js";
 export const STACK = 'gap-3.5';
 export const LAYOUT_STACK = 'gap-6';
 export const PAGE_STACK = 'gap-6';
@@ -15,8 +17,12 @@ export function Rail({ children }) {
 export function FieldLabel({ label, required, actions, reserveAction, }) {
     return (_jsxs("div", { className: `flex items-center gap-2 mb-0.5 min-h-8 ${reserveAction ? 'pr-24' : ''}`, children: [_jsx(FieldLabelText, { label: label, required: required }), actions && _jsx("div", { className: "ml-auto flex shrink-0 items-center gap-1.5", children: actions })] }));
 }
+export const CHROME_LABEL_CLS = 'min-w-0 text-[11px] font-medium tracking-wide text-muted';
+export function ChromeLabel({ children, ...rest }) {
+    return (_jsx("span", { ...rest, className: CHROME_LABEL_CLS, children: children }));
+}
 export function FieldLabelText({ label, required }) {
-    return (_jsxs("span", { className: "min-w-0 text-[11px] font-medium text-muted", children: [label, required && _jsx("span", { className: "text-danger ml-0.5", children: "*" })] }));
+    return (_jsxs(ChromeLabel, { children: [label, required && _jsx("span", { className: "text-danger ml-0.5", children: "*" })] }));
 }
 const GROUP_TITLE_BASE = 'flex items-center gap-2 font-semibold';
 export const GROUP_TITLE_CLS = `${GROUP_TITLE_BASE} text-[13px] text-accent`;
@@ -64,12 +70,19 @@ export function groupRevealClass(depth) {
 }
 export const ACTION_CHIP = 'h-7 w-7 rounded-md border border-border bg-surface/80 text-muted hover:border-accent/60 hover:text-accent';
 export const ACTION_CHIP_ACCENT = 'h-7 w-7 rounded-md border border-accent/40 bg-accent/10 text-accent hover:border-accent hover:bg-accent/20 hover:text-accent';
-export function EditToggle({ onEdit, variant = 'inline', scope = 'field', }) {
+export function EditToggle({ onEdit, scope = 'field' }) {
     const { t } = useTranslation();
     const depth = useGroupDepth();
     const reveal = scope === 'group' ? groupRevealClass(depth) : EDIT_REVEAL;
-    const pos = variant === 'overlay' ? 'absolute right-1 top-0 z-10' : '';
-    return (_jsx(Button, { type: "button", variant: "outline", size: "iconXs", className: `${pos} ${ACTION_CHIP} ${reveal}`, onClick: onEdit, title: t('actions.edit'), children: _jsx(Pencil, { size: 13 }) }));
+    const label = t('actions.edit');
+    return (_jsx(Button, { type: "button", variant: "outline", size: "iconXs", className: `${ACTION_CHIP} ${reveal}`, onClick: onEdit, title: label, "aria-label": label, children: _jsx(Pencil, { size: 13 }) }));
+}
+export function ValueActions({ getText, onEdit }) {
+    return (_jsxs("span", { className: "inline-flex shrink-0 items-center gap-1", children: [_jsx(CopyButton, { getText: getText, className: `${ACTION_CHIP} ${EDIT_REVEAL}` }), _jsx(EditToggle, { onEdit: onEdit })] }));
+}
+export function ValueActionsOverlay({ onEdit, children }) {
+    const ref = useRef(null);
+    return (_jsxs("div", { className: "relative flex min-w-0 max-w-full items-center pr-16", children: [_jsx("div", { ref: ref, className: "contents", children: children }), _jsx("div", { className: "absolute right-1 top-1/2 z-10 -translate-y-1/2", children: _jsx(ValueActions, { getText: () => ref.current?.textContent ?? '', onEdit: onEdit }) })] }));
 }
 export function SaveCancel({ size, busy, disabled, onSave, onCancel, }) {
     const { t } = useTranslation();
@@ -83,7 +96,34 @@ export function FieldBox({ geom, field, children }) {
     const box = resolveBox(field, geom);
     if (box === 'none')
         return _jsx(_Fragment, { children: children });
-    return _jsx("div", { className: boxClass(box), children: children });
+    return _jsx("div", { className: `${boxClass(box)} ${datumClass(field)}`.trim(), children: children });
+}
+const TRIGGER_DESCENDANT_SEL = 'a,button,[role="button"],audio,video,input,label,summary,select,textarea,[contenteditable]';
+function ownedByDescendant(target, currentTarget) {
+    if (!(target instanceof Element))
+        return false;
+    const inner = target.closest(TRIGGER_DESCENDANT_SEL);
+    return inner !== null && inner !== currentTarget;
+}
+export function TriggerBox({ expanded, label, onOpen, haspopup, children, }) {
+    const textRef = useRef(null);
+    const [valueText, setValueText] = useState('');
+    useLayoutEffect(() => {
+        setValueText(textRef.current?.textContent ?? '');
+    });
+    const accessibleName = label && valueText ? `${label}: ${valueText}` : label;
+    return (_jsx("div", { ref: textRef, role: "button", tabIndex: 0, "aria-haspopup": haspopup, "aria-expanded": expanded, "aria-label": accessibleName, className: "relative min-w-0 cursor-pointer rounded-lg outline-none transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", onClick: (e) => {
+            if (ownedByDescendant(e.target, e.currentTarget))
+                return;
+            onOpen();
+        }, onKeyDown: (e) => {
+            if (e.key !== 'Enter' && e.key !== ' ')
+                return;
+            if (ownedByDescendant(e.target, e.currentTarget))
+                return;
+            e.preventDefault();
+            onOpen();
+        }, children: children }));
 }
 export function FieldError({ error }) {
     if (!error)

package/dist/render/core/dimensions.js

@@ -33,7 +33,7 @@ function DimInput({ value, onChange }) {
 }
 function DimView({ value }) {
     const s = fmtDimensions(value);
-    return s ? _jsx("span", { className: "tabular-nums", children: s }) : _jsx(Dash, {});
+    return s ? _jsx("span", { children: s }) : _jsx(Dash, {});
 }
 function DimPage(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(DimView, { value: v }), edit: (value, onChange) => _jsx(DimInput, { value: value, onChange: onChange }) }));

package/dist/render/core/embed.js

@@ -96,4 +96,11 @@ export function EmbedInline(p) {
     const first = list[0];
     return (_jsxs("span", { className: "inline-flex min-w-0 items-center gap-1", children: [playable(first) ? _jsx(Play, { size: 12 }) : _jsx(Link2, { size: 12 }), _jsx("span", { className: "truncate", children: first.title ?? getHostname(first.url) }), list.length > 1 && _jsxs("span", { className: "text-muted", children: ["+", list.length - 1] })] }));
 }
-registerRenderer({ kinds: ['embed'], layout: 'block', Page: EmbedPage, Inline: EmbedInline, pickerSize: 'large' });
+registerRenderer({
+    kinds: ['embed'],
+    layout: 'block',
+    Page: EmbedPage,
+    Inline: EmbedInline,
+    pickerSize: 'large',
+    activate: 'value',
+});

package/dist/render/core/money.js

@@ -24,7 +24,7 @@ export function fmtMoney(value, currency) {
 }
 function MoneyView({ value, field }) {
     const s = fmtMoney(value, currencyOf(field));
-    return s ? _jsx("span", { className: "tabular-nums", children: s }) : _jsx(Dash, {});
+    return s ? _jsx("span", { children: s }) : _jsx(Dash, {});
 }
 function MoneyInput({ field, value, onChange }) {
     const cur = currencyOf(field);

package/dist/render/core/range.js

@@ -44,7 +44,7 @@ function RangeView({ value, field }) {
     const r = parseRange(value, field);
     if (r.from == null && r.to == null)
         return _jsx(Dash, {});
-    return (_jsxs("span", { className: "tabular-nums", children: [r.from ?? '…', "\u2013", r.to ?? '…'] }));
+    return (_jsxs("span", { children: [r.from ?? '…', "\u2013", r.to ?? '…'] }));
 }
 function RangePage(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) => _jsx(RangeView, { value: v, field: p.field }), edit: (value, onChange) => (_jsx(RangeInput, { field: p.field, value: value, onChange: onChange })) }));

package/dist/render/core/reminder.js

@@ -45,7 +45,7 @@ function ReminderView({ field, value }) {
             : tone === 'soon'
                 ? t('reminder.inDays', { days: diff })
                 : null;
-    return (_jsxs("span", { className: `tabular-nums ${TONE_CLS[tone]}`, children: [isoToDisplay(s), note ? _jsx("span", { className: "ml-2 text-xs", children: note }) : null] }));
+    return (_jsxs("span", { className: TONE_CLS[tone], children: [isoToDisplay(s), note ? _jsx("span", { className: "ml-2 text-xs", children: note }) : null] }));
 }
 function ReminderPage(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(ReminderView, { field: p.field, value: v }), edit: (value, onChange) => (_jsx(Input, { type: "date", value: String(value ?? ''), onChange: (e) => onChange(e.target.value) })) }));

package/dist/render/core/text.js

@@ -72,22 +72,75 @@ function TextInline({ field, value }) {
     return _jsx("span", { className: "truncate", children: trunc(fmtOptionLabel(t, field, value)) });
 }
 registerRenderer({
-    kinds: ['text', 'email', 'slug', 'unit'],
+    kinds: ['text', 'slug', 'unit'],
     Page: TextPage,
     Inline: TextInline,
     Value: PlainValue,
     keys: optionKeys,
 });
+function telHref(s) {
+    const digits = s.replace(/\D/g, '');
+    if (!digits)
+        return undefined;
+    return (s.trim().startsWith('+') ? '+' : '') + digits;
+}
+function TelAnchor({ value }) {
+    const s = String(value ?? '');
+    if (!hasValue(s))
+        return _jsx(Dash, {});
+    const href = telHref(s);
+    if (!href)
+        return _jsx("span", { className: "truncate", children: s });
+    return (_jsx("a", { href: `tel:${href}`, className: "inline-block max-w-full truncate align-bottom text-primary underline hover:text-primary/80 transition-colors", title: s, children: s }));
+}
 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 ?? '') }) })) }));
+    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) => _jsx(TelAnchor, { value: v }), 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 ?? '')) });
+    return _jsx(TelAnchor, { value: value });
 }
 registerRenderer({
     kinds: ['tel'],
     Page: TelPage,
     Inline: TelInline,
+    activate: 'value',
+});
+const EMAIL_HREF_RE = /^[^\s@]+@[^\s@]+$/;
+function mailtoHref(s) {
+    const trimmed = s.trim();
+    return EMAIL_HREF_RE.test(trimmed) ? trimmed : undefined;
+}
+function EmailAnchor({ value }) {
+    const s = String(value ?? '');
+    if (!hasValue(s))
+        return _jsx(Dash, {});
+    const href = mailtoHref(s);
+    if (!href)
+        return _jsx("span", { className: "truncate", children: s });
+    return (_jsx("a", { href: `mailto:${href}`, className: "inline-block max-w-full truncate align-bottom text-primary underline hover:text-primary/80 transition-colors", title: s, children: s }));
+}
+function EmailDisplay({ field, value }) {
+    return multiView(field, value, (i) => _jsx(EmailAnchor, { value: i }), undefined, optionChipProps(field));
+}
+function EmailPage(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(EmailDisplay, { 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 EmailInline({ field, value }) {
+    if (field.hints['multiple'] === true) {
+        const items = Array.isArray(value) ? value : parseStrArray(value);
+        if (!items.length)
+            return _jsx("span", { className: "truncate", children: "\u2014" });
+        return (_jsx("span", { className: "truncate", children: items.map((v, i) => (_jsxs(React.Fragment, { children: [i > 0 ? ', ' : '', _jsx(EmailAnchor, { value: v })] }, i))) }));
+    }
+    return _jsx(EmailAnchor, { value: value });
+}
+registerRenderer({
+    kinds: ['email'],
+    Page: EmailPage,
+    Inline: EmailInline,
+    Value: ({ value }) => _jsx(EmailAnchor, { value: value }),
+    keys: optionKeys,
+    activate: 'value',
 });
 const hrefOf = (s) => (/^[a-z][a-z0-9+.-]*:\/\//i.test(s) ? s : `https://${s}`);
 function LinkAnchor({ value }) {
@@ -104,6 +157,7 @@ registerRenderer({
     Page: LinkPage,
     Inline: ({ value }) => _jsx(LinkAnchor, { value: value }),
     Value: ({ value }) => _jsx(LinkAnchor, { value: value }),
+    activate: 'value',
 });
 function PasswordInput({ name, field, value, onChange }) {
     if (field.hints['multiple'] === true) {

package/dist/render/core/weight.js

@@ -16,7 +16,7 @@ function WeightView({ value }) {
     const p = weightParts(value);
     if (!p)
         return _jsx(Dash, {});
-    return (_jsxs("span", { className: "tabular-nums", children: [p.n, " ", t(`core.units.${p.unit}`)] }));
+    return (_jsxs("span", { children: [p.n, " ", t(`core.units.${p.unit}`)] }));
 }
 function ScaleToggle({ unit, onPick, label }) {
     const { t } = useTranslation();

package/dist/render/datum.d.ts

@@ -0,0 +1,4 @@
+import type { FieldClient } from '@coffer-org/sdk/fields';
+export declare const DATUM_KINDS: ReadonlySet<string>;
+export declare const DATUM_PRIMS: ReadonlySet<string>;
+export declare function datumClass(field: Pick<FieldClient, 'kind' | 'prim'>): string;

package/dist/render/datum.js

@@ -0,0 +1,16 @@
+const TABULAR_NUMS = 'tabular-nums';
+export const DATUM_KINDS = new Set(['tel', 'slug', 'tag', 'dimensions']);
+export const DATUM_PRIMS = new Set([
+    'number',
+    'date',
+    'time',
+    'datetime',
+    'measured',
+    'geo',
+    'period',
+    'numberRange',
+    'realRange',
+]);
+export function datumClass(field) {
+    return DATUM_KINDS.has(field.kind) || DATUM_PRIMS.has(field.prim) ? TABULAR_NUMS : '';
+}

package/dist/render/dispatch.js

@@ -4,6 +4,7 @@ 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 { datumClass } from "./datum.js";
 import { SlotProvider } from "./slot.js";
 export function FieldSlot(p) {
     const { onChange, ...rest } = p;
@@ -25,9 +26,10 @@ export function FieldSlot(p) {
 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 ?? '') }));
+    const datum = datumClass(field);
     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 }));
+        return datum ? _jsx("span", { className: datum, children: inner }) : inner;
+    return (_jsx("span", { className: `inline-flex min-w-0 items-center font-medium ${datum}`.trim(), style: { fontSize: Math.round(height * 0.7), lineHeight: 1.15 }, children: inner }));
 }
 export function fieldKeys(field, value, ctx) {
     const r = resolveRenderer(field);

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

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 import type { BoxGeom, FieldMode } from '../types.ts';
 import type { FieldMeta, OptionItem } from '@coffer-org/sdk/fields';
 export declare function focusInPopup(related: EventTarget | null): boolean;

package/dist/render/field-frame.js

@@ -1,13 +1,16 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from 'react';
 import { useFieldEdit, normalizeValue } from "./use-field-edit.js";
-import { FieldLabel, FieldBox, FieldError, EditToggle, SaveCancel } from "./chrome.js";
+import { FieldLabel, FieldBox, FieldError, SaveCancel, TriggerBox, ValueActions, ValueActionsOverlay, } from "./chrome.js";
 import { useInFlow } from "./widgets/flow-row.js";
 import { editorMode } from "./editor-mode.js";
+import { activateMode } from "./activate.js";
 import { useFieldAddress } from "./field-address.js";
 import { useHybridScope } from "./hybrid-scope.js";
 import { useFieldWidth } from "./field-width.js";
 import { PopoverField } from "./popover-field.js";
 import { useSlotOptional, useSlotRender } from "./slot.js";
+import { datumClass } from "./datum.js";
 const POPUP_SEL = '[data-slot="combobox-content"],[data-slot="popover-content"],[role="listbox"],[role="dialog"],[role="menu"],[data-scope="date-picker"][data-part="content"]';
 export function focusInPopup(related) {
     const el = related instanceof Element ? related : typeof document !== 'undefined' ? document.activeElement : null;
@@ -27,6 +30,7 @@ function FieldFrameBody(props) {
     const address = useFieldAddress();
     const onRecordPage = useHybridScope();
     const width = useFieldWidth() ?? ownWidth;
+    const valueRef = useRef(null);
     const emphasis = field.hints?.['emphasis'];
     const noLabel = field.hints?.['noLabel'] === true || label === undefined;
     const display = (val, commit) => {
@@ -59,20 +63,27 @@ function FieldFrameBody(props) {
                 fe.cancel();
             }
         }, children: content(true, fe.draft, fe.setDraft) }));
-    const viewLayer = (_jsx(FieldBox, { geom: geom, field: field, children: content(false, value, () => { }, write) }));
+    const activatable = Boolean(write) && activateMode(field) === 'edit';
+    const valueActivated = Boolean(write) && activateMode(field) === 'value';
+    const wrapValueText = (node) => valueActivated ? (_jsx("span", { ref: valueRef, className: "contents", children: node })) : (node);
+    const getValueText = () => valueRef.current?.textContent ?? '';
+    const closedContent = (_jsx(FieldBox, { geom: geom, field: field, children: content(false, value, () => { }, write) }));
+    const viewLayer = activatable ? (_jsx(TriggerBox, { label: label, expanded: fe.editing, onOpen: fe.beginEdit, children: closedContent })) : valueActivated && !noLabel ? (_jsx(ValueActionsOverlay, { onEdit: fe.beginEdit, children: closedContent })) : (wrapValueText(closedContent));
     const zone = inFlow ? (_jsxs("div", { className: "grid min-w-0", children: [_jsx("div", { className: "col-start-1 row-start-1 min-w-0", "aria-hidden": !fe.editing, inert: !fe.editing ? true : undefined, style: { visibility: fe.editing ? 'visible' : 'hidden' }, children: editLayer }), _jsx("div", { className: "col-start-1 row-start-1 min-w-0", style: { visibility: fe.editing ? 'hidden' : 'visible' }, children: viewLayer })] })) : fe.editing ? (editLayer) : (viewLayer);
-    const pencilOverlay = write && !fe.editing ? _jsx(EditToggle, { variant: "overlay", onEdit: fe.beginEdit }) : null;
     const editControls = write && fe.editing ? (_jsx("div", { className: "absolute right-1 top-0 z-10 flex gap-1", children: _jsx(SaveCancel, { size: "xs", busy: fe.busy, onSave: () => fe.commit(), onCancel: fe.cancel }) })) : null;
     if (emphasis === 'hero') {
-        const heroAction = write ? (fe.editing ? (_jsx(SaveCancel, { size: "sm", busy: fe.busy, onSave: () => fe.commit(), onCancel: fe.cancel })) : (_jsx(EditToggle, { onEdit: fe.beginEdit }))) : null;
-        return (_jsxs("div", { className: "group/field flex items-center gap-2 min-w-0", children: [_jsx("div", { className: "text-lg font-semibold text-text min-w-0", children: fe.editing ? editLayer : content(false, value, () => { }, write) }), heroAction, _jsx(FieldError, { error: slot?.error ?? error })] }));
+        const heroAction = write && fe.editing ? (_jsx(SaveCancel, { size: "sm", busy: fe.busy, onSave: () => fe.commit(), onCancel: fe.cancel })) : valueActivated ? (_jsx(ValueActions, { getText: getValueText, onEdit: fe.beginEdit })) : null;
+        const heroContent = wrapValueText(content(false, value, () => { }, write));
+        return (_jsxs("div", { className: "group/field flex items-center gap-2 min-w-0", children: [_jsx("div", { className: `text-lg font-semibold text-text min-w-0 ${fe.editing ? '' : datumClass(field)}`.trim(), children: fe.editing ? (editLayer) : activatable ? (_jsx(TriggerBox, { label: label, expanded: fe.editing, onOpen: fe.beginEdit, children: heroContent })) : (heroContent) }), heroAction, _jsx(FieldError, { error: slot?.error ?? error })] }));
     }
     if (emphasis === 'muted') {
-        const mutedAction = write ? (fe.editing ? (_jsx(SaveCancel, { size: "xs", busy: fe.busy, onSave: () => fe.commit(), onCancel: fe.cancel })) : (_jsx(EditToggle, { onEdit: fe.beginEdit }))) : null;
-        return (_jsxs("div", { className: "group/field grid grid-cols-[110px_1fr] items-center gap-x-3 text-xs text-muted min-w-0", children: [_jsxs("span", { className: "flex items-center gap-1.5", children: [label, mutedAction] }), _jsx("span", { className: "min-w-0", children: fe.editing ? editLayer : content(false, value, () => { }, write) }), _jsx(FieldError, { error: slot?.error ?? error })] }));
+        const mutedAction = write && fe.editing ? (_jsx(SaveCancel, { size: "xs", busy: fe.busy, onSave: () => fe.commit(), onCancel: fe.cancel })) : valueActivated ? (_jsx(ValueActions, { getText: getValueText, onEdit: fe.beginEdit })) : null;
+        const mutedContent = wrapValueText(content(false, value, () => { }, write));
+        return (_jsxs("div", { className: "group/field grid grid-cols-[110px_1fr] items-center gap-x-3 text-xs text-muted min-w-0", children: [_jsxs("span", { className: "flex items-center gap-1.5", children: [label, mutedAction] }), _jsx("span", { className: `min-w-0 ${fe.editing ? '' : datumClass(field)}`.trim(), children: fe.editing ? (editLayer) : activatable ? (_jsx(TriggerBox, { label: label, expanded: fe.editing, onOpen: fe.beginEdit, children: mutedContent })) : (mutedContent) }), _jsx(FieldError, { error: slot?.error ?? error })] }));
     }
     if (noLabel) {
-        return (_jsxs("div", { className: "group/field relative min-w-0 pr-8", children: [zone, pencilOverlay, editControls, _jsx(FieldError, { error: slot?.error ?? error })] }));
+        const valueActions = valueActivated && !fe.editing ? (_jsx("div", { className: "absolute right-1 top-1/2 z-10 -translate-y-1/2", children: _jsx(ValueActions, { getText: getValueText, onEdit: fe.beginEdit }) })) : null;
+        return (_jsxs("div", { className: "group/field relative min-w-0 pr-16", children: [zone, editControls, valueActions, _jsx(FieldError, { error: slot?.error ?? error })] }));
     }
-    return (_jsxs("div", { className: `group/field relative ${width}`, children: [_jsx(FieldLabel, { label: label, required: required, reserveAction: Boolean(write) }), zone, pencilOverlay, editControls, _jsx(FieldError, { error: slot?.error ?? error })] }));
+    return (_jsxs("div", { className: `group/field relative ${width}`, children: [_jsx(FieldLabel, { label: label, required: required, reserveAction: Boolean(write) }), zone, editControls, _jsx(FieldError, { error: slot?.error ?? error })] }));
 }

package/dist/render/markdown-view.js

@@ -1,17 +1,46 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { marked } from 'marked';
 import DOMPurify from 'dompurify';
+import { useInRouterContext, useNavigate } from 'react-router-dom';
+import { classifySiteHref } from "../internal-link.js";
+const INTERNAL_ATTR = 'data-site-link';
 DOMPurify.addHook('afterSanitizeAttributes', (node) => {
-    if (node.tagName === 'A') {
-        node.setAttribute('target', '_blank');
-        node.setAttribute('rel', 'noopener noreferrer');
+    if (node.tagName !== 'A')
+        return;
+    const kind = classifySiteHref(node.getAttribute('href') ?? '');
+    if (kind.kind === 'internal') {
+        node.setAttribute('href', kind.to);
+        node.setAttribute(INTERNAL_ATTR, '');
+        node.removeAttribute('target');
+        node.removeAttribute('rel');
+        return;
     }
+    node.setAttribute('target', '_blank');
+    node.setAttribute('rel', 'noopener noreferrer');
 });
 export function markdownToSafeHtml(src) {
     const raw = marked.parse(src, { async: false });
     return DOMPurify.sanitize(raw);
 }
+function Prose({ value, onClick }) {
+    return (_jsx("div", { className: "md-static", onClick: onClick, dangerouslySetInnerHTML: { __html: markdownToSafeHtml(value) } }));
+}
+function RoutedProse({ value }) {
+    const navigate = useNavigate();
+    return (_jsx(Prose, { value: value, onClick: (event) => {
+            const anchor = event.target.closest?.(`a[${INTERNAL_ATTR}]`);
+            if (!anchor)
+                return;
+            if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey)
+                return;
+            const to = anchor.getAttribute('href');
+            if (!to)
+                return;
+            event.preventDefault();
+            navigate(to);
+        } }));
+}
 export function MarkdownView({ value }) {
-    return _jsx("div", { className: "md-static", dangerouslySetInnerHTML: { __html: markdownToSafeHtml(value) } });
+    return useInRouterContext() ? _jsx(RoutedProse, { value: value }) : _jsx(Prose, { value: value });
 }
 export default MarkdownView;

package/dist/render/popover-field.js

@@ -9,11 +9,12 @@ import { Dialog, DialogBody, DialogContent, DialogHeader, DialogTitle } from "..
 import { Button } from "../components/ui/button.js";
 import { Plus } from 'lucide-react';
 import { useMinWidth } from "../hooks/use-media-query.js";
-import { FieldLabel, FieldError, FieldBox } from "./chrome.js";
+import { FieldLabel, FieldError, FieldBox, TriggerBox, ValueActionsOverlay } from "./chrome.js";
 import { makeIssueText } from "./field-errors.js";
 import { normalizeValue } from "./use-field-edit.js";
 import { focusInPopup } from "./field-frame.js";
 import { editorMode } from "./editor-mode.js";
+import { activateMode } from "./activate.js";
 import { useRegisterPicker } from "./picker-scrim.js";
 import { useFieldAddress } from "./field-address.js";
 import { PickerSurface } from "./picker-surface.js";
@@ -23,7 +24,7 @@ import { hasValue } from "./shared.js";
 import { parseJSON } from "../lib/json.js";
 import { makeWriter } from "./write.js";
 import { SlotProvider } from "./slot.js";
-function Picker({ field, validateWith, trigger, seed, options, listMultiple, pickDecides, showInput, size, label, edit, build, onCommit, onDelete, removeLabel, }) {
+function Picker({ field, validateWith, trigger, valueActivated, seed, options, listMultiple, pickDecides, showInput, size, label, edit, build, onCommit, onDelete, removeLabel, }) {
     const { t } = useTranslation();
     const wide = useMinWidth('sm', 640);
     const [open, setOpen] = useState(false);
@@ -72,26 +73,15 @@ function Picker({ field, validateWith, trigger, seed, options, listMultiple, pic
                             edit(normalizeValue(field, draft), setDraft), options && (_jsx(OptionList, { field: field, options: options, value: draft, multiple: listMultiple, onPick: pick }))] })) }), _jsx(FieldError, { error: localError }), !Custom && (showInput || onDelete) && (_jsxs("div", { className: "mt-2 flex items-center justify-end gap-2 border-t border-border pt-2", children: [onDelete && (_jsx(Button, { type: "button", variant: "destructiveOutline", size: "sm", className: "mr-auto", disabled: busy, onClick: () => void write(onDelete()), children: removeLabel })), showInput && (_jsx(Button, { type: "button", size: "sm", disabled: busy, onClick: () => void write(build(draft)), children: t('actions.save') }))] }))] }));
     const asWindow = size === 'modal' || !wide;
     const panelWidth = size === 'large' ? 'w-[min(32rem,calc(100vw-2rem))]' : 'w-72';
-    const anchored = (_jsxs(Popover, { open: open, onOpenChange: (o) => (o ? start() : cancel()), children: [_jsxs(TriggerBox, { open: open, label: label, onOpen: start, children: [trigger, _jsx(PopoverAnchor, { asChild: true, children: _jsx("span", { "aria-hidden": true, className: `pointer-events-none absolute inset-y-0 left-0 max-w-full ${panelWidth}` }) })] }), _jsxs(PopoverContent, { align: "start", className: `${panelWidth} p-2`, onInteractOutside: (e) => {
+    const anchor = (_jsx(PopoverAnchor, { asChild: true, children: _jsx("span", { "aria-hidden": true, className: `pointer-events-none absolute inset-y-0 left-0 max-w-full ${panelWidth}` }) }));
+    const valueDisplay = (children) => (_jsxs(ValueActionsOverlay, { onEdit: start, children: [trigger, children] }));
+    const anchored = (_jsxs(Popover, { open: open, onOpenChange: (o) => (o ? start() : cancel()), children: [valueActivated ? (valueDisplay(anchor)) : (_jsxs(TriggerBox, { expanded: open, label: label, onOpen: start, haspopup: "dialog", children: [trigger, anchor] })), _jsxs(PopoverContent, { align: "start", className: `${panelWidth} p-2`, onInteractOutside: (e) => {
                     if (focusInPopup(e.target))
                         e.preventDefault();
                 }, onEscapeKeyDown: cancel, children: [_jsx(PopoverArrow, {}), body] })] }));
     if (!asWindow)
         return anchored;
-    return (_jsxs(_Fragment, { children: [_jsx(TriggerBox, { open: open, label: label, onOpen: start, children: trigger }), _jsx(Dialog, { open: open, onOpenChange: (o) => (o ? start() : cancel()), children: _jsxs(DialogContent, { onEscapeKeyDown: cancel, className: "h-[88dvh] md:h-[min(80dvh,52rem)] md:max-w-5xl md:overflow-hidden", children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: label ?? '' }) }), _jsx(DialogBody, { children: body })] }) })] }));
-}
-function TriggerBox({ open, label, onOpen, children, ...rest }) {
-    return (_jsx("div", { ...rest, role: "button", tabIndex: 0, "aria-haspopup": "dialog", "aria-expanded": open, "aria-label": label, className: "relative min-w-0 cursor-pointer rounded-lg border border-transparent focus-visible:border-accent focus-visible:outline-none", onClick: (e) => {
-            const inner = e.target.closest('a,button,[role="button"],audio,video,input,label');
-            if (inner && inner !== e.currentTarget)
-                return;
-            onOpen();
-        }, onKeyDown: (e) => {
-            if (e.key === 'Enter' || e.key === ' ') {
-                e.preventDefault();
-                onOpen();
-            }
-        }, children: children }));
+    return (_jsxs(_Fragment, { children: [valueActivated ? (valueDisplay()) : (_jsx(TriggerBox, { expanded: open, label: label, onOpen: start, haspopup: "dialog", children: trigger })), _jsx(Dialog, { open: open, onOpenChange: (o) => (o ? start() : cancel()), children: _jsxs(DialogContent, { onEscapeKeyDown: cancel, className: "h-[88dvh] md:h-[min(80dvh,52rem)] md:max-w-5xl md:overflow-hidden", children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: label ?? '' }) }), _jsx(DialogBody, { children: body })] }) })] }));
 }
 export function PopoverField({ field, value, label, required, error, geom, view, edit, pickerOptions, onCommit, width = 'w-64', }) {
     const { t } = useTranslation();
@@ -107,6 +97,7 @@ export function PopoverField({ field, value, label, required, error, geom, view,
     const showInput = !(options && field.strict);
     const Value = R?.Value;
     const perValue = multi && Value;
+    const valueActivated = activateMode(field) === 'value';
     const address = useFieldAddress();
     const scalarField = useMemo(() => ({ ...field, hints: { ...field.hints, multiple: false }, json: undefined }), [field]);
     const freeField = useMemo(() => ({ ...field, options: undefined, hints: { ...field.hints, source: null, suggestions: undefined } }), [field]);
@@ -146,8 +137,8 @@ export function PopoverField({ field, value, label, required, error, geom, view,
             label,
             removeLabel: t('actions.delete'),
         };
-        return shell(_jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-1.5", children: [items.map((item, idx) => (_createElement(Picker, { ...one, key: `${String(item)}-${idx}`, validateWith: field, seed: item, build: (d) => at(idx, d), onDelete: () => without(idx), onCommit: onCommit, trigger: _jsx("span", { className: "inline-flex min-w-0 items-center gap-1.5 rounded-full border border-border px-2 py-0.5 text-sm", children: _jsx(Value, { field: field, value: item }) }) }))), _jsx(Picker, { ...one, validateWith: field, seed: "", build: (d) => [...items, d], onCommit: onCommit, trigger: _jsx("span", { className: "inline-flex items-center gap-1 rounded-full border border-dashed border-border px-2 py-0.5 text-sm text-muted", title: t('actions.add'), children: _jsx(Plus, { size: 14 }) }) })] }));
+        return shell(_jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-1.5", children: [items.map((item, idx) => (_createElement(Picker, { ...one, key: `${String(item)}-${idx}`, validateWith: field, valueActivated: valueActivated, seed: item, build: (d) => at(idx, d), onDelete: () => without(idx), onCommit: onCommit, trigger: _jsx("span", { className: "inline-flex min-w-0 items-center gap-1.5 rounded-full border border-border px-2 py-0.5 text-sm", children: _jsx(Value, { field: field, value: item }) }) }))), _jsx(Picker, { ...one, validateWith: field, valueActivated: false, seed: "", build: (d) => [...items, d], onCommit: onCommit, trigger: _jsx("span", { className: "inline-flex items-center gap-1 rounded-full border border-dashed border-border px-2 py-0.5 text-sm text-muted", title: t('actions.add'), children: _jsx(Plus, { size: 14 }) }) })] }));
     }
     const clearable = !multi && !field.required && !required && hasValue(value);
-    return shell(_jsx(Picker, { field: field, label: label, size: size, options: options, listMultiple: multi, pickDecides: !multi, showInput: showInput, seed: value, edit: inputEdit, build: (d) => d, onCommit: onCommit, onDelete: clearable ? () => '' : undefined, removeLabel: t('actions.clear'), trigger: _jsx(FieldBox, { geom: geom, field: field, children: triggerDisplay(value, (v) => void onCommit(v)) }) }));
+    return shell(_jsx(Picker, { field: field, valueActivated: valueActivated, label: label, size: size, options: options, listMultiple: multi, pickDecides: !multi, showInput: showInput, seed: value, edit: inputEdit, build: (d) => d, onCommit: onCommit, onDelete: clearable ? () => '' : undefined, removeLabel: t('actions.clear'), trigger: _jsx(FieldBox, { geom: geom, field: field, children: triggerDisplay(value, (v) => void onCommit(v)) }) }));
 }

package/dist/render/widgets/display.js

@@ -9,6 +9,7 @@ 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 { CHROME_LABEL_CLS } from "../chrome.js";
 import { FlowRow } from "./flow-row.js";
 import { ChecklistRow } from "./checklist-row.js";
 import { ChecklistContent, clientChecklistContentFields } from "./checklist-content.js";
@@ -18,7 +19,7 @@ export function KeyValueList({ value, option, recordCtx = { library: '', shelf:
         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 }) })] })),
+            node: (_jsxs("div", { children: [_jsx("dt", { className: CHROME_LABEL_CLS, 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 }, }) {