@coffer-org/web-ui 5.0.0 → 6.0.0

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/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 }, }) {

package/dist/render/widgets/edit.js

@@ -15,7 +15,7 @@ import { Plus } from 'lucide-react';
 import { RecordInline } from "../../components/RecordInline.js";
 import { RemoveBtn, AddBtn, MultipleChips, CheckLegend, colsToCheckRow, checkRowToCols, Dash, } from "../shared.js";
 import { FieldSlot } from "../dispatch.js";
-import { FieldLabel } from "../chrome.js";
+import { FieldLabel, CHROME_LABEL_CLS } from "../chrome.js";
 import { measuredChipContent, measuredUnitLabel } from "./display.js";
 import { ChecklistRow } from "./checklist-row.js";
 import { ChecklistContent, clientChecklistContentFields } from "./checklist-content.js";
@@ -238,7 +238,7 @@ export function KeyValueWidget({ value, onChange, multiple = true, option, keyLa
     const canAdd = multiple || rows.length < 1;
     return (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(FlowRow, { items: rows.map((item, idx) => ({
                     key: String(idx),
-                    node: (_jsxs("div", { className: "flex flex-col gap-0.5 w-56 max-w-full min-w-0", children: [_jsxs("div", { className: "flex items-center gap-1 min-w-0", children: [_jsx(Input, { placeholder: kLabel, value: item.key, className: "h-6 px-1 min-w-0 text-[11px] font-semibold uppercase text-muted", autoComplete: "off", onChange: (e) => save(rows.map((x, i) => (i === idx ? { ...x, key: e.target.value } : x))) }), _jsx(RemoveBtn, { onClick: () => save(rows.filter((_, i) => i !== idx)) })] }), _jsx(FieldSlot, { bare: true, field: option, value: item.value, mode: "edit", onChange: (v) => updatePairValue(idx, String(v)), recordCtx: recordCtx })] })),
+                    node: (_jsxs("div", { className: "flex flex-col gap-0.5 w-56 max-w-full min-w-0", children: [_jsxs("div", { className: "flex items-center gap-1 min-w-0", children: [_jsx(Input, { placeholder: kLabel, value: item.key, className: `h-6 px-1 ${CHROME_LABEL_CLS}`, autoComplete: "off", onChange: (e) => save(rows.map((x, i) => (i === idx ? { ...x, key: e.target.value } : x))) }), _jsx(RemoveBtn, { onClick: () => save(rows.filter((_, i) => i !== idx)) })] }), _jsx(FieldSlot, { bare: true, field: option, value: item.value, mode: "edit", onChange: (v) => updatePairValue(idx, String(v)), recordCtx: recordCtx })] })),
                 })) }), canAdd && (_jsxs(AddBtn, { onClick: () => setRows((r) => [...r, { key: '', value: '' }]), children: [kLabel, "/", vLabel] }))] }));
 }
 function parseMeasuredItems(value) {

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

@@ -8,6 +8,7 @@ import { FlowRow } from "./flow-row.js";
 import { subFull } from "./group.js";
 import { useGroupEdit } from "./group-edit.js";
 import { useHybridScope } from "../hybrid-scope.js";
+import { datumClass } from "../datum.js";
 export function FixedCollection({ group, value, onChange, recordCtx, mode = 'edit', }) {
     const { t } = useTranslation();
     const depth = useGroupDepth();
@@ -29,6 +30,6 @@ export function FixedCollection({ group, value, onChange, recordCtx, mode = 'edi
     return (_jsxs("fieldset", { className: `${groupScopeClass(depth)} flex flex-col min-w-0 ${STACK}`, children: [_jsx(GroupTitle, { as: "legend", label: t(group.label), icon: groupIcon(group), actions: live ? null : g.actions }), _jsx("div", { className: `flex flex-col ${STACK}`, children: rows.map((row, idx) => (_jsx(Rail, { children: _jsxs("div", { className: "flex items-start gap-2", children: [_jsxs("div", { className: "flex flex-col gap-0.5 min-w-0 shrink-0", children: [by.type.label ? _jsx(FieldLabel, { label: t(by.type.label) }) : null, _jsx("span", { className: "text-sm px-1 py-2", children: fmtOptionLabel(t, { options: byOpts }, String(row[by.key] ?? '')) })] }), _jsx("div", { className: "flex-1 min-w-0", children: _jsx(FlowRow, { items: valueFields.map((sub) => ({
                                         key: sub.key,
                                         full: subFull(sub.type),
-                                        node: editing ? (_jsx("div", { className: "flex flex-col gap-0.5 min-w-0", children: _jsx(FieldSlot, { field: sub.type, value: row[sub.key] ?? '', onChange: (v) => update(idx, sub.key, v), label: sub.type.label ? t(sub.type.label) : undefined, mode: "edit", recordCtx: recordCtx }) })) : (_jsxs("div", { className: "flex flex-col gap-0.5 min-w-0", children: [sub.type.label ? _jsx(FieldLabel, { label: t(sub.type.label) }) : null, _jsx(FieldSlot, { field: sub.type, fieldKey: live ? sub.key : undefined, value: row[sub.key] ?? '', onChange: live ? (v) => update(idx, sub.key, v) : undefined, mode: "view", bare: !live, recordCtx: recordCtx })] })),
+                                        node: editing ? (_jsx("div", { className: "flex flex-col gap-0.5 min-w-0", children: _jsx(FieldSlot, { field: sub.type, value: row[sub.key] ?? '', onChange: (v) => update(idx, sub.key, v), label: sub.type.label ? t(sub.type.label) : undefined, mode: "edit", recordCtx: recordCtx }) })) : (_jsxs("div", { className: `flex flex-col gap-0.5 min-w-0 ${datumClass(sub.type)}`.trim(), children: [sub.type.label ? _jsx(FieldLabel, { label: t(sub.type.label) }) : null, _jsx(FieldSlot, { field: sub.type, fieldKey: live ? sub.key : undefined, value: row[sub.key] ?? '', onChange: live ? (v) => update(idx, sub.key, v) : undefined, mode: "view", bare: !live, recordCtx: recordCtx })] })),
                                     })) }) })] }) }, String(row[by.key])))) })] }));
 }

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

@@ -37,5 +37,5 @@ function ChecklistPage({ el, value, recordCtx, mode }) {
     return (_jsx(ChecklistGroup, { group: el, value: value, onChange: (v) => void write(v), recordCtx: recordCtx, mode: mode }));
 }
 registerRenderer({ kinds: ['per-weekday'], layout: 'block', Page: WeekdayGroupPage, editor: 'custom' });
-registerRenderer({ kinds: ['url'], layout: 'block', Page: UrlGroupPage });
+registerRenderer({ kinds: ['url'], layout: 'block', Page: UrlGroupPage, activate: 'value' });
 registerRenderer({ kinds: ['checklist'], layout: 'block', Page: ChecklistPage, editor: 'custom' });

package/dist/render/widgets/group.js

@@ -12,6 +12,7 @@ import { useFieldErrors } from "../field-errors.js";
 import { GroupField } from "./group-field.js";
 import { useGroupEdit } from "./group-edit.js";
 import { useHybridScope } from "../hybrid-scope.js";
+import { datumClass } from "../datum.js";
 import { FlowRow } from "./flow-row.js";
 import { fieldLayout } from "../../registry.js";
 export const subFull = (f) => fieldLayout(f) === 'block';
@@ -75,7 +76,7 @@ function CollectionCell({ sub, row, group, recordCtx, onChange, }) {
     const { t } = useTranslation();
     const live = useHybridScope() && Boolean(onChange);
     const wired = live ? onChange : undefined;
-    return (_jsxs("div", { className: "flex flex-col gap-0.5 min-w-0", children: [sub.type.label ? _jsx(FieldLabel, { label: t(sub.type.label) }) : null, _jsx(FieldSlot, { field: sub.type, fieldKey: live ? sub.key : undefined, value: row[sub.key] ?? '', mode: "view", bare: !live, recordCtx: recordCtx, onChange: wired })] }));
+    return (_jsxs("div", { className: `flex flex-col gap-0.5 min-w-0 ${datumClass(sub.type)}`.trim(), children: [sub.type.label ? _jsx(FieldLabel, { label: t(sub.type.label) }) : null, _jsx(FieldSlot, { field: sub.type, fieldKey: live ? sub.key : undefined, value: row[sub.key] ?? '', mode: "view", bare: !live, recordCtx: recordCtx, onChange: wired })] }));
 }
 export function CollectionView({ group, value, onChange, recordCtx, actions, editable = false, }) {
     const { t } = useTranslation();

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

@@ -6,10 +6,11 @@ import { hasValue, hasChildren, isNamedField, isStorageGroup } from '@coffer-org
 import { FieldSlot } from "../dispatch.js";
 import { useFieldErrors } from "../field-errors.js";
 import { AddBtn, usedElsewhere } from "../shared.js";
-import { GroupTitle, groupIcon, useGroupDepth, GroupDepthProvider, groupScopeClass } from "../chrome.js";
+import { GroupTitle, groupIcon, useGroupDepth, GroupDepthProvider, groupScopeClass, ChromeLabel } from "../chrome.js";
 import { Button } from "../../components/ui/button.js";
 import { useGroupEdit } from "./group-edit.js";
 import { useHybridScope } from "../hybrid-scope.js";
+import { datumClass } from "../datum.js";
 export function TableGroup({ group, value, onChange, recordCtx, mode, }) {
     const { t } = useTranslation();
     const errorAt = useFieldErrors();
@@ -49,8 +50,8 @@ export function TableGroup({ group, value, onChange, recordCtx, mode, }) {
     };
     const addRow = () => (live ? setPending((ps) => [...ps, {}]) : setRows([...rows, {}]));
     const rowTools = isEdit || live;
-    const header = (_jsx("thead", { children: _jsxs("tr", { className: "border-b border-border/60 bg-muted/15", children: [subs.map((s, i) => (_jsx("th", { className: `text-left text-[11px] font-semibold text-muted uppercase tracking-wider px-3.5 py-2.5 ${isGrowCol(s, i) ? 'w-full min-w-[140px]' : 'whitespace-nowrap min-w-[90px]'}`, children: colLabel(s) ? t(colLabel(s)) : '' }, colKey(s)))), rowTools && _jsx("th", { className: "w-10 px-2", "aria-hidden": true })] }) }));
-    const body = (_jsx("tbody", { className: "divide-y divide-border/30", children: rows.map((row, idx) => (_jsxs("tr", { className: "align-top hover:bg-muted/10 transition-colors", children: [subs.map((s, i) => (_jsx("td", { className: `px-3.5 py-2.5 min-h-10 ${isGrowCol(s, i) ? 'min-w-[140px]' : 'min-w-[90px]'}`, children: _jsx(FieldSlot, { ...colSlot(s), value: row[colKey(s)] ?? (hasValue(s) ? '' : null), excludeValues: usedElsewhere(rows, unique, colKey(s), idx), onChange: (v) => update(idx, colKey(s), v), fieldKey: live ? colKey(s) : undefined, mode: isEdit ? 'edit' : 'view', bare: !live, recordCtx: recordCtx, error: isStorageGroup(group) ? errorAt([group.key, idx, colKey(s)]) : undefined }) }, colKey(s)))), rowTools && (_jsx("td", { className: "px-2 py-2 min-h-10 w-10", children: _jsx(Button, { type: "button", variant: "outline", size: "iconSm", onClick: () => removeRow(idx), title: t('actions.delete'), className: "rounded-lg text-muted hover:border-danger hover:text-danger", children: _jsx(Trash2, { size: 14 }) }) }))] }, idx))) }));
+    const header = (_jsx("thead", { children: _jsxs("tr", { className: "border-b border-border/60 bg-muted/15", children: [subs.map((s, i) => (_jsx("th", { className: `text-left px-3.5 py-2.5 ${isGrowCol(s, i) ? 'w-full min-w-[140px]' : 'whitespace-nowrap min-w-[90px]'}`, children: _jsx(ChromeLabel, { children: colLabel(s) ? t(colLabel(s)) : '' }) }, colKey(s)))), rowTools && _jsx("th", { className: "w-10 px-2", "aria-hidden": true })] }) }));
+    const body = (_jsx("tbody", { className: "divide-y divide-border/30", children: rows.map((row, idx) => (_jsxs("tr", { className: "align-top hover:bg-muted/10 transition-colors", children: [subs.map((s, i) => (_jsx("td", { className: `px-3.5 py-2.5 min-h-10 ${isGrowCol(s, i) ? 'min-w-[140px]' : 'min-w-[90px]'} ${datumClass(colSlot(s).field)}`.trim(), children: _jsx(FieldSlot, { ...colSlot(s), value: row[colKey(s)] ?? (hasValue(s) ? '' : null), excludeValues: usedElsewhere(rows, unique, colKey(s), idx), onChange: (v) => update(idx, colKey(s), v), fieldKey: live ? colKey(s) : undefined, mode: isEdit ? 'edit' : 'view', bare: !live, recordCtx: recordCtx, error: isStorageGroup(group) ? errorAt([group.key, idx, colKey(s)]) : undefined }) }, colKey(s)))), rowTools && (_jsx("td", { className: "px-2 py-2 min-h-10 w-10", children: _jsx(Button, { type: "button", variant: "outline", size: "iconSm", onClick: () => removeRow(idx), title: t('actions.delete'), className: "rounded-lg text-muted hover:border-danger hover:text-danger", children: _jsx(Trash2, { size: 14 }) }) }))] }, idx))) }));
     const tableEl = (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("div", { className: "overflow-x-auto rounded-lg border border-border/60 bg-card/20 shadow-2xs", children: _jsxs("table", { className: "w-full border-collapse text-sm", children: [header, body] }) }), rowTools && _jsx(AddBtn, { onClick: addRow, children: t('form.addRow') })] }));
     if (mode !== 'view')
         return tableEl;

package/dist/types.d.ts

@@ -48,6 +48,7 @@ export interface FieldValueProps {
 }
 export type PickerSize = 'small' | 'large' | 'modal';
 export type EditorMode = 'popover' | 'modal' | 'inplace' | 'custom';
+export type ActivateMode = 'edit' | 'value';
 export interface FieldPickerProps {
     field: FieldMeta;
     draft: unknown;
@@ -80,5 +81,6 @@ export interface FieldRenderer {
     pickerSize?: PickerSize | ((field: FieldMeta) => PickerSize);
     Picker?: FC<FieldPickerProps>;
     editor?: EditorMode;
+    activate?: ActivateMode;
     keys?: (value: unknown, field: FieldMeta, ctx: FieldKeyCtx) => FieldKey[];
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coffer-org/web-ui",
-  "version": "5.0.0",
+  "version": "6.0.0",
   "type": "module",
   "engines": {
     "node": ">=24"
@@ -25,7 +25,7 @@
     "postpack": "node ../../scripts/swap-exports.mjs src"
   },
   "dependencies": {
-    "@coffer-org/sdk": "^5.0.0",
+    "@coffer-org/sdk": "^6.0.0",
     "@ark-ui/react": "^5.37.2",
     "@base-ui/react": "^1.5.0",
     "@icons-pack/react-simple-icons": "^13.13.0",