@vertebr/react 0.5.1 → 0.7.0

package/dist/components/admin/AdminContent.d.ts

@@ -1,4 +1,4 @@
-import type { CatalogResponse, ConfigResponse, EmailsBoardResponse, GalleryResponse, MetricsResponse, ResourceListResponse, VertebrClient } from "@vertebr/client";
+import type { CatalogResponse, ConfigResponse, EmailsBoardResponse, FontLibraryResponse, GalleryResponse, MetricsResponse, ResourceListResponse, VertebrClient } from "@vertebr/client";
 import type { MetricsRangeId } from "../../lib/metricsRanges";
 import type { Selection } from "./types";
 export type AdminContentProps = {
@@ -16,6 +16,9 @@ export type AdminContentProps = {
     galleryData: GalleryResponse | null;
     galleryLoading: boolean;
     onRefreshGallery: () => Promise<void>;
+    fontLibraryData: FontLibraryResponse | null;
+    fontLibraryLoading: boolean;
+    onRefreshFonts: () => Promise<void>;
     emailsData: EmailsBoardResponse | null;
     emailsLoading: boolean;
     onRefreshEmails: () => Promise<void>;
@@ -31,6 +34,12 @@ export type AdminContentProps = {
         onListGallery?: () => Promise<GalleryResponse["items"]>;
         onUploadGallery?: (files: File[]) => Promise<GalleryResponse["items"]>;
     };
+    fontLibraryPicker: {
+        fonts?: FontLibraryResponse["items"];
+        fontsLoading?: boolean;
+        onListFonts?: () => Promise<FontLibraryResponse["items"]>;
+        onRefreshFonts?: () => Promise<void>;
+    };
 };
-export declare function AdminContent({ client, catalog, selection, authRequired, loading, isPageSelection, metricsData, metricsLoading, metricsRange, onMetricsRangeChange, onRefreshMetrics, galleryData, galleryLoading, onRefreshGallery, emailsData, emailsLoading, onRefreshEmails, resourceData, onRefreshResource, configData, onConfigSaved, galleryPicker, }: AdminContentProps): import("react").JSX.Element;
+export declare function AdminContent({ client, catalog, selection, authRequired, loading, isPageSelection, metricsData, metricsLoading, metricsRange, onMetricsRangeChange, onRefreshMetrics, galleryData, galleryLoading, onRefreshGallery, fontLibraryData, fontLibraryLoading, onRefreshFonts, emailsData, emailsLoading, onRefreshEmails, resourceData, onRefreshResource, configData, onConfigSaved, galleryPicker, fontLibraryPicker, }: AdminContentProps): import("react").JSX.Element;
 //# sourceMappingURL=AdminContent.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"AdminContent.d.ts","sourceRoot":"","sources":["../../../src/components/admin/AdminContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,eAAe,EACf,cAAc,EACd,mBAAmB,EACnB,eAAe,EACf,eAAe,EACf,oBAAoB,EACpB,aAAa,EACd,MAAM,iBAAiB,CAAC;AAMzB,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEzC,MAAM,MAAM,iBAAiB,GAAG;IAC9B,MAAM,EAAE,aAAa,CAAC;IACtB,OAAO,EAAE,eAAe,GAAG,IAAI,CAAC;IAChC,SAAS,EAAE,SAAS,CAAC;IACrB,YAAY,EAAE,OAAO,CAAC;IACtB,OAAO,EAAE,OAAO,CAAC;IACjB,eAAe,EAAE,OAAO,CAAC;IACzB,WAAW,EAAE,eAAe,GAAG,IAAI,CAAC;IACpC,cAAc,EAAE,OAAO,CAAC;IACxB,YAAY,EAAE,cAAc,CAAC;IAC7B,oBAAoB,EAAE,CAAC,IAAI,EAAE,cAAc,KAAK,IAAI,CAAC;IACrD,gBAAgB,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IACtC,WAAW,EAAE,eAAe,GAAG,IAAI,CAAC;IACpC,cAAc,EAAE,OAAO,CAAC;IACxB,gBAAgB,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IACtC,UAAU,EAAE,mBAAmB,GAAG,IAAI,CAAC;IACvC,aAAa,EAAE,OAAO,CAAC;IACvB,eAAe,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IACrC,YAAY,EAAE,oBAAoB,GAAG,IAAI,CAAC;IAC1C,iBAAiB,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IACvC,UAAU,EAAE,cAAc,GAAG,IAAI,CAAC;IAClC,aAAa,EAAE,CAAC,IAAI,EAAE,cAAc,KAAK,IAAI,CAAC;IAC9C,aAAa,EAAE;QACb,aAAa,CAAC,EAAE;YACd,MAAM,EAAE,MAAM,EAAE,CAAC;YACjB,QAAQ,EAAE,MAAM,CAAC;SAClB,CAAC;QACF,aAAa,CAAC,EAAE,MAAM,OAAO,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC,CAAC;QACxD,eAAe,CAAC,EAAE,CAChB,KAAK,EAAE,IAAI,EAAE,KACV,OAAO,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC,CAAC;KACxC,CAAC;CACH,CAAC;AAEF,wBAAgB,YAAY,CAAC,EAC3B,MAAM,EACN,OAAO,EACP,SAAS,EACT,YAAY,EACZ,OAAO,EACP,eAAe,EACf,WAAW,EACX,cAAc,EACd,YAAY,EACZ,oBAAoB,EACpB,gBAAgB,EAChB,WAAW,EACX,cAAc,EACd,gBAAgB,EAChB,UAAU,EACV,aAAa,EACb,eAAe,EACf,YAAY,EACZ,iBAAiB,EACjB,UAAU,EACV,aAAa,EACb,aAAa,GACd,EAAE,iBAAiB,+BAgPnB"}
+{"version":3,"file":"AdminContent.d.ts","sourceRoot":"","sources":["../../../src/components/admin/AdminContent.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,eAAe,EACf,cAAc,EACd,mBAAmB,EACnB,mBAAmB,EACnB,eAAe,EACf,eAAe,EACf,oBAAoB,EACpB,aAAa,EACd,MAAM,iBAAiB,CAAC;AAOzB,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAE9D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEzC,MAAM,MAAM,iBAAiB,GAAG;IAC9B,MAAM,EAAE,aAAa,CAAC;IACtB,OAAO,EAAE,eAAe,GAAG,IAAI,CAAC;IAChC,SAAS,EAAE,SAAS,CAAC;IACrB,YAAY,EAAE,OAAO,CAAC;IACtB,OAAO,EAAE,OAAO,CAAC;IACjB,eAAe,EAAE,OAAO,CAAC;IACzB,WAAW,EAAE,eAAe,GAAG,IAAI,CAAC;IACpC,cAAc,EAAE,OAAO,CAAC;IACxB,YAAY,EAAE,cAAc,CAAC;IAC7B,oBAAoB,EAAE,CAAC,IAAI,EAAE,cAAc,KAAK,IAAI,CAAC;IACrD,gBAAgB,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IACtC,WAAW,EAAE,eAAe,GAAG,IAAI,CAAC;IACpC,cAAc,EAAE,OAAO,CAAC;IACxB,gBAAgB,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IACtC,eAAe,EAAE,mBAAmB,GAAG,IAAI,CAAC;IAC5C,kBAAkB,EAAE,OAAO,CAAC;IAC5B,cAAc,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IACpC,UAAU,EAAE,mBAAmB,GAAG,IAAI,CAAC;IACvC,aAAa,EAAE,OAAO,CAAC;IACvB,eAAe,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IACrC,YAAY,EAAE,oBAAoB,GAAG,IAAI,CAAC;IAC1C,iBAAiB,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IACvC,UAAU,EAAE,cAAc,GAAG,IAAI,CAAC;IAClC,aAAa,EAAE,CAAC,IAAI,EAAE,cAAc,KAAK,IAAI,CAAC;IAC9C,aAAa,EAAE;QACb,aAAa,CAAC,EAAE;YACd,MAAM,EAAE,MAAM,EAAE,CAAC;YACjB,QAAQ,EAAE,MAAM,CAAC;SAClB,CAAC;QACF,aAAa,CAAC,EAAE,MAAM,OAAO,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC,CAAC;QACxD,eAAe,CAAC,EAAE,CAChB,KAAK,EAAE,IAAI,EAAE,KACV,OAAO,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC,CAAC;KACxC,CAAC;IACF,iBAAiB,EAAE;QACjB,KAAK,CAAC,EAAE,mBAAmB,CAAC,OAAO,CAAC,CAAC;QACrC,YAAY,CAAC,EAAE,OAAO,CAAC;QACvB,WAAW,CAAC,EAAE,MAAM,OAAO,CAAC,mBAAmB,CAAC,OAAO,CAAC,CAAC,CAAC;QAC1D,cAAc,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;KACtC,CAAC;CACH,CAAC;AA6EF,wBAAgB,YAAY,CAAC,EAC3B,MAAM,EACN,OAAO,EACP,SAAS,EACT,YAAY,EACZ,OAAO,EACP,eAAe,EACf,WAAW,EACX,cAAc,EACd,YAAY,EACZ,oBAAoB,EACpB,gBAAgB,EAChB,WAAW,EACX,cAAc,EACd,gBAAgB,EAChB,eAAe,EACf,kBAAkB,EAClB,cAAc,EACd,UAAU,EACV,aAAa,EACb,eAAe,EACf,YAAY,EACZ,iBAAiB,EACjB,UAAU,EACV,aAAa,EACb,aAAa,EACb,iBAAiB,GAClB,EAAE,iBAAiB,+BAuQnB"}

package/dist/components/admin/AdminContent.js

@@ -1,10 +1,25 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useState } from "react";
 import { ConfigForm } from "../config/ConfigForm";
 import { EmailsBoard } from "../emails/EmailsBoard";
+import { FontLibraryBoard } from "../fonts/FontLibraryBoard";
 import { GalleryBoard } from "../gallery/GalleryBoard";
 import { MetricsBoard } from "../metrics/MetricsBoard";
 import { ResourcePanel } from "../resources/ResourceTable";
-export function AdminContent({ client, catalog, selection, authRequired, loading, isPageSelection, metricsData, metricsLoading, metricsRange, onMetricsRangeChange, onRefreshMetrics, galleryData, galleryLoading, onRefreshGallery, emailsData, emailsLoading, onRefreshEmails, resourceData, onRefreshResource, configData, onConfigSaved, galleryPicker, }) {
+import { PagePreviewPane } from "./PagePreviewPane";
+function ConfigEditor({ client, configData, isPageSelection, previewPath, onConfigSaved, galleryPicker, fontLibraryPicker, }) {
+    const [draft, setDraft] = useState(configData.value);
+    const showPreview = Boolean(previewPath);
+    const onChange = useCallback((value) => {
+        setDraft(value);
+    }, []);
+    const form = (_jsx(ConfigForm, { schema: configData.schema, value: configData.value, onChange: showPreview ? onChange : undefined, onSave: async (next) => {
+            const saved = await client.setConfig(configData.id, next);
+            onConfigSaved(saved);
+        }, ...galleryPicker, ...fontLibraryPicker }));
+    return (_jsxs("div", { className: "vertebr-config-editor", children: [showPreview ? (_jsxs("div", { className: "vertebr-panel-head", children: [_jsx("h2", { children: isPageSelection ? "Page content" : configData.label }), _jsxs("span", { className: "vertebr-count", children: [Object.keys(configData.schema).length, " fields"] })] })) : isPageSelection ? (_jsxs("div", { className: "vertebr-panel-head", children: [_jsx("h2", { children: "Page content" }), _jsxs("span", { className: "vertebr-count", children: [Object.keys(configData.schema).length, " fields"] })] })) : null, showPreview && previewPath ? (_jsxs("div", { className: "vertebr-page-editor", children: [_jsx("div", { className: "vertebr-page-editor-form", children: form }), _jsx(PagePreviewPane, { previewPath: previewPath, controlId: configData.id, draft: draft ?? configData.value })] })) : (form)] }));
+}
+export function AdminContent({ client, catalog, selection, authRequired, loading, isPageSelection, metricsData, metricsLoading, metricsRange, onMetricsRangeChange, onRefreshMetrics, galleryData, galleryLoading, onRefreshGallery, fontLibraryData, fontLibraryLoading, onRefreshFonts, emailsData, emailsLoading, onRefreshEmails, resourceData, onRefreshResource, configData, onConfigSaved, galleryPicker, fontLibraryPicker, }) {
     if (!catalog) {
         return (_jsx("div", { className: "vertebr-content", children: _jsx("section", { className: "vertebr-panel", children: _jsx("div", { className: "vertebr-empty", children: authRequired
                         ? "Authenticated access required for this environment."
@@ -25,6 +40,21 @@ export function AdminContent({ client, catalog, selection, authRequired, loading
                             await client.deleteGalleryItem(id);
                             await onRefreshGallery();
                         }
+                        : undefined })) : null, selection?.kind === "fontLibrary" && fontLibraryData ? (_jsx(FontLibraryBoard, { label: fontLibraryData.label, data: fontLibraryData, loading: fontLibraryLoading, onRefresh: () => void onRefreshFonts(), onUpload: async (files, meta) => {
+                        for (const file of files) {
+                            await client.uploadFontFile(file, meta);
+                        }
+                        await onRefreshFonts();
+                    }, onImportGoogle: fontLibraryData.canImportGoogle
+                        ? async (payload) => {
+                            await client.importGoogleFont(payload);
+                            await onRefreshFonts();
+                        }
+                        : undefined, onDelete: fontLibraryData.canDelete
+                        ? async (id) => {
+                            await client.deleteFontItem(id);
+                            await onRefreshFonts();
+                        }
                         : undefined })) : null, selection?.kind === "emails" && emailsData ? (_jsx(EmailsBoard, { data: emailsData, loading: emailsLoading, tab: selection.tab ?? "compose", onRefresh: () => void onRefreshEmails(), onLoadRecipients: async (resourceId) => {
                         const listed = await client.listResource(resourceId, {
                             fresh: true,
@@ -87,7 +117,7 @@ export function AdminContent({ client, catalog, selection, authRequired, loading
                     }, onActionDone: onRefreshResource, onPreviewMail: async (rowId, actionId, input) => {
                         return client.previewResourceMail(resourceData.id, rowId, actionId, input);
                     }, onCollectionAction: async (actionId, input) => {
-                        await client.runCollectionAction(resourceData.id, actionId, input);
+                        return client.runCollectionAction(resourceData.id, actionId, input);
                     }, onUpload: resourceData.uploads
                         ? async (field, files) => {
                             if (files.length === 1 && files[0]) {
@@ -97,11 +127,6 @@ export function AdminContent({ client, catalog, selection, authRequired, loading
                             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);
-                                onConfigSaved({
-                                    ...configData,
-                                    value: saved.value,
-                                });
-                            }, ...galleryPicker })] })) : null] }) }));
+                        : undefined, ...galleryPicker })) : null, selection?.kind === "config" && configData ? (_jsx(ConfigEditor, { client: client, configData: configData, isPageSelection: isPageSelection, previewPath: catalog.configs.find((item) => item.id === configData.id)
+                        ?.previewPath, onConfigSaved: onConfigSaved, galleryPicker: galleryPicker, fontLibraryPicker: fontLibraryPicker }, configData.id)) : null] }) }));
 }

