@coffer-org/web-ui 4.0.0

package/dist/render/blocks/people.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Link } from 'react-router-dom';
+import { getShelf } from "../../schema-registry.js";
+import { OptionIconView } from "../../components/ui/option-icon.js";
+import { recordOption } from "../../lib/record-option.js";
+import { useRecordsByIds } from "../../lib/use-record-labels.js";
+import { Dash, shortId } from "../shared.js";
+import { registerRenderer } from "../../registry.js";
+import { Slot } from "../slot.js";
+import { BlockShell } from "./block-shell.js";
+import { relationIds } from "./relation-source.js";
+function PeopleRoster({ field, value }) {
+    const library = field.relation?.library ?? '';
+    const shelf = field.relation?.shelf ?? '';
+    const ids = relationIds(field, value);
+    const recordMap = useRecordsByIds(library, shelf, ids);
+    const m = getShelf(library, shelf);
+    if (!ids.length)
+        return _jsx(Dash, {});
+    return (_jsxs("div", { className: "flex flex-wrap items-center gap-x-3 gap-y-1", "data-testid": "people", children: [_jsx("div", { className: "flex items-center", "data-testid": "people-avatars", children: ids.map((id, i) => {
+                    const row = recordMap.get(id);
+                    const { icon } = m && row ? recordOption(m, row) : { icon: undefined };
+                    return (_jsx("span", { className: `rounded-full ring-2 ring-surface ${i > 0 ? '-ml-2.5' : ''}`, style: { zIndex: ids.length - i }, "data-testid": `people-avatar-${i}`, children: icon ? (_jsx(OptionIconView, { icon: icon, framed: true, size: "md" })) : (_jsx(OptionIconView, { icon: { kind: 'icon', value: m?.icon ?? 'lucide:user' }, framed: true, size: "md" })) }, id));
+                }) }), _jsx("div", { className: "flex flex-wrap items-center gap-x-1.5 text-sm", "data-testid": "people-names", children: ids.map((id) => {
+                    const row = recordMap.get(id);
+                    const { title } = m && row ? recordOption(m, row) : { title: shortId(id) };
+                    return (_jsx(Link, { to: `/${library}/${shelf}/${id}`, className: "hover:text-accent hover:underline", children: title }, id));
+                }) })] }));
+}
+function PeoplePage({ el }) {
+    const g = el;
+    const sourceName = g.view?.source;
+    return (_jsx(BlockShell, { label: g.label, icon: g.icon, children: _jsx(Slot, { name: sourceName, render: (handle) => _jsx(PeopleRoster, { field: handle.field.type, value: handle.value }) }) }));
+}
+registerRenderer({ kinds: ['people'], layout: 'block', editor: 'custom', Page: PeoplePage });

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

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

package/dist/render/blocks/plaque.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 { BlockShell, findSlot, findSlots } from "./block-shell.js";
+function PlaquePage({ el }) {
+    const g = el;
+    const titleName = g.view?.title;
+    const subtitleNames = g.view?.subtitle ?? [];
+    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)))] }));
+    return (_jsx(BlockShell, { label: g.label, icon: g.icon, children: body }));
+}
+registerRenderer({ kinds: ['plaque'], layout: 'block', editor: 'custom', Page: PlaquePage });

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

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

package/dist/render/blocks/properties.js

@@ -0,0 +1,22 @@
+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 @md:grid-cols-3',
+    4: 'grid-cols-1 @sm:grid-cols-2 @md:grid-cols-4',
+};
+function PropertiesPage({ el }) {
+    const g = el;
+    const columns = g.view?.columns ?? 2;
+    const colClass = COLS[columns] ?? COLS[2];
+    const slots = useSlots();
+    const body = (_jsx("div", { className: `@container grid gap-x-4 gap-y-3.5 p-4 rounded-xl border border-border/60 bg-muted/15 ${colClass}`, children: slots.map((s, i) => {
+            if (s.handle.hidden)
+                return null;
+            return (_jsx("div", { className: "min-w-0", "data-testid": `properties-item-${i}`, children: _jsx(Slot, { name: s.name }) }, s.name));
+        }) }));
+    return (_jsx(BlockShell, { label: g.label, icon: g.icon, children: body }));
+}
+registerRenderer({ kinds: ['properties'], layout: 'block', editor: 'custom', Page: PropertiesPage });

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

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

