@coffer-org/web-ui 4.0.0

package/dist/render/blocks/terminal.js

@@ -0,0 +1,18 @@
+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 } from "./block-shell.js";
+function TerminalPage({ el }) {
+    const g = el;
+    const { t } = useTranslation();
+    const caption = g.view?.caption;
+    const slots = useSlots();
+    const body = (_jsxs("div", { className: "overflow-hidden rounded-lg border border-border bg-surface", "data-testid": "terminal", children: [caption && (_jsx("div", { className: "border-b border-border bg-elevated px-3 py-1.5 text-xs font-medium text-muted", "data-testid": "terminal-caption", children: t(caption) })), _jsx("div", { className: "overflow-x-auto p-3 font-mono text-sm", "data-testid": "terminal-body", children: slots.map((s, i) => {
+                    if (s.handle.hidden)
+                        return null;
+                    return (_jsx("div", { className: "min-w-0", "data-testid": `terminal-item-${i}`, children: _jsx(Slot, { name: s.name }) }, s.name));
+                }) })] }));
+    return (_jsx(BlockShell, { label: g.label, icon: g.icon, children: body }));
+}
+registerRenderer({ kinds: ['terminal'], layout: 'block', editor: 'custom', Page: TerminalPage });

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

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

package/dist/render/blocks/timeline.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { registerRenderer } from "../../registry.js";
+import { Slot, useSlots } from "../slot.js";
+import { BlockShell } from "./block-shell.js";
+function todayISO() {
+    return new Date().toISOString().slice(0, 10);
+}
+function isPastDate(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 t < t0;
+}
+function TimelinePage({ el }) {
+    const g = el;
+    const slots = useSlots();
+    const body = (_jsxs("div", { className: "relative flex flex-col gap-2", "data-testid": "timeline", children: [_jsx("div", { className: "absolute top-2 bottom-2 left-[5px] w-px bg-border", "aria-hidden": true }), slots.map((s, i) => {
+                if (s.handle.hidden)
+                    return null;
+                return (_jsx("div", { className: "relative min-w-0", "data-testid": `timeline-item-${i}`, children: _jsx(Slot, { name: s.name, render: (handle, defaultDisplay) => {
+                            const past = isPastDate(handle.value, todayISO());
+                            return (_jsxs("span", { className: "flex min-w-0 items-start gap-3", "data-testid": "timeline-entry", children: [_jsx("span", { className: `relative z-10 mt-1 h-2.5 w-2.5 shrink-0 rounded-full border-2 border-accent ${past ? 'bg-accent' : 'bg-surface'}`, "data-testid": "timeline-dot", "data-past": past === null ? undefined : past, "aria-hidden": true }), _jsx("span", { className: "min-w-0 flex-1 pb-1", children: defaultDisplay })] }));
+                        } }) }, s.name));
+            })] }));
+    return (_jsx(BlockShell, { label: g.label, icon: g.icon, children: body }));
+}
+registerRenderer({ kinds: ['timeline'], layout: 'block', editor: 'custom', Page: TimelinePage });

package/dist/render/box.d.ts

@@ -0,0 +1,5 @@
+import type { FieldMeta } from '@coffer-org/sdk/fields';
+import type { BoxGeom } from '../types.ts';
+export declare const FIELD_ROW_CLS = "min-h-9 px-2";
+export declare function resolveBox(field: FieldMeta, geom: BoxGeom): BoxGeom;
+export declare function boxClass(box: BoxGeom): string;

package/dist/render/box.js

@@ -0,0 +1,23 @@
+import { fieldLayout, resolveRenderer } from "../registry.js";
+export const FIELD_ROW_CLS = 'min-h-9 px-2';
+export function resolveBox(field, geom) {
+    const declared = resolveRenderer(field)?.box;
+    if (declared)
+        return declared;
+    if (fieldLayout(field) === 'block')
+        return 'none';
+    return geom;
+}
+export function boxClass(box) {
+    switch (box) {
+        case 'title':
+            return 'flex items-center self-start w-full rounded-lg border border-transparent px-3 py-1 text-[28px] font-bold leading-tight';
+        case 'textarea':
+            return 'flex self-start w-full rounded-lg border border-transparent px-3 py-2 text-sm whitespace-pre-wrap min-h-20';
+        case 'none':
+            return '';
+        case 'inline':
+        default:
+            return `flex w-full min-w-0 items-center self-start ${FIELD_ROW_CLS} rounded-lg border border-transparent text-sm`;
+    }
+}

