@coffer-org/web-ui 5.0.0 → 6.0.0

package/dist/components/ui/copy-button.d.ts

@@ -0,0 +1,6 @@
+import { type ButtonProps } from './button.tsx';
+export declare function CopyButton({ getText, className, size, }: {
+    getText: () => string;
+    className?: string;
+    size?: ButtonProps['size'];
+}): import("react").JSX.Element;

package/dist/components/ui/copy-button.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { Check, Copy } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { Button } from "./button.js";
+const CONFIRM_MS = 1500;
+export function CopyButton({ getText, className, size = 'iconXs', }) {
+    const { t } = useTranslation();
+    const [copied, setCopied] = useState(false);
+    const timer = useRef(undefined);
+    useEffect(() => () => clearTimeout(timer.current), []);
+    async function handleCopy() {
+        const text = getText();
+        if (!text || !navigator.clipboard)
+            return;
+        try {
+            await navigator.clipboard.writeText(text);
+        }
+        catch {
+            return;
+        }
+        setCopied(true);
+        clearTimeout(timer.current);
+        timer.current = setTimeout(() => setCopied(false), CONFIRM_MS);
+    }
+    const label = t(copied ? 'actions.copied' : 'actions.copy');
+    return (_jsx(Button, { type: "button", variant: "outline", size: size, className: className, onClick: () => void handleCopy(), title: label, "aria-label": label, children: copied ? _jsx(Check, { size: 13 }) : _jsx(Copy, { size: 13 }) }));
+}

package/dist/index.d.ts

@@ -57,7 +57,7 @@ export * from './hooks/use-media-query.ts';
 export * from './render/dispatch.tsx';
 export { type Commit } from './render/write.ts';
 export { type SlotHandle, useSlot, useSlotOptional, useSlotRender, useSlots, SlotProvider, SlotScope, Slot, SlotEditor, SlotValue, } from './render/slot.tsx';
-export { DEFAULT_SECTION_ICON, PAGE_STACK, FieldLabel as RenderFieldLabel, FieldError } from './render/chrome.tsx';
+export { DEFAULT_SECTION_ICON, PAGE_STACK, FieldLabel as RenderFieldLabel, FieldError, CHROME_LABEL_CLS, ChromeLabel, } from './render/chrome.tsx';
 export * from './render/field-errors.tsx';
 export * from './render/field-frame.tsx';
 export * from './render/form-types.ts';

package/dist/index.js

@@ -56,7 +56,7 @@ export * from "./lib/use-record-labels.js";
 export * from "./hooks/use-media-query.js";
 export * from "./render/dispatch.js";
 export { useSlot, useSlotOptional, useSlotRender, useSlots, SlotProvider, SlotScope, Slot, SlotEditor, SlotValue, } from "./render/slot.js";
-export { DEFAULT_SECTION_ICON, PAGE_STACK, FieldLabel as RenderFieldLabel, FieldError } from "./render/chrome.js";
+export { DEFAULT_SECTION_ICON, PAGE_STACK, FieldLabel as RenderFieldLabel, FieldError, CHROME_LABEL_CLS, ChromeLabel, } from "./render/chrome.js";
 export * from "./render/field-errors.js";
 export * from "./render/field-frame.js";
 export * from "./render/form-types.js";

package/dist/layout.js

@@ -8,7 +8,7 @@ import { fieldOptions } from "./lib/format.js";
 import { withScopeValues, ParentValuesProvider } from "./render/field-scope.js";
 import { parseJSON } from "./lib/json.js";
 import { FlowRow, FlowCtx } from "./render/widgets/flow-row.js";
-import { STACK, LAYOUT_STACK, GroupTitle, Rail, groupIcon } from "./render/chrome.js";
+import { STACK, LAYOUT_STACK, GroupTitle, Rail, groupIcon, CHROME_LABEL_CLS, } from "./render/chrome.js";
 import { focusInPopup } from "./render/field-frame.js";
 import { FieldAddressProvider } from "./render/field-address.js";
 import { SlotProvider } from "./render/slot.js";
