@coffer-org/web-ui 4.0.0

package/README.md

@@ -0,0 +1,87 @@
+# @coffer-org/web-ui
+
+The UI contract for Coffer plugin **web bundles**. A plugin's `dist/web.js` is
+loaded at runtime by the host's federation loader; this package defines what that
+bundle declares (`PluginUIBundle`) and the field-renderer registry it plugs into.
+
+## What a web bundle exports
+
+`web.js` **default-exports** a single `PluginUIBundle` — one bundle, not an array:
+
+```ts
+export default PluginUIBundle;
+```
+
+Build one with `definePluginUI(bundle)`:
+
+```tsx
+import { definePluginUI } from '@coffer-org/web-ui';
+
+export default definePluginUI({
+  // shelf?:        { library, shelf, RecordView? } — only needed for a custom
+  //                RecordView (replaces the generic RecordContent) tied to one shelf
+  // renderers?:    FieldRenderer[] — own field-type renderers (each carries kinds[])
+  // listViews?:    ListViewDef[] — own list-view kinds
+  // templates?:    Record<string, TemplateImporter<any>> — action-result templates
+  // translations?: Partial<Record<'uk' | 'ru' | 'en', Record<string, unknown>>>
+  // slots?/routes?/nav?: contributions to the app shell (overlay, SPA routes, sidebar nav)
+  translations: { en: { 'myplugin.hello': 'Hello from myplugin' } },
+});
+```
+
+`definePluginUI` is the identity function — it exists so every plugin's `ui.tsx`
+has one recognizable call, not three. There is no per-plugin choice to make: a
+`ui.tsx` that only needs a `RecordView`, one that only needs `renderers`, and one
+that only needs `slots` all call the same factory with the same type.
+
+The host's federation loader applies the bundle once: `applyWebBundle`
+(`packages/web/federation.ts`) forwards `slots`/`routes`/`nav` to `applyAppUI`
+(this package) and itself registers `shelf.RecordView` for `shelf.library/shelf`,
+calls `registerRenderer`/`registerListView` for `renderers`/`listViews`, and merges
+`translations` into the global i18next instance.
+
+## Vendor singleton model (importmap)
+
+Plugin web bundles must **not** ship their own copy of React, i18next, or
+`@coffer-org/web-ui` — they share the host's. The host publishes one vendor bundle
+under `/vendor/*` and wires an [import map](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type/importmap)
+so every bare specifier resolves to that single instance:
+
+```html
+<script type="importmap">
+  {
+    "imports": {
+      "react": "/vendor/react.js",
+      "react-dom": "/vendor/react-dom.js",
+      "i18next": "/vendor/i18next.js",
+      "@coffer-org/web-ui": "/vendor/web-ui.js"
+    }
+  }
+</script>
+```
+
+This keeps a single React (so hooks/context work across bundles) and a single
+i18next (so `addResourceBundle` merges into the one live instance). In dev, Vite
+resolves these specifiers via its own aliases, so the import map is a prod-only
+concern.
+
+## Supported vendor majors
+
+| Vendor                | Range                        |
+| --------------------- | ---------------------------- |
+| `react` / `react-dom` | **19** (`>=19`)              |
+| `i18next`             | **26** (23+ host-compatible) |
+
+A scaffolded plugin declares these as **peer** dependencies (see
+`create-coffer-plugin`'s `package.json` template), so it builds against the
+host's instance instead of bundling its own.
+
+## Mismatched vendor versions warn, don't block
+
+The import map always resolves a plugin's `react` / `react-dom` / `i18next` /
+`@coffer-org/web-ui` imports to the host's single instance — there is no runtime
+version gate that refuses to load a bundle. A vendor-major mismatch surfaces as a
+**peer-dependency warning at install/build time**, not a hard runtime failure: a
+plugin built against an older major still loads against the host's instance and
+runs as far as the shared API allows. Keep peers in range to avoid surprises; a
+mismatch is a warning, not a block.

package/dist/Markdown.d.ts

@@ -0,0 +1,4 @@
+export declare function renderMarkdown(src: string): string;
+export default function Markdown({ value }: {
+    value: string;
+}): import("react").JSX.Element;

package/dist/Markdown.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { micromark } from 'micromark';
+import { gfm, gfmHtml } from 'micromark-extension-gfm';
+export function renderMarkdown(src) {
+    return micromark(src, {
+        allowDangerousHtml: true,
+        extensions: [gfm()],
+        htmlExtensions: [gfmHtml()],
+    });
+}
+export default function Markdown({ value }) {
+    return _jsx("div", { className: "md-static", dangerouslySetInnerHTML: { __html: renderMarkdown(value) } });
+}

package/dist/MarkdownEditor.d.ts

@@ -0,0 +1,6 @@
+export default function MarkdownEditor({ value, onChange, placeholder, readonly, }: {
+    value: string;
+    onChange?: (v: string) => void;
+    placeholder?: string;
+    readonly?: boolean;
+}): import("react").JSX.Element | null;

package/dist/MarkdownEditor.js

@@ -0,0 +1,83 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { EditorContent, useEditor } from '@tiptap/react';
+import { useTranslation } from 'react-i18next';
+import { markdownExtensions } from "./markdown/extensions.js";
+import { BLOCKS } from "./markdown/blocks.js";
+import { Toolbar } from "./markdown/toolbar.js";
+const markdownOf = (editor) => editor && !editor.isDestroyed ? editor.storage.markdown : undefined;
+export default function MarkdownEditor({ value, onChange, placeholder, readonly, }) {
+    const { t } = useTranslation();
+    const [slash, setSlash] = useState(null);
+    const slashRef = useRef(null);
+    slashRef.current = slash;
+    const label = (key) => t(`form.md.${key}`);
+    const labelRef = useRef(label);
+    labelRef.current = label;
+    const handlers = useMemo(() => ({
+        filter: (query) => {
+            const q = query.trim().toLowerCase();
+            const items = BLOCKS.map((block) => ({
+                key: block.key,
+                run: ({ editor: e, range }) => block.run(e, range),
+            }));
+            if (!q)
+                return items;
+            return items.filter((item) => item.key.toLowerCase().includes(q) || labelRef.current(item.key).toLowerCase().includes(q));
+        },
+        open: ({ rect, items, pick }) => setSlash((prev) => ({ rect, items, pick, index: prev && prev.index < items.length ? prev.index : 0 })),
+        close: () => setSlash(null),
+        keyDown: (event) => {
+            const current = slashRef.current;
+            if (!current)
+                return false;
+            const last = current.items.length - 1;
+            if (event.key === 'ArrowDown') {
+                setSlash({ ...current, index: current.index >= last ? 0 : current.index + 1 });
+                return true;
+            }
+            if (event.key === 'ArrowUp') {
+                setSlash({ ...current, index: current.index <= 0 ? last : current.index - 1 });
+                return true;
+            }
+            if (event.key === 'Enter') {
+                const item = current.items[current.index];
+                if (!item)
+                    return false;
+                current.pick(item);
+                return true;
+            }
+            if (event.key === 'Escape') {
+                setSlash(null);
+                return true;
+            }
+            return false;
+        },
+    }), []);
+    const editor = useEditor({
+        editable: !readonly,
+        extensions: markdownExtensions({ placeholder: readonly ? undefined : placeholder, slash: handlers }),
+        content: value,
+        autofocus: false,
+        onUpdate: ({ editor: e }) => {
+            const markdown = markdownOf(e);
+            if (markdown)
+                onChange?.(markdown.getMarkdown());
+        },
+        editorProps: { attributes: { class: 'md-static outline-none' } },
+    });
+    useEffect(() => {
+        const markdown = markdownOf(editor);
+        if (!editor || !markdown)
+            return;
+        if (value === markdown.getMarkdown())
+            return;
+        editor.commands.setContent(value, { emitUpdate: false });
+    }, [editor, value]);
+    if (!editor || editor.isDestroyed)
+        return null;
+    return (_jsxs("div", { className: "flex min-h-0 min-w-0 flex-1 flex-col gap-1.5 md:gap-2", children: [!readonly && _jsx(Toolbar, { editor: editor }), _jsx(EditorContent, { editor: editor, className: "min-h-48 w-full min-w-0 max-w-full flex-1 overflow-y-auto rounded-lg border border-border bg-bg px-2 py-1.5 transition-colors focus-within:border-accent md:min-h-64 md:rounded-xl md:px-4 md:py-3" }), slash && slash.items.length > 0 && (_jsx("div", { role: "listbox", className: "fixed z-50 max-h-64 w-56 overflow-y-auto rounded-lg border border-border bg-surface p-1 shadow-lg", style: { top: (slash.rect?.bottom ?? 0) + 4, left: slash.rect?.left ?? 0 }, children: slash.items.map((item, i) => {
+                    const Icon = BLOCKS.find((b) => b.key === item.key)?.icon;
+                    return (_jsxs("button", { type: "button", role: "option", "aria-selected": i === slash.index, onMouseEnter: () => setSlash({ ...slash, index: i }), onClick: () => slash.pick(item), className: `flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm ${i === slash.index ? 'bg-elevated text-text' : 'text-muted'}`, children: [Icon && _jsx(Icon, { size: 15, className: "shrink-0" }), label(item.key)] }, item.key));
+                }) }))] }));
+}

package/dist/actions/ActionButton.d.ts

@@ -0,0 +1,7 @@
+import type { ButtonEl } from '@coffer-org/sdk/fields';
+import { type ActionContext } from './registry.ts';
+export declare function ActionButton({ el, ctx, disabled }: {
+    el: ButtonEl;
+    ctx: ActionContext;
+    disabled?: boolean;
+}): import("react").JSX.Element;

package/dist/actions/ActionButton.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { toast } from 'sonner';
+import { Button } from "../components/ui/button.js";
+import { Icon } from "../components/Icon.js";
+import { Dialog, DialogContent, DialogHeader } from "../components/ui/dialog.js";
+import { resolveAction } from "./registry.js";
+import { TemplateHost } from "./TemplateHost.js";
+import { PopupBody } from "./PopupBody.js";
+export function ActionButton({ el, ctx, disabled }) {
+    const { t } = useTranslation();
+    const [loading, setLoading] = useState(false);
+    const [popup, setPopup] = useState(null);
+    const show = (ui) => {
+        if (ui.kind === 'popup') {
+            setPopup(ui);
+            return;
+        }
+        const body = ui.component ? (_jsx(TemplateHost, { name: ui.component.name, data: ui.component.data })) : (t(ui.message ?? '', ui.params));
+        if (ui.variant === 'success')
+            toast.success(body);
+        else if (ui.variant === 'error')
+            toast.error(body);
+        else
+            toast(body);
+    };
+    const run = async () => {
+        const handler = resolveAction(el.value);
+        if (!handler) {
+            toast.error(t('actions.actionNotFound'));
+            return;
+        }
+        setLoading(true);
+        try {
+            const res = await handler(ctx);
+            if (res)
+                show(res);
+            else
+                toast.success(t('actions.actionSuccess'));
+        }
+        catch (e) {
+            const ui = e.ui;
+            if (ui)
+                show(ui);
+            else
+                toast.error(e instanceof Error ? e.message : t('actions.actionError'));
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    return (_jsxs(_Fragment, { children: [_jsxs(Button, { variant: el.variant ?? 'outline', onClick: run, disabled: disabled || loading, children: [loading ? (_jsx("span", { className: "animate-spin inline-block w-4 h-4 border-2 border-current/30 border-t-current rounded-full" })) : (el.icon && _jsx(Icon, { name: el.icon, size: 16 })), t(el.label)] }), _jsx(Dialog, { open: !!popup, onOpenChange: (o) => !o && setPopup(null), children: _jsx(DialogContent, { children: _jsx(DialogHeader, { children: popup && _jsx(PopupBody, { ui: popup }) }) }) })] }));
+}

package/dist/actions/PopupBody.d.ts

@@ -0,0 +1,4 @@
+import type { ActionUI } from './registry.ts';
+export declare function PopupBody({ ui }: {
+    ui: ActionUI;
+}): import("react").JSX.Element;

package/dist/actions/PopupBody.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation } from 'react-i18next';
+import { DialogTitle, DialogDescription } from "../components/ui/dialog.js";
+import { TemplateHost } from "./TemplateHost.js";
+export function PopupBody({ ui }) {
+    const { t } = useTranslation();
+    return (_jsxs(_Fragment, { children: [_jsx(DialogTitle, { children: ui.title ? t(ui.title, ui.params) : t('actions.notice') }), ui.component ? (_jsx(TemplateHost, { name: ui.component.name, data: ui.component.data })) : (_jsx(DialogDescription, { children: t(ui.message ?? '', ui.params) }))] }));
+}

package/dist/actions/TemplateHost.d.ts

@@ -0,0 +1,4 @@
+export declare function TemplateHost({ name, data }: {
+    name: string;
+    data?: unknown;
+}): import("react").JSX.Element;

package/dist/actions/TemplateHost.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { Component, lazy, Suspense } from 'react';
+import { useTranslation } from 'react-i18next';
+import { resolveTemplate } from "../registry.js";
+const cache = new Map();
+function lazyFor(name) {
+    const importer = resolveTemplate(name);
+    if (!importer)
+        return null;
+    let c = cache.get(name);
+    if (!c) {
+        c = lazy(importer);
+        cache.set(name, c);
+    }
+    return c;
+}
+class Boundary extends Component {
+    state = { failed: false };
+    static getDerivedStateFromError() {
+        return { failed: true };
+    }
+    render() {
+        return this.state.failed ? this.props.fallback : this.props.children;
+    }
+}
+const Spinner = () => (_jsx("span", { className: "animate-spin inline-block w-4 h-4 border-2 border-current/30 border-t-current rounded-full" }));
+export function TemplateHost({ name, data }) {
+    const { t } = useTranslation();
+    const fallback = _jsx(_Fragment, { children: t('actions.notice') });
+    const Cmp = lazyFor(name);
+    if (!Cmp) {
+        console.warn(`[template] unknown '${name}'`);
+        return fallback;
+    }
+    return (_jsx(Boundary, { fallback: fallback, children: _jsx(Suspense, { fallback: _jsx(Spinner, {}), children: _jsx(Cmp, { data: data, t: t }) }) }));
+}

package/dist/actions/registry.d.ts

@@ -0,0 +1,20 @@
+export interface ActionContext {
+    library: string;
+    shelf: string;
+    recordId: string;
+}
+export interface ActionUI {
+    kind: 'toast' | 'popup';
+    variant?: 'success' | 'error' | 'info';
+    title?: string;
+    message?: string;
+    params?: Record<string, string | number>;
+    component?: {
+        name: string;
+        data?: unknown;
+    };
+}
+export type ActionResult = void | ActionUI;
+export type ActionHandler = (ctx: ActionContext) => Promise<ActionResult>;
+export declare function registerAction(key: string, handler: ActionHandler): void;
+export declare function resolveAction(key: string): ActionHandler | undefined;

package/dist/actions/registry.js

@@ -0,0 +1,9 @@
+const registry = new Map();
+export function registerAction(key, handler) {
+    if (registry.has(key))
+        throw new Error(`[actions] '${key}' already registered`);
+    registry.set(key, handler);
+}
+export function resolveAction(key) {
+    return registry.get(key);
+}

package/dist/components/ExtendReasonInfo.d.ts

@@ -0,0 +1,6 @@
+import type { ExtendDef } from '@coffer-org/sdk/extend';
+export declare function ExtendReasonInfo({ ext, fieldLabel, valueLabel, }: {
+    ext: ExtendDef;
+    fieldLabel: (key: string) => string;
+    valueLabel?: (key: string, value: string | number | boolean) => string;
+}): import("react").JSX.Element | null;

package/dist/components/ExtendReasonInfo.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation } from 'react-i18next';
+import { describeCondition } from '@coffer-org/sdk/condition';
+import { Icon } from "./Icon.js";
+import { Popover, PopoverTrigger, PopoverContent } from "./ui/popover.js";
+export function ExtendReasonInfo({ ext, fieldLabel, valueLabel, }) {
+    const { t } = useTranslation();
+    const clauses = describeCondition(ext.showWhen, fieldLabel, valueLabel);
+    if (clauses.length === 0)
+        return null;
+    return (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { type: "button", "aria-label": t('extend.shownWhen'), className: "inline-flex items-center text-muted hover:text-text", children: _jsx(Icon, { name: "lucide:info", size: 14 }) }), _jsxs(PopoverContent, { align: "start", className: "w-auto max-w-xs text-sm", children: [_jsx("p", { className: "text-muted mb-1", children: t('extend.shownWhen') }), _jsx("p", { children: clauses.join('; ') })] })] }));
+}