package/dist/render/chrome.d.ts

@@ -0,0 +1,64 @@
+import { type ReactNode } from 'react';
+import type { BoxGeom } from '../types.ts';
+import type { FieldMeta, ContainerNode } from '@coffer-org/sdk/fields';
+export declare const STACK = "gap-3.5";
+export declare const LAYOUT_STACK = "gap-6";
+export declare const PAGE_STACK = "gap-6";
+export declare function Rail({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function FieldLabel({ label, required, actions, reserveAction, }: {
+    label: string;
+    required?: boolean;
+    actions?: ReactNode;
+    reserveAction?: boolean;
+    htmlFor?: string;
+}): import("react").JSX.Element;
+export declare function FieldLabelText({ label, required }: {
+    label: string;
+    required?: boolean;
+}): import("react").JSX.Element;
+export declare const GROUP_TITLE_CLS = "flex items-center gap-2 font-semibold text-[13px] text-accent";
+export type GroupTone = 'section' | 'group';
+export declare const DEFAULT_GROUP_ICON = "lucide:folder";
+export declare const DEFAULT_COLLECTION_ICON = "lucide:list";
+export declare const DEFAULT_SECTION_ICON = "lucide:puzzle";
+export declare function groupIcon(g: ContainerNode): string;
+export declare function GroupTitle({ label, icon, actions, as, tone, }: {
+    label: string;
+    icon?: string;
+    actions?: ReactNode;
+    as?: 'h3' | 'legend';
+    tone?: GroupTone;
+}): import("react").JSX.Element;
+export declare const EDIT_REVEAL = "opacity-0 transition-opacity group-hover/field:opacity-100 focus-visible:opacity-100 pointer-coarse:opacity-100";
+export declare const useGroupDepth: () => number;
+export declare function GroupDepthProvider({ depth, children }: {
+    depth: number;
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function groupScopeClass(depth: number): string;
+export declare function groupRevealClass(depth: number): string;
+export declare const ACTION_CHIP = "h-7 w-7 rounded-md border border-border bg-surface/80 text-muted hover:border-accent/60 hover:text-accent";
+export declare const ACTION_CHIP_ACCENT = "h-7 w-7 rounded-md border border-accent/40 bg-accent/10 text-accent hover:border-accent hover:bg-accent/20 hover:text-accent";
+export declare function EditToggle({ onEdit, variant, scope, }: {
+    onEdit: () => void;
+    variant?: 'inline' | 'overlay';
+    scope?: 'field' | 'group';
+}): import("react").JSX.Element;
+export declare function SaveCancel({ size, busy, disabled, onSave, onCancel, }: {
+    size: 'xs' | 'sm';
+    busy: boolean;
+    disabled?: boolean;
+    onSave: () => void;
+    onCancel: () => void;
+}): import("react").JSX.Element;
+export declare const EDIT_INLINE_PAD = "min-h-9 px-2 border border-transparent";
+export declare function FieldBox({ geom, field, children }: {
+    geom: BoxGeom;
+    field: FieldMeta;
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function FieldError({ error }: {
+    error?: string;
+}): import("react").JSX.Element | null;

package/dist/render/chrome.js

@@ -0,0 +1,92 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { createContext, useContext } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Check, Pencil, X } from 'lucide-react';
+import { Button } from "../components/ui/button.js";
+import { Icon } from "../components/Icon.js";
+import { resolveBox, boxClass, FIELD_ROW_CLS } from "./box.js";
+import { isCollectionGroup } from '@coffer-org/sdk/fields';
+export const STACK = 'gap-3.5';
+export const LAYOUT_STACK = 'gap-6';
+export const PAGE_STACK = 'gap-6';
+export function Rail({ children }) {
+    return (_jsx("div", { className: "border-l-2 border-border/80 bg-muted/10 rounded-r-xl pl-4 pr-3.5 py-3 transition-colors", children: children }));
+}
+export function FieldLabel({ label, required, actions, reserveAction, }) {
+    return (_jsxs("div", { className: `flex items-center gap-2 mb-0.5 min-h-8 ${reserveAction ? 'pr-24' : ''}`, children: [_jsx(FieldLabelText, { label: label, required: required }), actions && _jsx("div", { className: "ml-auto flex shrink-0 items-center gap-1.5", children: actions })] }));
+}
+export function FieldLabelText({ label, required }) {
+    return (_jsxs("span", { className: "min-w-0 text-[11px] font-medium text-muted", children: [label, required && _jsx("span", { className: "text-danger ml-0.5", children: "*" })] }));
+}
+const GROUP_TITLE_BASE = 'flex items-center gap-2 font-semibold';
+export const GROUP_TITLE_CLS = `${GROUP_TITLE_BASE} text-[13px] text-accent`;
+export const DEFAULT_GROUP_ICON = 'lucide:folder';
+export const DEFAULT_COLLECTION_ICON = 'lucide:list';
+export const DEFAULT_SECTION_ICON = 'lucide:puzzle';
+export function groupIcon(g) {
+    return g.icon ?? (isCollectionGroup(g) ? DEFAULT_COLLECTION_ICON : DEFAULT_GROUP_ICON);
+}
+export function GroupTitle({ label, icon, actions, as = 'h3', tone = 'group', }) {
+    const Tag = as;
+    const depth = useGroupDepth();
+    const section = tone === 'section';
+    const size = section ? 'text-[15px]' : 'text-[13px]';
+    const color = section || depth === 0 ? 'text-accent' : 'text-muted';
+    return (_jsxs(Tag, { className: `${GROUP_TITLE_BASE} ${size} ${color}${as === 'legend' ? ' px-1 w-full' : ''}`, children: [icon &&
+                (section ? (_jsx("span", { className: "flex size-6 shrink-0 items-center justify-center rounded-md bg-accent/10 text-accent", children: _jsx(Icon, { name: icon, size: 14 }) })) : (_jsx(Icon, { name: icon, size: 14, className: "shrink-0" }))), label, actions && _jsx("span", { className: "ml-auto flex shrink-0 items-center gap-1.5", children: actions })] }));
+}
+export const EDIT_REVEAL = 'opacity-0 transition-opacity group-hover/field:opacity-100 focus-visible:opacity-100 pointer-coarse:opacity-100';
+const GroupDepthContext = createContext(0);
+export const useGroupDepth = () => useContext(GroupDepthContext);
+export function GroupDepthProvider({ depth, children }) {
+    return _jsx(GroupDepthContext.Provider, { value: depth, children: children });
+}
+export function groupScopeClass(depth) {
+    switch (depth & 3) {
+        case 0:
+            return 'group/group';
+        case 1:
+            return 'group/group2';
+        case 2:
+            return 'group/group3';
+        default:
+            return 'group/group4';
+    }
+}
+const GROUP_REVEAL_BY_DEPTH = [
+    'opacity-0 transition-opacity group-hover/group:opacity-100 focus-visible:opacity-100 pointer-coarse:opacity-100',
+    'opacity-0 transition-opacity group-hover/group2:opacity-100 focus-visible:opacity-100 pointer-coarse:opacity-100',
+    'opacity-0 transition-opacity group-hover/group3:opacity-100 focus-visible:opacity-100 pointer-coarse:opacity-100',
+    'opacity-0 transition-opacity group-hover/group4:opacity-100 focus-visible:opacity-100 pointer-coarse:opacity-100',
+];
+export function groupRevealClass(depth) {
+    return GROUP_REVEAL_BY_DEPTH[depth & 3] ?? GROUP_REVEAL_BY_DEPTH[0];
+}
+export const ACTION_CHIP = 'h-7 w-7 rounded-md border border-border bg-surface/80 text-muted hover:border-accent/60 hover:text-accent';
+export const ACTION_CHIP_ACCENT = 'h-7 w-7 rounded-md border border-accent/40 bg-accent/10 text-accent hover:border-accent hover:bg-accent/20 hover:text-accent';
+export function EditToggle({ onEdit, variant = 'inline', scope = 'field', }) {
+    const { t } = useTranslation();
+    const depth = useGroupDepth();
+    const reveal = scope === 'group' ? groupRevealClass(depth) : EDIT_REVEAL;
+    const pos = variant === 'overlay' ? 'absolute right-1 top-0 z-10' : '';
+    return (_jsx(Button, { type: "button", variant: "outline", size: "iconXs", className: `${pos} ${ACTION_CHIP} ${reveal}`, onClick: onEdit, title: t('actions.edit'), children: _jsx(Pencil, { size: 13 }) }));
+}
+export function SaveCancel({ size, busy, disabled, onSave, onCancel, }) {
+    const { t } = useTranslation();
+    const btnSize = size === 'xs' ? 'iconXs' : 'iconSm';
+    const icon = size === 'xs' ? 13 : 14;
+    const off = busy || disabled;
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { type: "button", variant: "outline", size: btnSize, disabled: off, onClick: onSave, className: ACTION_CHIP_ACCENT, title: t('actions.save'), children: _jsx(Check, { size: icon }) }), _jsx(Button, { type: "button", variant: "outline", size: btnSize, onClick: onCancel, className: "h-7 w-7 rounded-md border border-border bg-surface/80 text-muted hover:border-danger hover:text-danger", title: t('actions.cancel'), children: _jsx(X, { size: icon }) })] }));
+}
+export const EDIT_INLINE_PAD = `${FIELD_ROW_CLS} border border-transparent`;
+export function FieldBox({ geom, field, children }) {
+    const box = resolveBox(field, geom);
+    if (box === 'none')
+        return _jsx(_Fragment, { children: children });
+    return _jsx("div", { className: boxClass(box), children: children });
+}
+export function FieldError({ error }) {
+    if (!error)
+        return null;
+    return (_jsxs("p", { className: "text-xs text-danger flex items-center gap-1 mt-0.5", children: [_jsx(Icon, { name: "lucide:alert-triangle", size: 12, className: "shrink-0" }), " ", error] }));
+}

