@coffer-org/web-ui 4.0.0

package/dist/render/widgets/group.js

@@ -0,0 +1,139 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { hasChildren, isNamedField, isStorageGroup } from '@coffer-org/sdk/fields';
+import { Trash2 } from 'lucide-react';
+import { AddBtn, usedElsewhere } from "../shared.js";
+import { RemoveBtn } from "../multiple-chips.js";
+import { FieldLabel, Rail, STACK, GroupTitle, groupIcon, useGroupDepth, GroupDepthProvider, groupScopeClass, } from "../chrome.js";
+import { Button } from "../../components/ui/button.js";
+import { FieldSlot } from "../dispatch.js";
+import { useFieldErrors } from "../field-errors.js";
+import { GroupField } from "./group-field.js";
+import { useGroupEdit } from "./group-edit.js";
+import { useHybridScope } from "../hybrid-scope.js";
+import { FlowRow } from "./flow-row.js";
+import { fieldLayout } from "../../registry.js";
+export const subFull = (f) => fieldLayout(f) === 'block';
+function RowActionSlot({ onRemove }) {
+    const { t } = useTranslation();
+    return (_jsxs("div", { className: "flex shrink-0 flex-col", children: [_jsx("div", { className: "min-h-8 mb-1.5", "aria-hidden": true }), _jsx(Button, { type: "button", variant: "outline", size: "iconSm", onClick: onRemove, title: t('actions.delete'), "aria-hidden": onRemove ? undefined : true, tabIndex: onRemove ? undefined : -1, className: `rounded-lg text-muted hover:border-danger hover:text-danger${onRemove ? '' : ' invisible'}`, children: _jsx(Trash2, { size: 14 }) })] }));
+}
+export function CollectionWidget({ group, value, onChange, recordCtx, }) {
+    const { t } = useTranslation();
+    const errorAt = useFieldErrors();
+    const rows = Array.isArray(value) ? value : [];
+    const unique = group.unique ?? [];
+    function update(idx, key, v) {
+        onChange(rows.map((r, i) => (i === idx ? { ...r, [key]: v } : r)));
+    }
+    function renderSubField(sub, row, idx) {
+        if (sub.type.derived) {
+            return (_jsxs("div", { className: "flex flex-col gap-0.5 min-w-0", children: [sub.type.label ? _jsx(FieldLabel, { label: t(sub.type.label) }) : null, _jsx(FieldSlot, { field: sub.type, value: row[sub.key] ?? '', mode: "view", bare: true, recordCtx: recordCtx })] }, sub.key));
+        }
+        return (_jsx("div", { className: "flex flex-col gap-0.5 min-w-0", children: _jsx(FieldSlot, { field: sub.type, fieldKey: sub.key, value: row[sub.key] ?? '', excludeValues: usedElsewhere(rows, unique, sub.key, idx), onChange: (v) => update(idx, sub.key, v), label: sub.type.label ? t(sub.type.label) : undefined, mode: "edit", recordCtx: recordCtx, error: isStorageGroup(group) ? errorAt([group.key, idx, sub.key]) : undefined }) }, sub.key));
+    }
+    function renderRow(row, idx) {
+        return (_jsx(Rail, { children: _jsxs("div", { className: "flex items-start gap-2", children: [_jsx("div", { className: "flex-1 min-w-0", children: _jsx(FlowRow, { scroll: group.display === 'scroll', items: group.fields.flatMap((sub, sIdx) => {
+                                if (hasChildren(sub)) {
+                                    if (!isStorageGroup(sub) && sub.display === 'scroll') {
+                                        return [
+                                            {
+                                                key: sub.label ?? 'flow',
+                                                full: true,
+                                                node: (_jsx(FlowRow, { scroll: true, items: sub.fields.flatMap((c) => isNamedField(c) ? [{ key: c.key, node: renderSubField(c, row, idx) }] : []) })),
+                                            },
+                                        ];
+                                    }
+                                    return [
+                                        {
+                                            key: sub.key ?? sub.label ?? 'g',
+                                            full: sub.kind === 'per-weekday' ? false : true,
+                                            node: (_jsx(GroupField, { group: sub, value: row[sub.key], onChange: (v) => update(idx, sub.key, v), recordCtx: recordCtx, mode: "edit" })),
+                                        },
+                                    ];
+                                }
+                                if (!isNamedField(sub))
+                                    return [];
+                                return [{ key: sub.key, full: subFull(sub.type), node: renderSubField(sub, row, idx) }];
+                            }) }) }), _jsx(RowActionSlot, { onRemove: () => onChange(rows.filter((_, i) => i !== idx)) })] }) }, idx));
+    }
+    return (_jsxs("div", { className: `flex flex-col ${STACK}`, children: [rows.map(renderRow), _jsx(AddBtn, { onClick: () => onChange([...rows, {}]), children: t('form.addRow') })] }));
+}
+export function CollectionGroup({ group, value, onChange, recordCtx, mode, }) {
+    const { t } = useTranslation();
+    const depth = useGroupDepth();
+    const live = useHybridScope() && mode === 'view';
+    const g = useGroupEdit(mode, value, (v) => onChange(v));
+    if (g.mode === 'view') {
+        return (_jsx(CollectionView, { group: group, value: g.value, onChange: (v) => g.onChange(v), recordCtx: recordCtx, actions: live ? null : g.actions, editable: live }));
+    }
+    return (_jsxs("fieldset", { className: `${groupScopeClass(depth)} flex flex-col min-w-0 ${STACK}`, children: [_jsx(GroupTitle, { as: "legend", label: t(group.label), icon: groupIcon(group), actions: g.actions }), _jsx(CollectionWidget, { group: group, value: g.value, onChange: (v) => g.onChange(v), recordCtx: recordCtx })] }));
+}
+const fieldsetCls = (depth) => `${groupScopeClass(depth)} flex flex-col min-w-0 ${STACK}`;
+function CollectionCell({ sub, row, group, recordCtx, onChange, }) {
+    const { t } = useTranslation();
+    const live = useHybridScope() && Boolean(onChange);
+    const wired = live ? onChange : undefined;
+    return (_jsxs("div", { className: "flex flex-col gap-0.5 min-w-0", children: [sub.type.label ? _jsx(FieldLabel, { label: t(sub.type.label) }) : null, _jsx(FieldSlot, { field: sub.type, fieldKey: live ? sub.key : undefined, value: row[sub.key] ?? '', mode: "view", bare: !live, recordCtx: recordCtx, onChange: wired })] }));
+}
+export function CollectionView({ group, value, onChange, recordCtx, actions, editable = false, }) {
+    const { t } = useTranslation();
+    const depth = useGroupDepth();
+    const saved = Array.isArray(value) ? value : [];
+    const [pending, setPending] = useState([]);
+    const rows = [...saved, ...pending];
+    const filled = (r) => Object.values(r).some((v) => v !== '' && v != null && v !== false);
+    function persistCell(idx, key, v) {
+        const next = rows.map((r, i) => (i === idx ? { ...r, [key]: v } : r)).filter(filled);
+        setPending([]);
+        onChange(next);
+    }
+    function removeRow(idx) {
+        if (idx < saved.length) {
+            setPending([]);
+            onChange(saved.filter((_, i) => i !== idx));
+            return;
+        }
+        setPending((ps) => ps.filter((_, i) => i !== idx - saved.length));
+    }
+    return (_jsxs("fieldset", { className: fieldsetCls(depth), children: [_jsx(GroupTitle, { as: "legend", label: t(group.label), icon: groupIcon(group), actions: actions }), _jsx(GroupDepthProvider, { depth: depth + 1, children: _jsxs("div", { className: `flex flex-col ${STACK}`, children: [rows.map((row, idx) => (_jsx(Rail, { children: _jsxs("div", { className: "flex min-w-0 items-start gap-2", children: [_jsx("div", { className: "min-w-0 flex-1", children: _jsx(FlowRow, { scroll: group.display === 'scroll', items: group.fields.flatMap((sub, sIdx) => {
+                                                if (hasChildren(sub)) {
+                                                    if (!isStorageGroup(sub) && sub.display === 'scroll') {
+                                                        return [
+                                                            {
+                                                                key: sub.label ?? 'flow',
+                                                                full: true,
+                                                                node: (_jsx(FlowRow, { scroll: true, items: sub.fields.flatMap((c) => {
+                                                                        if (!isNamedField(c))
+                                                                            return [];
+                                                                        const cKey = c.key;
+                                                                        return [
+                                                                            {
+                                                                                key: cKey,
+                                                                                node: (_jsx(CollectionCell, { sub: c, row: row, group: group, recordCtx: recordCtx, onChange: (v) => persistCell(idx, cKey, v) })),
+                                                                            },
+                                                                        ];
+                                                                    }) })),
+                                                            },
+                                                        ];
+                                                    }
+                                                    return [
+                                                        {
+                                                            key: sub.key ?? sub.label ?? 'g',
+                                                            full: sub.kind === 'per-weekday' ? false : true,
+                                                            node: (_jsx(GroupField, { group: sub, value: row[sub.key], onChange: (v) => persistCell(idx, sub.key, v), recordCtx: recordCtx, mode: "view" })),
+                                                        },
+                                                    ];
+                                                }
+                                                if (!isNamedField(sub))
+                                                    return [];
+                                                return [
+                                                    {
+                                                        key: sub.key,
+                                                        full: subFull(sub.type),
+                                                        node: (_jsx(CollectionCell, { sub: sub, row: row, group: group, recordCtx: recordCtx, onChange: (v) => persistCell(idx, sub.key, v) })),
+                                                    },
+                                                ];
+                                            }) }) }), editable && _jsx(RemoveBtn, { className: "mt-6", onClick: () => removeRow(idx) })] }) }, idx))), editable && _jsx(AddBtn, { onClick: () => setPending((ps) => [...ps, {}]), children: t('form.addRow') })] }) })] }));
+}

