@coffer-org/web-ui 4.0.0

package/dist/render/blocks/facets.js

@@ -0,0 +1,23 @@
+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";
+function FacetsPage({ el }) {
+    const g = el;
+    const { t } = useTranslation();
+    const slots = useSlots();
+    const body = (_jsx("div", { className: "flex flex-wrap gap-2", "data-testid": "facets", children: slots.map((s, i) => {
+            if (s.handle.hidden)
+                return null;
+            return (_jsx("div", { className: "min-w-0 rounded-full border border-border px-3 py-1 text-sm", "data-testid": `facets-pill-${i}`, children: _jsx(Slot, { name: s.name, ownLabel: true, render: (handle, defaultDisplay) => (_jsxs("span", { className: "inline-flex min-w-0 items-baseline gap-1.5", "data-testid": "facets-pair", children: [_jsx("span", { className: "shrink-0", children: fieldLabel(handle, t) }), _jsx("span", { className: "min-w-0 font-semibold text-text", children: defaultDisplay })] })) }) }, s.name));
+        }) }));
+    return (_jsx(BlockShell, { label: g.label, icon: g.icon, children: body }));
+}
+registerRenderer({
+    kinds: ['facets'],
+    layout: 'block',
+    editor: 'custom',
+    Page: FacetsPage,
+    childWidth: 'w-fit',
+});

package/dist/render/blocks/figure.d.ts

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

package/dist/render/blocks/figure.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { registerRenderer } from "../../registry.js";
+import { Slot, useSlots } from "../slot.js";
+import { findSlot } from "./block-shell.js";
+function FigurePage({ el }) {
+    const g = el;
+    const imageName = g.view?.image;
+    const captionName = g.view?.caption;
+    const slots = useSlots();
+    const caption = findSlot(slots, captionName);
+    return (_jsxs("figure", { className: "min-w-0", "data-testid": "figure", children: [_jsx("div", { className: "min-w-0", "data-testid": "figure-image", children: _jsx(Slot, { name: imageName }) }), caption && !caption.handle.hidden && (_jsx("figcaption", { className: "mt-2 min-w-0 text-sm text-muted italic", "data-testid": "figure-caption", children: _jsx(Slot, { name: captionName }) }))] }));
+}
+registerRenderer({ kinds: ['figure'], layout: 'block', editor: 'custom', Page: FigurePage });

package/dist/render/blocks/grid.d.ts

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

package/dist/render/blocks/grid.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { registerRenderer } from "../../registry.js";
+import { Slot, useSlots } from "../slot.js";
+import { BlockShell } from "./block-shell.js";
+const COLS = {
+    2: 'grid-cols-1 sm:grid-cols-2',
+    3: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3',
+    4: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-4',
+};
+function GridPage({ el }) {
+    const g = el;
+    const columns = g.view?.columns ?? 3;
+    const slots = useSlots();
+    const body = (_jsx("div", { className: `grid gap-3 ${COLS[columns] ?? COLS[3]}`, children: slots.map((s, i) => {
+            if (s.handle.hidden)
+                return null;
+            return (_jsx("div", { className: "min-w-0", "data-testid": `grid-item-${i}`, children: _jsx(Slot, { name: s.name }) }, s.name));
+        }) }));
+    return (_jsx(BlockShell, { label: g.label, icon: g.icon, children: body }));
+}
+registerRenderer({ kinds: ['grid'], layout: 'block', editor: 'custom', Page: GridPage });

package/dist/render/blocks/heatmap.d.ts

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

package/dist/render/blocks/heatmap.js

