@coffer-org/web-ui 4.0.0

package/dist/registry.js

@@ -0,0 +1,169 @@
+import { hasValue, hasChildren, isPseudo, isCollectionGroup, isEmbeddedGroup } from '@coffer-org/sdk/fields';
+export const rendererRegistry = {};
+export function registerRenderer(r) {
+    if (!r.kinds.length)
+        throw new Error('[render] renderer without kinds');
+    const stored = {
+        kinds: r.kinds,
+        layout: r.layout,
+        childWidth: r.childWidth,
+        box: r.box,
+        Page: r.Page,
+        Inline: r.Inline,
+        Value: r.Value,
+        pickerSize: r.pickerSize,
+        Picker: r.Picker,
+        editor: r.editor,
+        keys: r.keys,
+    };
+    for (const kind of r.kinds) {
+        if (rendererRegistry[kind])
+            throw new Error(`[render] kind '${kind}' already registered`);
+        rendererRegistry[kind] = stored;
+    }
+}
+export function resolveRenderer(field) {
+    return rendererRegistry[field.kind];
+}
+export function elementKind(el) {
+    if (hasValue(el) && !hasChildren(el))
+        return el.type.kind;
+    if (hasChildren(el))
+        return el.kind ?? (isCollectionGroup(el) ? 'collection' : isEmbeddedGroup(el) ? 'embedded' : 'group');
+    if (isPseudo(el)) {
+        if (el.el === 'button')
+            return 'button';
+        if (el.el === 'divider')
+            return 'divider';
+        if (el.el === 'info')
+            return 'info';
+    }
+    throw new Error('[render] unknown layout element');
+}
+export function fieldLayout(field) {
+    const layout = resolveRenderer(field)?.layout;
+    if (typeof layout === 'function')
+        return layout(field);
+    return layout ?? 'scalar';
+}
+export const multiBlock = (field) => field.hints['multi'] === true || field.hints['multiple'] === true ? 'block' : 'scalar';
+export function resolveFieldSpan(field) {
+    const explicit = field.hints?.['span'];
+    if (typeof explicit === 'number' && explicit >= 1 && explicit <= 12) {
+        return Math.round(explicit);
+    }
+    if (typeof explicit === 'string') {
+        if (explicit === 'full')
+            return 12;
+        if (explicit === 'half')
+            return 6;
+        if (explicit === 'third')
+            return 4;
+        if (explicit === 'quarter')
+            return 3;
+        const parsed = parseInt(explicit, 10);
+        if (!Number.isNaN(parsed) && parsed >= 1 && parsed <= 12)
+            return parsed;
+    }
+    if (field.hints['multiple'] === true || field.hints['multi'] === true) {
+        if (field.kind === 'color' || field.kind === 'country')
+            return 6;
+        return 12;
+    }
+    const layout = fieldLayout(field);
+    if (layout === 'block')
+        return 12;
+    switch (field.kind) {
+        case 'boolean':
+        case 'tristate':
+        case 'triState':
+        case 'rating':
+        case 'percent':
+        case 'year':
+        case 'color':
+        case 'colorname':
+        case 'unit':
+        case 'amount':
+        case 'status':
+        case 'score':
+        case 'tag':
+            return 3;
+        case 'email':
+        case 'tel':
+        case 'url':
+        case 'password':
+        case 'measured':
+        case 'money':
+        case 'period':
+        case 'numberRange':
+        case 'realRange':
+        case 'dimensions':
+        case 'weight':
+        case 'cidr':
+        case 'file':
+        case 'document':
+        case 'audio':
+        case 'video':
+        case 'image':
+        case 'avatar':
+        case 'poster':
+        case 'cover':
+        case 'media':
+        case 'tags':
+        case 'keyValue':
+        case 'key_value':
+            return 6;
+        case 'markdown':
+        case 'textarea':
+        case 'snippet':
+        case 'source':
+        case 'json':
+        case 'embed':
+        case 'table':
+        case 'sheet':
+        case 'calendar':
+        case 'journal':
+        case 'manifest':
+        case 'prose':
+        case 'idcard':
+        case 'bento':
+        case 'grid':
+        case 'split':
+            return 12;
+        case 'text':
+        case 'string':
+        case 'int':
+        case 'number':
+        case 'real':
+        case 'date':
+        case 'time':
+        case 'datetime':
+        case 'reminder':
+        case 'select':
+        case 'country':
+        case 'slug':
+        case 'link':
+        case 'localDir':
+        case 'localFile':
+        case 'i18n':
+        case 'smalltext':
+        case 'ip':
+        case 'mac':
+        case 'imei':
+        case 'hostname':
+        case 'dataSize':
+        case 'ram':
+        case 'diskSize':
+        default:
+            return 4;
+    }
+}
+const templateRegistry = {};
+export function registerTemplate(name, importer) {
+    if (templateRegistry[name])
+        throw new Error(`[template] '${name}' already registered`);
+    templateRegistry[name] = importer;
+}
+export function resolveTemplate(name) {
+    return templateRegistry[name];
+}

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

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