package/dist/render/widgets/illustrated-group.d.ts

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

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

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { registerRenderer } from "../../registry.js";
+import { Textarea } from "../../components/ui/textarea.js";
+import { Dash, compositeRoleValue } from "../shared.js";
+import { twoCellGroupPage } from "./two-cell-group.js";
+import { ImageWidget, parseFileRecs } from "../image.js";
+import { IllustratedBody, IllustratedFloat, illustratedSlots, illustratedLayout, illustratedImageKind, IllustratedPicture, IllustratedImageCell, IllustratedTextCell, } from "../core/illustrated.js";
+function IllustratedRowEdit({ meta, row, onChange }) {
+    const { tKey, iKey } = illustratedSlots(meta);
+    const { width } = illustratedLayout(meta);
+    const kind = illustratedImageKind(meta);
+    const text = row[tKey];
+    const image = row[iKey];
+    const textPart = meta.parts?.find((p) => p.role === 'text');
+    const textFixed = textPart != null && textPart.mode !== 'stored';
+    const imagePart = meta.parts?.find((p) => p.role === 'image');
+    const imageFixed = imagePart != null && imagePart.mode !== 'stored';
+    const rec = image != null && image !== '' ? parseFileRecs(image)[0] : undefined;
+    return (_jsxs("div", { className: "flex flex-1 flex-col gap-3 min-w-0", children: [imageFixed ? (_jsx("div", { className: "text-sm text-muted", children: rec ? _jsx(IllustratedPicture, { name: rec.name, width: width, kind: kind }) : _jsx(Dash, {}) })) : (_jsx(ImageWidget, { value: image ?? '', onChange: (v) => onChange({ ...row, [iKey]: compositeRoleValue(v) }), width: width, poster: kind === 'poster' })), textFixed ? (_jsx("p", { className: "text-[15px] text-muted whitespace-pre-wrap", children: text != null && text !== '' ? String(text) : _jsx(Dash, {}) })) : (_jsx(Textarea, { value: text == null ? '' : String(text), onChange: (e) => onChange({ ...row, [tKey]: compositeRoleValue(e.target.value) }) }))] }));
+}
+function IllustratedRowLive({ meta, row, onChange }) {
+    const { tKey, iKey } = illustratedSlots(meta);
+    const { width, side } = illustratedLayout(meta);
+    const kind = illustratedImageKind(meta);
+    const text = row[tKey];
+    const image = row[iKey];
+    const textPart = meta.parts?.find((p) => p.role === 'text');
+    const textFixed = textPart != null && textPart.mode !== 'stored';
+    const imagePart = meta.parts?.find((p) => p.role === 'image');
+    const imageFixed = imagePart != null && imagePart.mode !== 'stored';
+    return (_jsx("div", { className: "flex-1 min-w-0", children: _jsx(IllustratedFloat, { width: width, side: side, picture: _jsx(IllustratedImageCell, { image: image, fixed: imageFixed, width: width, kind: kind, onChange: imageFixed ? undefined : (v) => onChange({ ...row, [iKey]: compositeRoleValue(v) }) }), prose: _jsx(IllustratedTextCell, { text: text, fixed: textFixed, meta: textPart?.meta ?? meta, onChange: textFixed ? undefined : (v) => onChange({ ...row, [tKey]: compositeRoleValue(v) }) }) }) }));
+}
+const IllustratedGroupPage = twoCellGroupPage({
+    kind: 'illustrated',
+    testid: 'illustrated-list',
+    rowGap: 'gap-4',
+    RowEdit: IllustratedRowEdit,
+    RowLive: IllustratedRowLive,
+    Body: IllustratedBody,
+});
+registerRenderer({ kinds: ['illustratedList'], layout: 'block', Page: IllustratedGroupPage, editor: 'custom' });