@@ -0,0 +1,135 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation } from 'react-i18next';
+import { registerRenderer } from "../../registry.js";
+import { groupScopeClass, useGroupDepth, GroupDepthProvider } from "../chrome.js";
+import { useGroupEdit } from "../widgets/group-edit.js";
+import { GroupField } from "../widgets/group-field.js";
+import { useSlot } from "../slot.js";
+import { parseSeriesDate } from "./series.js";
+import { partField } from "../use-collection-rows.js";
+const DAY_MS = 86_400_000;
+const LEVELS = 4;
+const MAX_WEEKS = 260;
+function densityLevel(count, min, max) {
+    if (!Number.isFinite(count) || count <= 0)
+        return 0;
+    if (max === min)
+        return Math.ceil(LEVELS / 2);
+    return Math.min(LEVELS, Math.max(1, Math.ceil((count / max) * LEVELS)));
+}
+function toDay(t) {
+    return Math.floor(t / DAY_MS) * DAY_MS;
+}
+function dayKey(day) {
+    return new Date(day).toISOString().slice(0, 10);
+}
+function weekdayIndex(day) {
+    return (new Date(day).getUTCDay() + 6) % 7;
+}
+function weekStart(day) {
+    return day - weekdayIndex(day) * DAY_MS;
+}
+function weekEnd(day) {
+    return day + (6 - weekdayIndex(day)) * DAY_MS;
+}
+function dayGrid(counts) {
+    if (counts.size === 0)
+        return undefined;
+    const sorted = [...counts.keys()].sort((a, b) => a - b);
+    let from = sorted[0];
+    let to = sorted[sorted.length - 1];
+    const weeks = Math.round((weekEnd(to) - weekStart(from) + DAY_MS) / (DAY_MS * 7));
+    if (weeks > MAX_WEEKS) {
+        const window = busiestWindow(sorted, counts);
+        from = window.from;
+        to = window.to;
+    }
+    let clipped = 0;
+    for (const [day, n] of counts)
+        if (day < from || day > to)
+            clipped += n;
+    const start = weekStart(from);
+    const end = weekEnd(to);
+    const days = [];
+    for (let d = start; d <= end; d += DAY_MS)
+        days.push(d);
+    return { days, from, to, clipped };
+}
+function busiestWindow(sorted, counts) {
+    const width = (MAX_WEEKS * 7 - 1) * DAY_MS;
+    let lo = 0;
+    let hi = 0;
+    let rows = 0;
+    let bestRows = -1;
+    let bestStart = weekStart(sorted[0]);
+    for (const day of sorted) {
+        const start = weekStart(day);
+        const end = start + width;
+        while (hi < sorted.length && sorted[hi] <= end)
+            rows += counts.get(sorted[hi++]);
+        while (lo < sorted.length && sorted[lo] < start)
+            rows -= counts.get(sorted[lo++]);
+        if (rows >= bestRows) {
+            bestRows = rows;
+            bestStart = start;
+        }
+    }
+    const inside = sorted.filter((d) => d >= bestStart && d <= bestStart + width);
+    return { from: inside[0], to: inside[inside.length - 1] };
+}
+const WEEKDAYS = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'];
+function HeatmapPage({ el, value, recordCtx, mode }) {
+    const { t } = useTranslation();
+    const depth = useGroupDepth();
+    const { write } = useSlot();
+    const group = el;
+    const dateKey = group.view?.['date'];
+    const dateFld = partField(group, dateKey);
+    const g = useGroupEdit(mode, value, (v) => write(v));
+    const rows = Array.isArray(g.value) ? g.value : [];
+    const editing = g.mode !== 'view';
+    if (!dateKey || !dateFld) {
+        return (_jsx(GroupField, { group: { ...group, kind: undefined }, value: value, onChange: (v) => void write(v), recordCtx: recordCtx, mode: mode }));
+    }
+    const counts = new Map();
+    let undated = 0;
+    for (const row of rows) {
+        const t0 = parseSeriesDate(row[dateKey]);
+        if (t0 === undefined) {
+            undated += 1;
+            continue;
+        }
+        const day = toDay(t0);
+        counts.set(day, (counts.get(day) ?? 0) + 1);
+    }
+    const grid = dayGrid(counts);
+    const active = grid ? [...counts.entries()].filter(([d]) => d >= grid.from && d <= grid.to).map(([, c]) => c) : [];
+    const max = active.length ? Math.max(...active) : 0;
+    const min = active.length ? Math.min(...active) : 0;
+    const offGrid = undated + (grid?.clipped ?? 0);
+    const editor = (_jsx(GroupField, { group: { ...group, kind: undefined }, value: g.value, onChange: (v) => g.onChange(v), recordCtx: recordCtx, mode: "edit" }));
+    const monthLabels = grid
+        ? Array.from({ length: grid.days.length / 7 }, (_, w) => {
+            const monday = grid.days[w * 7];
+            const prev = w > 0 ? grid.days[(w - 1) * 7] : undefined;
+            const month = new Date(monday).getUTCMonth();
+            const show = prev === undefined || new Date(prev).getUTCMonth() !== month;
+            return (_jsx("div", { className: "h-3 whitespace-nowrap", children: show ? new Date(monday).toLocaleDateString(undefined, { month: 'short', timeZone: 'UTC' }) : '' }, w));
+        })
+        : [];
+    const cells = (grid?.days ?? []).map((day) => {
+        if (day < grid.from || day > grid.to) {
+            return _jsx("div", { className: "h-4 w-4", "data-testid": "heatmap-pad" }, day);
+        }
+        const count = counts.get(day) ?? 0;
+        const level = densityLevel(count, min, max);
+        const key = dayKey(day);
+        return (_jsxs("div", { "data-testid": `heatmap-day-${key}`, "data-count": count, "data-level": level, title: `${key} · ${count}`, className: `relative h-4 w-4 overflow-hidden rounded-[3px] border ${count > 0 ? 'border-accent/30' : 'border-border'}`, children: [level > 0 && (_jsx("span", { "aria-hidden": true, className: "absolute inset-x-0 bottom-0 bg-accent/15", style: { height: `${Math.round((level / LEVELS) * 100)}%` } })), count > 0 && _jsx("span", { className: "sr-only", children: `${key} · ${count}` })] }, day));
+    });
+    const map = grid === undefined ? (_jsx("p", { className: "py-1 text-sm text-muted", "data-testid": "heatmap-empty", children: t('form.noDates', 'No dated entries yet') })) : (_jsx("div", { className: "max-w-full overflow-x-auto", "data-testid": "heatmap-body", children: _jsxs("div", { className: "inline-flex flex-col gap-1", children: [_jsxs("div", { className: "flex gap-1", children: [_jsx("div", { className: "w-5 shrink-0" }), _jsx("div", { className: "grid grid-flow-col auto-cols-[1rem] gap-1 text-[9px] leading-3 text-muted", children: monthLabels })] }), _jsxs("div", { className: "flex gap-1", children: [_jsx("div", { className: "grid w-5 shrink-0 grid-rows-7 gap-1 text-[9px] leading-4 text-muted", children: WEEKDAYS.map((wd, i) => (_jsx("div", { children: i % 2 === 0 ? wd : '' }, wd))) }), _jsx("div", { className: "grid grid-rows-7 grid-flow-col auto-cols-[1rem] gap-1", "data-testid": "heatmap-grid", children: cells })] })] }) }));
+    const content = editing ? (editor) : (_jsxs("div", { className: "flex flex-col gap-1.5", children: [map, offGrid > 0 && (_jsx("p", { className: "text-[11px] text-muted", "data-testid": "heatmap-offgrid", children: t('form.offGrid', { n: offGrid, defaultValue: '{{n}} not on the grid' }) }))] }));
+    if (mode !== 'view')
+        return content;
+    return (_jsxs("section", { className: `${groupScopeClass(depth)} flex flex-col gap-1 min-w-0`, "data-testid": "heatmap", 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) }), 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 })] }));
+}
+registerRenderer({ kinds: ['heatmap'], layout: 'block', Page: HeatmapPage, editor: 'custom' });