package/dist/render/blocks/accordion.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, Fragment as _Fragment, 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, SlotScope, useSlots } from "../slot.js";
+function SectionFields() {
+    return (_jsx(_Fragment, { children: useSlots().map((s) => (_jsx(Slot, { name: s.name }, s.name))) }));
+}
+function AccordionPage({ el }) {
+    const g = el;
+    const { t } = useTranslation();
+    const sections = g.view?.sections ?? [];
+    return (_jsx("div", { className: "flex min-w-0 flex-col gap-2", children: sections.map((section) => (_jsxs("details", { className: "rounded-lg border border-border", open: section.open, children: [_jsxs("summary", { className: "flex cursor-pointer items-center gap-1.5 px-3 py-2 font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", children: [section.icon && _jsx(Icon, { name: section.icon, size: 14, className: "shrink-0" }), t(section.label)] }), _jsx("div", { className: "space-y-3 px-3 pb-3", children: _jsx(SlotScope, { name: section.name, children: _jsx(SectionFields, {}) }) })] }, section.name))) }));
+}
+registerRenderer({ kinds: ['accordion'], layout: 'block', editor: 'custom', Page: AccordionPage });

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

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

package/dist/render/blocks/aside.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { registerRenderer } from "../../registry.js";
+import { Slot } from "../slot.js";
+registerRenderer({
+    kinds: ['aside'],
+    layout: 'block',
+    editor: 'custom',
+    Page: ({ el }) => {
+        const g = el;
+        const main = g.view?.main ?? [];
+        const side = g.view?.aside ?? [];
+        return (_jsxs("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-[minmax(0,1fr)_14rem]", children: [_jsx("div", { className: "min-w-0 space-y-3", children: main.map((n) => (_jsx(Slot, { name: n }, n))) }), _jsx("aside", { className: "min-w-0 space-y-2 text-sm text-muted sm:border-l sm:border-border sm:pl-4", children: side.map((n) => (_jsx(Slot, { name: n }, n))) })] }));
+    },
+});

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

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

package/dist/render/blocks/balance.js

@@ -0,0 +1,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";
+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) }))] }));
+    return (_jsx(BlockShell, { label: g.label, icon: g.icon, children: body }));
+}
+registerRenderer({ kinds: ['balance'], layout: 'block', editor: 'custom', Page: BalancePage });

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

@@ -0,0 +1 @@
+export declare const tileClass = "rounded-lg border border-border bg-surface p-3 min-w-0";

package/dist/render/blocks/bento.js

