@coffer-org/web-ui 4.0.0

package/dist/lib/use-record-labels.js

@@ -0,0 +1,130 @@
+import { useEffect, useMemo, useState } from 'react';
+import { inlineText } from '@coffer-org/sdk/shelf';
+import { getShelf } from "../schema-registry.js";
+import { listRecords } from "../host-services.js";
+const inFlight = new Map();
+const byIdCache = new Map();
+const listCache = new Map();
+function cacheRows(library, shelf, rows) {
+    for (const r of rows)
+        byIdCache.set(`${library}/${shelf}/${String(r['id'])}`, r);
+}
+const inFlightById = new Map();
+function fetchByIds(library, shelf, idsCsv) {
+    const key = `${library}/${shelf}/${idsCsv}`;
+    const existing = inFlightById.get(key);
+    if (existing)
+        return existing;
+    const p = listRecords(library, shelf, { id: idsCsv })
+        .then((rows) => {
+        cacheRows(library, shelf, rows);
+        return rows;
+    })
+        .finally(() => inFlightById.delete(key));
+    inFlightById.set(key, p);
+    return p;
+}
+export function clearRecordByIdCache() {
+    byIdCache.clear();
+    listCache.clear();
+}
+function filterKey(filter) {
+    if (!filter)
+        return '';
+    const keys = Object.keys(filter).sort();
+    return keys.length ? '?' + keys.map((k) => `${k}=${filter[k]}`).join('&') : '';
+}
+function fetchRows(library, shelf, filter) {
+    const key = `${library}/${shelf}${filterKey(filter)}`;
+    const cached = listCache.get(key);
+    if (cached)
+        return Promise.resolve(cached);
+    const existing = inFlight.get(key);
+    if (existing)
+        return existing;
+    const p = listRecords(library, shelf, filter)
+        .then((rows) => {
+        cacheRows(library, shelf, rows);
+        listCache.set(key, rows);
+        return rows;
+    })
+        .finally(() => inFlight.delete(key));
+    inFlight.set(key, p);
+    return p;
+}
+export function useRecordLabels(library, shelf, displayKey = 'name', filter) {
+    const [records, setRecords] = useState([]);
+    const [loadState, setLoadState] = useState('loading');
+    const filterDeps = filterKey(filter);
+    useEffect(() => {
+        if (!library || !shelf) {
+            setLoadState('idle');
+            return;
+        }
+        let alive = true;
+        setLoadState('loading');
+        fetchRows(library, shelf, filter)
+            .then((r) => {
+            if (!alive)
+                return;
+            setRecords(r);
+            setLoadState('idle');
+        })
+            .catch(() => {
+            if (alive)
+                setLoadState('error');
+        });
+        return () => {
+            alive = false;
+        };
+    }, [library, shelf, filterDeps]);
+    const rows = useMemo(() => {
+        const m = getShelf(library, shelf);
+        return records.map((x) => ({
+            id: String(x['id']),
+            label: m ? inlineText(m, x) : String(x[displayKey] ?? x['name'] ?? x['id']),
+        }));
+    }, [records, library, shelf, displayKey]);
+    const labelMap = useMemo(() => new Map(rows.map((r) => [r.id, r.label])), [rows]);
+    const recordMap = useMemo(() => new Map(records.map((r) => [String(r['id']), r])), [records]);
+    return { rows, labelMap, records, recordMap, loadState };
+}
+export function useRecordsByIds(library, shelf, ids) {
+    const key = useMemo(() => [...new Set(ids)].sort().join(','), [ids]);
+    const [map, setMap] = useState(new Map());
+    useEffect(() => {
+        if (!library || !shelf || !key) {
+            setMap(new Map());
+            return;
+        }
+        const resolved = new Map();
+        const missing = [];
+        for (const id of key.split(',')) {
+            const hit = byIdCache.get(`${library}/${shelf}/${id}`);
+            if (hit)
+                resolved.set(id, hit);
+            else
+                missing.push(id);
+        }
+        if (!missing.length) {
+            setMap(resolved);
+            return;
+        }
+        let alive = true;
+        fetchByIds(library, shelf, missing.join(','))
+            .then((rows) => {
+            for (const r of rows)
+                resolved.set(String(r['id']), r);
+            if (alive)
+                setMap(new Map(resolved));
+        })
+            .catch(() => {
+            if (alive)
+                setMap(resolved);
+        });
+        return () => {
+            alive = false;
+        };
+    }, [library, shelf, key]);
+    return map;
+}

