@vertebr/react 0.8.1 → 0.9.0

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

@@ -0,0 +1,12 @@
+import type { CatalogAddon, ConfigResponse, VertebrClient } from "@vertebr/client";
+import type { AdminContentProps } from "./AdminContent";
+export type AddonEditorProps = {
+    client: VertebrClient;
+    addon: CatalogAddon;
+    configData: ConfigResponse;
+    onConfigSaved: (next: ConfigResponse) => void;
+    galleryPicker: AdminContentProps["galleryPicker"];
+    fontLibraryPicker: AdminContentProps["fontLibraryPicker"];
+};
+export declare function AddonEditor({ client, addon, configData, onConfigSaved, galleryPicker, fontLibraryPicker, }: AddonEditorProps): import("react").JSX.Element;
+//# sourceMappingURL=AddonEditor.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AddonEditor.d.ts","sourceRoot":"","sources":["../../../src/components/admin/AddonEditor.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAInF,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAExD,MAAM,MAAM,gBAAgB,GAAG;IAC7B,MAAM,EAAE,aAAa,CAAC;IACtB,KAAK,EAAE,YAAY,CAAC;IACpB,UAAU,EAAE,cAAc,CAAC;IAC3B,aAAa,EAAE,CAAC,IAAI,EAAE,cAAc,KAAK,IAAI,CAAC;IAC9C,aAAa,EAAE,iBAAiB,CAAC,eAAe,CAAC,CAAC;IAClD,iBAAiB,EAAE,iBAAiB,CAAC,mBAAmB,CAAC,CAAC;CAC3D,CAAC;AAEF,wBAAgB,WAAW,CAAC,EAC1B,MAAM,EACN,KAAK,EACL,UAAU,EACV,aAAa,EACb,aAAa,EACb,iBAAiB,GAClB,EAAE,gBAAgB,+BAsFlB"}

package/dist/components/admin/AddonEditor.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo, useState } from "react";
+import { ConfigForm } from "../config/ConfigForm";
+import { addonCategoryLabel } from "./addonLabels";
+import { PagePreviewPane } from "./PagePreviewPane";
+export function AddonEditor({ client, addon, configData, onConfigSaved, galleryPicker, fontLibraryPicker, }) {
+    const [draft, setDraft] = useState(configData.value);
+    const onChange = useCallback((value) => {
+        setDraft(value);
+    }, []);
+    const enabled = Boolean(draft?.enabled ?? configData.value.enabled);
+    const previewPath = addon.previewPath;
+    const showPreview = Boolean(previewPath);
+    const previewDraft = useMemo(() => {
+        const base = draft ?? configData.value;
+        if (!showPreview)
+            return base;
+        return { ...base, enabled: true };
+    }, [configData.value, draft, showPreview]);
+    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-addon-editor", children: [_jsxs("div", { className: "vertebr-addon-editor-head", "data-category": addon.category ?? "engagement", children: [_jsxs("div", { className: "vertebr-addon-editor-head-start", children: [_jsx("span", { className: "vertebr-addon-category", "data-category": addon.category ?? "engagement", children: addonCategoryLabel(addon.category) }), _jsxs("span", { className: "vertebr-addon-status", "data-enabled": enabled ? "true" : "false", children: [_jsx("span", { className: "vertebr-addon-status-dot", "aria-hidden": "true" }), enabled ? "Enabled on storefront" : "Disabled"] })] }), previewPath ? (_jsxs("div", { className: "vertebr-addon-editor-head-end", children: [_jsx("span", { className: "vertebr-addon-preview-label", children: "Live preview" }), _jsx("code", { className: "vertebr-addon-preview-path", children: previewPath })] })) : null] }), showPreview && previewPath ? (_jsxs("div", { className: "vertebr-page-editor vertebr-addon-page-editor", children: [_jsx("div", { className: "vertebr-page-editor-form", children: form }), _jsx(PagePreviewPane, { previewPath: previewPath, controlId: configData.id, draft: previewDraft, previewKind: "addon" })] })) : (_jsxs("div", { className: "vertebr-addon-editor-form-only", children: [form, _jsxs("div", { className: "vertebr-addon-preview-missing", children: [_jsx("strong", { children: "Live preview unavailable" }), _jsxs("p", { children: ["Register a ", _jsx("code", { children: "previewPath" }), " on this add-on so Vertebr can iframe your storefront while you edit."] })] })] }))] }));
+}

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