package/dist/render/blocks/prose.js

@@ -0,0 +1,17 @@
+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 DROP_CAP_CLS = 'first-letter:float-left first-letter:mr-2 first-letter:text-5xl first-letter:font-bold first-letter:leading-[0.8]';
+function ProsePage({ el }) {
+    const g = el;
+    const dropCapName = g.view?.dropCap;
+    const slots = useSlots();
+    const body = (_jsx("div", { className: "max-w-[65ch] space-y-3 font-serif text-base leading-relaxed", "data-testid": "prose", children: slots.map((s, i) => {
+            if (s.handle.hidden)
+                return null;
+            return (_jsx("div", { className: `min-w-0 ${s.name === dropCapName ? DROP_CAP_CLS : ''}`, "data-testid": `prose-item-${i}`, children: _jsx(Slot, { name: s.name }) }, s.name));
+        }) }));
+    return (_jsx(BlockShell, { label: g.label, icon: g.icon, children: body }));
+}
+registerRenderer({ kinds: ['prose'], layout: 'block', editor: 'custom', Page: ProsePage });

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

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

package/dist/render/blocks/receipt.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, findSlot, findSlots } from "./block-shell.js";
+function ReceiptPage({ el }) {
+    const g = el;
+    const { t } = useTranslation();
+    const lineNames = g.view?.lines ?? [];
+    const totalName = g.view?.total;
+    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 })] })) }) }))] }));
+    return (_jsx(BlockShell, { label: g.label, icon: g.icon, children: body }));
+}
+registerRenderer({
+    kinds: ['receipt'],
+    layout: 'block',
+    editor: 'custom',
+    Page: ReceiptPage,
+    childWidth: 'w-full',
+});

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

@@ -0,0 +1,16 @@
+import type { ReactNode, ReactElement } from 'react';
+import type { ContainerNode } from '@coffer-org/sdk/fields';
+import type { DisplayOverride } from '../display-override.tsx';
+export type { DisplayOverride };
+export interface BlockComponent {
+    (p: {
+        el: ContainerNode;
+        items: ReactNode[];
+        label?: string;
+        icon?: string;
+    }): ReactElement;
+    displays?: (el: ContainerNode) => readonly (DisplayOverride | undefined)[];
+    childWidth?: string;
+}
+export declare function registerBlock(kind: string, c: BlockComponent): void;
+export declare function resolveBlock(kind: string | undefined): BlockComponent | undefined;

package/dist/render/blocks/registry.js

@@ -0,0 +1,7 @@
+const blocks = new Map();
+export function registerBlock(kind, c) {
+    blocks.set(kind, c);
+}
+export function resolveBlock(kind) {
+    return kind ? blocks.get(kind) : undefined;
+}

package/dist/render/blocks/relation-source.d.ts

@@ -0,0 +1,2 @@
+import type { FieldMeta } from '@coffer-org/sdk/fields';
+export declare function relationIds(field: FieldMeta, value: unknown): string[];

package/dist/render/blocks/relation-source.js

@@ -0,0 +1,6 @@
+import { parseJSON } from "../../lib/json.js";
+import { hasValue } from "../shared.js";
+export function relationIds(field, value) {
+    const multi = Boolean(field.hints['multi']);
+    return multi ? parseJSON(value, []).map(String) : hasValue(value) ? [String(value)] : [];
+}

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

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

package/dist/render/blocks/route.js