@@ -0,0 +1,24 @@
+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";
+export const tileClass = 'rounded-lg border border-border bg-surface p-3 min-w-0';
+const SPAN = {
+    '2x1': 'sm:col-span-2',
+    '1x2': 'sm:row-span-2',
+    '2x2': 'sm:col-span-2 sm:row-span-2',
+    wide: 'col-span-full',
+};
+function BentoPage({ el }) {
+    const g = el;
+    const spans = g.view?.spans ?? {};
+    const slots = useSlots();
+    const body = (_jsx("div", { className: "grid grid-cols-1 sm:grid-cols-3 auto-rows-auto gap-3", children: slots.map((s, i) => {
+            if (s.handle.hidden)
+                return null;
+            const span = spans[s.name];
+            return (_jsx("div", { className: `${tileClass} ${span ? (SPAN[span] ?? '') : ''}`, "data-testid": `bento-tile-${i}`, children: _jsx(Slot, { name: s.name }) }, s.name));
+        }) }));
+    return (_jsx(BlockShell, { label: g.label, icon: g.icon, children: body }));
+}
+registerRenderer({ kinds: ['bento'], layout: 'block', editor: 'custom', Page: BentoPage });

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

@@ -0,0 +1,15 @@
+import type { ReactElement, ReactNode } from 'react';
+import type { SlotHandle } from '../slot.tsx';
+import type { TFn } from '../../types.ts';
+export type NamedSlot = {
+    name: string;
+    handle: SlotHandle;
+};
+export declare function findSlot(slots: readonly NamedSlot[], name: string | undefined): NamedSlot | undefined;
+export declare function findSlots(slots: readonly NamedSlot[], names: readonly string[]): NamedSlot[];
+export declare function BlockShell({ label, icon, children, }: {
+    label?: string;
+    icon?: string;
+    children: ReactNode;
+}): ReactElement;
+export declare function fieldLabel(handle: SlotHandle, t: TFn): string | undefined;

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

@@ -0,0 +1,20 @@
+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";
+export function findSlot(slots, name) {
+    return name !== undefined ? slots.find((s) => s.name === name) : undefined;
+}
+export function findSlots(slots, names) {
+    return names.map((n) => findSlot(slots, n)).filter((s) => s !== undefined);
+}
+export function BlockShell({ label, icon, children, }) {
+    const { t } = useTranslation();
+    if (!label)
+        return _jsx(_Fragment, { children: children });
+    return (_jsx(SectionShell, { label: t(label), icon: icon, children: children }));
+}
+export function fieldLabel(handle, t) {
+    const key = handle.field.label ?? (isNamedField(handle.field) ? handle.field.type.label : undefined);
+    return key ? t(key) : undefined;
+}

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

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

package/dist/render/blocks/calendar.js

