@coffer-org/web-ui 4.0.0

package/dist/render/field-errors.js

@@ -0,0 +1,25 @@
+import { createContext, useContext } from 'react';
+export const FieldErrorsContext = createContext(() => undefined);
+export const useFieldErrors = () => useContext(FieldErrorsContext);
+export const pathKey = (path) => path.join('.');
+export function makeIssueText(t) {
+    return (code, params) => code === 'pattern' && params?.['messageKey'] ? t(String(params['messageKey'])) : t(`validation.${code}`, params);
+}
+export function mapIssues(issues, text) {
+    const out = {};
+    for (const i of issues) {
+        const k = pathKey(i.path?.length ? i.path : [i.field]);
+        if (!out[k])
+            out[k] = text(i.code, i.params);
+    }
+    return out;
+}
+export function clearPrefix(errors, key) {
+    const out = {};
+    for (const [k, v] of Object.entries(errors)) {
+        if (k === key || k.startsWith(key + '.'))
+            continue;
+        out[k] = v;
+    }
+    return out;
+}

package/dist/render/field-frame.d.ts

@@ -0,0 +1,20 @@
+import type { ReactNode } from 'react';
+import type { BoxGeom, FieldMode } from '../types.ts';
+import type { FieldMeta, OptionItem } from '@coffer-org/sdk/fields';
+export declare function focusInPopup(related: EventTarget | null): boolean;
+type FieldFrameProps = {
+    field: FieldMeta;
+    value: unknown;
+    label?: string;
+    required?: boolean;
+    error?: string;
+    mode: FieldMode;
+    geom: BoxGeom;
+    view: (value: unknown, commit?: (v: unknown) => void | Promise<string | undefined>) => ReactNode;
+    edit: (value: unknown, onChange: (v: unknown) => void) => ReactNode;
+    bare?: boolean;
+    pickerOptions?: OptionItem[];
+    width?: string;
+};
+export declare function FieldFrame(props: FieldFrameProps): import("react").JSX.Element;
+export {};

package/dist/render/field-frame.js

