@salla.sa/twilight-theme-engine 1.0.124 → 1.0.126

package/dist/components/home/index.js

@@ -1,27 +1,27 @@
-export { BundleComponent, ComponentErrorBoundary, DefaultHomeComponents, FeaturedProductsStyle1, FeaturedProductsStyle2, FeaturedProductsStyle3, FixedBanner, FixedProducts, HomeComponentRenderer, PageBlocks, ParallaxBackground, PhotosSlider, ProductsSlider, ReorderProducts, SquarePhotos, StoreFeatures, LazyTestimonials as Testimonials, Youtube, registerHomeComponentConfig, registerHomeComponents, useReorderButtons } from '../../chunk-ZHW5KZJM.js';
-import '../../chunk-4SKMLRLX.js';
-import '../../chunk-JN4EYPHY.js';
-import '../../chunk-MHBBN7O6.js';
+export { BundleComponent, ComponentErrorBoundary, DefaultHomeComponents, FeaturedProductsStyle1, FeaturedProductsStyle2, FeaturedProductsStyle3, FixedBanner, FixedProducts, HomeComponentRenderer, PageBlocks, ParallaxBackground, PhotosSlider, ProductsSlider, ReorderProducts, SquarePhotos, StoreFeatures, LazyTestimonials as Testimonials, Youtube, registerHomeComponentConfig, registerHomeComponents, useReorderButtons } from '../../chunk-4VYKXIYA.js';
+import '../../chunk-Z76YTG4W.js';
+import '../../chunk-TNUK62YF.js';
+import '../../chunk-TCRZSLXH.js';
 import '../../chunk-Y32RHCOH.js';
-import '../../chunk-IIVUBE4K.js';
-import '../../chunk-PDIFXQDX.js';
-import '../../chunk-7NOGCBED.js';
-import '../../chunk-I44YRS6T.js';
+import '../../chunk-R2FXTCRK.js';
+import '../../chunk-MVNWWZWQ.js';
+import '../../chunk-GHLPK63Q.js';
+import '../../chunk-6PK4GITC.js';
 import '../../chunk-KQEBYXYB.js';
 import '../../chunk-JYV25VNZ.js';
-import '../../chunk-EFMAJAIS.js';
+import '../../chunk-MHLKLADI.js';
 import '../../chunk-OXMUPNMH.js';
-import '../../chunk-ICKIPKCC.js';
+import '../../chunk-RE4QQM4Q.js';
 import '../../chunk-VVZNW5CB.js';
 import '../../chunk-5FJFN3IW.js';
 import '../../chunk-GD26FI4J.js';
 import '../../chunk-OM2GRPDH.js';
-import '../../chunk-J52AQPKU.js';
+import '../../chunk-GLE6TNJ3.js';
 import '../../chunk-OUW6WESU.js';
 import '../../chunk-BK5TBUGG.js';
 import '../../chunk-HI5V5X3S.js';
-import '../../chunk-E5JIVIBY.js';
-import '../../chunk-XCIMWJ7P.js';
+import '../../chunk-4ZYJDSYQ.js';
+import '../../chunk-NHJ5U6WK.js';
 import '../../chunk-MVT5AF2A.js';
 import '../../chunk-Z653O7MX.js';
 import '../../chunk-ZCH7W7DZ.js';
@@ -32,15 +32,15 @@ import '../../chunk-7V36I5GT.js';
 import '../../chunk-6WI7R2BD.js';
 import '../../chunk-JGVEGQHJ.js';
 import '../../chunk-OAMIDZKW.js';
-import '../../chunk-QUDLGIR6.js';
+import '../../chunk-SGET4UYI.js';
 import '../../chunk-OQIIJRAS.js';
 import '../../chunk-V2ZDTY6H.js';
-import '../../chunk-5EKTGKJY.js';
+import '../../chunk-FN2GQ2B5.js';
 import '../../chunk-5XDPAKF5.js';
 import '../../chunk-GCPEMNSU.js';
-import '../../chunk-WNV73ZFT.js';
+import '../../chunk-5LP2K2J7.js';
 import '../../chunk-TYNZ5B2B.js';