@@ -0,0 +1,8 @@
+import type { CatalogResponse, VertebrClient } from "@vertebr/client";
+export type AddonOverviewProps = {
+    client: VertebrClient;
+    catalog: CatalogResponse;
+    onSelectAddon: (id: string) => void;
+};
+export declare function AddonOverview({ client, catalog, onSelectAddon }: AddonOverviewProps): import("react").JSX.Element;
+//# sourceMappingURL=AddonOverview.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AddonOverview.d.ts","sourceRoot":"","sources":["../../../src/components/admin/AddonOverview.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAgB,eAAe,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAIpF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,MAAM,EAAE,aAAa,CAAC;IACtB,OAAO,EAAE,eAAe,CAAC;IACzB,aAAa,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACrC,CAAC;AAyFF,wBAAgB,aAAa,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,aAAa,EAAE,EAAE,kBAAkB,+BAwKnF"}

package/dist/components/admin/AddonOverview.js

@@ -0,0 +1,125 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { AddonPreviewThumb } from "./AddonPreviewThumb";
+import { addonCategoryHint, addonCategoryLabel } from "./addonLabels";
+const CATEGORY_ORDER = ["product", "engagement", "sales"];
+function groupAddons(addons) {
+    const buckets = new Map();
+    for (const addon of addons) {
+        const key = addon.category ?? "other";
+        if (!buckets.has(key))
+            buckets.set(key, []);
+        buckets.get(key).push(addon);
+    }
+    const groups = [];
+    for (const category of CATEGORY_ORDER) {
+        const items = buckets.get(category);
+        if (!items?.length)
+            continue;
+        groups.push({
+            category,
+            label: addonCategoryLabel(category),
+            hint: addonCategoryHint(category),
+            items,
+        });
+        buckets.delete(category);
+    }
+    const other = buckets.get("other");
+    if (other?.length) {
+        groups.push({
+            category: "other",
+            label: "Add-ons",
+            hint: "Optional storefront features",
+            items: other,
+        });
+    }
+    return groups;
+}
+function AddonScrollRow({ children }) {
+    const wrapRef = useRef(null);
+    const scrollRef = useRef(null);
+    useEffect(() => {
+        const el = scrollRef.current;
+        const wrap = wrapRef.current;
+        if (!el || !wrap)
+            return;
+        const update = () => {
+            const canLeft = el.scrollLeft > 4;
+            const canRight = el.scrollLeft + el.clientWidth < el.scrollWidth - 4;
+            wrap.classList.toggle("can-scroll-left", canLeft);
+            wrap.classList.toggle("can-scroll-right", canRight);
+        };
+        update();
+        el.addEventListener("scroll", update, { passive: true });
+        const observer = new ResizeObserver(update);
+        observer.observe(el);
+        return () => {
+            el.removeEventListener("scroll", update);
+            observer.disconnect();
+        };
+    }, [children]);
+    return (_jsx("div", { ref: wrapRef, className: "vertebr-addon-scroll-wrap", children: _jsx("div", { ref: scrollRef, className: "vertebr-addon-scroll", tabIndex: 0, children: children }) }));
+}
+export function AddonOverview({ client, catalog, onSelectAddon }) {
+    const addons = catalog.addons ?? [];
+    const [states, setStates] = useState({});
+    const [loading, setLoading] = useState(true);
+    useEffect(() => {
+        let cancelled = false;
+        void (async () => {
+            setLoading(true);
+            const next = {};
+            await Promise.all(addons.map(async (addon) => {
+                try {
+                    const config = await client.getConfig(addon.id);
+                    next[addon.id] = {
+                        enabled: Boolean(config.value.enabled),
+                        value: config.value,
+                    };
+                }
+                catch {
+                    next[addon.id] = { enabled: false, value: {} };
+                }
+            }));
+            if (!cancelled) {
+                setStates(next);
+                setLoading(false);
+            }
+        })();
+        return () => {
+            cancelled = true;
+        };
+    }, [addons, client]);
+    const groups = useMemo(() => groupAddons(addons), [addons]);
+    const stats = useMemo(() => {
+        let enabled = 0;
+        const byCategory = {};
+        for (const addon of addons) {
+            const category = addon.category ?? "other";
+            byCategory[category] = (byCategory[category] ?? 0) + 1;
+            if (states[addon.id]?.enabled)
+                enabled += 1;
+        }
+        return {
+            total: addons.length,
+            enabled,
+            products: byCategory.product ?? 0,
+            engagement: byCategory.engagement ?? 0,
+            sales: byCategory.sales ?? 0,
+        };
+    }, [addons, states]);
+    if (!addons.length) {
+        return (_jsx("div", { className: "vertebr-addon-overview", children: _jsx("div", { className: "vertebr-empty", children: "No add-ons registered for this host." }) }));
+    }
+    return (_jsxs("div", { className: "vertebr-addon-overview", children: [_jsxs("header", { className: "vertebr-addon-overview-toolbar", children: [_jsx("div", { className: "vertebr-addon-overview-intro", children: _jsx("p", { children: "Optional storefront features grouped by purpose. Scroll each row to browse, then configure one to edit with a live shop preview." }) }), _jsxs("div", { className: "vertebr-addon-overview-stats", "aria-label": "Add-on summary", children: [_jsxs("div", { className: "vertebr-addon-stat", children: [_jsx("strong", { children: loading ? "—" : stats.enabled }), _jsx("span", { children: "Enabled" })] }), _jsxs("div", { className: "vertebr-addon-stat", children: [_jsx("strong", { children: stats.total }), _jsx("span", { children: "Total" })] }), _jsxs("div", { className: "vertebr-addon-stat", "data-category": "product", children: [_jsx("strong", { children: stats.products }), _jsx("span", { children: "Products" })] }), _jsxs("div", { className: "vertebr-addon-stat", "data-category": "engagement", children: [_jsx("strong", { children: stats.engagement }), _jsx("span", { children: "Engagement" })] }), _jsxs("div", { className: "vertebr-addon-stat", "data-category": "sales", children: [_jsx("strong", { children: stats.sales }), _jsx("span", { children: "Sales" })] })] })] }), groups.map((group) => (_jsxs("section", { className: "vertebr-addon-overview-section", "data-category": group.category, children: [_jsxs("div", { className: "vertebr-addon-section-head", children: [_jsxs("div", { className: "vertebr-addon-section-title", children: [_jsx("h3", { children: group.label }), _jsx("p", { children: group.hint })] }), _jsxs("span", { className: "vertebr-addon-section-count", children: [group.items.length, " add-on", group.items.length === 1 ? "" : "s"] })] }), _jsx(AddonScrollRow, { children: group.items.map((addon) => {
+                            const state = states[addon.id];
+                            const previewDraft = state
+                                ? { ...state.value, enabled: true }
+                                : { enabled: true };
+                            return (_jsxs("article", { className: "vertebr-addon-card", "data-category": addon.category ?? "engagement", children: [_jsx(AddonPreviewThumb, { addonId: addon.id, previewPath: addon.previewPath, draft: previewDraft, label: addon.label }), _jsxs("div", { className: "vertebr-addon-card-body", children: [_jsxs("div", { className: "vertebr-addon-card-head", children: [_jsx("h4", { children: addon.label }), _jsx("span", { className: "vertebr-addon-status", "data-enabled": loading
+                                                            ? undefined
+                                                            : state?.enabled
+                                                                ? "true"
+                                                                : "false", children: loading ? "…" : state?.enabled ? "On" : "Off" })] }), addon.description ? _jsx("p", { children: addon.description }) : null, _jsxs("div", { className: "vertebr-addon-card-foot", children: [addon.previewPath ? (_jsx("span", { className: "vertebr-addon-route", children: addon.previewPath })) : null, _jsx("button", { type: "button", className: "vertebr-btn vertebr-btn-primary", onClick: () => onSelectAddon(addon.id), children: "Configure" })] })] })] }, addon.id));
+                        }) })] }, group.category)))] }));
+}

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