package/dist/render/widgets/table-group.d.ts

@@ -0,0 +1,11 @@
+import type { ContainerNode } from '@coffer-org/sdk/fields';
+import type { RecordCtx, FieldMode } from '../../types.ts';
+type Row = Record<string, unknown>;
+export declare function TableGroup({ group, value, onChange, recordCtx, mode, }: {
+    group: ContainerNode;
+    value: unknown;
+    onChange: (v: Row[]) => void;
+    recordCtx: RecordCtx;
+    mode: FieldMode;
+}): import("react").JSX.Element;
+export {};

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

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Trash2 } from 'lucide-react';
+import { hasValue, hasChildren, isNamedField, isStorageGroup } from '@coffer-org/sdk/fields';
+import { FieldSlot } from "../dispatch.js";
+import { useFieldErrors } from "../field-errors.js";
+import { AddBtn, usedElsewhere } from "../shared.js";
+import { GroupTitle, groupIcon, useGroupDepth, GroupDepthProvider, groupScopeClass } from "../chrome.js";
+import { Button } from "../../components/ui/button.js";
+import { useGroupEdit } from "./group-edit.js";
+import { useHybridScope } from "../hybrid-scope.js";
+export function TableGroup({ group, value, onChange, recordCtx, mode, }) {
+    const { t } = useTranslation();
+    const errorAt = useFieldErrors();
+    const depth = useGroupDepth();
+    const subs = group.fields.filter((f) => isNamedField(f) || (hasChildren(f) && !!f.kind));
+    const colKey = (s) => s.key;
+    const colLabel = (s) => (hasValue(s) ? s.type.label : s.label);
+    const colSlot = (s) => hasValue(s) ? { field: s.type } : { field: s, el: s };
+    const growColIdx = (() => {
+        const textIdx = subs.findIndex((s) => hasValue(s) && s.type.prim === 'text');
+        if (textIdx !== -1)
+            return textIdx;
+        const stringIdx = subs.findIndex((s) => hasValue(s) &&
+            (s.type.prim === 'string' || s.type.kind === 'link' || s.type.kind === 'url' || s.type.kind === 'relation'));
+        if (stringIdx !== -1)
+            return stringIdx;
+        return 0;
+    })();
+    const isGrowCol = (_s, i) => i === growColIdx;
+    const unique = group.unique ?? [];
+    const g = useGroupEdit(mode, value, (v) => onChange(v));
+    const isEdit = g.mode !== 'view';
+    const live = useHybridScope() && mode === 'view';
+    const saved = Array.isArray(g.value) ? g.value : [];
+    const [pending, setPending] = useState([]);
+    const rows = live ? [...saved, ...pending] : saved;
+    const filled = (r) => Object.values(r).some((v) => v !== '' && v != null && v !== false);
+    const setRows = (next) => {
+        setPending([]);
+        g.onChange(live ? next.filter(filled) : next);
+    };
+    const update = (idx, key, v) => setRows(rows.map((r, i) => (i === idx ? { ...r, [key]: v } : r)));
+    const removeRow = (idx) => {
+        if (!live || idx < saved.length)
+            return setRows(rows.filter((_, i) => i !== idx));
+        setPending((ps) => ps.filter((_, i) => i !== idx - saved.length));
+    };
+    const addRow = () => (live ? setPending((ps) => [...ps, {}]) : setRows([...rows, {}]));
+    const rowTools = isEdit || live;
+    const header = (_jsx("thead", { children: _jsxs("tr", { className: "border-b border-border/60 bg-muted/15", children: [subs.map((s, i) => (_jsx("th", { className: `text-left text-[11px] font-semibold text-muted uppercase tracking-wider px-3.5 py-2.5 ${isGrowCol(s, i) ? 'w-full min-w-[140px]' : 'whitespace-nowrap min-w-[90px]'}`, children: colLabel(s) ? t(colLabel(s)) : '' }, colKey(s)))), rowTools && _jsx("th", { className: "w-10 px-2", "aria-hidden": true })] }) }));
+    const body = (_jsx("tbody", { className: "divide-y divide-border/30", children: rows.map((row, idx) => (_jsxs("tr", { className: "align-top hover:bg-muted/10 transition-colors", children: [subs.map((s, i) => (_jsx("td", { className: `px-3.5 py-2.5 min-h-10 ${isGrowCol(s, i) ? 'min-w-[140px]' : 'min-w-[90px]'}`, children: _jsx(FieldSlot, { ...colSlot(s), value: row[colKey(s)] ?? (hasValue(s) ? '' : null), excludeValues: usedElsewhere(rows, unique, colKey(s), idx), onChange: (v) => update(idx, colKey(s), v), fieldKey: live ? colKey(s) : undefined, mode: isEdit ? 'edit' : 'view', bare: !live, recordCtx: recordCtx, error: isStorageGroup(group) ? errorAt([group.key, idx, colKey(s)]) : undefined }) }, colKey(s)))), rowTools && (_jsx("td", { className: "px-2 py-2 min-h-10 w-10", children: _jsx(Button, { type: "button", variant: "outline", size: "iconSm", onClick: () => removeRow(idx), title: t('actions.delete'), className: "rounded-lg text-muted hover:border-danger hover:text-danger", children: _jsx(Trash2, { size: 14 }) }) }))] }, idx))) }));
+    const tableEl = (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("div", { className: "overflow-x-auto rounded-lg border border-border/60 bg-card/20 shadow-2xs", children: _jsxs("table", { className: "w-full border-collapse text-sm", children: [header, body] }) }), rowTools && _jsx(AddBtn, { onClick: addRow, children: t('form.addRow') })] }));
+    if (mode !== 'view')
+        return tableEl;
+    return (_jsxs("section", { className: `${groupScopeClass(depth)} flex flex-col gap-2 min-w-0`, children: [_jsx(GroupTitle, { as: "h3", label: t(group.label), icon: groupIcon(group), actions: live ? null : g.actions }), _jsx(GroupDepthProvider, { depth: depth + 1, children: tableEl })] }));
+}