@@ -0,0 +1,78 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useFieldEdit, normalizeValue } from "./use-field-edit.js";
+import { FieldLabel, FieldBox, FieldError, EditToggle, SaveCancel } from "./chrome.js";
+import { useInFlow } from "./widgets/flow-row.js";
+import { editorMode } from "./editor-mode.js";
+import { useFieldAddress } from "./field-address.js";
+import { useHybridScope } from "./hybrid-scope.js";
+import { useFieldWidth } from "./field-width.js";
+import { PopoverField } from "./popover-field.js";
+import { useSlotOptional, useSlotRender } from "./slot.js";
+const POPUP_SEL = '[data-slot="combobox-content"],[data-slot="popover-content"],[role="listbox"],[role="dialog"],[role="menu"],[data-scope="date-picker"][data-part="content"]';
+export function focusInPopup(related) {
+    const el = related instanceof Element ? related : typeof document !== 'undefined' ? document.activeElement : null;
+    return el instanceof Element && el.closest(POPUP_SEL) !== null;
+}
+export function FieldFrame(props) {
+    return _jsx(FieldFrameBody, { ...props });
+}
+function FieldFrameBody(props) {
+    const { field, value, label, required, error, mode, geom, view, edit, bare, pickerOptions, width: ownWidth = 'w-64', } = props;
+    const controlled = mode !== 'view';
+    const slot = useSlotOptional();
+    const renderOverride = useSlotRender();
+    const write = slot?.writable ? slot.write : undefined;
+    const fe = useFieldEdit(field, value, write);
+    const inFlow = useInFlow();
+    const address = useFieldAddress();
+    const onRecordPage = useHybridScope();
+    const width = useFieldWidth() ?? ownWidth;
+    const emphasis = field.hints?.['emphasis'];
+    const noLabel = field.hints?.['noLabel'] === true || label === undefined;
+    const display = (val, commit) => {
+        const base = view(val, commit);
+        return renderOverride && slot ? renderOverride(slot, base) : base;
+    };
+    const editMode = !bare && !controlled && !field.derived && onRecordPage && address.key !== undefined && Boolean(write)
+        ? editorMode(field)
+        : null;
+    if (editMode !== null && editMode !== 'custom')
+        return (_jsx(PopoverField, { field: field, value: value, label: label, required: required, error: editMode === 'inplace' ? (slot?.error ?? error) : error, geom: geom, view: display, edit: edit, pickerOptions: pickerOptions, onCommit: write, width: width }));
+    const content = (editing, val, setVal, commit) => (editing ? edit(normalizeValue(field, val), setVal) : display(val, commit));
+    if (bare)
+        return (_jsxs(_Fragment, { children: [content(controlled, value, (v) => write?.(v), write), _jsx(FieldError, { error: slot?.error ?? error })] }));
+    if (controlled) {
+        if (label === undefined) {
+            return _jsx("div", { className: "min-w-0 flex-1", children: content(true, value, (v) => write?.(v)) });
+        }
+        return (_jsxs("div", { className: `group/field ${width}`, children: [_jsx(FieldLabel, { label: label, required: required }), content(true, value, (v) => write?.(v)), _jsx(FieldError, { error: slot?.error ?? error })] }));
+    }
+    if (field.hints['noEditControl'] === true) {
+        const box = (_jsx(FieldBox, { geom: geom, field: field, children: display(value, write) }));
+        if (label === undefined)
+            return box;
+        return (_jsxs("div", { className: `group/field ${width}`, children: [_jsx(FieldLabel, { label: label, required: required }), box, _jsx(FieldError, { error: slot?.error ?? error })] }));
+    }
+    const editLayer = (_jsx("div", { className: "min-w-0", onKeyDown: (e) => {
+            if (e.key === 'Escape') {
+                e.stopPropagation();
+                fe.cancel();
+            }
+        }, children: content(true, fe.draft, fe.setDraft) }));
+    const viewLayer = (_jsx(FieldBox, { geom: geom, field: field, children: content(false, value, () => { }, write) }));
+    const zone = inFlow ? (_jsxs("div", { className: "grid min-w-0", children: [_jsx("div", { className: "col-start-1 row-start-1 min-w-0", "aria-hidden": !fe.editing, inert: !fe.editing ? true : undefined, style: { visibility: fe.editing ? 'visible' : 'hidden' }, children: editLayer }), _jsx("div", { className: "col-start-1 row-start-1 min-w-0", style: { visibility: fe.editing ? 'hidden' : 'visible' }, children: viewLayer })] })) : fe.editing ? (editLayer) : (viewLayer);
+    const pencilOverlay = write && !fe.editing ? _jsx(EditToggle, { variant: "overlay", onEdit: fe.beginEdit }) : null;
+    const editControls = write && fe.editing ? (_jsx("div", { className: "absolute right-1 top-0 z-10 flex gap-1", children: _jsx(SaveCancel, { size: "xs", busy: fe.busy, onSave: () => fe.commit(), onCancel: fe.cancel }) })) : null;
+    if (emphasis === 'hero') {
+        const heroAction = write ? (fe.editing ? (_jsx(SaveCancel, { size: "sm", busy: fe.busy, onSave: () => fe.commit(), onCancel: fe.cancel })) : (_jsx(EditToggle, { onEdit: fe.beginEdit }))) : null;
+        return (_jsxs("div", { className: "group/field flex items-center gap-2 min-w-0", children: [_jsx("div", { className: "text-lg font-semibold text-text min-w-0", children: fe.editing ? editLayer : content(false, value, () => { }, write) }), heroAction, _jsx(FieldError, { error: slot?.error ?? error })] }));
+    }
+    if (emphasis === 'muted') {
+        const mutedAction = write ? (fe.editing ? (_jsx(SaveCancel, { size: "xs", busy: fe.busy, onSave: () => fe.commit(), onCancel: fe.cancel })) : (_jsx(EditToggle, { onEdit: fe.beginEdit }))) : null;
+        return (_jsxs("div", { className: "group/field grid grid-cols-[110px_1fr] items-center gap-x-3 text-xs text-muted min-w-0", children: [_jsxs("span", { className: "flex items-center gap-1.5", children: [label, mutedAction] }), _jsx("span", { className: "min-w-0", children: fe.editing ? editLayer : content(false, value, () => { }, write) }), _jsx(FieldError, { error: slot?.error ?? error })] }));
+    }
+    if (noLabel) {
+        return (_jsxs("div", { className: "group/field relative min-w-0 pr-8", children: [zone, pencilOverlay, editControls, _jsx(FieldError, { error: slot?.error ?? error })] }));
+    }
+    return (_jsxs("div", { className: `group/field relative ${width}`, children: [_jsx(FieldLabel, { label: label, required: required, reserveAction: Boolean(write) }), zone, pencilOverlay, editControls, _jsx(FieldError, { error: slot?.error ?? error })] }));
+}

package/dist/render/field-scope.d.ts