package/dist/render/blocks/idcard.d.ts

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

package/dist/render/blocks/idcard.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { registerRenderer } from "../../registry.js";
+import { Slot, useSlots } from "../slot.js";
+import { findSlot, findSlots } from "./block-shell.js";
+function groupedNumber(raw) {
+    const compact = raw.replace(/\s+/g, '');
+    if (!compact)
+        return '';
+    const groups = [];
+    for (let i = 0; i < compact.length; i += 4)
+        groups.push(compact.slice(i, i + 4));
+    return groups.join(' ');
+}
+function IdcardPage({ el }) {
+    const g = el;
+    const numberName = g.view?.number;
+    const overlineName = g.view?.overline;
+    const metaNames = g.view?.meta ?? [];
+    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) => {
+                        const raw = typeof handle.value === 'string' || typeof handle.value === 'number' ? String(handle.value) : '';
+                        const grouped = groupedNumber(raw);
+                        if (!grouped)
+                            return defaultDisplay;
+                        return (_jsx("span", { className: "font-mono text-2xl font-semibold tracking-widest tabular-nums", "data-testid": "idcard-number", children: grouped }));
+                    } }) }), 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": "idcard-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": `idcard-meta-${i}`, children: _jsx(Slot, { name: s.name }) }, s.name))) }))] }));
+}
+registerRenderer({ kinds: ['idcard'], layout: 'block', editor: 'custom', Page: IdcardPage });

package/dist/render/blocks/identity.d.ts

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

