@vertebr/react 0.2.0 → 0.3.0

package/dist/components/admin/VertebrAdmin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VertebrAdmin.d.ts","sourceRoot":"","sources":["../../../src/components/admin/VertebrAdmin.tsx"],"names":[],"mappings":"AAkBA,MAAM,MAAM,iBAAiB,GAAG;IAC9B,kDAAkD;IAClD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gEAAgE;IAChE,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,4CAA4C;IAC5C,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,uDAAuD;IACvD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,oEAAoE;IACpE,cAAc,CAAC,EAAE,MAAM,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,OAAO,CAAC,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;IACtF,iDAAiD;IACjD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CACxC,CAAC;AAiCF,wBAAgB,YAAY,CAAC,EAC3B,OAAsB,EACtB,KAAuB,EACvB,aAA6B,EAC7B,eAAiC,EACjC,eAAiC,EACjC,cAAc,EACd,aAAa,EACb,SAAS,GACV,EAAE,iBAAiB,+BAolBnB"}
+{"version":3,"file":"VertebrAdmin.d.ts","sourceRoot":"","sources":["../../../src/components/admin/VertebrAdmin.tsx"],"names":[],"mappings":"AAkBA,MAAM,MAAM,iBAAiB,GAAG;IAC9B,kDAAkD;IAClD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gEAAgE;IAChE,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,4CAA4C;IAC5C,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,uDAAuD;IACvD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,oEAAoE;IACpE,cAAc,CAAC,EAAE,MAAM,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,OAAO,CAAC,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;IACtF,iDAAiD;IACjD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CACxC,CAAC;AAiCF,wBAAgB,YAAY,CAAC,EAC3B,OAAsB,EACtB,KAAuB,EACvB,aAA6B,EAC7B,eAAiC,EACjC,eAAiC,EACjC,cAAc,EACd,aAAa,EACb,SAAS,GACV,EAAE,iBAAiB,+BA+mBnB"}

package/dist/components/admin/VertebrAdmin.js