@@ -0,0 +1,8 @@
+import { type ReactNode } from 'react';
+import type { FieldMeta } from '@coffer-org/sdk/fields';
+export declare function ParentValuesProvider({ values, children, }: {
+    values: Record<string, unknown> | undefined;
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare const useParentValues: () => Record<string, unknown> | undefined;
+export declare function withScopeValues(field: FieldMeta, self: Record<string, unknown> | undefined, parent?: Record<string, unknown> | undefined): FieldMeta;

package/dist/render/field-scope.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from 'react';
+const SCOPES = [
+    ['unitFrom', 'unitValue'],
+    ['currencyFrom', 'currencyValue'],
+];
+const ParentValues = createContext(undefined);
+export function ParentValuesProvider({ values, children, }) {
+    return _jsx(ParentValues.Provider, { value: values, children: children });
+}
+export const useParentValues = () => useContext(ParentValues);
+export function withScopeValues(field, self, parent) {
+    let out = field;
+    for (const [from, into] of SCOPES) {
+        const scope = String(field.hints[from] ?? '');
+        if (!scope)
+            continue;
+        const parentKey = scope.startsWith('parent:') ? scope.slice('parent:'.length) : null;
+        const v = parentKey ? parent?.[parentKey] : scope.includes(':') ? undefined : self?.[scope];
+        if (v == null || v === '')
+            continue;
+        out = { ...out, hints: { ...out.hints, [into]: String(v) } };
+    }
+    return out;
+}

package/dist/render/field-width.d.ts

@@ -0,0 +1,7 @@
+import { type ReactNode } from 'react';
+export declare function FieldWidthProvider({ width, children }: {
+    width: string;
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function useFieldWidth(): string | undefined;
+export declare function withChildWidth(width: string | undefined, node: ReactNode): ReactNode;

package/dist/render/field-width.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from 'react';
+const FieldWidthContext = createContext(undefined);
+export function FieldWidthProvider({ width, children }) {
+    return _jsx(FieldWidthContext.Provider, { value: width, children: children });
+}
+export function useFieldWidth() {
+    return useContext(FieldWidthContext);
+}
+export function withChildWidth(width, node) {
+    return width ? _jsx(FieldWidthProvider, { width: width, children: node }) : node;
+}

package/dist/render/form-types.d.ts

@@ -0,0 +1,12 @@
+import type { FieldMode, RecordCtx } from '../types.ts';
+export interface FormBridge {
+    mode: FieldMode;
+    recordCtx: RecordCtx;
+    getValue(key: string): unknown;
+    setValue(key: string, v: unknown): void | Promise<string | undefined>;
+    isHidden(key: string): boolean;
+    requiredOf(key: string): boolean;
+    error(key: string): string | undefined;
+    touch(key: string): void;
+    values: Record<string, unknown>;
+}

package/dist/render/form-types.js

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

package/dist/render/hybrid-scope.d.ts

@@ -0,0 +1,5 @@
+import { type ReactNode } from 'react';
+export declare function HybridScope({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function useHybridScope(): boolean;

package/dist/render/hybrid-scope.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from 'react';
+const HybridScopeContext = createContext(false);
+export function HybridScope({ children }) {
+    return _jsx(HybridScopeContext.Provider, { value: true, children: children });
+}
+export function useHybridScope() {
+    return useContext(HybridScopeContext);
+}

package/dist/render/image.d.ts

@@ -0,0 +1,64 @@
+import type { FieldInlineProps } from '../types.ts';
+export type FileRec = {
+    name: string;
+    mime?: string;
+    size?: number;
+};
+export declare function isVideoName(name: string): boolean;
+export declare function Thumb({ name }: {
+    name: string;
+}): import("react").JSX.Element;
+export declare function parseFileRecs(value: unknown): FileRec[];
+export type LightboxEdit = {
+    accept: string;
+    busy: boolean;
+    onReplace: (index: number, file: File) => void;
+    onDelete: (index: number) => void;
+    replaceLabel: string;
+    deleteLabel: string;
+};
+export declare function Lightbox({ images, index, onClose, onIndex, edit, }: {
+    images: string[];
+    index: number;
+    onClose: () => void;
+    onIndex: (i: number) => void;
+    edit?: LightboxEdit;
+}): import("react").JSX.Element;
+export declare function GalleryView({ value, poster }: {
+    value: unknown;
+    poster?: boolean;
+}): import("react").JSX.Element;
+export declare function AvatarView({ value }: {
+    value: unknown;
+}): import("react").JSX.Element;
+export declare function AvatarInline({ value }: FieldInlineProps): import("react").JSX.Element;
+export declare function CoverView({ value, banner }: {
+    value: unknown;
+    banner?: boolean;
+}): import("react").JSX.Element;
+export declare function ImageWidget({ value, onChange, accept, poster, width, }: {
+    value: unknown;
+    onChange: (v: FileRec | '') => void;
+    accept?: string;
+    poster?: boolean;
+    width?: number;
+}): import("react").JSX.Element;
+export declare function ImagesWidget({ value, onChange, accept, poster, }: {
+    value: unknown;
+    onChange: (v: FileRec[] | '') => void;
+    accept?: string;
+    poster?: boolean;
+}): import("react").JSX.Element;
+export declare function AvatarWidget({ value, onChange, accept, multiple, }: {
+    value: unknown;
+    onChange: (v: FileRec | FileRec[] | '') => void;
+    accept?: string;
+    multiple?: boolean;
+}): import("react").JSX.Element;
+export declare function CoverWidget({ value, onChange, accept, multiple, }: {
+    value: unknown;
+    onChange: (v: FileRec[] | '') => void;
+    accept?: string;
+    multiple?: boolean;
+}): import("react").JSX.Element;
+export declare function ImageInline({ value, height }: FieldInlineProps): import("react").JSX.Element;

package/dist/render/image.js

@@ -0,0 +1,322 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { ChevronLeft, ChevronRight, Loader2, Play, RefreshCw, Trash2, Upload, X } from 'lucide-react';
+import { mediaUrl } from "../host-services.js";
+import { confirmDialog } from "../components/ui/confirm.js";
+import { Dash, UploadError, UploadProgress } from "./shared.js";
+import { useFileUpload } from "./use-file-upload.js";
+function confirmDeletePhoto(t) {
+    return confirmDialog({
+        title: t('actions.confirmDeletePhoto'),
+        confirmLabel: t('actions.delete'),
+        variant: 'destructive',
+    });
+}
+const VIDEO_EXT = /\.(mp4|webm|ogg|mov|m4v)$/i;
+export function isVideoName(name) {
+    return VIDEO_EXT.test(name);
+}
+export function Thumb({ name }) {
+    if (isVideoName(name)) {
+        return (_jsxs(_Fragment, { children: [_jsx("video", { src: mediaUrl(name), muted: true, playsInline: true, preload: "metadata", className: "h-full w-full object-cover" }), _jsx("span", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: _jsx(Play, { size: 28, className: "text-white/90 drop-shadow", fill: "currentColor" }) })] }));
+    }
+    return (_jsx("img", { src: mediaUrl(name), alt: "", loading: "lazy", className: "h-full w-full object-cover transition-opacity hover:opacity-90" }));
+}
+export function parseFileRecs(value) {
+    const isRec = (x) => !!x && typeof x === 'object' && typeof x.name === 'string';
+    if (Array.isArray(value))
+        return value.filter(isRec);
+    if (isRec(value))
+        return [value];
+    try {
+        const p = JSON.parse(String(value ?? ''));
+        const arr = Array.isArray(p) ? p : p ? [p] : [];
+        return arr.filter(isRec);
+    }
+    catch {
+        return [];
+    }
+}
+export function Lightbox({ images, index, onClose, onIndex, edit, }) {
+    const many = images.length > 1;
+    const prev = () => onIndex((index - 1 + images.length) % images.length);
+    const next = () => onIndex((index + 1) % images.length);
+    useEffect(() => {
+        const fn = (e) => {
+            if (e.key === 'Escape')
+                onClose();
+            else if (e.key === 'ArrowLeft' && many)
+                prev();
+            else if (e.key === 'ArrowRight' && many)
+                next();
+        };
+        document.addEventListener('keydown', fn);
+        document.body.style.overflow = 'hidden';
+        return () => {
+            document.removeEventListener('keydown', fn);
+            document.body.style.overflow = '';
+        };
+    }, [index, images.length]);
+    return (_jsxs("div", { className: "fixed inset-0 z-[100] bg-black/85 backdrop-blur-sm flex items-center justify-center", onClick: onClose, children: [edit && (_jsxs("div", { className: "absolute top-4 left-1/2 flex -translate-x-1/2 items-center gap-2", onClick: (e) => e.stopPropagation(), children: [_jsxs("label", { className: `flex cursor-pointer items-center gap-2 rounded-full bg-white/10 px-3 py-2 text-sm text-white transition-colors hover:bg-white/20 ${edit.busy ? 'pointer-events-none opacity-60' : ''}`, children: [edit.busy ? _jsx(Loader2, { size: 16, className: "animate-spin" }) : _jsx(RefreshCw, { size: 16 }), _jsx("span", { children: edit.replaceLabel }), _jsx("input", { type: "file", accept: edit.accept, className: "hidden", disabled: edit.busy, onChange: (e) => {
+                                    const f = e.target.files?.[0];
+                                    if (f)
+                                        edit.onReplace(index, f);
+                                } })] }), _jsxs("button", { type: "button", disabled: edit.busy, className: "flex items-center gap-2 rounded-full bg-white/10 px-3 py-2 text-sm text-white transition-colors hover:bg-white/20 hover:text-red-400 disabled:opacity-60", onClick: () => edit.onDelete(index), children: [_jsx(Trash2, { size: 16 }), _jsx("span", { children: edit.deleteLabel })] })] })), _jsx("button", { className: "lightbox-btn absolute top-4 right-4", onClick: onClose, children: _jsx(X, { size: 22 }) }), many && (_jsx("button", { className: "lightbox-btn absolute left-3 md:left-6", onClick: (e) => {
+                    e.stopPropagation();
+                    prev();
+                }, children: _jsx(ChevronLeft, { size: 26 }) })), isVideoName(images[index]) ? (_jsx("video", { src: mediaUrl(images[index]), controls: true, autoPlay: true, className: "max-h-[90dvh] max-w-[92vw] rounded-lg shadow-2xl", onClick: (e) => e.stopPropagation() })) : (_jsx("img", { src: mediaUrl(images[index]), alt: "", className: "max-h-[90dvh] max-w-[92vw] object-contain rounded-lg shadow-2xl", onClick: (e) => e.stopPropagation() })), many && (_jsx("button", { className: "lightbox-btn absolute right-3 md:right-6", onClick: (e) => {
+                    e.stopPropagation();
+                    next();
+                }, children: _jsx(ChevronRight, { size: 26 }) })), many && (_jsxs("div", { className: "absolute bottom-5 left-1/2 -translate-x-1/2 text-white/70 text-sm tabular-nums", children: [index + 1, " / ", images.length] }))] }));
+}
+const SMALL_SLOTS = 4;
+const MOSAIC = {
+    photo: { large: 'h-[12.5rem] w-[12.5rem]', small: 'h-24 w-24' },
+    poster: { large: 'h-[18.5rem] w-[12.5rem]', small: 'h-36 w-24' },
+};
+function MosaicTile({ rec, size, onClick, over }) {
+    return (_jsxs("button", { type: "button", onClick: onClick, className: `relative ${size} rounded-xl overflow-hidden border border-border hover:border-accent transition-colors cursor-zoom-in`, children: [_jsx(Thumb, { name: rec.name }), over != null && (_jsxs("span", { className: "pointer-events-none absolute inset-0 grid place-items-center bg-black/55 text-lg font-medium text-white tabular-nums", children: ["+", over] }))] }));
+}
+export function GalleryView({ value, poster }) {
+    const list = parseFileRecs(value);
+    const [open, setOpen] = useState(null);
+    if (!list.length)
+        return _jsx(Dash, {});
+    const names = list.map((r) => r.name);
+    const size = poster ? MOSAIC.poster : MOSAIC.photo;
+    const rest = list.slice(1, 1 + SMALL_SLOTS);
+    const hidden = list.length - 1 - rest.length;
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex flex-wrap items-start gap-2", children: [_jsx(MosaicTile, { rec: list[0], size: size.large, onClick: () => setOpen(0) }), rest.length > 0 && (_jsx("div", { className: "flex w-[12.5rem] flex-wrap gap-2", children: rest.map((rec, i) => (_jsx(MosaicTile, { rec: rec, size: size.small, onClick: () => setOpen(i + 1), over: hidden > 0 && i === rest.length - 1 ? hidden + 1 : undefined }, `${rec.name}-${i + 1}`))) }))] }), open !== null && _jsx(Lightbox, { images: names, index: open, onClose: () => setOpen(null), onIndex: setOpen })] }));
+}
+export function AvatarView({ value }) {
+    const list = parseFileRecs(value);
+    const [open, setOpen] = useState(null);
+    if (!list.length)
+        return _jsx(Dash, {});
+    const names = list.map((r) => r.name);
+    const single = list.length === 1;
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "flex flex-wrap items-center gap-2", children: single ? (_jsx("button", { type: "button", onClick: () => setOpen(0), className: "relative inline-block rounded-full cursor-zoom-in", children: _jsx("img", { src: mediaUrl(list[0].name), alt: "", loading: "lazy", className: "max-h-96 rounded-full border border-border object-cover hover:opacity-90 transition-opacity" }) }, `${list[0].name}-0`)) : (list.map((rec, i) => (_jsx("button", { type: "button", onClick: () => setOpen(i), className: "relative h-24 w-24 rounded-full overflow-hidden border border-border hover:border-accent transition-colors cursor-zoom-in", children: _jsx("img", { src: mediaUrl(rec.name), alt: "", loading: "lazy", className: "h-full w-full object-cover" }) }, `${rec.name}-${i}`)))) }), open !== null && _jsx(Lightbox, { images: names, index: open, onClose: () => setOpen(null), onIndex: setOpen })] }));
+}
+export function AvatarInline({ value }) {
+    const rec = parseFileRecs(value)[0];
+    if (!rec)
+        return _jsx("span", { className: "text-muted", children: "\u2014" });
+    return (_jsx("img", { src: mediaUrl(rec.name), alt: "", style: { height: 28, width: 28 }, className: "rounded-full object-cover" }));
+}
+export function CoverView({ value, banner }) {
+    const list = parseFileRecs(value);
+    const [idx, setIdx] = useState(0);
+    const [open, setOpen] = useState(false);
+    if (!list.length)
+        return _jsx(Dash, {});
+    const names = list.map((r) => r.name);
+    const many = list.length > 1;
+    const cur = Math.min(idx, list.length - 1);
+    const prev = () => setIdx((cur - 1 + list.length) % list.length);
+    const next = () => setIdx((cur + 1) % list.length);
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: banner
+                    ? 'relative w-full overflow-hidden rounded-none'
+                    : 'relative w-full overflow-hidden rounded-xl border border-border', children: [_jsx("button", { type: "button", onClick: (e) => {
+                            e.stopPropagation();
+                            setOpen(true);
+                        }, className: banner ? 'block h-48 w-full cursor-zoom-in md:h-64' : 'block aspect-video max-h-96 w-full cursor-zoom-in', children: _jsx("img", { src: mediaUrl(names[cur]), alt: "", loading: "lazy", className: "h-full w-full object-cover" }) }), many && (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: "lightbox-btn absolute left-2 top-1/2 -translate-y-1/2", onClick: (e) => {
+                                    e.stopPropagation();
+                                    prev();
+                                }, children: _jsx(ChevronLeft, { size: 22 }) }), _jsx("button", { type: "button", className: "lightbox-btn absolute right-2 top-1/2 -translate-y-1/2", onClick: (e) => {
+                                    e.stopPropagation();
+                                    next();
+                                }, children: _jsx(ChevronRight, { size: 22 }) }), _jsxs("div", { className: "absolute bottom-2 left-1/2 -translate-x-1/2 rounded-full bg-black/50 px-2 py-0.5 text-xs text-white tabular-nums", children: [cur + 1, " / ", list.length] })] }))] }), open && _jsx(Lightbox, { images: names, index: cur, onClose: () => setOpen(false), onIndex: setIdx })] }));
+}
+function UploadPlaceholder({ accept, busy, error, progress, onPick, onRetry, canRetry, className, round = false, }) {
+    const { t } = useTranslation();
+    return (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsxs("label", { className: `flex cursor-pointer flex-col items-center justify-center gap-2 ${round ? 'rounded-full' : 'rounded-xl'} border-2 border-dashed border-border text-muted transition-colors hover:border-accent hover:text-accent ${busy ? 'pointer-events-none opacity-60' : ''} ${className ?? ''}`, children: [busy ? _jsx(Loader2, { size: 24, className: "animate-spin" }) : _jsx(Upload, { size: 24 }), _jsx("span", { className: "text-sm font-medium", children: t('actions.upload') }), _jsx("input", { type: "file", accept: accept, className: "hidden", disabled: busy, onChange: (e) => onPick(e.target.files?.[0] ?? null) })] }), busy && progress != null && _jsx(UploadProgress, { progress: progress }), error && _jsx(UploadError, { error: error, onRetry: onRetry, canRetry: canRetry })] }));
+}
+function UploadRow({ accept, busy, error, progress, onPick, onRetry, canRetry, className, }) {
+    const { t } = useTranslation();
+    return (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsxs("label", { className: `flex h-9 cursor-pointer items-center gap-2 rounded-lg border border-dashed border-border px-3 text-sm text-muted transition-colors hover:border-accent hover:text-accent ${busy ? 'pointer-events-none opacity-60' : ''} ${className ?? 'w-fit'}`, children: [busy ? _jsx(Loader2, { size: 15, className: "animate-spin" }) : _jsx(Upload, { size: 15 }), _jsx("span", { className: "font-medium", children: t('actions.upload') }), _jsx("input", { type: "file", accept: accept, className: "hidden", disabled: busy, onChange: (e) => onPick(e.target.files?.[0] ?? null) })] }), busy && progress != null && _jsx(UploadProgress, { progress: progress }), error && _jsx(UploadError, { error: error, onRetry: onRetry, canRetry: canRetry })] }));
+}
+function galleryEdit({ t, accept, busy, upload, list, save, setOpen, single, }) {
+    return {
+        accept,
+        busy,
+        replaceLabel: t('actions.replace'),
+        deleteLabel: t(single ? 'actions.clear' : 'actions.delete'),
+        onReplace: (i, f) => void (async () => {
+            const r = await upload(f);
+            if (r)
+                save(list.map((x, j) => (j === i ? r : x)));
+        })(),
+        onDelete: (i) => void (async () => {
+            if (!(await confirmDeletePhoto(t)))
+                return;
+            const next = list.filter((_, j) => j !== i);
+            save(next);
+            setOpen(next.length ? Math.min(i, next.length - 1) : null);
+        })(),
+    };
+}
+export function ImageWidget({ value, onChange, accept = 'image/*', poster, width, }) {
+    const { t } = useTranslation();
+    const { busy, error, progress, upload, retry, canRetry } = useFileUpload();
+    const [open, setOpen] = useState(null);
+    const rec = parseFileRecs(value)[0];
+    async function pick(file) {
+        if (!file)
+            return;
+        const r = await upload(file);
+        if (r)
+            onChange(r);
+    }
+    async function retryPick() {
+        const r = await retry();
+        if (r)
+            onChange(r);
+    }
+    if (rec) {
+        return (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("img", { src: mediaUrl(rec.name), alt: "", loading: "lazy", onClick: () => setOpen(0), ...(width != null ? { style: { '--img-w': `${width}px` } } : {}), className: width != null
+                        ? `${poster ? 'aspect-[2/3]' : 'aspect-square'} w-full sm:w-(--img-w) self-start object-cover rounded-xl border border-border cursor-zoom-in hover:opacity-90 transition-opacity`
+                        : poster
+                            ? 'h-72 w-48 sm:h-96 sm:w-64 self-start object-cover rounded-xl border border-border cursor-zoom-in hover:opacity-90 transition-opacity'
+                            : 'max-h-32 sm:max-h-40 self-start rounded-xl border border-border cursor-zoom-in hover:opacity-90 transition-opacity' }), error && _jsx(UploadError, { error: error, onRetry: () => void retryPick(), canRetry: canRetry }), open !== null && (_jsx(Lightbox, { images: [rec.name], index: 0, onClose: () => setOpen(null), onIndex: () => { }, edit: galleryEdit({
+                        t,
+                        accept,
+                        busy,
+                        upload,
+                        list: [rec],
+                        save: (next) => onChange(next[0] ?? ''),
+                        setOpen,
+                        single: true,
+                    }) }))] }));
+    }
+    return (_jsx(UploadRow, { accept: accept, busy: busy, error: error, progress: progress, onPick: pick, onRetry: () => void retryPick(), canRetry: canRetry }));
+}
+export function ImagesWidget({ value, onChange, accept = 'image/*', poster, }) {
+    const { t } = useTranslation();
+    const { busy, error, progress, upload, retry, canRetry } = useFileUpload();
+    const [open, setOpen] = useState(null);
+    const list = parseFileRecs(value);
+    const tile = poster ? 'h-72 w-48 sm:h-96 sm:w-64' : 'h-24 w-24';
+    function save(next) {
+        onChange(next.length ? next : '');
+    }
+    async function add(file) {
+        if (!file)
+            return;
+        const r = await upload(file);
+        if (r)
+            save([...list, r]);
+    }
+    async function retryAdd() {
+        const r = await retry();
+        if (r)
+            save([...list, r]);
+    }
+    const names = list.map((r) => r.name);
+    if (!list.length) {
+        return (_jsx(UploadRow, { accept: accept, busy: busy, error: error, progress: progress, onPick: add, onRetry: () => void retryAdd(), canRetry: canRetry }));
+    }
+    return (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsxs("div", { className: "flex flex-wrap gap-2", children: [list.map((rec, i) => (_jsx("button", { type: "button", onClick: () => setOpen(i), className: `relative ${tile} overflow-hidden rounded-xl border border-border cursor-zoom-in hover:border-accent transition-colors`, children: _jsx(Thumb, { name: rec.name }) }, `${rec.name}-${i}`))), _jsx(UploadPlaceholder, { accept: accept, busy: busy, error: error, progress: progress, onPick: add, onRetry: () => void retryAdd(), canRetry: canRetry, className: tile })] }), open !== null && (_jsx(Lightbox, { images: names, index: open, onClose: () => setOpen(null), onIndex: setOpen, edit: galleryEdit({ t, accept, busy, upload, list, save, setOpen }) }))] }));
+}
+export function AvatarWidget({ value, onChange, accept = 'image/*', multiple = false, }) {
+    const { t } = useTranslation();
+    const { busy, error, progress, upload, retry, canRetry } = useFileUpload();
+    const [open, setOpen] = useState(null);
+    const list = parseFileRecs(value);
+    const save = (next) => onChange(next.length ? next : '');
+    const names = list.map((r) => r.name);
+    if (multiple) {
+        async function append(file) {
+            if (!file)
+                return;
+            const r = await upload(file);
+            if (r)
+                save([...list, r]);
+        }
+        async function retryAppend() {
+            const r = await retry();
+            if (r)
+                save([...list, r]);
+        }
+        return (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [list.map((rec, i) => (_jsx("button", { type: "button", onClick: () => setOpen(i), className: "relative h-24 w-24 shrink-0 overflow-hidden rounded-full border border-border cursor-zoom-in hover:border-accent transition-colors", children: _jsx("img", { src: mediaUrl(rec.name), alt: "", className: "h-full w-full object-cover" }) }, `${rec.name}-${i}`))), _jsx(UploadPlaceholder, { accept: accept, busy: busy, error: error, progress: progress, onPick: append, onRetry: () => void retryAppend(), canRetry: canRetry, className: "h-24 w-24", round: true })] }), open !== null && (_jsx(Lightbox, { images: names, index: open, onClose: () => setOpen(null), onIndex: setOpen, edit: galleryEdit({ t, accept, busy, upload, list, save, setOpen }) }))] }));
+    }
+    const rec = list[0];
+    async function pick(file) {
+        if (!file)
+            return;
+        const r = await upload(file);
+        if (r)
+            onChange(r);
+    }
+    async function retryPick() {
+        const r = await retry();
+        if (r)
+            onChange(r);
+    }
+    if (rec) {
+        return (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("button", { type: "button", onClick: () => setOpen(0), className: "inline-block w-fit rounded-full cursor-zoom-in", children: _jsx("img", { src: mediaUrl(rec.name), alt: "", className: "h-28 w-28 sm:h-40 sm:w-40 rounded-full border border-border object-cover hover:opacity-90 transition-opacity" }) }), error && _jsx(UploadError, { error: error, onRetry: () => void retryPick(), canRetry: canRetry }), open !== null && (_jsx(Lightbox, { images: [rec.name], index: 0, onClose: () => setOpen(null), onIndex: () => { }, edit: galleryEdit({
+                        t,
+                        accept,
+                        busy,
+                        upload,
+                        list: [rec],
+                        save: (next) => onChange(next[0] ?? ''),
+                        setOpen,
+                        single: true,
+                    }) }))] }));
+    }
+    return (_jsx(UploadPlaceholder, { accept: accept, busy: busy, error: error, progress: progress, onPick: pick, onRetry: () => void retryPick(), canRetry: canRetry, className: "h-28 w-28 sm:h-40 sm:w-40", round: true }));
+}
+export function CoverWidget({ value, onChange, accept = 'image/*', multiple = false, }) {
+    const { t } = useTranslation();
+    const { busy, error, progress, upload, retry, canRetry } = useFileUpload();
+    const [idx, setIdx] = useState(0);
+    const [open, setOpen] = useState(false);
+    const list = parseFileRecs(value);
+    const save = (next) => onChange(next.length ? next : '');
+    async function add(file) {
+        if (!file)
+            return;
+        const r = await upload(file);
+        if (r)
+            save(multiple ? [...list, r] : [r]);
+    }
+    async function retryAdd() {
+        const r = await retry();
+        if (r)
+            save(multiple ? [...list, r] : [r]);
+    }
+    if (!list.length) {
+        return (_jsx(UploadRow, { accept: accept, busy: busy, error: error, progress: progress, onPick: add, onRetry: () => void retryAdd(), canRetry: canRetry, className: "w-full" }));
+    }
+    const total = multiple ? list.length + 1 : list.length;
+    const many = total > 1;
+    const cur = Math.min(idx, total - 1);
+    const isUpload = multiple && cur === list.length;
+    const prev = () => setIdx((cur - 1 + total) % total);
+    const next = () => setIdx((cur + 1) % total);
+    return (_jsxs("div", { className: "group/cov relative w-full overflow-hidden rounded-xl border border-border", children: [isUpload ? (_jsxs("div", { className: "flex aspect-video max-h-96 w-full flex-col items-center justify-center gap-1 bg-elevated px-20", children: [_jsxs("label", { className: `flex w-full flex-1 cursor-pointer flex-col items-center justify-center gap-3 text-muted transition-colors hover:text-accent ${busy ? 'pointer-events-none opacity-60' : ''}`, children: [busy ? _jsx(Loader2, { size: 40, className: "animate-spin" }) : _jsx(Upload, { size: 40 }), _jsx("span", { className: "text-base font-medium", children: t('actions.upload') }), _jsx("input", { type: "file", accept: accept, className: "hidden", disabled: busy, onChange: (e) => add(e.target.files?.[0] ?? null) })] }), error && _jsx(UploadError, { error: error, onRetry: () => void retryAdd(), canRetry: canRetry })] })) : (_jsx("button", { type: "button", onClick: () => setOpen(true), className: "block w-full cursor-zoom-in", children: _jsx("img", { src: mediaUrl(list[cur].name), alt: "", className: "aspect-video max-h-96 w-full object-cover" }) })), many && (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: "absolute left-2 top-1/2 z-10 flex h-9 w-9 -translate-y-1/2 items-center justify-center rounded-full bg-black/50 text-white backdrop-blur-sm transition-colors hover:bg-black/70", onClick: prev, children: _jsx(ChevronLeft, { size: 22 }) }), _jsx("button", { type: "button", className: "absolute right-2 top-1/2 z-10 flex h-9 w-9 -translate-y-1/2 items-center justify-center rounded-full bg-black/50 text-white backdrop-blur-sm transition-colors hover:bg-black/70", onClick: next, children: _jsx(ChevronRight, { size: 22 }) }), !isUpload && (_jsxs("div", { className: "absolute bottom-2 left-1/2 -translate-x-1/2 rounded-full bg-black/50 px-2 py-0.5 text-xs text-white tabular-nums", children: [cur + 1, " / ", list.length] }))] })), open && !isUpload && (_jsx(Lightbox, { images: list.map((r) => r.name), index: cur, onClose: () => setOpen(false), onIndex: setIdx, edit: galleryEdit({
+                    t,
+                    accept,
+                    busy,
+                    upload,
+                    list,
+                    save,
+                    setOpen: (i) => {
+                        if (i === null)
+                            setOpen(false);
+                        else
+                            setIdx(i);
+                    },
+                    single: !multiple,
+                }) }))] }));
+}
+export function ImageInline({ value, height }) {
+    const rec = parseFileRecs(value)[0];
+    if (!rec)
+        return _jsx("span", { className: "text-muted", children: "\u2014" });
+    const h = height ?? 32;
+    if (isVideoName(rec.name))
+        return (_jsx("video", { src: mediaUrl(rec.name), muted: true, playsInline: true, preload: "metadata", style: { height: h }, className: "object-contain rounded" }));
+    return _jsx("img", { src: mediaUrl(rec.name), alt: "", style: { height: h }, className: "object-contain rounded" });
+}

package/dist/render/live-kind.d.ts

@@ -0,0 +1,7 @@
+import type { FieldMeta } from '@coffer-org/sdk/fields';
+export type LiveKind = 'popover' | 'heavy';
+export declare const LIVE_ENABLED: ReadonlySet<LiveKind>;
+export declare const NON_FIELD_KINDS: ReadonlySet<string>;
+export declare const BY_KIND: Readonly<Record<string, LiveKind>>;
+export declare function defaultLiveKind(field: Pick<FieldMeta, 'kind' | 'prim' | 'hints'>): LiveKind;
+export declare function liveKind(field: Pick<FieldMeta, 'kind' | 'prim' | 'hints'>): LiveKind | null;