package/dist/lib/utils.d.ts

@@ -0,0 +1,2 @@
+import { type ClassValue } from 'clsx';
+export declare function cn(...inputs: ClassValue[]): string;

package/dist/lib/utils.js

@@ -0,0 +1,5 @@
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+export function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}

package/dist/list-view.d.ts

@@ -0,0 +1,26 @@
+import type { FC } from 'react';
+import type { ShelfDef } from '@coffer-org/sdk/shelf';
+export interface ListViewProps {
+    rows: Record<string, unknown>[];
+    shelf: ShelfDef;
+    keys: string[];
+    hrefBase: string;
+    onDelete: (id: string) => void;
+    deletingId: string | null;
+    onToggleFavorite?: (id: string) => void;
+    favoriteBusyId?: string | null;
+    sort: {
+        key: string;
+        dir: 'asc' | 'desc';
+    } | null;
+    onToggleSort: (key: string) => void;
+    scrollKey?: string;
+}
+export interface ListViewDef {
+    kind: string;
+    View: FC<ListViewProps>;
+    check?: (shelf: ShelfDef, keys: string[]) => string | null;
+}
+export declare const listViewRegistry: Record<string, ListViewDef>;
+export declare function registerListView(def: ListViewDef): void;
+export declare function resolveListView(kind: string): ListViewDef | undefined;

package/dist/list-view.js

@@ -0,0 +1,11 @@
+export const listViewRegistry = {};
+export function registerListView(def) {
+    if (!def.kind)
+        throw new Error('[list-view] view without kind');
+    if (listViewRegistry[def.kind])
+        throw new Error(`[list-view] kind '${def.kind}' already registered`);
+    listViewRegistry[def.kind] = def;
+}
+export function resolveListView(kind) {
+    return listViewRegistry[kind];
+}

package/dist/markdown/blocks.d.ts

@@ -0,0 +1,10 @@
+import type { Editor } from '@tiptap/core';
+import { type LucideIcon } from 'lucide-react';
+import type { SlashRange } from './slash.tsx';
+export type BlockAction = {
+    key: string;
+    icon: LucideIcon;
+    run: (editor: Editor, range?: SlashRange) => void;
+    active?: (editor: Editor) => boolean;
+};
+export declare const BLOCKS: BlockAction[];

package/dist/markdown/blocks.js

@@ -0,0 +1,57 @@
+import { Heading1, Heading2, Heading3, List, ListOrdered, ListChecks, Quote, Code2, Minus, Table as TableIcon, } from 'lucide-react';
+const at = (editor, range) => {
+    const chain = editor.chain().focus();
+    return range ? chain.deleteRange(range) : chain;
+};
+const heading = (level, icon) => ({
+    key: `h${level}`,
+    icon,
+    run: (editor, range) => at(editor, range).toggleHeading({ level }).run(),
+    active: (editor) => editor.isActive('heading', { level }),
+});
+export const BLOCKS = [
+    heading(1, Heading1),
+    heading(2, Heading2),
+    heading(3, Heading3),
+    {
+        key: 'bulletList',
+        icon: List,
+        run: (editor, range) => at(editor, range).toggleBulletList().run(),
+        active: (editor) => editor.isActive('bulletList'),
+    },
+    {
+        key: 'orderedList',
+        icon: ListOrdered,
+        run: (editor, range) => at(editor, range).toggleOrderedList().run(),
+        active: (editor) => editor.isActive('orderedList'),
+    },
+    {
+        key: 'taskList',
+        icon: ListChecks,
+        run: (editor, range) => at(editor, range).toggleTaskList().run(),
+        active: (editor) => editor.isActive('taskList'),
+    },
+    {
+        key: 'blockquote',
+        icon: Quote,
+        run: (editor, range) => at(editor, range).toggleBlockquote().run(),
+        active: (editor) => editor.isActive('blockquote'),
+    },
+    {
+        key: 'codeBlock',
+        icon: Code2,
+        run: (editor, range) => at(editor, range).toggleCodeBlock().run(),
+        active: (editor) => editor.isActive('codeBlock'),
+    },
+    {
+        key: 'horizontalRule',
+        icon: Minus,
+        run: (editor, range) => at(editor, range).setHorizontalRule().run(),
+    },
+    {
+        key: 'table',
+        icon: TableIcon,
+        run: (editor, range) => at(editor, range).insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run(),
+        active: (editor) => editor.isActive('table'),
+    },
+];

