@coffer-org/web-ui 4.0.0

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

@@ -0,0 +1,39 @@
+import type { FieldMeta } from '@coffer-org/sdk/fields';
+export declare function illustratedSlots(field: FieldMeta): {
+    tKey: string;
+    iKey: string;
+};
+export declare function illustratedLayout(field: FieldMeta): {
+    width: number;
+    side: 'left' | 'right';
+};
+export declare function illustratedImageKind(field: FieldMeta): string;
+export declare function IllustratedPicture({ name, width, kind }: {
+    name: string;
+    width: number;
+    kind?: string;
+}): import("react").JSX.Element;
+export declare function IllustratedFloat({ width, side, picture, prose, }: {
+    width: number;
+    side: 'left' | 'right';
+    picture: React.ReactNode;
+    prose: React.ReactNode;
+}): import("react").JSX.Element;
+export declare function IllustratedBody({ field, value }: {
+    field: FieldMeta;
+    value: unknown;
+}): import("react").JSX.Element;
+export declare function IllustratedImageCell({ image, fixed, width, kind, onChange, }: {
+    image: unknown;
+    fixed: boolean;
+    width: number;
+    kind?: string;
+    onChange?: (v: unknown) => void;
+}): import("react").JSX.Element;
+export declare function IllustratedTextCell({ text, fixed, meta, label, onChange, }: {
+    text: unknown;
+    fixed: boolean;
+    meta: FieldMeta;
+    label?: string;
+    onChange?: (v: unknown) => void | Promise<string | undefined>;
+}): import("react").JSX.Element;

package/dist/render/core/illustrated.js