@@ -0,0 +1,11 @@
+export type AddonPreviewThumbProps = {
+    addonId: string;
+    previewPath?: string;
+    draft?: Record<string, unknown> | null;
+    label?: string;
+};
+/**
+ * Small live host iframe for add-on overview cards.
+ */
+export declare function AddonPreviewThumb({ addonId, previewPath, draft, label, }: AddonPreviewThumbProps): import("react").JSX.Element;
+//# sourceMappingURL=AddonPreviewThumb.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AddonPreviewThumb.d.ts","sourceRoot":"","sources":["../../../src/components/admin/AddonPreviewThumb.tsx"],"names":[],"mappings":"AAOA,MAAM,MAAM,sBAAsB,GAAG;IACnC,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI,CAAC;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,OAAO,EACP,WAAW,EACX,KAAK,EACL,KAAK,GACN,EAAE,sBAAsB,+BA6ExB"}

package/dist/components/admin/AddonPreviewThumb.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { buildVertebrPreviewUrl, postVertebrPreviewDraft, subscribeVertebrPreviewReady, } from "@vertebr/client";
+/**
+ * Small live host iframe for add-on overview cards.
+ */
+export function AddonPreviewThumb({ addonId, previewPath, draft, label, }) {
+    const iframeRef = useRef(null);
+    const draftRef = useRef(draft);
+    const [ready, setReady] = useState(false);
+    const [error, setError] = useState(false);
+    draftRef.current = draft;
+    const src = useMemo(() => {
+        if (!previewPath)
+            return null;
+        return buildVertebrPreviewUrl(previewPath, { controlId: addonId });
+    }, [addonId, previewPath]);
+    const pushDraft = () => {
+        const win = iframeRef.current?.contentWindow;
+        const value = draftRef.current;
+        if (!win || !value)
+            return;
+        postVertebrPreviewDraft(win, addonId, value);
+    };
+    useEffect(() => {
+        setReady(false);
+        setError(false);
+    }, [src]);
+    useEffect(() => {
+        if (!src)
+            return;
+        return subscribeVertebrPreviewReady((source) => {
+            const win = iframeRef.current?.contentWindow;
+            if (!win || source !== win)
+                return;
+            setReady(true);
+            pushDraft();
+        });
+    }, [src]);
+    useEffect(() => {
+        if (!ready || !draft)
+            return;
+        pushDraft();
+    }, [draft, ready]);
+    if (!previewPath) {
+        return (_jsx("div", { className: "vertebr-addon-thumb vertebr-addon-thumb-empty", children: _jsx("span", { children: "No preview route" }) }));
+    }
+    return (_jsxs("div", { className: "vertebr-addon-thumb", "data-ready": ready ? "true" : undefined, "aria-label": label ? `Preview ${label}` : `Preview ${addonId}`, children: [_jsx("div", { className: "vertebr-addon-thumb-scale", children: error ? (_jsx("div", { className: "vertebr-addon-thumb-fallback", children: "Preview unavailable" })) : (_jsx("iframe", { ref: iframeRef, title: label ? `Preview ${label}` : `Preview ${addonId}`, src: src ?? undefined, tabIndex: -1, loading: "lazy", onLoad: () => {
+                        setReady(true);
+                        pushDraft();
+                    }, onError: () => setError(true) })) }), !ready && !error ? (_jsx("div", { className: "vertebr-addon-thumb-loading", children: "Loading preview\u2026" })) : null] }));
+}

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