package/dist/markdown/extensions.d.ts

@@ -0,0 +1,6 @@
+import type { Extensions } from '@tiptap/core';
+import { type SlashHandlers } from './slash.tsx';
+export declare function markdownExtensions(opts: {
+    placeholder?: string;
+    slash?: SlashHandlers;
+}): Extensions;

package/dist/markdown/extensions.js

@@ -0,0 +1,25 @@
+import StarterKit from '@tiptap/starter-kit';
+import { Placeholder } from '@tiptap/extensions';
+import { TaskList, TaskItem } from '@tiptap/extension-list';
+import { Table, TableRow, TableHeader, TableCell } from '@tiptap/extension-table';
+import Image from '@tiptap/extension-image';
+import { Markdown } from 'tiptap-markdown';
+import { slashMenu } from "./slash.js";
+export function markdownExtensions(opts) {
+    return [
+        StarterKit.configure({
+            link: { openOnClick: false },
+            underline: false,
+        }),
+        TaskList,
+        TaskItem.configure({ nested: true }),
+        Table,
+        TableRow,
+        TableHeader,
+        TableCell,
+        Image.configure({ inline: false }),
+        Markdown.configure({ transformPastedText: true, linkify: false }),
+        ...(opts.placeholder ? [Placeholder.configure({ placeholder: opts.placeholder })] : []),
+        ...(opts.slash ? [slashMenu(opts.slash)] : []),
+    ];
+}

package/dist/markdown/slash.d.ts

@@ -0,0 +1,23 @@
+import { Extension, type Editor } from '@tiptap/core';
+export type SlashRange = {
+    from: number;
+    to: number;
+};
+export type SlashItem = {
+    key: string;
+    run: (ctx: {
+        editor: Editor;
+        range: SlashRange;
+    }) => void;
+};
+export type SlashHandlers = {
+    filter: (query: string) => SlashItem[];
+    open: (state: {
+        rect: DOMRect | null;
+        items: SlashItem[];
+        pick: (item: SlashItem) => void;
+    }) => void;
+    close: () => void;
+    keyDown: (event: KeyboardEvent) => boolean;
+};
+export declare function slashMenu(handlers: SlashHandlers): Extension;

package/dist/markdown/slash.js

@@ -0,0 +1,27 @@
+import { Extension } from '@tiptap/core';
+import Suggestion from '@tiptap/suggestion';
+export function slashMenu(handlers) {
+    return Extension.create({
+        name: 'slashMenu',
+        addProseMirrorPlugins() {
+            return [
+                Suggestion({
+                    editor: this.editor,
+                    char: '/',
+                    allowedPrefixes: [' ', '\n'],
+                    items: ({ query }) => handlers.filter(query),
+                    command: ({ editor, range, props }) => props.run({ editor, range }),
+                    render: () => {
+                        const show = (props) => handlers.open({ rect: props.clientRect?.() ?? null, items: props.items, pick: props.command });
+                        return {
+                            onStart: show,
+                            onUpdate: show,
+                            onKeyDown: ({ event }) => handlers.keyDown(event),
+                            onExit: () => handlers.close(),
+                        };
+                    },
+                }),
+            ];
+        },
+    });
+}

package/dist/markdown/toolbar.d.ts

@@ -0,0 +1,13 @@
+import type { Editor } from '@tiptap/core';
+import { type LucideIcon } from 'lucide-react';
+export declare const ToolButton: import("react").ForwardRefExoticComponent<{
+    icon: LucideIcon;
+    label: string;
+    active?: boolean;
+    disabled?: boolean;
+    tone?: "danger";
+    onClick?: () => void;
+} & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "onClick"> & import("react").RefAttributes<HTMLButtonElement>>;
+export declare function Toolbar({ editor }: {
+    editor: Editor;
+}): import("react").JSX.Element;

package/dist/markdown/toolbar.js