-import '../../chunk-VEY7PJK7.js';
+import '../../chunk-JAKLD546.js';
 import '../../chunk-AXW67SY7.js';
 import '../../chunk-BYMOPN2S.js';
 import '../../chunk-SKLEJJ6M.js';

package/dist/components/layout/index.js

@@ -1,11 +1,11 @@
-export { LazyCopyright as Copyright, LazyCustomerLayout as CustomerLayout, LazyFooter as Footer, LazyHeader as Header, LazyMasterLayout as MasterLayout, LazyWidgetHead as WidgetHead } from '../../chunk-COF5OFQX.js';
-export { PageAdvertisements } from '../../chunk-QUDLGIR6.js';
+export { LazyCopyright as Copyright, LazyCustomerLayout as CustomerLayout, LazyFooter as Footer, LazyHeader as Header, LazyMasterLayout as MasterLayout, LazyWidgetHead as WidgetHead } from '../../chunk-UHCNMJDI.js';
+export { PageAdvertisements } from '../../chunk-SGET4UYI.js';
 export { MadeWithSalla } from '../../chunk-OQIIJRAS.js';
 export { pushEqualHeightConfig } from '../../chunk-V2ZDTY6H.js';
-import '../../chunk-5EKTGKJY.js';
+import '../../chunk-FN2GQ2B5.js';
 import '../../chunk-5XDPAKF5.js';
 import '../../chunk-GCPEMNSU.js';
-import '../../chunk-WNV73ZFT.js';
+import '../../chunk-5LP2K2J7.js';
 import '../../chunk-TYNZ5B2B.js';
 import '../../chunk-GYXUYHKO.js';
 import '../../chunk-FHU2MXZA.js';

package/dist/components/live-editor/LiveEditorBar.d.ts

@@ -4,8 +4,12 @@ import { type ReactElement } from 'react';
  * edit, hide, move, duplicate, add and delete; hovering the header or footer
  * shows an edit button. Double-clicking either edits it. Each action is a
  * message to the editor, which saves the change and reloads the preview.
+ *
+ * In the engine's dev editor (`dev`) edits reach the page live, so nothing
+ * waits for a reload, and there is no hide: its layout has no hidden blocks.
  */