@@ -0,0 +1,23 @@
+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 RoutePage({ el }) {
+    const g = el;
+    const fromName = g.view?.from;
+    const toName = g.view?.to;
+    const departName = g.view?.depart;
+    const arriveName = g.view?.arrive;
+    const durationName = g.view?.duration;
+    const slots = useSlots();
+    const from = findSlot(slots, fromName);
+    const to = findSlot(slots, toName);
+    const depart = findSlot(slots, departName);
+    const arrive = findSlot(slots, arriveName);
+    const duration = findSlot(slots, durationName);
+    const fromVisible = from !== undefined && !from.handle.hidden;
+    const toVisible = to !== undefined && !to.handle.hidden;
+    const durationVisible = duration !== undefined && !duration.handle.hidden;
+    return (_jsxs("div", { className: "flex items-start gap-3", "data-testid": "route", children: [fromVisible && (_jsxs("div", { className: "flex min-w-0 flex-1 flex-col items-start gap-1", "data-testid": "route-from", children: [_jsx(Slot, { name: fromName, render: (_handle, defaultDisplay) => (_jsx("span", { className: "text-xl font-bold", "data-testid": "route-endpoint-0", children: defaultDisplay })) }), depart && !depart.handle.hidden && (_jsx("span", { className: "min-w-0 text-xs text-muted", "data-testid": "route-depart", children: _jsx(Slot, { name: departName }) }))] })), (fromVisible || toVisible || durationVisible) && (_jsxs("div", { className: "relative flex min-w-[3rem] flex-1 shrink-0 flex-col items-center justify-center self-stretch", "data-testid": "route-axis", children: [_jsx("span", { className: "absolute inset-x-0 top-1/2 border-t border-dashed border-border", "aria-hidden": true }), durationVisible && (_jsx("span", { className: "relative z-10 bg-surface px-1.5 text-xs font-medium text-muted", "data-testid": "route-duration", children: _jsx(Slot, { name: durationName }) }))] })), toVisible && (_jsxs("div", { className: "flex min-w-0 flex-1 flex-col items-end gap-1 text-right", "data-testid": "route-to", children: [_jsx(Slot, { name: toName, render: (_handle, defaultDisplay) => (_jsx("span", { className: "text-xl font-bold", "data-testid": "route-endpoint-1", children: defaultDisplay })) }), arrive && !arrive.handle.hidden && (_jsx("span", { className: "min-w-0 text-xs text-muted", "data-testid": "route-arrive", children: _jsx(Slot, { name: arriveName }) }))] }))] }));
+}
+registerRenderer({ kinds: ['route'], layout: 'block', editor: 'custom', Page: RoutePage });

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

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

package/dist/render/blocks/score.js

@@ -0,0 +1,15 @@
+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";
+function ScorePage({ el }) {
+    const g = el;
+    const sourceName = g.view?.source;
+    const verdictName = g.view?.verdict;
+    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 }) }))] }));
+    return (_jsx(BlockShell, { label: g.label, icon: g.icon, children: body }));
+}
+registerRenderer({ kinds: ['score'], layout: 'block', editor: 'custom', Page: ScorePage });

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

@@ -0,0 +1,23 @@
+export interface SeriesPoint {
+    value: number;
+    t?: number;
+    row?: Record<string, unknown>;
+}
+export interface SeriesBox {
+    width: number;
+    height: number;
+    pad?: number;
+}
+export interface Sparkline {
+    path: string;
+    coords: {
+        x: number;
+        y: number;
+    }[];
+    min: number | undefined;
+    max: number | undefined;
+}
+export declare function parseSeriesDate(v: unknown): number | undefined;
+export declare function toSeries(rows: Record<string, unknown>[], value: string, date: string): SeriesPoint[];
+export declare function sparkline(input: SeriesPoint[], box: SeriesBox): Sparkline;
+export declare function seriesDelta(points: SeriesPoint[]): number | undefined;

package/dist/render/blocks/series.js

