@salla.sa/twilight-theme-engine 1.0.119 → 1.0.122

package/dist/{store-lookup-YUA66JS6.js → store-lookup-GXBNYGCM.js}

@@ -1,11 +1,11 @@
-import { category } from './chunk-D2RUSG36.js';
-import { blog } from './chunk-GEGB34LB.js';
-import { brand } from './chunk-B6JTC5R6.js';
-import { product } from './chunk-MQALPNFL.js';
+import { category } from './chunk-P6X2QUYL.js';
+import { blog } from './chunk-YC4CEVQO.js';
+import { brand } from './chunk-3PS2WFNQ.js';
+import { product } from './chunk-ESYRKX7T.js';
 import { DEV_LOOKUP_BUDGET_MS } from './chunk-OXMUPNMH.js';
-import './chunk-T23HXVW5.js';
+import './chunk-Y57KRLGY.js';
 import './chunk-OUW6WESU.js';
-import './chunk-PFAPRJVF.js';
+import './chunk-6BQN4JKH.js';
 import './chunk-2TLIULJZ.js';
 import './chunk-GYXUYHKO.js';
 import './chunk-FHU2MXZA.js';
@@ -110,5 +110,5 @@ function lookupInStore(source, query) {
 }
 
 export { lookupInStore };
-//# sourceMappingURL=store-lookup-YUA66JS6.js.map
-//# sourceMappingURL=store-lookup-YUA66JS6.js.map
+//# sourceMappingURL=store-lookup-GXBNYGCM.js.map
+//# sourceMappingURL=store-lookup-GXBNYGCM.js.map