package/dist/render/core/amount.d.ts

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

package/dist/render/core/amount.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation } from 'react-i18next';
+import { registerRenderer } from "../../registry.js";
+import { FieldFrame } from "../field-frame.js";
+import { NumberInput } from "./number.js";
+function AmountDisplay({ field, value }) {
+    const { t } = useTranslation();
+    const u = field.hints['unitValue'];
+    if (value == null || value === '')
+        return _jsx("span", { className: "text-muted", children: "\u2014" });
+    return (_jsxs("span", { className: "font-mono", children: [String(value), u ? _jsx("span", { className: "ml-1 text-xs text-muted", children: t(`core.units.${String(u)}`) }) : null] }));
+}
+function AmountPage(p) {
+    return (_jsx(FieldFrame, { field: p.field, value: p.value, label: p.label, required: p.required, error: p.error, mode: p.mode, geom: "inline", width: "w-32", bare: p.bare, view: (v) => _jsx(AmountDisplay, { field: p.field, value: v }), edit: (v, onChange) => (_jsx(NumberInput, { name: `field-${p.field.label}`, field: p.field, value: v, onChange: onChange })) }));
+}
+function AmountInline({ value }) {
+    return _jsx("span", { className: "truncate font-mono", children: value == null || value === '' ? '—' : String(value) });
+}
+registerRenderer({ kinds: ['amount'], Page: AmountPage, Inline: AmountInline });