package/dist/render/widgets/two-cell-group.d.ts

@@ -0,0 +1,21 @@
+import type { FC } from 'react';
+import type { FieldMeta } from '@coffer-org/sdk/fields';
+import type { ElementRenderProps } from '../../types.ts';
+export type Row = Record<string, unknown>;
+export interface TwoCellRowProps {
+    meta: FieldMeta;
+    row: Row;
+    onChange: (row: Row) => void;
+}
+export interface TwoCellGroupSpec {
+    kind: string;
+    testid: string;
+    rowGap: string;
+    RowEdit: FC<TwoCellRowProps>;
+    RowLive: FC<TwoCellRowProps>;
+    Body: FC<{
+        field: FieldMeta;
+        value: unknown;
+    }>;
+}
+export declare function twoCellGroupPage(spec: TwoCellGroupSpec): FC<ElementRenderProps>;

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

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation } from 'react-i18next';
+import { Trash2 } from 'lucide-react';
+import { Button } from "../../components/ui/button.js";
+import { AddBtn, useRowIdentity } from "../shared.js";
+import { useGroupDepth, GroupDepthProvider, groupScopeClass } from "../chrome.js";
+import { useGroupEdit } from "./group-edit.js";
+import { useHybridScope } from "../hybrid-scope.js";
+import { useSlot } from "../slot.js";
+function compositeRowMeta(group, kind) {
+    const parts = group.fields.map((f) => {
+        const item = f;
+        return {
+            role: item.key,
+            key: item.key,
+            meta: item.type,
+            mode: item.type.derived ? 'computedStored' : 'stored',
+            overridden: false,
+        };
+    });
+    return { kind, label: '', required: false, prim: kind, column: 'text', hints: {}, parts };
+}
+export function twoCellGroupPage(spec) {
+    const { RowEdit, RowLive, Body } = spec;
+    return function TwoCellGroupPage({ el, value, mode }) {
+        const { t } = useTranslation();
+        const depth = useGroupDepth();
+        const { write } = useSlot();
+        const group = el;
+        const meta = compositeRowMeta(group, spec.kind);
+        const g = useGroupEdit(mode, value, write);
+        const rows = Array.isArray(g.value) ? g.value : [];
+        const controlled = g.mode !== 'view';
+        const live = useHybridScope() && mode === 'view';
+        const rowTools = controlled || live;
+        const { rowId, updateRow, removeRow } = useRowIdentity(rows, g.onChange);
+        const content = (_jsxs("div", { className: `flex min-w-0 flex-col ${spec.rowGap}`, "data-testid": spec.testid, children: [rows.map((row, idx) => (_jsxs("div", { className: "flex items-start gap-2", children: [controlled ? (_jsx(RowEdit, { meta: meta, row: row, onChange: (next) => updateRow(idx, next) })) : live ? (_jsx(RowLive, { meta: meta, row: row, onChange: (next) => updateRow(idx, next) })) : (_jsx("div", { className: "min-w-0 flex-1", children: _jsx(Body, { field: meta, value: row }) })), rowTools && (_jsx(Button, { type: "button", variant: "ghost", size: "iconSm", onClick: () => removeRow(idx), title: t('actions.delete'), className: "h-5 w-5 shrink-0 rounded text-muted hover:text-danger", children: _jsx(Trash2, { size: 12 }) }))] }, rowId(row)))), rowTools && _jsx(AddBtn, { onClick: () => g.onChange([...rows, {}]), children: t('form.addRow') })] }));
+        if (mode !== 'view')
+            return content;
+        return (_jsxs("section", { className: `${groupScopeClass(depth)} flex min-w-0 flex-col gap-1`, children: [_jsx("div", { className: "flex items-center gap-2", children: _jsx("h3", { className: "text-[13px] font-semibold text-accent", children: t(group.label) }) }), _jsx(GroupDepthProvider, { depth: depth + 1, children: content })] }));
+    };
+}

