@vertebr/react 0.10.0 → 0.11.0

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

@@ -1 +1 @@
-{"version":3,"file":"AddonEditor.d.ts","sourceRoot":"","sources":["../../../src/components/admin/AddonEditor.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,YAAY,EACZ,eAAe,EACf,cAAc,EACd,aAAa,EACd,MAAM,iBAAiB,CAAC;AAKzB,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAExD,MAAM,MAAM,gBAAgB,GAAG;IAC7B,MAAM,EAAE,aAAa,CAAC;IACtB,OAAO,EAAE,eAAe,CAAC;IACzB,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,OAAO,EACP,KAAK,EACL,UAAU,EACV,aAAa,EACb,aAAa,EACb,iBAAiB,GAClB,EAAE,gBAAgB,+BAyFlB"}
+{"version":3,"file":"AddonEditor.d.ts","sourceRoot":"","sources":["../../../src/components/admin/AddonEditor.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,YAAY,EACZ,eAAe,EACf,cAAc,EACd,aAAa,EACd,MAAM,iBAAiB,CAAC;AAMzB,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAExD,MAAM,MAAM,gBAAgB,GAAG;IAC7B,MAAM,EAAE,aAAa,CAAC;IACtB,OAAO,EAAE,eAAe,CAAC;IACzB,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,OAAO,EACP,KAAK,EACL,UAAU,EACV,aAAa,EACb,aAAa,EACb,iBAAiB,GAClB,EAAE,gBAAgB,+BAiGlB"}

package/dist/components/admin/AddonEditor.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useMemo, useState } from "react";
+import { resolvePreviewPath } from "@vertebr/client";
 import { ConfigForm } from "../config/ConfigForm";
 import { hasCap } from "../../lib/capabilities";
 import { addonCategoryLabel } from "./addonLabels";
@@ -7,18 +8,19 @@ import { PagePreviewPane } from "./PagePreviewPane";
 export function AddonEditor({ client, catalog, 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;
+        // Merge — react-hook-form watch can omit unchanged keys.
+        setDraft((prev) => ({ ...(prev ?? configData.value), ...value }));
+    }, [configData.value]);
+    const draftValue = draft ?? configData.value;
+    const enabled = Boolean(draftValue.enabled);
+    const previewPath = resolvePreviewPath(addon.previewPath, addon.previewPathRules, draftValue);
     const showPreview = Boolean(previewPath);
     const canWrite = hasCap(catalog, "addon.write");
     const previewDraft = useMemo(() => {
-        const base = draft ?? configData.value;
         if (!showPreview)
-            return base;
-        return { ...base, enabled: true };
-    }, [configData.value, draft, showPreview]);
+            return draftValue;
+        return { ...draftValue, enabled: true };
+    }, [draftValue, showPreview]);
     const form = (_jsx(ConfigForm, { schema: configData.schema, value: configData.value, client: client, canWrite: canWrite, onChange: showPreview ? onChange : undefined, onSave: async (next) => {
             const saved = await client.setConfig(configData.id, next);
             onConfigSaved(saved);

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { ConfigForm } from "../config/ConfigForm";
 import { RevisionHistory } from "../config/RevisionHistory";
 import { EmailsBoard } from "../emails/EmailsBoard";
@@ -13,21 +13,68 @@ import { AddonOverview } from "./AddonOverview";
 import { AuditBoard } from "./AuditBoard";
 import { PagePreviewPane } from "./PagePreviewPane";
 import { AdminSyncPage } from "./AdminSyncPage";
-function ConfigEditor({ client, catalog, configData, isPageSelection, previewPath, onConfigSaved, onRefreshConfig, galleryPicker, fontLibraryPicker, }) {
+function ConfigEditor({ client, catalog, configData, isPageSelection, previewPath, relatedAddons = [], onConfigSaved, onRefreshConfig, onSelectAddon, galleryPicker, fontLibraryPicker, }) {
     const [draft, setDraft] = useState(configData.value);
+    const [relatedDrafts, setRelatedDrafts] = useState({});
     const showPreview = Boolean(previewPath);
     const canWrite = hasCap(catalog, "config.write");
+    const canPublish = hasCap(catalog, "config.publish");
     const showRevisions = Boolean(catalog.revisionsEnabled) || Boolean(configData.revisionsEnabled);
+    const relatedKey = relatedAddons.map((item) => item.id).join(",");
+    useEffect(() => {
+        setDraft(configData.value);
+    }, [configData.id, configData.activeRevisionId, configData.value]);
+    useEffect(() => {
+        if (!relatedAddons.length) {
+            setRelatedDrafts({});
+            return;
+        }
+        let cancelled = false;
+        void (async () => {
+            const entries = await Promise.all(relatedAddons.map(async (addon) => {
+                try {
+                    const config = await client.getConfig(addon.id);
+                    const value = { ...config.value };
+                    // Coming soon page owns site-launch countdown placement.
+                    if (configData.id === "comingSoon" && addon.id === "countdown") {
+                        value.target = "comingSoon";
+                    }
+                    if (configData.id === "product" && addon.id === "countdown") {
+                        value.target = "product";
+                    }
+                    return [addon.id, value];
+                }
+                catch {
+                    return [addon.id, { enabled: false }];
+                }
+            }));
+            if (cancelled)
+                return;
+            setRelatedDrafts(Object.fromEntries(entries));
+        })();
+        return () => {
+            cancelled = true;
+        };
+    }, [client, configData.id, relatedKey, relatedAddons]);
     const onChange = useCallback((value) => {
         setDraft(value);
     }, []);
-    const form = (_jsx(ConfigForm, { schema: configData.schema, value: configData.value, client: client, canWrite: canWrite, onChange: showPreview ? onChange : undefined, onSave: async (next) => {
+    const form = (_jsx(ConfigForm, { schema: configData.schema, value: configData.value, client: client, canWrite: canWrite, revisionsEnabled: showRevisions, canPublish: canPublish && Boolean(configData.draftRevisionId), onPublish: canPublish && configData.draftRevisionId
+            ? async () => {
+                const published = await client.publishRevision(configData.id, configData.draftRevisionId);
+                onConfigSaved(published);
+                await onRefreshConfig?.();
+            }
+            : undefined, 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), showRevisions ? (_jsx(RevisionHistory, { client: client, configId: configData.id, onPublished: async () => {
-                    await onRefreshConfig?.();
-                } })) : null] }));
+    return (_jsxs("div", { className: "vertebr-config-editor", children: [showPreview || isPageSelection || showRevisions ? (_jsxs("div", { className: "vertebr-panel-head", children: [_jsx("h2", { children: isPageSelection ? "Page content" : configData.label }), _jsxs("div", { className: "vertebr-panel-head-actions", children: [showPreview || isPageSelection ? (_jsxs("span", { className: "vertebr-count", children: [Object.keys(configData.schema).length, " fields"] })) : null, showRevisions ? (_jsx(RevisionHistory, { client: client, configId: configData.id, onPublished: async () => {
+                                    await onRefreshConfig?.();
+                                } })) : null] })] })) : null, relatedAddons.length ? (_jsxs("div", { className: "vertebr-page-related-addons", "aria-label": "Linked add-ons", children: [_jsx("span", { className: "vertebr-page-related-addons-label", children: "Linked add-ons" }), _jsx("div", { className: "vertebr-page-related-addons-list", children: relatedAddons.map((addon) => {
+                            const enabled = relatedDrafts[addon.id]?.enabled === true;
+                            return (_jsxs("button", { type: "button", className: "vertebr-page-related-addon", "data-enabled": enabled ? "true" : "false", onClick: () => onSelectAddon?.(addon.id), children: [_jsx("span", { children: addon.label }), _jsx("em", { children: enabled ? "on" : "off" })] }, addon.id));
+                        }) })] })) : 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, relatedDrafts: Object.keys(relatedDrafts).length ? relatedDrafts : undefined })] })) : (form)] }));
 }
 export function AdminContent({ client, catalog, selection, onSelectionChange, authRequired, loading, isPageSelection, metricsData, metricsLoading, metricsRange, onMetricsRangeChange, onRefreshMetrics, galleryData, galleryLoading, onRefreshGallery, fontLibraryData, fontLibraryLoading, onRefreshFonts, emailsData, emailsLoading, onRefreshEmails, resourceData, resourceSearch, onResourceSearchChange, onRefreshResource, onRefreshConfig, configData, onConfigSaved, galleryPicker, fontLibraryPicker, }) {
     if (!catalog) {
@@ -153,7 +200,8 @@ export function AdminContent({ client, catalog, selection, onSelectionChange, au
                             return result.files;
                         }
                         : 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, catalog: catalog, configData: configData, isPageSelection: isPageSelection, previewPath: catalog.configs.find((item) => item.id === configData.id)
-                        ?.previewPath, onConfigSaved: onConfigSaved, onRefreshConfig: onRefreshConfig, galleryPicker: galleryPicker, fontLibraryPicker: fontLibraryPicker }, configData.id)) : null, selection?.kind === "addon" && configData ? ((() => {
+                        ?.previewPath, relatedAddons: catalog.configs.find((item) => item.id === configData.id)
+                        ?.relatedAddons, onConfigSaved: onConfigSaved, onRefreshConfig: onRefreshConfig, onSelectAddon: (id) => onSelectionChange?.({ kind: "addon", id }), 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;

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

@@ -1 +1 @@
-{"version":3,"file":"AdminSaveBar.d.ts","sourceRoot":"","sources":["../../../src/components/admin/AdminSaveBar.tsx"],"names":[],"mappings":"AAEA,wBAAgB,YAAY,uCAmC3B"}
+{"version":3,"file":"AdminSaveBar.d.ts","sourceRoot":"","sources":["../../../src/components/admin/AdminSaveBar.tsx"],"names":[],"mappings":"AAEA,wBAAgB,YAAY,uCAqD3B"}

package/dist/components/admin/AdminSaveBar.js

@@ -6,5 +6,10 @@ export function AdminSaveBar() {
         return null;
     return (_jsxs("div", { className: "vertebr-savebar", "data-tone": state.tone, children: [_jsx("div", { className: "vertebr-savebar-message", children: state.saving
                     ? "Saving…"
-                    : state.message ?? (state.isDirty ? "Unsaved changes" : "Saved") }), _jsxs("div", { className: "vertebr-savebar-actions", children: [state.onDiscard && state.isDirty ? (_jsx("button", { type: "button", className: "vertebr-btn vertebr-btn-quiet", disabled: state.saving, onClick: state.onDiscard, children: "Discard" })) : null, state.onSave ? (_jsx("button", { type: "button", className: "vertebr-btn vertebr-btn-primary", disabled: state.saving || !state.isDirty, onClick: () => void state.onSave?.(), children: "Save" })) : null] })] }));
+                    : state.publishing
+                        ? "Publishing…"
+                        : (state.message ??
+                            (state.isDirty ? "Unsaved changes" : "Saved")) }), _jsxs("div", { className: "vertebr-savebar-actions", children: [state.onDiscard && state.isDirty ? (_jsx("button", { type: "button", className: "vertebr-btn vertebr-btn-quiet", disabled: state.saving || state.publishing, onClick: state.onDiscard, children: "Discard" })) : null, state.onSave ? (_jsx("button", { type: "button", className: "vertebr-btn vertebr-btn-primary", disabled: state.saving || state.publishing || !state.isDirty, onClick: () => void state.onSave?.(), children: state.saveLabel ?? "Save" })) : null, state.onPublish ? (_jsx("button", { type: "button", className: "vertebr-btn", disabled: state.saving || state.publishing || state.isDirty, title: state.isDirty
+                            ? "Save draft before publishing"
+                            : "Publish the current draft to the live storefront", onClick: () => void state.onPublish?.(), children: state.publishLabel ?? "Publish" })) : null] })] }));
 }

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