@@ -0,0 +1,142 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { ChevronLeft, ChevronRight, Trash2, Plus } from 'lucide-react';
+import { isNamedField, isStorageGroup } from '@coffer-org/sdk/fields';
+import { registerRenderer } from "../../registry.js";
+import { Popover, PopoverTrigger, PopoverContent, PopoverArrow } from "../../components/ui/popover.js";
+import { Button } from "../../components/ui/button.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 { GroupField } from "../widgets/group-field.js";
+import { useSlot } from "../slot.js";
+import { ChecklistContent } from "../widgets/checklist-content.js";
+import { useFieldErrors } from "../field-errors.js";
+import { partField } from "../use-collection-rows.js";
+function parseDay(v) {
+    const s = typeof v === 'string' ? v : typeof v === 'number' ? String(v) : '';
+    const m = /^(\d{4})-(\d{2})-(\d{2})/.exec(s);
+    if (!m)
+        return undefined;
+    return { year: Number(m[1]), month: Number(m[2]) - 1, day: Number(m[3]) };
+}
+function DayCell({ day, month, year, matchingRows, dateKey, dateFld, restFields, recordCtx, errorFor, onUpdateRow, onRemoveRow, onAddRow, rowTools, editing, }) {
+    const { t } = useTranslation();
+    const [open, setOpen] = useState(false);
+    if (day == null) {
+        return _jsx("div", { className: "aspect-square" });
+    }
+    const firstMatch = matchingRows[0];
+    const isMarked = firstMatch !== undefined;
+    const dateStr = `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
+    const fullDateLabel = new Date(year, month, day).toLocaleDateString(undefined, {
+        day: 'numeric',
+        month: 'long',
+        year: 'numeric',
+    });
+    const primaryError = matchingRows
+        .map(({ idx }) => errorFor(idx, dateKey) || restFields.map((f) => errorFor(idx, f.key)).find(Boolean))
+        .find(Boolean);
+    const cellButton = (_jsxs("button", { type: "button", role: "button", className: `relative flex aspect-square w-full items-center justify-center rounded-md text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring ${primaryError
+            ? 'border border-danger/60 bg-danger/10 text-danger font-semibold'
+            : isMarked
+                ? 'bg-accent/20 font-semibold text-accent hover:bg-accent/30 shadow-xs'
+                : 'text-text hover:bg-muted/20'}`, "data-testid": firstMatch ? `calendar-date-${firstMatch.idx}` : undefined, "aria-label": dateStr, children: [day, isMarked && (_jsx("span", { "data-testid": `calendar-marked-${day}`, className: `absolute bottom-1 h-1 w-1 rounded-full ${primaryError ? 'bg-danger' : 'bg-accent'}` })), primaryError && _jsx("span", { className: "sr-only text-danger", children: primaryError })] }));
+    if (!rowTools) {
+        return (_jsx("div", { "data-testid": firstMatch ? `calendar-entry-${firstMatch.idx}` : undefined, className: "w-full", children: cellButton }));
+    }
+    return (_jsx("div", { "data-testid": firstMatch ? `calendar-entry-${firstMatch.idx}` : undefined, className: "w-full", children: _jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: cellButton }), _jsxs(PopoverContent, { align: "center", className: "w-72 p-3 space-y-3 shadow-lg", sideOffset: 6, children: [_jsx(PopoverArrow, {}), _jsxs("div", { className: "flex items-center justify-between border-b border-border/60 pb-2", children: [_jsx("span", { className: "text-xs font-semibold text-text", children: fullDateLabel }), _jsx("span", { className: "text-[11px] font-mono text-muted", children: dateStr })] }), isMarked ? (_jsx("div", { className: "space-y-3", children: matchingRows.map(({ row, idx }) => {
+                                const err = errorFor(idx, dateKey);
+                                return (_jsxs("div", { className: "space-y-2 border-b border-border/40 pb-2 last:border-b-0 last:pb-0", children: [err && _jsx("div", { className: "text-xs text-danger font-medium", children: err }), restFields.length > 0 && (_jsxs("div", { className: "space-y-1", children: [_jsx(ChecklistContent, { fields: restFields, row: row, editing: editing, onChange: (key, v) => onUpdateRow(idx, key, v), recordCtx: recordCtx, error: (key) => errorFor(idx, key) }), restFields.map((f) => {
+                                                    const fieldErr = errorFor(idx, f.key);
+                                                    return fieldErr ? (_jsx("div", { className: "text-xs text-danger font-medium", children: fieldErr }, f.key)) : null;
+                                                })] })), _jsx("div", { className: "flex items-center justify-between pt-1", children: _jsxs("button", { type: "button", "aria-label": "remove", onClick: () => {
+                                                    onRemoveRow(idx);
+                                                    setOpen(false);
+                                                }, className: "inline-flex items-center gap-1 text-xs text-danger hover:text-danger/80 transition-colors", children: [_jsx(Trash2, { size: 12 }), " ", t('actions.delete', 'Delete')] }) })] }, idx));
+                            }) })) : (_jsx("div", { className: "space-y-2 pt-1", children: _jsxs(Button, { size: "sm", className: "w-full h-8 text-xs flex items-center justify-center gap-1.5", onClick: () => {
+                                    onAddRow(dateStr);
+                                    setOpen(false);
+                                }, children: [_jsx(Plus, { size: 13 }), " ", t('actions.add', 'Add')] }) }))] })] }) }));
+}
+function MonthGrid({ rows, dateKey, dateFld, restFields, recordCtx, errorFor, onUpdateRow, onRemoveRow, onAddRow, rowTools, editing, }) {
+    const [viewDate, setViewDate] = useState(() => {
+        for (const r of rows) {
+            const d = parseDay(r[dateKey]);
+            if (d)
+                return new Date(d.year, d.month, 1);
+        }
+        return new Date();
+    });
+    const month = viewDate.getMonth();
+    const year = viewDate.getFullYear();
+    const prevMonth = () => setViewDate(new Date(year, month - 1, 1));
+    const nextMonth = () => setViewDate(new Date(year, month + 1, 1));
+    const first = new Date(year, month, 1);
+    const daysInMonth = new Date(year, month + 1, 0).getDate();
+    const lead = first.getDay();
+    const cells = [
+        ...Array.from({ length: lead }, () => null),
+        ...Array.from({ length: daysInMonth }, (_, i) => i + 1),
+    ];
+    while (cells.length % 7 !== 0)
+        cells.push(null);
+    const weekdays = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
+    const monthName = new Date(year, month, 1).toLocaleDateString(undefined, { month: 'long', year: 'numeric' });
+    const rowsByDay = new Map();
+    const unassignedRows = [];
+    rows.forEach((row, idx) => {
+        const d = parseDay(row[dateKey]);
+        if (d && d.year === year && d.month === month) {
+            const list = rowsByDay.get(d.day) ?? [];
+            list.push({ row, idx });
+            rowsByDay.set(d.day, list);
+        }
+        else if (!d) {
+            unassignedRows.push({ row, idx });
+        }
+    });
+    return (_jsxs("div", { className: "w-full max-w-[280px] rounded-lg border border-border bg-surface p-3", "data-testid": "calendar-grid", children: [_jsxs("div", { className: "mb-2 flex items-center justify-between", children: [_jsx("span", { className: "text-xs font-semibold text-text capitalize", children: monthName }), _jsxs("div", { className: "flex items-center gap-0.5", children: [_jsx("button", { type: "button", onClick: prevMonth, "aria-label": "Previous month", className: "rounded p-1 text-muted hover:bg-muted/20 hover:text-text transition-colors", children: _jsx(ChevronLeft, { size: 13 }) }), _jsx("button", { type: "button", onClick: nextMonth, "aria-label": "Next month", className: "rounded p-1 text-muted hover:bg-muted/20 hover:text-text transition-colors", children: _jsx(ChevronRight, { size: 13 }) })] })] }), _jsx("div", { className: "mb-1 grid grid-cols-7 gap-1 text-center text-[10px] font-medium text-muted", children: weekdays.map((wd, i) => (_jsx("div", { className: "py-0.5", children: wd }, i))) }), _jsx("div", { className: "grid grid-cols-7 gap-1", children: cells.map((day, i) => (_jsx(DayCell, { day: day, month: month, year: year, matchingRows: day != null ? (rowsByDay.get(day) ?? []) : [], dateKey: dateKey, dateFld: dateFld, restFields: restFields, recordCtx: recordCtx, errorFor: errorFor, onUpdateRow: onUpdateRow, onRemoveRow: onRemoveRow, onAddRow: onAddRow, rowTools: rowTools, editing: editing }, i))) }), unassignedRows.length > 0 && (_jsx("div", { className: "mt-3 space-y-1.5 border-t border-border pt-2", children: unassignedRows.map(({ idx }) => {
+                    const err = errorFor(idx, dateKey);
+                    return (_jsxs("div", { "data-testid": `calendar-entry-${idx}`, className: "flex items-center justify-between text-xs", children: [_jsx("div", { "data-testid": `calendar-date-${idx}`, className: "text-danger font-medium", children: err || 'Required' }), rowTools && _jsx(RemoveBtn, { onClick: () => onRemoveRow(idx) })] }, idx));
+                }) }))] }));
+}
+function CalendarPage({ 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 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';
+    const live = useHybridScope() && mode === 'view';
+    const rowTools = editing || live;
+    if (!dateFld || !dateKey) {
+        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)
+        .map((f) => ({ key: f.key, type: f.type }));
+    const errorFor = (idx, key) => isStorageGroup(group) ? errorAt([group.key, idx, key]) : undefined;
+    const updateRow = (idx, key, v) => {
+        const source = rows[idx];
+        const next = { ...source, [key]: v };
+        g.onChange(rows.map((r, i) => (i === idx ? next : r)));
+    };
+    const removeRow = (idx) => {
+        g.onChange(rows.filter((_, i) => i !== idx));
+    };
+    const addRow = (dateStr) => {
+        g.onChange([...rows, { [dateKey]: dateStr }]);
+    };
+    const content = (_jsx(MonthGrid, { rows: rows, dateKey: dateKey, dateFld: dateFld, restFields: restFields, recordCtx: recordCtx, errorFor: errorFor, onUpdateRow: updateRow, onRemoveRow: removeRow, onAddRow: addRow, rowTools: rowTools, editing: editing }));
+    if (mode !== 'view')
+        return content;
+    return (_jsxs("section", { className: `${groupScopeClass(depth)} flex flex-col gap-1 min-w-0`, "data-testid": "calendar", 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: ['calendar'], layout: 'block', Page: CalendarPage, editor: 'custom' });

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

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

package/dist/render/blocks/callout.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 TONE = {
+    note: 'border-l-4 border-accent bg-accent/5',
+    warn: 'border-l-4 border-warning bg-warning/10 font-medium',
+    danger: 'border-l-[6px] border-danger bg-danger/10 font-semibold',
+};
+function CalloutPage({ el }) {
+    const g = el;
+    const tone = g.view?.tone ?? 'note';
+    const slots = useSlots();
+    const body = (_jsx("div", { className: `space-y-2 rounded-lg px-4 py-3 ${TONE[tone] ?? TONE.note}`, "data-testid": "callout", "data-tone": tone, children: slots.map((s, i) => {
+            if (s.handle.hidden)
+                return null;
+            return (_jsx("div", { className: "min-w-0", "data-testid": `callout-item-${i}`, children: _jsx(Slot, { name: s.name }) }, s.name));
+        }) }));
+    return (_jsx(BlockShell, { label: g.label, icon: g.icon, children: body }));
+}
+registerRenderer({ kinds: ['callout'], layout: 'block', editor: 'custom', Page: CalloutPage });

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

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

package/dist/render/blocks/chart.js

@@ -0,0 +1,46 @@
+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 { FieldSlot } from "../dispatch.js";
+import { useSlot } from "../slot.js";
+import { toSeries, sparkline, seriesDelta } from "./series.js";
+import { partField } from "../use-collection-rows.js";
+const BOX = { width: 100, height: 28, pad: 2 };
+function fmtDelta(n) {
+    const rounded = Math.round(n * 100) / 100;
+    return `${rounded > 0 ? '+' : ''}${rounded}`;
+}
+function ChartPage({ el, value, recordCtx, mode }) {
+    const { t } = useTranslation();
+    const depth = useGroupDepth();
+    const { write } = useSlot();
+    const group = el;
+    const valueKey = group.view?.['value'];
+    const dateKey = group.view?.['date'];
+    const showDelta = Boolean(group.view?.['delta']);
+    const valueFld = partField(group, valueKey);
+    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 (!valueKey || !dateKey || !valueFld || !dateFld) {
+        return (_jsx(GroupField, { group: { ...group, kind: undefined }, value: value, onChange: (v) => void write(v), recordCtx: recordCtx, mode: mode }));
+    }
+    const points = toSeries(rows, valueKey, dateKey);
+    const spark = sparkline(points, BOX);
+    const last = points[points.length - 1];
+    const delta = showDelta ? seriesDelta(points) : undefined;
+    const editor = (_jsx(GroupField, { group: { ...group, kind: undefined }, value: g.value, onChange: (v) => g.onChange(v), recordCtx: recordCtx, mode: "edit" }));
+    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 content = editing ? editor : chart;
+    if (mode !== 'view')
+        return content;
+    return (_jsxs("section", { className: `${groupScopeClass(depth)} flex flex-col gap-1 min-w-0`, "data-testid": "chart", 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: ['chart'], layout: 'block', Page: ChartPage, editor: 'custom' });

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

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

package/dist/render/blocks/compare.js

@@ -0,0 +1,16 @@
+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";
+function ComparePage({ el }) {
+    const g = el;
+    const { t } = useTranslation();
+    const left = g.view?.left ?? [];
+    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)))] })] }));
+    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.d.ts

@@ -0,0 +1 @@
+export declare function countdownDays(value: unknown, today: string): number | null;

package/dist/render/blocks/countdown.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowUp, ArrowDown, Minus } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { registerRenderer } from "../../registry.js";
+import { Slot } from "../slot.js";
+import { BlockShell } from "./block-shell.js";
+const MS_PER_DAY = 86_400_000;
+export function countdownDays(value, today) {
+    const s = typeof value === 'string' ? value.slice(0, 10) : '';
+    if (!/^\d{4}-\d{2}-\d{2}$/.test(s))
+        return null;
+    const t = Date.parse(s);
+    const t0 = Date.parse(today);
+    if (Number.isNaN(t) || Number.isNaN(t0))
+        return null;
+    return Math.round((t - t0) / MS_PER_DAY);
+}
+function todayISO() {
+    return new Date().toISOString().slice(0, 10);
+}
+function CountdownPage({ 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": "countdown", children: [_jsx(Slot, { name: sourceName, render: (handle, defaultDisplay) => {
+                    const days = countdownDays(handle.value, todayISO());
+                    if (days === null)
+                        return defaultDisplay;
+                    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) }))] }));
+    return (_jsx(BlockShell, { label: g.label, icon: g.icon, children: body }));
+}
+registerRenderer({ kinds: ['countdown'], layout: 'block', editor: 'custom', Page: CountdownPage });

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

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

package/dist/render/blocks/deck.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Link } from 'react-router-dom';
+import { getShelf } from "../../schema-registry.js";
+import { RecordInline } from "../../components/RecordInline.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 DeckCards({ 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 (_jsx("div", { className: "overflow-x-auto", "data-testid": "deck", children: _jsx("div", { className: "flex gap-3 pb-1", children: ids.map((id) => {
+                const row = recordMap.get(id);
+                return (_jsx("div", { className: "flex w-40 shrink-0 flex-col gap-2 rounded-lg border border-border p-3", "data-testid": "deck-card", children: _jsx(Link, { to: `/${library}/${shelf}/${id}`, className: "min-w-0 hover:text-accent", children: m && row ? _jsx(RecordInline, { shelf: m, row: row }) : shortId(id) }) }, id));
+            }) }) }));
+}
+function DeckPage({ 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(DeckCards, { field: handle.field.type, value: handle.value }) }) }));
+}
+registerRenderer({ kinds: ['deck'], layout: 'block', editor: 'custom', Page: DeckPage });

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

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

package/dist/render/blocks/epigraph.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 EpigraphPage({ el }) {
+    const g = el;
+    const sourceName = g.view?.source;
+    const attributionName = g.view?.attribution;
+    const slots = useSlots();
+    const attribution = findSlot(slots, attributionName);
+    return (_jsxs("blockquote", { className: "border-l-2 border-accent pl-4", "data-testid": "epigraph", children: [_jsx("div", { className: "min-w-0 text-lg leading-snug italic", "data-testid": "epigraph-source", children: _jsx(Slot, { name: sourceName }) }), attribution && !attribution.handle.hidden && (_jsx("div", { className: "mt-2 min-w-0 text-sm text-muted before:mr-1 before:content-['\u2014']", "data-testid": "epigraph-attribution", children: _jsx(Slot, { name: attributionName }) }))] }));
+}
+registerRenderer({ kinds: ['epigraph'], layout: 'block', editor: 'custom', Page: EpigraphPage });

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

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