@@ -0,0 +1,9 @@
+import type { CatalogResponse } from "@vertebr/client";
+import type { Selection } from "./types";
+export type AdminCommandPaletteProps = {
+    catalog: CatalogResponse;
+    onClose: () => void;
+    onSelect: (selection: Selection) => void;
+};
+export declare function AdminCommandPalette({ catalog, onClose, onSelect, }: AdminCommandPaletteProps): import("react").JSX.Element;
+//# sourceMappingURL=AdminCommandPalette.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AdminCommandPalette.d.ts","sourceRoot":"","sources":["../../../src/components/admin/AdminCommandPalette.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAOvD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEzC,MAAM,MAAM,wBAAwB,GAAG;IACrC,OAAO,EAAE,eAAe,CAAC;IACzB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,CAAC,SAAS,EAAE,SAAS,KAAK,IAAI,CAAC;CAC1C,CAAC;AAEF,wBAAgB,mBAAmB,CAAC,EAClC,OAAO,EACP,OAAO,EACP,QAAQ,GACT,EAAE,wBAAwB,+BAqI1B"}

package/dist/components/admin/AdminCommandPalette.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { IconSearch } from "../ui/icons";
+import { adminSearchItems, filterAdminSearchItems, } from "./adminSearch";
+export function AdminCommandPalette({ catalog, onClose, onSelect, }) {
+    const inputRef = useRef(null);
+    const [query, setQuery] = useState("");
+    const [activeIndex, setActiveIndex] = useState(0);
+    const items = useMemo(() => adminSearchItems(catalog), [catalog]);
+    const results = useMemo(() => filterAdminSearchItems(items, query), [items, query]);
+    useEffect(() => {
+        inputRef.current?.focus();
+    }, []);
+    useEffect(() => {
+        setActiveIndex(0);
+    }, [query]);
+    useEffect(() => {
+        const onKeyDown = (event) => {
+            if (event.key === "Escape") {
+                event.preventDefault();
+                onClose();
+                return;
+            }
+            if (results.length === 0)
+                return;
+            if (event.key === "ArrowDown") {
+                event.preventDefault();
+                setActiveIndex((current) => (current + 1) % results.length);
+            }
+            else if (event.key === "ArrowUp") {
+                event.preventDefault();
+                setActiveIndex((current) => (current - 1 + results.length) % results.length);
+            }
+            else if (event.key === "Enter") {
+                event.preventDefault();
+                const item = results[activeIndex];
+                if (item) {
+                    onSelect(item.selection);
+                    onClose();
+                }
+            }
+        };
+        window.addEventListener("keydown", onKeyDown);
+        return () => window.removeEventListener("keydown", onKeyDown);
+    }, [activeIndex, onClose, onSelect, results]);
+    const pick = (item) => {
+        onSelect(item.selection);
+        onClose();
+    };
+    const grouped = useMemo(() => {
+        const map = new Map();
+        for (const item of results) {
+            const list = map.get(item.group) ?? [];
+            list.push(item);
+            map.set(item.group, list);
+        }
+        return map;
+    }, [results]);
+    let resultIndex = -1;
+    return (_jsx("div", { className: "vertebr-command-backdrop", role: "presentation", onMouseDown: (event) => {
+            if (event.target === event.currentTarget)
+                onClose();
+        }, children: _jsxs("div", { className: "vertebr-command", role: "dialog", "aria-modal": "true", "aria-label": "Search admin", children: [_jsxs("div", { className: "vertebr-command-input-wrap", children: [_jsx(IconSearch, {}), _jsx("input", { ref: inputRef, className: "vertebr-command-input", type: "search", placeholder: "Search pages, resources, settings\u2026", value: query, onChange: (event) => setQuery(event.target.value), autoComplete: "off", spellCheck: false }), _jsx("kbd", { children: "esc" })] }), _jsx("div", { className: "vertebr-command-results", role: "listbox", children: results.length === 0 ? (_jsx("div", { className: "vertebr-command-empty", children: "No matches found." })) : ([...grouped.entries()].map(([group, groupItems]) => (_jsxs("div", { className: "vertebr-command-group", children: [_jsx("div", { className: "vertebr-command-group-label", children: group }), groupItems.map((item) => {
+                                resultIndex += 1;
+                                const index = resultIndex;
+                                return (_jsxs("button", { type: "button", className: "vertebr-command-item", role: "option", "aria-selected": index === activeIndex, "data-active": index === activeIndex || undefined, onMouseEnter: () => setActiveIndex(index), onClick: () => pick(item), children: [_jsx("span", { className: "vertebr-command-item-label", children: item.label }), item.hint ? (_jsx("span", { className: "vertebr-command-item-hint", children: item.hint })) : null] }, item.id));
+                            })] }, group)))) })] }) }));
+}

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":"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"}
+{"version":3,"file":"AdminContent.d.ts","sourceRoot":"","sources":["../../../src/components/admin/AdminContent.tsx"],"names":[],"mappings":"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"}