@@ -0,0 +1,113 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { partValueKeys } from '@coffer-org/sdk/fields';
+import { registerRenderer } from "../../registry.js";
+import { Textarea } from "../../components/ui/textarea.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 { MarkdownView } from "../markdown-view.js";
+import { Thumb, Lightbox, ImageWidget, parseFileRecs } from "../image.js";
+const DEFAULT_WIDTH = 170;
+export function illustratedSlots(field) {
+    const slots = partValueKeys(field.parts ?? []);
+    return { tKey: slots['text'] ?? 'text', iKey: slots['image'] ?? 'image' };
+}
+function parseIllustrated(v, field) {
+    const { tKey, iKey } = illustratedSlots(field);
+    const obj = v && typeof v === 'object' ? v : null;
+    if (!obj)
+        return {};
+    return { text: obj[tKey], image: obj[iKey] };
+}
+export function illustratedLayout(field) {
+    const config = (field.hints['config'] ?? {});
+    return { width: config.imageWidth ?? DEFAULT_WIDTH, side: config.side ?? 'left' };
+}
+export function illustratedImageKind(field) {
+    return field.parts?.find((p) => p.role === 'image')?.meta.kind ?? 'image';
+}
+const aspectFor = (kind) => (kind === 'poster' ? 'aspect-[2/3]' : 'aspect-square');
+export function IllustratedPicture({ name, width, kind = 'image' }) {
+    const [open, setOpen] = useState(false);
+    return (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", "data-testid": "illustrated-image", onClick: () => setOpen(true), style: { '--illus-w': `${width}px` }, className: `relative block ${aspectFor(kind)} w-full cursor-zoom-in overflow-hidden rounded-xl border border-border transition-colors hover:border-accent sm:w-(--illus-w)`, children: _jsx(Thumb, { name: name }) }), open && _jsx(Lightbox, { images: [name], index: 0, onClose: () => setOpen(false), onIndex: () => { } })] }));
+}
+export function IllustratedFloat({ width, side, picture, prose, }) {
+    return (_jsxs("div", { className: "min-w-0", children: [picture != null && (_jsx("div", { "data-testid": "illustrated-figure", style: { '--illus-w': `${width}px` }, className: `mb-3 w-full sm:mb-2 sm:w-(--illus-w) ${side === 'right' ? 'sm:float-right sm:ml-4' : 'sm:float-left sm:mr-4'}`, children: picture })), prose != null && _jsx("div", { className: "min-w-0", children: prose }), _jsx("div", { className: "clear-both" })] }));
+}
+export function IllustratedBody({ field, value }) {
+    const { text, image } = parseIllustrated(value, field);
+    const { width, side } = illustratedLayout(field);
+    const rec = image != null && image !== '' ? parseFileRecs(image)[0] : undefined;
+    const hasText = text != null && text !== '';
+    return (_jsx(IllustratedFloat, { width: width, side: side, picture: rec ? _jsx(IllustratedPicture, { name: rec.name, width: width, kind: illustratedImageKind(field) }) : null, prose: hasText ? (_jsx("div", { "data-testid": "illustrated-text", className: "min-w-0", children: _jsx(MarkdownView, { value: String(text) }) })) : null }));
+}
+function IllustratedInput({ field, value, onChange, }) {
+    const { tKey, iKey } = illustratedSlots(field);
+    const { text, image } = parseIllustrated(value, field);
+    const { width } = illustratedLayout(field);
+    const kind = illustratedImageKind(field);
+    const rec = image != null && image !== '' ? parseFileRecs(image)[0] : undefined;
+    const textPart = field.parts?.find((p) => p.role === 'text');
+    const textFixed = textPart != null && textPart.mode !== 'stored';
+    const imagePart = field.parts?.find((p) => p.role === 'image');
+    const imageFixed = imagePart != null && imagePart.mode !== 'stored';
+    const set = (next) => {
+        const t = compositeRoleValue(next.text);
+        const i = compositeRoleValue(next.image);
+        onChange(t == null && i == null ? '' : { [tKey]: t, [iKey]: i });
+    };
+    return (_jsxs("div", { className: "flex 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) => set({ text, image: 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, { id: `field-${field.label}`, value: text == null ? '' : String(text), onChange: (e) => set({ text: e.target.value, image }) }))] }));
+}
+export function IllustratedImageCell({ image, fixed, width, kind = 'image', onChange, }) {
+    const rec = image != null && image !== '' ? parseFileRecs(image)[0] : undefined;
+    if (fixed || !onChange) {
+        return (_jsx("div", { className: "text-sm text-muted", children: rec ? _jsx(IllustratedPicture, { name: rec.name, width: width, kind: kind }) : _jsx(Dash, {}) }));
+    }
+    return _jsx(ImageWidget, { value: image ?? '', onChange: onChange, width: width, poster: kind === 'poster' });
+}
+export function IllustratedTextCell({ text, fixed, meta, label, onChange, }) {
+    if (fixed || !onChange) {
+        return (_jsx("p", { className: "text-[15px] text-muted whitespace-pre-wrap", children: text != null && text !== '' ? String(text) : _jsx(Dash, {}) }));
+    }
+    const pickerField = { ...meta, kind: 'markdown', hints: { ...meta.hints, noLabel: true } };
+    return (_jsx(PopoverField, { field: pickerField, value: text ?? '', label: label, geom: "none", width: "w-full", view: (v) => (v != null && v !== '' ? _jsx(MarkdownView, { value: String(v) }) : _jsx(Dash, {})), edit: (v, set) => _jsx(Textarea, { value: v == null ? '' : String(v), onChange: (e) => set(e.target.value) }), onCommit: onChange }));
+}
+function IllustratedLive({ field, value, onChange, label, required, error, }) {
+    const { tKey, iKey } = illustratedSlots(field);
+    const { text, image } = parseIllustrated(value, field);
+    const { width, side } = illustratedLayout(field);
+    const kind = illustratedImageKind(field);
+    const textPart = field.parts?.find((p) => p.role === 'text');
+    const textFixed = textPart != null && textPart.mode !== 'stored';
+    const imagePart = field.parts?.find((p) => p.role === 'image');
+    const imageFixed = imagePart != null && imagePart.mode !== 'stored';
+    const noLabel = field.hints['noLabel'] === true || label === undefined;
+    const write = (nextText, nextImage) => {
+        const t = compositeRoleValue(nextText);
+        const i = compositeRoleValue(nextImage);
+        return onChange(t == null && i == null ? '' : { [tKey]: t, [iKey]: i });
+    };
+    return (_jsxs("div", { className: "group/field relative w-full", children: [!noLabel && _jsx(FieldLabel, { label: label, required: required }), _jsx(IllustratedFloat, { width: width, side: side, picture: _jsx(IllustratedImageCell, { image: image, fixed: imageFixed, width: width, kind: kind, onChange: imageFixed ? undefined : (v) => void write(text, v) }), prose: _jsx(IllustratedTextCell, { text: text, fixed: textFixed, meta: textPart?.meta ?? field, label: label, onChange: textFixed ? undefined : (v) => write(v, image) }) }), _jsx(FieldError, { error: error })] }));
+}
+function IllustratedPage(p) {
+    const { live, write } = useCompositeLiveGate(p);
+    if (live) {
+        return (_jsx(IllustratedLive, { 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(IllustratedBody, { field: p.field, value: v }), edit: (value, onChange) => (_jsx(IllustratedInput, { field: p.field, value: value, onChange: onChange })) }));
+}
+function IllustratedInline({ field, value }) {
+    const { text } = parseIllustrated(value, field);
+    if (text == null || text === '')
+        return _jsx("span", { className: "text-muted", children: "\u2014" });
+    return _jsx("span", { className: "truncate", children: String(text) });
+}
+registerRenderer({
+    kinds: ['illustrated'],
+    layout: 'block',
+    Page: IllustratedPage,
+    Inline: IllustratedInline,
+    editor: 'custom',
+});

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

@@ -0,0 +1,23 @@
+import './text.tsx';
+import './localpath.tsx';
+import './number.tsx';
+import './datetime.tsx';
+import './choice.tsx';
+import './illustrated.tsx';
+import './attachment.tsx';
+import './composite.tsx';
+import './amount.tsx';
+import './file.tsx';
+import './period.tsx';
+import './storage-group.tsx';
+import '../widgets/group-widgets.tsx';
+import './layout-elements.tsx';
+import './tristate.tsx';
+import './stepper.tsx';
+import './money.tsx';
+import './range.tsx';
+import './source.tsx';
+import './embed.tsx';
+import './reminder.tsx';
+import './weight.tsx';
+import './dimensions.tsx';

package/dist/render/core/index.js

@@ -0,0 +1,23 @@
+import "./text.js";
+import "./localpath.js";
+import "./number.js";
+import "./datetime.js";
+import "./choice.js";
+import "./illustrated.js";
+import "./attachment.js";
+import "./composite.js";
+import "./amount.js";
+import "./file.js";
+import "./period.js";
+import "./storage-group.js";
+import "../widgets/group-widgets.js";
+import "./layout-elements.js";
+import "./tristate.js";
+import "./stepper.js";
+import "./money.js";
+import "./range.js";
+import "./source.js";
+import "./embed.js";
+import "./reminder.js";
+import "./weight.js";
+import "./dimensions.js";

package/dist/render/core/layout-elements.d.ts

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

package/dist/render/core/layout-elements.js

@@ -0,0 +1,78 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { toast } from 'sonner';
+import { registerRenderer } from "../../registry.js";
+import { Button } from "../../components/ui/button.js";
+import { Icon } from "../../components/Icon.js";
+import { Dialog, DialogContent, DialogHeader } from "../../components/ui/dialog.js";
+import { resolveAction } from "../../actions/registry.js";
+import { TemplateHost } from "../../actions/TemplateHost.js";
+import { PopupBody } from "../../actions/PopupBody.js";
+import { SectionShell, LabelledDivider } from "../../layout.js";
+import { groupIcon } from "../chrome.js";
+import Markdown from "../../Markdown.js";
+function DividerPage({ el }) {
+    const label = el?.label;
+    return label ? _jsx(LabelledDivider, { label: label }) : _jsx("hr", { className: "border-border" });
+}
+function InfoPage({ el }) {
+    const { t } = useTranslation();
+    return (_jsx("div", { className: "rounded-lg border border-border/60 bg-muted/15 px-4 py-3 text-sm text-text", children: _jsx(Markdown, { value: t(el.text) }) }));
+}
+function ButtonPage(props) {
+    const { t } = useTranslation();
+    const el = props.el;
+    const ctx = props.recordCtx;
+    const [loading, setLoading] = useState(false);
+    const [popup, setPopup] = useState(null);
+    const show = (ui) => {
+        if (ui.kind === 'popup') {
+            setPopup(ui);
+            return;
+        }
+        const body = ui.component ? (_jsx(TemplateHost, { name: ui.component.name, data: ui.component.data })) : (t(ui.message ?? '', ui.params));
+        if (ui.variant === 'success')
+            toast.success(body);
+        else if (ui.variant === 'error')
+            toast.error(body);
+        else
+            toast(body);
+    };
+    const run = async () => {
+        const handler = resolveAction(el.value);
+        if (!handler) {
+            toast.error(t('actions.actionNotFound'));
+            return;
+        }
+        setLoading(true);
+        try {
+            const res = await handler({ library: ctx.library, shelf: ctx.shelf, recordId: ctx.recordId ?? '' });
+            if (res)
+                show(res);
+            else
+                toast.success(t('actions.actionSuccess'));
+        }
+        catch (e) {
+            const ui = e.ui;
+            if (ui)
+                show(ui);
+            else
+                toast.error(e instanceof Error ? e.message : t('actions.actionError'));
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    return (_jsxs("div", { className: "flex items-center gap-3 min-w-0", children: [_jsxs(Button, { variant: el.variant ?? 'outline', onClick: run, disabled: loading, className: "max-w-full min-w-0", children: [loading ? (_jsx("span", { className: "animate-spin inline-block w-4 h-4 border-2 border-current/30 border-t-current rounded-full" })) : (el.icon && _jsx(Icon, { name: el.icon, size: 16 })), _jsx("span", { className: "truncate", children: t(el.label) })] }), _jsx(Dialog, { open: !!popup, onOpenChange: (o) => !o && setPopup(null), children: _jsx(DialogContent, { children: _jsx(DialogHeader, { children: popup && _jsx(PopupBody, { ui: popup }) }) }) })] }));
+}
+function GroupPage({ el, children }) {
+    const { t } = useTranslation();
+    const g = el;
+    const label = g.label ? t(g.label) : undefined;
+    return (_jsx(SectionShell, { label: label, icon: groupIcon(g), children: children }));
+}
+registerRenderer({ kinds: ['divider'], layout: 'block', Page: DividerPage });
+registerRenderer({ kinds: ['info'], layout: 'block', Page: InfoPage });
+registerRenderer({ kinds: ['button'], layout: 'scalar', Page: ButtonPage });
+registerRenderer({ kinds: ['group'], layout: 'block', Page: GroupPage, editor: 'custom' });

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

@@ -0,0 +1,6 @@
+export declare function splitPath(input: string): {
+    dirPrefix: string;
+    partial: string;
+};
+export declare function joinPath(dir: string, name: string): string;
+export declare function parentPath(dir: string): string;

package/dist/render/core/localpath.js

@@ -0,0 +1,73 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Folder, FileText, ChevronRight, CornerLeftUp, Check, Eye, EyeOff } from 'lucide-react';
+import { Input } from "../../components/ui/input.js";
+import { Button } from "../../components/ui/button.js";
+import { Popover, PopoverTrigger, PopoverContent } from "../../components/ui/popover.js";
+import { ScrollArea } from "../../components/ui/scroll-area.js";
+import { registerRenderer } from "../../registry.js";
+import { listDir } from "../../host-services.js";
+import { hasValue, trunc, Dash } from "../shared.js";
+import { FieldFrame } from "../field-frame.js";
+export function splitPath(input) {
+    const i = input.lastIndexOf('/');
+    if (i < 0)
+        return { dirPrefix: '', partial: input };
+    return { dirPrefix: input.slice(0, i), partial: input.slice(i + 1) };
+}
+export function joinPath(dir, name) {
+    return `${dir.replace(/\/+$/, '')}/${name}`;
+}
+export function parentPath(dir) {
+    const d = dir.replace(/\/+$/, '');
+    const i = d.lastIndexOf('/');
+    if (i < 0)
+        return '~';
+    return d.slice(0, i) || '/';
+}
+function PathBrowser({ dirsOnly, exts, initialDir, onPick, }) {
+    const { t } = useTranslation();
+    const [dir, setDir] = useState(initialDir || '~');
+    const [entries, setEntries] = useState([]);
+    const [showHidden, setShowHidden] = useState(false);
+    const [failed, setFailed] = useState(false);
+    useEffect(() => {
+        let off = false;
+        setFailed(false);
+        listDir(dir, !dirsOnly ? exts : undefined)
+            .then((es) => {
+            if (!off)
+                setEntries(es);
+        })
+            .catch((error) => {
+            if (off)
+                return;
+            console.error('[localpath] listDir failed:', error);
+            setEntries([]);
+            setFailed(true);
+        });
+        return () => {
+            off = true;
+        };
+    }, [dir, dirsOnly, exts]);
+    const visible = entries.filter((e) => (dirsOnly ? e.isDir : true) && (showHidden || !e.name.startsWith('.')));
+    return (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx(Button, { variant: "ghost", size: "iconSm", onClick: () => setDir(parentPath(dir)), "aria-label": "up", disabled: dir === '~' || dir === '/', children: _jsx(CornerLeftUp, { size: 15 }) }), _jsx("span", { className: "flex-1 truncate font-mono text-xs text-muted", title: dir, children: dir }), _jsx(Button, { variant: "ghost", size: "iconSm", onClick: () => setShowHidden((v) => !v), "aria-label": "hidden", title: showHidden ? 'Hide dotfiles' : 'Show dotfiles', children: showHidden ? _jsx(Eye, { size: 15 }) : _jsx(EyeOff, { size: 15 }) })] }), _jsx(ScrollArea, { className: "h-56 -mx-1 px-1", children: _jsxs("div", { className: "flex flex-col", children: [failed ? (_jsx("span", { className: "px-2 py-3 text-xs text-danger", children: t('localpath.listFailed') })) : (visible.length === 0 && _jsx("span", { className: "px-2 py-3 text-xs text-muted", children: "\u2014" })), visible.map((e) => (_jsxs("div", { className: "group flex items-center rounded-md hover:bg-elevated", children: [_jsxs("button", { type: "button", className: "flex min-w-0 flex-1 items-center gap-2 px-2 py-1.5 text-left text-sm", onClick: () => (e.isDir ? setDir(joinPath(dir, e.name)) : onPick(joinPath(dir, e.name), false)), children: [e.isDir ? (_jsx(Folder, { size: 15, className: "shrink-0 text-muted" })) : (_jsx(FileText, { size: 15, className: "shrink-0 text-muted" })), _jsx("span", { className: "truncate", children: e.name }), e.isDir && (_jsx(ChevronRight, { size: 14, className: "ml-auto shrink-0 text-muted opacity-0 group-hover:opacity-100" }))] }), dirsOnly && e.isDir && (_jsx(Button, { variant: "ghost", size: "iconSm", className: "mr-1", onClick: () => onPick(joinPath(dir, e.name), true), "aria-label": "select", title: "Select folder", children: _jsx(Check, { size: 15 }) }))] }, e.name)))] }) }), dirsOnly && (_jsxs(Button, { variant: "outline", size: "sm", onClick: () => onPick(dir, true), children: [_jsx(Check, { size: 14 }), " Choose this directory"] }))] }));
+}
+function LocalPathInput({ name, field, value, onChange, }) {
+    const dirsOnly = field.kind === 'localDir';
+    const exts = field.hints['exts'];
+    const [open, setOpen] = useState(false);
+    return (_jsxs("div", { className: "flex items-stretch gap-1.5", children: [_jsx(Input, { id: name, value: value, onChange: (e) => onChange(e.target.value), placeholder: "~/\u2026", spellCheck: false, autoComplete: "off" }), _jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(Button, { type: "button", variant: "outline", size: "icon", "aria-label": "browse", children: _jsx(Folder, { size: 16 }) }) }), _jsx(PopoverContent, { align: "end", className: "w-80 p-3", children: open && (_jsx(PathBrowser, { dirsOnly: dirsOnly, exts: exts, initialDir: splitPath(value).dirPrefix || '~', onPick: (path, isDir) => {
+                                onChange(isDir ? `${path.replace(/\/+$/, '')}/` : path);
+                                if (!isDir)
+                                    setOpen(false);
+                            } })) })] })] }));
+}
+function PathPage(p) {
+    return (_jsx(FieldFrame, { field: p.field, value: p.value, label: p.label, required: p.required, error: p.error, mode: p.mode, geom: "inline", bare: p.bare, view: (v) => (hasValue(v) ? _jsx("span", { className: "font-mono text-sm break-all", children: String(v) }) : _jsx(Dash, {})), edit: (value, onChange) => (_jsx(LocalPathInput, { name: `field-${p.field.label}`, field: p.field, value: String(value), onChange: onChange })) }));
+}
+function PathInline({ value }) {
+    return _jsx("span", { className: "font-mono truncate", children: trunc(String(value ?? '')) });
+}
+registerRenderer({ kinds: ['localDir', 'localFile'], Page: PathPage, Inline: PathInline });

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

