@vertebr/react 0.8.0 → 0.9.0

package/dist/components/admin/AdminSyncPage.js

@@ -0,0 +1,169 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { EnvMultiSelect, EnvFlowBadge } from "../env/EnvMultiSelect";
+import { EnvSelect } from "../env/EnvSelect";
+import { useToast } from "../../hooks/useToast";
+import { Badge, Card } from "../ui/primitives";
+import { IconSync } from "../ui/icons";
+function envById(environments, id) {
+    return environments.find((env) => env.id === id);
+}
+function groupTargets(catalog) {
+    const targets = catalog.sync?.targets ?? [];
+    const groups = new Map();
+    for (const target of targets) {
+        const group = target.group ?? "Content";
+        const list = groups.get(group) ?? [];
+        list.push(target);
+        groups.set(group, list);
+    }
+    return groups;
+}
+function statusTone(status) {
+    if (status === "error")
+        return "danger";
+    if (status === "changed" || status === "new")
+        return "warn";
+    if (status === "unchanged")
+        return "ok";
+    return "neutral";
+}
+function statusLabel(status) {
+    switch (status) {
+        case "changed":
+            return "Changes";
+        case "new":
+            return "New";
+        case "unchanged":
+            return "Match";
+        case "missing":
+            return "Missing";
+        case "skipped":
+            return "Skipped";
+        case "error":
+            return "Error";
+        default:
+            return status;
+    }
+}
+export function AdminSyncPage({ client, catalog }) {
+    const sync = catalog.sync;
+    const { push } = useToast();
+    const environments = catalog.environments;
+    const [fromEnv, setFromEnv] = useState(() => sync?.defaultFrom ?? catalog.defaultEnvironment);
+    const [toEnv, setToEnv] = useState(() => {
+        const defaults = sync?.defaultTo ?? [];
+        const from = sync?.defaultFrom ?? catalog.defaultEnvironment;
+        return defaults.filter((id) => id !== from);
+    });
+    const [selectedTargets, setSelectedTargets] = useState(() => (sync?.targets ?? [])
+        .filter((target) => target.defaultSelected)
+        .map((target) => target.id));
+    const [plan, setPlan] = useState(null);
+    const [planLoading, setPlanLoading] = useState(false);
+    const [running, setRunning] = useState(false);
+    const [error, setError] = useState(null);
+    const fromEnvironment = envById(environments, fromEnv);
+    const toEnvironments = useMemo(() => toEnv
+        .map((id) => envById(environments, id))
+        .filter((env) => Boolean(env)), [environments, toEnv]);
+    const targetGroups = useMemo(() => groupTargets(catalog), [catalog]);
+    const hasTargets = (sync?.targets.length ?? 0) > 0;
+    const refreshPlan = useCallback(async () => {
+        if (!hasTargets || toEnv.length === 0) {
+            setPlan(null);
+            return;
+        }
+        setPlanLoading(true);
+        setError(null);
+        try {
+            const next = await client.getSyncPlan({
+                from: fromEnv,
+                to: toEnv,
+                targets: selectedTargets,
+            });
+            setPlan(next);
+        }
+        catch (err) {
+            setPlan(null);
+            setError(err instanceof Error ? err.message : "Could not load sync preview");
+        }
+        finally {
+            setPlanLoading(false);
+        }
+    }, [client, fromEnv, toEnv, selectedTargets, hasTargets]);
+    useEffect(() => {
+        void refreshPlan();
+    }, [refreshPlan]);
+    const toggleTarget = (targetId) => {
+        setSelectedTargets((current) => current.includes(targetId)
+            ? current.filter((id) => id !== targetId)
+            : [...current, targetId]);
+    };
+    const runSync = async () => {
+        if (!hasTargets || toEnv.length === 0 || selectedTargets.length === 0)
+            return;
+        const fromLabel = fromEnvironment?.label ?? fromEnv;
+        const toLabels = toEnvironments.map((env) => env.label).join(", ");
+        const targetLabels = (sync?.targets ?? [])
+            .filter((target) => selectedTargets.includes(target.id))
+            .map((target) => target.label)
+            .join(", ");
+        const dangerTargets = toEnvironments.some((env) => env.tone === "danger");
+        const confirmLines = [
+            `Copy from ${fromLabel} to ${toLabels}.`,
+            "",
+            `Targets: ${targetLabels}`,
+            "",
+            "This may overwrite content in the destination environment(s).",
+        ];
+        if (dangerTargets) {
+            confirmLines.push("", "You are writing to a production environment.");
+        }
+        if (!window.confirm(confirmLines.join("\n")))
+            return;
+        setRunning(true);
+        setError(null);
+        try {
+            const result = await client.runSync({
+                from: fromEnv,
+                to: toEnv,
+                targets: selectedTargets,
+            });
+            push(result.message ?? (result.ok ? "Sync complete" : "Sync finished with errors"), result.ok ? "ok" : "danger");
+            await refreshPlan();
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : "Sync failed");
+            push(err instanceof Error ? err.message : "Sync failed", "danger");
+        }
+        finally {
+            setRunning(false);
+        }
+    };
+    const planForTarget = (destinationId, targetId) => plan?.destinations
+        .find((item) => item.to === destinationId)
+        ?.targets.find((item) => item.id === targetId);
+    const syncSummary = toEnvironments.length > 0 && selectedTargets.length > 0
+        ? `Sync ${selectedTargets.length} item${selectedTargets.length === 1 ? "" : "s"} to ${toEnvironments.map((env) => env.label).join(", ")}`
+        : "Select destinations and content to sync";
+    if (!hasTargets) {
+        return (_jsx("div", { className: "vertebr-sync-page", children: _jsx("div", { className: "vertebr-sync-scroll", children: _jsxs("div", { className: "vertebr-empty-state vertebr-sync-empty", children: [_jsx("h3", { children: "Sync not configured" }), _jsxs("p", { children: ["This admin has multiple environments but no sync targets yet. Hosts register targets with ", _jsx("code", { children: "admin.sync()" }), "."] })] }) }) }));
+    }
+    return (_jsxs("div", { className: "vertebr-sync-page", children: [_jsxs("div", { className: "vertebr-sync-scroll", children: [_jsx(Card, { title: "Direction", children: _jsxs("div", { className: "vertebr-sync-direction", children: [_jsxs("div", { className: "vertebr-sync-direction-grid", children: [_jsxs("label", { className: "vertebr-sync-field", children: [_jsx("span", { className: "vertebr-sync-field-label", children: "From" }), _jsx(EnvSelect, { environments: environments, value: fromEnv, onChange: (next) => {
+                                                        setFromEnv(next);
+                                                        setToEnv((current) => current.filter((id) => id !== next));
+                                                    } })] }), _jsx("div", { className: "vertebr-sync-connector", "aria-hidden": "true", children: toEnvironments.length > 0 ? (toEnvironments.map((destination) => (_jsx("span", { className: "vertebr-sync-connector-arrow", children: "\u2192" }, destination.id)))) : (_jsx("span", { className: "vertebr-sync-connector-arrow", children: "\u2192" })) }), _jsxs("label", { className: "vertebr-sync-field", children: [_jsx("span", { className: "vertebr-sync-field-label", children: "To" }), _jsx(EnvMultiSelect, { environments: environments, value: toEnv, excludeId: fromEnv, onChange: setToEnv, placeholder: "Select one or more destinations" })] })] }), fromEnvironment && toEnvironments.length > 0 ? (_jsx("div", { className: "vertebr-sync-preview", "aria-label": "Sync direction", children: _jsxs("div", { className: "vertebr-sync-preview-flow", "data-dest-count": toEnvironments.length, children: [_jsxs("div", { className: "vertebr-sync-preview-col vertebr-sync-preview-col-from", children: [_jsx("span", { className: "vertebr-sync-preview-caption", children: "From" }), _jsx(EnvFlowBadge, { environment: fromEnvironment })] }), _jsx("div", { className: "vertebr-sync-preview-col vertebr-sync-preview-col-routes", children: toEnvironments.map((destination, index) => (_jsxs("div", { className: "vertebr-sync-preview-route", children: [_jsx("span", { className: "vertebr-sync-preview-arrow", "aria-hidden": "true", children: "\u2192" }), _jsxs("div", { className: "vertebr-sync-preview-col vertebr-sync-preview-col-to", children: [index === 0 ? (_jsx("span", { className: "vertebr-sync-preview-caption", children: "To" })) : (_jsx("span", { className: "vertebr-sync-preview-caption", "aria-hidden": "true", children: "\u00A0" })), _jsx(EnvFlowBadge, { environment: destination })] })] }, destination.id))) })] }) })) : (_jsx("p", { className: "vertebr-sync-direction-hint", children: "Pick a source environment and one or more destinations to preview changes." }))] }) }), _jsxs(Card, { title: "What to sync", children: [_jsxs("div", { className: "vertebr-sync-targets-head", children: [_jsx("p", { className: "vertebr-sync-targets-copy", children: "Review what will change in each destination before syncing." }), _jsx("button", { type: "button", className: "vertebr-btn vertebr-btn-quiet vertebr-sync-refresh", disabled: planLoading || toEnv.length === 0, onClick: () => void refreshPlan(), children: planLoading ? "Refreshing…" : "Refresh preview" })] }), [...targetGroups.entries()].map(([group, targets]) => (_jsxs("div", { className: "vertebr-sync-target-group", children: [_jsx("div", { className: "vertebr-sync-target-group-label", children: group }), _jsx("ul", { className: "vertebr-sync-target-list", children: targets.map((target) => {
+                                            const selected = selectedTargets.includes(target.id);
+                                            return (_jsx("li", { children: _jsxs("button", { type: "button", className: "vertebr-sync-target-row", "data-selected": selected || undefined, onClick: () => toggleTarget(target.id), children: [_jsx("span", { className: "vertebr-sync-target-check", "aria-hidden": "true", children: selected ? "✓" : "" }), _jsxs("span", { className: "vertebr-sync-target-main", children: [_jsx("span", { className: "vertebr-sync-target-title", children: target.label }), target.description ? (_jsx("span", { className: "vertebr-sync-target-desc", children: target.description })) : null] }), _jsx("span", { className: "vertebr-sync-target-badges", children: toEnvironments.length === 0 ? (_jsx(Badge, { children: "Choose destination" })) : planLoading ? (_jsx(Badge, { children: "Previewing\u2026" })) : (toEnvironments.map((destination) => {
+                                                                const item = planForTarget(destination.id, target.id);
+                                                                if (!item) {
+                                                                    return (_jsx(Badge, { children: destination.label }, destination.id));
+                                                                }
+                                                                return (_jsxs("span", { className: "vertebr-sync-target-dest", title: item.summary, children: [_jsxs(Badge, { tone: statusTone(item.status), children: [destination.label, ": ", statusLabel(item.status)] }), _jsx("span", { className: "vertebr-sync-target-summary", children: item.summary })] }, destination.id));
+                                                            })) })] }) }, target.id));
+                                        }) })] }, group)))] }), sync?.excluded.length ? (_jsx(Card, { title: "Never synced", subdued: true, children: _jsx("ul", { className: "vertebr-sync-excluded-list", children: sync.excluded.map((item) => (_jsxs("li", { children: [_jsx("span", { className: "vertebr-sync-excluded-name", children: item.label }), _jsx("span", { className: "vertebr-sync-excluded-reason", children: item.reason })] }, item.label))) }) })) : null, error ? _jsx("div", { className: "vertebr-banner", "data-tone": "danger", children: error }) : null] }), _jsxs("div", { className: "vertebr-savebar vertebr-sync-footer", children: [_jsx("div", { className: "vertebr-savebar-message", children: syncSummary }), _jsx("div", { className: "vertebr-savebar-actions", children: _jsxs("button", { type: "button", className: "vertebr-btn vertebr-btn-primary vertebr-sync-run-btn", disabled: running ||
+                                planLoading ||
+                                toEnv.length === 0 ||
+                                selectedTargets.length === 0, onClick: () => void runSync(), children: [_jsx(IconSync, {}), _jsx("span", { children: running ? "Syncing…" : "Sync selected" })] }) })] })] }));
+}

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