package/dist/render/core/attachment.d.ts

@@ -0,0 +1,29 @@
+import type { ReactNode } from 'react';
+import type { FieldMeta } from '@coffer-org/sdk/fields';
+export declare function attachmentSlots(field: FieldMeta): {
+    lKey: string;
+    fKey: string;
+};
+export declare function attachmentFileKind(field: FieldMeta): string;
+export declare function attachmentRoleFixed(field: FieldMeta, role: string): boolean;
+export declare function AttachmentStack({ name, file }: {
+    name: ReactNode;
+    file: ReactNode;
+}): import("react").JSX.Element;
+export declare function AttachmentBody({ field, value }: {
+    field: FieldMeta;
+    value: unknown;
+}): import("react").JSX.Element;
+export declare function AttachmentFileCell({ file, fixed, kind, onChange, }: {
+    file: unknown;
+    fixed: boolean;
+    kind: string;
+    onChange?: (v: unknown) => void;
+}): import("react").JSX.Element;
+export declare function AttachmentLabelCell({ label, fixed, meta, fieldLabel, onChange, }: {
+    label: unknown;
+    fixed: boolean;
+    meta: FieldMeta;
+    fieldLabel?: string;
+    onChange?: (v: unknown) => void | Promise<string | undefined>;
+}): import("react").JSX.Element;

package/dist/render/core/attachment.js