@@ -0,0 +1 @@
+export declare function fmtMoney(value: unknown, currency?: string): string;

package/dist/render/core/money.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { NumericFormat } from 'react-number-format';
+import { currencySymbol } from '@coffer-org/sdk/currencies';
+import { Input } from "../../components/ui/input.js";
+import { registerRenderer } from "../../registry.js";
+import { FieldFrame } from "../field-frame.js";
+import { Dash } from "../shared.js";
+function currencyOf(field) {
+    const c = field.hints['currencyValue'];
+    return typeof c === 'string' && c ? c : undefined;
+}
+export function fmtMoney(value, currency) {
+    if (value == null || value === '' || Number.isNaN(Number(value)))
+        return '';
+    const n = Number(value);
+    if (!currency)
+        return new Intl.NumberFormat(undefined, { maximumFractionDigits: 2 }).format(n);
+    try {
+        return new Intl.NumberFormat(undefined, { style: 'currency', currency }).format(n);
+    }
+    catch {
+        return `${new Intl.NumberFormat(undefined, { maximumFractionDigits: 2 }).format(n)} ${currencySymbol(currency)}`;
+    }
+}
+function MoneyView({ value, field }) {
+    const s = fmtMoney(value, currencyOf(field));
+    return s ? _jsx("span", { className: "tabular-nums", children: s }) : _jsx(Dash, {});
+}
+function MoneyInput({ field, value, onChange }) {
+    const cur = currencyOf(field);
+    return (_jsxs("div", { className: "flex items-center gap-2 min-w-0", children: [_jsx(NumericFormat, { customInput: Input, className: "flex-1 min-w-0", value: value == null || value === '' ? '' : Number(value), thousandSeparator: true, decimalScale: 2, min: field.hints['min'], max: field.hints['max'], placeholder: "0.00", onValueChange: (vals) => onChange(vals.value === '' ? '' : (vals.floatValue ?? '')) }), cur && _jsx("span", { className: "shrink-0 text-xs text-muted", children: currencySymbol(cur) })] }));
+}
+function MoneyPage(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-40", bare: p.bare, view: (v) => _jsx(MoneyView, { value: v, field: p.field }), edit: (value, onChange) => (_jsx(MoneyInput, { field: p.field, value: value, onChange: onChange })) }));
+}
+function MoneyInline({ value, field }) {
+    return _jsx(MoneyView, { value: value, field: field });
+}
+registerRenderer({ kinds: ['money'], Page: MoneyPage, Inline: MoneyInline });

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import type { FieldMeta } from '@coffer-org/sdk/fields';
+interface FieldInputProps {
+    name: string;
+    field: FieldMeta;
+    value: unknown;
+    onChange: (v: number | string) => void;
+}
+export declare function numberChipContent(item: unknown): React.ReactNode;
+export declare function NumberInput({ name, field, value, onChange }: FieldInputProps): React.JSX.Element;
+export declare function RatingControl({ value, onChange, field, }: {
+    value: unknown;
+    onChange?: (v: number | string) => void;
+    field: FieldMeta;
+}): React.JSX.Element;
+export declare function DurationInput({ value, onChange, field }: FieldInputProps): React.JSX.Element;
+export {};