package/dist/components/FavoriteButton.d.ts

@@ -0,0 +1,8 @@
+export declare function FavoriteButton({ favorite, busy, onClick, labelAdd, labelRemove, variant, }: {
+    favorite: boolean;
+    busy?: boolean;
+    onClick: () => void;
+    labelAdd: string;
+    labelRemove: string;
+    variant?: 'ghost' | 'outline';
+}): import("react").JSX.Element;

package/dist/components/FavoriteButton.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Star } from 'lucide-react';
+import { Button } from './ui/button';
+export function FavoriteButton({ favorite, busy = false, onClick, labelAdd, labelRemove, variant = 'ghost', }) {
+    const label = favorite ? labelRemove : labelAdd;
+    return (_jsx(Button, { variant: variant, size: "icon", type: "button", disabled: busy, "aria-label": label, "aria-pressed": favorite, title: label, onClick: onClick, className: favorite ? 'text-accent hover:text-accent' : 'text-muted hover:text-text', children: _jsx(Star, { "data-icon": "inline-start", size: 16, fill: favorite ? 'currentColor' : 'none' }) }));
+}

package/dist/components/Icon.d.ts

@@ -0,0 +1,6 @@
+export declare function Icon({ name, size, className, strokeWidth, }: {
+    name?: string;
+    size?: number;
+    className?: string;
+    strokeWidth?: number;
+}): import("react").JSX.Element | null;