@@ -1 +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"}
+{"version":3,"file":"AdminSyncPage.d.ts","sourceRoot":"","sources":["../../../src/components/admin/AdminSyncPage.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAEV,eAAe,EAIf,aAAa,EACd,MAAM,iBAAiB,CAAC;AAQzB,MAAM,MAAM,kBAAkB,GAAG;IAC/B,MAAM,EAAE,aAAa,CAAC;IACtB,OAAO,EAAE,eAAe,CAAC;CAC1B,CAAC;AAuPF,wBAAgB,aAAa,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,kBAAkB,+BA0YpE"}

package/dist/components/admin/AdminSyncPage.js

@@ -5,6 +5,7 @@ import { EnvSelect } from "../env/EnvSelect";
 import { useToast } from "../../hooks/useToast";
 import { Badge, Card } from "../ui/primitives";
 import { IconSync } from "../ui/icons";
+import { SyncPreviewFrame } from "./SyncPreviewFrame";
 function envById(environments, id) {
     return environments.find((env) => env.id === id);
 }
@@ -46,6 +47,36 @@ function statusLabel(status) {
             return status;
     }
 }
+function formatDiffValue(value) {
+    if (value === undefined || value === null)
+        return "—";
+    if (typeof value === "string")
+        return value.length ? value : '""';
+    if (typeof value === "number" || typeof value === "boolean") {
+        return String(value);
+    }
+    try {
+        return JSON.stringify(value, null, 2);
+    }
+    catch {
+        return String(value);
+    }
+}
+function SyncDiffModal({ inspect, sourceLabel, onClose, }) {
+    const changes = inspect.item.changes ?? [];
+    const preview = inspect.item.preview;
+    const hasVisual = Boolean(preview);
+    const [tab, setTab] = useState(hasVisual ? "visual" : "fields");
+    return (_jsx("div", { className: "vertebr-modal-backdrop", role: "presentation", onClick: onClose, children: _jsxs("div", { className: "vertebr-modal vertebr-sync-diff-modal", "data-has-visual": hasVisual ? "true" : undefined, role: "dialog", "aria-modal": "true", "aria-labelledby": "vertebr-sync-diff-title", onClick: (event) => event.stopPropagation(), children: [_jsxs("header", { className: "vertebr-modal-head vertebr-sync-diff-head", children: [_jsxs("div", { className: "vertebr-modal-heading", children: [_jsx("h2", { id: "vertebr-sync-diff-title", children: inspect.targetLabel }), _jsxs("p", { className: "vertebr-sync-diff-subtitle", children: [_jsxs("span", { children: [sourceLabel, " \u2192 ", inspect.destinationLabel] }), inspect.item.summary ? (_jsx("span", { className: "vertebr-sync-diff-meta", children: inspect.item.summary })) : null] })] }), _jsx("div", { className: "vertebr-modal-actions", children: _jsx("button", { type: "button", className: "vertebr-btn vertebr-btn-quiet", onClick: onClose, children: "Close" }) })] }), hasVisual ? (_jsxs("div", { className: "vertebr-sync-diff-tabs", role: "tablist", "aria-label": "Diff view", children: [_jsx("button", { type: "button", role: "tab", "aria-selected": tab === "visual", "data-active": tab === "visual" ? "true" : undefined, onClick: () => setTab("visual"), children: "Visual" }), _jsx("button", { type: "button", role: "tab", "aria-selected": tab === "fields", "data-active": tab === "fields" ? "true" : undefined, onClick: () => setTab("fields"), children: "Fields" })] })) : null, _jsxs("div", { className: "vertebr-modal-body", children: [inspect.item.warnings?.length ? (_jsx("ul", { className: "vertebr-sync-diff-warnings", children: inspect.item.warnings.map((warning) => (_jsx("li", { children: warning }, warning))) })) : null, _jsxs("div", { className: "vertebr-sync-diff-panels", "data-tab": tab, children: [preview ? (_jsx("div", { className: "vertebr-sync-diff-panel", "data-panel": "visual", "data-active": tab === "visual" ? "true" : undefined, role: "tabpanel", "aria-hidden": tab !== "visual", children: _jsxs("div", { className: "vertebr-sync-diff-visual", children: [_jsx(SyncPreviewFrame, { label: `${inspect.destinationLabel} (now)`, previewPath: preview.previewPath, controlId: preview.controlId, draft: preview.destDraft, relatedDrafts: preview.destRelatedDrafts, addons: preview.addons?.map((addon) => ({
+                                                    id: addon.id,
+                                                    label: addon.label,
+                                                    envEnabled: addon.destEnabled,
+                                                })) }), _jsx(SyncPreviewFrame, { label: `${sourceLabel} (after sync)`, previewPath: preview.previewPath, controlId: preview.controlId, draft: preview.sourceDraft, relatedDrafts: preview.sourceRelatedDrafts, addons: preview.addons?.map((addon) => ({
+                                                    id: addon.id,
+                                                    label: addon.label,
+                                                    envEnabled: addon.sourceEnabled,
+                                                })) })] }) })) : null, _jsx("div", { className: "vertebr-sync-diff-panel", "data-panel": "fields", "data-active": tab === "fields" ? "true" : undefined, role: "tabpanel", "aria-hidden": tab !== "fields", children: changes.length === 0 ? (_jsx("p", { className: "vertebr-sync-diff-empty", children: "No field-level preview for this target. The summary still applies when you sync." })) : (_jsx("div", { className: "vertebr-sync-diff-table-wrap", children: _jsxs("table", { className: "vertebr-sync-diff-table", children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { scope: "col", children: "Field" }), _jsxs("th", { scope: "col", children: [inspect.destinationLabel, " (now)"] }), _jsxs("th", { scope: "col", children: [sourceLabel, " (after sync)"] })] }) }), _jsx("tbody", { children: changes.map((change) => (_jsxs("tr", { children: [_jsx("th", { scope: "row", children: _jsx("code", { children: change.path }) }), _jsx("td", { children: _jsx("pre", { children: formatDiffValue(change.destination) }) }), _jsx("td", { children: _jsx("pre", { children: formatDiffValue(change.source) }) })] }, change.path))) })] }) })) })] })] })] }) }));
+}
 export function AdminSyncPage({ client, catalog }) {
     const sync = catalog.sync;
     const { push } = useToast();
@@ -63,24 +94,27 @@ export function AdminSyncPage({ client, catalog }) {
     const [planLoading, setPlanLoading] = useState(false);
     const [running, setRunning] = useState(false);
     const [error, setError] = useState(null);
+    const [inspect, setInspect] = 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 allTargetIds = useMemo(() => (sync?.targets ?? []).map((target) => target.id), [sync?.targets]);
     const refreshPlan = useCallback(async () => {
-        if (!hasTargets || toEnv.length === 0) {
+        if (!hasTargets || toEnv.length === 0 || allTargetIds.length === 0) {
             setPlan(null);
             return;
         }
         setPlanLoading(true);
         setError(null);
         try {
+            // Plan every target so Match/Changes + View diff work without selecting.
             const next = await client.getSyncPlan({
                 from: fromEnv,
                 to: toEnv,
-                targets: selectedTargets,
+                targets: allTargetIds,
             });
             setPlan(next);
         }
@@ -91,7 +125,7 @@ export function AdminSyncPage({ client, catalog }) {
         finally {
             setPlanLoading(false);
         }
-    }, [client, fromEnv, toEnv, selectedTargets, hasTargets]);
+    }, [client, fromEnv, toEnv, allTargetIds, hasTargets]);
     useEffect(() => {
         void refreshPlan();
     }, [refreshPlan]);
@@ -155,15 +189,25 @@ export function AdminSyncPage({ client, catalog }) {
                                                         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) => {
+                                            return (_jsx("li", { children: _jsxs("div", { className: "vertebr-sync-target-row", "data-selected": selected || undefined, children: [_jsxs("button", { type: "button", className: "vertebr-sync-target-toggle", onClick: () => toggleTarget(target.id), "aria-pressed": selected, 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));
+                                                                const canInspect = (item.status === "changed" ||
+                                                                    item.status === "new") &&
+                                                                    (Boolean(item.changes?.length) ||
+                                                                        Boolean(item.preview));
+                                                                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 }), canInspect ? (_jsx("button", { type: "button", className: "vertebr-sync-diff-btn", onClick: () => setInspect({
+                                                                                targetId: target.id,
+                                                                                targetLabel: target.label,
+                                                                                destinationId: destination.id,
+                                                                                destinationLabel: destination.label,
+                                                                                item,
+                                                                            }), children: item.preview ? "View preview" : "View diff" })) : null] }, 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" })] }) })] })] }));
+                                selectedTargets.length === 0, onClick: () => void runSync(), children: [_jsx(IconSync, {}), _jsx("span", { children: running ? "Syncing…" : "Sync selected" })] }) })] }), inspect ? (_jsx(SyncDiffModal, { inspect: inspect, sourceLabel: fromEnvironment?.label ?? fromEnv, onClose: () => setInspect(null) })) : null] }));
 }

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