@@ -0,0 +1,102 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { partValueKeys } from '@coffer-org/sdk/fields';
+import { registerRenderer } from "../../registry.js";
+import { Input } from "../../components/ui/input.js";
+import { FieldFrame } from "../field-frame.js";
+import { FieldLabel, FieldError } from "../chrome.js";
+import { PopoverField } from "../popover-field.js";
+import { Dash, compositeRoleValue, useCompositeLiveGate } from "../shared.js";
+import { parseFileRecs } from "../image.js";
+import { ReadOnlyFiles, SingleFileWidget } from "./file.js";
+export function attachmentSlots(field) {
+    const slots = partValueKeys(field.parts ?? []);
+    return { lKey: slots['label'] ?? 'label', fKey: slots['file'] ?? 'file' };
+}
+function parseAttachment(v, field) {
+    const { lKey, fKey } = attachmentSlots(field);
+    const obj = v && typeof v === 'object' ? v : null;
+    if (!obj)
+        return {};
+    return { label: obj[lKey], file: obj[fKey] };
+}
+export function attachmentFileKind(field) {
+    return field.parts?.find((p) => p.role === 'file')?.meta.kind ?? 'file';
+}
+export function attachmentRoleFixed(field, role) {
+    const part = field.parts?.find((p) => p.role === role);
+    return part != null && part.mode !== 'stored';
+}
+export function AttachmentStack({ name, file }) {
+    return (_jsxs("div", { "data-testid": "attachment", className: "flex min-w-0 flex-col gap-1", children: [name, file] }));
+}
+function AttachmentName({ label, dash }) {
+    if (label == null || label === '')
+        return dash ? _jsx(Dash, {}) : null;
+    return (_jsx("span", { "data-testid": "attachment-label", className: "block truncate text-[15px] font-medium", children: String(label) }));
+}
+export function AttachmentBody({ field, value }) {
+    const { label, file } = parseAttachment(value, field);
+    return (_jsx(AttachmentStack, { name: _jsx(AttachmentName, { label: label }), file: _jsx(ReadOnlyFiles, { kind: attachmentFileKind(field), value: file ?? '' }) }));
+}
+export function AttachmentFileCell({ file, fixed, kind, onChange, }) {
+    if (fixed || !onChange)
+        return _jsx(ReadOnlyFiles, { kind: kind, value: file ?? '' });
+    return _jsx(SingleFileWidget, { kind: kind, value: file ?? '', onChange: onChange });
+}
+export function AttachmentLabelCell({ label, fixed, meta, fieldLabel, onChange, }) {
+    if (fixed || !onChange)
+        return _jsx(AttachmentName, { label: label, dash: true });
+    const pickerField = { ...meta, kind: 'text', hints: { ...meta.hints, noLabel: true } };
+    return (_jsx(PopoverField, { field: pickerField, value: label ?? '', label: fieldLabel, geom: "none", width: "w-full", view: (v) => (v != null && v !== '' ? _jsx(AttachmentName, { label: v }) : _jsx(Dash, {})), edit: (v, set) => _jsx(Input, { value: v == null ? '' : String(v), onChange: (e) => set(e.target.value) }), onCommit: onChange }));
+}
+function AttachmentInput({ field, value, onChange, }) {
+    const { lKey, fKey } = attachmentSlots(field);
+    const { label, file } = parseAttachment(value, field);
+    const kind = attachmentFileKind(field);
+    const labelFixed = attachmentRoleFixed(field, 'label');
+    const fileFixed = attachmentRoleFixed(field, 'file');
+    const set = (next) => {
+        const l = compositeRoleValue(next.label);
+        const f = compositeRoleValue(next.file);
+        onChange(l == null && f == null ? '' : { [lKey]: l, [fKey]: f });
+    };
+    return (_jsxs("div", { className: "flex min-w-0 flex-col gap-2", children: [labelFixed ? (_jsx(AttachmentName, { label: label, dash: true })) : (_jsx(Input, { id: `field-${field.label}`, value: label == null ? '' : String(label), onChange: (e) => set({ label: e.target.value, file }) })), fileFixed ? (_jsx(ReadOnlyFiles, { kind: kind, value: file ?? '' })) : (_jsx(SingleFileWidget, { kind: kind, value: file ?? '', onChange: (v) => set({ label, file: v }) }))] }));
+}
+function AttachmentLive({ field, value, onChange, label, required, error, }) {
+    const { lKey, fKey } = attachmentSlots(field);
+    const { label: name, file } = parseAttachment(value, field);
+    const kind = attachmentFileKind(field);
+    const labelFixed = attachmentRoleFixed(field, 'label');
+    const fileFixed = attachmentRoleFixed(field, 'file');
+    const labelPart = field.parts?.find((p) => p.role === 'label');
+    const noLabel = field.hints['noLabel'] === true || label === undefined;
+    const write = (nextLabel, nextFile) => {
+        const l = compositeRoleValue(nextLabel);
+        const f = compositeRoleValue(nextFile);
+        return onChange(l == null && f == null ? '' : { [lKey]: l, [fKey]: f });
+    };
+    return (_jsxs("div", { className: "group/field relative w-full", children: [!noLabel && _jsx(FieldLabel, { label: label, required: required }), _jsx(AttachmentStack, { name: _jsx(AttachmentLabelCell, { label: name, fixed: labelFixed, meta: labelPart?.meta ?? field, fieldLabel: label, onChange: labelFixed ? undefined : (v) => write(v, file) }), file: _jsx(AttachmentFileCell, { file: file, fixed: fileFixed, kind: kind, onChange: fileFixed ? undefined : (v) => void write(name, v) }) }), _jsx(FieldError, { error: error })] }));
+}
+function AttachmentPage(p) {
+    const { live, write } = useCompositeLiveGate(p);
+    if (live) {
+        return (_jsx(AttachmentLive, { field: p.field, value: p.value, onChange: write, label: p.label, required: p.required, error: p.error }));
+    }
+    return (_jsx(FieldFrame, { field: p.field, value: p.value, label: p.label, required: p.required, error: p.error, mode: p.mode, geom: "none", width: "w-full", bare: p.bare, view: (v) => _jsx(AttachmentBody, { field: p.field, value: v }), edit: (value, onChange) => (_jsx(AttachmentInput, { field: p.field, value: value, onChange: onChange })) }));
+}
+function AttachmentInline({ field, value }) {
+    const { label, file } = parseAttachment(value, field);
+    if (label != null && label !== '')
+        return _jsx("span", { className: "truncate", children: String(label) });
+    const rec = parseFileRecs(file)[0];
+    if (rec)
+        return _jsx("span", { className: "truncate text-muted", children: rec.name });
+    return _jsx("span", { className: "text-muted", children: "\u2014" });
+}
+registerRenderer({
+    kinds: ['attachment'],
+    layout: 'block',
+    Page: AttachmentPage,
+    Inline: AttachmentInline,
+    editor: 'custom',
+});