package/dist/render/widgets/url-widget.d.ts

@@ -0,0 +1,7 @@
+import { type UrlValue } from '@coffer-org/sdk/fields';
+import type { FieldMode } from '../../types.ts';
+export declare function UrlWidget({ value, onChange, mode, }: {
+    value: unknown;
+    onChange: (v: UrlValue | null) => void;
+    mode: FieldMode;
+}): import("react").JSX.Element;

package/dist/render/widgets/url-widget.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ExternalLink } from 'lucide-react';
+import { parseUrl, buildUrl, hrefOf } from '@coffer-org/sdk/fields';
+import { Input } from "../../components/ui/input.js";
+import { Dash } from "../shared.js";
+export function UrlWidget({ value, onChange, mode, }) {
+    const v = (value ?? null);
+    if (mode === 'view') {
+        const text = buildUrl(v);
+        if (!text)
+            return _jsx(Dash, {});
+        return (_jsxs("a", { href: hrefOf(v), target: "_blank", rel: "noopener noreferrer", className: "inline-flex items-center gap-1 text-accent hover:underline text-sm break-all", children: [text, " ", _jsx(ExternalLink, { size: 12 })] }));
+    }
+    return _jsx(Input, { type: "text", inputMode: "url", value: buildUrl(v), onChange: (e) => onChange(parseUrl(e.target.value)) });
+}