-export declare function LiveEditorBar({ origin }: {
+export declare function LiveEditorBar({ origin, dev, }: {
     origin: string;
+    dev?: boolean;
 }): ReactElement | null;
 //# sourceMappingURL=LiveEditorBar.d.ts.map

package/dist/components/live-editor/LiveEditorBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LiveEditorBar.d.ts","sourceRoot":"","sources":["../../../src/components/live-editor/LiveEditorBar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,YAAY,EAElB,MAAM,OAAO,CAAC;AAiVf;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,EAAE,MAAM,EAAE,EAAE;IAAE,MAAM,EAAE,MAAM,CAAA;CAAE,GAAG,YAAY,GAAG,IAAI,CA6EjF"}
+{"version":3,"file":"LiveEditorBar.d.ts","sourceRoot":"","sources":["../../../src/components/live-editor/LiveEditorBar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,YAAY,EAElB,MAAM,OAAO,CAAC;AA2Wf;;;;;;;;GAQG;AACH,wBAAgB,aAAa,CAAC,EAC5B,MAAM,EACN,GAAW,GACZ,EAAE;IACD,MAAM,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,OAAO,CAAC;CACf,GAAG,YAAY,GAAG,IAAI,CAqFtB"}

package/dist/components/live-editor/frame.d.ts

@@ -22,6 +22,13 @@ export declare const AREA_FALLBACKS: {
 export type Area = keyof typeof AREA_FALLBACKS;
 /** The theme editor's origin when it frames this page, otherwise `null`. Browser only. */
 export declare function editorOrigin(): string | null;
+export interface EditorFrame {
+    origin: string;
+    /** The engine's own dev editor (`/__twilight/editor`): edits apply live, and blocks can't be hidden. */
+    dev: boolean;
+}
+/** The editor framing this page, the merchant's or (on a dev server) the engine's own. Browser only. */
+export declare function editorFrame(): EditorFrame | null;
 export declare function postToEditor(origin: string, action: LiveEditorMessage | typeof FRAME_LOADED_ACTION, data?: {
     id: string;
 }): void;

package/dist/components/live-editor/frame.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"frame.d.ts","sourceRoot":"","sources":["../../../src/components/live-editor/frame.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,8FAA8F;AAC9F,eAAO,MAAM,cAAc,uFAIjB,CAAC;AAEX,qFAAqF;AACrF,eAAO,MAAM,mBAAmB,0BAA0B,CAAC;AAE3D,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,MAAM,GAAG,QAAQ,GAAG,UAAU,GAAG,WAAW,GAAG,KAAK,GAAG,QAAQ,CAAC;AAEnG,MAAM,MAAM,iBAAiB,GAC3B,YAAY,WAAW,YAAY,GAAG,sBAAsB,GAAG,sBAAsB,CAAC;AAExF,8EAA8E;AAC9E,eAAO,MAAM,eAAe,oBAAoB,CAAC;AAEjD,yFAAyF;AACzF,eAAO,MAAM,cAAc,qBAAqB,CAAC;AAEjD,wFAAwF;AACxF,eAAO,MAAM,cAAc;;;CAGjB,CAAC;AAEX,MAAM,MAAM,IAAI,GAAG,MAAM,OAAO,cAAc,CAAC;AAe/C,0FAA0F;AAC1F,wBAAgB,YAAY,IAAI,MAAM,GAAG,IAAI,CAS5C;AAED,wBAAgB,YAAY,CAC1B,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,iBAAiB,GAAG,OAAO,mBAAmB,EACtD,IAAI,CAAC,EAAE;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE,GACpB,IAAI,CAEN;AAED,oGAAoG;AACpG,wBAAgB,MAAM,CAAC,EAAE,EAAE,OAAO,GAAG,IAAI,GAAG,IAAI,CAO/C;AAED,iFAAiF;AACjF,eAAO,MAAM,eAAe,QAMhB,CAAC;AAEb,+DAA+D;AAC/D,wBAAgB,QAAQ,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,GAAG,WAAW,GAAG,IAAI,CAOrE"}
+{"version":3,"file":"frame.d.ts","sourceRoot":"","sources":["../../../src/components/live-editor/frame.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,8FAA8F;AAC9F,eAAO,MAAM,cAAc,uFAIjB,CAAC;AAEX,qFAAqF;AACrF,eAAO,MAAM,mBAAmB,0BAA0B,CAAC;AAE3D,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,MAAM,GAAG,QAAQ,GAAG,UAAU,GAAG,WAAW,GAAG,KAAK,GAAG,QAAQ,CAAC;AAEnG,MAAM,MAAM,iBAAiB,GAC3B,YAAY,WAAW,YAAY,GAAG,sBAAsB,GAAG,sBAAsB,CAAC;AAExF,8EAA8E;AAC9E,eAAO,MAAM,eAAe,oBAAoB,CAAC;AAEjD,yFAAyF;AACzF,eAAO,MAAM,cAAc,qBAAqB,CAAC;AAEjD,wFAAwF;AACxF,eAAO,MAAM,cAAc;;;CAGjB,CAAC;AAEX,MAAM,MAAM,IAAI,GAAG,MAAM,OAAO,cAAc,CAAC;AA8B/C,0FAA0F;AAC1F,wBAAgB,YAAY,IAAI,MAAM,GAAG,IAAI,CAW5C;AAED,MAAM,WAAW,WAAW;IAC1B,MAAM,EAAE,MAAM,CAAC;IACf,wGAAwG;IACxG,GAAG,EAAE,OAAO,CAAC;CACd;AAED,wGAAwG;AACxG,wBAAgB,WAAW,IAAI,WAAW,GAAG,IAAI,CAKhD;AAED,wBAAgB,YAAY,CAC1B,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,iBAAiB,GAAG,OAAO,mBAAmB,EACtD,IAAI,CAAC,EAAE;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE,GACpB,IAAI,CAEN;AAED,oGAAoG;AACpG,wBAAgB,MAAM,CAAC,EAAE,EAAE,OAAO,GAAG,IAAI,GAAG,IAAI,CAO/C;AAED,iFAAiF;AACjF,eAAO,MAAM,eAAe,QAMhB,CAAC;AAEb,+DAA+D;AAC/D,wBAAgB,QAAQ,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,GAAG,WAAW,GAAG,IAAI,CAOrE"}

package/dist/components/live-editor/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/live-editor/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuC,KAAK,YAAY,EAAE,MAAM,OAAO,CAAC;AAQ/E;;;;;GAKG;AACH,wBAAgB,UAAU,IAAI,YAAY,GAAG,IAAI,CAsBhD"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/live-editor/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuC,KAAK,YAAY,EAAE,MAAM,OAAO,CAAC;AAQ/E;;;;;GAKG;AACH,wBAAgB,UAAU,IAAI,YAAY,GAAG,IAAI,CAwBhD"}

package/dist/components/product/index.js

@@ -1,24 +1,24 @@
-export { LazyAddToCartForm as AddToCartForm, ProductCard, LazyProductDetails as ProductDetails, ProductGallery } from '../../chunk-MHBBN7O6.js';
+export { LazyAddToCartForm as AddToCartForm, ProductCard, LazyProductDetails as ProductDetails, ProductGallery } from '../../chunk-TCRZSLXH.js';
 import '../../chunk-Y32RHCOH.js';
-import '../../chunk-IIVUBE4K.js';
-import '../../chunk-PDIFXQDX.js';
-import '../../chunk-7NOGCBED.js';
-import '../../chunk-I44YRS6T.js';
+import '../../chunk-R2FXTCRK.js';
+import '../../chunk-MVNWWZWQ.js';
+import '../../chunk-GHLPK63Q.js';
+import '../../chunk-6PK4GITC.js';
 import '../../chunk-KQEBYXYB.js';
 import '../../chunk-JYV25VNZ.js';
-import '../../chunk-EFMAJAIS.js';
+import '../../chunk-MHLKLADI.js';
 import '../../chunk-OXMUPNMH.js';
-import '../../chunk-ICKIPKCC.js';
+import '../../chunk-RE4QQM4Q.js';
 import '../../chunk-VVZNW5CB.js';
 import '../../chunk-5FJFN3IW.js';
 import '../../chunk-GD26FI4J.js';
 import '../../chunk-OM2GRPDH.js';
-import '../../chunk-J52AQPKU.js';
+import '../../chunk-GLE6TNJ3.js';
 import '../../chunk-OUW6WESU.js';
 import '../../chunk-BK5TBUGG.js';
 import '../../chunk-HI5V5X3S.js';
-import '../../chunk-E5JIVIBY.js';
-import '../../chunk-XCIMWJ7P.js';
+import '../../chunk-4ZYJDSYQ.js';
+import '../../chunk-NHJ5U6WK.js';
 import '../../chunk-MVT5AF2A.js';
 import '../../chunk-Z653O7MX.js';
 import '../../chunk-ZCH7W7DZ.js';
@@ -29,15 +29,15 @@ import '../../chunk-7V36I5GT.js';
 import '../../chunk-6WI7R2BD.js';
 import '../../chunk-JGVEGQHJ.js';
 import '../../chunk-OAMIDZKW.js';
-import '../../chunk-QUDLGIR6.js';
+import '../../chunk-SGET4UYI.js';
 import '../../chunk-OQIIJRAS.js';
 import '../../chunk-V2ZDTY6H.js';
-import '../../chunk-5EKTGKJY.js';
+import '../../chunk-FN2GQ2B5.js';
 import '../../chunk-5XDPAKF5.js';
 import '../../chunk-GCPEMNSU.js';
-import '../../chunk-WNV73ZFT.js';
+import '../../chunk-5LP2K2J7.js';
 import '../../chunk-TYNZ5B2B.js';
-import '../../chunk-VEY7PJK7.js';
+import '../../chunk-JAKLD546.js';
 import '../../chunk-AXW67SY7.js';
 import '../../chunk-BYMOPN2S.js';
 import '../../chunk-SKLEJJ6M.js';

package/dist/components/store/index.js

@@ -1,24 +1,24 @@
 export { MaintenancePage } from '../../chunk-J5DGBS7Q.js';
-export { StoreClosedNotification } from '../../chunk-AS4A6I5D.js';
-export { LazyMaintenancePage, LazyStoreClosedNotification } from '../../chunk-IIVUBE4K.js';
-import '../../chunk-PDIFXQDX.js';
-import '../../chunk-7NOGCBED.js';
-import '../../chunk-I44YRS6T.js';
+export { StoreClosedNotification } from '../../chunk-5SJRY6P3.js';
+export { LazyMaintenancePage, LazyStoreClosedNotification } from '../../chunk-R2FXTCRK.js';
+import '../../chunk-MVNWWZWQ.js';
+import '../../chunk-GHLPK63Q.js';
+import '../../chunk-6PK4GITC.js';
 import '../../chunk-KQEBYXYB.js';
 import '../../chunk-JYV25VNZ.js';
-import '../../chunk-EFMAJAIS.js';
+import '../../chunk-MHLKLADI.js';
 import '../../chunk-OXMUPNMH.js';
-import '../../chunk-ICKIPKCC.js';
+import '../../chunk-RE4QQM4Q.js';
 import '../../chunk-VVZNW5CB.js';
 import '../../chunk-5FJFN3IW.js';
 import '../../chunk-GD26FI4J.js';
 import '../../chunk-OM2GRPDH.js';
-import '../../chunk-J52AQPKU.js';
+import '../../chunk-GLE6TNJ3.js';
 import '../../chunk-OUW6WESU.js';
 import '../../chunk-BK5TBUGG.js';
 import '../../chunk-HI5V5X3S.js';
-import '../../chunk-E5JIVIBY.js';
-import '../../chunk-XCIMWJ7P.js';
+import '../../chunk-4ZYJDSYQ.js';
+import '../../chunk-NHJ5U6WK.js';
 import '../../chunk-MVT5AF2A.js';
 import '../../chunk-Z653O7MX.js';
 import '../../chunk-ZCH7W7DZ.js';
@@ -29,15 +29,15 @@ import '../../chunk-7V36I5GT.js';
 import '../../chunk-6WI7R2BD.js';
 import '../../chunk-JGVEGQHJ.js';
 import '../../chunk-OAMIDZKW.js';
-import '../../chunk-QUDLGIR6.js';
+import '../../chunk-SGET4UYI.js';
 import '../../chunk-OQIIJRAS.js';
 import '../../chunk-V2ZDTY6H.js';
-import '../../chunk-5EKTGKJY.js';
+import '../../chunk-FN2GQ2B5.js';
 import '../../chunk-5XDPAKF5.js';
 import '../../chunk-GCPEMNSU.js';
-import '../../chunk-WNV73ZFT.js';
+import '../../chunk-5LP2K2J7.js';
 import '../../chunk-TYNZ5B2B.js';
-import '../../chunk-VEY7PJK7.js';
+import '../../chunk-JAKLD546.js';
 import '../../chunk-AXW67SY7.js';
 import '../../chunk-BYMOPN2S.js';
 import '../../chunk-SKLEJJ6M.js';

package/dist/dev/editor/ThemeEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeEditor.d.ts","sourceRoot":"","sources":["../../../src/dev/editor/ThemeEditor.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,EAA4C,KAAK,YAAY,EAAkB,MAAM,OAAO,CAAC;AACpG,OAAO,EAAyB,KAAK,SAAS,EAAE,MAAM,iBAAiB,CAAC;AA0BxE,MAAM,WAAW,gBAAgB;IAC/B,MAAM,EAAE,SAAS,CAAC;IAClB,iFAAiF;IACjF,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AA6RD,wBAAgB,WAAW,CAAC,EAAE,MAAM,EAAE,WAAW,EAAE,EAAE,gBAAgB,GAAG,YAAY,CAkGnF"}
+{"version":3,"file":"ThemeEditor.d.ts","sourceRoot":"","sources":["../../../src/dev/editor/ThemeEditor.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,EAA4C,KAAK,YAAY,EAAkB,MAAM,OAAO,CAAC;AACpG,OAAO,EAAyB,KAAK,SAAS,EAAE,MAAM,iBAAiB,CAAC;AA2BxE,MAAM,WAAW,gBAAgB;IAC/B,MAAM,EAAE,SAAS,CAAC;IAClB,iFAAiF;IACjF,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AA4VD,wBAAgB,WAAW,CAAC,EAAE,MAAM,EAAE,WAAW,EAAE,EAAE,gBAAgB,GAAG,YAAY,CAqFnF"}

package/dist/dev/editor/index.js

@@ -1,10 +1,10 @@
-import { useDevEditorMeta, devSettingsStore, useDevSettingsState, blockPath } from '../../chunk-EFMAJAIS.js';
+import { useDevEditorMeta, devSettingsStore, useDevSettingsState, blockPath } from '../../chunk-MHLKLADI.js';
 import { conditionsMet, DEV_EDITOR_FRAME_ATTR, DEV_PREVIEW_IMAGE_MAX_BYTES, DEV_PREVIEW_IMAGE_ENDPOINT } from '../../chunk-OXMUPNMH.js';
 import '../../chunk-FHU2MXZA.js';
 import '../../chunk-7VNVCHID.js';
 import '../../chunk-T72DAX7R.js';
 import '../../chunk-DGUM43GV.js';
-import { useState, useCallback, useEffect, StrictMode, useRef, useId, useMemo } from 'react';
+import { useState, useEffect, StrictMode, useRef, useCallback, useId, useMemo } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { createRoot } from 'react-dom/client';
 
@@ -311,6 +311,50 @@ function AddElementDrawer({
     ] })
   );
 }
+var BLOCK_MESSAGE = /^preview::(edit|add|moveup|movedown|duplicate|delete)\.component$/;
+function readMessage(data) {
+  const { action, data: payload } = data ?? {};
+  if (action === "preview::edit.header") return { area: "header" };
+  if (action === "preview::edit.footer") return { area: "footer" };
+  const kind = typeof action === "string" ? BLOCK_MESSAGE.exec(action)?.[1] : void 0;
+  const id = payload?.id;
+  return kind && typeof id === "string" ? { kind, id } : null;
+}
+function applyToBlock(kind, id, handlers) {
+  const index = (devSettingsStore.get().layout ?? []).findIndex((block) => block.id === id);
+  if (index === -1) return;
+  if (kind === "edit") handlers.onEdit(id);
+  else if (kind === "add") handlers.onAdd(id);
+  else if (kind === "duplicate") {
+    devSettingsStore.duplicateBlock(id);
+    devSettingsStore.focusBlock(index + 1);
+  } else if (kind === "delete") {
+    devSettingsStore.removeBlock(id);
+    handlers.onRemoved(id);
+  } else {
+    const to = kind === "moveup" ? index - 1 : index + 1;
+    devSettingsStore.moveBlock(id, to);
+    devSettingsStore.focusBlock(to);
+  }
+}
+function useLiveEditorActions(frameRef, handlers) {
+  const latest = useRef(handlers);
+  useEffect(() => {
+    latest.current = handlers;
+  });
+  useEffect(() => {
+    const onMessage = (event) => {
+      if (event.origin !== window.location.origin) return;
+      if (!frameRef.current || event.source !== frameRef.current.contentWindow) return;
+      const message = readMessage(event.data);
+      if (!message) return;
+      if ("area" in message) latest.current.onArea(message.area);
+      else applyToBlock(message.kind, message.id, latest.current);
+    };
+    window.addEventListener("message", onMessage);
+    return () => window.removeEventListener("message", onMessage);
+  }, [frameRef]);
+}
 
 // src/dev/editor/lookup.ts
 var COLORS = ["#0d9488", "#7c3aed", "#d97706", "#2563eb", "#db2777", "#059669"];
@@ -1944,15 +1988,62 @@ function PreviewCanvas({
     frameKey
   ) });
 }