@@ -0,0 +1,119 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, forwardRef } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useEditorState } from '@tiptap/react';
+import { Bold, Italic, Strikethrough, Code, Link as LinkIcon, Unlink, ImagePlus, Undo2, Redo2, Check, BetweenVerticalEnd, BetweenHorizontalEnd, Rows3, Columns3, Grid2x2X, } from 'lucide-react';
+import { Input } from "../components/ui/input.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../components/ui/popover.js";
+import { BLOCKS } from "./blocks.js";
+export const ToolButton = forwardRef(({ icon: Icon, label, active, disabled, tone, onClick, ...rest }, ref) => (_jsx("button", { ref: ref, type: "button", "aria-label": label, title: label, "aria-pressed": active ?? false, disabled: disabled, onClick: onClick, ...rest, className: `flex h-7 w-7 shrink-0 items-center justify-center rounded-md text-muted transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent disabled:opacity-40 ${tone === 'danger' ? 'hover:bg-danger/10 hover:text-danger' : 'hover:bg-elevated hover:text-text'} ${active ? 'bg-elevated text-accent' : ''}`, children: _jsx(Icon, { size: 15 }) })));
+ToolButton.displayName = 'ToolButton';
+const Divider = () => _jsx("span", { className: "mx-0.5 h-5 w-px shrink-0 bg-border", "aria-hidden": true });
+const MARKS = [
+    { key: 'bold', icon: Bold, run: (e) => e.chain().focus().toggleBold().run(), active: (e) => e.isActive('bold') },
+    {
+        key: 'italic',
+        icon: Italic,
+        run: (e) => e.chain().focus().toggleItalic().run(),
+        active: (e) => e.isActive('italic'),
+    },
+    {
+        key: 'strike',
+        icon: Strikethrough,
+        run: (e) => e.chain().focus().toggleStrike().run(),
+        active: (e) => e.isActive('strike'),
+    },
+    { key: 'code', icon: Code, run: (e) => e.chain().focus().toggleCode().run(), active: (e) => e.isActive('code') },
+];
+function LinkForm({ editor, onDone }) {
+    const { t } = useTranslation();
+    const [href, setHref] = useState(editor.getAttributes('link').href ?? '');
+    const apply = () => {
+        const chain = editor.chain().focus().extendMarkRange('link');
+        if (href.trim() === '')
+            chain.unsetLink().run();
+        else
+            chain.setLink({ href: href.trim() }).run();
+        onDone();
+    };
+    return (_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx(Input, { autoFocus: true, value: href, placeholder: "https://", "aria-label": t('form.mdLink'), onChange: (e) => setHref(e.target.value), onKeyDown: (e) => {
+                    if (e.key === 'Enter') {
+                        e.preventDefault();
+                        apply();
+                    }
+                    if (e.key === 'Escape') {
+                        e.preventDefault();
+                        onDone();
+                    }
+                }, className: "h-7 flex-1 text-sm" }), _jsx(ToolButton, { icon: Check, label: t('actions.save'), onClick: apply }), _jsx(ToolButton, { icon: Unlink, label: t('form.md.unlink'), onClick: () => {
+                    editor.chain().focus().extendMarkRange('link').unsetLink().run();
+                    onDone();
+                } })] }));
+}
+function ImageForm({ editor, onDone }) {
+    const { t } = useTranslation();
+    const [src, setSrc] = useState('');
+    const [alt, setAlt] = useState('');
+    const apply = () => {
+        const address = src.trim();
+        if (address)
+            editor
+                .chain()
+                .focus()
+                .setImage({ src: address, alt: alt.trim() || undefined })
+                .run();
+        onDone();
+    };
+    return (_jsxs("div", { className: "flex flex-wrap items-center gap-1.5", children: [_jsx(Input, { autoFocus: true, value: src, placeholder: "https://\u2026 /uploads/\u2026", "aria-label": t('form.md.imageUrl'), onChange: (e) => setSrc(e.target.value), onKeyDown: (e) => {
+                    if (e.key === 'Enter') {
+                        e.preventDefault();
+                        apply();
+                    }
+                    if (e.key === 'Escape') {
+                        e.preventDefault();
+                        onDone();
+                    }
+                }, className: "h-7 min-w-0 flex-1 text-sm" }), _jsx(Input, { value: alt, placeholder: t('form.md.imageAlt'), "aria-label": t('form.md.imageAlt'), onChange: (e) => setAlt(e.target.value), onKeyDown: (e) => {
+                    if (e.key === 'Enter') {
+                        e.preventDefault();
+                        apply();
+                    }
+                    if (e.key === 'Escape') {
+                        e.preventDefault();
+                        onDone();
+                    }
+                }, className: "h-7 w-32 text-sm" }), _jsx(ToolButton, { icon: Check, label: t('actions.save'), disabled: !src.trim(), onClick: apply })] }));
+}
+function TableTools({ editor }) {
+    const { t } = useTranslation();
+    return (_jsxs(_Fragment, { children: [_jsx(Divider, {}), _jsx(ToolButton, { icon: BetweenVerticalEnd, label: t('form.md.addRow'), onClick: () => editor.chain().focus().addRowAfter().run() }), _jsx(ToolButton, { icon: BetweenHorizontalEnd, label: t('form.md.addColumn'), onClick: () => editor.chain().focus().addColumnAfter().run() }), _jsx(ToolButton, { icon: Rows3, tone: "danger", label: t('form.md.deleteRow'), onClick: () => editor.chain().focus().deleteRow().run() }), _jsx(ToolButton, { icon: Columns3, tone: "danger", label: t('form.md.deleteColumn'), onClick: () => editor.chain().focus().deleteColumn().run() }), _jsx(ToolButton, { icon: Grid2x2X, tone: "danger", label: t('form.md.deleteTable'), onClick: () => editor.chain().focus().deleteTable().run() })] }));
+}
+function AddressButton({ icon, label, active, open, onOpenChange, children, }) {
+    return (_jsxs(Popover, { open: open, onOpenChange: onOpenChange, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(ToolButton, { icon: icon, label: label, active: active || open }) }), _jsx(PopoverContent, { align: "start", className: "w-80 p-2", children: children })] }));
+}
+export function Toolbar({ editor }) {
+    const { t } = useTranslation();
+    const [form, setForm] = useState(null);
+    const state = useEditorState({
+        editor,
+        selector: ({ editor: e }) => e && !e.isDestroyed
+            ? {
+                marks: MARKS.map((m) => m.active(e)),
+                blocks: BLOCKS.map((b) => b.active?.(e) ?? false),
+                link: e.isActive('link'),
+                table: e.isActive('table'),
+                canUndo: e.can().undo(),
+                canRedo: e.can().redo(),
+            }
+            : {
+                marks: MARKS.map(() => false),
+                blocks: BLOCKS.map(() => false),
+                link: false,
+                table: false,
+                canUndo: false,
+                canRedo: false,
+            },
+    });
+    const group = (children) => _jsx("div", { className: "flex items-center gap-0.5", children: children });
+    return (_jsx("div", { className: "flex flex-col gap-1.5", children: _jsxs("div", { className: "-mx-0.5 flex items-center gap-0.5 overflow-x-auto overscroll-x-contain border-b border-border px-0.5 pb-1.5 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", children: [group(_jsxs(_Fragment, { children: [_jsx(ToolButton, { icon: Undo2, label: t('form.md.undo'), disabled: !state.canUndo, onClick: () => editor.chain().focus().undo().run() }), _jsx(ToolButton, { icon: Redo2, label: t('form.md.redo'), disabled: !state.canRedo, onClick: () => editor.chain().focus().redo().run() })] })), _jsx(Divider, {}), group(MARKS.map((m, i) => (_jsx(ToolButton, { icon: m.icon, label: t(`form.md.${m.key}`), active: state.marks[i], onClick: () => m.run(editor) }, m.key)))), _jsx(Divider, {}), group(BLOCKS.map((b, i) => (_jsx(ToolButton, { icon: b.icon, label: t(`form.md.${b.key}`), active: state.blocks[i], onClick: () => b.run(editor) }, b.key)))), _jsx(Divider, {}), group(_jsxs(_Fragment, { children: [_jsx(AddressButton, { icon: LinkIcon, label: t('form.md.link'), active: state.link, open: form === 'link', onOpenChange: (o) => setForm(o ? 'link' : null), children: _jsx(LinkForm, { editor: editor, onDone: () => setForm(null) }) }), _jsx(AddressButton, { icon: ImagePlus, label: t('form.md.image'), open: form === 'image', onOpenChange: (o) => setForm(o ? 'image' : null), children: _jsx(ImageForm, { editor: editor, onDone: () => setForm(null) }) })] })), state.table && _jsx(TableTools, { editor: editor })] }) }));
+}