package/dist/render/widgets/weekday-grid.d.ts

@@ -0,0 +1,13 @@
+import type { ContainerNode } from '@coffer-org/sdk/fields';
+import type { FieldMode } from '../../types.ts';
+type DayRow = {
+    day: string;
+    value: number;
+};
+export declare function WeekdayGrid({ group, value, onChange, mode, }: {
+    group: ContainerNode;
+    value: unknown;
+    onChange: (v: DayRow[]) => void;
+    mode: FieldMode;
+}): import("react").JSX.Element;
+export {};

package/dist/render/widgets/weekday-grid.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation } from 'react-i18next';
+import { isNamedField } from '@coffer-org/sdk/fields';
+import { Input } from "../../components/ui/input.js";
+import { Dash } from "../shared.js";
+import { EDIT_INLINE_PAD } from "../chrome.js";
+import { PopoverField } from "../popover-field.js";
+import { useHybridScope } from "../hybrid-scope.js";
+const DAYS = ['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun'];
+const DAY_META = {
+    kind: 'number',
+    prim: 'number',
+    column: 'real',
+    label: '',
+    required: false,
+    hints: {},
+};
+export function WeekdayGrid({ group, value, onChange, mode, }) {
+    const { t } = useTranslation();
+    const daysShort = t('weekdaysShort', { returnObjects: true });
+    const onRecordPage = useHybridScope();
+    const rows = Array.isArray(value) ? value : [];
+    const byDay = new Map(rows.map((r) => [r.day, Number(r.value)]));
+    const editing = mode !== 'view';
+    const valueField = group.fields.slice(1).find((f) => isNamedField(f));
+    const min = valueField?.type.hints['min'];
+    const max = valueField?.type.hints['max'];
+    const step = valueField?.type.hints['step'];
+    const dayField = valueField ? { ...valueField.type, label: '', required: false } : DAY_META;
+    function setDay(day, n) {
+        const next = DAYS.flatMap((d) => {
+            const v = d === day ? n : (byDay.get(d) ?? 0);
+            return v > 0 ? [{ day: d, value: v }] : [];
+        });
+        onChange(next);
+    }
+    const numberInput = (v, set) => (_jsx(Input, { type: "number", className: "w-full text-center px-1 [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none", min: min, max: max, step: step ?? 'any', value: v === 0 || v == null ? '' : String(v), onChange: (e) => set(e.target.value === '' ? '' : Number(e.target.value)) }));
+    const peak = Math.max(max ?? 0, ...DAYS.map((d) => byDay.get(d) ?? 0), 1);
+    const today = DAYS[(new Date().getDay() + 6) % 7];
+    const cell = (n) => (_jsxs("div", { className: `relative h-11 w-full overflow-hidden rounded-lg border ${n ? 'border-accent/30 text-accent' : 'border-border text-muted/40'}`, children: [n > 0 && (_jsx("span", { "aria-hidden": true, className: "absolute inset-x-0 bottom-0 bg-accent/15", style: { height: `${Math.round((Math.min(n, peak) / peak) * 100)}%` } })), _jsx("span", { className: "relative flex h-full items-center justify-center text-sm font-semibold tabular-nums", children: n || '·' })] }));
+    if (!editing && !onRecordPage && !rows.some((r) => Number(r.value) > 0))
+        return _jsx(Dash, {});
+    return (_jsx("div", { className: `flex ${EDIT_INLINE_PAD}`, children: _jsx("div", { className: "grid grid-cols-[repeat(7,minmax(2.25rem,1fr))] gap-1.5 w-full max-w-72", children: DAYS.map((day, i) => {
+                const n = byDay.get(day) ?? 0;
+                return (_jsxs("div", { className: "flex flex-col items-stretch gap-1 min-w-0 text-center", children: [_jsx("span", { className: `text-[10px] ${day === today ? 'font-semibold text-accent' : 'text-muted'}`, children: daysShort[i] }), onRecordPage ? (_jsx(PopoverField, { field: dayField, value: n || '', geom: "none", width: "w-full", view: () => cell(n), edit: numberInput, onCommit: (v) => setDay(day, Number(v) || 0) })) : editing ? (numberInput(n || '', (nv) => setDay(day, Number(nv) || 0))) : (cell(n))] }, day));
+            }) }) }));
+}

