@vertebr/react 0.1.0 → 0.2.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,+BAolBnB"}

package/dist/{VertebrAdmin.js → components/admin/VertebrAdmin.js}

@@ -1,10 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useState } from "react";
-import { createVertebrClient } from "./client";
-import { ConfigForm } from "./ConfigForm";
-import { EnvSelect } from "./EnvSelect";
-import { MetricsBoard } from "./MetricsBoard";
-import { ResourcePanel } from "./ResourceTable";
+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);
@@ -29,7 +32,8 @@ function clearStored(key) {
         // ignore
     }
 }
-export function VertebrAdmin({ apiBase = "/admin/api", title = "Control plane", envStorageKey = "vertebr:env", tokenStorageKey = "vertebr:token", getAccessToken, authUserLabel, onSignOut, }) {
+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);
@@ -46,6 +50,8 @@ export function VertebrAdmin({ apiBase = "/admin/api", title = "Control plane",
     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(() => {
@@ -89,6 +95,8 @@ export function VertebrAdmin({ apiBase = "/admin/api", title = "Control plane",
                 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;
@@ -102,6 +110,8 @@ export function VertebrAdmin({ apiBase = "/admin/api", title = "Control plane",
                     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 };
@@ -137,6 +147,17 @@ export function VertebrAdmin({ apiBase = "/admin/api", title = "Control plane",
                         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") {
@@ -145,6 +166,7 @@ export function VertebrAdmin({ apiBase = "/admin/api", title = "Control plane",
                         setResourceData(data);
                         setConfigData(null);
                         setMetricsData(null);
+                        setGalleryData(null);
                     }
                 }
                 else {
@@ -153,6 +175,7 @@ export function VertebrAdmin({ apiBase = "/admin/api", title = "Control plane",
                         setConfigData(data);
                         setResourceData(null);
                         setMetricsData(null);
+                        setGalleryData(null);
                     }
                 }
             }
@@ -162,8 +185,10 @@ export function VertebrAdmin({ apiBase = "/admin/api", title = "Control plane",
                 }
             }
             finally {
-                if (!cancelled)
+                if (!cancelled) {
                     setMetricsLoading(false);
+                    setGalleryLoading(false);
+                }
             }
         })();
         return () => {
@@ -186,9 +211,23 @@ export function VertebrAdmin({ apiBase = "/admin/api", title = "Control plane",
             setMetricsLoading(false);
         }
     }, [client]);
+    const refreshGallery = useCallback(async () => {
+        setGalleryLoading(true);
+        try {
+            const data = await client.getGallery();
+            setGalleryData(data);
+        }
+        finally {
+            setGalleryLoading(false);
+        }
+    }, [client]);
     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;
@@ -202,6 +241,7 @@ export function VertebrAdmin({ apiBase = "/admin/api", title = "Control plane",
         setEnvironment(nextEnv);
         setResourceData(null);
         setConfigData(null);
+        setGalleryData(null);
     };
     const saveToken = () => {
         const next = tokenDraft.trim();
@@ -224,38 +264,82 @@ export function VertebrAdmin({ apiBase = "/admin/api", title = "Control plane",
     }
     const activeLabel = selection?.kind === "overview"
         ? (catalog?.metrics?.label ?? "Overview")
-        : 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 ? (_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)))] })) : null, catalog && catalog.configs.length > 0 ? (_jsxs("div", { className: "vertebr-nav-group", children: [_jsx("div", { className: "vertebr-nav-label", children: "Config" }), catalog.configs.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
+        : 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] })] }), _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
+                                            : "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 === "resource"
-                                                    ? "Manage records scoped to the selected environment."
-                                                    : selection?.kind === "config"
-                                                        ? "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 === "resource" && resourceData ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "vertebr-panel-head", children: [_jsx("h2", { children: "Records" }), _jsx("span", { className: "vertebr-count", children: resourceData.items.length })] }), _jsx(ResourcePanel, { schema: resourceData.schema, items: resourceData.items, permissions: resourceData.permissions, actions: resourceData.actions, onUpdate: resourceData.permissions.update
-                                                ? async (rowId, value) => {
-                                                    await client.updateResource(resourceData.id, rowId, 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();
-                                            } })] })) : null, selection?.kind === "config" && configData ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "vertebr-panel-head", children: [_jsx("h2", { children: "Settings" }), _jsxs("span", { className: "vertebr-count", children: [Object.keys(configData.schema).length, " fields"] })] }), _jsx(ConfigForm, { schema: configData.schema, value: configData.value, onSave: async (next) => {
+                                                : 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 })) : 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,

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

@@ -0,0 +1,19 @@
+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 {};
+//# 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":"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"}

package/dist/components/config/ConfigForm.js

@@ -0,0 +1,281 @@
+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()] }));
+}

package/dist/{EnvSelect.d.ts → components/env/EnvSelect.d.ts}

@@ -1,4 +1,4 @@
-import type { AdminEnvironment } from "./types";
+import type { AdminEnvironment } from "@vertebr/client";
 type EnvSelectProps = {
     environments: AdminEnvironment[];
     value: string;

package/dist/components/env/EnvSelect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EnvSelect.d.ts","sourceRoot":"","sources":["../../../src/components/env/EnvSelect.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAExD,KAAK,cAAc,GAAG;IACpB,YAAY,EAAE,gBAAgB,EAAE,CAAC;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CAClC,CAAC;AAEF,wBAAgB,SAAS,CAAC,EAAE,YAAY,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,cAAc,+BAqD1E"}

package/dist/components/gallery/GalleryBoard.d.ts

@@ -0,0 +1,14 @@
+import type { GalleryItem } from "@vertebr/client";
+export type GalleryBoardProps = {
+    label?: string;
+    items: GalleryItem[];
+    accept: string[];
+    maxBytes: number;
+    canDelete?: boolean;
+    loading?: boolean;
+    onRefresh?: () => void;
+    onUpload: (files: File[]) => Promise<void>;
+    onDelete?: (id: string) => Promise<void>;
+};
+export declare function GalleryBoard({ label, items, accept, maxBytes, canDelete, loading, onRefresh, onUpload, onDelete, }: GalleryBoardProps): import("react").JSX.Element;
+//# sourceMappingURL=GalleryBoard.d.ts.map

package/dist/components/gallery/GalleryBoard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GalleryBoard.d.ts","sourceRoot":"","sources":["../../../src/components/gallery/GalleryBoard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAsB,MAAM,iBAAiB,CAAC;AAGvE,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,QAAQ,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC3C,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CAC1C,CAAC;AAEF,wBAAgB,YAAY,CAAC,EAC3B,KAAiB,EACjB,KAAK,EACL,MAAM,EACN,QAAQ,EACR,SAAS,EACT,OAAO,EACP,SAAS,EACT,QAAQ,EACR,QAAQ,GACT,EAAE,iBAAiB,+BAiFnB"}