-function ThemeEditor({ schema, initialPath }) {
+function usePanels(frameRef, schema) {
   const [panel, setPanel] = useState("builder");
   const [openId, setOpenId] = useState(null);
   const [adding, setAdding] = useState(false);
+  const [addAfter, setAddAfter] = useState(null);
+  const [collapsed, setCollapsed] = usePanelCollapsed();
+  const show = (next) => {
+    setPanel(next);
+    setCollapsed(false);
+    setAdding(false);
+  };
+  useLiveEditorActions(frameRef, {
+    onEdit: (id) => {
+      show("builder");
+      setOpenId(id);
+    },
+    onAdd: (afterId) => {
+      show("builder");
+      setAddAfter(afterId);
+      setAdding(true);
+    },
+    onRemoved: (id) => setOpenId((open) => open === id ? null : open),
+    onArea: () => show("settings")
+  });
   const closeAdding = useCallback(() => setAdding(false), []);
+  const pickElement = (componentPath) => {
+    const layout = devSettingsStore.get().layout ?? [];
+    const after = addAfter === null ? -1 : layout.findIndex((block) => block.id === addAfter);
+    const at = after === -1 ? layout.length : after + 1;
+    setOpenId(devSettingsStore.addBlock(schema, componentPath, at));
+    devSettingsStore.focusBlock(at);
+    setAdding(false);
+  };
+  const openAdding = () => {
+    setAddAfter(null);
+    setAdding(true);
+  };
+  return {
+    panel,
+    show,
+    openId,
+    setOpenId,
+    adding,
+    setAdding,
+    openAdding,
+    closeAdding,
+    pickElement,
+    collapsed,
+    setCollapsed
+  };
+}
+function ThemeEditor({ schema, initialPath }) {
   const [device, setDevice] = useState(readDevice);
-  const [collapsed, setCollapsed] = usePanelCollapsed();
   const { src, path, frameKey, frameRef, navigate } = useFramePath(initialPath);
   const { frameBase } = useDevEditorMeta();
+  const panels = usePanels(frameRef, schema);
   const locale = localeOf(path, frameBase);
   const t = stringsFor(locale);
   useEffect(() => {
@@ -1984,22 +2075,18 @@ function ThemeEditor({ schema, initialPath }) {
       /* @__PURE__ */ jsx(
         Rail,
         {
-          panel,
-          onPanel: (next) => {
-            setPanel(next);
-            setCollapsed(false);
-            setAdding(false);
-          },
-          collapsed,
+          panel: panels.panel,
+          onPanel: panels.show,
+          collapsed: panels.collapsed,
           onCollapsed: (next) => {
-            setCollapsed(next);
-            setAdding(false);
+            panels.setCollapsed(next);
+            panels.setAdding(false);
           },
           t
         }
       ),
-      /* @__PURE__ */ jsxs("aside", { id: PANEL_ID, className: "te-panel", role: "tabpanel", hidden: collapsed, children: [
-        panel === "builder" ? /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsxs("aside", { id: PANEL_ID, className: "te-panel", role: "tabpanel", hidden: panels.collapsed, children: [
+        panels.panel === "builder" ? /* @__PURE__ */ jsx(
           BuilderPanel,
           {
             schema,
@@ -2007,9 +2094,9 @@ function ThemeEditor({ schema, initialPath }) {
             locale,
             isHome: isHomePath(path, frameBase),
             onGoHome: () => navigate(homeOf(path, frameBase)),
-            openId,
-            onOpenId: setOpenId,
-            onAddElement: () => setAdding(true)
+            openId: panels.openId,
+            onOpenId: panels.setOpenId,
+            onAddElement: panels.openAdding
           }
         ) : /* @__PURE__ */ jsx(SettingsPanel, { schema, t }),
         /* @__PURE__ */ jsxs("div", { className: "te-panel__foot", children: [
@@ -2028,19 +2115,14 @@ function ThemeEditor({ schema, initialPath }) {
           title: pick(schema.themeName, locale) || "Storefront"
         }
       ),
-      adding && panel === "builder" && /* @__PURE__ */ jsx(
+      panels.adding && panels.panel === "builder" && /* @__PURE__ */ jsx(
         AddElementDrawer,
         {
           schema,
           t,
           locale,
-          onClose: closeAdding,
-          onPick: (componentPath) => {
-            const at = devSettingsStore.get().layout?.length ?? 0;
-            setOpenId(devSettingsStore.addBlock(schema, componentPath));
-            devSettingsStore.focusBlock(at);
-            setAdding(false);
-          }
+          onClose: panels.closeAdding,
+          onPick: panels.pickElement
         }
       )
     ] })