package/dist/{store-lookup-YUA66JS6.js.map → store-lookup-GXBNYGCM.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/dev/store-lookup.ts"],"names":["categories"],"mappings":"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","file":"store-lookup-YUA66JS6.js","sourcesContent":["/**\n * Runs in the editor's frame (the storefront), which has the engine's API\n * client set up for the dev store: answers the editor's pickers with the real\n * store's products, categories, brands and blog. Loaded with `import()` on the\n * first lookup, so a storefront never carries it.\n *\n * Each item's `data` is what a block receives for it, in the API's shape: a\n * product block reads only the ids and fetches the rest, while categories and\n * brands are drawn from what is saved.\n */\n\nimport { product } from '../api/product';\nimport { category } from '../api/category';\nimport { brand } from '../api/brands';\nimport { blog } from '../api/blog';\nimport type { Category } from '../types';\nimport { DEV_LOOKUP_BUDGET_MS, type DevLookupItem, type DevLookupSource } from './schema-types';\n\n/** Enough to choose from; a search narrows it further. */\nconst PER_PAGE = 20;\n/** How far a paged list is searched before giving up, so a big store can't stall the picker. */\nconst MAX_PAGES = 10;\n\ninterface Page<T> {\n  items: T[];\n  next: string | null;\n}\n\n/**\n * The matching items of a paged list, read page after page until there are\n * enough, the pages run out, or the time budget is spent: a brand or article on\n * page three is still found, and what was found so far always reaches the\n * editor before it stops waiting (`DEV_LOOKUP_BUDGET_MS` < its timeout).\n */\nasync function collect<T>(\n  fetchPage: (page: number, cursor: string | null) => Promise<Page<T>>,\n  keep: (item: T) => boolean\n): Promise<T[]> {\n  const deadline = Date.now() + DEV_LOOKUP_BUDGET_MS;\n  const found: T[] = [];\n  let cursor: string | null = null;\n  for (let page = 1; page <= MAX_PAGES; page += 1) {\n    const { items, next } = await fetchPage(page, cursor);\n    found.push(...items.filter(keep));\n    if (found.length >= PER_PAGE || !next || Date.now() >= deadline) break;\n    cursor = next;\n  }\n  return found.slice(0, PER_PAGE);\n}\n\nfunction matches(name: string, query: string): boolean {\n  return !query || name.toLowerCase().includes(query.toLowerCase());\n}\n\n/** Categories with their subcategories, flattened, parents first. */\nfunction flatten(categories: Category[]): Category[] {\n  return categories.flatMap((c) => [c, ...flatten(c.sub_categories ?? [])]);\n}\n\nasync function products(query: string): Promise<DevLookupItem[]> {\n  const { items } = await product.list({\n    source: query ? 'search' : 'latest',\n    ...(query ? { keyword: query } : {}),\n    perPage: PER_PAGE,\n  });\n  // List responses send the id as a numeric string; the block reads a number. Use it for both.\n  return items.map((p) => ({\n    id: Number(p.id),\n    name: p.name,\n    image: p.image?.url,\n    url: p.url,\n    data: { id: Number(p.id), name: p.name, url: p.url, image: p.image?.url ?? null },\n  }));\n}\n\nasync function categories(query: string): Promise<DevLookupItem[]> {\n  return flatten(await category.list())\n    .filter((c) => matches(c.name, query))\n    .slice(0, PER_PAGE)\n    .map((c) => ({\n      id: c.id,\n      name: c.name,\n      image: c.image ?? undefined,\n      url: c.url,\n      data: { id: c.id, name: c.name, url: c.url, image: c.image ?? null, icon: c.icon ?? null },\n    }));\n}\n\nasync function brands(query: string): Promise<DevLookupItem[]> {\n  const found = await collect(\n    (page) => brand.list(page),\n    (b) => matches(b.name, query)\n  );\n  return found.map((b) => ({\n    id: b.id,\n    name: b.name,\n    image: b.logo,\n    url: b.url,\n    data: { id: b.id, name: b.name, url: b.url, logo: b.logo, banner: b.banner ?? null },\n  }));\n}\n\nasync function blogArticles(query: string): Promise<DevLookupItem[]> {\n  const found = await collect(\n    async (_page, cursor) => {\n      const { data, cursor: pages } = await blog.articles.list(cursor ? { cursor } : undefined);\n      return { items: data, next: pages?.next ?? null };\n    },\n    (a) => matches(a.name, query)\n  );\n  return found.map((a) => ({\n    id: a.id,\n    name: a.name,\n    image: a.image,\n    url: a.url,\n    data: { id: a.id, name: a.name, url: a.url },\n  }));\n}\n\nasync function blogCategories(query: string): Promise<DevLookupItem[]> {\n  const { categories: list } = await blog.get();\n  return list\n    .filter((c) => matches(c.name, query))\n    .slice(0, PER_PAGE)\n    .map((c) => ({\n      id: c.id,\n      name: c.name,\n      url: c.url,\n      data: { id: c.id, name: c.name, url: c.url },\n    }));\n}\n\nconst LOOKUPS: Record<DevLookupSource, (query: string) => Promise<DevLookupItem[]>> = {\n  products,\n  categories,\n  brands,\n  blog_articles: blogArticles,\n  blog_categories: blogCategories,\n};\n\nexport function lookupInStore(source: DevLookupSource, query: string): Promise<DevLookupItem[]> {\n  const lookup = LOOKUPS[source];\n  if (!lookup) return Promise.reject(new Error(`no lookup for ${source}`));\n  return lookup(query.trim());\n}\n"]}
+{"version":3,"sources":["../src/dev/store-lookup.ts"],"names":["categories"],"mappings":"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","file":"store-lookup-GXBNYGCM.js","sourcesContent":["/**\n * Runs in the editor's frame (the storefront), which has the engine's API\n * client set up for the dev store: answers the editor's pickers with the real\n * store's products, categories, brands and blog. Loaded with `import()` on the\n * first lookup, so a storefront never carries it.\n *\n * Each item's `data` is what a block receives for it, in the API's shape: a\n * product block reads only the ids and fetches the rest, while categories and\n * brands are drawn from what is saved.\n */\n\nimport { product } from '../api/product';\nimport { category } from '../api/category';\nimport { brand } from '../api/brands';\nimport { blog } from '../api/blog';\nimport type { Category } from '../types';\nimport { DEV_LOOKUP_BUDGET_MS, type DevLookupItem, type DevLookupSource } from './schema-types';\n\n/** Enough to choose from; a search narrows it further. */\nconst PER_PAGE = 20;\n/** How far a paged list is searched before giving up, so a big store can't stall the picker. */\nconst MAX_PAGES = 10;\n\ninterface Page<T> {\n  items: T[];\n  next: string | null;\n}\n\n/**\n * The matching items of a paged list, read page after page until there are\n * enough, the pages run out, or the time budget is spent: a brand or article on\n * page three is still found, and what was found so far always reaches the\n * editor before it stops waiting (`DEV_LOOKUP_BUDGET_MS` < its timeout).\n */\nasync function collect<T>(\n  fetchPage: (page: number, cursor: string | null) => Promise<Page<T>>,\n  keep: (item: T) => boolean\n): Promise<T[]> {\n  const deadline = Date.now() + DEV_LOOKUP_BUDGET_MS;\n  const found: T[] = [];\n  let cursor: string | null = null;\n  for (let page = 1; page <= MAX_PAGES; page += 1) {\n    const { items, next } = await fetchPage(page, cursor);\n    found.push(...items.filter(keep));\n    if (found.length >= PER_PAGE || !next || Date.now() >= deadline) break;\n    cursor = next;\n  }\n  return found.slice(0, PER_PAGE);\n}\n\nfunction matches(name: string, query: string): boolean {\n  return !query || name.toLowerCase().includes(query.toLowerCase());\n}\n\n/** Categories with their subcategories, flattened, parents first. */\nfunction flatten(categories: Category[]): Category[] {\n  return categories.flatMap((c) => [c, ...flatten(c.sub_categories ?? [])]);\n}\n\nasync function products(query: string): Promise<DevLookupItem[]> {\n  const { items } = await product.list({\n    source: query ? 'search' : 'latest',\n    ...(query ? { keyword: query } : {}),\n    perPage: PER_PAGE,\n  });\n  // List responses send the id as a numeric string; the block reads a number. Use it for both.\n  return items.map((p) => ({\n    id: Number(p.id),\n    name: p.name,\n    image: p.image?.url,\n    url: p.url,\n    data: { id: Number(p.id), name: p.name, url: p.url, image: p.image?.url ?? null },\n  }));\n}\n\nasync function categories(query: string): Promise<DevLookupItem[]> {\n  return flatten(await category.list())\n    .filter((c) => matches(c.name, query))\n    .slice(0, PER_PAGE)\n    .map((c) => ({\n      id: c.id,\n      name: c.name,\n      image: c.image ?? undefined,\n      url: c.url,\n      data: { id: c.id, name: c.name, url: c.url, image: c.image ?? null, icon: c.icon ?? null },\n    }));\n}\n\nasync function brands(query: string): Promise<DevLookupItem[]> {\n  const found = await collect(\n    (page) => brand.list(page),\n    (b) => matches(b.name, query)\n  );\n  return found.map((b) => ({\n    id: b.id,\n    name: b.name,\n    image: b.logo,\n    url: b.url,\n    data: { id: b.id, name: b.name, url: b.url, logo: b.logo, banner: b.banner ?? null },\n  }));\n}\n\nasync function blogArticles(query: string): Promise<DevLookupItem[]> {\n  const found = await collect(\n    async (_page, cursor) => {\n      const { data, cursor: pages } = await blog.articles.list(cursor ? { cursor } : undefined);\n      return { items: data, next: pages?.next ?? null };\n    },\n    (a) => matches(a.name, query)\n  );\n  return found.map((a) => ({\n    id: a.id,\n    name: a.name,\n    image: a.image,\n    url: a.url,\n    data: { id: a.id, name: a.name, url: a.url },\n  }));\n}\n\nasync function blogCategories(query: string): Promise<DevLookupItem[]> {\n  const { categories: list } = await blog.get();\n  return list\n    .filter((c) => matches(c.name, query))\n    .slice(0, PER_PAGE)\n    .map((c) => ({\n      id: c.id,\n      name: c.name,\n      url: c.url,\n      data: { id: c.id, name: c.name, url: c.url },\n    }));\n}\n\nconst LOOKUPS: Record<DevLookupSource, (query: string) => Promise<DevLookupItem[]>> = {\n  products,\n  categories,\n  brands,\n  blog_articles: blogArticles,\n  blog_categories: blogCategories,\n};\n\nexport function lookupInStore(source: DevLookupSource, query: string): Promise<DevLookupItem[]> {\n  const lookup = LOOKUPS[source];\n  if (!lookup) return Promise.reject(new Error(`no lookup for ${source}`));\n  return lookup(query.trim());\n}\n"]}

package/dist/tanstack.js

@@ -1,25 +1,25 @@
-export { tanstackDocumentAdapter as attrs, createRouter, createTwilightRootRoute, useTanstackDocumentAttrs as useAttrs } from './chunk-Y36VLQGV.js';
-import { requestHostOf } from './chunk-NU2LPGNB.js';
-export { TanStackLinkAdapter, TanStackNavigationProvider, createTanStackLinkAdapter } from './chunk-NU2LPGNB.js';
+export { tanstackDocumentAdapter as attrs, createRouter, createTwilightRootRoute, useTanstackDocumentAttrs as useAttrs } from './chunk-UNDCL5EE.js';
+import { requestHostOf } from './chunk-XK6TXHVO.js';
+export { TanStackLinkAdapter, TanStackNavigationProvider, createTanStackLinkAdapter } from './chunk-XK6TXHVO.js';
 import './chunk-Z4Y55HWX.js';
 export { tanstackHeadAdapter as head, withHead } from './chunk-EHTLXK5F.js';
 import { CRITICAL_STYLE_HREF } from './chunk-4FJGZQD3.js';
-import './chunk-EFCIK5NI.js';
-import { readNativeAppHeaders } from './chunk-IRQJBRKV.js';
-import './chunk-E552K72T.js';
-import './chunk-MQALPNFL.js';
+import './chunk-EA334DDV.js';
+import { readNativeAppHeaders } from './chunk-JOY7HCIH.js';
+import './chunk-QMKC7PA2.js';
+import './chunk-ESYRKX7T.js';
 import { rootHead, maintenanceEvidence, MAINTENANCE_EVIDENCE_HEADER, maintenanceEvidenceHeader } from './chunk-D6XHL6VQ.js';
 import './chunk-JYV25VNZ.js';
-import './chunk-UMTMIMH7.js';
+import './chunk-MWOP57ZR.js';
 import './chunk-5FJFN3IW.js';
 import './chunk-GD26FI4J.js';
 import './chunk-OM2GRPDH.js';
-import './chunk-T23HXVW5.js';
+import './chunk-Y57KRLGY.js';
 import './chunk-OUW6WESU.js';
 import './chunk-JWXJPJBO.js';
 export { mergeDocumentDescriptors as mergeAttrs } from './chunk-CW625T2E.js';
-import './chunk-VI2WHQDR.js';
-import './chunk-PFAPRJVF.js';
+import './chunk-6JS7UZ3S.js';
+import './chunk-6BQN4JKH.js';
 import './chunk-TYNZ5B2B.js';
 import './chunk-BYMOPN2S.js';
 import './chunk-2TLIULJZ.js';

package/dist/utils/fast-checkout.d.ts

@@ -5,7 +5,7 @@
  * head, on idle elsewhere) and deduped by src, not by id.
  */
 export declare const FAST_CHECKOUT_SCRIPT_ID = "fast-checkout-js";
-export declare const FAST_CHECKOUT_SCRIPT_URL = "https://cdn.assets.salla.network/mini-checkout/widget/widget.esm.js?v=0.0.9";
+export declare const FAST_CHECKOUT_SCRIPT_URL = "https://cdn.assets.salla.network/prod/@salla.sa/fast-checkout-widget/v0.0.47/widget.esm.js";
 export declare const fastCheckoutScript: () => {
     type: string;
     src: string;

package/dist/utils/fast-checkout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"fast-checkout.d.ts","sourceRoot":"","sources":["../../src/utils/fast-checkout.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,eAAO,MAAM,uBAAuB,qBAAqB,CAAC;AAC1D,eAAO,MAAM,wBAAwB,gFAC0C,CAAC;AAEhF,eAAO,MAAM,kBAAkB;;;CAA4D,CAAC;AAE5F;;;;GAIG;AACH,wBAAgB,wBAAwB,IAAI,IAAI,CAK/C"}
+{"version":3,"file":"fast-checkout.d.ts","sourceRoot":"","sources":["../../src/utils/fast-checkout.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,eAAO,MAAM,uBAAuB,qBAAqB,CAAC;AAI1D,eAAO,MAAM,wBAAwB,+FACyD,CAAC;AAE/F,eAAO,MAAM,kBAAkB;;;CAA4D,CAAC;AAE5F;;;;GAIG;AACH,wBAAgB,wBAAwB,IAAI,IAAI,CAK/C"}

package/dist/utils/index.js

@@ -1,6 +1,6 @@
 export { stripUnsafeHtml } from '../chunk-RUHSV4Z6.js';
 export { formatSallaPlural } from '../chunk-BT6HEEAP.js';
-export { dispatchRouteChanged } from '../chunk-EFCIK5NI.js';
+export { dispatchRouteChanged } from '../chunk-EA334DDV.js';
 export { sortOptions } from '../chunk-3LZJXKVO.js';
 export { color } from '../chunk-VVZNW5CB.js';
 export { applyAppScopeMocks, registerThemeHookSlots } from '../chunk-5FJFN3IW.js';
@@ -8,7 +8,7 @@ export { mergeHead, resolveHead, setHeadAdapter } from '../chunk-GD26FI4J.js';
 export { buildBaseHead, buildHreflangAlternates, localeToOgLocale } from '../chunk-OM2GRPDH.js';
 export { asset, cdn, isPlaceholder } from '../chunk-ZCH7W7DZ.js';
 export { mergeDocumentDescriptors, mergeElementAttrs, normalizeClasses, syncAttrsToElement, toReactProps } from '../chunk-CW625T2E.js';
-import '../chunk-PFAPRJVF.js';
+import '../chunk-6BQN4JKH.js';
 export { getSallaSDK, getStoreIdentifier, onSallaEvent, whenSallaLoaded, whenSallaReady } from '../chunk-GYXUYHKO.js';
 export { AUTH_TOKEN_COOKIE_NAME, clearAuthTokenCookie, extractTokenFromCookies } from '../chunk-FHU2MXZA.js';
 import '../chunk-7VNVCHID.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salla.sa/twilight-theme-engine",
-  "version": "1.0.119",
+  "version": "1.0.122",
   "publishConfig": {
     "access": "public"
   },

package/tailwind/components/common/RenderWhenVisible.tsx.txt

@@ -20,6 +20,8 @@ export interface RenderWhenVisibleProps {
   renderOnMount?: boolean;
   /** @internal Home block position, rendered as `data-home-block` for the dev editor's scroll-to. */
   blockIndex?: number;
+  /** @internal The block's id in the store, rendered as `data-live-block` for the theme editor's action bar. */
+  liveBlockId?: string;
 }
 
 /**
@@ -45,6 +47,7 @@ export const RenderWhenVisible = memo(function RenderWhenVisible({
   estimatedHeight = '400px',
   renderOnMount = false,
   blockIndex,
+  liveBlockId,
 }: RenderWhenVisibleProps) {
   const ref = useRef<HTMLElement>(null);
   const [visible, setVisible] = useState(renderOnMount);
@@ -84,6 +87,7 @@ export const RenderWhenVisible = memo(function RenderWhenVisible({
       className={className}
       id={id}
       data-home-block={blockIndex}
+      data-live-block={liveBlockId}
       style={{ minHeight: mounted ? undefined : estimatedHeight }}
     >
       {visible ? (

package/tailwind/components/home/HomePageRenderer.tsx.txt

@@ -253,6 +253,12 @@ export const HomeComponentRenderer = memo(function HomeComponentRenderer({
       ? config.id(data)
       : config.id
     : undefined;
+  // What the theme editor addresses the block by: its row id, or the uuid of one not saved yet.
+  const blockId = data.id ?? data.key;
+  const liveBlockId =
+    typeof blockId === 'number' || (typeof blockId === 'string' && blockId)
+      ? String(blockId)
+      : undefined;
   const height = config?.height || '400px';
   // A theme's config replaces the engine's, but keeps its mount timing unless the theme sets one.
   const renderOnMount = config?.renderOnMount ?? COMPONENT_CONFIG[data.path]?.renderOnMount;
@@ -279,6 +285,7 @@ export const HomeComponentRenderer = memo(function HomeComponentRenderer({
         placeholder={config?.placeholder ?? <ProductsSliderSkeleton />}
         // Dev only: lets the theme editor scroll the preview to a block.
         blockIndex={import.meta.env.DEV ? index : undefined}
+        liveBlockId={liveBlockId}
       >
         {content}
       </RenderWhenVisible>

package/tailwind/components/live-editor/LiveEditorBar.tsx.txt

@@ -0,0 +1,417 @@
+import {
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  type CSSProperties,
+  type ReactElement,
+  type RefObject,
+} from 'react';
+import { createPortal } from 'react-dom';
+import { useTranslation } from '../../providers/I18nProvider';
+import { BLOCK_ATTRIBUTE, areaOf, postToEditor, targetOf, type BlockAction } from './frame';
+
+const ACCENT = '#5dd5c4';
+const LAYER = 2147483000;
+/** The editor reloads the preview after hide, duplicate and delete; stop waiting if it doesn't. */
+const BUSY_TIMEOUT_MS = 10_000;
+/** How long a link's click waits for a second one, so a double-click edits instead of navigating. */
+const DOUBLE_CLICK_MS = 300;
+
+/** Defaults for the `blocks.live_editor.*` keys, in the store's language. */
+const DEFAULT_LABELS = {
+  ar: {
+    edit: 'تعديل',
+    hide: 'إخفاء',
+    moveup: 'تحريك لأعلى',
+    movedown: 'تحريك لأسفل',
+    duplicate: 'تكرار',
+    add: 'إضافة عنصر',
+    delete: 'حذف',
+    header: 'رأس الصفحة',
+    footer: 'ذيل الصفحة',
+  },
+  en: {
+    edit: 'Edit',
+    hide: 'Hide',
+    moveup: 'Move up',
+    movedown: 'Move down',
+    duplicate: 'Duplicate',
+    add: 'Add element',
+    delete: 'Delete',
+    header: 'Header',
+    footer: 'Footer',
+  },
+} as const;
+
+/** Twig's order, read from the start of the line: edit first, delete last. */
+const BLOCK_ACTIONS: BlockAction[] = [
+  'edit',
+  'hide',
+  'moveup',
+  'movedown',
+  'duplicate',
+  'add',
+  'delete',
+];
+
+/** Lucide-style 24px stroke icons. */
+const ICONS: Record<BlockAction, ReactElement> = {
+  edit: (
+    <>
+      <path d="M12 20h9" />
+      <path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z" />
+    </>
+  ),
+  hide: (
+    <>
+      <path d="M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 10 8 10 8a13.16 13.16 0 0 1-1.67 2.68" />
+      <path d="M6.61 6.61A13.53 13.53 0 0 0 2 12s3 8 10 8a9.74 9.74 0 0 0 5.39-1.61" />
+      <path d="M9.88 9.88a3 3 0 1 0 4.24 4.24" />
+      <path d="m2 2 20 20" />
+    </>
+  ),
+  moveup: <path d="m18 15-6-6-6 6" />,
+  movedown: <path d="m6 9 6 6 6-6" />,
+  duplicate: (
+    <>
+      <rect x="8" y="8" width="14" height="14" rx="2" />
+      <path d="M4 16a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2" />
+    </>
+  ),
+  add: <path d="M12 5v14M5 12h14" />,
+  delete: (
+    <>
+      <path d="M3 6h18" />
+      <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" />
+      <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
+    </>
+  ),
+};
+
+const OUTLINE: CSSProperties = {
+  position: 'fixed',
+  zIndex: LAYER,
+  pointerEvents: 'none',
+  boxSizing: 'border-box',
+  border: `2px solid ${ACCENT}`,
+};
+
+const CHIP: CSSProperties = {
+  position: 'absolute',
+  top: 0,
+  insetInlineStart: 0,
+  padding: '4px 12px',
+  background: ACCENT,
+  color: '#0f172a',
+  font: '500 14px/1.4 system-ui, sans-serif',
+  whiteSpace: 'nowrap',
+};
+
+const BAR: CSSProperties = {
+  position: 'fixed',
+  zIndex: LAYER + 1,
+  display: 'flex',
+  gap: 4,
+  padding: 6,
+  background: '#fff',
+  borderRadius: 8,
+  boxShadow: '0 4px 16px rgba(15, 23, 42, 0.18)',
+  transform: 'translateX(-50%)',
+};
+
+function buttonStyle(action: BlockAction | 'area', disabled: boolean): CSSProperties {
+  return {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 6,
+    minWidth: 36,
+    height: 36,
+    padding: '0 8px',
+    border: 0,
+    borderRadius: 6,
+    background: 'transparent',
+    color: action === 'delete' ? '#e11d48' : action === 'edit' ? '#0d9488' : '#475569',
+    font: '500 14px/1 system-ui, sans-serif',
+    cursor: disabled ? 'default' : 'pointer',
+    opacity: disabled ? 0.35 : 1,
+  };
+}
+
+function Icon({ children }: { children: ReactElement }) {
+  return (
+    <svg
+      width="18"
+      height="18"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      {children}
+    </svg>
+  );
+}
+
+/** The blocks `el` can trade places with: its siblings in the same list. */
+function blockSiblings(el: HTMLElement): HTMLElement[] {
+  const parent = el.parentElement;
+  if (!parent) return [el];
+  return Array.from(parent.children).filter(
+    (child): child is HTMLElement =>
+      child instanceof HTMLElement && child.hasAttribute(BLOCK_ATTRIBUTE)
+  );
+}
+
+function connected(el: HTMLElement | null): HTMLElement | null {
+  return el?.isConnected ? el : null;
+}
+
+/** Re-renders on scroll, resize and layout shifts, so the overlay follows what it outlines. */
+function useLayoutTick(active: boolean): void {
+  const [, setTick] = useState(0);
+  useEffect(() => {
+    if (!active) return;
+    let frame = 0;
+    const schedule = () => {
+      cancelAnimationFrame(frame);
+      frame = requestAnimationFrame(() => setTick((n) => n + 1));
+    };
+    window.addEventListener('scroll', schedule, { capture: true, passive: true });
+    window.addEventListener('resize', schedule);
+    const observer = typeof ResizeObserver !== 'undefined' ? new ResizeObserver(schedule) : null;
+    observer?.observe(document.body);
+    return () => {
+      cancelAnimationFrame(frame);
+      window.removeEventListener('scroll', schedule, { capture: true });
+      window.removeEventListener('resize', schedule);
+      observer?.disconnect();
+    };
+  }, [active]);
+}
+
+type LabelKey = keyof typeof DEFAULT_LABELS.en;
+type Labels = Record<LabelKey, string>;
+
+function useLabels(): Labels {
+  const { t, i18n } = useTranslation();
+  const defaults = i18n?.language?.startsWith('ar') ? DEFAULT_LABELS.ar : DEFAULT_LABELS.en;
+  return Object.fromEntries(
+    (Object.keys(defaults) as LabelKey[]).map((key) => [
+      key,
+      t(`blocks.live_editor.${key}`, { defaultValue: defaults[key] }),
+    ])
+  ) as Labels;
+}
+
+/**
+ * Holds a link's click inside a block, the header or the footer for
+ * {@link DOUBLE_CLICK_MS}: a second click on the same link makes it a
+ * double-click, which edits the area, and the link never navigates; otherwise
+ * the click is replayed. A click on another link drops the first one.
+ */
+function useHeldLinkClicks(barRef: RefObject<HTMLDivElement | null>): void {
+  useEffect(() => {
+    let held: { link: HTMLAnchorElement; timer: number } | null = null;
+    let replaying = false;
+
+    const onClick = (event: MouseEvent) => {
+      if (replaying || event.button !== 0) return;
+      if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
+      if (barRef.current?.contains(event.target as Node)) return;
+      const link = event.target instanceof Element ? event.target.closest('a[href]') : null;
+      if (!(link instanceof HTMLAnchorElement) || !targetOf(link)) return;
+
+      // Before the router's own handler, which sits below the document.
+      event.preventDefault();
+      event.stopPropagation();
+      const previous = held;
+      if (previous) {
+        window.clearTimeout(previous.timer);
+        held = null;
+        if (previous.link === link) return;
+      }
+      const timer = window.setTimeout(() => {
+        held = null;
+        replaying = true;
+        link.click();
+        replaying = false;
+      }, DOUBLE_CLICK_MS);
+      held = { link, timer };
+    };
+
+    document.addEventListener('click', onClick, true);
+    return () => {
+      document.removeEventListener('click', onClick, true);
+      if (held) window.clearTimeout(held.timer);
+    };
+  }, [barRef]);
+}
+
+function Outline({ el, label }: { el: HTMLElement; label?: string }) {
+  const rect = el.getBoundingClientRect();
+  return (
+    <div
+      data-testid="live-editor-outline"
+      style={{ ...OUTLINE, top: rect.top, left: rect.left, width: rect.width, height: rect.height }}
+    >
+      {label && <span style={CHIP}>{label}</span>}
+    </div>
+  );
+}
+
+interface ToolbarProps {
+  target: HTMLElement;
+  labels: Labels;
+  busy: BlockAction | null;
+  barRef: RefObject<HTMLDivElement | null>;
+  onAct: (el: HTMLElement, action: BlockAction) => void;
+}
+
+/** One edit button for the header or footer; the full set for a block. */
+function Toolbar({ target, labels, busy, barRef, onAct }: ToolbarProps) {
+  const rect = target.getBoundingClientRect();
+  const style: CSSProperties = {
+    ...BAR,
+    top: Math.max(rect.top + 8, 8),
+    left: rect.left + rect.width / 2,
+  };
+
+  if (areaOf(target)) {
+    return (
+      <div ref={barRef} data-testid="live-editor-bar" style={style}>
+        <button
+          type="button"
+          data-testid="live-editor-edit"
+          style={buttonStyle('area', false)}
+          onClick={() => onAct(target, 'edit')}
+        >
+          <Icon>{ICONS.edit}</Icon>
+          {labels.edit}
+        </button>
+      </div>
+    );
+  }
+
+  const siblings = blockSiblings(target);
+  const index = siblings.indexOf(target);
+  const isDisabled = (action: BlockAction) =>
+    busy !== null ||
+    (action === 'moveup' && index <= 0) ||
+    (action === 'movedown' && index >= siblings.length - 1);
+
+  return (
+    <div
+      ref={barRef}
+      data-testid="live-editor-bar"
+      role="toolbar"
+      aria-label={labels.edit}
+      style={style}
+    >
+      {BLOCK_ACTIONS.map((action) => (
+        <button
+          key={action}
+          type="button"
+          data-testid={`live-editor-${action}`}
+          title={labels[action]}
+          aria-label={labels[action]}
+          aria-busy={busy === action || undefined}
+          disabled={isDisabled(action)}
+          style={buttonStyle(action, isDisabled(action))}
+          onClick={() => onAct(target, action)}
+        >
+          <Icon>{ICONS[action]}</Icon>
+        </button>
+      ))}
+    </div>
+  );
+}
+
+/**
+ * The live editor's action bar: hovering a home block outlines it and shows
+ * 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.
+ */
+export function LiveEditorBar({ origin }: { origin: string }): ReactElement | null {
+  const [hovered, setHovered] = useState<HTMLElement | null>(null);
+  const [editing, setEditing] = useState<HTMLElement | null>(null);
+  const [busy, setBusy] = useState<BlockAction | null>(null);
+  const barRef = useRef<HTMLDivElement>(null);
+  // Taken after mount, so nothing reads the DOM while rendering.
+  const [host, setHost] = useState<HTMLElement | null>(null);
+  const labels = useLabels();
+  useHeldLinkClicks(barRef);
+
+  const act = useCallback(
+    (el: HTMLElement, action: BlockAction) => {
+      const area = areaOf(el);
+      if (area) {
+        postToEditor(origin, `preview::edit.${area}`, { id: `store-${area}` });
+        setEditing(el);
+        return;
+      }
+      const id = el.getAttribute(BLOCK_ATTRIBUTE);
+      if (!id) return;
+      postToEditor(origin, `preview::${action}.component`, { id });
+      if (action === 'edit') setEditing(el);
+      else if (action === 'hide' || action === 'duplicate' || action === 'delete') setBusy(action);
+    },
+    [origin]
+  );
+
+  useEffect(() => {
+    const onOver = (event: MouseEvent) => {
+      // The bar sits over the block it acts on: reaching it keeps that block.
+      if (barRef.current?.contains(event.target as Node)) return;
+      setHovered(targetOf(event.target));
+    };
+    const onOut = (event: MouseEvent) => {
+      if (!event.relatedTarget) setHovered(null);
+    };
+    const onDoubleClick = (event: MouseEvent) => {
+      if (barRef.current?.contains(event.target as Node)) return;
+      const el = targetOf(event.target);
+      if (el) act(el, 'edit');
+    };
+    document.addEventListener('mouseover', onOver);
+    document.addEventListener('mouseout', onOut);
+    document.addEventListener('dblclick', onDoubleClick);
+    return () => {
+      document.removeEventListener('mouseover', onOver);
+      document.removeEventListener('mouseout', onOut);
+      document.removeEventListener('dblclick', onDoubleClick);
+    };
+  }, [act]);
+
+  useEffect(() => setHost(document.body), []);
+
+  useEffect(() => {
+    if (!busy) return;
+    const timer = window.setTimeout(() => setBusy(null), BUSY_TIMEOUT_MS);
+    return () => window.clearTimeout(timer);
+  }, [busy]);
+
+  const target = connected(hovered);
+  const selected = connected(editing);
+  useLayoutTick(Boolean(target || selected));
+
+  if (!host || (!target && !selected)) return null;
+
+  const targetArea = target ? areaOf(target) : null;
+
+  return createPortal(
+    <>
+      {selected && selected !== target && <Outline el={selected} />}
+      {target && <Outline el={target} label={targetArea ? labels[targetArea] : undefined} />}
+      {target && (
+        <Toolbar target={target} labels={labels} busy={busy} barRef={barRef} onAct={act} />
+      )}
+    </>,
+    host
+  );
+}