package/dist/plugin-ui.d.ts

@@ -0,0 +1,43 @@
+import type { FC, ComponentType } from 'react';
+import type { FieldRenderer, TemplateImporter, RecordViewProps } from './types.ts';
+import type { ListViewDef } from './list-view.ts';
+export interface SlotEntry {
+    slot: string;
+    id: string;
+    load: () => Promise<{
+        default: ComponentType;
+    }>;
+    order?: number;
+}
+export interface RouteEntry {
+    path: string;
+    load: () => Promise<{
+        default: ComponentType;
+    }>;
+}
+export interface NavEntry {
+    to: string;
+    labelKey: string;
+    icon?: string;
+    order?: number;
+}
+export interface PluginUIBundle {
+    shelf?: {
+        library: string;
+        shelf: string;
+        RecordView?: FC<RecordViewProps>;
+    };
+    renderers?: FieldRenderer[];
+    listViews?: ListViewDef[];
+    templates?: Record<string, TemplateImporter<any>>;
+    translations?: Partial<Record<'uk' | 'ru' | 'en', Record<string, unknown>>>;
+    slots?: SlotEntry[];
+    routes?: RouteEntry[];
+    nav?: NavEntry[];
+}
+export declare function definePluginUI(b: PluginUIBundle): PluginUIBundle;
+export declare function applyAppUI(b: PluginUIBundle): void;
+export declare function getSlotEntries(slot: string): SlotEntry[];
+export declare function getPluginRoutes(): RouteEntry[];
+export declare function getPluginNav(): NavEntry[];
+export declare function resetAppUI(): void;