package/dist/components/admin/AdminContent.js

@@ -6,7 +6,10 @@ import { FontLibraryBoard } from "../fonts/FontLibraryBoard";
 import { GalleryBoard } from "../gallery/GalleryBoard";
 import { MetricsBoard } from "../metrics/MetricsBoard";
 import { ResourcePanel } from "../resources/ResourceTable";
+import { AddonEditor } from "./AddonEditor";
+import { AddonOverview } from "./AddonOverview";
 import { PagePreviewPane } from "./PagePreviewPane";
+import { AdminSyncPage } from "./AdminSyncPage";
 function ConfigEditor({ client, configData, isPageSelection, previewPath, onConfigSaved, galleryPicker, fontLibraryPicker, }) {
     const [draft, setDraft] = useState(configData.value);
     const showPreview = Boolean(previewPath);
@@ -27,7 +30,7 @@ export function AdminContent({ client, catalog, selection, onSelectionChange, au
                             ? "Loading…"
                             : "Unable to load catalog." }) }) }));
     }
-    return (_jsx("div", { className: "vertebr-content", children: _jsxs("section", { className: "vertebr-panel", children: [selection?.kind === "overview" ? (_jsx(MetricsBoard, { label: metricsData?.label ?? catalog.metrics?.label, windowLabel: metricsData?.windowLabel, compareLabel: metricsData?.compareLabel, metrics: metricsData?.metrics ?? [], charts: metricsData?.charts ?? [], range: metricsRange, onRangeChange: onMetricsRangeChange, loading: metricsLoading, onRefresh: () => void onRefreshMetrics() })) : 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 onRefreshGallery(), onUpload: async (files) => {
+    return (_jsx("div", { className: "vertebr-content", children: _jsxs("section", { className: "vertebr-panel", children: [selection?.kind === "overview" ? (_jsx(MetricsBoard, { label: metricsData?.label ?? catalog.metrics?.label, windowLabel: metricsData?.windowLabel, compareLabel: metricsData?.compareLabel, metrics: metricsData?.metrics ?? [], charts: metricsData?.charts ?? [], range: metricsRange, onRangeChange: onMetricsRangeChange, loading: metricsLoading, onRefresh: () => void onRefreshMetrics() })) : null, selection?.kind === "sync" ? (_jsx(AdminSyncPage, { client: client, catalog: catalog })) : 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 onRefreshGallery(), onUpload: async (files) => {
                         if (files.length === 1 && files[0]) {
                             await client.uploadGalleryFile(files[0]);
                         }
@@ -135,6 +138,11 @@ export function AdminContent({ client, catalog, selection, onSelectionChange, au
                             const result = await client.uploadResourceFiles(resourceData.id, field, files);
                             return result.files;
                         }
-                        : 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] }) }));
+                        : undefined, ...galleryPicker })) : null, selection?.kind === "addons" ? (_jsx(AddonOverview, { client: client, catalog: catalog, onSelectAddon: (id) => onSelectionChange?.({ kind: "addon", id }) })) : 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, selection?.kind === "addon" && configData ? ((() => {
+                    const addon = catalog.addons?.find((item) => item.id === configData.id);
+                    if (!addon)
+                        return null;
+                    return (_jsx(AddonEditor, { client: client, addon: addon, configData: configData, onConfigSaved: onConfigSaved, galleryPicker: galleryPicker, fontLibraryPicker: fontLibraryPicker }, configData.id));
+                })()) : null] }) }));
 }

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