@@ -193,7 +193,7 @@ function GroupSection({ group, children }) {
 }
 function RowSection({ group, children }) {
     const { t } = useTranslation();
-    return (_jsxs("div", { className: "flex flex-col gap-1 min-w-0", children: [group.label && _jsx("span", { className: "text-xs text-muted", children: t(group.label) }), children] }));
+    return (_jsxs("div", { className: "flex flex-col gap-1 min-w-0", children: [group.label && _jsx("span", { className: CHROME_LABEL_CLS, children: t(group.label) }), children] }));
 }
 function SheetSection({ group, renderCell, }) {
     const { t } = useTranslation();
@@ -234,7 +234,7 @@ function renderNodes(nodes, keyPrefix) {
 }
 export function LabelledDivider({ label }) {
     const { t } = useTranslation();
-    return (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "shrink-0 text-xs uppercase tracking-wider text-muted", children: t(label) }), _jsx("div", { className: "flex-1 border-t border-border" })] }));
+    return (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: `shrink-0 ${CHROME_LABEL_CLS}`, children: t(label) }), _jsx("div", { className: "flex-1 border-t border-border" })] }));
 }
 function renderDivider(label, key) {
     return label ? _jsx(LabelledDivider, { label: label }, key) : _jsx("hr", { className: "border-border" }, key);

package/dist/registry.d.ts

@@ -1,5 +1,5 @@
 import type { FieldClient, FieldMeta, LayoutEl } from '@coffer-org/sdk/fields';
-import type { FieldRenderer, ElementRenderProps, FieldInlineProps, FieldValueProps, FieldPickerProps, PickerSize, EditorMode, BoxGeom, TemplateImporter } from './types.ts';
+import type { FieldRenderer, ElementRenderProps, FieldInlineProps, FieldValueProps, FieldPickerProps, PickerSize, EditorMode, ActivateMode, BoxGeom, TemplateImporter } from './types.ts';
 import type { FC } from 'react';
 export declare const rendererRegistry: Record<string, FieldRenderer>;
 type NoWidenedProps<P> = Exclude<keyof P, keyof ElementRenderProps> extends never ? unknown : never;
@@ -14,6 +14,7 @@ export declare function registerRenderer<P extends ElementRenderProps>(r: {
     pickerSize?: PickerSize | ((field: FieldMeta) => PickerSize);
     Picker?: FC<FieldPickerProps>;
     editor?: EditorMode;
+    activate?: ActivateMode;
     keys?: FieldRenderer['keys'];
 } & NoWidenedProps<P>): void;
 export declare function resolveRenderer(field: Pick<FieldClient, 'kind'>): FieldRenderer | undefined;

package/dist/registry.js

@@ -14,6 +14,7 @@ export function registerRenderer(r) {
         pickerSize: r.pickerSize,
         Picker: r.Picker,
         editor: r.editor,
+        activate: r.activate,
         keys: r.keys,
     };
     for (const kind of r.kinds) {

package/dist/render/activate.d.ts

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

package/dist/render/activate.js

@@ -0,0 +1,11 @@
+import { resolveRenderer } from "../registry.js";
+const MODES = new Set(['edit', 'value']);
+function isActivateMode(v) {
+    return typeof v === 'string' && MODES.has(v);
+}
+export function activateMode(field) {
+    const override = field.hints?.['activate'];
+    if (isActivateMode(override))
+        return override;
+    return resolveRenderer(field)?.activate ?? 'edit';
+}

package/dist/render/blocks/balance.js

@@ -2,13 +2,14 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useTranslation } from 'react-i18next';
 import { registerRenderer } from "../../registry.js";
 import { Slot } from "../slot.js";
-import { BlockShell } from "./block-shell.js";
+import { CHROME_LABEL_CLS } from "../chrome.js";
+import { BlockShell, fieldDatumClass } from "./block-shell.js";
 function BalancePage({ el }) {
     const g = el;
     const sourceName = g.view?.source;
     const { t } = useTranslation();
     const caption = g.view?.caption;
-    const body = (_jsxs("div", { className: "flex flex-col gap-1", "data-testid": "balance", children: [_jsx(Slot, { name: sourceName, render: (_handle, defaultDisplay) => (_jsx("span", { className: "text-3xl font-semibold tabular-nums", "data-testid": "balance-figure", children: defaultDisplay })) }), caption && (_jsx("div", { className: "text-xs font-medium uppercase tracking-wide text-muted", "data-testid": "balance-caption", children: t(caption) }))] }));
+    const body = (_jsxs("div", { className: "flex flex-col gap-1", "data-testid": "balance", children: [_jsx(Slot, { name: sourceName, render: (handle, defaultDisplay) => (_jsx("span", { className: `text-3xl font-semibold ${fieldDatumClass(handle)}`.trim(), "data-testid": "balance-figure", children: defaultDisplay })) }), caption && (_jsx("div", { className: CHROME_LABEL_CLS, "data-testid": "balance-caption", children: t(caption) }))] }));
     return (_jsx(BlockShell, { label: g.label, icon: g.icon, children: body }));
 }
 registerRenderer({ kinds: ['balance'], layout: 'block', editor: 'custom', Page: BalancePage });

package/dist/render/blocks/block-shell.d.ts

@@ -13,3 +13,4 @@ export declare function BlockShell({ label, icon, children, }: {
     children: ReactNode;
 }): ReactElement;
 export declare function fieldLabel(handle: SlotHandle, t: TFn): string | undefined;
+export declare function fieldDatumClass(handle: SlotHandle): string;

package/dist/render/blocks/block-shell.js

@@ -2,6 +2,7 @@ import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import { useTranslation } from 'react-i18next';
 import { isNamedField } from '@coffer-org/sdk/fields';
 import { SectionShell } from "../../layout.js";
+import { datumClass } from "../datum.js";
 export function findSlot(slots, name) {
     return name !== undefined ? slots.find((s) => s.name === name) : undefined;
 }
@@ -18,3 +19,6 @@ export function fieldLabel(handle, t) {
     const key = handle.field.label ?? (isNamedField(handle.field) ? handle.field.type.label : undefined);
     return key ? t(key) : undefined;
 }
+export function fieldDatumClass(handle) {
+    return isNamedField(handle.field) ? datumClass(handle.field.type) : '';
+}

package/dist/render/blocks/chart.js

@@ -6,6 +6,7 @@ import { useGroupEdit } from "../widgets/group-edit.js";
 import { GroupField } from "../widgets/group-field.js";
 import { FieldSlot } from "../dispatch.js";
 import { useSlot } from "../slot.js";
+import { datumClass } from "../datum.js";
 import { toSeries, sparkline, seriesDelta } from "./series.js";
 import { partField } from "../use-collection-rows.js";
 const BOX = { width: 100, height: 28, pad: 2 };
@@ -37,7 +38,7 @@ function ChartPage({ el, value, recordCtx, mode }) {
     const reading = (p) => (_jsx(FieldSlot, { el: valueFld, field: valueFld.type, value: p.row?.[valueKey] ?? p.value, mode: "view", bare: true, recordCtx: recordCtx }));
     const lowest = points.length ? points.reduce((a, b) => (b.value < a.value ? b : a)) : undefined;
     const highest = points.length ? points.reduce((a, b) => (b.value > a.value ? b : a)) : undefined;
-    const chart = last === undefined ? (_jsx("p", { className: "py-1 text-sm text-muted", "data-testid": "chart-empty", children: t('form.noSeries', 'No readings yet') })) : (_jsxs("div", { className: "flex flex-col gap-1.5", "data-testid": "chart-body", children: [_jsxs("div", { className: "flex items-baseline gap-2", children: [_jsx("div", { className: "min-w-0 text-2xl font-semibold tabular-nums text-text", "data-testid": "chart-last", children: reading(last) }), delta !== undefined && (_jsx("span", { className: `text-sm font-medium tabular-nums ${delta > 0 ? 'text-accent' : delta < 0 ? 'text-danger' : 'text-muted'}`, "data-testid": "chart-delta", children: fmtDelta(delta) }))] }), _jsx("svg", { className: "h-12 w-full text-accent", viewBox: `0 0 ${BOX.width} ${BOX.height}`, preserveAspectRatio: "none", "aria-hidden": "true", "data-testid": "chart-spark", children: _jsx("path", { d: spark.path, "data-testid": "chart-path", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round", vectorEffect: "non-scaling-stroke" }) }), _jsxs("div", { className: "flex items-baseline gap-1 text-[10px] tabular-nums text-muted", "data-testid": "chart-range", children: [lowest && reading(lowest), _jsx("span", { "aria-hidden": "true", children: "\u2013" }), highest && reading(highest)] })] }));
+    const chart = last === undefined ? (_jsx("p", { className: "py-1 text-sm text-muted", "data-testid": "chart-empty", children: t('form.noSeries', 'No readings yet') })) : (_jsxs("div", { className: "flex flex-col gap-1.5", "data-testid": "chart-body", children: [_jsxs("div", { className: "flex items-baseline gap-2", children: [_jsx("div", { className: `min-w-0 text-2xl font-semibold text-text ${datumClass(valueFld.type)}`.trim(), "data-testid": "chart-last", children: reading(last) }), delta !== undefined && (_jsx("span", { className: `text-sm font-medium tabular-nums ${delta > 0 ? 'text-accent' : delta < 0 ? 'text-danger' : 'text-muted'}`, "data-testid": "chart-delta", children: fmtDelta(delta) }))] }), _jsx("svg", { className: "h-12 w-full text-accent", viewBox: `0 0 ${BOX.width} ${BOX.height}`, preserveAspectRatio: "none", "aria-hidden": "true", "data-testid": "chart-spark", children: _jsx("path", { d: spark.path, "data-testid": "chart-path", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round", vectorEffect: "non-scaling-stroke" }) }), _jsxs("div", { className: `flex items-baseline gap-1 text-[10px] text-muted ${datumClass(valueFld.type)}`.trim(), "data-testid": "chart-range", children: [lowest && reading(lowest), _jsx("span", { "aria-hidden": "true", children: "\u2013" }), highest && reading(highest)] })] }));
     const content = editing ? editor : chart;
     if (mode !== 'view')
         return content;

package/dist/render/blocks/compare.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useTranslation } from 'react-i18next';
 import { registerRenderer } from "../../registry.js";
 import { Slot } from "../slot.js";
+import { CHROME_LABEL_CLS } from "../chrome.js";
 import { BlockShell } from "./block-shell.js";
 function ComparePage({ el }) {
     const g = el;
@@ -10,7 +11,7 @@ function ComparePage({ el }) {
     const right = g.view?.right ?? [];
     const leftLabel = g.view?.leftLabel;
     const rightLabel = g.view?.rightLabel;
-    const body = (_jsxs("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2", "data-testid": "compare", children: [_jsxs("div", { className: "min-w-0 space-y-3", "data-testid": "compare-left", children: [leftLabel && _jsx("div", { className: "text-xs font-medium uppercase tracking-wide text-muted", children: t(leftLabel) }), left.map((n) => (_jsx(Slot, { name: n }, n)))] }), _jsxs("div", { className: "min-w-0 space-y-3 sm:border-l sm:border-border sm:pl-4", "data-testid": "compare-right", children: [rightLabel && _jsx("div", { className: "text-xs font-medium uppercase tracking-wide text-muted", children: t(rightLabel) }), right.map((n) => (_jsx(Slot, { name: n }, n)))] })] }));
+    const body = (_jsxs("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2", "data-testid": "compare", children: [_jsxs("div", { className: "min-w-0 space-y-3", "data-testid": "compare-left", children: [leftLabel && _jsx("div", { className: CHROME_LABEL_CLS, children: t(leftLabel) }), left.map((n) => (_jsx(Slot, { name: n }, n)))] }), _jsxs("div", { className: "min-w-0 space-y-3 sm:border-l sm:border-border sm:pl-4", "data-testid": "compare-right", children: [rightLabel && _jsx("div", { className: CHROME_LABEL_CLS, children: t(rightLabel) }), right.map((n) => (_jsx(Slot, { name: n }, n)))] })] }));
     return (_jsx(BlockShell, { label: g.label, icon: g.icon, children: body }));
 }
 registerRenderer({ kinds: ['compare'], layout: 'block', editor: 'custom', Page: ComparePage });

package/dist/render/blocks/countdown.js

@@ -3,6 +3,7 @@ import { ArrowUp, ArrowDown, Minus } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { registerRenderer } from "../../registry.js";
 import { Slot } from "../slot.js";
+import { CHROME_LABEL_CLS } from "../chrome.js";
 import { BlockShell } from "./block-shell.js";
 const MS_PER_DAY = 86_400_000;
 export function countdownDays(value, today) {
@@ -30,7 +31,7 @@ function CountdownPage({ el }) {
                     const direction = days > 0 ? 'remaining' : days < 0 ? 'elapsed' : 'today';
                     const Ico = days > 0 ? ArrowUp : days < 0 ? ArrowDown : Minus;
                     return (_jsxs("span", { className: "inline-flex items-baseline gap-3", "data-testid": "countdown-figure", "data-direction": direction, children: [_jsxs("span", { className: "inline-flex items-baseline gap-1.5", children: [_jsx(Ico, { size: 16, className: "shrink-0 self-center text-muted", "aria-hidden": "true" }), _jsx("span", { className: "text-3xl font-bold tabular-nums", children: Math.abs(days) })] }), _jsx("span", { className: "text-sm text-muted", "data-testid": "countdown-date", children: defaultDisplay })] }));
-                } }), caption && (_jsx("div", { className: "text-xs font-medium uppercase tracking-wide text-muted", "data-testid": "countdown-caption", children: t(caption) }))] }));
+                } }), caption && (_jsx("div", { className: CHROME_LABEL_CLS, "data-testid": "countdown-caption", children: t(caption) }))] }));
     return (_jsx(BlockShell, { label: g.label, icon: g.icon, children: body }));
 }
 registerRenderer({ kinds: ['countdown'], layout: 'block', editor: 'custom', Page: CountdownPage });

package/dist/render/blocks/idcard.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { registerRenderer } from "../../registry.js";
 import { Slot, useSlots } from "../slot.js";
+import { CHROME_LABEL_CLS } from "../chrome.js";
 import { findSlot, findSlots } from "./block-shell.js";
 function groupedNumber(raw) {
     const compact = raw.replace(/\s+/g, '');
@@ -19,7 +20,7 @@ function IdcardPage({ el }) {
     const slots = useSlots();
     const overline = findSlot(slots, overlineName);
     const metaVisible = findSlots(slots, metaNames).filter((s) => !s.handle.hidden);
-    return (_jsxs("div", { className: "space-y-1", "data-testid": "idcard", children: [overline && !overline.handle.hidden && (_jsx("div", { className: "min-w-0 text-xs font-medium uppercase tracking-widest text-muted", "data-testid": "idcard-overline", children: _jsx(Slot, { name: overlineName }) })), _jsx("div", { className: "min-w-0", children: _jsx(Slot, { name: numberName, render: (handle, defaultDisplay) => {
+    return (_jsxs("div", { className: "space-y-1", "data-testid": "idcard", children: [overline && !overline.handle.hidden && (_jsx("div", { className: CHROME_LABEL_CLS, "data-testid": "idcard-overline", children: _jsx(Slot, { name: overlineName }) })), _jsx("div", { className: "min-w-0", children: _jsx(Slot, { name: numberName, render: (handle, defaultDisplay) => {
                         const raw = typeof handle.value === 'string' || typeof handle.value === 'number' ? String(handle.value) : '';
                         const grouped = groupedNumber(raw);
                         if (!grouped)

package/dist/render/blocks/journal.js

@@ -13,6 +13,7 @@ import { ChecklistContent } from "../widgets/checklist-content.js";
 import { useFieldErrors } from "../field-errors.js";
 import { useCollectionRows, partField } from "../use-collection-rows.js";
 import { useSlot } from "../slot.js";
+import { datumClass } from "../datum.js";
 function cellNode(f, row, key, editing, live, onCommit, recordCtx, error) {
     if (editing) {
         return (_jsx(FieldSlot, { el: f, field: f.type, fieldKey: key, value: row[key] ?? '', onChange: onCommit, mode: "edit", bare: true, recordCtx: recordCtx, error: error }));
@@ -42,7 +43,7 @@ function JournalPage({ el, value, recordCtx, mode }) {
         .filter((f) => isNamedField(f) && f.key !== dateKey && f.key !== textKey)
         .map((f) => ({ key: f.key, type: f.type }));
     const errorFor = (idx, key) => isStorageGroup(group) ? errorAt([group.key, idx, key]) : undefined;
-    const content = (_jsxs("div", { className: `flex flex-col ${STACK}`, children: [rows.map((row, idx) => (_jsx(Rail, { children: _jsxs("div", { className: "flex items-start gap-3", "data-testid": `journal-entry-${idx}`, children: [_jsx("div", { className: "w-20 shrink-0 text-xs text-muted tabular-nums", "data-testid": `journal-date-${idx}`, children: cellNode(dateFld, row, dateKey, editing, live, (v) => updateRow(idx, dateKey, v), recordCtx, errorFor(idx, dateKey)) }), _jsx("div", { className: "min-w-0 flex-1 text-sm", "data-testid": `journal-text-${idx}`, children: cellNode(textFld, row, textKey, editing, live, (v) => updateRow(idx, textKey, v), recordCtx, errorFor(idx, textKey)) }), restFields.length > 0 && (_jsx(ChecklistContent, { fields: restFields, row: row, editing: editing, onChange: (key, v) => updateRow(idx, key, v), recordCtx: recordCtx, error: (key) => errorFor(idx, key) })), rowTools && _jsx(RemoveBtn, { className: "mt-0.5", onClick: () => removeRow(idx) })] }) }, rowId(row)))), rowTools && _jsx(AddBtn, { onClick: addRow, children: t('form.addRow') })] }));
+    const content = (_jsxs("div", { className: `flex flex-col ${STACK}`, children: [rows.map((row, idx) => (_jsx(Rail, { children: _jsxs("div", { className: "flex items-start gap-3", "data-testid": `journal-entry-${idx}`, children: [_jsx("div", { className: `w-20 shrink-0 text-xs text-muted ${datumClass(dateFld.type)}`.trim(), "data-testid": `journal-date-${idx}`, children: cellNode(dateFld, row, dateKey, editing, live, (v) => updateRow(idx, dateKey, v), recordCtx, errorFor(idx, dateKey)) }), _jsx("div", { className: "min-w-0 flex-1 text-sm", "data-testid": `journal-text-${idx}`, children: cellNode(textFld, row, textKey, editing, live, (v) => updateRow(idx, textKey, v), recordCtx, errorFor(idx, textKey)) }), restFields.length > 0 && (_jsx(ChecklistContent, { fields: restFields, row: row, editing: editing, onChange: (key, v) => updateRow(idx, key, v), recordCtx: recordCtx, error: (key) => errorFor(idx, key) })), rowTools && _jsx(RemoveBtn, { className: "mt-0.5", onClick: () => removeRow(idx) })] }) }, rowId(row)))), 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": "journal", 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/blocks/ledger.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useTranslation } from 'react-i18next';
 import { registerRenderer } from "../../registry.js";
 import { Slot, useSlots } from "../slot.js";
-import { BlockShell, fieldLabel } from "./block-shell.js";
+import { BlockShell, fieldLabel, fieldDatumClass } from "./block-shell.js";
 function LedgerPage({ el }) {
     const g = el;
     const { t } = useTranslation();
@@ -10,7 +10,7 @@ function LedgerPage({ el }) {
     const body = (_jsx("div", { className: "flex flex-col divide-y divide-border", "data-testid": "ledger", children: slots.map((s, i) => {
             if (s.handle.hidden)
                 return null;
-            return (_jsx("div", { className: "min-w-0 py-2", "data-testid": `ledger-row-${i}`, children: _jsx(Slot, { name: s.name, ownLabel: true, render: (handle, defaultDisplay) => (_jsxs("span", { className: "flex w-full min-w-0 items-baseline gap-2", "data-testid": "ledger-leader", children: [_jsx("span", { className: "shrink-0", children: fieldLabel(handle, t) }), _jsx("span", { className: "min-w-0 flex-1 border-b border-dotted border-border", "data-testid": "ledger-dots" }), _jsx("span", { className: "shrink-0 text-right font-medium tabular-nums", children: defaultDisplay })] })) }) }, s.name));
+            return (_jsx("div", { className: "min-w-0 py-2", "data-testid": `ledger-row-${i}`, children: _jsx(Slot, { name: s.name, ownLabel: true, render: (handle, defaultDisplay) => (_jsxs("span", { className: "flex w-full min-w-0 items-baseline gap-2", "data-testid": "ledger-leader", children: [_jsx("span", { className: "shrink-0", children: fieldLabel(handle, t) }), _jsx("span", { className: "min-w-0 flex-1 border-b border-dotted border-border", "data-testid": "ledger-dots" }), _jsx("span", { className: `shrink-0 text-right font-medium ${fieldDatumClass(handle)}`.trim(), children: defaultDisplay })] })) }) }, s.name));
         }) }));
     return (_jsx(BlockShell, { label: g.label, icon: g.icon, children: body }));
 }

package/dist/render/blocks/manifest.js

@@ -11,6 +11,7 @@ import { FieldSlot } from "../dispatch.js";
 import { GroupField } from "../widgets/group-field.js";
 import { ChecklistContent } from "../widgets/checklist-content.js";
 import { useFieldErrors } from "../field-errors.js";
+import { datumClass } from "../datum.js";
 import { useCollectionRows, partField } from "../use-collection-rows.js";
 import { useSlot } from "../slot.js";
 function cellNode(f, row, key, editing, live, onCommit, recordCtx, error) {
@@ -42,7 +43,7 @@ function ManifestPage({ el, value, recordCtx, mode }) {
         .filter((f) => isNamedField(f) && f.key !== qtyKey && f.key !== itemKey)
         .map((f) => ({ key: f.key, type: f.type }));
     const errorFor = (idx, key) => isStorageGroup(group) ? errorAt([group.key, idx, key]) : undefined;
-    const content = (_jsxs("div", { className: `flex flex-col ${STACK}`, children: [rows.map((row, idx) => (_jsx(Rail, { children: _jsxs("div", { className: "flex items-center gap-3", "data-testid": `manifest-row-${idx}`, children: [_jsx("div", { className: "w-12 shrink-0 text-right text-sm tabular-nums", "data-testid": `manifest-quantity-${idx}`, children: cellNode(qtyFld, row, qtyKey, editing, live, (v) => updateRow(idx, qtyKey, v), recordCtx, errorFor(idx, qtyKey)) }), _jsx("div", { className: "min-w-0 flex-1 text-sm", "data-testid": `manifest-item-${idx}`, children: cellNode(itemFld, row, itemKey, editing, live, (v) => updateRow(idx, itemKey, v), recordCtx, errorFor(idx, itemKey)) }), restFields.length > 0 && (_jsx(ChecklistContent, { fields: restFields, row: row, editing: editing, onChange: (key, v) => updateRow(idx, key, v), recordCtx: recordCtx, error: (key) => errorFor(idx, key) })), rowTools && _jsx(RemoveBtn, { onClick: () => removeRow(idx) })] }) }, rowId(row)))), rowTools && _jsx(AddBtn, { onClick: addRow, children: t('form.addRow') })] }));
+    const content = (_jsxs("div", { className: `flex flex-col ${STACK}`, children: [rows.map((row, idx) => (_jsx(Rail, { children: _jsxs("div", { className: "flex items-center gap-3", "data-testid": `manifest-row-${idx}`, children: [_jsx("div", { className: `w-12 shrink-0 text-right text-sm ${datumClass(qtyFld.type)}`.trim(), "data-testid": `manifest-quantity-${idx}`, children: cellNode(qtyFld, row, qtyKey, editing, live, (v) => updateRow(idx, qtyKey, v), recordCtx, errorFor(idx, qtyKey)) }), _jsx("div", { className: "min-w-0 flex-1 text-sm", "data-testid": `manifest-item-${idx}`, children: cellNode(itemFld, row, itemKey, editing, live, (v) => updateRow(idx, itemKey, v), recordCtx, errorFor(idx, itemKey)) }), restFields.length > 0 && (_jsx(ChecklistContent, { fields: restFields, row: row, editing: editing, onChange: (key, v) => updateRow(idx, key, v), recordCtx: recordCtx, error: (key) => errorFor(idx, key) })), rowTools && _jsx(RemoveBtn, { onClick: () => removeRow(idx) })] }) }, rowId(row)))), 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": "manifest", 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/blocks/masthead.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { registerRenderer } from "../../registry.js";
 import { Slot, useSlots } from "../slot.js";
+import { CHROME_LABEL_CLS } from "../chrome.js";
 import { findSlot, findSlots } from "./block-shell.js";
 function MastheadPage({ el }) {
     const g = el;
@@ -10,6 +11,6 @@ function MastheadPage({ el }) {
     const slots = useSlots();
     const overline = findSlot(slots, overlineName);
     const metaVisible = findSlots(slots, metaNames).filter((s) => !s.handle.hidden);
-    return (_jsxs("div", { className: "space-y-1", "data-testid": "masthead", children: [overline && !overline.handle.hidden && (_jsx("div", { className: "min-w-0 text-xs font-medium uppercase tracking-widest text-muted", "data-testid": "masthead-overline", children: _jsx(Slot, { name: overlineName }) })), _jsx("div", { className: "min-w-0 text-2xl leading-tight font-bold", "data-testid": "masthead-title", children: _jsx(Slot, { name: titleName }) }), metaVisible.length > 0 && (_jsx("div", { className: "flex flex-wrap items-center gap-x-1 border-t border-b border-border py-1.5 text-sm text-muted", "data-testid": "masthead-meta", children: metaVisible.map((s, i) => (_jsx("span", { className: `inline-flex min-w-0 items-center ${i > 0 ? "before:mr-2 before:text-muted before:content-['·']" : ''}`, "data-testid": `masthead-meta-${i}`, children: _jsx(Slot, { name: s.name }) }, s.name))) }))] }));
+    return (_jsxs("div", { className: "space-y-1", "data-testid": "masthead", children: [overline && !overline.handle.hidden && (_jsx("div", { className: CHROME_LABEL_CLS, "data-testid": "masthead-overline", children: _jsx(Slot, { name: overlineName }) })), _jsx("div", { className: "min-w-0 text-2xl leading-tight font-bold", "data-testid": "masthead-title", children: _jsx(Slot, { name: titleName }) }), metaVisible.length > 0 && (_jsx("div", { className: "flex flex-wrap items-center gap-x-1 border-t border-b border-border py-1.5 text-sm text-muted", "data-testid": "masthead-meta", children: metaVisible.map((s, i) => (_jsx("span", { className: `inline-flex min-w-0 items-center ${i > 0 ? "before:mr-2 before:text-muted before:content-['·']" : ''}`, "data-testid": `masthead-meta-${i}`, children: _jsx(Slot, { name: s.name }) }, s.name))) }))] }));
 }
 registerRenderer({ kinds: ['masthead'], layout: 'block', editor: 'custom', Page: MastheadPage });

package/dist/render/blocks/meter.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { registerRenderer } from "../../registry.js";
 import { Slot, useSlots } from "../slot.js";
-import { BlockShell, findSlot } from "./block-shell.js";
+import { BlockShell, findSlot, fieldDatumClass } from "./block-shell.js";
 function resolveRange(view, field) {
     const min = Number(view?.min ?? field.hints['min'] ?? 0);
     const maxRaw = view?.max ?? field.hints['max'];
@@ -25,7 +25,7 @@ function MeterPage({ el }) {
                         const { min, max } = resolveRange(view, handle.field.type);
                         const n = magnitudeOf(handle.value);
                         const ratio = Number.isFinite(n) ? Math.max(0, Math.min(1, (n - min) / (max - min))) : 0;
-                        return (_jsxs("span", { className: "flex min-w-0 flex-col gap-1", "data-testid": "meter-figure", children: [_jsx("span", { className: "text-2xl font-semibold tabular-nums", children: defaultDisplay }), _jsx("span", { role: "progressbar", "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": Number.isFinite(n) ? Math.max(min, Math.min(max, n)) : min, className: "h-2 w-full overflow-hidden rounded-full bg-border", "data-testid": "meter-bar", children: _jsx("span", { className: "block h-full rounded-full bg-accent transition-[width]", style: { width: `${ratio * 100}%` }, "data-testid": "meter-fill" }) })] }));
+                        return (_jsxs("span", { className: "flex min-w-0 flex-col gap-1", "data-testid": "meter-figure", children: [_jsx("span", { className: `text-2xl font-semibold ${fieldDatumClass(handle)}`.trim(), children: defaultDisplay }), _jsx("span", { role: "progressbar", "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": Number.isFinite(n) ? Math.max(min, Math.min(max, n)) : min, className: "h-2 w-full overflow-hidden rounded-full bg-border", "data-testid": "meter-bar", children: _jsx("span", { className: "block h-full rounded-full bg-accent transition-[width]", style: { width: `${ratio * 100}%` }, "data-testid": "meter-fill" }) })] }));
                     } }) }), of && !of.handle.hidden && (_jsx("div", { className: "min-w-0 text-sm text-muted", "data-testid": "meter-of", children: _jsx(Slot, { name: ofName }) }))] }));
     return (_jsx(BlockShell, { label: g.label, icon: g.icon, children: body }));
 }

package/dist/render/blocks/nutrition.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useTranslation } from 'react-i18next';
 import { registerRenderer } from "../../registry.js";
 import { Slot, useSlots } from "../slot.js";
-import { BlockShell, fieldLabel, findSlot, findSlots } from "./block-shell.js";
+import { BlockShell, fieldLabel, fieldDatumClass, findSlot, findSlots } from "./block-shell.js";
 function NutritionPage({ el }) {
     const g = el;
     const { t } = useTranslation();
@@ -15,7 +15,7 @@ function NutritionPage({ el }) {
     const visibleRows = rows.filter((r) => !r.handle.hidden);
     if (!energyVisible && visibleRows.length === 0)
         return (_jsx(BlockShell, { label: g.label, icon: g.icon, children: null }));
-    const body = (_jsxs("div", { className: "w-full max-w-xs border-2 border-text p-3", "data-testid": "nutrition", children: [energyVisible && (_jsx("div", { className: "mb-2 border-b-4 border-text pb-2", "data-testid": "nutrition-energy-row", children: _jsx(Slot, { name: energyName, ownLabel: true, render: (handle, defaultDisplay) => (_jsxs("span", { className: "flex w-full min-w-0 items-baseline justify-between gap-3", "data-testid": "nutrition-energy", children: [_jsx("span", { className: "min-w-0 text-base font-bold uppercase tracking-wide", children: fieldLabel(handle, t) }), _jsx("span", { className: "shrink-0 text-2xl font-black tabular-nums", children: defaultDisplay })] })) }) })), _jsx("div", { className: "flex flex-col divide-y divide-border", children: rows.map((r, i) => r.handle.hidden ? null : (_jsx("div", { className: "min-w-0 py-1", "data-testid": `nutrition-row-${i}`, children: _jsx(Slot, { name: r.name, ownLabel: true, render: (handle, defaultDisplay) => (_jsxs("span", { className: "flex w-full min-w-0 items-baseline justify-between gap-3 text-sm", children: [_jsx("span", { className: "min-w-0", children: fieldLabel(handle, t) }), _jsx("span", { className: "shrink-0 text-right font-medium tabular-nums", children: defaultDisplay })] })) }) }, r.name))) })] }));
+    const body = (_jsxs("div", { className: "w-full max-w-xs border-2 border-text p-3", "data-testid": "nutrition", children: [energyVisible && (_jsx("div", { className: "mb-2 border-b-4 border-text pb-2", "data-testid": "nutrition-energy-row", children: _jsx(Slot, { name: energyName, ownLabel: true, render: (handle, defaultDisplay) => (_jsxs("span", { className: "flex w-full min-w-0 items-baseline justify-between gap-3", "data-testid": "nutrition-energy", children: [_jsx("span", { className: "min-w-0 text-base font-bold tracking-wide", children: fieldLabel(handle, t) }), _jsx("span", { className: `shrink-0 text-2xl font-black ${fieldDatumClass(handle)}`.trim(), children: defaultDisplay })] })) }) })), _jsx("div", { className: "flex flex-col divide-y divide-border", children: rows.map((r, i) => r.handle.hidden ? null : (_jsx("div", { className: "min-w-0 py-1", "data-testid": `nutrition-row-${i}`, children: _jsx(Slot, { name: r.name, ownLabel: true, render: (handle, defaultDisplay) => (_jsxs("span", { className: "flex w-full min-w-0 items-baseline justify-between gap-3 text-sm", children: [_jsx("span", { className: "min-w-0", children: fieldLabel(handle, t) }), _jsx("span", { className: `shrink-0 text-right font-medium ${fieldDatumClass(handle)}`.trim(), children: defaultDisplay })] })) }) }, r.name))) })] }));
     return (_jsx(BlockShell, { label: g.label, icon: g.icon, children: body }));
 }
 registerRenderer({

package/dist/render/blocks/plaque.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { registerRenderer } from "../../registry.js";
 import { Slot, useSlots } from "../slot.js";
+import { CHROME_LABEL_CLS } from "../chrome.js";
 import { BlockShell, findSlot, findSlots } from "./block-shell.js";
 function PlaquePage({ el }) {
     const g = el;
@@ -9,7 +10,7 @@ function PlaquePage({ el }) {
     const slots = useSlots();
     const title = findSlot(slots, titleName);
     const subtitles = findSlots(slots, subtitleNames);
-    const body = (_jsxs("div", { className: "flex flex-col items-center gap-3 py-4 text-center", "data-testid": "plaque", children: [title && !title.handle.hidden && (_jsx("div", { className: "min-w-0 w-full border-b border-border pb-3", "data-testid": "plaque-item-0", children: _jsx(Slot, { name: titleName, render: (_handle, defaultDisplay) => (_jsx("div", { className: "text-base font-semibold text-text", "data-testid": "plaque-title", children: defaultDisplay })) }) })), subtitles.map((s, i) => s.handle.hidden ? null : (_jsx("div", { className: "min-w-0", "data-testid": `plaque-item-${i + 1}`, children: _jsx(Slot, { name: s.name, render: (_handle, defaultDisplay) => (_jsx("div", { className: "text-xs font-medium uppercase tracking-wider text-muted", "data-testid": "plaque-subtitle", children: defaultDisplay })) }) }, s.name)))] }));
+    const body = (_jsxs("div", { className: "flex flex-col items-center gap-3 py-4 text-center", "data-testid": "plaque", children: [title && !title.handle.hidden && (_jsx("div", { className: "min-w-0 w-full border-b border-border pb-3", "data-testid": "plaque-item-0", children: _jsx(Slot, { name: titleName, render: (_handle, defaultDisplay) => (_jsx("div", { className: "text-base font-semibold text-text", "data-testid": "plaque-title", children: defaultDisplay })) }) })), subtitles.map((s, i) => s.handle.hidden ? null : (_jsx("div", { className: "min-w-0", "data-testid": `plaque-item-${i + 1}`, children: _jsx(Slot, { name: s.name, render: (_handle, defaultDisplay) => (_jsx("div", { className: CHROME_LABEL_CLS, "data-testid": "plaque-subtitle", children: defaultDisplay })) }) }, s.name)))] }));
     return (_jsx(BlockShell, { label: g.label, icon: g.icon, children: body }));
 }
 registerRenderer({ kinds: ['plaque'], layout: 'block', editor: 'custom', Page: PlaquePage });

package/dist/render/blocks/receipt.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useTranslation } from 'react-i18next';
 import { registerRenderer } from "../../registry.js";
 import { Slot, useSlots } from "../slot.js";
-import { BlockShell, fieldLabel, findSlot, findSlots } from "./block-shell.js";
+import { BlockShell, fieldLabel, fieldDatumClass, findSlot, findSlots } from "./block-shell.js";
 function ReceiptPage({ el }) {
     const g = el;
     const { t } = useTranslation();
@@ -11,7 +11,7 @@ function ReceiptPage({ el }) {
     const slots = useSlots();
     const lines = findSlots(slots, lineNames);
     const total = findSlot(slots, totalName);
-    const body = (_jsxs("div", { className: "flex flex-col", "data-testid": "receipt", children: [_jsx("div", { className: "flex flex-col divide-y divide-dashed divide-border", children: lines.map((line, i) => line.handle.hidden ? null : (_jsx("div", { className: "min-w-0 py-1.5", "data-testid": `receipt-line-${i}`, children: _jsx(Slot, { name: line.name, ownLabel: true, render: (handle, defaultDisplay) => (_jsxs("span", { className: "flex w-full min-w-0 items-baseline justify-between gap-3", "data-testid": "receipt-line", children: [_jsx("span", { className: "min-w-0 text-muted", children: fieldLabel(handle, t) }), _jsx("span", { className: "shrink-0 text-right tabular-nums", children: defaultDisplay })] })) }) }, line.name))) }), total && !total.handle.hidden && (_jsx("div", { className: "mt-2 min-w-0 border-t-2 border-border pt-2", "data-testid": "receipt-total-row", children: _jsx(Slot, { name: totalName, ownLabel: true, render: (handle, defaultDisplay) => (_jsxs("span", { className: "flex w-full min-w-0 items-baseline justify-between gap-3 text-lg font-bold", "data-testid": "receipt-total", children: [_jsx("span", { className: "min-w-0", children: fieldLabel(handle, t) }), _jsx("span", { className: "shrink-0 text-right tabular-nums", children: defaultDisplay })] })) }) }))] }));
+    const body = (_jsxs("div", { className: "flex flex-col", "data-testid": "receipt", children: [_jsx("div", { className: "flex flex-col divide-y divide-dashed divide-border", children: lines.map((line, i) => line.handle.hidden ? null : (_jsx("div", { className: "min-w-0 py-1.5", "data-testid": `receipt-line-${i}`, children: _jsx(Slot, { name: line.name, ownLabel: true, render: (handle, defaultDisplay) => (_jsxs("span", { className: "flex w-full min-w-0 items-baseline justify-between gap-3", "data-testid": "receipt-line", children: [_jsx("span", { className: "min-w-0 text-muted", children: fieldLabel(handle, t) }), _jsx("span", { className: `shrink-0 text-right ${fieldDatumClass(handle)}`.trim(), children: defaultDisplay })] })) }) }, line.name))) }), total && !total.handle.hidden && (_jsx("div", { className: "mt-2 min-w-0 border-t-2 border-border pt-2", "data-testid": "receipt-total-row", children: _jsx(Slot, { name: totalName, ownLabel: true, render: (handle, defaultDisplay) => (_jsxs("span", { className: "flex w-full min-w-0 items-baseline justify-between gap-3 text-lg font-bold", "data-testid": "receipt-total", children: [_jsx("span", { className: "min-w-0", children: fieldLabel(handle, t) }), _jsx("span", { className: `shrink-0 text-right ${fieldDatumClass(handle)}`.trim(), children: defaultDisplay })] })) }) }))] }));
     return (_jsx(BlockShell, { label: g.label, icon: g.icon, children: body }));
 }
 registerRenderer({

package/dist/render/blocks/score.js

@@ -1,7 +1,7 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { registerRenderer } from "../../registry.js";
 import { Slot, useSlots } from "../slot.js";
-import { BlockShell, findSlot } from "./block-shell.js";
+import { BlockShell, findSlot, fieldDatumClass } from "./block-shell.js";
 function ScorePage({ el }) {
     const g = el;
     const sourceName = g.view?.source;
@@ -9,7 +9,7 @@ function ScorePage({ el }) {
     const max = g.view?.max;
     const slots = useSlots();
     const verdict = findSlot(slots, verdictName);
-    const body = (_jsxs("div", { className: "flex flex-wrap items-baseline gap-3", "data-testid": "score", children: [_jsx("div", { className: "min-w-0", children: _jsx(Slot, { name: sourceName, render: (_handle, defaultDisplay) => (_jsxs("span", { className: "inline-flex items-baseline gap-0.5 text-3xl font-bold tabular-nums", "data-testid": "score-figure", children: [defaultDisplay, max != null && _jsxs("span", { className: "text-lg font-normal text-muted", children: ["/", max] })] })) }) }), verdict && !verdict.handle.hidden && (_jsx("div", { className: "min-w-0 text-muted", "data-testid": "score-verdict", children: _jsx(Slot, { name: verdictName }) }))] }));
+    const body = (_jsxs("div", { className: "flex flex-wrap items-baseline gap-3", "data-testid": "score", children: [_jsx("div", { className: "min-w-0", children: _jsx(Slot, { name: sourceName, render: (handle, defaultDisplay) => (_jsxs("span", { className: `inline-flex items-baseline gap-0.5 text-3xl font-bold ${fieldDatumClass(handle)}`.trim(), "data-testid": "score-figure", children: [defaultDisplay, max != null && _jsxs("span", { className: "text-lg font-normal text-muted", children: ["/", max] })] })) }) }), verdict && !verdict.handle.hidden && (_jsx("div", { className: "min-w-0 text-muted", "data-testid": "score-verdict", children: _jsx(Slot, { name: verdictName }) }))] }));
     return (_jsx(BlockShell, { label: g.label, icon: g.icon, children: body }));
 }
 registerRenderer({ kinds: ['score'], layout: 'block', editor: 'custom', Page: ScorePage });

package/dist/render/blocks/stats.js

@@ -2,7 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useTranslation } from 'react-i18next';
 import { registerRenderer } from "../../registry.js";
 import { Slot, useSlots } from "../slot.js";
-import { BlockShell, fieldLabel } from "./block-shell.js";
+import { CHROME_LABEL_CLS } from "../chrome.js";
+import { BlockShell, fieldLabel, fieldDatumClass } from "./block-shell.js";
 function StatsPage({ el }) {
     const g = el;
     const { t } = useTranslation();
@@ -10,7 +11,7 @@ function StatsPage({ el }) {
     const body = (_jsx("div", { className: "flex flex-wrap gap-x-8 gap-y-4 sm:flex-nowrap sm:divide-x sm:divide-border py-1", "data-testid": "stats", children: slots.map((s, i) => {
             if (s.handle.hidden)
                 return null;
-            return (_jsx("div", { className: "min-w-0 flex-1 sm:px-5 sm:first:pl-0", "data-testid": `stats-item-${i}`, children: _jsx(Slot, { name: s.name, ownLabel: true, render: (handle, defaultDisplay) => (_jsxs("span", { className: "flex min-w-0 flex-col items-start gap-0.5 py-1", "data-testid": "stats-figure", children: [_jsx("span", { className: "min-w-0 text-2xl font-semibold tabular-nums text-text", children: defaultDisplay }), _jsx("span", { className: "min-w-0 text-[11px] font-medium uppercase tracking-wider text-muted", children: fieldLabel(handle, t) })] })) }) }, s.name));
+            return (_jsx("div", { className: "min-w-0 flex-1 sm:px-5 sm:first:pl-0", "data-testid": `stats-item-${i}`, children: _jsx(Slot, { name: s.name, ownLabel: true, render: (handle, defaultDisplay) => (_jsxs("span", { className: "flex min-w-0 flex-col items-start gap-0.5 py-1", "data-testid": "stats-figure", children: [_jsx("span", { className: `min-w-0 text-2xl font-semibold text-text ${fieldDatumClass(handle)}`.trim(), children: defaultDisplay }), _jsx("span", { className: CHROME_LABEL_CLS, children: fieldLabel(handle, t) })] })) }) }, s.name));
         }) }));
     return (_jsx(BlockShell, { label: g.label, icon: g.icon, children: body }));
 }

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;