@@ -214,13 +214,35 @@ export function VertebrAdmin({ apiBase = "/admin/api", title = "Control plane",
     const refreshGallery = useCallback(async () => {
         setGalleryLoading(true);
         try {
-            const data = await client.getGallery();
+            const data = await client.getGallery({ fresh: true });
             setGalleryData(data);
         }
         finally {
             setGalleryLoading(false);
         }
     }, [client]);
+    const listGallery = useCallback(async () => {
+        const data = await client.getGallery();
+        return data.items;
+    }, [client]);
+    const uploadGallery = useCallback(async (files) => {
+        if (files.length === 1 && files[0]) {
+            const { item } = await client.uploadGalleryFile(files[0]);
+            return [item];
+        }
+        const { items } = await client.uploadGalleryFiles(files);
+        return items;
+    }, [client]);
+    const galleryPicker = catalog?.gallery
+        ? {
+            galleryUpload: {
+                accept: catalog.gallery.accept,
+                maxBytes: catalog.gallery.maxBytes,
+            },
+            onListGallery: listGallery,
+            onUploadGallery: uploadGallery,
+        }
+        : {};
     const envList = catalog?.environments ?? bootstrap?.environments ?? [];
     const activeEnv = envList.find((env) => env.id === environment);
     const authRequired = Boolean(activeEnv?.auth?.required);
@@ -339,13 +361,13 @@ export function VertebrAdmin({ apiBase = "/admin/api", title = "Control plane",
                                             const result = await client.uploadResourceFiles(resourceData.id, field, files);
                                             return result.files;
                                         }
-                                        : undefined })) : null, selection?.kind === "config" && configData ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "vertebr-panel-head", children: [_jsx("h2", { children: isPageSelection ? "Page content" : "Settings" }), _jsxs("span", { className: "vertebr-count", children: [Object.keys(configData.schema).length, " fields"] })] }), _jsx(ConfigForm, { schema: configData.schema, value: configData.value, onSave: async (next) => {
+                                        : undefined, ...galleryPicker })) : null, selection?.kind === "config" && configData ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "vertebr-panel-head", children: [_jsx("h2", { children: isPageSelection ? "Page content" : "Settings" }), _jsxs("span", { className: "vertebr-count", children: [Object.keys(configData.schema).length, " fields"] })] }), _jsx(ConfigForm, { schema: configData.schema, value: configData.value, onSave: async (next) => {
                                                 const saved = await client.setConfig(configData.id, next);
                                                 setConfigData({
                                                     ...configData,
                                                     value: saved.value,
                                                 });
-                                            } })] })) : null] })) : (_jsx("section", { className: "vertebr-panel", children: _jsx("div", { className: "vertebr-empty", children: authRequired
+                                            }, ...galleryPicker })] })) : null] })) : (_jsx("section", { className: "vertebr-panel", children: _jsx("div", { className: "vertebr-empty", children: authRequired
                                     ? "Authenticated access required for this environment."
                                     : loading
                                         ? "Loading…"

package/dist/components/config/ConfigForm.d.ts

@@ -1,19 +1,3 @@
-import type { FieldSchema, ResourceUploadMeta } from "@vertebr/client";
-export type ConfigFormVariant = "config" | "record";
-type ConfigFormProps = {
-    schema: Record<string, FieldSchema>;
-    value: Record<string, unknown>;
-    onSave: (value: Record<string, unknown>) => Promise<void>;
-    /** `record` uses a dense product-style editor. */
-    variant?: ConfigFormVariant;
-    /** Field-keyed upload capabilities from the host resource. */
-    uploads?: Record<string, ResourceUploadMeta>;
-    /** Upload files for a field; return public URL(s). */
-    onUpload?: (field: string, files: File[]) => Promise<Array<{
-        url: string;
-        name?: string;
-    }>>;
-};
-export declare function ConfigForm({ schema, value, onSave, variant, uploads, onUpload, }: ConfigFormProps): import("react").JSX.Element;
-export {};
+export { ConfigForm } from "./form/ConfigForm";
+export type { ConfigFormProps, ConfigFormVariant } from "./form/types";
 //# sourceMappingURL=ConfigForm.d.ts.map

package/dist/components/config/ConfigForm.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConfigForm.d.ts","sourceRoot":"","sources":["../../../src/components/config/ConfigForm.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,WAAW,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAGvE,MAAM,MAAM,iBAAiB,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAEpD,KAAK,eAAe,GAAG;IACrB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;IACpC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC/B,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1D,kDAAkD;IAClD,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,8DAA8D;IAC9D,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,kBAAkB,CAAC,CAAC;IAC7C,sDAAsD;IACtD,QAAQ,CAAC,EAAE,CACT,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,IAAI,EAAE,KACV,OAAO,CAAC,KAAK,CAAC;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC,CAAC;CACrD,CAAC;AAqNF,wBAAgB,UAAU,CAAC,EACzB,MAAM,EACN,KAAK,EACL,MAAM,EACN,OAAkB,EAClB,OAAO,EACP,QAAQ,GACT,EAAE,eAAe,+BAyUjB"}
+{"version":3,"file":"ConfigForm.d.ts","sourceRoot":"","sources":["../../../src/components/config/ConfigForm.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC/C,YAAY,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC"}

package/dist/components/config/ConfigForm.js

@@ -1,281 +1 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useMemo, useState } from "react";
-import { useForm, Controller, useWatch } from "react-hook-form";
-import { z } from "zod";
-import { zodResolver } from "@hookform/resolvers/zod";
-import * as Label from "@radix-ui/react-label";
-import * as Switch from "@radix-ui/react-switch";
-import { ImageUploadControl } from "../resources/ImageUploadControl";
-const RECORD_GROUP_ORDER = [
-    "Details",
-    "Content",
-    "Pricing",
-    "Inventory",
-    "Media",
-    "Status",
-];
-function buildZodSchema(schema) {
-    const shape = {};
-    for (const [key, field] of Object.entries(schema)) {
-        let zodField;
-        switch (field.type) {
-            case "number":
-                zodField = z.number();
-                if (field.min != null)
-                    zodField = zodField.min(field.min);
-                if (field.max != null)
-                    zodField = zodField.max(field.max);
-                break;
-            case "boolean":
-                zodField = z.boolean();
-                break;
-            default:
-                zodField = z.string();
-        }
-        if (!field.required) {
-            zodField = zodField.optional();
-        }
-        shape[key] = zodField;
-    }
-    return z.object(shape);
-}
-function humanizeKey(key) {
-    return key
-        .replace(/([a-z])([A-Z])/g, "$1 $2")
-        .replace(/[_-]+/g, " ")
-        .trim();
-}
-function escapeRegExp(value) {
-    return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-}
-function looksLikeUrl(value) {
-    return /^https?:\/\//i.test(value) || value.startsWith("//");
-}
-function isImageField(key, field) {
-    const hay = `${key} ${field?.label ?? ""}`;
-    return /(image|img|photo|avatar|thumbnail|thumb|cover)/i.test(hay);
-}
-function isStockField(key, field) {
-    const hay = `${key} ${field?.label ?? ""}`;
-    return /(stock|inventory|qty|quantity)/i.test(hay);
-}
-function spanFor(key, field, variant) {
-    if (field.type === "boolean")
-        return "full";
-    if (field.type === "richtext")
-        return "full";
-    if (variant === "record" && isImageField(key, field))
-        return "full";
-    return undefined;
-}
-function inferConfigGroup(key, field) {
-    if (field.group?.trim())
-        return field.group.trim();
-    const source = field.label?.trim() || humanizeKey(key);
-    const words = source.split(/\s+/).filter(Boolean);
-    if (words.length >= 2)
-        return words[0];
-    return "General";
-}
-function inferRecordGroup(key, field) {
-    if (field.group?.trim())
-        return field.group.trim();
-    const k = key.toLowerCase();
-    const label = (field.label ?? "").toLowerCase();
-    const hay = `${k} ${label}`;
-    if (/(image|img|photo|avatar|thumbnail|thumb|cover|media_url)/i.test(hay)) {
-        return "Media";
-    }
-    if (/(price|cost|cents|amount|msrp)/i.test(hay)) {
-        return "Pricing";
-    }
-    if (/(stock|inventory|qty|quantity)/i.test(hay)) {
-        return "Inventory";
-    }
-    if (field.type === "boolean" ||
-        /(^|_)(active|enabled|published|status|visible)(_|$)/i.test(k) ||
-        /^(active|enabled|published|status|visible)$/i.test(label)) {
-        return "Status";
-    }
-    if (field.type === "richtext" ||
-        /(description|body|content|summary|bio)/i.test(hay)) {
-        return "Content";
-    }
-    return "Details";
-}
-function displayLabel(key, field, group) {
-    const label = field.label?.trim() || humanizeKey(key);
-    const stripped = label.replace(new RegExp(`^${escapeRegExp(group)}\\s+`, "i"), "");
-    if (/^inventory$/i.test(group)) {
-        const stock = label.replace(/^stock\s+/i, "").trim();
-        if (stock && stock !== label)
-            return stock;
-    }
-    if (/^pricing$/i.test(group) && /cents/i.test(label)) {
-        return label.replace(/\s*\(cents\)/i, "").trim() || label;
-    }
-    return stripped || label;
-}
-function sortGroups(groups, variant) {
-    if (variant !== "record")
-        return groups;
-    const rank = (id) => {
-        const index = RECORD_GROUP_ORDER.indexOf(id);
-        return index === -1 ? RECORD_GROUP_ORDER.length + 1 : index;
-    };
-    return [...groups].sort((a, b) => rank(a.id) - rank(b.id));
-}
-function groupFields(schema, variant) {
-    const order = [];
-    const map = new Map();
-    const explicit = new Set();
-    for (const entry of Object.entries(schema)) {
-        const [key, field] = entry;
-        const group = variant === "record"
-            ? inferRecordGroup(key, field)
-            : inferConfigGroup(key, field);
-        if (field.group?.trim())
-            explicit.add(group);
-        if (!map.has(group)) {
-            map.set(group, []);
-            order.push(group);
-        }
-        map.get(group).push(entry);
-    }
-    if (variant === "config") {
-        for (const [group, fields] of [...map.entries()]) {
-            if (fields.length > 1 || explicit.has(group) || group === "General") {
-                continue;
-            }
-            if (!map.has("General")) {
-                map.set("General", []);
-                order.unshift("General");
-            }
-            map.get("General").push(...fields);
-            map.delete(group);
-            const idx = order.indexOf(group);
-            if (idx >= 0)
-                order.splice(idx, 1);
-        }
-    }
-    const groups = order
-        .filter((id) => map.has(id))
-        .map((id) => ({
-        id,
-        label: id,
-        fields: map.get(id),
-    }));
-    return sortGroups(groups, variant);
-}
-function findPrimaryImageKey(schema, values) {
-    for (const [key, field] of Object.entries(schema)) {
-        if (!isImageField(key, field))
-            continue;
-        const value = values?.[key];
-        if (typeof value === "string" && looksLikeUrl(value))
-            return key;
-    }
-    for (const [key, field] of Object.entries(schema)) {
-        if (isImageField(key, field))
-            return key;
-    }
-    return null;
-}
-export function ConfigForm({ schema, value, onSave, variant = "config", uploads, onUpload, }) {
-    const zodSchema = useMemo(() => buildZodSchema(schema), [schema]);
-    const groups = useMemo(() => groupFields(schema, variant), [schema, variant]);
-    const [status, setStatus] = useState(null);
-    const [tone, setTone] = useState();
-    const form = useForm({
-        resolver: zodResolver(zodSchema),
-        defaultValues: value,
-    });
-    const watched = useWatch({ control: form.control });
-    useEffect(() => {
-        form.reset(value);
-    }, [value, form]);
-    const onSubmit = form.handleSubmit(async (data) => {
-        setStatus("Saving…");
-        setTone(undefined);
-        try {
-            await onSave(data);
-            setStatus("Saved");
-            setTone("ok");
-        }
-        catch (error) {
-            setStatus(error instanceof Error ? error.message : "Save failed");
-            setTone("danger");
-        }
-    });
-    const isDirty = form.formState.isDirty;
-    useEffect(() => {
-        const onKeyDown = (event) => {
-            if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "s") {
-                event.preventDefault();
-                void onSubmit();
-            }
-        };
-        window.addEventListener("keydown", onKeyDown);
-        return () => window.removeEventListener("keydown", onKeyDown);
-    }, [onSubmit]);
-    const renderField = (key, field, groupLabel, options) => {
-        const label = displayLabel(key, field, groupLabel);
-        const showInlinePreview = !options?.hideImagePreview &&
-            isImageField(key, field) &&
-            typeof watched?.[key] === "string" &&
-            looksLikeUrl(String(watched[key]));
-        if (field.type === "boolean") {
-            return (_jsxs("div", { className: "vertebr-switch-row", children: [_jsx(Label.Root, { htmlFor: key, children: label }), _jsx(Controller, { control: form.control, name: key, render: ({ field: controllerField }) => (_jsx(Switch.Root, { className: "vertebr-switch", id: key, checked: Boolean(controllerField.value), onCheckedChange: controllerField.onChange, children: _jsx(Switch.Thumb, { className: "vertebr-switch-thumb" }) })) })] }, key));
-        }
-        return (_jsxs("div", { className: "vertebr-field", "data-span": spanFor(key, field, variant), "data-kind": isImageField(key, field) ? "image" : undefined, children: [_jsx(Label.Root, { htmlFor: key, children: label }), showInlinePreview ? (_jsxs("div", { className: "vertebr-field-media", children: [_jsx("img", { src: String(watched[key]), alt: "" }), _jsx("input", { id: key, type: "text", readOnly: field.readOnly, ...form.register(key) })] })) : field.type === "richtext" ? (_jsx("textarea", { id: key, rows: 3, readOnly: field.readOnly, ...form.register(key) })) : field.type === "number" ? (_jsx(Controller, { control: form.control, name: key, render: ({ field: controllerField }) => (_jsx("input", { id: key, type: "number", readOnly: field.readOnly, value: typeof controllerField.value === "number" &&
-                            Number.isFinite(controllerField.value)
-                            ? controllerField.value
-                            : "", onBlur: controllerField.onBlur, onChange: (event) => {
-                            const next = event.target.value;
-                            controllerField.onChange(next === "" ? undefined : Number(next));
-                        }, name: controllerField.name, ref: controllerField.ref })) })) : (_jsx("input", { id: key, type: "text", readOnly: field.readOnly, ...form.register(key) })), !options?.hideUpload &&
-                    uploads?.[key] &&
-                    onUpload &&
-                    !field.readOnly ? (_jsx(ImageUploadControl, { meta: uploads[key], onUpload: async (files) => {
-                        const [first] = await onUpload(key, files);
-                        if (first?.url) {
-                            form.setValue(key, first.url, {
-                                shouldDirty: true,
-                                shouldTouch: true,
-                            });
-                        }
-                    } })) : null] }, key));
-    };
-    const renderActions = () => (_jsxs("div", { className: "vertebr-actions", children: [_jsx("button", { className: "vertebr-btn vertebr-btn-primary", type: "submit", disabled: form.formState.isSubmitting || !isDirty, children: form.formState.isSubmitting ? "Saving…" : "Save changes" }), isDirty ? (_jsx("button", { className: "vertebr-btn", type: "button", onClick: () => {
-                    form.reset(value);
-                    setStatus(null);
-                    setTone(undefined);
-                }, children: "Discard" })) : null, isDirty ? (_jsx("span", { className: "vertebr-dirty", children: "Unsaved" })) : status ? (_jsx("span", { className: "vertebr-status", "data-tone": tone, children: status })) : null, _jsx("span", { className: "vertebr-actions-spacer" }), _jsx("span", { className: "vertebr-kbd", children: "\u2318S" })] }));
-    if (variant === "record") {
-        const imageKey = findPrimaryImageKey(schema, watched);
-        const imageValue = imageKey && typeof watched?.[imageKey] === "string"
-            ? String(watched[imageKey])
-            : "";
-        const asideGroups = groups.filter((g) => /^(Media|Status)$/i.test(g.id));
-        const mainGroups = groups.filter((g) => !/^(Media|Status)$/i.test(g.id));
-        return (_jsxs("form", { className: "vertebr-form", "data-variant": "record", onSubmit: onSubmit, children: [_jsx("div", { className: "vertebr-form-scroll", children: _jsxs("div", { className: "vertebr-record-layout", children: [_jsxs("aside", { className: "vertebr-record-aside", children: [_jsx("div", { className: "vertebr-record-preview", children: imageValue && looksLikeUrl(imageValue) ? (_jsx("img", { src: imageValue, alt: "" })) : (_jsx("div", { className: "vertebr-record-preview-empty", children: "No image" })) }), imageKey && uploads?.[imageKey] && onUpload ? (_jsx(ImageUploadControl, { meta: uploads[imageKey], label: "Drop a new image or browse", onUpload: async (files) => {
-                                            const [first] = await onUpload(imageKey, files);
-                                            if (first?.url) {
-                                                form.setValue(imageKey, first.url, {
-                                                    shouldDirty: true,
-                                                    shouldTouch: true,
-                                                });
-                                            }
-                                        } })) : null, asideGroups.map((group) => (_jsxs("div", { className: "vertebr-record-block", "data-layout": /^inventory$/i.test(group.id) ? "chips" : undefined, children: [_jsx("div", { className: "vertebr-record-block-label", children: group.label }), _jsx("div", { className: "vertebr-form-fields", "data-layout": isStockField(group.fields[0]?.[0] ?? "", group.fields[0]?.[1])
-                                                    ? "chips"
-                                                    : undefined, children: group.fields.map(([key, field]) => renderField(key, field, group.label, {
-                                                    hideImagePreview: true,
-                                                    hideUpload: key === imageKey,
-                                                })) })] }, group.id)))] }), _jsx("div", { className: "vertebr-record-main", children: mainGroups.map((group) => {
-                                    const inventory = /^inventory$/i.test(group.id);
-                                    return (_jsxs("div", { className: "vertebr-record-block", "data-layout": inventory ? "chips" : undefined, children: [_jsx("div", { className: "vertebr-record-block-label", children: group.label }), _jsx("div", { className: "vertebr-form-fields", "data-layout": inventory ? "chips" : undefined, children: group.fields.map(([key, field]) => renderField(key, field, group.label)) })] }, group.id));
-                                }) })] }) }), renderActions()] }));
-    }
-    const singleGroup = groups.length === 1;
-    return (_jsxs("form", { className: "vertebr-form", "data-variant": "config", onSubmit: onSubmit, children: [_jsx("div", { className: "vertebr-form-scroll", children: groups.map((group) => (_jsxs("div", { className: "vertebr-form-section", "data-plain": singleGroup ? "true" : undefined, children: [!singleGroup ? (_jsxs("div", { className: "vertebr-form-section-head", children: [_jsx("h3", { children: group.label }), _jsx("span", { className: "vertebr-form-section-count", children: group.fields.length })] })) : null, _jsx("div", { className: "vertebr-form-fields", children: group.fields.map(([key, field]) => renderField(key, field, group.label)) })] }, group.id))) }), renderActions()] }));
-}
+export { ConfigForm } from "./form/ConfigForm";

package/dist/components/config/DescriptionInput.d.ts

@@ -0,0 +1,18 @@
+import type { GalleryItem, ResourceUploadMeta } from "@vertebr/client";
+import type { RecordImage } from "../../lib/images";
+export type DescriptionInputProps = {
+    id: string;
+    name?: string;
+    value: unknown;
+    readOnly?: boolean;
+    placeholder?: string;
+    recordImages?: RecordImage[];
+    galleryUpload?: Pick<ResourceUploadMeta, "accept" | "maxBytes">;
+    onListGallery?: () => Promise<GalleryItem[]>;
+    onUploadGallery?: (files: File[]) => Promise<GalleryItem[]>;
+    onBlur?: () => void;
+    onChange: (next: string) => void;
+    inputRef?: React.Ref<HTMLElement>;
+};
+export declare function DescriptionInput({ id, name, value, readOnly, placeholder, recordImages, galleryUpload, onListGallery, onUploadGallery, onBlur, onChange, inputRef, }: DescriptionInputProps): import("react").JSX.Element;
+//# sourceMappingURL=DescriptionInput.d.ts.map

package/dist/components/config/DescriptionInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DescriptionInput.d.ts","sourceRoot":"","sources":["../../../src/components/config/DescriptionInput.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,WAAW,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAEvE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAGpD,MAAM,MAAM,qBAAqB,GAAG;IAClC,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,WAAW,EAAE,CAAC;IAC7B,aAAa,CAAC,EAAE,IAAI,CAAC,kBAAkB,EAAE,QAAQ,GAAG,UAAU,CAAC,CAAC;IAChE,aAAa,CAAC,EAAE,MAAM,OAAO,CAAC,WAAW,EAAE,CAAC,CAAC;IAC7C,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,OAAO,CAAC,WAAW,EAAE,CAAC,CAAC;IAC5D,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,QAAQ,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;CACnC,CAAC;AAoCF,wBAAgB,gBAAgB,CAAC,EAC/B,EAAE,EACF,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,WAAoC,EACpC,YAAY,EACZ,aAAa,EACb,aAAa,EACb,eAAe,EACf,MAAM,EACN,QAAQ,EACR,QAAQ,GACT,EAAE,qBAAqB,+BA6RvB"}

package/dist/components/config/DescriptionInput.js

@@ -0,0 +1,152 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { EditorContent, useEditor, useEditorState } from "@tiptap/react";
+import StarterKit from "@tiptap/starter-kit";
+import { Markdown } from "@tiptap/markdown";
+import { Placeholder } from "@tiptap/extensions";
+import Image from "@tiptap/extension-image";
+import { TableKit } from "@tiptap/extension-table";
+import { descriptionStats } from "../../lib/description";
+import { ImagePickerModal } from "./ImagePickerModal";
+function assignRef(ref, node) {
+    if (!ref)
+        return;
+    if (typeof ref === "function")
+        ref(node);
+    else
+        ref.current = node;
+}
+function ToolbarButton({ active, disabled, title, onClick, children, }) {
+    return (_jsx("button", { type: "button", className: "vertebr-md-btn", "data-active": active || undefined, disabled: disabled, title: title, onMouseDown: (event) => event.preventDefault(), onClick: onClick, children: children }));
+}
+export function DescriptionInput({ id, name, value, readOnly, placeholder = "Write a description…", recordImages, galleryUpload, onListGallery, onUploadGallery, onBlur, onChange, inputRef, }) {
+    const text = typeof value === "string" ? value : "";
+    const onChangeRef = useRef(onChange);
+    const onBlurRef = useRef(onBlur);
+    const lastEmitted = useRef(text);
+    const [pickerOpen, setPickerOpen] = useState(false);
+    onChangeRef.current = onChange;
+    onBlurRef.current = onBlur;
+    const editor = useEditor({
+        immediatelyRender: false,
+        shouldRerenderOnTransaction: false,
+        content: text,
+        contentType: "markdown",
+        editable: !readOnly,
+        extensions: [
+            StarterKit.configure({
+                heading: { levels: [2, 3] },
+                underline: false,
+                link: {
+                    openOnClick: false,
+                    defaultProtocol: "https",
+                },
+            }),
+            Image.configure({ inline: false, allowBase64: false }),
+            TableKit.configure({
+                table: { resizable: false },
+            }),
+            Placeholder.configure({ placeholder }),
+            Markdown.configure({
+                markedOptions: { gfm: true },
+            }),
+        ],
+        editorProps: {
+            attributes: {
+                id,
+                class: "vertebr-md-content",
+            },
+        },
+        onUpdate: ({ editor: next }) => {
+            const markdown = next.getMarkdown();
+            lastEmitted.current = markdown;
+            onChangeRef.current(markdown);
+        },
+        onBlur: () => {
+            onBlurRef.current?.();
+        },
+    });
+    useEffect(() => {
+        if (!editor)
+            return;
+        assignRef(inputRef, editor.view.dom);
+        return () => assignRef(inputRef, null);
+    }, [editor, inputRef]);
+    useEffect(() => {
+        if (!editor)
+            return;
+        editor.setEditable(!readOnly);
+    }, [editor, readOnly]);
+    useEffect(() => {
+        if (!editor)
+            return;
+        if (text === lastEmitted.current)
+            return;
+        if (text === editor.getMarkdown()) {
+            lastEmitted.current = text;
+            return;
+        }
+        editor.commands.setContent(text, {
+            contentType: "markdown",
+            emitUpdate: false,
+        });
+        lastEmitted.current = text;
+    }, [editor, text]);
+    const marks = useEditorState({
+        editor,
+        selector: ({ editor: next }) => ({
+            bold: next?.isActive("bold") ?? false,
+            italic: next?.isActive("italic") ?? false,
+            strike: next?.isActive("strike") ?? false,
+            code: next?.isActive("code") ?? false,
+            codeBlock: next?.isActive("codeBlock") ?? false,
+            heading: next?.isActive("heading") ?? false,
+            quote: next?.isActive("blockquote") ?? false,
+            bullet: next?.isActive("bulletList") ?? false,
+            ordered: next?.isActive("orderedList") ?? false,
+            table: next?.isActive("table") ?? false,
+            link: next?.isActive("link") ?? false,
+            stats: descriptionStats(next?.getText() ?? text),
+        }),
+    });
+    const stats = marks?.stats ?? descriptionStats(text);
+    const locked = readOnly || !editor;
+    const setLink = () => {
+        if (!editor || readOnly)
+            return;
+        const previous = editor.getAttributes("link").href;
+        const href = window.prompt("Link URL", typeof previous === "string" && previous ? previous : "https://");
+        if (href === null)
+            return;
+        if (!href.trim()) {
+            editor.chain().focus().extendMarkRange("link").unsetLink().run();
+            return;
+        }
+        editor.chain().focus().extendMarkRange("link").setLink({ href: href.trim() }).run();
+    };
+    const insertImages = (images) => {
+        if (!editor || images.length === 0)
+            return;
+        editor
+            .chain()
+            .focus()
+            .insertContent(images.map((image) => ({
+            type: "image",
+            attrs: { src: image.url, alt: image.name },
+        })))
+            .run();
+        setPickerOpen(false);
+    };
+    return (_jsxs("div", { className: "vertebr-field-prose", onKeyDown: (event) => {
+            if (!(event.metaKey || event.ctrlKey))
+                return;
+            if (event.key.toLowerCase() !== "k")
+                return;
+            event.preventDefault();
+            setLink();
+        }, children: [name ? _jsx("input", { type: "hidden", name: name, value: text, readOnly: true }) : null, _jsxs("div", { className: "vertebr-md-toolbar", role: "toolbar", "aria-label": "Format", children: [_jsx(ToolbarButton, { active: marks?.bold, disabled: locked, title: "Bold", onClick: () => editor?.chain().focus().toggleBold().run(), children: _jsx("span", { className: "vertebr-md-glyph", children: "B" }) }), _jsx(ToolbarButton, { active: marks?.italic, disabled: locked, title: "Italic", onClick: () => editor?.chain().focus().toggleItalic().run(), children: _jsx("span", { className: "vertebr-md-glyph vertebr-md-italic", children: "I" }) }), _jsx(ToolbarButton, { active: marks?.strike, disabled: locked, title: "Strikethrough", onClick: () => editor?.chain().focus().toggleStrike().run(), children: _jsx("span", { className: "vertebr-md-glyph vertebr-md-strike", children: "S" }) }), _jsx(ToolbarButton, { active: marks?.code, disabled: locked, title: "Inline code", onClick: () => editor?.chain().focus().toggleCode().run(), children: "</>" }), _jsx(ToolbarButton, { active: marks?.codeBlock, disabled: locked, title: "Code block", onClick: () => editor?.chain().focus().toggleCodeBlock().run(), children: "{ }" }), _jsx("span", { className: "vertebr-md-sep", "aria-hidden": "true" }), _jsx(ToolbarButton, { active: marks?.heading, disabled: locked, title: "Heading", onClick: () => editor?.chain().focus().toggleHeading({ level: 2 }).run(), children: "H" }), _jsx(ToolbarButton, { active: marks?.quote, disabled: locked, title: "Quote", onClick: () => editor?.chain().focus().toggleBlockquote().run(), children: "\u201C" }), _jsx(ToolbarButton, { active: marks?.bullet, disabled: locked, title: "Bulleted list", onClick: () => editor?.chain().focus().toggleBulletList().run(), children: "\u2022" }), _jsx(ToolbarButton, { active: marks?.ordered, disabled: locked, title: "Numbered list", onClick: () => editor?.chain().focus().toggleOrderedList().run(), children: "1." }), _jsx("span", { className: "vertebr-md-sep", "aria-hidden": "true" }), _jsx(ToolbarButton, { active: marks?.table, disabled: locked, title: "Table", onClick: () => editor?.chain().focus().insertTable({
+                            rows: 3,
+                            cols: 3,
+                            withHeaderRow: true,
+                        }).run(), children: "Table" }), marks?.table ? (_jsxs(_Fragment, { children: [_jsx(ToolbarButton, { disabled: locked, title: "Add column", onClick: () => editor?.chain().focus().addColumnAfter().run(), children: "+Col" }), _jsx(ToolbarButton, { disabled: locked, title: "Add row", onClick: () => editor?.chain().focus().addRowAfter().run(), children: "+Row" }), _jsx(ToolbarButton, { disabled: locked, title: "Delete table", onClick: () => editor?.chain().focus().deleteTable().run(), children: "Del" })] })) : null, _jsx(ToolbarButton, { active: marks?.link, disabled: locked, title: "Link", onClick: setLink, children: "Link" }), _jsx(ToolbarButton, { disabled: locked, title: "Insert images", onClick: () => setPickerOpen(true), children: "Image" })] }), _jsx(EditorContent, { editor: editor }), _jsxs("p", { className: "vertebr-field-prose-meta", children: ["Markdown", _jsx("span", { "aria-hidden": "true", children: " \u00B7 " }), stats.words, " ", stats.words === 1 ? "word" : "words", _jsx("span", { "aria-hidden": "true", children: " \u00B7 " }), stats.characters, " ", stats.characters === 1 ? "character" : "characters"] }), pickerOpen ? (_jsx(ImagePickerModal, { recordImages: recordImages, galleryUpload: galleryUpload, onListGallery: onListGallery, onUploadGallery: onUploadGallery, onClose: () => setPickerOpen(false), onInsert: insertImages })) : null] }));
+}

package/dist/components/config/ImagePickerModal.d.ts

@@ -0,0 +1,18 @@
+import type { GalleryItem, ResourceUploadMeta } from "@vertebr/client";
+import type { RecordImage } from "../../lib/images";
+export type PickerImage = {
+    id: string;
+    url: string;
+    name: string;
+    source: "record" | "gallery" | "url";
+};
+export type ImagePickerModalProps = {
+    recordImages?: RecordImage[];
+    galleryUpload?: Pick<ResourceUploadMeta, "accept" | "maxBytes">;
+    onListGallery?: () => Promise<GalleryItem[]>;
+    onUploadGallery?: (files: File[]) => Promise<GalleryItem[]>;
+    onClose: () => void;
+    onInsert: (images: PickerImage[]) => void;
+};
+export declare function ImagePickerModal({ recordImages, galleryUpload, onListGallery, onUploadGallery, onClose, onInsert, }: ImagePickerModalProps): import("react").JSX.Element;
+//# sourceMappingURL=ImagePickerModal.d.ts.map

package/dist/components/config/ImagePickerModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImagePickerModal.d.ts","sourceRoot":"","sources":["../../../src/components/config/ImagePickerModal.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAEvE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAEpD,MAAM,MAAM,WAAW,GAAG;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,QAAQ,GAAG,SAAS,GAAG,KAAK,CAAC;CACtC,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC,YAAY,CAAC,EAAE,WAAW,EAAE,CAAC;IAC7B,aAAa,CAAC,EAAE,IAAI,CAAC,kBAAkB,EAAE,QAAQ,GAAG,UAAU,CAAC,CAAC;IAChE,aAAa,CAAC,EAAE,MAAM,OAAO,CAAC,WAAW,EAAE,CAAC,CAAC;IAC7C,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,OAAO,CAAC,WAAW,EAAE,CAAC,CAAC;IAC5D,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,CAAC,MAAM,EAAE,WAAW,EAAE,KAAK,IAAI,CAAC;CAC3C,CAAC;AAIF,wBAAgB,gBAAgB,CAAC,EAC/B,YAAiB,EACjB,aAAa,EACb,aAAa,EACb,eAAe,EACf,OAAO,EACP,QAAQ,GACT,EAAE,qBAAqB,+BA4PvB"}