package/dist/components/admin/AdminHeader.d.ts

@@ -7,7 +7,9 @@ export type AdminHeaderProps = {
     authRequired: boolean;
     selection: Selection;
     isPageSelection: boolean;
+    /** True when the active page/layout has a host previewPath. */
+    hasPagePreview?: boolean;
     error: string | null;
 };
-export declare function AdminHeader({ activeLabel, activeEnv, catalogLoaded, authRequired, selection, isPageSelection, error, }: AdminHeaderProps): import("react").JSX.Element;
+export declare function AdminHeader({ activeLabel, activeEnv, catalogLoaded, authRequired, selection, isPageSelection, hasPagePreview, error, }: AdminHeaderProps): import("react").JSX.Element;
 //# sourceMappingURL=AdminHeader.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"AdminHeader.d.ts","sourceRoot":"","sources":["../../../src/components/admin/AdminHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AACxD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEzC,MAAM,MAAM,gBAAgB,GAAG;IAC7B,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B,aAAa,EAAE,OAAO,CAAC;IACvB,YAAY,EAAE,OAAO,CAAC;IACtB,SAAS,EAAE,SAAS,CAAC;IACrB,eAAe,EAAE,OAAO,CAAC;IACzB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB,CAAC;AAkCF,wBAAgB,WAAW,CAAC,EAC1B,WAAW,EACX,SAAS,EACT,aAAa,EACb,YAAY,EACZ,SAAS,EACT,eAAe,EACf,KAAK,GACN,EAAE,gBAAgB,+BA+BlB"}