@@ -2,10 +2,11 @@ import type { AdminEnvironment } from "@vertebr/client";
 import type { VbTheme } from "../../hooks/useVertebrTheme";
 export type AdminTopBarProps = {
     brand: string;
+    hostName?: string;
+    hostLogoUrl?: string;
     envList: AdminEnvironment[];
     environment: string;
     onEnvironmentChange: (nextEnv: string) => void;
-    activeEnv?: AdminEnvironment;
     authUserLabel?: string;
     onSignOut?: () => void | Promise<void>;
     getAccessToken?: () => string | null | undefined | Promise<string | null | undefined>;
@@ -19,6 +20,9 @@ export type AdminTopBarProps = {
     onThemeChange: (theme: VbTheme) => void;
     sidebarCollapsed: boolean;
     onToggleSidebar: () => void;
+    syncEnabled?: boolean;
+    onOpenSync?: () => void;
+    onOpenSearch?: () => void;
 };
-export declare function AdminTopBar({ brand, envList, environment, onEnvironmentChange, activeEnv, authUserLabel, onSignOut, getAccessToken, authRequired, token, tokenDraft, onTokenDraftChange, onSaveToken, onClearToken, theme, onThemeChange, sidebarCollapsed, onToggleSidebar, }: AdminTopBarProps): import("react").JSX.Element;
+export declare function AdminTopBar({ brand, hostName, hostLogoUrl, envList, environment, onEnvironmentChange, authUserLabel, onSignOut, getAccessToken, authRequired, token, tokenDraft, onTokenDraftChange, onSaveToken, onClearToken, theme, onThemeChange, sidebarCollapsed, onToggleSidebar, syncEnabled, onOpenSync, onOpenSearch, }: AdminTopBarProps): import("react").JSX.Element;
 //# sourceMappingURL=AdminTopBar.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"AdminTopBar.d.ts","sourceRoot":"","sources":["../../../src/components/admin/AdminTopBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAGxD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,6BAA6B,CAAC;AAG3D,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B,WAAW,EAAE,MAAM,CAAC;IACpB,mBAAmB,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACvC,cAAc,CAAC,EAAE,MACb,MAAM,GACN,IAAI,GACJ,SAAS,GACT,OAAO,CAAC,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;IACvC,YAAY,EAAE,OAAO,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,kBAAkB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,KAAK,EAAE,OAAO,CAAC;IACf,aAAa,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,gBAAgB,EAAE,OAAO,CAAC;IAC1B,eAAe,EAAE,MAAM,IAAI,CAAC;CAC7B,CAAC;AAEF,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,OAAO,EACP,WAAW,EACX,mBAAmB,EACnB,SAAS,EACT,aAAa,EACb,SAAS,EACT,cAAc,EACd,YAAY,EACZ,KAAK,EACL,UAAU,EACV,kBAAkB,EAClB,WAAW,EACX,YAAY,EACZ,KAAK,EACL,aAAa,EACb,gBAAgB,EAChB,eAAe,GAChB,EAAE,gBAAgB,+BAsFlB"}
+{"version":3,"file":"AdminTopBar.d.ts","sourceRoot":"","sources":["../../../src/components/admin/AdminTopBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAGxD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,6BAA6B,CAAC;AAG3D,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B,WAAW,EAAE,MAAM,CAAC;IACpB,mBAAmB,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACvC,cAAc,CAAC,EAAE,MACb,MAAM,GACN,IAAI,GACJ,SAAS,GACT,OAAO,CAAC,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;IACvC,YAAY,EAAE,OAAO,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,kBAAkB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,KAAK,EAAE,OAAO,CAAC;IACf,aAAa,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,gBAAgB,EAAE,OAAO,CAAC;IAC1B,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B,CAAC;AAEF,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,QAAQ,EACR,WAAW,EACX,OAAO,EACP,WAAW,EACX,mBAAmB,EACnB,aAAa,EACb,SAAS,EACT,cAAc,EACd,YAAY,EACZ,KAAK,EACL,UAAU,EACV,kBAAkB,EAClB,WAAW,EACX,YAAY,EACZ,KAAK,EACL,aAAa,EACb,gBAAgB,EAChB,eAAe,EACf,WAAW,EACX,UAAU,EACV,YAAY,GACb,EAAE,gBAAgB,+BA6GlB"}

package/dist/components/admin/AdminTopBar.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { EnvSelect } from "../env/EnvSelect";
 import { ThemeToggle } from "../theme/ThemeToggle";
-import { IconSearch } from "../ui/icons";
-export function AdminTopBar({ brand, envList, environment, onEnvironmentChange, activeEnv, authUserLabel, onSignOut, getAccessToken, authRequired, token, tokenDraft, onTokenDraftChange, onSaveToken, onClearToken, theme, onThemeChange, sidebarCollapsed, onToggleSidebar, }) {
-    return (_jsxs("header", { className: "vertebr-topbar", children: [_jsxs("div", { className: "vertebr-topbar-start", children: [_jsx("button", { type: "button", className: "vertebr-topbar-toggle", "aria-label": sidebarCollapsed ? "Expand sidebar" : "Collapse sidebar", onClick: onToggleSidebar, children: "\u2630" }), _jsx("strong", { className: "vertebr-topbar-brand", children: brand }), envList.length > 0 ? (_jsxs("div", { className: "vertebr-topbar-env", children: [_jsx(EnvSelect, { environments: envList, value: environment, onChange: onEnvironmentChange }), activeEnv ? (_jsx("span", { className: "vertebr-env-badge", "data-tone": activeEnv.tone ?? "neutral", children: activeEnv.label })) : null] })) : null] }), _jsxs("div", { className: "vertebr-topbar-search", "aria-hidden": "true", children: [_jsx(IconSearch, {}), _jsx("span", { children: "Search admin" }), _jsx("kbd", { children: "\u2318K" })] }), _jsxs("div", { className: "vertebr-topbar-end", children: [!getAccessToken && (authRequired || token) ? (_jsxs("div", { className: "vertebr-topbar-token", children: [_jsx("input", { className: "vertebr-auth-input", type: "password", placeholder: "Access token", value: tokenDraft, onChange: (event) => onTokenDraftChange(event.target.value), autoComplete: "off" }), _jsx("button", { type: "button", className: "vertebr-btn vertebr-btn-quiet", onClick: onSaveToken, children: "Use" }), token ? (_jsx("button", { type: "button", className: "vertebr-btn vertebr-btn-quiet", onClick: onClearToken, children: "Clear" })) : null] })) : null, getAccessToken && authUserLabel ? (_jsx("span", { className: "vertebr-topbar-user", children: authUserLabel })) : null, onSignOut ? (_jsx("button", { type: "button", className: "vertebr-btn vertebr-btn-quiet", onClick: () => void onSignOut(), children: "Sign out" })) : null, _jsx(ThemeToggle, { theme: theme, onChange: onThemeChange })] })] }));
+import { IconSearch, IconSync } from "../ui/icons";
+export function AdminTopBar({ brand, hostName, hostLogoUrl, envList, environment, onEnvironmentChange, authUserLabel, onSignOut, getAccessToken, authRequired, token, tokenDraft, onTokenDraftChange, onSaveToken, onClearToken, theme, onThemeChange, sidebarCollapsed, onToggleSidebar, syncEnabled, onOpenSync, onOpenSearch, }) {
+    return (_jsxs("header", { className: "vertebr-topbar", children: [_jsxs("div", { className: "vertebr-topbar-start", children: [_jsx("button", { type: "button", className: "vertebr-topbar-toggle", "aria-label": sidebarCollapsed ? "Expand sidebar" : "Collapse sidebar", onClick: onToggleSidebar, children: "\u2630" }), _jsxs("div", { className: "vertebr-topbar-brand-wrap", children: [_jsx("strong", { className: "vertebr-topbar-brand", children: brand }), hostName ? (_jsxs("span", { className: "vertebr-topbar-host", children: [hostLogoUrl ? (_jsx("img", { className: "vertebr-topbar-host-logo", src: hostLogoUrl, alt: "" })) : null, _jsx("span", { className: "vertebr-topbar-host-label", children: hostName })] })) : null] }), envList.length > 1 ? (_jsx("div", { className: "vertebr-topbar-env", children: _jsx(EnvSelect, { environments: envList, value: environment, onChange: onEnvironmentChange }) })) : null] }), _jsx("div", { className: "vertebr-topbar-center", children: _jsxs("button", { type: "button", className: "vertebr-topbar-search", onClick: onOpenSearch, children: [_jsx(IconSearch, {}), _jsx("span", { children: "Search admin" }), _jsx("kbd", { children: "\u2318K" })] }) }), _jsxs("div", { className: "vertebr-topbar-end", children: [syncEnabled && onOpenSync ? (_jsxs("button", { type: "button", className: "vertebr-btn vertebr-btn-quiet vertebr-topbar-sync", onClick: onOpenSync, children: [_jsx(IconSync, {}), _jsx("span", { children: "Sync" })] })) : null, !getAccessToken && (authRequired || token) ? (_jsxs("div", { className: "vertebr-topbar-token", children: [_jsx("input", { className: "vertebr-auth-input", type: "password", placeholder: "Access token", value: tokenDraft, onChange: (event) => onTokenDraftChange(event.target.value), autoComplete: "off" }), _jsx("button", { type: "button", className: "vertebr-btn vertebr-btn-quiet", onClick: onSaveToken, children: "Use" }), token ? (_jsx("button", { type: "button", className: "vertebr-btn vertebr-btn-quiet", onClick: onClearToken, children: "Clear" })) : null] })) : null, getAccessToken && authUserLabel ? (_jsx("span", { className: "vertebr-topbar-user", children: authUserLabel })) : null, onSignOut ? (_jsx("button", { type: "button", className: "vertebr-btn vertebr-btn-quiet", onClick: () => void onSignOut(), children: "Sign out" })) : null, _jsx(ThemeToggle, { theme: theme, onChange: onThemeChange })] })] }));
 }

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

@@ -6,9 +6,11 @@ export type PagePreviewPaneProps = {
     controlId: string;
     /** Latest unsaved form values. */
     draft: Record<string, unknown> | null;
+    /** Label for the preview chrome. */
+    previewKind?: "page" | "addon";
 };
 /**
  * Live host iframe for Pages. Vertebr posts drafts; the host renders.
  */
-export declare function PagePreviewPane({ previewPath, controlId, draft, }: PagePreviewPaneProps): import("react").JSX.Element;
+export declare function PagePreviewPane({ previewPath, controlId, draft, previewKind, }: PagePreviewPaneProps): import("react").JSX.Element;
 //# sourceMappingURL=PagePreviewPane.d.ts.map

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

@@ -1 +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"}
+{"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;IACtC,oCAAoC;IACpC,WAAW,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CAChC,CAAC;AAWF;;GAEG;AACH,wBAAgB,eAAe,CAAC,EAC9B,WAAW,EACX,SAAS,EACT,KAAK,EACL,WAAoB,GACrB,EAAE,oBAAoB,+BAmMtB"}

package/dist/components/admin/PagePreviewPane.js

@@ -11,7 +11,7 @@ const MOBILE_HEIGHT = 844;
 /**
  * Live host iframe for Pages. Vertebr posts drafts; the host renders.
  */
-export function PagePreviewPane({ previewPath, controlId, draft, }) {
+export function PagePreviewPane({ previewPath, controlId, draft, previewKind = "page", }) {
     const iframeRef = useRef(null);
     const stageRef = useRef(null);
     const draftRef = useRef(draft);
@@ -93,7 +93,7 @@ export function PagePreviewPane({ previewPath, controlId, draft, }) {
         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
+    return (_jsxs("div", { className: "vertebr-page-preview", "data-preview-kind": previewKind, children: [_jsxs("div", { className: "vertebr-page-preview-meta", children: [_jsxs("p", { children: [_jsx("span", { children: previewKind === "addon" ? "Storefront" : "Preview" }), _jsx("strong", { children: previewPath })] }), _jsxs("p", { children: [_jsx("span", { children: "Status" }), _jsx("strong", { children: frameError
                                     ? "Unavailable"
                                     : frameReady
                                         ? "Live"

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

package/dist/components/admin/VertebrAdmin.js

@@ -3,6 +3,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { createVertebrClient, } from "@vertebr/client";
 import { useVertebrTheme } from "../../hooks/useVertebrTheme";
 import { parseMetricsRangeId, } from "../../lib/metricsRanges";
+import { AdminCommandPalette } from "./AdminCommandPalette";
 import { AdminContent } from "./AdminContent";
 import { AdminHeader } from "./AdminHeader";
 import { AdminSaveBar } from "./AdminSaveBar";
@@ -51,6 +52,7 @@ export function VertebrAdmin({ apiBase = "/admin/api", basePath: basePathProp, t
     const [error, setError] = useState(null);
     const [loading, setLoading] = useState(true);
     const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
+    const [searchOpen, setSearchOpen] = useState(false);
     /** Skip pushState when selection was applied from the URL (catalog/popstate). */
     const skipNextUrlPush = useRef(true);
     const syncUrl = useCallback((next, catalogSnapshot, replace = false) => {
@@ -130,6 +132,16 @@ export function VertebrAdmin({ apiBase = "/admin/api", basePath: basePathProp, t
         }
         syncUrl(selection, catalog, false);
     }, [selection, catalog, syncUrl]);
+    useEffect(() => {
+        const onKeyDown = (event) => {
+            if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "k") {
+                event.preventDefault();
+                setSearchOpen(true);
+            }
+        };
+        window.addEventListener("keydown", onKeyDown);
+        return () => window.removeEventListener("keydown", onKeyDown);
+    }, []);
     useEffect(() => {
         const onPopState = () => {
             if (!catalog)
@@ -208,7 +220,17 @@ export function VertebrAdmin({ apiBase = "/admin/api", basePath: basePathProp, t
                         setEmailsData(null);
                     }
                 }
-                else {
+                else if (selection.kind === "sync" || selection.kind === "addons") {
+                    if (!cancelled) {
+                        setResourceData(null);
+                        setConfigData(null);
+                        setMetricsData(null);
+                        setGalleryData(null);
+                        setFontLibraryData(null);
+                        setEmailsData(null);
+                    }
+                }
+                else if (selection.kind === "config" || selection.kind === "addon") {
                     const data = await client.getConfig(selection.id);
                     if (!cancelled) {
                         setConfigData(data);
@@ -445,6 +467,26 @@ export function VertebrAdmin({ apiBase = "/admin/api", basePath: basePathProp, t
                 ],
             });
         }
+        if (catalog.addons?.length) {
+            entries.push({
+                key: "addons:overview",
+                group: "Add-ons",
+                label: "Browse add-ons",
+                icon: iconForNavKey("addons:overview"),
+                active: selection?.kind === "addons",
+                onSelect: () => setSelection({ kind: "addons" }),
+            });
+        }
+        for (const addon of catalog.addons ?? []) {
+            entries.push({
+                key: `addon:${addon.id}`,
+                group: addon.group ?? "Add-ons",
+                label: addon.label,
+                icon: iconForNavKey(`addon:${addon.id}`),
+                active: selection?.kind === "addon" && selection.id === addon.id,
+                onSelect: () => setSelection({ kind: "addon", id: addon.id }),
+            });
+        }
         for (const config of catalog.configs) {
             const fallback = config.section === "page" ? "Pages" : "Config";
             entries.push({
@@ -456,6 +498,16 @@ export function VertebrAdmin({ apiBase = "/admin/api", basePath: basePathProp, t
                 onSelect: () => setSelection({ kind: "config", id: config.id }),
             });
         }
+        if (catalog.sync?.enabled) {
+            entries.push({
+                key: "sync",
+                group: "Settings",
+                label: "Sync environments",
+                icon: iconForNavKey("sync"),
+                active: selection?.kind === "sync",
+                onSelect: () => setSelection({ kind: "sync" }),
+            });
+        }
         return sidebarGroups(entries);
     }, [catalog, selection]);
     if (!bootstrap && loading) {
@@ -466,16 +518,27 @@ export function VertebrAdmin({ apiBase = "/admin/api", basePath: basePathProp, t
     }
     const activeLabel = selection?.kind === "overview"
         ? (catalog?.metrics?.label ?? "Overview")
-        : selection?.kind === "gallery"
-            ? (catalog?.gallery?.label ?? "Gallery")
-            : 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 (_jsx(SaveBarProvider, { children: _jsx(ToastProvider, { children: _jsxs("div", { className: "vertebr-root", "data-env": environment, "data-sidebar-collapsed": sidebarCollapsed || undefined, children: [_jsx(AdminTopBar, { brand: bootstrap?.brand ?? catalog?.brand ?? "Vertebr", envList: envList, environment: environment, onEnvironmentChange: switchEnvironment, activeEnv: activeEnv, authUserLabel: authUserLabel, onSignOut: onSignOut, getAccessToken: getAccessToken, authRequired: authRequired, token: token, tokenDraft: tokenDraft, onTokenDraftChange: setTokenDraft, onSaveToken: saveToken, onClearToken: clearToken, theme: theme, onThemeChange: setTheme, sidebarCollapsed: sidebarCollapsed, onToggleSidebar: () => setSidebarCollapsed((prev) => !prev) }), _jsx(AdminSidebar, { navGroups: navGroups, collapsed: sidebarCollapsed }), _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, breadcrumbs: breadcrumbsForSelection(selection, catalog) }), _jsx(AdminContent, { client: client, catalog: catalog, selection: selection, onSelectionChange: setSelection, 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 }), _jsx(AdminSaveBar, {})] }), _jsx(AdminToastStack, {})] }) }) }));
+        : selection?.kind === "sync"
+            ? "Sync environments"
+            : selection?.kind === "addons"
+                ? "Add-ons"
+                : selection?.kind === "gallery"
+                    ? (catalog?.gallery?.label ?? "Gallery")
+                    : 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
+                                    : selection?.kind === "addon"
+                                        ? catalog?.addons?.find((a) => a.id === selection.id)?.label
+                                        : null;
+    const selectionDescription = selection?.kind === "addons"
+        ? "Preview how optional storefront features look in your shop, then configure each one."
+        : selection?.kind === "addon"
+            ? catalog?.addons?.find((item) => item.id === selection.id)?.description
+            : undefined;
+    return (_jsx(SaveBarProvider, { children: _jsx(ToastProvider, { children: _jsxs("div", { className: "vertebr-root", "data-env": environment, "data-sidebar-collapsed": sidebarCollapsed || undefined, children: [_jsx(AdminTopBar, { brand: bootstrap?.brand ?? catalog?.brand ?? "Vertebr", hostName: bootstrap?.appearance?.hostName ?? catalog?.appearance?.hostName, hostLogoUrl: bootstrap?.appearance?.hostLogoUrl ?? catalog?.appearance?.hostLogoUrl, envList: envList, environment: environment, onEnvironmentChange: switchEnvironment, authUserLabel: authUserLabel, onSignOut: onSignOut, getAccessToken: getAccessToken, authRequired: authRequired, token: token, tokenDraft: tokenDraft, onTokenDraftChange: setTokenDraft, onSaveToken: saveToken, onClearToken: clearToken, theme: theme, onThemeChange: setTheme, sidebarCollapsed: sidebarCollapsed, onToggleSidebar: () => setSidebarCollapsed((prev) => !prev), syncEnabled: Boolean(catalog?.sync?.enabled), onOpenSync: () => setSelection({ kind: "sync" }), onOpenSearch: () => setSearchOpen(true) }), catalog && searchOpen ? (_jsx(AdminCommandPalette, { catalog: catalog, onClose: () => setSearchOpen(false), onSelect: setSelection })) : null, _jsx(AdminSidebar, { navGroups: navGroups, collapsed: sidebarCollapsed }), _jsxs("main", { className: "vertebr-main", children: [_jsx(AdminHeader, { activeLabel: activeLabel ?? (catalog ? "Dashboard" : "Sign in"), catalogLoaded: Boolean(catalog), authRequired: authRequired, selection: selection, isPageSelection: isPageSelection, hasPagePreview: hasPagePreview, selectionDescription: selectionDescription, error: error, breadcrumbs: breadcrumbsForSelection(selection, catalog) }), _jsx(AdminContent, { client: client, catalog: catalog, selection: selection, onSelectionChange: setSelection, 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 }), _jsx(AdminSaveBar, {})] }), _jsx(AdminToastStack, {})] }) }) }));
 }

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

@@ -0,0 +1,6 @@
+import type { CatalogAddonCategory } from "@vertebr/client";
+export declare const ADDON_CATEGORY_LABELS: Record<CatalogAddonCategory, string>;
+export declare function addonCategoryLabel(category: CatalogAddonCategory | undefined): string;
+export declare const ADDON_CATEGORY_HINTS: Record<CatalogAddonCategory, string>;
+export declare function addonCategoryHint(category: CatalogAddonCategory | undefined): string;
+//# sourceMappingURL=addonLabels.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"addonLabels.d.ts","sourceRoot":"","sources":["../../../src/components/admin/addonLabels.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAE5D,eAAO,MAAM,qBAAqB,EAAE,MAAM,CAAC,oBAAoB,EAAE,MAAM,CAItE,CAAC;AAEF,wBAAgB,kBAAkB,CAChC,QAAQ,EAAE,oBAAoB,GAAG,SAAS,GACzC,MAAM,CAGR;AAED,eAAO,MAAM,oBAAoB,EAAE,MAAM,CAAC,oBAAoB,EAAE,MAAM,CAIrE,CAAC;AAEF,wBAAgB,iBAAiB,CAC/B,QAAQ,EAAE,oBAAoB,GAAG,SAAS,GACzC,MAAM,CAGR"}

package/dist/components/admin/addonLabels.js

@@ -0,0 +1,20 @@
+export const ADDON_CATEGORY_LABELS = {
+    product: "Products",
+    engagement: "Engagement",
+    sales: "Sales",
+};
+export function addonCategoryLabel(category) {
+    if (!category)
+        return "Add-on";
+    return ADDON_CATEGORY_LABELS[category] ?? "Add-on";
+}
+export const ADDON_CATEGORY_HINTS = {
+    product: "Tied to products, variants, and checkout",
+    engagement: "Brand story and feedback on the side",
+    sales: "Promos, urgency, and cart nudges",
+};
+export function addonCategoryHint(category) {
+    if (!category)
+        return "Optional storefront feature";
+    return ADDON_CATEGORY_HINTS[category] ?? "Optional storefront feature";
+}

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

@@ -0,0 +1,12 @@
+import type { CatalogResponse } from "@vertebr/client";
+import type { Selection } from "./types";
+export type AdminSearchItem = {
+    id: string;
+    label: string;
+    group: string;
+    hint?: string;
+    selection: Selection;
+};
+export declare function adminSearchItems(catalog: CatalogResponse): AdminSearchItem[];
+export declare function filterAdminSearchItems(items: AdminSearchItem[], query: string): AdminSearchItem[];
+//# sourceMappingURL=adminSearch.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"adminSearch.d.ts","sourceRoot":"","sources":["../../../src/components/admin/adminSearch.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AACvD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEzC,MAAM,MAAM,eAAe,GAAG;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,eAAe,GAAG,eAAe,EAAE,CA6G5E;AAED,wBAAgB,sBAAsB,CACpC,KAAK,EAAE,eAAe,EAAE,EACxB,KAAK,EAAE,MAAM,GACZ,eAAe,EAAE,CASnB"}

package/dist/components/admin/adminSearch.js

@@ -0,0 +1,111 @@
+export function adminSearchItems(catalog) {
+    const items = [];
+    if (catalog.metrics) {
+        items.push({
+            id: "overview",
+            label: catalog.metrics.label,
+            group: catalog.metrics.group ?? "Home",
+            hint: "Overview and metrics",
+            selection: { kind: "overview" },
+        });
+    }
+    for (const resource of catalog.resources) {
+        items.push({
+            id: `resource:${resource.id}`,
+            label: resource.label,
+            group: resource.group ?? "Resources",
+            hint: "Resource table",
+            selection: { kind: "resource", id: resource.id },
+        });
+    }
+    if (catalog.gallery) {
+        items.push({
+            id: "gallery",
+            label: catalog.gallery.label,
+            group: catalog.gallery.group ?? "Resources",
+            hint: "Media library",
+            selection: { kind: "gallery" },
+        });
+    }
+    if (catalog.fontLibrary) {
+        items.push({
+            id: "fonts",
+            label: catalog.fontLibrary.label,
+            group: catalog.fontLibrary.group ?? "Resources",
+            hint: "Font library",
+            selection: { kind: "fontLibrary" },
+        });
+    }
+    if (catalog.emails) {
+        items.push({
+            id: "emails:compose",
+            label: "Compose email",
+            group: catalog.emails.group ?? "Growth",
+            hint: catalog.emails.label,
+            selection: { kind: "emails", tab: "compose" },
+        });
+        items.push({
+            id: "emails:templates",
+            label: "Email templates",
+            group: catalog.emails.group ?? "Growth",
+            hint: catalog.emails.label,
+            selection: { kind: "emails", tab: "templates" },
+        });
+        items.push({
+            id: "emails:activity",
+            label: "Email activity",
+            group: catalog.emails.group ?? "Growth",
+            hint: catalog.emails.label,
+            selection: { kind: "emails", tab: "activity" },
+        });
+    }
+    if (catalog.addons?.length) {
+        items.push({
+            id: "addons:overview",
+            label: "Browse add-ons",
+            group: "Add-ons",
+            hint: "Preview and configure storefront features",
+            selection: { kind: "addons" },
+        });
+    }
+    for (const addon of catalog.addons ?? []) {
+        items.push({
+            id: `addon:${addon.id}`,
+            label: addon.label,
+            group: addon.group ?? "Add-ons",
+            hint: addon.description ?? "Storefront add-on",
+            selection: { kind: "addon", id: addon.id },
+        });
+    }
+    for (const config of catalog.configs) {
+        const bucket = config.section === "page" ? "Pages" : "Config";
+        items.push({
+            id: `config:${config.id}`,
+            label: config.label,
+            group: config.group ?? bucket,
+            hint: config.section === "page" ? "Page content" : "Settings",
+            selection: { kind: "config", id: config.id },
+        });
+    }
+    if (catalog.sync?.enabled) {
+        items.push({
+            id: "sync",
+            label: "Sync environments",
+            group: "Settings",
+            hint: "Copy content between environments",
+            selection: { kind: "sync" },
+        });
+    }
+    return items;
+}
+export function filterAdminSearchItems(items, query) {
+    const needle = query.trim().toLowerCase();
+    if (!needle)
+        return items;
+    return items.filter((item) => {
+        const haystack = [item.label, item.group, item.hint ?? "", item.id]
+            .join(" ")
+            .toLowerCase();
+        return haystack.includes(needle);
+    });
+}

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

@@ -1 +1 @@
-{"version":3,"file":"breadcrumbs.d.ts","sourceRoot":"","sources":["../../../src/components/admin/breadcrumbs.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AACvD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEzC,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,wBAAgB,uBAAuB,CACrC,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,eAAe,GAAG,IAAI,GAC9B,UAAU,EAAE,CA6Cd"}
+{"version":3,"file":"breadcrumbs.d.ts","sourceRoot":"","sources":["../../../src/components/admin/breadcrumbs.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AACvD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEzC,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,wBAAgB,uBAAuB,CACrC,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,eAAe,GAAG,IAAI,GAC9B,UAAU,EAAE,CAyDd"}

package/dist/components/admin/breadcrumbs.js

@@ -5,6 +5,18 @@ export function breadcrumbsForSelection(selection, catalog) {
     switch (selection.kind) {
         case "overview":
             return [...crumbs, { label: catalog.metrics?.label ?? "Overview" }];
+        case "sync":
+            return [...crumbs, { label: "Sync environments" }];
+        case "addons":
+            return [...crumbs, { label: "Add-ons" }];
+        case "addon": {
+            const addon = catalog.addons?.find((item) => item.id === selection.id);
+            return [
+                ...crumbs,
+                { label: "Add-ons", href: "/addons" },
+                { label: addon?.label ?? selection.id },
+            ];
+        }
         case "gallery":
             return [...crumbs, { label: catalog.gallery?.label ?? "Gallery" }];
         case "fontLibrary":

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

@@ -1 +1 @@
-{"version":3,"file":"routes.d.ts","sourceRoot":"","sources":["../../../src/components/admin/routes.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AACvD,OAAO,KAAK,EAAa,SAAS,EAAE,MAAM,SAAS,CAAC;AAIpD;;;GAGG;AACH,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,CAO5D;AAOD,iEAAiE;AACjE,wBAAgB,gBAAgB,CAC9B,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,eAAe,GACvB,MAAM,CA0BR;AAED,wBAAgB,gBAAgB,CAC9B,QAAQ,EAAE,MAAM,EAChB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,eAAe,GACvB,MAAM,CAIR;AASD;;;GAGG;AACH,wBAAgB,iBAAiB,CAC/B,QAAQ,EAAE,MAAM,EAChB,QAAQ,EAAE,MAAM,EAChB,OAAO,EAAE,eAAe,GAAG,IAAI,GAC9B,SAAS,GAAG,IAAI,CAuClB;AAED,8DAA8D;AAC9D,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,eAAe,GAAG,SAAS,CAUpE;AAED,+DAA+D;AAC/D,wBAAgB,eAAe,CAC7B,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,eAAe,GACvB,SAAS,CAyBX;AAED,wBAAgB,eAAe,CAAC,CAAC,EAAE,SAAS,EAAE,CAAC,EAAE,SAAS,GAAG,OAAO,CAenE"}
+{"version":3,"file":"routes.d.ts","sourceRoot":"","sources":["../../../src/components/admin/routes.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AACvD,OAAO,KAAK,EAAa,SAAS,EAAE,MAAM,SAAS,CAAC;AAIpD;;;GAGG;AACH,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,CAO5D;AAOD,iEAAiE;AACjE,wBAAgB,gBAAgB,CAC9B,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,eAAe,GACvB,MAAM,CAgCR;AAED,wBAAgB,gBAAgB,CAC9B,QAAQ,EAAE,MAAM,EAChB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,eAAe,GACvB,MAAM,CAIR;AASD;;;GAGG;AACH,wBAAgB,iBAAiB,CAC/B,QAAQ,EAAE,MAAM,EAChB,QAAQ,EAAE,MAAM,EAChB,OAAO,EAAE,eAAe,GAAG,IAAI,GAC9B,SAAS,GAAG,IAAI,CAgDlB;AAED,8DAA8D;AAC9D,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,eAAe,GAAG,SAAS,CAUpE;AAED,+DAA+D;AAC/D,wBAAgB,eAAe,CAC7B,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,eAAe,GACvB,SAAS,CAoCX;AAED,wBAAgB,eAAe,CAAC,CAAC,EAAE,SAAS,EAAE,CAAC,EAAE,SAAS,GAAG,OAAO,CAgBnE"}