@@ -0,0 +1,57 @@
+export function parseSeriesDate(v) {
+    const s = typeof v === 'string' ? v : typeof v === 'number' ? String(v) : '';
+    const m = /^(\d{4})-(\d{2})-(\d{2})(?:[T ](\d{2}):(\d{2})(?::(\d{2}))?)?/.exec(s);
+    if (!m)
+        return undefined;
+    return Date.UTC(Number(m[1]), Number(m[2]) - 1, Number(m[3]), Number(m[4] ?? 0), Number(m[5] ?? 0), Number(m[6] ?? 0));
+}
+function toNumber(v) {
+    if (typeof v === 'number')
+        return Number.isFinite(v) ? v : undefined;
+    if (typeof v === 'string' && v.trim() !== '') {
+        const n = Number(v);
+        return Number.isFinite(n) ? n : undefined;
+    }
+    return undefined;
+}
+export function toSeries(rows, value, date) {
+    const points = [];
+    for (const row of rows) {
+        const v = toNumber(row[value]);
+        if (v === undefined)
+            continue;
+        points.push({ value: v, t: parseSeriesDate(row[date]), row });
+    }
+    if (points.length > 1 && points.every((p) => p.t !== undefined)) {
+        points.sort((a, b) => a.t - b.t);
+    }
+    return points;
+}
+function round(n) {
+    return Math.round(n * 100) / 100;
+}
+export function sparkline(input, box) {
+    const pad = box.pad ?? 0;
+    const innerW = Math.max(0, box.width - pad * 2);
+    const innerH = Math.max(0, box.height - pad * 2);
+    const points = input.filter((p) => Number.isFinite(p.value));
+    if (points.length === 0)
+        return { path: '', coords: [], min: undefined, max: undefined };
+    const values = points.map((p) => p.value);
+    const min = Math.min(...values);
+    const max = Math.max(...values);
+    const range = max - min;
+    const coords = points.map((p, i) => {
+        const fx = points.length > 1 ? i / (points.length - 1) : 0;
+        const fy = range > 0 ? (p.value - min) / range : 0.5;
+        return { x: round(pad + fx * innerW), y: round(pad + (1 - fy) * innerH) };
+    });
+    const move = coords.map((c, i) => `${i === 0 ? 'M' : 'L'} ${c.x} ${c.y}`).join(' ');
+    const path = coords.length === 1 ? `${move} L ${coords[0].x} ${coords[0].y}` : move;
+    return { path, coords, min, max };
+}
+export function seriesDelta(points) {
+    if (points.length < 2)
+        return undefined;
+    return points[points.length - 1].value - points[points.length - 2].value;
+}

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

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

package/dist/render/blocks/specimen.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation } from 'react-i18next';
+import { Icon } from "../../components/Icon.js";
+import { registerRenderer } from "../../registry.js";
+import { Slot, useSlots } from "../slot.js";
+import { fieldLabel, findSlot, findSlots } from "./block-shell.js";
+function SpecimenPage({ el }) {
+    const g = el;
+    const { t } = useTranslation();
+    const titleName = g.view?.title;
+    const subtitleName = g.view?.subtitle;
+    const conditionNames = g.view?.conditions ?? [];
+    const slots = useSlots();
+    const subtitle = findSlot(slots, subtitleName);
+    const conditions = findSlots(slots, conditionNames);
+    const visibleConditions = conditions.filter((c) => !c.handle.hidden);
+    return (_jsxs("div", { className: "space-y-2", "data-testid": "specimen", children: [_jsx("div", { className: "min-w-0", children: _jsx(Slot, { name: titleName, render: (_handle, defaultDisplay) => (_jsx("span", { className: "text-xl font-medium italic", "data-testid": "specimen-title", children: defaultDisplay })) }) }), subtitle && !subtitle.handle.hidden && (_jsx("div", { className: "min-w-0 text-sm text-muted", "data-testid": "specimen-subtitle", children: _jsx(Slot, { name: subtitleName }) })), visibleConditions.length > 0 && (_jsx("div", { className: "flex flex-col gap-1", "data-testid": "specimen-conditions", children: conditions.map((c, i) => c.handle.hidden ? null : (_jsx("div", { "data-testid": `specimen-condition-${i}`, children: _jsx(Slot, { name: c.name, ownLabel: true, render: (handle, defaultDisplay) => (_jsxs("span", { className: "inline-flex min-w-0 items-baseline gap-1.5", children: [_jsx(Icon, { name: "lucide:circle", size: 8, className: "relative top-[0.15em] shrink-0 fill-current text-muted" }), _jsx("span", { className: "shrink-0 text-muted", children: fieldLabel(handle, t) }), _jsx("span", { className: "min-w-0 font-medium text-text", children: defaultDisplay })] })) }) }, c.name))) }))] }));
+}
+registerRenderer({ kinds: ['specimen'], layout: 'block', editor: 'custom', Page: SpecimenPage });

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

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