package/dist/render/core/choice.d.ts

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

package/dist/render/core/choice.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Checkbox } from "../../components/ui/checkbox.js";
+import { Icon } from "../../components/Icon.js";
+import { registerRenderer } from "../../registry.js";
+import { isChecked } from "../use-field-edit.js";
+import { asBool, fieldOptions } from "../../lib/format.js";
+import { FieldFrame } from "../field-frame.js";
+import { useRecordSave } from "../record-save-ctx.js";
+import { useHybridScope } from "../hybrid-scope.js";
+function selectOpts(field, selectOptions) {
+    return selectOptions ?? fieldOptions(field);
+}
+function BooleanValue({ value }) {
+    return _jsx("span", { children: isChecked(value) ? _jsx(Icon, { name: "lucide:check", size: 14, className: "inline text-accent" }) : '—' });
+}
+function BooleanCheckbox({ value, onChange, label, }) {
+    const { saving } = useRecordSave();
+    return (_jsx(Checkbox, { checked: isChecked(value), disabled: saving, "aria-label": label, onCheckedChange: (c) => onChange?.(c === true) }));
+}
+function BooleanPage(p) {
+    const live = useHybridScope();
+    return (_jsx(FieldFrame, { field: p.field, value: p.value, label: p.label, required: p.required, error: p.error, mode: p.mode, geom: "inline", width: "w-32", bare: p.bare, view: (v, commit) => commit && live ? (_jsx(BooleanCheckbox, { value: v, label: p.label, onChange: (b) => void commit(b) })) : (_jsx(BooleanValue, { field: p.field, value: v })), edit: (v, onChange) => _jsx(BooleanCheckbox, { value: v, label: p.label, onChange: onChange }) }));
+}
+function BooleanInline({ value }) {
+    return _jsx("span", { children: isChecked(value) ? _jsx(Icon, { name: "lucide:check", size: 14, className: "inline text-accent" }) : '—' });
+}
+function booleanKeys(value, _field, ctx) {
+    if (value == null || value === '')
+        return [];
+    const b = asBool(value);
+    return [{ value: b ? 'true' : 'false', rawValue: b, label: b ? ctx.t('group.yes') : ctx.t('group.no') }];
+}
+registerRenderer({
+    kinds: ['boolean'],
+    Page: BooleanPage,
+    Inline: BooleanInline,
+    Value: BooleanValue,
+    editor: 'inplace',
+    keys: booleanKeys,
+});