package/dist/render/blocks/identity.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Phone, Mail, Link as LinkIcon } from 'lucide-react';
+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";
+const linkHrefOf = (s) => (/^[a-z][a-z0-9+.-]*:\/\//i.test(s) ? s : `https://${s}`);
+function channelHref(field, value) {
+    if (field.kind === 'tel') {
+        const s = String(value ?? '').trim();
+        return s ? `tel:${s}` : undefined;
+    }
+    if (field.kind === 'email') {
+        const s = String(value ?? '').trim();
+        return s ? `mailto:${s}` : undefined;
+    }
+    if (field.kind === 'link') {
+        const s = String(value ?? '').trim();
+        return s ? linkHrefOf(s) : undefined;
+    }
+    return undefined;
+}
+const CHANNEL_ICON = { tel: Phone, email: Mail, link: LinkIcon };
+function IdentityPage({ el }) {
+    const g = el;
+    const { t } = useTranslation();
+    const avatarName = g.view?.avatar;
+    const nameName = g.view?.name;
+    const roleName = g.view?.role;
+    const channelNames = g.view?.channels ?? [];
+    const slots = useSlots();
+    const avatar = findSlot(slots, avatarName);
+    const role = findSlot(slots, roleName);
+    const channels = findSlots(slots, channelNames);
+    const visibleChannels = channels.filter((c) => !c.handle.hidden);
+    const body = (_jsxs("div", { className: "flex items-center gap-3", "data-testid": "identity", children: [avatar && !avatar.handle.hidden && (_jsx("div", { className: "shrink-0", "data-testid": "identity-avatar", children: _jsx(Slot, { name: avatarName }) })), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "min-w-0 text-lg font-semibold", "data-testid": "identity-name", children: _jsx(Slot, { name: nameName }) }), role && !role.handle.hidden && (_jsx("div", { className: "min-w-0 text-sm text-muted", "data-testid": "identity-role", children: _jsx(Slot, { name: roleName }) }))] }), visibleChannels.length > 0 && (_jsx("div", { className: "flex shrink-0 items-center gap-1.5", "data-testid": "identity-channels", children: channels.map((c) => c.handle.hidden ? null : (_jsx("span", { children: _jsx(Slot, { name: c.name, ownLabel: true, render: (handle, defaultDisplay) => {
+                            const field = handle.field.type;
+                            const href = channelHref(field, handle.value);
+                            if (!href)
+                                return defaultDisplay;
+                            const Ico = CHANNEL_ICON[field.kind] ?? LinkIcon;
+                            return (_jsx("a", { href: href, "aria-label": fieldLabel(handle, t), className: "inline-flex h-9 w-9 items-center justify-center rounded-lg border border-border text-muted transition-colors hover:border-accent hover:text-accent", children: _jsx(Ico, { size: 16 }) }));
+                        } }) }, c.name))) }))] }));
+    return (_jsx(BlockShell, { label: g.label, icon: g.icon, children: body }));
+}
+registerRenderer({ kinds: ['identity'], layout: 'block', editor: 'custom', Page: IdentityPage });

package/dist/render/blocks/index.d.ts

@@ -0,0 +1,40 @@
+import './grid.tsx';
+import './bento.tsx';
+import './split.tsx';
+import './aside.tsx';
+import './spread.tsx';
+import './tabs.tsx';
+import './accordion.tsx';
+import './ledger.tsx';
+import './stats.tsx';
+import './facets.tsx';
+import './prose.tsx';
+import './epigraph.tsx';
+import './terminal.tsx';
+import './plaque.tsx';
+import './figure.tsx';
+import './compare.tsx';
+import './callout.tsx';
+import './masthead.tsx';
+import './score.tsx';
+import './status.tsx';
+import './meter.tsx';
+import './balance.tsx';
+import './countdown.tsx';
+import './deck.tsx';
+import './people.tsx';
+import './identity.tsx';
+import './timeline.tsx';
+import './receipt.tsx';
+import './idcard.tsx';
+import './route.tsx';
+import './specimen.tsx';
+import './nutrition.tsx';
+import './calendar.tsx';
+import './journal.tsx';
+import './manifest.tsx';
+import './table.tsx';
+import './properties.tsx';
+import './stack.tsx';
+import './chart.tsx';
+import './heatmap.tsx';

package/dist/render/blocks/index.js