package/dist/render/blocks/split.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { registerRenderer } from "../../registry.js";
+import { Slot } from "../slot.js";
+registerRenderer({
+    kinds: ['split'],
+    layout: 'block',
+    editor: 'custom',
+    Page: ({ el }) => {
+        const g = el;
+        const [a, b] = g.view?.ratio ?? [1, 1];
+        const first = g.view?.first ?? [];
+        const second = g.view?.second ?? [];
+        return (_jsxs("div", { className: "grid grid-cols-1 gap-4 sm:[grid-template-columns:var(--split)]", style: { '--split': `${a}fr ${b}fr` }, children: [_jsx("div", { className: "min-w-0 space-y-3", children: first.map((n) => (_jsx(Slot, { name: n }, n))) }), _jsx("div", { className: "min-w-0 space-y-3", children: second.map((n) => (_jsx(Slot, { name: n }, n))) })] }));
+    },
+});

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

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

package/dist/render/blocks/spread.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 SpreadPage({ el }) {
+    const g = el;
+    const visualName = g.view?.visual;
+    const quoteName = g.view?.quote;
+    const factNames = g.view?.facts ?? [];
+    const slots = useSlots();
+    const quote = findSlot(slots, quoteName);
+    const facts = findSlots(slots, factNames);
+    return (_jsxs("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-[minmax(0,1.4fr)_minmax(0,1fr)]", children: [_jsx("div", { className: "min-w-0", children: _jsx(Slot, { name: visualName }) }), _jsxs("div", { className: "flex min-w-0 flex-col gap-3", children: [quote && !quote.handle.hidden && (_jsx("blockquote", { className: "border-l-2 border-accent pl-3 italic text-muted", children: _jsx(Slot, { name: quoteName }) })), facts.map((f) => (_jsx(Slot, { name: f.name }, f.name)))] })] }));
+}
+registerRenderer({ kinds: ['spread'], layout: 'block', editor: 'custom', Page: SpreadPage });

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

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

package/dist/render/blocks/stack.js

@@ -0,0 +1,15 @@
+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";
+function StackPage({ el }) {
+    const g = el;
+    const slots = useSlots();
+    const body = (_jsx("div", { className: "flex flex-col gap-3 w-full", children: slots.map((s, i) => {
+            if (s.handle.hidden)
+                return null;
+            return (_jsx("div", { className: "w-full min-w-0", "data-testid": `stack-item-${i}`, children: _jsx(Slot, { name: s.name }) }, s.name));
+        }) }));
+    return (_jsx(BlockShell, { label: g.label, icon: g.icon, children: body }));
+}
+registerRenderer({ kinds: ['stack'], layout: 'block', editor: 'custom', Page: StackPage });

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

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

package/dist/render/blocks/stats.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 StatsPage({ el }) {
+    const g = el;
+    const { t } = useTranslation();
+    const slots = useSlots();
+    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(BlockShell, { label: g.label, icon: g.icon, children: body }));
+}
+registerRenderer({
+    kinds: ['stats'],
+    layout: 'block',
+    editor: 'custom',
+    Page: StatsPage,
+    childWidth: 'w-full',
+});

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

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

package/dist/render/blocks/status.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { optionChipProps } from "../option-value.js";
+import { registerRenderer } from "../../registry.js";
+import { Slot, useSlots } from "../slot.js";
+import { BlockShell, findSlot } from "./block-shell.js";
+function StatusPage({ el }) {
+    const g = el;
+    const sourceName = g.view?.source;
+    const sinceName = g.view?.since;
+    const slots = useSlots();
+    const since = findSlot(slots, sinceName);
+    const body = (_jsxs("div", { className: "flex flex-wrap items-center gap-3", "data-testid": "status", children: [_jsx("div", { className: "min-w-0", children: _jsx(Slot, { name: sourceName, render: (handle, defaultDisplay) => {
+                        const { chipClassName, chipStyle } = optionChipProps(handle.field.type);
+                        return (_jsx("span", { className: `inline-flex min-w-0 items-center gap-2 rounded-lg border px-3 py-1.5 font-medium ${chipClassName ? chipClassName() : ''}`, style: chipStyle ? chipStyle(handle.value) : undefined, "data-testid": "status-banner", children: defaultDisplay }));
+                    } }) }), since && !since.handle.hidden && (_jsx("div", { className: "min-w-0 text-sm text-muted", "data-testid": "status-since", children: _jsx(Slot, { name: sinceName }) }))] }));
+    return (_jsx(BlockShell, { label: g.label, icon: g.icon, children: body }));
+}
+registerRenderer({ kinds: ['status'], layout: 'block', editor: 'custom', Page: StatusPage });

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