package/dist/render/write.d.ts

@@ -0,0 +1,5 @@
+import { type FieldMeta } from '@coffer-org/sdk/fields';
+export type Commit = (next: unknown) => void | Promise<string | undefined>;
+export type IssueText = (code: string, params?: Record<string, unknown>) => string;
+export declare function makeWriter(field: FieldMeta | undefined, commit: Commit, issueText?: IssueText, validateWith?: FieldMeta): (next: unknown) => Promise<string | undefined>;
+export declare function notWritable(issueText?: IssueText): Commit;

package/dist/render/write.js

@@ -0,0 +1,14 @@
+import { validateField } from '@coffer-org/sdk/fields';
+const bareCode = (code) => code;
+export function makeWriter(field, commit, issueText = bareCode, validateWith) {
+    return async (next) => {
+        const judge = validateWith ?? field;
+        const issue = judge?.zod ? validateField(judge, next) : null;
+        if (issue)
+            return issueText(issue.code, issue.params);
+        return (await commit(next)) ?? undefined;
+    };
+}
+export function notWritable(issueText = bareCode) {
+    return async () => issueText('notWritable');
+}

package/dist/schema-registry.d.ts

@@ -0,0 +1,6 @@
+import type { Registry } from '@coffer-org/sdk/compose';
+export type SchemaRegistry = Pick<Registry, 'getShelf' | 'getOptionList'>;
+export declare function setSchemaRegistry(registry: SchemaRegistry): void;
+export declare function resetSchemaRegistry(): void;
+export declare const getShelf: SchemaRegistry['getShelf'];
+export declare const getOptionList: SchemaRegistry['getOptionList'];

