@coffer-org/web-ui 4.0.0

package/dist/render/core/datetime.js

@@ -0,0 +1,215 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Input } from "../../components/ui/input.js";
+import { registerRenderer } from "../../registry.js";
+import { MultiTagInput, MultipleChips, Dash, orDash, useTranslation } from "../shared.js";
+import { Icon } from "../../components/Icon.js";
+import { parseJSON } from "../../lib/json.js";
+import { DatePicker } from "../../components/ui/date-picker.js";
+import { YearPicker, MonthPicker, YearGridPanel, MonthGridPanel } from "../../components/ui/month-year-picker.js";
+import { TimePicker, TimePickerInputGroup, TimePickerInput, TimePickerSeparator, TimePickerTrigger, TimePickerContent, TimePickerHour, TimePickerMinute, TimePickerSecond, TimePickerClear, } from "../../components/ui/time-picker.js";
+import { isoToDisplay, isoDateTimeToDisplay, splitDateTime, joinDateTime, isoToDate, dateToIso, } from "../../lib/date-format.js";
+import { Calendar } from "../../components/ui/calendar.js";
+import { Button } from "../../components/ui/button.js";
+import { OptionList } from "../option-list.js";
+import { FieldFrame } from "../field-frame.js";
+function gran(hints, def) {
+    return hints['granularity'] ?? def;
+}
+function dtLocal(v, granularity = 'minute') {
+    const s = String(v ?? '');
+    if (granularity === 'second')
+        return s.length > 19 ? s.slice(0, 19) : s;
+    if (granularity === 'hour')
+        return s.length > 13 ? s.slice(0, 13) : s;
+    return s.length > 16 ? s.slice(0, 16) : s;
+}
+function dateChipContent(icon, format) {
+    return function DateChip(item) {
+        return (_jsxs(_Fragment, { children: [_jsx(Icon, { name: icon, size: 13, className: "shrink-0 text-muted" }), _jsx("span", { children: format ? format(String(item)) : String(item) })] }));
+    };
+}
+function DateChips({ value, format, icon }) {
+    const items = parseJSON(value, []);
+    return _jsx(MultipleChips, { items: items, content: dateChipContent(icon, format) });
+}
+function DateValue({ value }) {
+    return _jsx(_Fragment, { children: dateChipContent('lucide:calendar')(value) });
+}
+function DateTimeValue({ value }) {
+    return _jsx(_Fragment, { children: dateChipContent('lucide:calendar-clock', (s) => s.replace('T', ' '))(value) });
+}
+function DateDisplay({ field, value }) {
+    if (field.hints['multiple'] === true)
+        return _jsx(DateChips, { value: value, icon: "lucide:calendar" });
+    return orDash(value, (v) => {
+        const g = gran(field.hints, 'day');
+        return _jsx("span", { children: g === 'month' || g === 'year' ? String(v) : isoToDisplay(String(v)) || String(v) });
+    });
+}
+function DateInput({ name, field, value, onChange }) {
+    const g = gran(field.hints, 'day');
+    const inputType = g === 'month' ? 'month' : g === 'year' ? 'number' : 'date';
+    if (field.hints['multiple'] === true) {
+        return (_jsx(MultiTagInput, { value: value, onChange: onChange, display: dateChipContent('lucide:calendar'), renderInput: (v, set, add) => (_jsx(Input, { type: inputType, value: v, onChange: (e) => set(e.target.value), className: "flex-1", onKeyDown: (e) => {
+                    if (e.key === 'Enter') {
+                        e.preventDefault();
+                        add();
+                    }
+                } })) }));
+    }
+    const single = typeof value === 'string' ? value : String(value ?? '');
+    if (g === 'year')
+        return _jsx(YearPicker, { value: single, onChange: onChange });
+    if (g === 'month')
+        return _jsx(MonthPicker, { value: single, onChange: onChange });
+    return _jsx(DatePicker, { value: single, onChange: onChange });
+}
+function DatePage(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(DateDisplay, { field: p.field, value: v }), edit: (value, onChange) => (_jsx(DateInput, { name: `field-${p.field.label}`, field: p.field, value: value, onChange: onChange })) }));
+}
+function dateKeys(value, field) {
+    if (value == null || value === '')
+        return [];
+    const g = gran(field.hints, 'day');
+    const s = String(value);
+    const label = g === 'year' || g === 'month' ? s : isoToDisplay(s) || s;
+    return [{ value: s, rawValue: value, label }];
+}
+export function DatePickerBody({ field, draft, save }) {
+    const g = gran(field.hints, 'day');
+    const single = typeof draft === 'string' ? draft : String(draft ?? '');
+    if (g === 'year')
+        return _jsx(YearGridPanel, { value: single, onChange: (v) => save(v) });
+    if (g === 'month')
+        return _jsx(MonthGridPanel, { value: single, onChange: (v) => save(v) });
+    const date = isoToDate(single);
+    return (_jsx(Calendar, { mode: "single", selected: date, captionLayout: "dropdown", defaultMonth: date, className: "w-full", onSelect: (d) => save(d ? dateToIso(d) : '') }));
+}
+registerRenderer({
+    kinds: ['date'],
+    Page: DatePage,
+    Value: DateValue,
+    Picker: DatePickerBody,
+    keys: dateKeys,
+});
+const TIME_VALIDATE = {
+    hour: /^([01]\d|2[0-3])$/,
+    minute: /^([01]\d|2[0-3]):[0-5]\d$/,
+    second: /^([01]\d|2[0-3]):[0-5]\d:[0-5]\d$/,
+};
+function TimeDisplay({ field, value }) {
+    if (field.hints['multiple'] !== true && (value == null || value === ''))
+        return _jsx(Dash, {});
+    return field.hints['multiple'] === true ? (_jsx(DateChips, { value: value, icon: "lucide:clock" })) : (_jsx("span", { className: "font-mono text-sm", children: String(value) }));
+}
+function TimeInput({ name, field, value, onChange }) {
+    const g = gran(field.hints, 'second');
+    const step = g === 'second' ? 1 : g === 'minute' ? 60 : 3600;
+    if (field.hints['multiple'] === true) {
+        return (_jsx(MultiTagInput, { value: value, onChange: onChange, validate: (v) => TIME_VALIDATE[g]?.test(v) ?? false, display: dateChipContent('lucide:clock'), renderInput: (v, set, add) => (_jsx(Input, { type: "time", step: step, value: v, onChange: (e) => set(e.target.value), className: "w-36", onKeyDown: (e) => {
+                    if (e.key === 'Enter') {
+                        e.preventDefault();
+                        add();
+                    }
+                } })) }));
+    }
+    const single = typeof value === 'string' ? value : String(value ?? '');
+    if (g === 'hour') {
+        return (_jsx(Input, { id: name, type: "time", step: step, value: single, onChange: (e) => onChange(e.target.value), className: `appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none` }));
+    }
+    const withSeconds = g === 'second';
+    return (_jsxs(TimePicker, { value: single, onValueChange: onChange, showSeconds: withSeconds, children: [_jsxs(TimePickerInputGroup, { id: name, children: [_jsx(TimePickerInput, { segment: "hour" }), _jsx(TimePickerSeparator, {}), _jsx(TimePickerInput, { segment: "minute" }), withSeconds && (_jsxs(_Fragment, { children: [_jsx(TimePickerSeparator, {}), _jsx(TimePickerInput, { segment: "second" })] })), _jsx(TimePickerTrigger, {})] }), _jsxs(TimePickerContent, { children: [_jsx(TimePickerHour, {}), _jsx(TimePickerMinute, {}), withSeconds && _jsx(TimePickerSecond, {}), _jsx(TimePickerClear, {})] })] }));
+}
+function TimePage(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(TimeDisplay, { field: p.field, value: v }), edit: (value, onChange) => (_jsx(TimeInput, { name: `field-${p.field.label}`, field: p.field, value: value, onChange: onChange })) }));
+}
+function pad2(n) {
+    return String(n).padStart(2, '0');
+}
+const HOURS = Array.from({ length: 24 }, (_, i) => ({ value: pad2(i), title: pad2(i) }));
+const MINUTES = Array.from({ length: 60 }, (_, i) => ({ value: pad2(i), title: pad2(i) }));
+function ClockColumns({ value, onChange, granularity, }) {
+    const [h = '', m = '', sec = ''] = value.split(':');
+    const withMinutes = granularity !== 'hour';
+    const withSeconds = granularity === 'second';
+    const build = (nh, nm, ns) => {
+        if (!withMinutes)
+            return nh;
+        const base = `${nh || '00'}:${nm || '00'}`;
+        return withSeconds ? `${base}:${ns || '00'}` : base;
+    };
+    const column = (opts, cur, pick) => (_jsx("div", { className: "min-w-0 flex-1", children: _jsx(OptionList, { options: opts, value: cur, multiple: false, literal: true, search: false, onPick: (v) => pick(String(v)) }) }));
+    return (_jsxs("div", { className: "flex min-w-0 gap-1", children: [column(HOURS, h, (v) => onChange(build(v, m, sec))), withMinutes && column(MINUTES, m, (v) => onChange(build(h, v, sec))), withSeconds && column(MINUTES, sec, (v) => onChange(build(h, m, v)))] }));
+}
+function ClockActions({ save, remove, removeLabel }) {
+    const { t } = useTranslation();
+    return (_jsxs("div", { className: "mt-2 flex items-center justify-end gap-2 border-t border-border pt-2", children: [remove && (_jsx(Button, { type: "button", variant: "destructiveOutline", size: "sm", className: "mr-auto", onClick: remove, children: removeLabel ?? t('actions.delete') })), _jsx(Button, { type: "button", size: "sm", onClick: () => save(), children: t('actions.save') })] }));
+}
+function TimePickerBody({ field, draft, setDraft, save, remove, removeLabel }) {
+    const g = gran(field.hints, 'second');
+    const single = typeof draft === 'string' ? draft : String(draft ?? '');
+    return (_jsxs("div", { className: "flex min-w-0 flex-col", children: [_jsx(ClockColumns, { value: single, onChange: setDraft, granularity: g }), _jsx(ClockActions, { save: save, remove: remove, removeLabel: removeLabel })] }));
+}
+function TimeValue({ value }) {
+    return _jsx("span", { className: "font-mono text-sm", children: String(value ?? '') });
+}
+registerRenderer({
+    kinds: ['time'],
+    Page: TimePage,
+    Value: TimeValue,
+    Picker: TimePickerBody,
+});
+const DT_VALIDATE = {
+    hour: /^\d{4}-\d{2}-\d{2}T([01]\d|2[0-3])$/,
+    minute: /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}$/,
+    second: /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}$/,
+};
+function DateTimeDisplay({ field, value }) {
+    if (field.hints['multiple'] !== true && (value == null || value === ''))
+        return _jsx(Dash, {});
+    const g = gran(field.hints, 'minute');
+    return field.hints['multiple'] === true ? (_jsx(DateChips, { value: value, icon: "lucide:calendar-clock", format: (s) => dtLocal(s, g).replace('T', ' ') })) : (_jsx("span", { children: isoDateTimeToDisplay(dtLocal(value, g)) }));
+}
+function DateTimeInput({ name, field, value, onChange }) {
+    const g = gran(field.hints, 'minute');
+    const step = g === 'second' ? 1 : g === 'hour' ? 3600 : 60;
+    if (field.hints['multiple'] === true) {
+        return (_jsx(MultiTagInput, { value: value, onChange: onChange, validate: (v) => DT_VALIDATE[g]?.test(v) ?? false, display: dateChipContent('lucide:calendar-clock', (s) => dtLocal(s, g).replace('T', ' ')), renderInput: (v, set, add) => (_jsx(Input, { type: "datetime-local", step: step, value: v, onChange: (e) => set(e.target.value), className: "w-52", onKeyDown: (e) => {
+                    if (e.key === 'Enter') {
+                        e.preventDefault();
+                        add();
+                    }
+                } })) }));
+    }
+    const { date, time } = splitDateTime(dtLocal(value, g));
+    return (_jsxs("div", { className: "flex gap-2", children: [_jsx(DatePicker, { value: date, onChange: (d) => onChange(joinDateTime(d, time || '00:00')) }), _jsx(Input, { id: name, type: "time", step: step, value: time, onChange: (e) => onChange(joinDateTime(date, e.target.value)), className: `w-32 appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none` })] }));
+}
+function DateTimePage(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(DateTimeDisplay, { field: p.field, value: v }), edit: (value, onChange) => (_jsx(DateTimeInput, { name: `field-${p.field.label}`, field: p.field, value: value, onChange: onChange })) }));
+}
+function DateTimeInline({ value, field }) {
+    const g = gran(field.hints, 'minute');
+    return _jsx("span", { className: "truncate", children: isoDateTimeToDisplay(dtLocal(value, g)) });
+}
+function dateTimeKeys(value, field) {
+    if (value == null || value === '')
+        return [];
+    const g = gran(field.hints, 'minute');
+    const s = dtLocal(value, g);
+    return [{ value: s, rawValue: value, label: isoDateTimeToDisplay(s) }];
+}
+function DateTimePickerBody({ field, draft, setDraft, save, remove, removeLabel }) {
+    const g = gran(field.hints, 'minute');
+    const { date, time } = splitDateTime(dtLocal(draft, g));
+    const day = isoToDate(date);
+    return (_jsxs("div", { className: "flex min-w-0 flex-col gap-2", children: [_jsxs("div", { className: "flex min-w-0 flex-wrap gap-2", children: [_jsx(Calendar, { mode: "single", selected: day, captionLayout: "dropdown", defaultMonth: day, onSelect: (d) => setDraft(joinDateTime(d ? dateToIso(d) : '', time || '00:00')) }), _jsx("div", { className: "min-w-0 flex-1", children: _jsx(ClockColumns, { value: time, onChange: (v) => setDraft(joinDateTime(date, v)), granularity: g }) })] }), _jsx(ClockActions, { save: save, remove: remove, removeLabel: removeLabel })] }));
+}
+registerRenderer({
+    kinds: ['datetime'],
+    pickerSize: 'large',
+    Page: DateTimePage,
+    Picker: DateTimePickerBody,
+    Inline: DateTimeInline,
+    Value: DateTimeValue,
+    keys: dateTimeKeys,
+});

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