@@ -0,0 +1,11 @@
+import type { ContainerNode, ValueNode } from '@coffer-org/sdk/fields';
+import type { TableAggregate } from '@coffer-org/sdk/blocks';
+import { type Row } from '../use-collection-rows.ts';
+export type { Row };
+export type Col = ValueNode & {
+    key: string;
+};
+export declare function columnsOf(el: ContainerNode): Col[];
+export declare function warnUnknownKey(el: ContainerNode, option: string, key: string): void;
+export declare function aggregate(kind: TableAggregate, f: Col, rows: Row[]): number | undefined;
+export declare function totalValue(f: Col, rows: Row[], n: number): unknown;

package/dist/render/blocks/table.js

@@ -0,0 +1,136 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { isNamedField, isStorageGroup } from '@coffer-org/sdk/fields';
+import { cellValue, magnitudeSub, subValue, withSubValue } from '@coffer-org/sdk/shelf';
+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 { useGroupEdit } from "../widgets/group-edit.js";
+import { useHybridScope } from "../hybrid-scope.js";
+import { FieldSlot, fieldKeys } from "../dispatch.js";
+import { useFieldErrors } from "../field-errors.js";
+import { sortByField } from "../sort-rows.js";
+import { useCollectionRows } from "../use-collection-rows.js";
+import { useSlot } from "../slot.js";
+const NO_VALUE = ' __table_none__';
+export function columnsOf(el) {
+    return el.fields.filter((f) => isNamedField(f));
+}
+const warned = new Set();
+export function warnUnknownKey(el, option, key) {
+    const id = `${el.key}:${option}:${key}`;
+    if (warned.has(id))
+        return;
+    warned.add(id);
+    console.warn(`[table] '${el.key}': ${option} names '${key}', which is not a column of the row; ignored.`);
+}
+function numericCell(f, row) {
+    const v = cellValue(f.type, f.key, row);
+    const sub = magnitudeSub(f.type);
+    const raw = sub ? subValue(v, sub) : v;
+    const n = raw == null || raw === '' ? NaN : Number(raw);
+    return Number.isFinite(n) ? n : undefined;
+}
+export function aggregate(kind, f, rows) {
+    if (kind === 'count')
+        return rows.length;
+    const nums = rows.map((r) => numericCell(f, r)).filter((n) => n !== undefined);
+    if (!nums.length)
+        return undefined;
+    if (kind === 'sum')
+        return nums.reduce((a, b) => a + b, 0);
+    if (kind === 'avg')
+        return nums.reduce((a, b) => a + b, 0) / nums.length;
+    if (kind === 'min')
+        return Math.min(...nums);
+    return Math.max(...nums);
+}
+export function totalValue(f, rows, n) {
+    const sub = magnitudeSub(f.type);
+    if (!sub)
+        return n;
+    const sample = rows.map((r) => cellValue(f.type, f.key, r)).find((v) => v && typeof v === 'object');
+    return withSubValue(sample, sub, n);
+}
+function cellNode(f, row, editing, live, onCommit, recordCtx, error) {
+    if (editing) {
+        return (_jsx(FieldSlot, { el: f, field: f.type, fieldKey: f.key, value: row[f.key] ?? '', onChange: onCommit, mode: "edit", bare: true, recordCtx: recordCtx, error: error }));
+    }
+    return (_jsx(FieldSlot, { el: f, field: f.type, fieldKey: live ? f.key : undefined, value: row[f.key] ?? '', mode: "view", bare: !live, recordCtx: recordCtx, onChange: live ? onCommit : undefined, error: error }));
+}
+function TablePage({ el, value, recordCtx, mode }) {
+    const { t } = useTranslation();
+    const depth = useGroupDepth();
+    const errorAt = useFieldErrors();
+    const { write } = useSlot();
+    const group = el;
+    const cols = columnsOf(group);
+    const declaredSort = group.view?.['sort'];
+    const declaredDir = group.view?.['dir'] ?? 'asc';
+    const colOf = (key) => cols.find((f) => f.key === key);
+    if (declaredSort && !colOf(declaredSort))
+        warnUnknownKey(group, 'sort', declaredSort);
+    const [sort, setSort] = useState(declaredSort && colOf(declaredSort) ? { key: declaredSort, dir: declaredDir } : null);
+    const cycle = (key) => setSort((s) => (s?.key !== key ? { key, dir: 'asc' } : s.dir === 'asc' ? { key, dir: 'desc' } : null));
+    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 keyCtx = useMemo(() => ({ t }), [t]);
+    const ordered = useMemo(() => {
+        if (editing || !sort)
+            return rows;
+        const f = colOf(sort.key);
+        if (!f)
+            return rows;
+        return sortByField(rows, sort.key, sort.dir, f.type, keyCtx);
+    }, [rows, sort, editing, keyCtx]);
+    const indexOf = useMemo(() => new Map(rows.map((r, i) => [r, i])), [rows]);
+    const groupKey = group.view?.['groupBy'];
+    const groupFld = colOf(groupKey);
+    if (groupKey && !groupFld)
+        warnUnknownKey(group, 'groupBy', groupKey);
+    const buckets = useMemo(() => {
+        if (editing || !groupKey || !groupFld)
+            return [{ key: null, sort: '', label: '', rows: ordered }];
+        const byValue = new Map();
+        const none = [];
+        for (const row of ordered) {
+            const k = fieldKeys(groupFld.type, cellValue(groupFld.type, groupKey, row), keyCtx)[0];
+            if (!k) {
+                none.push(row);
+                continue;
+            }
+            const b = byValue.get(k.value) ?? { key: k.value, sort: k.sort ?? k.value, label: k.label, rows: [] };
+            b.rows.push(row);
+            byValue.set(k.value, b);
+        }
+        const out = [...byValue.values()].sort((a, b) => a.sort.localeCompare(b.sort, undefined, { numeric: true, sensitivity: 'base' }));
+        if (none.length)
+            out.push({ key: NO_VALUE, sort: NO_VALUE, label: t('table.noValue'), rows: none });
+        return out;
+    }, [ordered, editing, groupKey, groupFld, keyCtx, t]);
+    const rowTools = editing || live;
+    const numbered = group.view?.['numbered'] === true;
+    const totals = group.view?.['totals'];
+    for (const key of Object.keys(totals ?? {}))
+        if (!colOf(key))
+            warnUnknownKey(group, 'totals', key);
+    const hasTotals = Boolean(totals && Object.keys(totals).some((k) => colOf(k)));
+    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));
+            }), 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') })] }));
+    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 })] }));
+}
+registerRenderer({ kinds: ['table'], layout: 'block', Page: TablePage, editor: 'custom' });

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

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