package/dist/plugin-ui.js

@@ -0,0 +1,37 @@
+export function definePluginUI(b) {
+    return b;
+}
+const slotRegistry = new Map();
+const routeRegistry = new Map();
+const navRegistry = new Map();
+export function applyAppUI(b) {
+    for (const s of b.slots ?? []) {
+        let bucket = slotRegistry.get(s.slot);
+        if (!bucket) {
+            bucket = new Map();
+            slotRegistry.set(s.slot, bucket);
+        }
+        bucket.set(s.id, s);
+    }
+    for (const r of b.routes ?? [])
+        routeRegistry.set(r.path, r);
+    for (const n of b.nav ?? [])
+        navRegistry.set(n.to, n);
+}
+function byOrder(key) {
+    return (a, b) => (a.order ?? 0) - (b.order ?? 0) || key(a).localeCompare(key(b));
+}
+export function getSlotEntries(slot) {
+    return [...(slotRegistry.get(slot)?.values() ?? [])].sort(byOrder((e) => e.id));
+}
+export function getPluginRoutes() {
+    return [...routeRegistry.values()];
+}
+export function getPluginNav() {
+    return [...navRegistry.values()].sort(byOrder((n) => n.to));
+}
+export function resetAppUI() {
+    slotRegistry.clear();
+    routeRegistry.clear();
+    navRegistry.clear();
+}

package/dist/registry.d.ts

@@ -0,0 +1,26 @@
+import type { FieldClient, FieldMeta, LayoutEl } from '@coffer-org/sdk/fields';
+import type { FieldRenderer, ElementRenderProps, FieldInlineProps, FieldValueProps, FieldPickerProps, PickerSize, EditorMode, BoxGeom, TemplateImporter } from './types.ts';
+import type { FC } from 'react';
+export declare const rendererRegistry: Record<string, FieldRenderer>;
+type NoWidenedProps<P> = Exclude<keyof P, keyof ElementRenderProps> extends never ? unknown : never;
+export declare function registerRenderer<P extends ElementRenderProps>(r: {
+    kinds: string[];
+    layout?: 'block' | 'scalar' | ((field: FieldMeta) => 'block' | 'scalar');
+    childWidth?: string;
+    box?: BoxGeom;
+    Page: FC<P>;
+    Inline?: FC<FieldInlineProps>;
+    Value?: FC<FieldValueProps>;
+    pickerSize?: PickerSize | ((field: FieldMeta) => PickerSize);
+    Picker?: FC<FieldPickerProps>;
+    editor?: EditorMode;
+    keys?: FieldRenderer['keys'];
+} & NoWidenedProps<P>): void;
+export declare function resolveRenderer(field: Pick<FieldClient, 'kind'>): FieldRenderer | undefined;
+export declare function elementKind(el: LayoutEl): string;
+export declare function fieldLayout(field: FieldMeta): 'block' | 'scalar';
+export declare const multiBlock: (field: FieldMeta) => "block" | "scalar";
+export declare function resolveFieldSpan(field: FieldMeta): number;
+export declare function registerTemplate(name: string, importer: TemplateImporter<any>): void;
+export declare function resolveTemplate(name: string): TemplateImporter | undefined;
+export {};