@@ -0,0 +1,40 @@
+import "./grid.js";
+import "./bento.js";
+import "./split.js";
+import "./aside.js";
+import "./spread.js";
+import "./tabs.js";
+import "./accordion.js";
+import "./ledger.js";
+import "./stats.js";
+import "./facets.js";
+import "./prose.js";
+import "./epigraph.js";
+import "./terminal.js";
+import "./plaque.js";
+import "./figure.js";
+import "./compare.js";
+import "./callout.js";
+import "./masthead.js";
+import "./score.js";
+import "./status.js";
+import "./meter.js";
+import "./balance.js";
+import "./countdown.js";
+import "./deck.js";
+import "./people.js";
+import "./identity.js";
+import "./timeline.js";
+import "./receipt.js";
+import "./idcard.js";
+import "./route.js";
+import "./specimen.js";
+import "./nutrition.js";
+import "./calendar.js";
+import "./journal.js";
+import "./manifest.js";
+import "./table.js";
+import "./properties.js";
+import "./stack.js";
+import "./chart.js";
+import "./heatmap.js";

package/dist/render/blocks/journal.d.ts

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

package/dist/render/blocks/journal.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation } from 'react-i18next';
+import { isNamedField, isStorageGroup } from '@coffer-org/sdk/fields';
+import { registerRenderer } from "../../registry.js";
+import { AddBtn } from "../shared.js";
+import { RemoveBtn } from "../multiple-chips.js";
+import { STACK, Rail, groupScopeClass, useGroupDepth, GroupDepthProvider } from "../chrome.js";
+import { useGroupEdit } from "../widgets/group-edit.js";
+import { useHybridScope } from "../hybrid-scope.js";
+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 { useCollectionRows, partField } from "../use-collection-rows.js";
+import { useSlot } from "../slot.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 }));
+    }
+    return (_jsx(FieldSlot, { el: f, field: f.type, fieldKey: live ? key : undefined, value: row[key] ?? '', mode: "view", bare: !live, recordCtx: recordCtx, onChange: live ? onCommit : undefined, error: error }));
+}
+function JournalPage({ el, value, recordCtx, mode }) {
+    const { t } = useTranslation();
+    const depth = useGroupDepth();
+    const errorAt = useFieldErrors();
+    const { write } = useSlot();
+    const group = el;
+    const dateKey = group.view?.['date'];
+    const textKey = group.view?.['text'];
+    const dateFld = partField(group, dateKey);
+    const textFld = partField(group, textKey);
+    const g = useGroupEdit(mode, value, (v) => write(v));
+    const rows = Array.isArray(g.value) ? g.value : [];
+    const editing = g.mode !== 'view';
+    const live = useHybridScope() && mode === 'view';
+    const rowTools = editing || live;
+    const { rowId, updateRow, removeRow, addRow } = useCollectionRows(rows, (v) => g.onChange(v));
+    if (!dateFld || !textFld || !dateKey || !textKey) {
+        return (_jsx(GroupField, { group: { ...group, kind: undefined }, value: value, onChange: (v) => void write(v), recordCtx: recordCtx, mode: mode }));
+    }
+    const restFields = group.fields
+        .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') })] }));
+    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 })] }));
+}
+registerRenderer({ kinds: ['journal'], layout: 'block', Page: JournalPage, editor: 'custom' });

package/dist/render/blocks/ledger.d.ts

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

package/dist/render/blocks/ledger.js

@@ -0,0 +1,23 @@
+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";
+function LedgerPage({ el }) {
+    const g = el;
+    const { t } = useTranslation();
+    const slots = useSlots();
+    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(BlockShell, { label: g.label, icon: g.icon, children: body }));
+}
+registerRenderer({
+    kinds: ['ledger'],
+    layout: 'block',
+    editor: 'custom',
+    Page: LedgerPage,
+    childWidth: 'w-full',
+});

package/dist/render/blocks/manifest.d.ts

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