package/dist/render/blocks/tabs.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Icon } from "../../components/Icon.js";
+import { registerRenderer } from "../../registry.js";
+import { Slot, SlotScope, useSlots } from "../slot.js";
+function TabFields() {
+    return (_jsx(_Fragment, { children: useSlots().map((s) => (_jsx(Slot, { name: s.name }, s.name))) }));
+}
+function TabsPage({ el }) {
+    const g = el;
+    const { t } = useTranslation();
+    const tabs = g.view?.tabs ?? [];
+    const [active, setActive] = useState(0);
+    return (_jsxs("div", { className: "min-w-0", children: [_jsx("div", { role: "tablist", className: "flex flex-nowrap gap-1 overflow-x-auto border-b border-border", children: tabs.map((tab, i) => (_jsxs("button", { type: "button", role: "tab", "aria-selected": i === active, onClick: () => setActive(i), className: `flex shrink-0 items-center gap-1.5 whitespace-nowrap border-b-2 px-3 py-2 text-sm font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring ${i === active ? 'border-accent text-accent' : 'border-transparent text-muted'}`, children: [tab.icon && _jsx(Icon, { name: tab.icon, size: 14, className: "shrink-0" }), t(tab.label)] }, tab.name))) }), tabs.map((tab, i) => (_jsx("div", { role: "tabpanel", hidden: i !== active, className: "min-w-0 space-y-3 pt-3", children: _jsx(SlotScope, { name: tab.name, children: _jsx(TabFields, {}) }) }, tab.name)))] }));
+}
+registerRenderer({ kinds: ['tabs'], layout: 'block', editor: 'custom', Page: TabsPage });

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

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