package/dist/render/core/number.js

@@ -0,0 +1,104 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { NumericFormat } from 'react-number-format';
+import { Input } from "../../components/ui/input.js";
+import { Rating, RatingItem } from "../../components/ui/rating.js";
+import { InputGroup, InputGroupAddon, InputGroupInput, InputGroupText } from "../../components/ui/input-group.js";
+import { registerRenderer } from "../../registry.js";
+import { MultiTagInput, MultipleChips, Dash, useTranslation, orDash } from "../shared.js";
+import { parseJSON } from "../../lib/json.js";
+import { formatDuration } from "../../lib/format.js";
+import { FieldFrame } from "../field-frame.js";
+import { EDIT_INLINE_PAD } from "../chrome.js";
+import { Icon } from "../../components/Icon.js";
+export function numberChipContent(item) {
+    return _jsx("span", { className: "font-mono", children: String(item) });
+}
+export function NumberInput({ name, field, value, onChange }) {
+    const h = field.hints;
+    if (field.hints['multiple'] === true) {
+        return (_jsx(MultiTagInput, { value: value, onChange: onChange, validate: (v) => !isNaN(Number(v)) && v !== '', display: numberChipContent, renderInput: (v, set, add) => (_jsx(Input, { type: "number", value: v, onChange: (e) => set(e.target.value), placeholder: "0", className: "flex-1", onKeyDown: (e) => {
+                    if (e.key === 'Enter') {
+                        e.preventDefault();
+                        add();
+                    }
+                } })) }));
+    }
+    return (_jsx(NumericFormat, { customInput: Input, id: name, value: value === '' || value == null ? '' : String(value), thousandSeparator: true, decimalScale: field.column === 'integer' ? 0 : undefined, min: h.min, max: h.max, step: h.step, onValueChange: (vals) => onChange(vals.floatValue ?? ''), placeholder: "0" }));
+}
+function NumberValue({ value }) {
+    return _jsx(_Fragment, { children: numberChipContent(value) });
+}
+function NumberDisplay({ field, value }) {
+    if (field.hints['multiple'] === true) {
+        return _jsx(MultipleChips, { items: parseJSON(value, []), content: numberChipContent });
+    }
+    return orDash(value, (v) => _jsx("span", { children: String(v) }));
+}
+function NumberPage(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(NumberDisplay, { field: p.field, value: v }), edit: (value, onChange) => (_jsx(NumberInput, { name: `field-${p.field.label}`, field: p.field, value: value, onChange: onChange })) }));
+}
+registerRenderer({ kinds: ['number'], Page: NumberPage, Value: NumberValue });
+const ratingStars = (max) => Array.from({ length: max }, (_, i) => (_jsx(RatingItem, { className: "size-5 text-yellow-400 data-[state=empty]:text-border" }, i)));
+export function RatingControl({ value, onChange, field, }) {
+    const max = Number(field.hints['max'] ?? 5);
+    const current = value ? Number(value) : 0;
+    return (_jsx("div", { className: `flex items-center min-h-9${onChange ? '' : ' pointer-events-none'}`, children: _jsx(Rating, { value: current, max: max, clearable: true, readOnly: !onChange, activationMode: "manual", onValueChange: (v) => onChange?.(v === 0 ? '' : v), "aria-label": field.label, children: ratingStars(max) }) }));
+}
+function RatingValue({ field, value }) {
+    return _jsx(RatingControl, { field: field, value: value });
+}
+function RatingPicker({ field, draft, save }) {
+    return _jsx(RatingControl, { field: field, value: draft, onChange: (v) => save(v) });
+}
+function RatingPage(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-fit", bare: p.bare, view: (v) => _jsx(RatingControl, { field: p.field, value: v }), edit: (v, onChange) => _jsx(RatingControl, { field: p.field, value: v, onChange: onChange }) }));
+}
+function RatingInline({ value }) {
+    const n = Number(value);
+    return (_jsx("span", { className: "inline-flex items-center gap-0.5 truncate", children: Number.isNaN(n) || !n ? ('—') : (_jsxs(_Fragment, { children: [_jsx(Icon, { name: "lucide:star", size: 12, className: "fill-current text-yellow-400" }), n] })) }));
+}
+registerRenderer({
+    kinds: ['rating'],
+    Page: RatingPage,
+    Inline: RatingInline,
+    Value: RatingValue,
+    Picker: RatingPicker,
+});
+export function DurationInput({ value, onChange, field }) {
+    const { t } = useTranslation();
+    const step = Number(field.hints['step'] ?? 60);
+    const secs = value ? Number(value) : 0;
+    const d = Math.floor(secs / 86400);
+    const h = Math.floor((secs % 86400) / 3600);
+    const m = Math.floor((secs % 3600) / 60);
+    const s = secs % 60;
+    const showSeconds = step < 60;
+    function commit(days, hours, minutes, seconds) {
+        const total = Math.max(0, days * 86400 + hours * 3600 + minutes * 60 + seconds);
+        onChange(total > 0 ? total : '');
+    }
+    const Unit = ({ val, unit, ...rest }) => (_jsxs(InputGroup, { className: "w-[5.25rem]", children: [_jsx(InputGroupInput, { type: "number", value: val || '', min: 0, placeholder: "0", ...rest }), _jsx(InputGroupAddon, { align: "inline-end", children: _jsx(InputGroupText, { children: unit }) })] }));
+    return (_jsxs("div", { className: `flex items-center gap-2 flex-wrap ${EDIT_INLINE_PAD}`, children: [_jsx(Unit, { val: d, unit: t('form.days'), onChange: (e) => commit(Number(e.target.value) || 0, h, m, s) }), _jsx(Unit, { val: h, unit: t('form.hours'), max: 23, onChange: (e) => commit(d, Number(e.target.value) || 0, m, s) }), _jsx(Unit, { val: m, unit: t('form.minutes'), max: 59, step: showSeconds ? 1 : Math.max(1, Math.floor(step / 60)), onChange: (e) => commit(d, h, Number(e.target.value) || 0, s) }), showSeconds && (_jsx(Unit, { val: s, unit: t('form.seconds'), max: 59, step: step, onChange: (e) => commit(d, h, m, Number(e.target.value) || 0) }))] }));
+}
+function DurationDisplay({ value }) {
+    const { t } = useTranslation();
+    const secs = Number(value);
+    if (!secs || Number.isNaN(secs))
+        return _jsx(Dash, {});
+    return _jsx("span", { className: "text-sm", children: formatDuration(secs, t) });
+}
+function DurationPage(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-fit", bare: p.bare, view: (v) => _jsx(DurationDisplay, { field: p.field, value: v }), edit: (value, onChange) => (_jsx(DurationInput, { name: `field-${p.field.label}`, field: p.field, value: value, onChange: onChange })) }));
+}
+function DurationInline({ value }) {
+    const { t } = useTranslation();
+    const secs = Number(value);
+    if (!secs || Number.isNaN(secs))
+        return _jsx("span", { children: "\u2014" });
+    return _jsx("span", { className: "truncate", children: formatDuration(secs, t) });
+}
+registerRenderer({
+    kinds: ['duration'],
+    Page: DurationPage,
+    Inline: DurationInline,
+});

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

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