+{"version":3,"file":"AdminHeader.d.ts","sourceRoot":"","sources":["../../../src/components/admin/AdminHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AACxD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEzC,MAAM,MAAM,gBAAgB,GAAG;IAC7B,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B,aAAa,EAAE,OAAO,CAAC;IACvB,YAAY,EAAE,OAAO,CAAC;IACtB,SAAS,EAAE,SAAS,CAAC;IACrB,eAAe,EAAE,OAAO,CAAC;IACzB,+DAA+D;IAC/D,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB,CAAC;AA+CF,wBAAgB,WAAW,CAAC,EAC1B,WAAW,EACX,SAAS,EACT,aAAa,EACb,YAAY,EACZ,SAAS,EACT,eAAe,EACf,cAAc,EACd,KAAK,GACN,EAAE,gBAAgB,+BAgClB"}

package/dist/components/admin/AdminHeader.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function subtitle({ catalogLoaded, authRequired, selection, isPageSelection, }) {
+function subtitle({ catalogLoaded, authRequired, selection, isPageSelection, hasPagePreview, }) {
     if (!catalogLoaded && authRequired) {
         return "Provide an access token to load this environment.";
     }
@@ -9,6 +9,9 @@ function subtitle({ catalogLoaded, authRequired, selection, isPageSelection, })
     if (selection?.kind === "gallery") {
         return "Browse and upload shared media assets.";
     }
+    if (selection?.kind === "fontLibrary") {
+        return "Upload custom fonts or add Google Fonts to your library.";
+    }
     if (selection?.kind === "emails") {
         return "Send or schedule branded email to a list or specific people.";
     }
@@ -16,17 +19,23 @@ function subtitle({ catalogLoaded, authRequired, selection, isPageSelection, })
         return "Manage records scoped to the selected environment.";
     }
     if (selection?.kind === "config") {
+        if (hasPagePreview) {
+            return isPageSelection
+                ? "Edit content — live storefront preview updates as you type."
+                : "Edit settings — live storefront preview updates as you change typography and colors.";
+        }
         return isPageSelection
             ? "Edit content for this page."
-            : "Owner-managed config for this environment.";
+            : "Environment settings — changes apply to this environment only.";
     }
     return "Select a panel.";
 }
-export function AdminHeader({ activeLabel, activeEnv, catalogLoaded, authRequired, selection, isPageSelection, error, }) {
+export function AdminHeader({ activeLabel, activeEnv, catalogLoaded, authRequired, selection, isPageSelection, hasPagePreview, error, }) {
     return (_jsxs("header", { className: "vertebr-header", children: [_jsxs("div", { children: [_jsxs("div", { className: "vertebr-heading-row", children: [_jsx("h1", { children: activeLabel }), activeEnv ? (_jsx("span", { className: "vertebr-env-badge", "data-tone": activeEnv.tone ?? "neutral", children: activeEnv.label })) : null] }), _jsx("p", { children: subtitle({
                             catalogLoaded,
                             authRequired,
                             selection,
                             isPageSelection,
+                            hasPagePreview,
                         }) })] }), error ? (_jsx("span", { className: "vertebr-status", "data-tone": "danger", children: error })) : null] }));
 }

package/dist/components/admin/PagePreviewPane.d.ts

@@ -0,0 +1,14 @@
+export type PagePreviewViewport = "desktop" | "mobile";
+export type PagePreviewPaneProps = {
+    /** Host route from the page/layout definition, e.g. `/about`. */
+    previewPath: string;
+    /** Control id being edited. */
+    controlId: string;
+    /** Latest unsaved form values. */
+    draft: Record<string, unknown> | null;
+};
+/**
+ * Live host iframe for Pages. Vertebr posts drafts; the host renders.
+ */
+export declare function PagePreviewPane({ previewPath, controlId, draft, }: PagePreviewPaneProps): import("react").JSX.Element;
+//# sourceMappingURL=PagePreviewPane.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PagePreviewPane.d.ts","sourceRoot":"","sources":["../../../src/components/admin/PagePreviewPane.tsx"],"names":[],"mappings":"AAOA,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG,QAAQ,CAAC;AAEvD,MAAM,MAAM,oBAAoB,GAAG;IACjC,iEAAiE;IACjE,WAAW,EAAE,MAAM,CAAC;IACpB,+BAA+B;IAC/B,SAAS,EAAE,MAAM,CAAC;IAClB,kCAAkC;IAClC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI,CAAC;CACvC,CAAC;AAWF;;GAEG;AACH,wBAAgB,eAAe,CAAC,EAC9B,WAAW,EACX,SAAS,EACT,KAAK,GACN,EAAE,oBAAoB,+BAmMtB"}

package/dist/components/admin/PagePreviewPane.js

@@ -0,0 +1,121 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { buildVertebrPreviewUrl, postVertebrPreviewDraft, subscribeVertebrPreviewReady, } from "@vertebr/client";
+const VIEWPORTS = [
+    { id: "desktop", label: "Desktop" },
+    { id: "mobile", label: "Mobile" },
+];
+/** Logical CSS viewport for mobile preview (host media queries use this). */
+const MOBILE_WIDTH = 390;
+const MOBILE_HEIGHT = 844;
+/**
+ * Live host iframe for Pages. Vertebr posts drafts; the host renders.
+ */
+export function PagePreviewPane({ previewPath, controlId, draft, }) {
+    const iframeRef = useRef(null);
+    const stageRef = useRef(null);
+    const draftRef = useRef(draft);
+    const [frameReady, setFrameReady] = useState(false);
+    const [frameError, setFrameError] = useState(false);
+    const [viewport, setViewport] = useState("desktop");
+    const [mobileScale, setMobileScale] = useState(1);
+    draftRef.current = draft;
+    const isMobile = viewport === "mobile";
+    const src = useMemo(() => buildVertebrPreviewUrl(previewPath, {
+        controlId,
+    }), [previewPath, controlId]);
+    const pushDraft = useCallback(() => {
+        const win = iframeRef.current?.contentWindow;
+        const value = draftRef.current;
+        if (!win || !value)
+            return;
+        postVertebrPreviewDraft(win, controlId, value);
+    }, [controlId]);
+    const notifyHostResize = useCallback(() => {
+        const win = iframeRef.current?.contentWindow;
+        if (!win)
+            return;
+        try {
+            win.dispatchEvent(new Event("resize"));
+        }
+        catch {
+            // Cross-origin should not happen on same-origin preview hosts.
+        }
+    }, []);
+    useEffect(() => {
+        setFrameReady(false);
+        setFrameError(false);
+    }, [src]);
+    useEffect(() => {
+        return subscribeVertebrPreviewReady((source) => {
+            const win = iframeRef.current?.contentWindow;
+            if (!win || source !== win)
+                return;
+            setFrameReady(true);
+            pushDraft();
+        });
+    }, [pushDraft, src]);
+    useEffect(() => {
+        if (!frameReady)
+            return;
+        pushDraft();
+    }, [draft, frameReady, pushDraft]);
+    // Fit the fixed mobile viewport into the stage without changing its
+    // layout width (transform scale keeps host media queries at 390px).
+    useEffect(() => {
+        if (!isMobile) {
+            setMobileScale(1);
+            return;
+        }
+        const stage = stageRef.current;
+        if (!stage || typeof ResizeObserver === "undefined")
+            return;
+        const update = () => {
+            const style = getComputedStyle(stage);
+            const padX = (Number.parseFloat(style.paddingLeft) || 0) +
+                (Number.parseFloat(style.paddingRight) || 0);
+            const padY = (Number.parseFloat(style.paddingTop) || 0) +
+                (Number.parseFloat(style.paddingBottom) || 0);
+            const availW = Math.max(0, stage.clientWidth - padX);
+            const availH = Math.max(0, stage.clientHeight - padY);
+            const next = Math.min(1, availW / MOBILE_WIDTH, availH / MOBILE_HEIGHT);
+            setMobileScale(Number.isFinite(next) && next > 0 ? next : 1);
+        };
+        update();
+        const observer = new ResizeObserver(update);
+        observer.observe(stage);
+        return () => observer.disconnect();
+    }, [isMobile]);
+    useEffect(() => {
+        if (!frameReady)
+            return;
+        // After the iframe box size changes, nudge hosts that key off resize.
+        const timer = window.setTimeout(notifyHostResize, 50);
+        return () => window.clearTimeout(timer);
+    }, [viewport, mobileScale, frameReady, notifyHostResize]);
+    return (_jsxs("div", { className: "vertebr-page-preview", children: [_jsxs("div", { className: "vertebr-page-preview-meta", children: [_jsxs("p", { children: [_jsx("span", { children: "Preview" }), _jsx("strong", { children: previewPath })] }), _jsxs("p", { children: [_jsx("span", { children: "Status" }), _jsx("strong", { children: frameError
+                                    ? "Unavailable"
+                                    : frameReady
+                                        ? "Live"
+                                        : "Loading…" })] }), isMobile ? (_jsxs("p", { children: [_jsx("span", { children: "Viewport" }), _jsxs("strong", { children: [MOBILE_WIDTH, "\u00D7", MOBILE_HEIGHT] })] })) : null, _jsx("div", { className: "vertebr-page-preview-viewports", role: "group", "aria-label": "Preview viewport", children: VIEWPORTS.map((item) => (_jsx("button", { type: "button", "data-active": viewport === item.id ? "true" : undefined, onClick: () => setViewport(item.id), children: item.label }, item.id))) })] }), _jsx("div", { ref: stageRef, className: "vertebr-page-preview-stage", "data-viewport": viewport, children: _jsx("div", { className: "vertebr-page-preview-shell", style: isMobile
+                        ? {
+                            width: MOBILE_WIDTH * mobileScale,
+                            height: MOBILE_HEIGHT * mobileScale,
+                        }
+                        : undefined, children: _jsx("div", { className: "vertebr-page-preview-frame", style: isMobile
+                            ? {
+                                width: MOBILE_WIDTH,
+                                height: MOBILE_HEIGHT,
+                                transform: `scale(${mobileScale})`,
+                                transformOrigin: "top left",
+                            }
+                            : undefined, children: frameError ? (_jsxs("div", { className: "vertebr-page-preview-empty", children: ["Could not load host preview at ", previewPath, "."] })) : (_jsx("iframe", { ref: iframeRef, title: `Preview ${controlId}`, src: src, width: isMobile ? MOBILE_WIDTH : undefined, height: isMobile ? MOBILE_HEIGHT : undefined, style: isMobile
+                                ? { width: MOBILE_WIDTH, height: MOBILE_HEIGHT }
+                                : undefined, onLoad: () => {
+                                // Ready message is preferred; onLoad covers hosts that
+                                // already mounted before the listener attached.
+                                setFrameReady(true);
+                                pushDraft();
+                                notifyHostResize();
+                            }, onError: () => setFrameError(true) })) }) }) })] }));
+}

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

@@ -1,4 +1,4 @@
 import type { VertebrAdminProps } from "./types";
 export type { VertebrAdminProps } from "./types";
-export declare function VertebrAdmin({ apiBase, title, envStorageKey, tokenStorageKey, themeStorageKey, metricsRangeStorageKey, getAccessToken, authUserLabel, onSignOut, }: VertebrAdminProps): import("react").JSX.Element;
+export declare function VertebrAdmin({ apiBase, basePath: basePathProp, title, envStorageKey, tokenStorageKey, themeStorageKey, metricsRangeStorageKey, getAccessToken, authUserLabel, onSignOut, }: VertebrAdminProps): import("react").JSX.Element;
 //# sourceMappingURL=VertebrAdmin.d.ts.map

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":"AAqBA,OAAO,KAAK,EAGV,iBAAiB,EAClB,MAAM,SAAS,CAAC;AAEjB,YAAY,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAEjD,wBAAgB,YAAY,CAAC,EAC3B,OAAsB,EACtB,KAAuB,EACvB,aAA6B,EAC7B,eAAiC,EACjC,eAAiC,EACjC,sBAAgD,EAChD,cAAc,EACd,aAAa,EACb,SAAS,GACV,EAAE,iBAAiB,+BA6bnB"}
+{"version":3,"file":"VertebrAdmin.d.ts","sourceRoot":"","sources":["../../../src/components/admin/VertebrAdmin.tsx"],"names":[],"mappings":"AA8BA,OAAO,KAAK,EAGV,iBAAiB,EAClB,MAAM,SAAS,CAAC;AAEjB,YAAY,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAEjD,wBAAgB,YAAY,CAAC,EAC3B,OAAsB,EACtB,QAAQ,EAAE,YAAY,EACtB,KAAuB,EACvB,aAA6B,EAC7B,eAAiC,EACjC,eAAiC,EACjC,sBAAgD,EAChD,cAAc,EACd,aAAa,EACb,SAAS,GACV,EAAE,iBAAiB,+BA+iBnB"}

package/dist/components/admin/VertebrAdmin.js

@@ -1,14 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { createVertebrClient, } from "@vertebr/client";
 import { useVertebrTheme } from "../../hooks/useVertebrTheme";
 import { parseMetricsRangeId, } from "../../lib/metricsRanges";
 import { AdminContent } from "./AdminContent";
 import { AdminHeader } from "./AdminHeader";
 import { AdminSidebar } from "./AdminSidebar";
+import { adminBaseFromApiBase, coerceSelection, defaultSelection, hrefForSelection, selectionFromPath, selectionsEqual, } from "./routes";
 import { sidebarGroups } from "./sidebar";
 import { clearStored, readStored, writeStored } from "./storage";
-export function VertebrAdmin({ apiBase = "/admin/api", title = "Control plane", envStorageKey = "vertebr:env", tokenStorageKey = "vertebr:token", themeStorageKey = "vertebr:theme", metricsRangeStorageKey = "vertebr:metrics-range", getAccessToken, authUserLabel, onSignOut, }) {
+export function VertebrAdmin({ apiBase = "/admin/api", basePath: basePathProp, title = "Control plane", envStorageKey = "vertebr:env", tokenStorageKey = "vertebr:token", themeStorageKey = "vertebr:theme", metricsRangeStorageKey = "vertebr:metrics-range", getAccessToken, authUserLabel, onSignOut, }) {
+    const basePath = basePathProp ?? adminBaseFromApiBase(apiBase);
     const { theme, setTheme } = useVertebrTheme(themeStorageKey);
     const [environment, setEnvironment] = useState(() => readStored(envStorageKey) ?? "");
     const [token, setToken] = useState(() => readStored(tokenStorageKey) ?? "");
@@ -21,7 +23,13 @@ export function VertebrAdmin({ apiBase = "/admin/api", title = "Control plane",
     }), [apiBase, getEnvironment, getAccessToken, token]);
     const [bootstrap, setBootstrap] = useState(null);
     const [catalog, setCatalog] = useState(null);
-    const [selection, setSelection] = useState({ kind: "overview" });
+    const [selection, setSelection] = useState(() => {
+        if (typeof window === "undefined")
+            return { kind: "overview" };
+        return (selectionFromPath(window.location.pathname, basePath, null) ?? {
+            kind: "overview",
+        });
+    });
     const [resourceData, setResourceData] = useState(null);
     const [configData, setConfigData] = useState(null);
     const [metricsData, setMetricsData] = useState(null);
@@ -29,10 +37,23 @@ export function VertebrAdmin({ apiBase = "/admin/api", title = "Control plane",
     const [metricsRange, setMetricsRange] = useState(() => parseMetricsRangeId(readStored(metricsRangeStorageKey)));
     const [galleryData, setGalleryData] = useState(null);
     const [galleryLoading, setGalleryLoading] = useState(false);
+    const [fontLibraryData, setFontLibraryData] = useState(null);
+    const [fontLibraryLoading, setFontLibraryLoading] = useState(false);
     const [emailsData, setEmailsData] = useState(null);
     const [emailsLoading, setEmailsLoading] = useState(false);
     const [error, setError] = useState(null);
     const [loading, setLoading] = useState(true);
+    /** Skip pushState when selection was applied from the URL (catalog/popstate). */
+    const skipNextUrlPush = useRef(true);
+    const syncUrl = useCallback((next, catalogSnapshot, replace = false) => {
+        if (typeof window === "undefined" || !next)
+            return;
+        const href = hrefForSelection(basePath, next, catalogSnapshot);
+        if (window.location.pathname === href)
+            return;
+        const method = replace ? "replaceState" : "pushState";
+        window.history[method](null, "", href);
+    }, [basePath]);
     useEffect(() => {
         let cancelled = false;
         (async () => {
@@ -71,35 +92,11 @@ export function VertebrAdmin({ apiBase = "/admin/api", title = "Control plane",
                 if (cancelled)
                     return;
                 setCatalog(next);
-                setSelection((current) => {
-                    if (current?.kind === "overview")
-                        return current;
-                    if (current?.kind === "gallery" && next.gallery)
-                        return current;
-                    if (current?.kind === "emails" && next.emails)
-                        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" };
-                    if (next.emails)
-                        return { kind: "emails", tab: "compose" };
-                    const firstConfig = next.configs[0];
-                    if (firstConfig)
-                        return { kind: "config", id: firstConfig.id };
-                    return { kind: "overview" };
-                });
+                const fromUrl = selectionFromPath(window.location.pathname, basePath, next);
+                const resolved = coerceSelection(fromUrl ?? defaultSelection(next), next);
+                skipNextUrlPush.current = true;
+                setSelection(resolved);
+                syncUrl(resolved, next, true);
             }
             catch (err) {
                 if (!cancelled) {
@@ -115,7 +112,28 @@ export function VertebrAdmin({ apiBase = "/admin/api", title = "Control plane",
         return () => {
             cancelled = true;
         };
-    }, [client, bootstrap, environment]);
+    }, [client, bootstrap, environment, basePath, syncUrl]);
+    useEffect(() => {
+        if (!catalog || !selection)
+            return;
+        if (skipNextUrlPush.current) {
+            skipNextUrlPush.current = false;
+            return;
+        }
+        syncUrl(selection, catalog, false);
+    }, [selection, catalog, syncUrl]);
+    useEffect(() => {
+        const onPopState = () => {
+            if (!catalog)
+                return;
+            const fromUrl = selectionFromPath(window.location.pathname, basePath, catalog);
+            const resolved = coerceSelection(fromUrl ?? defaultSelection(catalog), catalog);
+            skipNextUrlPush.current = true;
+            setSelection((current) => selectionsEqual(current, resolved) ? current : resolved);
+        };
+        window.addEventListener("popstate", onPopState);
+        return () => window.removeEventListener("popstate", onPopState);
+    }, [catalog, basePath]);
     useEffect(() => {
         if (!selection || !catalog)
             return;
@@ -131,6 +149,7 @@ export function VertebrAdmin({ apiBase = "/admin/api", title = "Control plane",
                         setResourceData(null);
                         setConfigData(null);
                         setGalleryData(null);
+                        setFontLibraryData(null);
                         setEmailsData(null);
                     }
                 }
@@ -142,6 +161,19 @@ export function VertebrAdmin({ apiBase = "/admin/api", title = "Control plane",
                         setResourceData(null);
                         setConfigData(null);
                         setMetricsData(null);
+                        setFontLibraryData(null);
+                        setEmailsData(null);
+                    }
+                }
+                else if (selection.kind === "fontLibrary") {
+                    setFontLibraryLoading(true);
+                    const data = await client.getFonts();
+                    if (!cancelled) {
+                        setFontLibraryData(data);
+                        setResourceData(null);
+                        setConfigData(null);
+                        setMetricsData(null);
+                        setGalleryData(null);
                         setEmailsData(null);
                     }
                 }
@@ -154,6 +186,7 @@ export function VertebrAdmin({ apiBase = "/admin/api", title = "Control plane",
                         setConfigData(null);
                         setMetricsData(null);
                         setGalleryData(null);
+                        setFontLibraryData(null);
                     }
                 }
                 else if (selection.kind === "resource") {
@@ -163,6 +196,7 @@ export function VertebrAdmin({ apiBase = "/admin/api", title = "Control plane",
                         setConfigData(null);
                         setMetricsData(null);
                         setGalleryData(null);
+                        setFontLibraryData(null);
                         setEmailsData(null);
                     }
                 }
@@ -174,6 +208,18 @@ export function VertebrAdmin({ apiBase = "/admin/api", title = "Control plane",
                         setMetricsData(null);
                         setGalleryData(null);
                         setEmailsData(null);
+                        if (catalog.fontLibrary) {
+                            setFontLibraryLoading(true);
+                            try {
+                                const fonts = await client.getFonts();
+                                if (!cancelled)
+                                    setFontLibraryData(fonts);
+                            }
+                            finally {
+                                if (!cancelled)
+                                    setFontLibraryLoading(false);
+                            }
+                        }
                     }
                 }
             }
@@ -186,6 +232,7 @@ export function VertebrAdmin({ apiBase = "/admin/api", title = "Control plane",
                 if (!cancelled) {
                     setMetricsLoading(false);
                     setGalleryLoading(false);
+                    setFontLibraryLoading(false);
                     setEmailsLoading(false);
                 }
             }
@@ -224,6 +271,20 @@ export function VertebrAdmin({ apiBase = "/admin/api", title = "Control plane",
             setGalleryLoading(false);
         }
     }, [client]);
+    const refreshFonts = useCallback(async () => {
+        setFontLibraryLoading(true);
+        try {
+            const data = await client.getFonts({ fresh: true });
+            setFontLibraryData(data);
+        }
+        finally {
+            setFontLibraryLoading(false);
+        }
+    }, [client]);
+    const listFonts = useCallback(async () => {
+        const data = await client.getFonts();
+        return data.items;
+    }, [client]);
     const refreshEmails = useCallback(async () => {
         setEmailsLoading(true);
         try {
@@ -256,6 +317,14 @@ export function VertebrAdmin({ apiBase = "/admin/api", title = "Control plane",
             onUploadGallery: uploadGallery,
         }
         : {};
+    const fontLibraryPicker = catalog?.fontLibrary
+        ? {
+            fonts: fontLibraryData?.items ?? [],
+            fontsLoading: fontLibraryLoading,
+            onListFonts: listFonts,
+            onRefreshFonts: refreshFonts,
+        }
+        : {};
     const envList = catalog?.environments ?? bootstrap?.environments ?? [];
     const activeEnv = envList.find((env) => env.id === environment);
     const authRequired = Boolean(activeEnv?.auth?.required);
@@ -263,6 +332,7 @@ export function VertebrAdmin({ apiBase = "/admin/api", title = "Control plane",
         ? catalog?.configs.find((c) => c.id === selection.id)
         : undefined;
     const isPageSelection = activeConfig?.section === "page";
+    const hasPagePreview = Boolean(activeConfig?.previewPath);
     const switchEnvironment = (nextEnv) => {
         if (nextEnv === environment)
             return;
@@ -277,6 +347,7 @@ export function VertebrAdmin({ apiBase = "/admin/api", title = "Control plane",
         setResourceData(null);
         setConfigData(null);
         setGalleryData(null);
+        setFontLibraryData(null);
     };
     const saveToken = () => {
         const next = tokenDraft.trim();
@@ -322,6 +393,15 @@ export function VertebrAdmin({ apiBase = "/admin/api", title = "Control plane",
                 onSelect: () => setSelection({ kind: "gallery" }),
             });
         }
+        if (catalog.fontLibrary) {
+            entries.push({
+                key: "fonts",
+                group: catalog.fontLibrary.group ?? "Resources",
+                label: catalog.fontLibrary.label,
+                active: selection?.kind === "fontLibrary",
+                onSelect: () => setSelection({ kind: "fontLibrary" }),
+            });
+        }
         if (catalog.emails) {
             const emailsTab = selection?.kind === "emails" ? (selection.tab ?? "compose") : null;
             entries.push({
@@ -374,12 +454,14 @@ export function VertebrAdmin({ apiBase = "/admin/api", title = "Control plane",
         ? (catalog?.metrics?.label ?? "Overview")
         : selection?.kind === "gallery"
             ? (catalog?.gallery?.label ?? "Gallery")
-            : selection?.kind === "emails"
-                ? (catalog?.emails?.label ?? "Emails")
-                : 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: [_jsx(AdminSidebar, { brand: bootstrap?.brand ?? catalog?.brand ?? "Vertebr", title: title, envList: envList, environment: environment, onEnvironmentChange: switchEnvironment, navGroups: navGroups, getAccessToken: getAccessToken, authUserLabel: authUserLabel, onSignOut: onSignOut, authRequired: authRequired, activeEnv: activeEnv, token: token, tokenDraft: tokenDraft, onTokenDraftChange: setTokenDraft, onSaveToken: saveToken, onClearToken: clearToken, theme: theme, onThemeChange: setTheme }), _jsxs("main", { className: "vertebr-main", children: [_jsx(AdminHeader, { activeLabel: activeLabel ?? (catalog ? "Dashboard" : "Sign in"), activeEnv: activeEnv, catalogLoaded: Boolean(catalog), authRequired: authRequired, selection: selection, isPageSelection: isPageSelection, error: error }), _jsx(AdminContent, { client: client, catalog: catalog, selection: selection, authRequired: authRequired, loading: loading, isPageSelection: isPageSelection, metricsData: metricsData, metricsLoading: metricsLoading, metricsRange: metricsRange, onMetricsRangeChange: changeMetricsRange, onRefreshMetrics: refreshMetrics, galleryData: galleryData, galleryLoading: galleryLoading, onRefreshGallery: refreshGallery, emailsData: emailsData, emailsLoading: emailsLoading, onRefreshEmails: refreshEmails, resourceData: resourceData, onRefreshResource: refreshResource, configData: configData, onConfigSaved: setConfigData, galleryPicker: galleryPicker })] })] }));
+            : selection?.kind === "fontLibrary"
+                ? (catalog?.fontLibrary?.label ?? "Font Library")
+                : selection?.kind === "emails"
+                    ? (catalog?.emails?.label ?? "Emails")
+                    : 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: [_jsx(AdminSidebar, { brand: bootstrap?.brand ?? catalog?.brand ?? "Vertebr", title: title, envList: envList, environment: environment, onEnvironmentChange: switchEnvironment, navGroups: navGroups, getAccessToken: getAccessToken, authUserLabel: authUserLabel, onSignOut: onSignOut, authRequired: authRequired, activeEnv: activeEnv, token: token, tokenDraft: tokenDraft, onTokenDraftChange: setTokenDraft, onSaveToken: saveToken, onClearToken: clearToken, theme: theme, onThemeChange: setTheme }), _jsxs("main", { className: "vertebr-main", children: [_jsx(AdminHeader, { activeLabel: activeLabel ?? (catalog ? "Dashboard" : "Sign in"), activeEnv: activeEnv, catalogLoaded: Boolean(catalog), authRequired: authRequired, selection: selection, isPageSelection: isPageSelection, hasPagePreview: hasPagePreview, error: error }), _jsx(AdminContent, { client: client, catalog: catalog, selection: selection, authRequired: authRequired, loading: loading, isPageSelection: isPageSelection, metricsData: metricsData, metricsLoading: metricsLoading, metricsRange: metricsRange, onMetricsRangeChange: changeMetricsRange, onRefreshMetrics: refreshMetrics, galleryData: galleryData, galleryLoading: galleryLoading, onRefreshGallery: refreshGallery, fontLibraryData: fontLibraryData, fontLibraryLoading: fontLibraryLoading, onRefreshFonts: refreshFonts, emailsData: emailsData, emailsLoading: emailsLoading, onRefreshEmails: refreshEmails, resourceData: resourceData, onRefreshResource: refreshResource, configData: configData, onConfigSaved: setConfigData, galleryPicker: galleryPicker, fontLibraryPicker: fontLibraryPicker })] })] }));
 }