@@ -6,11 +6,13 @@ export type PagePreviewPaneProps = {
     controlId: string;
     /** Latest unsaved form values. */
     draft: Record<string, unknown> | null;
+    /** Extra add-on drafts owned by this page (e.g. countdown on coming soon). */
+    relatedDrafts?: Record<string, Record<string, unknown>>;
     /** 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, previewKind, }: PagePreviewPaneProps): import("react").JSX.Element;
+export declare function PagePreviewPane({ previewPath, controlId, draft, relatedDrafts, 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;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"}
+{"version":3,"file":"PagePreviewPane.d.ts","sourceRoot":"","sources":["../../../src/components/admin/PagePreviewPane.tsx"],"names":[],"mappings":"AAQA,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,8EAA8E;IAC9E,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;IACxD,oCAAoC;IACpC,WAAW,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CAChC,CAAC;AAqBF;;GAEG;AACH,wBAAgB,eAAe,CAAC,EAC9B,WAAW,EACX,SAAS,EACT,KAAK,EACL,aAAa,EACb,WAAoB,GACrB,EAAE,oBAAoB,+BAoOtB"}

package/dist/components/admin/PagePreviewPane.js

@@ -1,6 +1,6 @@
 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";
+import { buildVertebrPreviewUrl, postVertebrPreviewDraft, subscribeVertebrPreviewNavigate, subscribeVertebrPreviewReady, } from "@vertebr/client";
 const VIEWPORTS = [
     { id: "desktop", label: "Desktop" },
     { id: "mobile", label: "Mobile" },
@@ -8,28 +8,52 @@ const VIEWPORTS = [
 /** Logical CSS viewport for mobile preview (host media queries use this). */
 const MOBILE_WIDTH = 390;
 const MOBILE_HEIGHT = 844;
+function normalizePreviewPath(path) {
+    const trimmed = path.trim() || "/";
+    try {
+        const url = new URL(trimmed, "http://vertebr.local");
+        return `${url.pathname}${url.search}${url.hash}` || "/";
+    }
+    catch {
+        return trimmed.startsWith("/") ? trimmed : `/${trimmed}`;
+    }
+}
 /**
  * Live host iframe for Pages. Vertebr posts drafts; the host renders.
  */
-export function PagePreviewPane({ previewPath, controlId, draft, previewKind = "page", }) {
+export function PagePreviewPane({ previewPath, controlId, draft, relatedDrafts, previewKind = "page", }) {
     const iframeRef = useRef(null);
     const stageRef = useRef(null);
     const draftRef = useRef(draft);
+    const relatedRef = useRef(relatedDrafts);
     const [frameReady, setFrameReady] = useState(false);
     const [frameError, setFrameError] = useState(false);
     const [viewport, setViewport] = useState("desktop");
     const [mobileScale, setMobileScale] = useState(1);
+    const [activePath, setActivePath] = useState(() => normalizePreviewPath(previewPath));
     draftRef.current = draft;
+    relatedRef.current = relatedDrafts;
     const isMobile = viewport === "mobile";
-    const src = useMemo(() => buildVertebrPreviewUrl(previewPath, {
+    const basePath = normalizePreviewPath(previewPath);
+    const navigatedAway = activePath !== basePath;
+    useEffect(() => {
+        setActivePath(normalizePreviewPath(previewPath));
+    }, [previewPath]);
+    const src = useMemo(() => buildVertebrPreviewUrl(activePath, {
         controlId,
-    }), [previewPath, controlId]);
+    }), [activePath, controlId]);
     const pushDraft = useCallback(() => {
         const win = iframeRef.current?.contentWindow;
         const value = draftRef.current;
         if (!win || !value)
             return;
         postVertebrPreviewDraft(win, controlId, value);
+        const related = relatedRef.current;
+        if (!related)
+            return;
+        for (const [id, relatedValue] of Object.entries(related)) {
+            postVertebrPreviewDraft(win, id, relatedValue);
+        }
     }, [controlId]);
     const notifyHostResize = useCallback(() => {
         const win = iframeRef.current?.contentWindow;
@@ -55,11 +79,19 @@ export function PagePreviewPane({ previewPath, controlId, draft, previewKind = "
             pushDraft();
         });
     }, [pushDraft, src]);
+    useEffect(() => {
+        return subscribeVertebrPreviewNavigate((path, source) => {
+            const win = iframeRef.current?.contentWindow;
+            if (!win || source !== win)
+                return;
+            setActivePath(normalizePreviewPath(path));
+        });
+    }, []);
     useEffect(() => {
         if (!frameReady)
             return;
         pushDraft();
-    }, [draft, frameReady, pushDraft]);
+    }, [draft, relatedDrafts, frameReady, pushDraft]);
     // Fit the fixed mobile viewport into the stage without changing its
     // layout width (transform scale keeps host media queries at 390px).
     useEffect(() => {
@@ -93,11 +125,11 @@ export function PagePreviewPane({ previewPath, controlId, draft, previewKind = "
         const timer = window.setTimeout(notifyHostResize, 50);
         return () => window.clearTimeout(timer);
     }, [viewport, mobileScale, frameReady, notifyHostResize]);
-    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
+    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: activePath })] }), _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
+                                        ? "Connected"
+                                        : "Loading…" })] }), isMobile ? (_jsxs("p", { children: [_jsx("span", { children: "Viewport" }), _jsxs("strong", { children: [MOBILE_WIDTH, "\u00D7", MOBILE_HEIGHT] })] })) : null, navigatedAway ? (_jsx("button", { type: "button", className: "vertebr-page-preview-back", onClick: () => setActivePath(basePath), children: "Back to page" })) : 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,
@@ -109,7 +141,7 @@ export function PagePreviewPane({ previewPath, controlId, draft, previewKind = "
                                 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
+                            : undefined, children: frameError ? (_jsxs("div", { className: "vertebr-page-preview-empty", children: ["Could not load host preview at ", activePath, "."] })) : (_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

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

@@ -0,0 +1,22 @@
+export type SyncPreviewAddonChip = {
+    id: string;
+    label: string;
+    /** True when the add-on is enabled in that environment. */
+    envEnabled: boolean;
+};
+export type SyncPreviewFrameProps = {
+    label: string;
+    previewPath: string;
+    controlId: string;
+    draft: Record<string, unknown>;
+    /** Extra controls to inject (e.g. countdown alongside coming soon). */
+    relatedDrafts?: Record<string, Record<string, unknown>>;
+    /** Add-ons that belong on this page preview (always force-shown in the iframe). */
+    addons?: SyncPreviewAddonChip[];
+};
+/**
+ * Compact same-origin preview iframe for Sync visual compare.
+ * Fixed mobile-sized frame; posts the given draft after ready.
+ */
+export declare function SyncPreviewFrame({ label, previewPath, controlId, draft, relatedDrafts, addons, }: SyncPreviewFrameProps): import("react").JSX.Element;
+//# sourceMappingURL=SyncPreviewFrame.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SyncPreviewFrame.d.ts","sourceRoot":"","sources":["../../../src/components/admin/SyncPreviewFrame.tsx"],"names":[],"mappings":"AAOA,MAAM,MAAM,oBAAoB,GAAG;IACjC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,2DAA2D;IAC3D,UAAU,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC/B,uEAAuE;IACvE,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;IACxD,mFAAmF;IACnF,MAAM,CAAC,EAAE,oBAAoB,EAAE,CAAC;CACjC,CAAC;AAqDF;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,WAAW,EACX,SAAS,EACT,KAAK,EACL,aAAa,EACb,MAAM,GACP,EAAE,qBAAqB,+BA6JvB"}

package/dist/components/admin/SyncPreviewFrame.js

@@ -0,0 +1,135 @@
+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 FRAME_WIDTH = 390;
+const FRAME_HEIGHT = 720;
+function normalizePreviewPath(path) {
+    const trimmed = path.trim() || "/";
+    try {
+        const url = new URL(trimmed, "http://vertebr.local");
+        return `${url.pathname}${url.search}${url.hash}` || "/";
+    }
+    catch {
+        return trimmed.startsWith("/") ? trimmed : `/${trimmed}`;
+    }
+}
+/**
+ * Build related drafts for the iframe: prefer plan payloads (real enabled /
+ * content). Synthesize only when a listed add-on is missing from the plan.
+ */
+function resolveRelatedDrafts(controlId, relatedDrafts, addons) {
+    const next = {};
+    for (const [id, value] of Object.entries(relatedDrafts ?? {})) {
+        next[id] = { ...value };
+    }
+    for (const addon of addons ?? []) {
+        const existing = next[addon.id] ?? {
+            enabled: addon.envEnabled,
+        };
+        const patched = { ...existing };
+        if (patched.enabled === undefined) {
+            patched.enabled = addon.envEnabled;
+        }
+        if (addon.id === "countdown" && controlId === "comingSoon") {
+            patched.target = "comingSoon";
+        }
+        if (addon.id === "countdown" && controlId === "product") {
+            patched.target = "product";
+        }
+        if (addon.id === "reviews" && controlId === "home") {
+            patched.showOnHome = true;
+        }
+        if (addon.id === "reviews" && controlId === "product") {
+            patched.showOnProducts = true;
+        }
+        next[addon.id] = patched;
+    }
+    return next;
+}
+/**
+ * Compact same-origin preview iframe for Sync visual compare.
+ * Fixed mobile-sized frame; posts the given draft after ready.
+ */
+export function SyncPreviewFrame({ label, previewPath, controlId, draft, relatedDrafts, addons, }) {
+    const iframeRef = useRef(null);
+    const stageRef = useRef(null);
+    const draftRef = useRef(draft);
+    const [frameReady, setFrameReady] = useState(false);
+    const [frameError, setFrameError] = useState(false);
+    const [scale, setScale] = useState(1);
+    const resolvedRelated = useMemo(() => resolveRelatedDrafts(controlId, relatedDrafts, addons), [controlId, relatedDrafts, addons]);
+    const relatedRef = useRef(resolvedRelated);
+    draftRef.current = draft;
+    relatedRef.current = resolvedRelated;
+    const path = normalizePreviewPath(previewPath);
+    const src = useMemo(() => buildVertebrPreviewUrl(path, {
+        controlId,
+    }), [path, controlId]);
+    const pushDraft = useCallback(() => {
+        const win = iframeRef.current?.contentWindow;
+        const value = draftRef.current;
+        if (!win || !value)
+            return;
+        postVertebrPreviewDraft(win, controlId, value);
+        for (const [id, relatedValue] of Object.entries(relatedRef.current)) {
+            postVertebrPreviewDraft(win, id, relatedValue);
+        }
+    }, [controlId]);
+    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, resolvedRelated, frameReady, pushDraft]);
+    useEffect(() => {
+        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 / FRAME_WIDTH, availH / FRAME_HEIGHT);
+            setScale(Number.isFinite(next) && next > 0 ? next : 1);
+        };
+        update();
+        const observer = new ResizeObserver(update);
+        observer.observe(stage);
+        return () => observer.disconnect();
+    }, []);
+    const status = frameError
+        ? "Unavailable"
+        : frameReady
+            ? "Connected"
+            : "Loading…";
+    return (_jsxs("div", { className: "vertebr-sync-preview-frame", children: [_jsxs("div", { className: "vertebr-sync-preview-frame-meta", children: [_jsx("strong", { children: label }), _jsx("span", { children: path }), _jsx("span", { "data-status": frameError ? "error" : frameReady ? "ok" : "pending", children: status })] }), addons ? (_jsx("div", { className: "vertebr-sync-preview-addons", "aria-label": "Add-ons in preview", children: addons.length === 0 ? (_jsx("span", { className: "vertebr-sync-preview-addons-empty", children: "No add-ons" })) : (addons.map((addon) => (_jsxs("span", { className: "vertebr-sync-preview-addon", "data-enabled": addon.envEnabled ? "true" : "false", title: addon.envEnabled
+                        ? `${addon.label} is enabled in this environment`
+                        : `${addon.label} is off in this environment`, children: [addon.label, _jsx("em", { children: addon.envEnabled ? "on" : "off" })] }, addon.id)))) })) : null, _jsx("div", { ref: stageRef, className: "vertebr-sync-preview-frame-stage", children: _jsx("div", { className: "vertebr-sync-preview-frame-shell", style: {
+                        width: FRAME_WIDTH * scale,
+                        height: FRAME_HEIGHT * scale,
+                    }, children: _jsx("div", { className: "vertebr-sync-preview-frame-scaler", style: {
+                            width: FRAME_WIDTH,
+                            height: FRAME_HEIGHT,
+                            transform: `scale(${scale})`,
+                            transformOrigin: "top left",
+                        }, children: frameError ? (_jsxs("div", { className: "vertebr-sync-preview-frame-empty", children: ["Could not load preview at ", path, "."] })) : (_jsx("iframe", { ref: iframeRef, title: `${label} preview`, src: src, width: FRAME_WIDTH, height: FRAME_HEIGHT, onLoad: () => {
+                                setFrameReady(true);
+                                pushDraft();
+                            }, onError: () => setFrameError(true) })) }) }) })] }));
+}