package/dist/render/core/composite.d.ts

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

package/dist/render/core/composite.js

@@ -0,0 +1,132 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { RelationPickerWidget, MeasuredWidget, MeasuredMultiInput, CheckWidget, MultiCheckInput, } from "../widgets/edit.js";
+import { RelationValues, MeasuredDisplay, measuredUnitLabel, measuredSlots, measuredChipContent, CheckDisplay, MultiCheckDisplay, } from "../widgets/display.js";
+import { registerRenderer, multiBlock } from "../../registry.js";
+import { useMemo } from 'react';
+import { getShelf } from "../../schema-registry.js";
+import { Button } from "../../components/ui/button.js";
+import { useTranslation, MultipleChips, parseStrArray, colsToCheckRow } from "../shared.js";
+import { parseJSON } from "../../lib/json.js";
+import { FieldFrame } from "../field-frame.js";
+import { OptionList } from "../option-list.js";
+import { useRecordLabels, useRecordsByIds } from "../../lib/use-record-labels.js";
+import { recordOption } from "../../lib/record-option.js";
+function RelationPage(p) {
+    return (_jsx(FieldFrame, { field: p.field, value: p.value, label: p.label, required: p.required, error: p.error, mode: p.mode, geom: "inline", width: "w-56", bare: p.bare, view: (v) => _jsx(RelationValues, { field: p.field, value: v }), edit: (v, onChange) => (_jsx(RelationPickerWidget, { field: p.field, value: v, onChange: onChange, excludeValues: p.excludeValues })) }));
+}
+function RelationPicker({ field, draft, setDraft, save }) {
+    const { t } = useTranslation();
+    const library = field.relation?.library ?? '';
+    const shelf = field.relation?.shelf ?? '';
+    const multi = Boolean(field.hints['multi']);
+    const displayKey = String(field.hints['displayKey'] ?? 'name');
+    const filterQuery = useMemo(() => {
+        const f = field.relation?.filter;
+        if (!f)
+            return undefined;
+        return Object.fromEntries(Object.entries(f).map(([k, v]) => [k, String(v)]));
+    }, [field.relation?.filter]);
+    const selected = useMemo(() => {
+        if (draft == null || draft === '')
+            return [];
+        if (multi) {
+            const a = Array.isArray(draft) ? draft : parseJSON(draft, []);
+            return a.map(String);
+        }
+        return [String(draft)];
+    }, [draft, multi]);
+    const { records, loadState } = useRecordLabels(library, shelf, displayKey, filterQuery);
+    const selectedMap = useRecordsByIds(library, shelf, selected);
+    const m = getShelf(library, shelf);
+    const options = useMemo(() => {
+        const byId = new Map(records.map((r) => [String(r['id']), r]));
+        for (const [id, row] of selectedMap)
+            if (!byId.has(id))
+                byId.set(id, row);
+        return [...byId.entries()].map(([id, row]) => {
+            const o = m ? recordOption(m, row) : { title: id, icon: undefined, subtitle: undefined };
+            return {
+                value: id,
+                title: o.title || id,
+                ...(o.icon && { icon: o.icon }),
+                ...(o.subtitle && { subtitle: o.subtitle }),
+            };
+        });
+    }, [records, selectedMap, m]);
+    if (loadState === 'loading')
+        return _jsx("p", { className: "text-muted text-sm py-1", children: t('form.loading') });
+    if (loadState === 'error')
+        return _jsx("p", { className: "text-danger text-sm py-1", children: t('form.loadError') });
+    if (!options.length)
+        return _jsx("p", { className: "text-muted text-sm py-1", children: t('form.noRecords') });
+    return (_jsxs(_Fragment, { children: [_jsx(OptionList, { field: field, options: options, value: multi ? selected : draft, multiple: multi, literal: true, onPick: (next) => {
+                    if (!multi) {
+                        save(next === '' ? '' : Number(next));
+                        return;
+                    }
+                    const ids = next.map(Number);
+                    setDraft(ids.length ? ids : '');
+                } }), multi && (_jsx("div", { className: "mt-2 flex justify-end border-t border-border pt-2", children: _jsx(Button, { type: "button", size: "sm", onClick: () => save(), children: t('actions.save') }) }))] }));
+}
+function RelationInline({ value }) {
+    const a = parseJSON(value, null);
+    const label = Array.isArray(a) ? (a.length ? String(a.length) : '—') : value ? '1' : '—';
+    return _jsx("span", { className: "truncate", children: label });
+}
+function relationKeys(value, _field, ctx) {
+    if (value == null || value === '')
+        return [];
+    const id = String(value);
+    const label = ctx.labelMap?.get(id) ?? id;
+    return [{ value: id, rawValue: value, label, sort: label }];
+}
+registerRenderer({
+    kinds: ['relation'],
+    layout: multiBlock,
+    Page: RelationPage,
+    Inline: RelationInline,
+    Picker: RelationPicker,
+    keys: relationKeys,
+});
+function MeasuredMultiDisplay({ field, value }) {
+    const { t } = useTranslation();
+    const items = Array.isArray(value) ? value : parseStrArray(String(value ?? ''));
+    return _jsx(MultipleChips, { items: items, content: measuredChipContent(field, t) });
+}
+function MeasuredPage(p) {
+    return (_jsx(FieldFrame, { field: p.field, value: p.value, label: p.label, required: p.required, error: p.error, mode: p.mode, geom: "inline", width: "w-48", bare: p.bare, view: (v) => p.field.hints['multiple'] === true ? (_jsx(MeasuredMultiDisplay, { field: p.field, value: v })) : (_jsx(MeasuredDisplay, { field: p.field, value: v })), edit: (v, onChange) => p.field.hints['multiple'] === true ? (_jsx(MeasuredMultiInput, { field: p.field, value: v, onChange: onChange })) : (_jsx(MeasuredWidget, { value: v, onChange: onChange, field: p.field })) }));
+}
+function MeasuredInline({ field, value }) {
+    const { t } = useTranslation();
+    const { vKey, uKey } = measuredSlots(field);
+    const o = parseJSON(value, null);
+    const label = o ? `${o[vKey]} ${measuredUnitLabel(field, String(o[uKey] ?? ''), t)}` : '—';
+    return _jsx("span", { className: "truncate", children: label });
+}
+registerRenderer({
+    kinds: ['measured'],
+    Page: MeasuredPage,
+    Inline: MeasuredInline,
+});
+function CheckPage(p) {
+    return (_jsx(FieldFrame, { field: p.field, value: p.value, label: p.label, required: p.required, error: p.error, mode: p.mode, geom: "none", width: "w-full", bare: p.bare, view: (v) => {
+            const slots = p.field.hints['slots'] ?? [''];
+            const fields = p.field.hints['fields'];
+            return p.field.hints['multiple'] === true ? (_jsx(MultiCheckDisplay, { value: v, slots: slots })) : (_jsx(CheckDisplay, { value: v, slots: slots, fields: fields, recordCtx: p.recordCtx }));
+        }, edit: (v, onChange) => p.field.hints['multiple'] === true ? (_jsx(MultiCheckInput, { field: p.field, value: v, onChange: onChange })) : (_jsx(CheckWidget, { field: p.field, value: v, recordCtx: p.recordCtx, onChange: onChange })) }));
+}
+function CheckInline({ value, field }) {
+    const slots = field.hints['slots'] ?? [''];
+    const row = colsToCheckRow(value, slots.length);
+    const total = row.checks.length;
+    if (!row.text && !row.checks.some(Boolean))
+        return _jsx("span", { className: "truncate", children: "\u2014" });
+    const label = total ? `${row.checks.filter(Boolean).length}/${total}` : row.text || '—';
+    return _jsx("span", { className: "truncate", children: label });
+}
+registerRenderer({
+    kinds: ['check'],
+    layout: 'block',
+    Page: CheckPage,
+    Inline: CheckInline,
+});

package/dist/render/core/datetime.d.ts

@@ -0,0 +1,2 @@
+import type { FieldPickerProps } from '../../types.ts';
+export declare function DatePickerBody({ field, draft, save }: FieldPickerProps): import("react").JSX.Element;