@@ -0,0 +1 @@
+export declare function fmtDimensions(v: unknown): string;

package/dist/render/core/dimensions.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Input } from "../../components/ui/input.js";
+import { registerRenderer } from "../../registry.js";
+import { EDIT_INLINE_PAD } from "../chrome.js";
+import { FieldFrame } from "../field-frame.js";
+import { Dash } from "../shared.js";
+function parse(v) {
+    if (v && typeof v === 'object')
+        return v;
+    try {
+        const o = JSON.parse(String(v ?? ''));
+        return o && typeof o === 'object' ? o : {};
+    }
+    catch {
+        return {};
+    }
+}
+export function fmtDimensions(v) {
+    const d = parse(v);
+    if (d.w == null || d.h == null || d.d == null)
+        return '';
+    const cm = (mm) => Number((mm / 10).toFixed(1));
+    return `${cm(d.w)}×${cm(d.h)}×${cm(d.d)} см`;
+}
+function DimInput({ value, onChange }) {
+    const d = parse(value);
+    const set = (k, raw) => {
+        const next = { ...d, [k]: raw === '' ? undefined : Math.round(Number(raw)) };
+        onChange(next.w == null && next.h == null && next.d == null ? '' : next);
+    };
+    const cell = (k, ph) => (_jsx(Input, { type: "number", min: 0, className: "w-20 min-w-0", placeholder: ph, value: d[k] ?? '', onChange: (e) => set(k, e.target.value) }));
+    return (_jsxs("div", { className: `flex items-center gap-1 min-w-0 ${EDIT_INLINE_PAD}`, children: [cell('w', 'Ш'), _jsx("span", { className: "text-muted", children: "\u00D7" }), cell('h', 'В'), _jsx("span", { className: "text-muted", children: "\u00D7" }), cell('d', 'Г'), _jsx("span", { className: "ml-1 text-xs text-muted", children: "\u043C\u043C" })] }));
+}
+function DimView({ value }) {
+    const s = fmtDimensions(value);
+    return s ? _jsx("span", { className: "tabular-nums", children: s }) : _jsx(Dash, {});
+}
+function DimPage(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(DimView, { value: v }), edit: (value, onChange) => _jsx(DimInput, { value: value, onChange: onChange }) }));
+}
+function DimInline({ value }) {
+    return _jsx(DimView, { value: value });
+}
+registerRenderer({ kinds: ['dimensions'], Page: DimPage, Inline: DimInline });

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