package/dist/schema-registry.js

@@ -0,0 +1,25 @@
+const MEMBERS = ['getShelf', 'getOptionList'];
+let schema = null;
+export function setSchemaRegistry(registry) {
+    if (!registry || typeof registry !== 'object') {
+        throw new Error('[web-ui] setSchemaRegistry() needs the composed registry object');
+    }
+    const missing = MEMBERS.filter((name) => typeof registry[name] !== 'function');
+    if (missing.length) {
+        throw new Error(`[web-ui] setSchemaRegistry() is missing ${missing.join(', ')} — ` +
+            `the kit reads these from the host's composed schema`);
+    }
+    schema = registry;
+}
+export function resetSchemaRegistry() {
+    schema = null;
+}
+function must() {
+    if (!schema) {
+        throw new Error('[web-ui] the schema registry is not registered — the application must call ' +
+            'setSchemaRegistry() with its composed registry before the first render');
+    }
+    return schema;
+}
+export const getShelf = (library, shelf) => must().getShelf(library, shelf);
+export const getOptionList = (name) => must().getOptionList(name);

package/dist/site-links.d.ts

@@ -0,0 +1,13 @@
+export interface SiteRoute {
+    pattern: string;
+    purpose: string;
+}
+export interface SiteShelf {
+    library: string;
+    shelf: string;
+}
+export declare function registerSiteLinks(next: SiteRoute[]): void;
+export declare function getSiteLinks(): SiteRoute[];
+export declare function registerSiteShelves(next: SiteShelf[]): void;
+export declare function getSiteShelves(): SiteShelf[];
+export declare function resetSiteLinks(): void;

package/dist/site-links.js

@@ -0,0 +1,18 @@
+let routes = [];
+let shelves = [];
+export function registerSiteLinks(next) {
+    routes = [...next];
+}
+export function getSiteLinks() {
+    return [...routes];
+}
+export function registerSiteShelves(next) {
+    shelves = [...next];
+}
+export function getSiteShelves() {
+    return [...shelves];
+}
+export function resetSiteLinks() {
+    routes = [];
+    shelves = [];
+}

package/dist/strip-markdown.d.ts

@@ -0,0 +1 @@
+export declare function stripMarkdown(src: string): string;

package/dist/strip-markdown.js

@@ -0,0 +1,11 @@
+export function stripMarkdown(src) {
+    return (src ?? '')
+        .replace(/```[\s\S]*?```/g, ' ')
+        .replace(/`([^`]+)`/g, '$1')
+        .replace(/!\[[^\]]*\]\([^)]*\)/g, ' ')
+        .replace(/\[([^\]]+)\]\([^)]*\)/g, '$1')
+        .replace(/^#{1,6}\s+/gm, '')
+        .replace(/[*_~>#-]+/g, ' ')
+        .replace(/\s+/g, ' ')
+        .trim();
+}