@@ -1,16 +1,15 @@
-import type { AdminEnvironment } from "@vertebr/client";
 import type { Breadcrumb } from "./breadcrumbs";
 import type { Selection } from "./types";
 export type AdminHeaderProps = {
     activeLabel: string;
-    activeEnv?: AdminEnvironment;
     catalogLoaded: boolean;
     authRequired: boolean;
     selection: Selection;
     isPageSelection: boolean;
     hasPagePreview?: boolean;
+    selectionDescription?: string;
     error: string | null;
     breadcrumbs: Breadcrumb[];
 };
-export declare function AdminHeader({ activeLabel, activeEnv, catalogLoaded, authRequired, selection, isPageSelection, hasPagePreview, error, breadcrumbs, }: AdminHeaderProps): import("react").JSX.Element;
+export declare function AdminHeader({ activeLabel, catalogLoaded, authRequired, selection, isPageSelection, hasPagePreview, selectionDescription, error, breadcrumbs, }: 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,UAAU,EAAE,MAAM,eAAe,CAAC;AAChD,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,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,WAAW,EAAE,UAAU,EAAE,CAAC;CAC3B,CAAC;AAiDF,wBAAgB,WAAW,CAAC,EAC1B,WAAW,EACX,SAAS,EACT,aAAa,EACb,YAAY,EACZ,SAAS,EACT,eAAe,EACf,cAAc,EACd,KAAK,EACL,WAAW,GACZ,EAAE,gBAAgB,+BA6ClB"}
+{"version":3,"file":"AdminHeader.d.ts","sourceRoot":"","sources":["../../../src/components/admin/AdminHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEzC,MAAM,MAAM,gBAAgB,GAAG;IAC7B,WAAW,EAAE,MAAM,CAAC;IACpB,aAAa,EAAE,OAAO,CAAC;IACvB,YAAY,EAAE,OAAO,CAAC;IACtB,SAAS,EAAE,SAAS,CAAC;IACrB,eAAe,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,WAAW,EAAE,UAAU,EAAE,CAAC;CAC3B,CAAC;AAyDF,wBAAgB,WAAW,CAAC,EAC1B,WAAW,EACX,aAAa,EACb,YAAY,EACZ,SAAS,EACT,eAAe,EACf,cAAc,EACd,oBAAoB,EACpB,KAAK,EACL,WAAW,GACZ,EAAE,gBAAgB,+BAoClB"}

package/dist/components/admin/AdminHeader.js

@@ -1,11 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function subtitle({ catalogLoaded, authRequired, selection, isPageSelection, hasPagePreview, }) {
+function subtitle({ catalogLoaded, authRequired, selection, isPageSelection, hasPagePreview, selectionDescription, }) {
     if (!catalogLoaded && authRequired) {
         return "Provide an access token to load this environment.";
     }
+    if (selectionDescription) {
+        return selectionDescription;
+    }
     if (selection?.kind === "overview") {
         return "Commerce, growth, and catalog for the selected environment.";
     }
+    if (selection?.kind === "sync") {
+        return "Copy selected content between environments.";
+    }
     if (selection?.kind === "gallery") {
         return "Browse and upload shared media assets.";
     }
@@ -32,12 +38,13 @@ function subtitle({ catalogLoaded, authRequired, selection, isPageSelection, has
     }
     return "Select a panel.";
 }
-export function AdminHeader({ activeLabel, activeEnv, catalogLoaded, authRequired, selection, isPageSelection, hasPagePreview, error, breadcrumbs, }) {
-    return (_jsxs("header", { className: "vertebr-header", children: [_jsxs("div", { children: [breadcrumbs.length > 1 ? (_jsx("ol", { className: "vertebr-breadcrumbs", children: breadcrumbs.map((crumb, index) => (_jsx("li", { children: index === breadcrumbs.length - 1 ? (_jsx("strong", { children: crumb.label })) : (crumb.label) }, `${crumb.label}-${index}`))) })) : null, _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({
+export function AdminHeader({ activeLabel, catalogLoaded, authRequired, selection, isPageSelection, hasPagePreview, selectionDescription, error, breadcrumbs, }) {
+    return (_jsxs("header", { className: "vertebr-header", children: [_jsxs("div", { children: [breadcrumbs.length > 1 ? (_jsx("ol", { className: "vertebr-breadcrumbs", children: breadcrumbs.map((crumb, index) => (_jsx("li", { children: index === breadcrumbs.length - 1 ? (_jsx("strong", { children: crumb.label })) : (crumb.label) }, `${crumb.label}-${index}`))) })) : null, _jsx("h1", { children: activeLabel }), _jsx("p", { children: subtitle({
                             catalogLoaded,
                             authRequired,
                             selection,
                             isPageSelection,
                             hasPagePreview,
+                            selectionDescription,
                         }) })] }), error ? (_jsx("span", { className: "vertebr-status", "data-tone": "danger", children: error })) : null] }));
 }

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

@@ -0,0 +1,5 @@
+export type AdminPoweredByProps = {
+    collapsed?: boolean;
+};
+export declare function AdminPoweredBy({ collapsed }: AdminPoweredByProps): import("react").JSX.Element;
+//# sourceMappingURL=AdminPoweredBy.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AdminPoweredBy.d.ts","sourceRoot":"","sources":["../../../src/components/admin/AdminPoweredBy.tsx"],"names":[],"mappings":"AAEA,MAAM,MAAM,mBAAmB,GAAG;IAChC,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,wBAAgB,cAAc,CAAC,EAAE,SAAS,EAAE,EAAE,mBAAmB,+BAwBhE"}

package/dist/components/admin/AdminPoweredBy.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const VERTEBR_URL = "https://github.com/yaboijams/vertebr";
+export function AdminPoweredBy({ collapsed }) {
+    if (collapsed) {
+        return (_jsx("div", { className: "vertebr-powered-by", "data-collapsed": "true", children: _jsx("a", { href: VERTEBR_URL, target: "_blank", rel: "noopener noreferrer", title: "Powered by Vertebr", "aria-label": "Powered by Vertebr", children: "V" }) }));
+    }
+    return (_jsx("div", { className: "vertebr-powered-by", children: _jsxs("a", { href: VERTEBR_URL, target: "_blank", rel: "noopener noreferrer", children: ["Powered by ", _jsx("strong", { children: "Vertebr" })] }) }));
+}

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

@@ -1 +1 @@
-{"version":3,"file":"AdminSidebar.d.ts","sourceRoot":"","sources":["../../../src/components/admin/AdminSidebar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAgB,eAAe,EAAE,MAAM,SAAS,CAAC;AAG7D,MAAM,MAAM,iBAAiB,GAAG;IAC9B,SAAS,EAAE,eAAe,EAAE,CAAC;IAC7B,SAAS,EAAE,OAAO,CAAC;CACpB,CAAC;AAwFF,wBAAgB,YAAY,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,EAAE,iBAAiB,+BAuBvE"}
+{"version":3,"file":"AdminSidebar.d.ts","sourceRoot":"","sources":["../../../src/components/admin/AdminSidebar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAgB,eAAe,EAAE,MAAM,SAAS,CAAC;AAG7D,MAAM,MAAM,iBAAiB,GAAG;IAC9B,SAAS,EAAE,eAAe,EAAE,CAAC;IAC7B,SAAS,EAAE,OAAO,CAAC;CACpB,CAAC;AA6FF,wBAAgB,YAAY,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,EAAE,iBAAiB,+BAwBvE"}

package/dist/components/admin/AdminSidebar.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
+import { AdminPoweredBy } from "./AdminPoweredBy";
 import { iconForNavKey } from "../ui/icons";
 function SidebarNavItem({ item, collapsed, }) {
     const hasChildren = Boolean(item.children?.length);
@@ -11,17 +12,18 @@ function SidebarNavItem({ item, collapsed, }) {
         if (sectionActive)
             setOpen(true);
     }, [sectionActive]);
-    if (!hasChildren) {
-        return (_jsxs("button", { type: "button", "data-active": item.active, title: collapsed ? item.label : undefined, onClick: item.onSelect, children: [_jsx(Icon, { className: "vertebr-nav-icon" }), _jsx("span", { className: "vertebr-nav-label-text", children: item.label })] }));
+    if (!hasChildren || collapsed) {
+        const active = hasChildren ? sectionActive : item.active;
+        return (_jsxs("button", { type: "button", "data-active": active || undefined, title: collapsed ? item.label : undefined, onClick: item.onSelect, children: [_jsx(Icon, { className: "vertebr-nav-icon" }), _jsx("span", { className: "vertebr-nav-label-text", children: item.label })] }));
     }
     return (_jsxs("div", { className: "vertebr-nav-item", "data-has-children": "true", "data-open": open || undefined, children: [_jsxs("div", { className: "vertebr-nav-parent", children: [_jsxs("button", { type: "button", className: "vertebr-nav-parent-label", "data-active": sectionActive && !childActive, "data-section": sectionActive || undefined, title: collapsed ? item.label : undefined, onClick: () => {
                             setOpen(true);
                             item.onSelect();
-                        }, children: [_jsx(Icon, { className: "vertebr-nav-icon" }), _jsx("span", { className: "vertebr-nav-label-text", children: item.label })] }), !collapsed ? (_jsx("button", { type: "button", className: "vertebr-nav-parent-toggle", "aria-label": open ? `Collapse ${item.label}` : `Expand ${item.label}`, "aria-expanded": open, onClick: () => setOpen((prev) => !prev), children: _jsx("span", { "aria-hidden": "true", children: open ? "▾" : "▸" }) })) : null] }), open && !collapsed ? (_jsx("div", { className: "vertebr-nav-sub", role: "group", children: item.children.map((child) => (_jsx("button", { type: "button", className: "vertebr-nav-subitem", "data-active": child.active, onClick: () => {
-                        setOpen(true);
-                        child.onSelect();
-                    }, children: child.label }, child.key))) })) : null] }));
+                        }, children: [_jsx(Icon, { className: "vertebr-nav-icon" }), _jsx("span", { className: "vertebr-nav-label-text", children: item.label })] }), !collapsed ? (_jsx("button", { type: "button", className: "vertebr-nav-parent-toggle", "aria-label": open ? `Collapse ${item.label}` : `Expand ${item.label}`, "aria-expanded": open, onClick: () => setOpen((prev) => !prev), children: _jsx("span", { className: "vertebr-nav-chevron", "aria-hidden": "true", children: "\u25B8" }) })) : null] }), _jsx("div", { className: "vertebr-nav-sub-wrap", "data-open": open ? "true" : undefined, children: _jsx("div", { className: "vertebr-nav-sub-inner", children: _jsx("div", { className: "vertebr-nav-sub", role: "group", children: item.children.map((child) => (_jsx("button", { type: "button", className: "vertebr-nav-subitem", "data-active": child.active, onClick: () => {
+                                setOpen(true);
+                                child.onSelect();
+                            }, children: child.label }, child.key))) }) }) })] }));
 }
 export function AdminSidebar({ navGroups, collapsed }) {
-    return (_jsx("aside", { className: "vertebr-sidebar", "data-collapsed": collapsed || undefined, children: _jsx("div", { className: "vertebr-sidebar-top", children: _jsx("nav", { className: "vertebr-nav", children: navGroups.map((group) => (_jsxs("div", { className: "vertebr-nav-group", children: [!collapsed ? (_jsx("div", { className: "vertebr-nav-label", children: group.label })) : null, group.items.map((item) => (_jsx(SidebarNavItem, { item: item, collapsed: collapsed }, item.key)))] }, group.label))) }) }) }));
+    return (_jsxs("aside", { className: "vertebr-sidebar", "data-collapsed": collapsed || undefined, children: [_jsx("div", { className: "vertebr-sidebar-top", children: _jsx("nav", { className: "vertebr-nav", children: navGroups.map((group) => (_jsxs("div", { className: "vertebr-nav-group", children: [_jsx("div", { className: "vertebr-nav-label", children: group.label }), group.items.map((item) => (_jsx(SidebarNavItem, { item: item, collapsed: collapsed }, item.key)))] }, group.label))) }) }), _jsx("div", { className: "vertebr-sidebar-bottom", children: _jsx(AdminPoweredBy, { collapsed: collapsed }) })] }));
 }

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

@@ -0,0 +1,7 @@
+import type { CatalogResponse, VertebrClient } from "@vertebr/client";
+export type AdminSyncPageProps = {
+    client: VertebrClient;
+    catalog: CatalogResponse;
+};
+export declare function AdminSyncPage({ client, catalog }: AdminSyncPageProps): import("react").JSX.Element;
+//# sourceMappingURL=AdminSyncPage.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AdminSyncPage.d.ts","sourceRoot":"","sources":["../../../src/components/admin/AdminSyncPage.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAEV,eAAe,EAGf,aAAa,EACd,MAAM,iBAAiB,CAAC;AAOzB,MAAM,MAAM,kBAAkB,GAAG;IAC/B,MAAM,EAAE,aAAa,CAAC;IACtB,OAAO,EAAE,eAAe,CAAC;CAC1B,CAAC;AAiDF,wBAAgB,aAAa,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,kBAAkB,+BA2VpE"}