@@ -0,0 +1,11 @@
+import { type EmbedRec } from '../../host-services.ts';
+import type { FieldInlineProps } from '../../types.ts';
+export declare function parseEmbeds(value: unknown): EmbedRec[];
+export declare function getHostname(url: string): string;
+export declare function safeHref(url: string): string | undefined;
+export declare function EmbedGallery({ value, onChange, multiple, }: {
+    value: unknown;
+    onChange?: (v: EmbedRec[] | '') => void;
+    multiple?: boolean;
+}): import("react").JSX.Element;
+export declare function EmbedInline(p: FieldInlineProps): import("react").JSX.Element | null;

package/dist/render/core/embed.js

@@ -0,0 +1,99 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Play, Link2, Trash2, ExternalLink } from 'lucide-react';
+import { Button } from "../../components/ui/button.js";
+import { Input } from "../../components/ui/input.js";
+import { Dialog, DialogContent, DialogTitle } from "../../components/ui/dialog.js";
+import { resolveEmbed } from "../../host-services.js";
+import { registerRenderer } from "../../registry.js";
+import { useTranslation } from "../shared.js";
+import { FieldFrame } from "../field-frame.js";
+export function parseEmbeds(value) {
+    const isRec = (x) => !!x && typeof x === 'object' && typeof x.url === 'string';
+    if (Array.isArray(value))
+        return value.filter(isRec);
+    if (isRec(value))
+        return [value];
+    try {
+        const v = JSON.parse(String(value ?? ''));
+        if (Array.isArray(v))
+            return v.filter(isRec);
+        if (isRec(v))
+            return [v];
+        return [];
+    }
+    catch {
+        return [];
+    }
+}
+const playable = (r) => (r.type === 'video' || r.type === 'rich') && !!r.html;
+export function getHostname(url) {
+    try {
+        return new URL(url).hostname;
+    }
+    catch {
+        return url;
+    }
+}
+export function safeHref(url) {
+    try {
+        const parsed = new URL(url);
+        if (parsed.protocol === 'http:' || parsed.protocol === 'https:') {
+            return url;
+        }
+    }
+    catch {
+    }
+    return undefined;
+}
+function EmbedCard({ rec, onOpen, onRemove }) {
+    return (_jsxs("div", { className: "group relative @container", children: [_jsxs("button", { type: "button", onClick: onOpen, className: "flex w-full items-center gap-2 overflow-hidden rounded-lg border border-border text-left @[20rem]:flex-col @[20rem]:items-stretch @[20rem]:gap-0", children: [_jsxs("div", { className: "relative aspect-video w-20 shrink-0 bg-muted/40 @[20rem]:w-full", children: [rec.thumbnail ? (_jsx("img", { src: rec.thumbnail, alt: "", className: "h-full w-full object-cover" })) : (_jsx(Link2, { className: "absolute inset-0 m-auto text-muted", size: 20 })), playable(rec) && (_jsx("span", { className: "absolute inset-0 m-auto flex h-8 w-8 items-center justify-center rounded-full bg-black/60 text-white", children: _jsx(Play, { size: 16 }) }))] }), _jsxs("div", { className: "min-w-0 flex-1 px-2 py-2", children: [_jsx("div", { className: "truncate text-sm font-medium", children: rec.title ?? rec.url }), rec.provider && _jsx("div", { className: "truncate text-xs text-muted", children: rec.provider })] })] }), onRemove && (_jsx(Button, { type: "button", variant: "ghost", size: "iconSm", className: "absolute right-1 top-1 text-muted opacity-0 hover:text-danger group-hover:opacity-100", onClick: onRemove, children: _jsx(Trash2, { size: 13 }) }))] }));
+}
+function EmbedViewCard({ rec }) {
+    const title = rec.title || getHostname(rec.url);
+    const href = safeHref(rec.url);
+    const contentClass = 'group flex items-center gap-2 overflow-hidden rounded-lg border border-border bg-muted/5 px-3 py-2 transition-colors hover:bg-muted/15';
+    const content = (_jsxs(_Fragment, { children: [_jsx("div", { className: "shrink-0 text-muted group-hover:text-text", children: playable(rec) ? _jsx(Play, { size: 16 }) : _jsx(Link2, { size: 16 }) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "truncate text-sm font-medium", children: title }), _jsx("div", { className: "truncate text-xs text-muted", children: rec.url })] })] }));
+    return href ? (_jsx("a", { href: href, target: "_blank", rel: "noopener noreferrer", className: contentClass, children: content })) : (_jsx("div", { className: contentClass, children: content }));
+}
+function EmbedDialog({ rec, onClose }) {
+    const { t } = useTranslation();
+    const href = safeHref(rec.url);
+    return (_jsx(Dialog, { open: true, onOpenChange: (o) => !o && onClose(), children: _jsxs(DialogContent, { className: "max-w-2xl", children: [_jsx(DialogTitle, { className: "truncate", children: rec.title ?? rec.url }), playable(rec) ? (_jsx("iframe", { title: rec.title ?? 'embed', srcDoc: rec.html, sandbox: "allow-scripts allow-presentation", allowFullScreen: true, className: "aspect-video w-full rounded-md border-0" })) : (_jsxs("div", { className: "flex flex-col gap-3", children: [rec.thumbnail && _jsx("img", { src: rec.thumbnail, alt: "", className: "w-full rounded-md" }), rec.description && _jsx("p", { className: "text-sm text-muted", children: rec.description })] })), href && (_jsx("a", { href: href, target: "_blank", rel: "noopener noreferrer", children: _jsxs(Button, { type: "button", variant: "outline", className: "w-full", children: [_jsx(ExternalLink, { size: 15 }), " ", t('embed.open')] }) }))] }) }));
+}
+export function EmbedGallery({ value, onChange, multiple, }) {
+    const { t } = useTranslation();
+    const list = parseEmbeds(value);
+    const [open, setOpen] = useState(null);
+    const [url, setUrl] = useState('');
+    const [busy, setBusy] = useState(false);
+    const [err, setErr] = useState(false);
+    const save = (next) => onChange?.(next.length ? next : '');
+    async function add() {
+        if (busy)
+            return;
+        if (!url.trim())
+            return;
+        setBusy(true);
+        setErr(false);
+        const rec = await resolveEmbed(url.trim());
+        setBusy(false);
+        if (!rec)
+            return setErr(true);
+        save([...list, rec]);
+        setUrl('');
+    }
+    return (_jsxs("div", { className: "flex flex-col gap-2", children: [onChange ? (_jsx("div", { className: "grid grid-cols-1 gap-2 @md:grid-cols-2 @2xl:grid-cols-3", children: list.map((rec, i) => (_jsx(EmbedCard, { rec: rec, onOpen: () => setOpen(rec), onRemove: () => save(list.filter((_, j) => j !== i)) }, `${rec.url}-${i}`))) })) : (list.length > 0 && (_jsx("div", { className: "flex flex-col gap-2", children: list.map((rec, i) => (_jsx(EmbedViewCard, { rec: rec }, `${rec.url}-${i}`))) }))), onChange && (multiple || list.length === 0) && (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsxs("div", { className: "flex gap-2", children: [_jsx(Input, { value: url, placeholder: t('embed.pastePlaceholder'), onChange: (e) => setUrl(e.target.value), onKeyDown: (e) => e.key === 'Enter' && (e.preventDefault(), add()) }), _jsx(Button, { type: "button", variant: "outline", disabled: busy || !url.trim(), onClick: add, children: busy ? '…' : '+' })] }), err && _jsx("span", { className: "text-xs text-danger", children: t('embed.resolveFailed') })] })), open && _jsx(EmbedDialog, { rec: open, onClose: () => setOpen(null) })] }));
+}
+function EmbedPage(p) {
+    const multiple = p.field.hints['multiple'] === true;
+    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(EmbedGallery, { value: v, multiple: multiple }), edit: (v, onChange) => (_jsx(EmbedGallery, { value: v, onChange: onChange, multiple: multiple })) }));
+}
+export function EmbedInline(p) {
+    const list = parseEmbeds(p.value);
+    if (list.length === 0)
+        return null;
+    const first = list[0];
+    return (_jsxs("span", { className: "inline-flex min-w-0 items-center gap-1", children: [playable(first) ? _jsx(Play, { size: 12 }) : _jsx(Link2, { size: 12 }), _jsx("span", { className: "truncate", children: first.title ?? getHostname(first.url) }), list.length > 1 && _jsxs("span", { className: "text-muted", children: ["+", list.length - 1] })] }));
+}
+registerRenderer({ kinds: ['embed'], layout: 'block', Page: EmbedPage, Inline: EmbedInline, pickerSize: 'large' });

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