package/dist/render/core/period.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { RowWidget } from "../widgets/edit.js";
+import { registerRenderer } from "../../registry.js";
+import { partValueKeys } from '@coffer-org/sdk/fields';
+import { useTranslation, MultipleChips } from "../shared.js";
+import { FieldFrame } from "../field-frame.js";
+function periodSlots(field) {
+    const slots = partValueKeys(field.parts ?? []);
+    return { fromKey: slots['from'] ?? 'from', untilKey: slots['until'] ?? 'until' };
+}
+function toRanges(value) {
+    if (Array.isArray(value))
+        return value;
+    if (value && typeof value === 'object' && Object.keys(value).length)
+        return [value];
+    if (typeof value === 'string' && value) {
+        try {
+            const v = JSON.parse(value);
+            if (Array.isArray(v))
+                return v;
+            if (v && typeof v === 'object' && Object.keys(v).length)
+                return [v];
+        }
+        catch {
+        }
+    }
+    return [];
+}
+function fmtPart(s, granularity) {
+    if (!s)
+        return '…';
+    return granularity === 'datetime' ? String(s).replace('T', ' ') : String(s);
+}
+function fmtRange(p, granularity, fromKey, untilKey) {
+    return `${fmtPart(p[fromKey], granularity)}–${fmtPart(p[untilKey], granularity)}`;
+}
+function PeriodInput({ field, value, onChange }) {
+    const { t } = useTranslation();
+    return _jsx(RowWidget, { value: value, onChange: onChange, field: field, t: t });
+}
+function PeriodDisplay({ field, value }) {
+    const granularity = field.hints['granularity'] ?? 'day';
+    const { fromKey, untilKey } = periodSlots(field);
+    const ranges = toRanges(value);
+    return (_jsx(MultipleChips, { items: ranges, content: (p) => _jsx("span", { className: "font-mono", children: fmtRange(p, granularity, fromKey, untilKey) }) }));
+}
+function PeriodPage(p) {
+    return (_jsx(FieldFrame, { field: p.field, value: p.value, label: p.label, required: p.required, error: p.error, mode: p.mode, geom: "inline", bare: p.bare, view: (v) => _jsx(PeriodDisplay, { field: p.field, value: v }), edit: (value, onChange) => (_jsx(PeriodInput, { name: `field-${p.field.label}`, field: p.field, value: value, onChange: onChange })) }));
+}
+function PeriodInline({ value, field }) {
+    const granularity = field.hints['granularity'] ?? 'day';
+    const { fromKey, untilKey } = periodSlots(field);
+    const ranges = toRanges(value);
+    return (_jsx("span", { className: "truncate", children: ranges.length ? ranges.map((p) => fmtRange(p, granularity, fromKey, untilKey)).join(', ') : '—' }));
+}
+registerRenderer({
+    kinds: ['period'],
+    Page: PeriodPage,
+    Inline: PeriodInline,
+});

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

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