@vertebr/react 0.1.1 → 0.3.0

package/dist/{VertebrAdmin.d.ts → components/admin/VertebrAdmin.d.ts}

@@ -6,6 +6,8 @@ export type VertebrAdminProps = {
     envStorageKey?: string;
     /** localStorage key for the access token */
     tokenStorageKey?: string;
+    /** localStorage key for light/dark theme preference */
+    themeStorageKey?: string;
     /** Optional host-provided token getter (Firebase ID token, etc.) */
     getAccessToken?: () => string | null | undefined | Promise<string | null | undefined>;
     /** Signed-in identity shown in the dashboard. */
@@ -13,5 +15,5 @@ export type VertebrAdminProps = {
     /** Host-provided sign-out action. */
     onSignOut?: () => void | Promise<void>;
 };
-export declare function VertebrAdmin({ apiBase, title, envStorageKey, tokenStorageKey, getAccessToken, authUserLabel, onSignOut, }: VertebrAdminProps): import("react").JSX.Element;
+export declare function VertebrAdmin({ apiBase, title, envStorageKey, tokenStorageKey, themeStorageKey, getAccessToken, authUserLabel, onSignOut, }: VertebrAdminProps): import("react").JSX.Element;
 //# sourceMappingURL=VertebrAdmin.d.ts.map

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

@@ -0,0 +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,+BA+mBnB"}

package/dist/components/admin/VertebrAdmin.js

@@ -0,0 +1,375 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { createVertebrClient, } from "@vertebr/client";
+import { ConfigForm } from "../config/ConfigForm";
+import { EnvSelect } from "../env/EnvSelect";
+import { GalleryBoard } from "../gallery/GalleryBoard";
+import { MetricsBoard } from "../metrics/MetricsBoard";
+import { ResourcePanel } from "../resources/ResourceTable";
+import { ThemeToggle } from "../theme/ThemeToggle";
+import { useVertebrTheme } from "../../hooks/useVertebrTheme";
+function readStored(key) {
+    try {
+        return localStorage.getItem(key);
+    }
+    catch {
+        return null;
+    }
+}
+function writeStored(key, value) {
+    try {
+        localStorage.setItem(key, value);
+    }
+    catch {
+        // ignore
+    }
+}
+function clearStored(key) {
+    try {
+        localStorage.removeItem(key);
+    }
+    catch {
+        // ignore
+    }
+}
+export function VertebrAdmin({ apiBase = "/admin/api", title = "Control plane", envStorageKey = "vertebr:env", tokenStorageKey = "vertebr:token", themeStorageKey = "vertebr:theme", getAccessToken, authUserLabel, onSignOut, }) {
+    const { theme, setTheme } = useVertebrTheme(themeStorageKey);
+    const [environment, setEnvironment] = useState(() => readStored(envStorageKey) ?? "");
+    const [token, setToken] = useState(() => readStored(tokenStorageKey) ?? "");
+    const [tokenDraft, setTokenDraft] = useState(token);
+    const getEnvironment = useCallback(() => environment, [environment]);
+    const client = useMemo(() => createVertebrClient({
+        apiBase,
+        getEnvironment,
+        getAccessToken: getAccessToken ?? (() => token || null),
+    }), [apiBase, getEnvironment, getAccessToken, token]);
+    const [bootstrap, setBootstrap] = useState(null);
+    const [catalog, setCatalog] = useState(null);
+    const [selection, setSelection] = useState({ kind: "overview" });
+    const [resourceData, setResourceData] = useState(null);
+    const [configData, setConfigData] = useState(null);
+    const [metricsData, setMetricsData] = useState(null);
+    const [metricsLoading, setMetricsLoading] = useState(false);
+    const [galleryData, setGalleryData] = useState(null);
+    const [galleryLoading, setGalleryLoading] = useState(false);
+    const [error, setError] = useState(null);
+    const [loading, setLoading] = useState(true);
+    useEffect(() => {
+        let cancelled = false;
+        (async () => {
+            try {
+                const next = await client.getBootstrap();
+                if (cancelled)
+                    return;
+                setBootstrap(next);
+                const known = next.environments.map((env) => env.id);
+                const preferred = (environment && known.includes(environment) && environment) ||
+                    next.defaultEnvironment;
+                if (preferred !== environment) {
+                    setEnvironment(preferred);
+                    writeStored(envStorageKey, preferred);
+                }
+            }
+            catch (err) {
+                if (!cancelled) {
+                    setError(err instanceof Error ? err.message : "Failed to load bootstrap");
+                }
+            }
+        })();
+        return () => {
+            cancelled = true;
+        };
+    }, [client, environment, envStorageKey]);
+    useEffect(() => {
+        if (!bootstrap || !environment)
+            return;
+        let cancelled = false;
+        (async () => {
+            try {
+                setLoading(true);
+                setError(null);
+                const next = await client.getCatalog();
+                if (cancelled)
+                    return;
+                setCatalog(next);
+                setSelection((current) => {
+                    if (current?.kind === "overview")
+                        return current;
+                    if (current?.kind === "gallery" && next.gallery)
+                        return current;
+                    if (current?.kind === "resource") {
+                        if (next.resources.some((r) => r.id === current.id))
+                            return current;
+                    }
+                    if (current?.kind === "config") {
+                        if (next.configs.some((c) => c.id === current.id))
+                            return current;
+                    }
+                    if (next.metrics)
+                        return { kind: "overview" };
+                    const firstResource = next.resources[0];
+                    if (firstResource)
+                        return { kind: "resource", id: firstResource.id };
+                    if (next.gallery)
+                        return { kind: "gallery" };
+                    const firstConfig = next.configs[0];
+                    if (firstConfig)
+                        return { kind: "config", id: firstConfig.id };
+                    return { kind: "overview" };
+                });
+            }
+            catch (err) {
+                if (!cancelled) {
+                    setCatalog(null);
+                    setError(err instanceof Error ? err.message : "Failed to load catalog");
+                }
+            }
+            finally {
+                if (!cancelled)
+                    setLoading(false);
+            }
+        })();
+        return () => {
+            cancelled = true;
+        };
+    }, [client, bootstrap, environment]);
+    useEffect(() => {
+        if (!selection || !catalog)
+            return;
+        let cancelled = false;
+        (async () => {
+            try {
+                setError(null);
+                if (selection.kind === "overview") {
+                    setMetricsLoading(true);
+                    const data = await client.getMetrics();
+                    if (!cancelled) {
+                        setMetricsData(data);
+                        setResourceData(null);
+                        setConfigData(null);
+                        setGalleryData(null);
+                    }
+                }
+                else if (selection.kind === "gallery") {
+                    setGalleryLoading(true);
+                    const data = await client.getGallery();
+                    if (!cancelled) {
+                        setGalleryData(data);
+                        setResourceData(null);
+                        setConfigData(null);
+                        setMetricsData(null);
+                    }
+                }
+                else if (selection.kind === "resource") {
+                    const data = await client.listResource(selection.id);
+                    if (!cancelled) {
+                        setResourceData(data);
+                        setConfigData(null);
+                        setMetricsData(null);
+                        setGalleryData(null);
+                    }
+                }
+                else {
+                    const data = await client.getConfig(selection.id);
+                    if (!cancelled) {
+                        setConfigData(data);
+                        setResourceData(null);
+                        setMetricsData(null);
+                        setGalleryData(null);
+                    }
+                }
+            }
+            catch (err) {
+                if (!cancelled) {
+                    setError(err instanceof Error ? err.message : "Failed to load panel");
+                }
+            }
+            finally {
+                if (!cancelled) {
+                    setMetricsLoading(false);
+                    setGalleryLoading(false);
+                }
+            }
+        })();
+        return () => {
+            cancelled = true;
+        };
+    }, [client, selection, catalog, environment]);
+    const refreshResource = useCallback(async () => {
+        if (selection?.kind !== "resource")
+            return;
+        const data = await client.listResource(selection.id);
+        setResourceData(data);
+    }, [client, selection]);
+    const refreshMetrics = useCallback(async () => {
+        setMetricsLoading(true);
+        try {
+            const data = await client.getMetrics();
+            setMetricsData(data);
+        }
+        finally {
+            setMetricsLoading(false);
+        }
+    }, [client]);
+    const refreshGallery = useCallback(async () => {
+        setGalleryLoading(true);
+        try {
+            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);
+    const activeConfig = selection?.kind === "config"
+        ? catalog?.configs.find((c) => c.id === selection.id)
+        : undefined;
+    const isPageSelection = activeConfig?.section === "page";
+    const switchEnvironment = (nextEnv) => {
+        if (nextEnv === environment)
+            return;
+        const meta = envList.find((env) => env.id === nextEnv);
+        if (meta?.tone === "danger") {
+            const ok = window.confirm(`Switch to ${meta.label}? Writes will affect this environment.`);
+            if (!ok)
+                return;
+        }
+        writeStored(envStorageKey, nextEnv);
+        setEnvironment(nextEnv);
+        setResourceData(null);
+        setConfigData(null);
+        setGalleryData(null);
+    };
+    const saveToken = () => {
+        const next = tokenDraft.trim();
+        setToken(next);
+        if (next)
+            writeStored(tokenStorageKey, next);
+        else
+            clearStored(tokenStorageKey);
+    };
+    const clearToken = () => {
+        setToken("");
+        setTokenDraft("");
+        clearStored(tokenStorageKey);
+    };
+    if (!bootstrap && loading) {
+        return _jsx("div", { className: "vertebr-loading", children: "Loading Vertebr\u2026" });
+    }
+    if (error && !bootstrap) {
+        return _jsx("div", { className: "vertebr-error", children: error });
+    }
+    const activeLabel = selection?.kind === "overview"
+        ? (catalog?.metrics?.label ?? "Overview")
+        : selection?.kind === "gallery"
+            ? (catalog?.gallery?.label ?? "Gallery")
+            : selection?.kind === "resource"
+                ? catalog?.resources.find((r) => r.id === selection.id)?.label
+                : selection?.kind === "config"
+                    ? catalog?.configs.find((c) => c.id === selection.id)?.label
+                    : null;
+    return (_jsxs("div", { className: "vertebr-root", "data-env": environment, children: [_jsxs("aside", { className: "vertebr-sidebar", children: [_jsxs("div", { className: "vertebr-sidebar-top", children: [_jsxs("div", { className: "vertebr-brand", children: [_jsx("strong", { children: bootstrap?.brand ?? catalog?.brand ?? "Vertebr" }), _jsx("span", { children: title })] }), envList.length > 0 ? (_jsxs("div", { className: "vertebr-env", children: [_jsx("div", { className: "vertebr-nav-label", children: "Environment" }), _jsx(EnvSelect, { environments: envList, value: environment, onChange: switchEnvironment })] })) : null, _jsxs("nav", { className: "vertebr-nav", children: [catalog?.metrics ? (_jsxs("div", { className: "vertebr-nav-group", children: [_jsx("div", { className: "vertebr-nav-label", children: "Analytics" }), _jsx("button", { type: "button", "data-active": selection?.kind === "overview", onClick: () => setSelection({ kind: "overview" }), children: catalog.metrics.label })] })) : null, catalog &&
+                                        (catalog.resources.length > 0 || catalog.gallery) ? (_jsxs("div", { className: "vertebr-nav-group", children: [_jsx("div", { className: "vertebr-nav-label", children: "Resources" }), catalog.resources.map((resource) => (_jsx("button", { type: "button", "data-active": selection?.kind === "resource" &&
+                                                    selection.id === resource.id, onClick: () => setSelection({ kind: "resource", id: resource.id }), children: resource.label }, resource.id))), catalog.gallery ? (_jsx("button", { type: "button", "data-active": selection?.kind === "gallery", onClick: () => setSelection({ kind: "gallery" }), children: catalog.gallery.label })) : null] })) : null, catalog &&
+                                        catalog.configs.some((c) => (c.section ?? "config") !== "page") ? (_jsxs("div", { className: "vertebr-nav-group", children: [_jsx("div", { className: "vertebr-nav-label", children: "Config" }), catalog.configs
+                                                .filter((c) => (c.section ?? "config") !== "page")
+                                                .map((config) => (_jsx("button", { type: "button", "data-active": selection?.kind === "config" &&
+                                                    selection.id === config.id, onClick: () => setSelection({ kind: "config", id: config.id }), children: config.label }, config.id)))] })) : null, catalog &&
+                                        catalog.configs.some((c) => c.section === "page") ? (_jsxs("div", { className: "vertebr-nav-group", children: [_jsx("div", { className: "vertebr-nav-label", children: "Pages" }), catalog.configs
+                                                .filter((c) => c.section === "page")
+                                                .map((config) => (_jsx("button", { type: "button", "data-active": selection?.kind === "config" &&
+                                                    selection.id === config.id, onClick: () => setSelection({ kind: "config", id: config.id }), children: config.label }, config.id)))] })) : null] })] }), _jsxs("div", { className: "vertebr-sidebar-bottom", children: [getAccessToken && authUserLabel ? (_jsxs("div", { className: "vertebr-auth", children: [_jsx("div", { className: "vertebr-nav-label", children: "Signed in" }), _jsx("p", { className: "vertebr-auth-hint", children: authUserLabel }), onSignOut ? (_jsx("button", { type: "button", className: "vertebr-btn", onClick: () => void onSignOut(), children: "Sign out" })) : null] })) : null, !getAccessToken && (authRequired || token) ? (_jsxs("div", { className: "vertebr-auth", children: [_jsx("div", { className: "vertebr-nav-label", children: "Access" }), _jsx("p", { className: "vertebr-auth-hint", children: authRequired
+                                            ? `This environment requires auth${activeEnv?.auth?.claimKey
+                                                ? ` (${activeEnv.auth.claimKey})`
+                                                : ""}.`
+                                            : "Optional access token for protected environments." }), _jsx("input", { className: "vertebr-auth-input", type: "password", placeholder: "Bearer token", value: tokenDraft, onChange: (event) => setTokenDraft(event.target.value), autoComplete: "off" }), _jsxs("div", { className: "vertebr-auth-actions", children: [_jsx("button", { type: "button", className: "vertebr-btn vertebr-btn-primary", onClick: saveToken, children: "Use token" }), token ? (_jsx("button", { type: "button", className: "vertebr-btn", onClick: clearToken, children: "Clear" })) : null] })] })) : null, _jsx(ThemeToggle, { theme: theme, onChange: setTheme })] })] }), _jsxs("main", { className: "vertebr-main", children: [_jsxs("header", { className: "vertebr-header", children: [_jsxs("div", { children: [_jsxs("div", { className: "vertebr-heading-row", children: [_jsx("h1", { children: activeLabel ?? (catalog ? "Dashboard" : "Sign in") }), activeEnv ? (_jsx("span", { className: "vertebr-env-badge", "data-tone": activeEnv.tone ?? "neutral", children: activeEnv.label })) : null] }), _jsx("p", { children: !catalog && authRequired
+                                            ? "Provide an access token to load this environment."
+                                            : selection?.kind === "overview"
+                                                ? "Live metrics for the selected environment."
+                                                : selection?.kind === "gallery"
+                                                    ? "Browse and upload shared media assets."
+                                                    : selection?.kind === "resource"
+                                                        ? "Manage records scoped to the selected environment."
+                                                        : selection?.kind === "config"
+                                                            ? isPageSelection
+                                                                ? "Edit content for this page."
+                                                                : "Owner-managed config for this environment."
+                                                            : "Select a panel." })] }), error ? (_jsx("span", { className: "vertebr-status", "data-tone": "danger", children: error })) : null] }), _jsx("div", { className: "vertebr-content", children: catalog ? (_jsxs("section", { className: "vertebr-panel", children: [selection?.kind === "overview" ? (_jsx(MetricsBoard, { label: metricsData?.label ?? catalog.metrics?.label, metrics: metricsData?.metrics ?? [], loading: metricsLoading, onRefresh: () => void refreshMetrics() })) : null, selection?.kind === "gallery" && galleryData ? (_jsx(GalleryBoard, { label: galleryData.label, items: galleryData.items, accept: galleryData.accept, maxBytes: galleryData.maxBytes, canDelete: galleryData.canDelete, loading: galleryLoading, onRefresh: () => void refreshGallery(), onUpload: async (files) => {
+                                        if (files.length === 1 && files[0]) {
+                                            await client.uploadGalleryFile(files[0]);
+                                        }
+                                        else {
+                                            await client.uploadGalleryFiles(files);
+                                        }
+                                        await refreshGallery();
+                                    }, onDelete: galleryData.canDelete
+                                        ? async (id) => {
+                                            await client.deleteGalleryItem(id);
+                                            await refreshGallery();
+                                        }
+                                        : undefined })) : null, selection?.kind === "resource" && resourceData ? (_jsx(ResourcePanel, { schema: resourceData.schema, items: resourceData.items, permissions: resourceData.permissions, actions: resourceData.actions, uploads: resourceData.uploads, storageKey: resourceData.id, onUpdate: resourceData.permissions.update
+                                        ? async (rowId, value) => {
+                                            await client.updateResource(resourceData.id, rowId, value);
+                                            await refreshResource();
+                                        }
+                                        : undefined, onCreate: resourceData.permissions.create
+                                        ? async (value) => {
+                                            await client.createResource(resourceData.id, value);
+                                            await refreshResource();
+                                        }
+                                        : undefined, onDelete: resourceData.permissions.delete
+                                        ? async (rowId) => {
+                                            await client.deleteResource(resourceData.id, rowId);
+                                            await refreshResource();
+                                        }
+                                        : undefined, onAction: async (rowId, actionId) => {
+                                        await client.runResourceAction(resourceData.id, rowId, actionId);
+                                        await refreshResource();
+                                    }, onUpload: resourceData.uploads
+                                        ? async (field, files) => {
+                                            if (files.length === 1 && files[0]) {
+                                                const result = await client.uploadResourceFile(resourceData.id, field, files[0]);
+                                                return [
+                                                    { url: result.url, name: result.name },
+                                                ];
+                                            }
+                                            const result = await client.uploadResourceFiles(resourceData.id, field, files);
+                                            return result.files;
+                                        }
+                                        : 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,
+                                                });
+                                            }, ...galleryPicker })] })) : null] })) : (_jsx("section", { className: "vertebr-panel", children: _jsx("div", { className: "vertebr-empty", children: authRequired
+                                    ? "Authenticated access required for this environment."
+                                    : loading
+                                        ? "Loading…"
+                                        : "Unable to load catalog." }) })) })] })] }));
+}

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

@@ -0,0 +1,3 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1 @@
+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"}