@@ -0,0 +1,12 @@
+import { type FileRec } from '../image.tsx';
+export type FilePreviewKind = 'pdf' | 'text';
+export declare function filePreviewKind(rec: FileRec): FilePreviewKind | null;
+export declare function SingleFileWidget({ kind, value, onChange, }: {
+    kind: string;
+    value: unknown;
+    onChange: (v: FileRec | '') => void;
+}): import("react").JSX.Element;
+export declare function ReadOnlyFiles({ kind, value }: {
+    kind: string;
+    value: unknown;
+}): import("react").JSX.Element;

package/dist/render/core/file.js

@@ -0,0 +1,238 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { FileText, Download, Trash2, Music, Film, Eye } from 'lucide-react';
+import { mediaUrl } from "../../host-services.js";
+import { Button } from "../../components/ui/button.js";
+import { confirmDialog } from "../../components/ui/confirm.js";
+import { Dialog, DialogBody, DialogContent, DialogHeader, DialogTitle } from "../../components/ui/dialog.js";
+import { registerRenderer, multiBlock } from "../../registry.js";
+import { useTranslation, UploadButton, Dash } from "../shared.js";
+import { useFileUpload } from "../use-file-upload.js";
+import { FieldFrame } from "../field-frame.js";
+import { useHybridScope } from "../hybrid-scope.js";
+import { ImageWidget, ImagesWidget, ImageInline, GalleryView, AvatarView, CoverView, AvatarWidget, CoverWidget, AvatarInline, parseFileRecs, } from "../image.js";
+function confirmDeleteFile(t) {
+    return confirmDialog({
+        title: t('actions.confirmDelete'),
+        confirmLabel: t('actions.delete'),
+        variant: 'destructive',
+    });
+}
+function fileSizeLabel(size) {
+    if (size == null)
+        return null;
+    return size >= 1024 * 1024 ? `${(size / 1024 / 1024).toFixed(1)} MB` : `${Math.round(size / 1024)} KB`;
+}
+const TEXT_PREVIEW_EXT = /\.(txt|md|markdown|csv|json|xml|log|yaml|yml|ini|toml|js|jsx|ts|tsx|css|html)$/i;
+export function filePreviewKind(rec) {
+    const mime = rec.mime?.toLowerCase().split(';', 1)[0];
+    if (mime === 'application/pdf' || /\.pdf$/i.test(rec.name))
+        return 'pdf';
+    if (mime?.startsWith('text/') ||
+        mime === 'application/json' ||
+        mime === 'application/xml' ||
+        TEXT_PREVIEW_EXT.test(rec.name))
+        return 'text';
+    return null;
+}
+const MAX_TEXT_PREVIEW = 1_000_000;
+function FilePreviewDialog({ rec, kind, onClose }) {
+    const { t } = useTranslation();
+    const [text, setText] = useState(null);
+    const [failed, setFailed] = useState(false);
+    useEffect(() => {
+        if (kind !== 'text')
+            return;
+        const controller = new AbortController();
+        setText(null);
+        setFailed(false);
+        fetch(mediaUrl(rec.name), { signal: controller.signal })
+            .then((response) => {
+            if (!response.ok)
+                throw new Error(`preview_${response.status}`);
+            return response.text();
+        })
+            .then((body) => setText(body.length > MAX_TEXT_PREVIEW
+            ? `${body.slice(0, MAX_TEXT_PREVIEW)}\n\n${t('files.previewTruncated')}`
+            : body))
+            .catch((error) => {
+            if (error?.name !== 'AbortError')
+                setFailed(true);
+        });
+        return () => controller.abort();
+    }, [kind, rec.name, t]);
+    return (_jsx(Dialog, { open: true, onOpenChange: (open) => !open && onClose(), children: _jsxs(DialogContent, { className: "h-[88dvh] max-w-5xl overflow-hidden md:h-[85dvh]", children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { className: "truncate pr-8", children: rec.name }) }), _jsx(DialogBody, { children: kind === 'pdf' ? (_jsx("iframe", { title: rec.name, src: mediaUrl(rec.name), className: "h-full w-full rounded-lg border border-border bg-white" })) : failed ? (_jsx("div", { className: "flex h-full items-center justify-center text-sm text-danger", children: t('files.previewFailed') })) : text === null ? (_jsx("div", { className: "flex h-full items-center justify-center text-sm text-muted", children: t('files.loadingPreview') })) : (_jsx("pre", { className: "h-full overflow-auto whitespace-pre-wrap break-words rounded-lg border border-border bg-bg p-4 font-mono text-xs leading-relaxed", children: text })) })] }) }));
+}
+function FilePreviewButton({ rec }) {
+    const { t } = useTranslation();
+    const kind = filePreviewKind(rec);
+    const [open, setOpen] = useState(false);
+    if (!kind)
+        return null;
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { type: "button", variant: "ghost", size: "iconSm", className: "text-muted hover:text-accent", title: t('files.preview'), "aria-label": t('files.preview'), onClick: () => setOpen(true), children: _jsx(Eye, { size: 15 }) }), open && _jsx(FilePreviewDialog, { rec: rec, kind: kind, onClose: () => setOpen(false) })] }));
+}
+function FileRowContent({ rec }) {
+    return (_jsxs(_Fragment, { children: [_jsx(FileText, { size: 16, className: "text-muted shrink-0" }), _jsx("span", { className: "min-w-0 flex-1 truncate text-sm", children: rec.name }), fileSizeLabel(rec.size) && _jsx("span", { className: "text-xs text-muted", children: fileSizeLabel(rec.size) })] }));
+}
+function MediaPlayer({ kind, rec, className }) {
+    return kind === 'audio' ? (_jsx("audio", { controls: true, src: mediaUrl(rec.name), className: className })) : (_jsx("video", { controls: true, src: mediaUrl(rec.name), className: className }));
+}
+const ACCEPT = {
+    file: '*',
+    document: '.pdf,.doc,.docx,.xls,.xlsx,.txt,.csv',
+    audio: 'audio/*',
+    video: 'video/*',
+    image: 'image/*',
+    media: 'image/*,video/*',
+    avatar: 'image/*',
+    cover: 'image/*',
+    poster: 'image/*',
+};
+function FileListWidget({ kind, value, onChange, }) {
+    const { t } = useTranslation();
+    const { busy, error, progress, upload, retry, canRetry } = useFileUpload();
+    const list = parseFileRecs(value);
+    const save = (next) => onChange(next.length ? next : '');
+    async function add(f) {
+        if (!f)
+            return;
+        const rec = await upload(f);
+        if (rec)
+            save([...list, rec]);
+    }
+    async function retryAdd() {
+        const rec = await retry();
+        if (rec)
+            save([...list, rec]);
+    }
+    return (_jsxs("div", { className: "flex flex-col gap-2", children: [list.map((rec, i) => (_jsxs("div", { className: "flex min-h-9 items-center gap-2 rounded-lg border border-border px-2", children: [_jsx(FileRowContent, { rec: rec }), _jsx(FilePreviewButton, { rec: rec }), _jsx("a", { href: mediaUrl(rec.name), download: true, className: "text-muted hover:text-accent", title: t('files.download'), "aria-label": t('files.download'), children: _jsx(Download, { size: 15 }) }), _jsx(Button, { type: "button", variant: "ghost", size: "iconSm", disabled: busy, className: "text-muted hover:text-danger", onClick: async () => {
+                            if (await confirmDeleteFile(t))
+                                save(list.filter((_, j) => j !== i));
+                        }, children: _jsx(Trash2, { size: 13 }) })] }, `${rec.name}-${i}`))), _jsx(UploadButton, { accept: ACCEPT[kind] ?? '*', busy: busy, error: error, progress: progress, onPick: add, onRetry: () => void retryAdd(), canRetry: canRetry })] }));
+}
+export function SingleFileWidget({ kind, value, onChange, }) {
+    const { t } = useTranslation();
+    const { busy, error, progress, upload, retry, canRetry } = useFileUpload();
+    const rec = parseFileRecs(value)[0];
+    async function add(f) {
+        if (!f)
+            return;
+        const next = await upload(f);
+        if (next)
+            onChange(next);
+    }
+    async function retryAdd() {
+        const next = await retry();
+        if (next)
+            onChange(next);
+    }
+    if (!rec) {
+        return (_jsx(UploadButton, { accept: ACCEPT[kind] ?? '*', busy: busy, error: error, progress: progress, onPick: (f) => void add(f), onRetry: () => void retryAdd(), canRetry: canRetry, compact: true }));
+    }
+    return (_jsxs("div", { "data-testid": "single-file", className: "flex min-h-9 items-center gap-2 rounded-lg border border-border px-2 hover:border-accent", children: [_jsx(FileRowContent, { rec: rec }), _jsx(FilePreviewButton, { rec: rec }), _jsx("a", { href: mediaUrl(rec.name), download: true, className: "text-muted hover:text-accent", title: t('files.download'), "aria-label": t('files.download'), children: _jsx(Download, { size: 15 }) }), _jsx(Button, { type: "button", variant: "ghost", size: "iconSm", disabled: busy, className: "text-muted hover:text-danger", onClick: async () => {
+                    if (await confirmDeleteFile(t))
+                        onChange('');
+                }, children: _jsx(Trash2, { size: 13 }) })] }));
+}
+function MediaListWidget({ kind, value, onChange, }) {
+    const { t } = useTranslation();
+    const { busy, error, progress, upload, retry, canRetry } = useFileUpload();
+    const list = parseFileRecs(value);
+    const save = (next) => onChange(next.length ? next : '');
+    async function add(f) {
+        if (!f)
+            return;
+        const rec = await upload(f);
+        if (rec)
+            save([...list, rec]);
+    }
+    async function retryAdd() {
+        const rec = await retry();
+        if (rec)
+            save([...list, rec]);
+    }
+    return (_jsxs("div", { className: "flex flex-col gap-2", children: [list.map((rec, i) => (_jsxs("div", { className: "flex items-start gap-2", children: [_jsx(MediaPlayer, { kind: kind, rec: rec, className: kind === 'audio' ? 'min-w-0 flex-1' : 'min-w-0 flex-1 max-h-72 rounded-lg' }), _jsx(Button, { type: "button", variant: "ghost", size: "iconSm", disabled: busy, className: "shrink-0 text-muted hover:text-danger", onClick: async () => {
+                            if (await confirmDeleteFile(t))
+                                save(list.filter((_, j) => j !== i));
+                        }, children: _jsx(Trash2, { size: 13 }) })] }, `${rec.name}-${i}`))), _jsx(UploadButton, { accept: ACCEPT[kind] ?? '*', busy: busy, error: error, progress: progress, onPick: add, onRetry: () => void retryAdd(), canRetry: canRetry })] }));
+}
+function widgetFor(kind, value, onChange, multiple) {
+    if (kind === 'avatar') {
+        return _jsx(AvatarWidget, { value: value, onChange: onChange, accept: ACCEPT[kind], multiple: multiple });
+    }
+    if (kind === 'cover') {
+        return _jsx(CoverWidget, { value: value, onChange: onChange, accept: ACCEPT[kind], multiple: multiple });
+    }
+    if (kind === 'image' || kind === 'media' || kind === 'poster') {
+        const poster = kind === 'poster';
+        return multiple ? (_jsx(ImagesWidget, { value: value, onChange: onChange, accept: ACCEPT[kind], poster: poster })) : (_jsx(ImageWidget, { value: value, onChange: onChange, accept: ACCEPT[kind], poster: poster }));
+    }
+    if (kind === 'audio' || kind === 'video') {
+        return _jsx(MediaListWidget, { kind: kind, value: value, onChange: onChange });
+    }
+    return _jsx(FileListWidget, { kind: kind, value: value, onChange: onChange });
+}
+export function ReadOnlyFiles({ kind, value }) {
+    const { t } = useTranslation();
+    const list = parseFileRecs(value);
+    if (!list.length)
+        return _jsx(Dash, {});
+    if (kind === 'avatar')
+        return _jsx(AvatarView, { value: value });
+    if (kind === 'cover')
+        return _jsx(CoverView, { value: value });
+    if (kind === 'image' || kind === 'media')
+        return _jsx(GalleryView, { value: value });
+    if (kind === 'poster')
+        return _jsx(GalleryView, { value: value, poster: true });
+    if (kind === 'audio' || kind === 'video') {
+        return (_jsx("div", { className: "flex flex-col gap-2", children: list.map((rec, i) => (_jsx(MediaPlayer, { kind: kind, rec: rec, className: kind === 'audio' ? 'w-full' : 'max-h-72 rounded-lg' }, `${rec.name}-${i}`))) }));
+    }
+    return (_jsx("div", { className: "flex flex-col gap-2", children: list.map((rec, i) => (_jsxs("div", { className: "flex min-h-9 items-center gap-2 rounded-lg border border-border px-2 hover:border-accent", children: [_jsx(FileRowContent, { rec: rec }), _jsx(FilePreviewButton, { rec: rec }), _jsx("a", { href: mediaUrl(rec.name), download: true, className: "text-muted hover:text-accent", title: t('files.download'), "aria-label": t('files.download'), children: _jsx(Download, { size: 15 }) })] }, `${rec.name}-${i}`))) }));
+}
+function FilePage(p) {
+    const kind = p.field.kind;
+    const multiple = p.field.hints['multiple'] === true;
+    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: "none", width: "w-full", bare: p.bare, view: (v, commit) => commit && live ? (widgetFor(kind, v ?? '', (nv) => void commit(nv), multiple)) : (_jsx(ReadOnlyFiles, { kind: kind, value: v ?? '' })), edit: (v, onChange) => widgetFor(kind, v ?? '', onChange, multiple) }));
+}
+function FileInline(p) {
+    const rec = parseFileRecs(p.value)[0];
+    if (!rec)
+        return _jsx("span", { className: "text-muted", children: "\u2014" });
+    const kind = p.field?.kind;
+    const Ico = kind === 'audio' ? Music : kind === 'video' ? Film : FileText;
+    const sz = fileSizeLabel(rec.size);
+    return (_jsxs("span", { className: "inline-flex min-w-0 items-center gap-1.5 text-sm", children: [_jsx(Ico, { size: 14, className: "text-muted shrink-0" }), _jsx("span", { className: "truncate", children: rec.name }), sz && _jsx("span", { className: "shrink-0 text-xs text-muted", children: sz })] }));
+}
+registerRenderer({
+    kinds: ['image', 'media', 'poster'],
+    layout: multiBlock,
+    box: 'none',
+    Page: FilePage,
+    Inline: ImageInline,
+    editor: 'inplace',
+});
+registerRenderer({
+    kinds: ['file', 'document', 'audio', 'video'],
+    layout: multiBlock,
+    box: 'none',
+    Page: FilePage,
+    Inline: FileInline,
+    editor: 'inplace',
+});
+registerRenderer({
+    kinds: ['avatar'],
+    layout: multiBlock,
+    box: 'none',
+    Page: FilePage,
+    Inline: AvatarInline,
+    editor: 'inplace',
+});
+registerRenderer({
+    kinds: ['cover'],
+    layout: 'block',
+    Page: FilePage,
+    Inline: ImageInline,
+    editor: 'inplace',
+});