package/dist/render/blocks/manifest.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation } from 'react-i18next';
+import { isNamedField, isStorageGroup } from '@coffer-org/sdk/fields';
+import { registerRenderer } from "../../registry.js";
+import { AddBtn } from "../shared.js";
+import { RemoveBtn } from "../multiple-chips.js";
+import { STACK, Rail, groupScopeClass, useGroupDepth, GroupDepthProvider } from "../chrome.js";
+import { useGroupEdit } from "../widgets/group-edit.js";
+import { useHybridScope } from "../hybrid-scope.js";
+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 { useCollectionRows, partField } from "../use-collection-rows.js";
+import { useSlot } from "../slot.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 }));
+    }
+    return (_jsx(FieldSlot, { el: f, field: f.type, fieldKey: live ? key : undefined, value: row[key] ?? '', mode: "view", bare: !live, recordCtx: recordCtx, onChange: live ? onCommit : undefined, error: error }));
+}
+function ManifestPage({ el, value, recordCtx, mode }) {
+    const { t } = useTranslation();
+    const depth = useGroupDepth();
+    const errorAt = useFieldErrors();
+    const { write } = useSlot();
+    const group = el;
+    const qtyKey = group.view?.['quantity'];
+    const itemKey = group.view?.['item'];
+    const qtyFld = partField(group, qtyKey);
+    const itemFld = partField(group, itemKey);
+    const g = useGroupEdit(mode, value, (v) => write(v));
+    const rows = Array.isArray(g.value) ? g.value : [];
+    const editing = g.mode !== 'view';
+    const live = useHybridScope() && mode === 'view';
+    const rowTools = editing || live;
+    const { rowId, updateRow, removeRow, addRow } = useCollectionRows(rows, (v) => g.onChange(v));
+    if (!qtyFld || !itemFld || !qtyKey || !itemKey) {
+        return (_jsx(GroupField, { group: { ...group, kind: undefined }, value: value, onChange: (v) => void write(v), recordCtx: recordCtx, mode: mode }));
+    }
+    const restFields = group.fields
+        .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') })] }));
+    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 })] }));
+}
+registerRenderer({ kinds: ['manifest'], layout: 'block', Page: ManifestPage, editor: 'custom' });

package/dist/render/blocks/masthead.d.ts

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

package/dist/render/blocks/masthead.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { registerRenderer } from "../../registry.js";
+import { Slot, useSlots } from "../slot.js";
+import { findSlot, findSlots } from "./block-shell.js";
+function MastheadPage({ el }) {
+    const g = el;
+    const titleName = g.view?.title;
+    const overlineName = g.view?.overline;
+    const metaNames = g.view?.meta ?? [];
+    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))) }))] }));
+}
+registerRenderer({ kinds: ['masthead'], layout: 'block', editor: 'custom', Page: MastheadPage });

package/dist/render/blocks/meter.d.ts

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

package/dist/render/blocks/meter.js

@@ -0,0 +1,32 @@
+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";
+function resolveRange(view, field) {
+    const min = Number(view?.min ?? field.hints['min'] ?? 0);
+    const maxRaw = view?.max ?? field.hints['max'];
+    const max = maxRaw != null ? Number(maxRaw) : min + 1;
+    return { min: Number.isFinite(min) ? min : 0, max: Number.isFinite(max) && max > min ? max : min + 1 };
+}
+function magnitudeOf(value) {
+    if (value != null && typeof value === 'object' && 'value' in value) {
+        return Number(value['value']);
+    }
+    return Number(value);
+}
+function MeterPage({ el }) {
+    const g = el;
+    const sourceName = g.view?.source;
+    const ofName = g.view?.of;
+    const view = g.view;
+    const slots = useSlots();
+    const of = findSlot(slots, ofName);
+    const body = (_jsxs("div", { className: "flex flex-wrap items-end gap-3", "data-testid": "meter", children: [_jsx("div", { className: "min-w-0 flex-1", children: _jsx(Slot, { name: sourceName, render: (handle, defaultDisplay) => {
+                        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" }) })] }));
+                    } }) }), 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 }));
+}
+registerRenderer({ kinds: ['meter'], layout: 'block', editor: 'custom', Page: MeterPage });

package/dist/render/blocks/nutrition.d.ts

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

package/dist/render/blocks/nutrition.js

@@ -0,0 +1,27 @@
+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";
+function NutritionPage({ el }) {
+    const g = el;
+    const { t } = useTranslation();
+    const energyName = g.view?.energy;
+    const fieldNames = g.view?.fields ?? [];
+    const slots = useSlots();
+    const energy = findSlot(slots, energyName);
+    const rows = findSlots(slots, fieldNames);
+    const energyVisible = energy !== undefined && !energy.handle.hidden;
+    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))) })] }));
+    return (_jsx(BlockShell, { label: g.label, icon: g.icon, children: body }));
+}
+registerRenderer({
+    kinds: ['nutrition'],
+    layout: 'block',
+    editor: 'custom',
+    Page: NutritionPage,
+    childWidth: 'w-full',
+});

package/dist/render/blocks/people.d.ts

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