package/dist/components/Icon.js

@@ -0,0 +1,12 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { HelpCircle } from 'lucide-react';
+import { resolveIcon } from "./icons/registry.js";
+export function Icon({ name, size = 16, className, strokeWidth, }) {
+    if (!name)
+        return null;
+    const node = resolveIcon(name, size, className, strokeWidth);
+    if (node !== undefined)
+        return _jsx(_Fragment, { children: node });
+    console.warn(`[Icon] unknown icon: ${name}`);
+    return _jsx(HelpCircle, { size: size, className: className, strokeWidth: strokeWidth });
+}

package/dist/components/PageBody.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare function PageBody({ children }: {
+    children: React.ReactNode;
+}): React.JSX.Element;

package/dist/components/PageBody.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function PageBody({ children }) {
+    return (_jsx("div", { className: "flex-1 overflow-y-auto", children: _jsx("div", { className: "mx-auto max-w-7xl px-5 py-8 md:px-8", children: children }) }));
+}

package/dist/components/RecordInline.d.ts

@@ -0,0 +1,8 @@
+import type { ShelfDef } from '@coffer-org/sdk/shelf';
+export declare function RecordInline({ shelf, row, size, height, className, }: {
+    shelf: ShelfDef;
+    row: Record<string, unknown>;
+    size?: 'sm' | 'md';
+    height?: number;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/components/RecordInline.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { inlineText, inlineImageKey } from '@coffer-org/sdk/shelf';
+import { mediaUrl } from "../host-services.js";
+import { OptionIconView } from "./ui/option-icon.js";
+function firstImageName(value) {
+    if (typeof value !== 'string' || !value)
+        return undefined;
+    try {
+        const p = JSON.parse(value);
+        const first = Array.isArray(p) ? p[0] : p;
+        if (first && typeof first === 'object' && typeof first.name === 'string')
+            return first.name;
+        if (typeof first === 'string')
+            return first;
+        return undefined;
+    }
+    catch {
+        return value;
+    }
+}
+export function RecordInline({ shelf, row, size = 'md', height, className, }) {
+    const text = inlineText(shelf, row);
+    const imgKey = inlineImageKey(shelf);
+    const imgName = imgKey ? firstImageName(row[imgKey]) : undefined;
+    const icon = imgName
+        ? { kind: 'image', value: mediaUrl(imgName) }
+        : { kind: 'icon', value: shelf.icon ?? 'lucide:square' };
+    return (_jsxs("span", { className: `inline-flex min-w-0 items-center gap-2 ${className ?? ''}`, style: height ? { height, minHeight: height } : undefined, children: [imgKey && _jsx(OptionIconView, { icon: icon, size: size === 'sm' ? 'md' : 'lg', framed: true }), _jsx("span", { className: "truncate", children: text })] }));
+}

package/dist/components/SaveStatus.d.ts

@@ -0,0 +1 @@
+export declare function SaveStatus(): import("react").JSX.Element | null;

package/dist/components/SaveStatus.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation } from 'react-i18next';
+import { Loader2 } from 'lucide-react';
+import { useRecordSave } from "../render/record-save-ctx.js";
+export function SaveStatus() {
+    const { t } = useTranslation();
+    const { saving } = useRecordSave();
+    if (!saving)
+        return null;
+    return (_jsxs("span", { className: "flex items-center gap-1.5 px-2 text-xs text-muted", "aria-live": "polite", children: [_jsx(Loader2, { size: 14, className: "animate-spin" }), _jsx("span", { className: "hidden sm:inline", children: t('save.saving') })] }));
+}

package/dist/components/Toolbar.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare function Toolbar({ children, actions }: {
+    children: React.ReactNode;
+    actions?: React.ReactNode;
+}): React.JSX.Element;

package/dist/components/Toolbar.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function Toolbar({ children, actions }) {
+    return (_jsxs("div", { "data-toolbar": true, className: "eink-solid sticky top-0 z-20 flex h-[52px] items-center justify-between gap-3 bg-bg/85 px-4 backdrop-blur md:px-6 border-b border-border2 shrink-0", children: [_jsx("div", { className: "flex items-center gap-2.5 min-w-0", children: children }), actions && (_jsx("div", { "data-toolbar-actions": true, className: "flex items-center gap-2 shrink-0", children: actions }))] }));
+}

package/dist/components/icons/color.d.ts

@@ -0,0 +1,2 @@
+import type { ReactNode } from 'react';
+export declare function colorIcon(name: string, size: number, className?: string): ReactNode;

package/dist/components/icons/color.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { BASIC_COLORS } from '@coffer-org/sdk/color-names';
+const BY_NAME = new Map(BASIC_COLORS.map((c) => [c.name, c.hex]));
+const HEX_RE = /^#[0-9a-fA-F]{6}$/;
+export function colorIcon(name, size, className) {
+    const hex = HEX_RE.test(name) ? name : BY_NAME.get(name);
+    if (!hex)
+        return null;
+    return (_jsx("span", { className: `shrink-0 inline-block rounded-full border border-border/60 ${className ?? ''}`, style: { width: size, height: size, backgroundColor: hex } }));
+}

package/dist/components/icons/flag.d.ts

@@ -0,0 +1,2 @@
+import type { ReactNode } from 'react';
+export declare function flagIcon(name: string, size: number, className?: string): ReactNode;

package/dist/components/icons/flag.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+void import('flag-icons/css/flag-icons.min.css');
+export function flagIcon(name, size, className) {
+    const code = name.toLowerCase();
+    return (_jsx("span", { className: `fi fi-${code} ${className ?? ''}`, style: { width: size, height: size * 0.75, display: 'inline-block', borderRadius: 2 } }));
+}

package/dist/components/icons/lucide.d.ts

@@ -0,0 +1,2 @@
+import type { ReactNode } from 'react';
+export declare function lucideIcon(name: string, size: number, className?: string, strokeWidth?: number): ReactNode;

package/dist/components/icons/lucide.js

@@ -0,0 +1,111 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { IdCard, Antenna, Plane, Plus, Globe, Sprout, CookingPot, SlidersHorizontal, Ticket, Hospital, Hotel, User, Users, Pill, ClipboardList, Radio, RadioTower, Camera, Package, BatteryFull, Link, Monitor, Rocket, Bus, Shield, PlaneTakeoff, Satellite, FlaskConical, Stethoscope, Soup, Glasses, Puzzle, Settings, AlertTriangle, Hand, MapPin, Gauge, DoorOpen, PaintRoller, Zap, Calendar, Clock, CalendarClock, ArrowLeftRight, ArrowUp, ArrowDown, Bug, Check, Droplet, Folder, FolderOutput, Ghost, House, Info, Landmark, Layers, Play, Radar, Receipt, RefreshCw, Ruler, Square, Wallet, Wifi, X, Star, Minus, Activity, Bot, Search, LogOut, Trash2, Beaker, Bed, Box, CalendarDays, Carrot, Circle, Clapperboard, Code, CreditCard, HardDrive, Hash, Image, Key, Languages, List, ListChecks, MessageCircle, Network, NotebookPen, Route, Rows3, Server, ShieldCheck, ShoppingCart, Store, Tag, Terminal, Type, Upload, } from 'lucide-react';
+const REGISTRY = {
+    'id-card': IdCard,
+    antenna: Antenna,
+    plane: Plane,
+    plus: Plus,
+    globe: Globe,
+    sprout: Sprout,
+    'cooking-pot': CookingPot,
+    'sliders-horizontal': SlidersHorizontal,
+    ticket: Ticket,
+    hospital: Hospital,
+    hotel: Hotel,
+    user: User,
+    users: Users,
+    pill: Pill,
+    'clipboard-list': ClipboardList,
+    radio: Radio,
+    'radio-tower': RadioTower,
+    camera: Camera,
+    package: Package,
+    'battery-full': BatteryFull,
+    link: Link,
+    monitor: Monitor,
+    rocket: Rocket,
+    bus: Bus,
+    shield: Shield,
+    'plane-takeoff': PlaneTakeoff,
+    satellite: Satellite,
+    'flask-conical': FlaskConical,
+    stethoscope: Stethoscope,
+    soup: Soup,
+    glasses: Glasses,
+    puzzle: Puzzle,
+    settings: Settings,
+    'alert-triangle': AlertTriangle,
+    hand: Hand,
+    'map-pin': MapPin,
+    gauge: Gauge,
+    'door-open': DoorOpen,
+    'paint-roller': PaintRoller,
+    zap: Zap,
+    calendar: Calendar,
+    clock: Clock,
+    'calendar-clock': CalendarClock,
+    'arrow-left-right': ArrowLeftRight,
+    'arrow-up': ArrowUp,
+    'arrow-down': ArrowDown,
+    bug: Bug,
+    check: Check,
+    droplet: Droplet,
+    folder: Folder,
+    'folder-output': FolderOutput,
+    ghost: Ghost,
+    house: House,
+    info: Info,
+    landmark: Landmark,
+    layers: Layers,
+    play: Play,
+    radar: Radar,
+    receipt: Receipt,
+    'refresh-cw': RefreshCw,
+    ruler: Ruler,
+    square: Square,
+    wallet: Wallet,
+    wifi: Wifi,
+    x: X,
+    star: Star,
+    minus: Minus,
+    activity: Activity,
+    bot: Bot,
+    search: Search,
+    'log-out': LogOut,
+    'trash-2': Trash2,
+    beaker: Beaker,
+    bed: Bed,
+    box: Box,
+    'calendar-days': CalendarDays,
+    carrot: Carrot,
+    circle: Circle,
+    clapperboard: Clapperboard,
+    code: Code,
+    'credit-card': CreditCard,
+    'hard-drive': HardDrive,
+    hash: Hash,
+    image: Image,
+    key: Key,
+    languages: Languages,
+    list: List,
+    'list-checks': ListChecks,
+    'message-circle': MessageCircle,
+    network: Network,
+    'notebook-pen': NotebookPen,
+    route: Route,
+    'rows-3': Rows3,
+    server: Server,
+    'shield-check': ShieldCheck,
+    'shopping-cart': ShoppingCart,
+    store: Store,
+    tag: Tag,
+    terminal: Terminal,
+    type: Type,
+    upload: Upload,
+};
+export function lucideIcon(name, size, className, strokeWidth) {
+    const Cmp = REGISTRY[name];
+    if (!Cmp)
+        return null;
+    return _jsx(Cmp, { size: size, className: className, strokeWidth: strokeWidth });
+}

package/dist/components/icons/registry.d.ts

@@ -0,0 +1,4 @@
+import type { ReactNode } from 'react';
+export type IconProvider = (name: string, size: number, className?: string, strokeWidth?: number) => ReactNode;
+export declare const providers: Record<string, IconProvider>;
+export declare function resolveIcon(raw: string, size: number, className?: string, strokeWidth?: number): ReactNode | undefined;