@salla.sa/twilight-theme-engine 1.0.94 → 1.0.96

package/dist/dev/editor/index.js

@@ -0,0 +1,2059 @@
+import { useDevEditorMeta, devSettingsStore, useDevSettingsState, blockPath } from '../../chunk-COJH52VR.js';
+import { conditionsMet, DEV_EDITOR_FRAME_ATTR, DEV_PREVIEW_IMAGE_MAX_BYTES, DEV_PREVIEW_IMAGE_ENDPOINT } from '../../chunk-N45X7D55.js';
+import '../../chunk-FO4WVGUQ.js';
+import '../../chunk-N2S25NXP.js';
+import '../../chunk-T72DAX7R.js';
+import '../../chunk-DGUM43GV.js';
+import { useState, useCallback, useEffect, StrictMode, useRef, useId, useMemo } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { createRoot } from 'react-dom/client';
+
+// src/dev/editor/i18n.ts
+var en = {
+  homePage: "Home page",
+  builder: "Page elements",
+  showPanel: "Show the side panel",
+  hidePanel: "Hide the side panel",
+  settings: "Theme settings",
+  addElement: "Add new element",
+  pickFromStore: "Choose from the store",
+  change: "Change",
+  done: "Done",
+  searchStore: "Search the store",
+  searching: "Searching\u2026",
+  noResults: "Nothing found.",
+  sampleNotice: "Sample data: the dev store has none of these, or could not be reached.",
+  sampleProducts: "Sample products only show how the field works: the block fetches products from the store, so it can't display them.",
+  linkTo: "Link to",
+  typeUrl: "URL",
+  searchElements: "Search elements",
+  noMatches: "No element matches that search.",
+  close: "Close",
+  cancel: "Cancel",
+  storeLayoutHint: "The home page shows the store's elements. Customize it to add, remove and reorder elements here.",
+  customize: "Customize page elements",
+  startEmpty: "Start from an empty page",
+  backToStore: "Back to the store's elements",
+  confirm: "Click again to confirm",
+  noBlocks: "No elements yet.",
+  noFields: "No editable fields.",
+  storeBlock: "store",
+  notDeclared: "Not declared in twilight.json, so it renders with the store's data as-is.",
+  back: "Back",
+  duplicate: "Duplicate",
+  remove: "Remove",
+  moveUp: "Move up",
+  moveDown: "Move down",
+  mobile: "Mobile",
+  desktop: "Desktop",
+  preview: "Preview",
+  saving: "Saving\u2026",
+  saved: "Saved",
+  saveError: "Could not save",
+  savedTo: "Changes save to",
+  openStorefront: "Open the storefront in a new tab",
+  reload: "Reload the preview",
+  notHome: "You are not on the home page.",
+  goHome: "Go to it",
+  previewOff: "Preview is off: turn it on to see your changes.",
+  resetSettings: "Reset settings to twilight.json defaults",
+  noSettings: "twilight.json declares no settings.",
+  waitingForStore: "Loading the home page\u2026",
+  items: (n) => `${n} item${n === 1 ? "" : "s"}`,
+  item: "Item",
+  language: "Language",
+  outOfRange: (min, max) => min !== void 0 && max !== void 0 ? `Between ${min} and ${max}.` : min !== void 0 ? `At least ${min}.` : `At most ${max}.`,
+  uploading: "Uploading\u2026",
+  uploadFailed: "Could not upload that image.",
+  addItem: (label) => `Add ${label}`,
+  minItems: (n) => `Needs at least ${n}.`,
+  chooseImage: "Choose an image from your computer",
+  imageTooLarge: "That image is over 5 MB. Use a smaller one, or paste its URL."
+};
+var ar = {
+  homePage: "\u0627\u0644\u0635\u0641\u062D\u0629 \u0627\u0644\u0631\u0626\u064A\u0633\u064A\u0629",
+  builder: "\u0639\u0646\u0627\u0635\u0631 \u0627\u0644\u0635\u0641\u062D\u0629",
+  showPanel: "\u0625\u0638\u0647\u0627\u0631 \u0627\u0644\u0642\u0627\u0626\u0645\u0629 \u0627\u0644\u062C\u0627\u0646\u0628\u064A\u0629",
+  hidePanel: "\u0625\u062E\u0641\u0627\u0621 \u0627\u0644\u0642\u0627\u0626\u0645\u0629 \u0627\u0644\u062C\u0627\u0646\u0628\u064A\u0629",
+  settings: "\u0625\u0639\u062F\u0627\u062F\u0627\u062A \u0627\u0644\u062B\u064A\u0645",
+  addElement: "\u0625\u0636\u0627\u0641\u0629 \u0639\u0646\u0635\u0631 \u062C\u062F\u064A\u062F",
+  pickFromStore: "\u0627\u062E\u062A\u064A\u0627\u0631 \u0645\u0646 \u0627\u0644\u0645\u062A\u062C\u0631",
+  change: "\u062A\u063A\u064A\u064A\u0631",
+  done: "\u062A\u0645",
+  searchStore: "\u0627\u0628\u062D\u062B \u0641\u064A \u0627\u0644\u0645\u062A\u062C\u0631",
+  searching: "\u062C\u0627\u0631\u064D \u0627\u0644\u0628\u062D\u062B\u2026",
+  noResults: "\u0644\u0627 \u062A\u0648\u062C\u062F \u0646\u062A\u0627\u0626\u062C.",
+  sampleNotice: "\u0628\u064A\u0627\u0646\u0627\u062A \u062A\u062C\u0631\u064A\u0628\u064A\u0629: \u0644\u0627 \u064A\u062D\u062A\u0648\u064A \u0645\u062A\u062C\u0631 \u0627\u0644\u062A\u0637\u0648\u064A\u0631 \u0639\u0644\u0649 \u0647\u0630\u0647 \u0627\u0644\u0639\u0646\u0627\u0635\u0631\u060C \u0623\u0648 \u062A\u0639\u0630\u0651\u0631 \u0627\u0644\u0648\u0635\u0648\u0644 \u0625\u0644\u064A\u0647.",
+  sampleProducts: "\u0627\u0644\u0645\u0646\u062A\u062C\u0627\u062A \u0627\u0644\u062A\u062C\u0631\u064A\u0628\u064A\u0629 \u0644\u062A\u062C\u0631\u0628\u0629 \u0627\u0644\u062D\u0642\u0644 \u0641\u0642\u0637: \u0627\u0644\u0639\u0646\u0635\u0631 \u064A\u062C\u0644\u0628 \u0627\u0644\u0645\u0646\u062A\u062C\u0627\u062A \u0645\u0646 \u0627\u0644\u0645\u062A\u062C\u0631\u060C \u0641\u0644\u0646 \u064A\u0639\u0631\u0636\u0647\u0627.",
+  linkTo: "\u0627\u0644\u0631\u0627\u0628\u0637 \u0625\u0644\u0649",
+  typeUrl: "\u0631\u0627\u0628\u0637",
+  searchElements: "\u0627\u0628\u062D\u062B \u0641\u064A \u0627\u0644\u0639\u0646\u0627\u0635\u0631",
+  noMatches: "\u0644\u0627 \u064A\u0648\u062C\u062F \u0639\u0646\u0635\u0631 \u064A\u0637\u0627\u0628\u0642 \u0627\u0644\u0628\u062D\u062B.",
+  close: "\u0625\u063A\u0644\u0627\u0642",
+  cancel: "\u0625\u0644\u063A\u0627\u0621",
+  storeLayoutHint: "\u062A\u0639\u0631\u0636 \u0627\u0644\u0635\u0641\u062D\u0629 \u0639\u0646\u0627\u0635\u0631 \u0627\u0644\u0645\u062A\u062C\u0631. \u062E\u0635\u0651\u0635\u0647\u0627 \u0644\u062A\u0636\u064A\u0641 \u0627\u0644\u0639\u0646\u0627\u0635\u0631 \u0648\u062A\u062D\u0630\u0641\u0647\u0627 \u0648\u062A\u0631\u062A\u0651\u0628\u0647\u0627 \u0645\u0646 \u0647\u0646\u0627.",
+  customize: "\u062A\u062E\u0635\u064A\u0635 \u0639\u0646\u0627\u0635\u0631 \u0627\u0644\u0635\u0641\u062D\u0629",
+  startEmpty: "\u0627\u0644\u0628\u062F\u0621 \u0628\u0635\u0641\u062D\u0629 \u0641\u0627\u0631\u063A\u0629",
+  backToStore: "\u0627\u0644\u0639\u0648\u062F\u0629 \u0625\u0644\u0649 \u0639\u0646\u0627\u0635\u0631 \u0627\u0644\u0645\u062A\u062C\u0631",
+  confirm: "\u0627\u0636\u063A\u0637 \u0645\u0631\u0629 \u0623\u062E\u0631\u0649 \u0644\u0644\u062A\u0623\u0643\u064A\u062F",
+  noBlocks: "\u0644\u0627 \u062A\u0648\u062C\u062F \u0639\u0646\u0627\u0635\u0631 \u0628\u0639\u062F.",
+  noFields: "\u0644\u0627 \u062A\u0648\u062C\u062F \u062D\u0642\u0648\u0644 \u0642\u0627\u0628\u0644\u0629 \u0644\u0644\u062A\u0639\u062F\u064A\u0644.",
+  storeBlock: "\u0645\u0646 \u0627\u0644\u0645\u062A\u062C\u0631",
+  notDeclared: "\u063A\u064A\u0631 \u0645\u0639\u0631\u0651\u0641 \u0641\u064A twilight.json\u060C \u0644\u0630\u0627 \u064A\u064F\u0639\u0631\u0636 \u0628\u0628\u064A\u0627\u0646\u0627\u062A \u0627\u0644\u0645\u062A\u062C\u0631 \u0643\u0645\u0627 \u0647\u064A.",
+  back: "\u0631\u062C\u0648\u0639",
+  duplicate: "\u062A\u0643\u0631\u0627\u0631",
+  remove: "\u062D\u0630\u0641",
+  moveUp: "\u062A\u062D\u0631\u064A\u0643 \u0644\u0623\u0639\u0644\u0649",
+  moveDown: "\u062A\u062D\u0631\u064A\u0643 \u0644\u0623\u0633\u0641\u0644",
+  mobile: "\u0627\u0644\u062C\u0648\u0627\u0644",
+  desktop: "\u0633\u0637\u062D \u0627\u0644\u0645\u0643\u062A\u0628",
+  preview: "\u0627\u0644\u0645\u0639\u0627\u064A\u0646\u0629",
+  saving: "\u062C\u0627\u0631\u064D \u0627\u0644\u062D\u0641\u0638\u2026",
+  saved: "\u062A\u0645 \u0627\u0644\u062D\u0641\u0638",
+  saveError: "\u062A\u0639\u0630\u0651\u0631 \u0627\u0644\u062D\u0641\u0638",
+  savedTo: "\u062A\u064F\u062D\u0641\u0638 \u0627\u0644\u062A\u063A\u064A\u064A\u0631\u0627\u062A \u0641\u064A",
+  openStorefront: "\u0641\u062A\u062D \u0627\u0644\u0645\u062A\u062C\u0631 \u0641\u064A \u062A\u0628\u0648\u064A\u0628 \u062C\u062F\u064A\u062F",
+  reload: "\u0625\u0639\u0627\u062F\u0629 \u062A\u062D\u0645\u064A\u0644 \u0627\u0644\u0645\u0639\u0627\u064A\u0646\u0629",
+  notHome: "\u0623\u0646\u062A \u0644\u0633\u062A \u0641\u064A \u0627\u0644\u0635\u0641\u062D\u0629 \u0627\u0644\u0631\u0626\u064A\u0633\u064A\u0629.",
+  goHome: "\u0627\u0644\u0630\u0647\u0627\u0628 \u0625\u0644\u064A\u0647\u0627",
+  previewOff: "\u0627\u0644\u0645\u0639\u0627\u064A\u0646\u0629 \u0645\u062A\u0648\u0642\u0641\u0629: \u0641\u0639\u0651\u0644\u0647\u0627 \u0644\u062A\u0631\u0649 \u062A\u063A\u064A\u064A\u0631\u0627\u062A\u0643.",
+  resetSettings: "\u0627\u0633\u062A\u0639\u0627\u062F\u0629 \u0627\u0644\u0625\u0639\u062F\u0627\u062F\u0627\u062A \u0627\u0644\u0627\u0641\u062A\u0631\u0627\u0636\u064A\u0629 \u0645\u0646 twilight.json",
+  noSettings: "\u0644\u0627 \u064A\u0639\u0631\u0651\u0641 twilight.json \u0623\u064A \u0625\u0639\u062F\u0627\u062F\u0627\u062A.",
+  waitingForStore: "\u062C\u0627\u0631\u064D \u062A\u062D\u0645\u064A\u0644 \u0627\u0644\u0635\u0641\u062D\u0629 \u0627\u0644\u0631\u0626\u064A\u0633\u064A\u0629\u2026",
+  items: (n) => `${n} \u0639\u0646\u0635\u0631`,
+  item: "\u0639\u0646\u0635\u0631",
+  language: "\u0627\u0644\u0644\u063A\u0629",
+  outOfRange: (min, max) => min !== void 0 && max !== void 0 ? `\u0628\u064A\u0646 ${min} \u0648 ${max}.` : min !== void 0 ? `${min} \u0639\u0644\u0649 \u0627\u0644\u0623\u0642\u0644.` : `${max} \u0639\u0644\u0649 \u0627\u0644\u0623\u0643\u062B\u0631.`,
+  uploading: "\u062C\u0627\u0631\u064D \u0627\u0644\u0631\u0641\u0639\u2026",
+  uploadFailed: "\u062A\u0639\u0630\u0651\u0631 \u0631\u0641\u0639 \u0627\u0644\u0635\u0648\u0631\u0629.",
+  addItem: (label) => `\u0625\u0636\u0627\u0641\u0629 ${label}`,
+  minItems: (n) => `\u064A\u0644\u0632\u0645 ${n} \u0639\u0644\u0649 \u0627\u0644\u0623\u0642\u0644.`,
+  chooseImage: "\u0627\u062E\u062A\u064A\u0627\u0631 \u0635\u0648\u0631\u0629 \u0645\u0646 \u062C\u0647\u0627\u0632\u0643",
+  imageTooLarge: "\u062D\u062C\u0645 \u0627\u0644\u0635\u0648\u0631\u0629 \u0623\u0643\u0628\u0631 \u0645\u0646 5 \u0645\u064A\u062C\u0627\u0628\u0627\u064A\u062A. \u0627\u0633\u062A\u062E\u062F\u0645 \u0635\u0648\u0631\u0629 \u0623\u0635\u063A\u0631 \u0623\u0648 \u0627\u0644\u0635\u0642 \u0631\u0627\u0628\u0637\u0647\u0627."
+};
+var STRINGS = { ar, en };
+function stringsFor(locale) {
+  return STRINGS[locale] ?? en;
+}
+function pick(values, locale) {
+  if (!values) return "";
+  return values[locale] ?? values.ar ?? values.en ?? Object.values(values)[0] ?? "";
+}
+function Icon({ children, size = 20 }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 1.7,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": true,
+      children
+    }
+  );
+}
+var HomeIcon = () => /* @__PURE__ */ jsxs(Icon, { children: [
+  /* @__PURE__ */ jsx("path", { d: "M3 10.5 12 3l9 7.5" }),
+  /* @__PURE__ */ jsx("path", { d: "M5 9v10a1 1 0 0 0 1 1h4v-6h4v6h4a1 1 0 0 0 1-1V9" })
+] });
+var SidebarIcon = () => /* @__PURE__ */ jsx("span", { style: { display: "flex", transform: "scaleX(var(--te-back-flip, 1))" }, children: /* @__PURE__ */ jsxs(Icon, { children: [
+  /* @__PURE__ */ jsx("rect", { x: "3", y: "4", width: "18", height: "16", rx: "2" }),
+  /* @__PURE__ */ jsx("path", { d: "M9 4v16" })
+] }) });
+var PaletteIcon = () => /* @__PURE__ */ jsxs(Icon, { children: [
+  /* @__PURE__ */ jsx("path", { d: "M12 3a9 9 0 1 0 0 18c1 0 1.5-.8 1.5-1.6 0-1.3-1-1.6-1-2.6 0-.9.7-1.3 1.6-1.3H16a5 5 0 0 0 5-5C21 6.5 17 3 12 3Z" }),
+  /* @__PURE__ */ jsx("circle", { cx: "7.5", cy: "11", r: "1" }),
+  /* @__PURE__ */ jsx("circle", { cx: "10", cy: "7", r: "1" }),
+  /* @__PURE__ */ jsx("circle", { cx: "15", cy: "7.5", r: "1" })
+] });
+var PhoneIcon = () => /* @__PURE__ */ jsxs(Icon, { children: [
+  /* @__PURE__ */ jsx("rect", { x: "7", y: "3", width: "10", height: "18", rx: "2" }),
+  /* @__PURE__ */ jsx("path", { d: "M11 17.5h2" })
+] });
+var DesktopIcon = () => /* @__PURE__ */ jsxs(Icon, { children: [
+  /* @__PURE__ */ jsx("rect", { x: "3", y: "4", width: "18", height: "12", rx: "2" }),
+  /* @__PURE__ */ jsx("path", { d: "M8 20h8M12 16v4" })
+] });
+var PlusCircleIcon = () => /* @__PURE__ */ jsxs(Icon, { children: [
+  /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "9" }),
+  /* @__PURE__ */ jsx("path", { d: "M12 8v8M8 12h8" })
+] });
+var GripIcon = () => /* @__PURE__ */ jsxs(Icon, { size: 16, children: [
+  /* @__PURE__ */ jsx("circle", { cx: "9", cy: "6", r: "1" }),
+  /* @__PURE__ */ jsx("circle", { cx: "15", cy: "6", r: "1" }),
+  /* @__PURE__ */ jsx("circle", { cx: "9", cy: "12", r: "1" }),
+  /* @__PURE__ */ jsx("circle", { cx: "15", cy: "12", r: "1" }),
+  /* @__PURE__ */ jsx("circle", { cx: "9", cy: "18", r: "1" }),
+  /* @__PURE__ */ jsx("circle", { cx: "15", cy: "18", r: "1" })
+] });
+var BlockIcon = () => /* @__PURE__ */ jsxs(Icon, { children: [
+  /* @__PURE__ */ jsx("rect", { x: "3", y: "4", width: "18", height: "16", rx: "2" }),
+  /* @__PURE__ */ jsx("circle", { cx: "9", cy: "10", r: "1.5" }),
+  /* @__PURE__ */ jsx("path", { d: "m21 16-5-5-8 8" })
+] });
+var CopyIcon = () => /* @__PURE__ */ jsxs(Icon, { size: 16, children: [
+  /* @__PURE__ */ jsx("rect", { x: "8", y: "8", width: "12", height: "12", rx: "2" }),
+  /* @__PURE__ */ jsx("path", { d: "M16 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2" })
+] });
+var TrashIcon = () => /* @__PURE__ */ jsx(Icon, { size: 16, children: /* @__PURE__ */ jsx("path", { d: "M4 7h16M10 11v6M14 11v6M6 7l1 12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2l1-12M9 7V4h6v3" }) });
+var ArrowUpIcon = () => /* @__PURE__ */ jsx(Icon, { size: 16, children: /* @__PURE__ */ jsx("path", { d: "M12 19V5M6 11l6-6 6 6" }) });
+var ArrowDownIcon = () => /* @__PURE__ */ jsx(Icon, { size: 16, children: /* @__PURE__ */ jsx("path", { d: "M12 5v14M6 13l6 6 6-6" }) });
+var BackIcon = () => /* @__PURE__ */ jsx("span", { style: { display: "flex", transform: "scaleX(var(--te-back-flip, 1))" }, children: /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx("path", { d: "M15 6l-6 6 6 6" }) }) });
+var ReloadIcon = () => /* @__PURE__ */ jsx(Icon, { size: 18, children: /* @__PURE__ */ jsx("path", { d: "M20 11a8 8 0 1 0-2.3 5.7M20 4v7h-7" }) });
+var ExternalIcon = () => /* @__PURE__ */ jsx(Icon, { size: 18, children: /* @__PURE__ */ jsx("path", { d: "M14 4h6v6M20 4l-9 9M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5" }) });
+var CloseIcon = () => /* @__PURE__ */ jsx(Icon, { size: 18, children: /* @__PURE__ */ jsx("path", { d: "M6 6l12 12M18 6 6 18" }) });
+var SearchIcon = () => /* @__PURE__ */ jsxs(Icon, { size: 18, children: [
+  /* @__PURE__ */ jsx("circle", { cx: "11", cy: "11", r: "7" }),
+  /* @__PURE__ */ jsx("path", { d: "m20 20-3.5-3.5" })
+] });
+function componentFor(schema, path) {
+  return path ? schema.components.find((c) => blockPath(c.path) === blockPath(path)) : void 0;
+}
+function titleOf(component, path, locale) {
+  if (!component) return path;
+  return pick(component.titles, locale) || component.title;
+}
+function ComponentIcon({
+  component
+}) {
+  if (!component?.icon) return /* @__PURE__ */ jsx(BlockIcon, {});
+  return /* @__PURE__ */ jsx("i", { className: `te-sicon ${component.icon}`, "aria-hidden": true });
+}
+function haystack(component) {
+  return [component.title, ...Object.values(component.titles ?? {}), component.path].join(" ").toLowerCase();
+}
+function Card({
+  component,
+  locale,
+  onPick
+}) {
+  const [broken, setBroken] = useState(false);
+  const title = titleOf(component, component.path, locale);
+  return /* @__PURE__ */ jsxs("button", { type: "button", className: "te-card", onClick: onPick, children: [
+    /* @__PURE__ */ jsxs("span", { className: "te-card__title", children: [
+      /* @__PURE__ */ jsx("span", { className: "te-card__icon", children: /* @__PURE__ */ jsx(ComponentIcon, { component }) }),
+      title
+    ] }),
+    /* @__PURE__ */ jsx("span", { className: "te-card__preview", children: component.image && !broken ? /* @__PURE__ */ jsx("img", { src: component.image, alt: "", loading: "lazy", onError: () => setBroken(true) }) : /* @__PURE__ */ jsx("span", { className: "te-card__placeholder", children: /* @__PURE__ */ jsx(ComponentIcon, { component }) }) })
+  ] });
+}
+function AddElementDrawer({
+  schema,
+  t,
+  locale,
+  onPick,
+  onClose
+}) {
+  const searchId = useId();
+  const [query, setQuery] = useState("");
+  const search = useRef(null);
+  useEffect(() => {
+    search.current?.focus();
+    const onKey = (event) => {
+      if (event.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [onClose]);
+  const indexed = useMemo(
+    () => schema.components.map((component) => ({ component, text: haystack(component) })),
+    [schema.components]
+  );
+  const shown = useMemo(() => {
+    const words = query.trim().toLowerCase().split(/\s+/).filter(Boolean);
+    if (!words.length) return schema.components;
+    return indexed.filter(({ text }) => words.every((word) => text.includes(word))).map(({ component }) => component);
+  }, [schema.components, indexed, query]);
+  return (
+    // A non-modal <dialog>, open as rendered: the preview beside it stays usable.
+    /* @__PURE__ */ jsxs("dialog", { open: true, className: "te-drawer", "aria-label": t.addElement, children: [
+      /* @__PURE__ */ jsxs("header", { className: "te-drawer__head", children: [
+        /* @__PURE__ */ jsx("h2", { children: t.addElement }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "te-icon-btn te-icon-btn--danger-outline",
+            "aria-label": t.close,
+            onClick: onClose,
+            children: /* @__PURE__ */ jsx(CloseIcon, {})
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("label", { className: "te-search", htmlFor: searchId, children: [
+        /* @__PURE__ */ jsx(SearchIcon, {}),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: search,
+            id: searchId,
+            type: "search",
+            placeholder: t.searchElements,
+            "aria-label": t.searchElements,
+            value: query,
+            onChange: (e) => setQuery(e.target.value)
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "te-drawer__body", children: shown.length === 0 ? /* @__PURE__ */ jsx("p", { className: "te-hint", children: t.noMatches }) : /* @__PURE__ */ jsx("div", { className: "te-cards", children: shown.map((component) => /* @__PURE__ */ jsx(
+        Card,
+        {
+          component,
+          locale,
+          onPick: () => onPick(component.path)
+        },
+        component.path
+      )) }) })
+    ] })
+  );
+}
+
+// src/dev/editor/lookup.ts
+var COLORS = ["#0d9488", "#7c3aed", "#d97706", "#2563eb", "#db2777", "#059669"];
+function placeholder(name, index) {
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120"><rect width="120" height="120" fill="${COLORS[index % COLORS.length]}"/><text x="60" y="76" font-size="48" font-family="sans-serif" fill="#fff" text-anchor="middle">${name.slice(0, 1)}</text></svg>`;
+  return `data:image/svg+xml,${encodeURIComponent(svg)}`;
+}
+var NAMES = {
+  products: [
+    "Sample shirt",
+    "Sample sneakers",
+    "Sample watch",
+    "Sample bag",
+    "Sample perfume",
+    "Sample lamp"
+  ],
+  categories: ["Clothing", "Shoes", "Accessories", "Home", "Beauty", "Electronics"],
+  brands: ["Northwind", "Contoso", "Fabrikam", "Tailspin", "Litware", "Adventure Works"],
+  blog_articles: ["How to choose a gift", "Spring collection notes", "Care guide"],
+  blog_categories: ["News", "Guides", "Stories"]
+};
+var PATHS = {
+  products: "/p",
+  categories: "/c",
+  brands: "/brands",
+  blog_articles: "/blog",
+  blog_categories: "/blog/category"
+};
+function sampleItem(source, name, index) {
+  const id = `sample-${source}-${index + 1}`;
+  const url = `${PATHS[source]}/${id}`;
+  const image = placeholder(name, index);
+  const data = { id, name, url, sample: true };
+  if (source === "brands") data.logo = image;
+  else if (source !== "blog_categories") data.image = image;
+  return { id, name, url, image, data };
+}
+function sampleItems(source, query = "") {
+  const q = query.trim().toLowerCase();
+  return (NAMES[source] ?? []).map((name, index) => sampleItem(source, name, index)).filter((item) => !q || item.name.toLowerCase().includes(q));
+}
+var emptyInStore = /* @__PURE__ */ new Set();
+async function searchSource(source, query) {
+  try {
+    const items = await devSettingsStore.lookup(source, query);
+    if (items.length > 0) {
+      emptyInStore.delete(source);
+      return { items, sample: false };
+    }
+    if (!query.trim()) emptyInStore.add(source);
+    if (emptyInStore.has(source)) return { items: sampleItems(source, query), sample: true };
+    return { items: [], sample: false };
+  } catch {
+    return { items: sampleItems(source, query), sample: true };
+  }
+}
+var LINK_LOOKUPS = {
+  products: "products",
+  categories: "categories",
+  brands: "brands",
+  blog_articles: "blog_articles",
+  blog_categories: "blog_categories"
+};
+var FIXED_LINKS = {
+  offers_link: "/offers",
+  brands_link: "/brands",
+  blog_link: "/blog"
+};
+var SEARCH_DELAY_MS = 250;
+function rowId(row) {
+  const id = row?.id;
+  return typeof id === "string" || typeof id === "number" ? id : void 0;
+}
+function idKey(id) {
+  return id === void 0 ? void 0 : String(id);
+}
+function chipKeys(rows) {
+  const seen = /* @__PURE__ */ new Map();
+  return rows.map((row) => {
+    const base = idKey(rowId(row)) ?? `name:${rowName(row)}`;
+    const n = (seen.get(base) ?? 0) + 1;
+    seen.set(base, n);
+    return n === 1 ? base : `${base}#${n}`;
+  });
+}
+function rowName(row) {
+  const name = row?.name;
+  return typeof name === "string" ? name : String(rowId(row) ?? "");
+}
+function rowImage(row) {
+  const r = row ?? {};
+  const image = r.image ?? r.logo;
+  return typeof image === "string" && image ? image : void 0;
+}
+function LookupSearch({
+  source,
+  t,
+  isPicked,
+  onPick
+}) {
+  const id = useId();
+  const input = useRef(null);
+  const [query, setQuery] = useState("");
+  const [outcome, setOutcome] = useState(null);
+  const [searching, setSearching] = useState(true);
+  useEffect(() => {
+    input.current?.focus();
+  }, []);
+  useEffect(() => {
+    let current = true;
+    setSearching(true);
+    const timer = setTimeout(() => {
+      void searchSource(source, query).then((result) => {
+        if (!current) return;
+        setOutcome(result);
+        setSearching(false);
+      });
+    }, SEARCH_DELAY_MS);
+    return () => {
+      current = false;
+      clearTimeout(timer);
+    };
+  }, [source, query]);
+  return /* @__PURE__ */ jsxs("div", { className: "te-lookup", children: [
+    /* @__PURE__ */ jsxs("label", { className: "te-search te-search--small", htmlFor: id, children: [
+      /* @__PURE__ */ jsx(SearchIcon, {}),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref: input,
+          id,
+          type: "search",
+          placeholder: t.searchStore,
+          "aria-label": t.searchStore,
+          value: query,
+          onChange: (e) => setQuery(e.target.value)
+        }
+      )
+    ] }),
+    outcome?.sample && /* @__PURE__ */ jsx("p", { className: "te-field__help te-field__help--warn", children: source === "products" ? t.sampleProducts : t.sampleNotice }),
+    searching && /* @__PURE__ */ jsx("p", { className: "te-field__help", children: t.searching }),
+    !searching && outcome?.items.length === 0 && /* @__PURE__ */ jsx("p", { className: "te-field__help", children: t.noResults }),
+    /* @__PURE__ */ jsx("ul", { className: "te-lookup__results", children: outcome?.items.map((item) => {
+      const picked = isPicked?.(item) ?? false;
+      return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          className: "te-lookup__item",
+          disabled: picked,
+          "aria-pressed": picked,
+          onClick: () => onPick(item),
+          children: [
+            item.image ? /* @__PURE__ */ jsx("img", { src: item.image, alt: "", loading: "lazy" }) : /* @__PURE__ */ jsx("span", { className: "te-lookup__noimage" }),
+            /* @__PURE__ */ jsx("span", { children: item.name })
+          ]
+        }
+      ) }, String(item.id));
+    }) })
+  ] });
+}
+function EntitiesField({ field, value, onChange, t }) {
+  const rows = Array.isArray(value) ? value : [];
+  const [adding, setAdding] = useState(false);
+  const max = field.multiple ? field.max ?? Infinity : 1;
+  const min = field.min ?? 0;
+  const source = field.source ?? "products";
+  const pickedIds = new Set(rows.map((row) => idKey(rowId(row))));
+  const keys = chipKeys(rows);
+  const pick2 = (item) => {
+    if (!field.multiple) {
+      onChange([item.data]);
+      setAdding(false);
+      return;
+    }
+    if (rows.length >= max) {
+      setAdding(false);
+      return;
+    }
+    const next = [...rows, item.data];
+    onChange(next);
+    if (next.length >= max) setAdding(false);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "te-field", children: [
+    /* @__PURE__ */ jsxs("div", { className: "te-field__label", children: [
+      field.label,
+      " ",
+      field.multiple && /* @__PURE__ */ jsxs("span", { className: "te-field__count", children: [
+        "(",
+        rows.length,
+        ")"
+      ] })
+    ] }),
+    field.description && /* @__PURE__ */ jsx("p", { className: "te-field__help", children: field.description }),
+    rows.length > 0 && /* @__PURE__ */ jsx("ul", { className: "te-chips", children: rows.map((row, index) => {
+      const name = rowName(row);
+      const image = rowImage(row);
+      return /* @__PURE__ */ jsxs("li", { className: "te-chip", children: [
+        image ? /* @__PURE__ */ jsx("img", { src: image, alt: "" }) : /* @__PURE__ */ jsx("span", { className: "te-lookup__noimage" }),
+        /* @__PURE__ */ jsx("span", { className: "te-chip__name", children: name }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "te-icon-btn te-icon-btn--bare te-icon-btn--danger",
+            "aria-label": `${t.remove}: ${name}`,
+            disabled: rows.length <= min,
+            onClick: () => onChange(rows.filter((_, i) => i !== index)),
+            children: /* @__PURE__ */ jsx(CloseIcon, {})
+          }
+        )
+      ] }, keys[index]);
+    }) }),
+    adding ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        LookupSearch,
+        {
+          source,
+          t,
+          isPicked: (item) => field.multiple === true && pickedIds.has(idKey(item.id)),
+          onPick: pick2
+        }
+      ),
+      /* @__PURE__ */ jsx("button", { type: "button", className: "te-btn te-btn--quiet", onClick: () => setAdding(false), children: t.done })
+    ] }) : /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: "te-add",
+        disabled: field.multiple === true && rows.length >= max,
+        onClick: () => setAdding(true),
+        children: [
+          /* @__PURE__ */ jsx(PlusCircleIcon, {}),
+          field.multiple || rows.length === 0 ? t.pickFromStore : t.change
+        ]
+      }
+    ),
+    rows.length < min && /* @__PURE__ */ jsx("p", { className: "te-field__help te-field__help--error", children: t.minItems(min) })
+  ] });
+}
+function kindOf(url, kinds) {
+  const fixed = Object.entries(FIXED_LINKS).find(([, path]) => path === url)?.[0];
+  if (fixed && kinds.includes(fixed)) return fixed;
+  return kinds.includes("custom") ? "custom" : kinds[0] ?? "custom";
+}
+function LinkNotes({ url, description }) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    url && /* @__PURE__ */ jsx("p", { className: "te-field__help", dir: "ltr", children: url }),
+    description && /* @__PURE__ */ jsx("p", { className: "te-field__help", children: description })
+  ] });
+}
+function LinkField({ field, value, onChange, t }) {
+  const typeId = useId();
+  const urlId = useId();
+  const url = typeof value === "string" ? value : "";
+  const kinds = field.linkSources?.map((o) => o.value) ?? ["custom"];
+  const [kind, setKind] = useState(() => kindOf(url, kinds));
+  const [searching, setSearching] = useState(false);
+  const lookup = LINK_LOOKUPS[kind];
+  const fixed = FIXED_LINKS[kind];
+  return /* @__PURE__ */ jsxs("div", { className: "te-field", children: [
+    /* @__PURE__ */ jsx("label", { className: "te-field__label", htmlFor: typeId, children: field.label }),
+    /* @__PURE__ */ jsx(
+      "select",
+      {
+        id: typeId,
+        className: "te-input",
+        "aria-label": `${field.label}: ${t.linkTo}`,
+        value: kind,
+        onChange: (e) => {
+          const next = e.target.value;
+          setKind(next);
+          setSearching(LINK_LOOKUPS[next] !== void 0);
+          if (FIXED_LINKS[next]) onChange(FIXED_LINKS[next]);
+        },
+        children: (field.linkSources ?? [{ label: t.typeUrl, value: "custom" }]).map((o) => /* @__PURE__ */ jsx("option", { value: o.value, children: o.label }, o.value))
+      }
+    ),
+    lookup && searching && /* @__PURE__ */ jsx(
+      LookupSearch,
+      {
+        source: lookup,
+        t,
+        onPick: (item) => {
+          onChange(item.url ?? "");
+          setSearching(false);
+        }
+      }
+    ),
+    lookup && !searching && /* @__PURE__ */ jsxs("button", { type: "button", className: "te-add", onClick: () => setSearching(true), children: [
+      /* @__PURE__ */ jsx(SearchIcon, {}),
+      url ? t.change : t.pickFromStore
+    ] }),
+    !lookup && !fixed && /* @__PURE__ */ jsx(
+      "input",
+      {
+        id: urlId,
+        type: "text",
+        dir: "ltr",
+        className: "te-input te-input--spaced",
+        "aria-label": `${field.label}: URL`,
+        placeholder: "https://",
+        value: url,
+        onChange: (e) => onChange(e.target.value)
+      }
+    ),
+    /* @__PURE__ */ jsx(LinkNotes, { url: lookup || fixed ? url : "", description: field.description })
+  ] });
+}
+var MAX_IMAGE_BYTES = DEV_PREVIEW_IMAGE_MAX_BYTES;
+function blockValue(fields, data, id) {
+  return id in data ? data[id] : fields.find((f) => f.id === id)?.default;
+}
+function Labeled({
+  field,
+  htmlFor,
+  children
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "te-field", children: [
+    /* @__PURE__ */ jsx("label", { className: "te-field__label", htmlFor, children: field.label }),
+    children,
+    field.description && /* @__PURE__ */ jsx("p", { className: "te-field__help", children: field.description })
+  ] });
+}
+function useOnScreen() {
+  const onScreen = useRef(false);
+  useEffect(() => {
+    onScreen.current = true;
+    return () => {
+      onScreen.current = false;
+    };
+  }, []);
+  return onScreen;
+}
+async function uploadImage(file) {
+  const res = await fetch(DEV_PREVIEW_IMAGE_ENDPOINT, {
+    method: "POST",
+    headers: { "content-type": file.type },
+    body: file
+  });
+  if (!res.ok) throw new Error(`HTTP ${res.status}`);
+  const { url } = await res.json();
+  if (typeof url !== "string") throw new Error("no url");
+  return url;
+}
+function ImageField({ field, value, onChange, t }) {
+  const id = useId();
+  const [upload, setUpload] = useState("idle");
+  const latestPick = useRef(0);
+  const onScreen = useOnScreen();
+  const url = typeof value === "string" ? value : "";
+  const pickImage = async (file) => {
+    const pick2 = ++latestPick.current;
+    setUpload("uploading");
+    try {
+      const uploaded = await uploadImage(file);
+      if (!onScreen.current || pick2 !== latestPick.current) return;
+      setUpload("idle");
+      onChange(uploaded);
+    } catch {
+      if (onScreen.current && pick2 === latestPick.current) setUpload("failed");
+    }
+  };
+  const message = {
+    idle: null,
+    uploading: t.uploading,
+    "too-large": t.imageTooLarge,
+    failed: t.uploadFailed
+  }[upload];
+  return /* @__PURE__ */ jsxs(Labeled, { field, htmlFor: id, children: [
+    url && /* @__PURE__ */ jsx("img", { className: "te-image__preview", src: url, alt: "" }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        id,
+        type: "text",
+        dir: "ltr",
+        className: "te-input",
+        placeholder: field.placeholder ?? "https://",
+        value: url,
+        onChange: (e) => {
+          latestPick.current += 1;
+          setUpload("idle");
+          onChange(e.target.value);
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxs("label", { className: "te-image__pick", children: [
+      t.chooseImage,
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "file",
+          accept: "image/png,image/jpeg,image/webp,image/gif,image/avif",
+          hidden: true,
+          onChange: (e) => {
+            const file = e.target.files?.[0];
+            e.target.value = "";
+            if (!file) return;
+            if (file.size > MAX_IMAGE_BYTES) {
+              setUpload("too-large");
+              return;
+            }
+            void pickImage(file);
+          }
+        }
+      )
+    ] }),
+    message && /* @__PURE__ */ jsx("p", { className: `te-field__help${upload === "uploading" ? "" : " te-field__help--error"}`, children: message })
+  ] });
+}
+function itemTitle(field, row, index, t) {
+  const name = `${field.itemLabel ?? t.item} ${index + 1}`;
+  const textField = field.fields?.find(
+    (f) => (f.kind === "text" || f.kind === "textarea") && typeof row[f.id] === "string" && row[f.id]
+  );
+  return textField ? `${name} \xB7 ${String(row[textField.id])}` : name;
+}
+function newRow(field) {
+  return Object.fromEntries(
+    (field.fields ?? []).filter((f) => f.kind !== "readonly").map((f) => [f.id, f.default])
+  );
+}
+var nextItemKey = 0;
+var newItemKey = () => `item-${nextItemKey++}`;
+function useRowKeys(count) {
+  const [keys, setKeys] = useState(() => Array.from({ length: count }, newItemKey));
+  if (keys.length !== count) {
+    const fresh = Array.from({ length: count }, newItemKey);
+    setKeys(fresh);
+    return [fresh, setKeys];
+  }
+  return [keys, setKeys];
+}
+function ItemCard({
+  field,
+  row,
+  index,
+  total,
+  open,
+  t,
+  onToggle,
+  onMove,
+  onRemove,
+  onEdit
+}) {
+  const title = itemTitle(field, row, index, t);
+  return /* @__PURE__ */ jsxs("div", { className: `te-item${open ? " te-item--open" : ""}`, children: [
+    /* @__PURE__ */ jsxs("div", { className: "te-item__head", children: [
+      /* @__PURE__ */ jsx("button", { type: "button", className: "te-item__title", "aria-expanded": open, onClick: onToggle, children: title }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "te-icon-btn te-icon-btn--bare",
+          "aria-label": `${t.moveUp}: ${title}`,
+          disabled: index === 0,
+          onClick: () => onMove(index - 1),
+          children: /* @__PURE__ */ jsx(ArrowUpIcon, {})
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "te-icon-btn te-icon-btn--bare",
+          "aria-label": `${t.moveDown}: ${title}`,
+          disabled: index === total - 1,
+          onClick: () => onMove(index + 1),
+          children: /* @__PURE__ */ jsx(ArrowDownIcon, {})
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "te-icon-btn te-icon-btn--bare te-icon-btn--danger",
+          "aria-label": `${t.remove}: ${title}`,
+          disabled: !onRemove,
+          onClick: onRemove,
+          children: /* @__PURE__ */ jsx(TrashIcon, {})
+        }
+      )
+    ] }),
+    open && /* @__PURE__ */ jsx("div", { className: "te-item__body", children: field.fields?.filter((sub) => conditionsMet(sub, (id) => blockValue(field.fields ?? [], row, id))).map((sub) => /* @__PURE__ */ jsx(
+      Field,
+      {
+        field: sub,
+        t,
+        value: blockValue(field.fields ?? [], row, sub.id),
+        onChange: (v) => onEdit(sub.id, v)
+      },
+      sub.id
+    )) })
+  ] });
+}
+function CollectionField({ field, value, onChange, t }) {
+  const rows = Array.isArray(value) ? value : [];
+  const [keys, setKeys] = useRowKeys(rows.length);
+  const latest = useRef({ rows, keys, onChange });
+  const onScreen = useOnScreen();
+  useEffect(() => {
+    latest.current = { rows, keys, onChange };
+  });
+  const editItem = (key, fieldId, v) => {
+    if (!onScreen.current) return;
+    const { rows: now, keys: nowKeys, onChange: report } = latest.current;
+    const at = nowKeys.indexOf(key);
+    if (at === -1) return;
+    report(now.map((r, i) => i === at ? { ...r, [fieldId]: v } : r));
+  };
+  const [openKey, setOpenKey] = useState(null);
+  const min = field.min ?? 0;
+  const max = field.max ?? Infinity;
+  const update = (edit) => {
+    setKeys(edit(keys));
+    onChange(edit(rows));
+  };
+  const move = (from, to) => update((list) => {
+    const next = [...list];
+    const [item] = next.splice(from, 1);
+    next.splice(to, 0, item);
+    return next;
+  });
+  return /* @__PURE__ */ jsxs("div", { className: "te-field", children: [
+    /* @__PURE__ */ jsxs("div", { className: "te-field__label", children: [
+      field.label,
+      " ",
+      /* @__PURE__ */ jsxs("span", { className: "te-field__count", children: [
+        "(",
+        rows.length,
+        ")"
+      ] })
+    ] }),
+    field.description && /* @__PURE__ */ jsx("p", { className: "te-field__help", children: field.description }),
+    /* @__PURE__ */ jsx("div", { className: "te-items", children: rows.map((row, index) => {
+      const key = keys[index];
+      return /* @__PURE__ */ jsx(
+        ItemCard,
+        {
+          field,
+          row,
+          index,
+          total: rows.length,
+          open: openKey === key,
+          t,
+          onToggle: () => setOpenKey(openKey === key ? null : key),
+          onMove: (to) => move(index, to),
+          onRemove: rows.length > min ? () => update((list) => list.filter((_, i) => i !== index)) : void 0,
+          onEdit: (fieldId, v) => editItem(key, fieldId, v)
+        },
+        key
+      );
+    }) }),
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: "te-add",
+        disabled: rows.length >= max,
+        onClick: () => {
+          const key = newItemKey();
+          setKeys([...keys, key]);
+          onChange([...rows, newRow(field)]);
+          setOpenKey(key);
+        },
+        children: [
+          /* @__PURE__ */ jsx(PlusCircleIcon, {}),
+          t.addItem(field.itemLabel ?? t.item)
+        ]
+      }
+    ),
+    rows.length < min && /* @__PURE__ */ jsx("p", { className: "te-field__help te-field__help--error", children: t.minItems(min) })
+  ] });
+}
+function ToggleField({ field, value, onChange }) {
+  const id = useId();
+  return /* @__PURE__ */ jsxs("div", { className: "te-field", children: [
+    /* @__PURE__ */ jsxs("label", { className: "te-field--row", htmlFor: id, children: [
+      /* @__PURE__ */ jsx("span", { className: "te-field__label", children: field.label }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          id,
+          type: "checkbox",
+          className: "te-checkbox",
+          checked: Boolean(value),
+          onChange: (e) => onChange(e.target.checked)
+        }
+      )
+    ] }),
+    field.description && /* @__PURE__ */ jsx("p", { className: "te-field__help", children: field.description })
+  ] });
+}
+function SelectField({ field, value, onChange }) {
+  const id = useId();
+  return /* @__PURE__ */ jsx(Labeled, { field, htmlFor: id, children: /* @__PURE__ */ jsx(
+    "select",
+    {
+      id,
+      className: "te-input",
+      value: value == null ? "" : String(value),
+      onChange: (e) => onChange(e.target.value),
+      children: field.options?.map((o) => /* @__PURE__ */ jsx("option", { value: o.value, children: o.label }, o.value))
+    }
+  ) });
+}
+function TextField({ field, value, onChange }) {
+  const id = useId();
+  const common = {
+    id,
+    className: "te-input",
+    placeholder: field.placeholder,
+    value: value == null ? "" : String(value)
+  };
+  return /* @__PURE__ */ jsx(Labeled, { field, htmlFor: id, children: field.kind === "textarea" ? /* @__PURE__ */ jsx("textarea", { ...common, rows: 3, onChange: (e) => onChange(e.target.value) }) : /* @__PURE__ */ jsx("input", { ...common, type: "text", onChange: (e) => onChange(e.target.value) }) });
+}
+function checkNumber(field, raw) {
+  if (raw.trim() === "") return { value: null, ok: true };
+  const value = Number(raw);
+  const ok = Number.isFinite(value) && (field.min === void 0 || value >= field.min) && (field.max === void 0 || value <= field.max);
+  return { value, ok };
+}
+function NumberField({ field, value, onChange, t }) {
+  const id = useId();
+  const shown = typeof value === "number" ? String(value) : "";
+  const [draft, setDraft] = useState(shown);
+  const [seen, setSeen] = useState(shown);
+  if (shown !== seen) {
+    setSeen(shown);
+    setDraft(shown);
+  }
+  const { ok } = checkNumber(field, draft);
+  return /* @__PURE__ */ jsxs(Labeled, { field, htmlFor: id, children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        id,
+        type: "number",
+        className: "te-input",
+        min: field.min,
+        max: field.max,
+        placeholder: field.placeholder,
+        "aria-invalid": !ok,
+        value: draft,
+        onChange: (e) => {
+          setDraft(e.target.value);
+          const checked = checkNumber(field, e.target.value);
+          if (checked.ok) onChange(checked.value);
+        }
+      }
+    ),
+    !ok && /* @__PURE__ */ jsx("p", { className: "te-field__help te-field__help--error", children: t.outOfRange(field.min, field.max) })
+  ] });
+}
+function ReadonlyField({ field, value, t }) {
+  const count = Array.isArray(value) ? `${t.items(value.length)} \xB7 ` : "";
+  return /* @__PURE__ */ jsxs("div", { className: "te-field te-field--row", children: [
+    /* @__PURE__ */ jsx("span", { className: "te-field__label", children: field.label }),
+    /* @__PURE__ */ jsxs("span", { className: "te-field__readonly", children: [
+      count,
+      field.note ?? "\u2014"
+    ] })
+  ] });
+}
+var FIELDS = {
+  toggle: ToggleField,
+  select: SelectField,
+  text: TextField,
+  textarea: TextField,
+  number: NumberField,
+  image: ImageField,
+  collection: CollectionField,
+  entities: EntitiesField,
+  link: LinkField,
+  readonly: ReadonlyField
+};
+function Field(props) {
+  const Control = FIELDS[props.field.kind] ?? ReadonlyField;
+  return /* @__PURE__ */ jsx(Control, { ...props });
+}
+function PanelHead({ title, onBack, t }) {
+  return /* @__PURE__ */ jsxs("div", { className: "te-panel__head", children: [
+    onBack && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "te-icon-btn te-icon-btn--bare",
+        onClick: onBack,
+        "aria-label": t.back,
+        children: /* @__PURE__ */ jsx(BackIcon, {})
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { children: title })
+  ] });
+}
+function BlockRow({
+  block,
+  index,
+  total,
+  title,
+  component,
+  dragging,
+  t,
+  onOpen,
+  onDragStart,
+  onDragEnd,
+  onDropAt
+}) {
+  const [over, setOver] = useState(false);
+  const className = ["te-block", over && "te-block--over", dragging && "te-block--dragging"].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className,
+      draggable: true,
+      onDragStart: (e) => {
+        e.dataTransfer.effectAllowed = "move";
+        onDragStart();
+      },
+      onDragEnd,
+      onDragOver: (e) => {
+        e.preventDefault();
+        setOver(true);
+      },
+      onDragLeave: () => setOver(false),
+      onDrop: (e) => {
+        e.preventDefault();
+        setOver(false);
+        onDropAt(index);
+      },
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "te-block__grip", children: /* @__PURE__ */ jsx(GripIcon, {}) }),
+        /* @__PURE__ */ jsx("span", { className: "te-block__icon", children: /* @__PURE__ */ jsx(ComponentIcon, { component }) }),
+        /* @__PURE__ */ jsxs("button", { type: "button", className: "te-block__title", onClick: onOpen, children: [
+          title,
+          !component && /* @__PURE__ */ jsxs("span", { className: "te-block__tag", children: [
+            " \xB7 ",
+            t.storeBlock
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("span", { className: "te-block__actions", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "te-icon-btn te-icon-btn--bare",
+              "aria-label": `${t.moveUp}: ${title}`,
+              disabled: index === 0,
+              onClick: () => devSettingsStore.moveBlock(block.id, index - 1),
+              children: /* @__PURE__ */ jsx(ArrowUpIcon, {})
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "te-icon-btn te-icon-btn--bare",
+              "aria-label": `${t.moveDown}: ${title}`,
+              disabled: index === total - 1,
+              onClick: () => devSettingsStore.moveBlock(block.id, index + 1),
+              children: /* @__PURE__ */ jsx(ArrowDownIcon, {})
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "te-icon-btn te-icon-btn--bare",
+              "aria-label": `${t.duplicate}: ${title}`,
+              onClick: () => devSettingsStore.duplicateBlock(block.id),
+              children: /* @__PURE__ */ jsx(CopyIcon, {})
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "te-icon-btn te-icon-btn--bare te-icon-btn--danger",
+              "aria-label": `${t.remove}: ${title}`,
+              onClick: () => devSettingsStore.removeBlock(block.id),
+              children: /* @__PURE__ */ jsx(TrashIcon, {})
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function storeRowKeys(blocks) {
+  const seen = /* @__PURE__ */ new Map();
+  return blocks.map((block, index) => {
+    const path = block.path ?? "";
+    const n = (seen.get(path) ?? 0) + 1;
+    seen.set(path, n);
+    return { key: n === 1 ? path : `${path}#${n}`, block, index };
+  });
+}
+function StoreLayout({
+  schema,
+  t,
+  locale,
+  isHome
+}) {
+  const { liveBlocks } = useDevEditorMeta();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className: "te-section-title", children: t.builder }),
+    liveBlocks && storeRowKeys(liveBlocks).map(({ key, block, index }) => /* @__PURE__ */ jsxs("div", { className: "te-block te-block--static", children: [
+      /* @__PURE__ */ jsx("span", { className: "te-block__icon", children: /* @__PURE__ */ jsx(ComponentIcon, { component: componentFor(schema, block.path) }) }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "te-block__title",
+          onClick: () => devSettingsStore.focusBlock(index),
+          children: titleOf(componentFor(schema, block.path), block.path ?? "", locale)
+        }
+      )
+    ] }, key)),
+    !liveBlocks && isHome && /* @__PURE__ */ jsx("p", { className: "te-hint", children: t.waitingForStore }),
+    /* @__PURE__ */ jsx("p", { className: "te-hint", children: t.storeLayoutHint }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "te-btn te-btn--primary",
+        onClick: () => devSettingsStore.customizeLayout(schema),
+        children: t.customize
+      }
+    ),
+    /* @__PURE__ */ jsx("button", { type: "button", className: "te-btn", onClick: () => devSettingsStore.startEmptyLayout(), children: t.startEmpty })
+  ] });
+}
+function BlockList({
+  schema,
+  t,
+  locale,
+  layout,
+  onOpen,
+  onAdd
+}) {
+  const [dragId, setDragId] = useState(null);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className: "te-section-title", children: t.builder }),
+    layout.length === 0 && /* @__PURE__ */ jsx("p", { className: "te-hint", children: t.noBlocks }),
+    layout.map((block, index) => {
+      const component = componentFor(schema, block.path);
+      return /* @__PURE__ */ jsx(
+        BlockRow,
+        {
+          block,
+          index,
+          total: layout.length,
+          title: titleOf(component, block.path, locale),
+          component,
+          dragging: dragId === block.id,
+          t,
+          onOpen: () => onOpen(block.id),
+          onDragStart: () => setDragId(block.id),
+          onDragEnd: () => setDragId(null),
+          onDropAt: (to) => {
+            if (dragId) devSettingsStore.moveBlock(dragId, to);
+            setDragId(null);
+          }
+        },
+        block.id
+      );
+    }),
+    schema.components.length > 0 && /* @__PURE__ */ jsxs("button", { type: "button", className: "te-add", onClick: onAdd, children: [
+      /* @__PURE__ */ jsx(PlusCircleIcon, {}),
+      t.addElement
+    ] })
+  ] });
+}
+function BackToStore({ t }) {
+  const [confirming, setConfirming] = useState(false);
+  return /* @__PURE__ */ jsx("div", { className: "te-panel__actions", children: /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className: `te-btn te-btn--quiet${confirming ? " te-btn--danger" : ""}`,
+      onClick: () => {
+        if (!confirming) {
+          setConfirming(true);
+          return;
+        }
+        setConfirming(false);
+        devSettingsStore.clearLayout();
+      },
+      onBlur: () => setConfirming(false),
+      children: confirming ? t.confirm : t.backToStore
+    }
+  ) });
+}
+function BlockEditor({
+  schema,
+  t,
+  locale,
+  block,
+  index,
+  total,
+  onBack
+}) {
+  const component = componentFor(schema, block.path);
+  const title = titleOf(component, block.path, locale);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(PanelHead, { title, onBack, t }),
+    /* @__PURE__ */ jsxs("div", { className: "te-panel__body", children: [
+      /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 4, margin: "0 4px 6px" }, children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "te-icon-btn",
+            "aria-label": `${t.moveUp}: ${title}`,
+            disabled: index === 0,
+            onClick: () => devSettingsStore.moveBlock(block.id, index - 1),
+            children: /* @__PURE__ */ jsx(ArrowUpIcon, {})
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "te-icon-btn",
+            "aria-label": `${t.moveDown}: ${title}`,
+            disabled: index === total - 1,
+            onClick: () => devSettingsStore.moveBlock(block.id, index + 1),
+            children: /* @__PURE__ */ jsx(ArrowDownIcon, {})
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "te-icon-btn",
+            "aria-label": `${t.duplicate}: ${title}`,
+            onClick: () => devSettingsStore.duplicateBlock(block.id),
+            children: /* @__PURE__ */ jsx(CopyIcon, {})
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "te-icon-btn te-icon-btn--danger",
+            "aria-label": `${t.remove}: ${title}`,
+            onClick: () => {
+              devSettingsStore.removeBlock(block.id);
+              onBack();
+            },
+            children: /* @__PURE__ */ jsx(TrashIcon, {})
+          }
+        )
+      ] }),
+      !component && /* @__PURE__ */ jsx("p", { className: "te-hint", children: t.notDeclared }),
+      component && component.fields.length === 0 && /* @__PURE__ */ jsx("p", { className: "te-hint", children: t.noFields }),
+      component?.fields.filter((f) => conditionsMet(f, (id) => blockValue(component.fields, block.fields, id))).map((f) => /* @__PURE__ */ jsx(
+        Field,
+        {
+          field: f,
+          t,
+          value: blockValue(component.fields, block.fields, f.id),
+          onChange: (v) => {
+            if (!devSettingsStore.get().enabled) devSettingsStore.enable(schema);
+            devSettingsStore.setBlockField(block.id, f.id, v);
+          }
+        },
+        f.id
+      ))
+    ] })
+  ] });
+}
+function BuilderPanel({
+  schema,
+  t,
+  locale,
+  isHome,
+  onGoHome,
+  openId,
+  onOpenId,
+  onAddElement
+}) {
+  const store = useDevSettingsState();
+  const layout = store.layout;
+  const index = layout && openId ? layout.findIndex((block) => block.id === openId) : -1;
+  if (layout && index !== -1) {
+    return /* @__PURE__ */ jsx(
+      BlockEditor,
+      {
+        schema,
+        t,
+        locale,
+        block: layout[index],
+        index,
+        total: layout.length,
+        onBack: () => onOpenId(null)
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(PanelHead, { title: t.homePage, t }),
+    /* @__PURE__ */ jsxs("div", { className: "te-panel__body", children: [
+      !isHome && /* @__PURE__ */ jsxs("div", { className: "te-note", children: [
+        t.notHome,
+        /* @__PURE__ */ jsx("button", { type: "button", onClick: onGoHome, children: t.goHome })
+      ] }),
+      layout && !store.enabled && /* @__PURE__ */ jsx("div", { className: "te-note", children: t.previewOff }),
+      layout ? /* @__PURE__ */ jsx(
+        BlockList,
+        {
+          schema,
+          t,
+          locale,
+          layout,
+          onOpen: (id) => {
+            onOpenId(id);
+            devSettingsStore.focusBlock(layout.findIndex((block) => block.id === id));
+          },
+          onAdd: onAddElement
+        }
+      ) : /* @__PURE__ */ jsx(StoreLayout, { schema, t, locale, isHome })
+    ] }),
+    layout && /* @__PURE__ */ jsx(BackToStore, { t })
+  ] });
+}
+function SettingsPanel({
+  schema,
+  t
+}) {
+  const store = useDevSettingsState();
+  const valueOf = (f) => f.id in store.settings ? store.settings[f.id] : f.default;
+  const byId = new Map(schema.settings.map((f) => [f.id, f]));
+  const visible = schema.settings.filter(
+    (f) => conditionsMet(f, (id) => {
+      const other = byId.get(id);
+      return other ? valueOf(other) : store.settings[id];
+    })
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className: "te-panel__head", children: /* @__PURE__ */ jsx("span", { children: t.settings }) }),
+    /* @__PURE__ */ jsxs("div", { className: "te-panel__body", children: [
+      !store.enabled && /* @__PURE__ */ jsx("div", { className: "te-note", children: t.previewOff }),
+      schema.settings.length === 0 && /* @__PURE__ */ jsx("p", { className: "te-hint", children: t.noSettings }),
+      visible.map((f) => /* @__PURE__ */ jsx(
+        Field,
+        {
+          field: f,
+          t,
+          value: valueOf(f),
+          onChange: (v) => {
+            if (!store.enabled) devSettingsStore.enable(schema);
+            devSettingsStore.setSetting(f.id, v);
+          }
+        },
+        f.id
+      )),
+      schema.settings.length > 0 && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "te-btn te-btn--quiet",
+          onClick: () => devSettingsStore.resetSettings(schema),
+          children: t.resetSettings
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/dev/editor/paths.ts
+var LOCALES = ["ar", "en"];
+function isLocale(segment) {
+  return LOCALES.includes(segment ?? "");
+}
+function splitSuffix(path) {
+  const at = path.search(/[?#]/);
+  return at === -1 ? [path, ""] : [path.slice(0, at), path.slice(at)];
+}
+function parseStorePath(path, base) {
+  const [pathname, suffix] = splitSuffix(path);
+  let segments = pathname.split("/").filter(Boolean);
+  let storeBase = null;
+  if (base !== void 0) {
+    if (base && segments[0] === base) {
+      storeBase = base;
+      segments = segments.slice(1);
+    }
+  } else if (!isLocale(segments[0]) && isLocale(segments[1])) {
+    storeBase = segments[0];
+    segments = segments.slice(1);
+  }
+  const locale = isLocale(segments[0]) ? segments[0] : null;
+  return { base: storeBase, locale, rest: segments.slice(locale ? 1 : 0), suffix };
+}
+function join(base, segments, suffix = "") {
+  return `/${[...base ? [base] : [], ...segments].join("/")}${suffix}`;
+}
+function safePath(raw, origin) {
+  if (!raw) return "/ar";
+  const here = (typeof window !== "undefined" ? window.location.origin : "http://localhost");
+  try {
+    const url = new URL(raw, here);
+    if (url.origin !== new URL(here).origin) return "/ar";
+    return `${url.pathname}${url.search}${url.hash}`;
+  } catch {
+    return "/ar";
+  }
+}
+function localeOf(path, base) {
+  return parseStorePath(path, base).locale ?? "ar";
+}
+function isHomePath(path, base) {
+  return parseStorePath(path, base).rest.length === 0;
+}
+function withLocale(path, locale, base) {
+  const parsed = parseStorePath(path, base);
+  return join(parsed.base, [locale, ...parsed.rest], parsed.suffix);
+}
+function homeOf(path, base) {
+  const parsed = parseStorePath(path, base);
+  return join(parsed.base, [parsed.locale ?? "ar"]);
+}
+function standaloneHref(path) {
+  const [pathname, suffix] = splitSuffix(path);
+  if (pathname !== "/" && pathname !== "") return path;
+  const hashAt = suffix.indexOf("#");
+  const query = hashAt === -1 ? suffix : suffix.slice(0, hashAt);
+  const hash = hashAt === -1 ? "" : suffix.slice(hashAt);
+  const params = new URLSearchParams(query.replace(/^\?/, ""));
+  params.set("editor", "off");
+  return `/?${params.toString()}${hash}`;
+}
+
+// src/dev/editor/styles.ts
+var EDITOR_CSS = `
+:root {
+  --te-accent: #0d9488;
+  --te-accent-soft: #e6f6f4;
+  --te-text: #1f2937;
+  --te-sub: #6b7280;
+  --te-faint: #9ca3af;
+  --te-border: #e5e7eb;
+  --te-row: #f3f4f6;
+  --te-bg: #ffffff;
+  --te-canvas: #f6f7f9;
+  --te-danger: #dc2626;
+  --te-warn-bg: #fef3c7;
+  --te-warn: #b45309;
+  --te-rail: 56px;
+  --te-panel: 385px;
+  --te-top: 52px;
+}
+* { box-sizing: border-box; }
+[dir='rtl'] { --te-back-flip: -1; }
+html, body, #root { height: 100%; margin: 0; }
+body {
+  font-family: 'PingARLT', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+  color: var(--te-text);
+  background: var(--te-bg);
+  font-size: 13px;
+}
+button { font: inherit; color: inherit; }
+code { font-size: 11.5px; background: var(--te-row); padding: 1px 4px; border-radius: 4px; }
+
+.te-shell { display: grid; grid-template-rows: var(--te-top) 1fr; height: 100%; }
+.te-body { display: flex; min-height: 0; position: relative; }
+
+/* Top bar */
+.te-top {
+  display: flex; align-items: center; gap: 12px; padding: 0 14px;
+  border-bottom: 1px solid var(--te-border); background: var(--te-bg);
+}
+.te-top__start, .te-top__end { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0; }
+.te-top__end { justify-content: flex-end; }
+.te-theme-name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.te-badge {
+  font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px;
+  background: var(--te-warn-bg); color: var(--te-warn); white-space: nowrap;
+}
+.te-pill {
+  display: flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 8px;
+  border: 1px solid var(--te-border); color: var(--te-sub); white-space: nowrap; max-width: 260px;
+  overflow: hidden; text-overflow: ellipsis; direction: ltr;
+}
+.te-status { font-size: 12px; color: var(--te-faint); white-space: nowrap; display: flex; align-items: center; gap: 6px; }
+.te-status--error { color: var(--te-danger); }
+.te-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
+
+.te-segment { display: flex; padding: 3px; gap: 2px; background: var(--te-row); border-radius: 10px; }
+.te-segment button {
+  display: flex; align-items: center; justify-content: center; width: 36px; height: 30px;
+  border: none; border-radius: 8px; background: transparent; color: var(--te-sub); cursor: pointer;
+}
+.te-segment button[aria-pressed='true'] { background: var(--te-bg); color: var(--te-text); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
+.te-segment--text button { width: auto; padding: 0 10px; font-size: 12px; font-weight: 600; }
+
+.te-icon-btn {
+  display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
+  border: 1px solid var(--te-border); border-radius: 8px; background: var(--te-bg);
+  color: var(--te-sub); cursor: pointer; text-decoration: none; flex: none;
+}
+.te-icon-btn:hover { color: var(--te-text); background: var(--te-row); }
+.te-icon-btn--bare { border-color: transparent; background: transparent; width: 28px; height: 28px; }
+.te-icon-btn--danger:hover { color: var(--te-danger); }
+.te-icon-btn:disabled { opacity: .35; cursor: default; }
+
+.te-switch {
+  display: inline-flex; align-items: center; gap: 8px; border: none; background: none;
+  cursor: pointer; font-size: 12px; font-weight: 600; color: var(--te-sub); white-space: nowrap;
+}
+.te-switch__track {
+  width: 34px; height: 20px; border-radius: 999px; background: #d1d5db; position: relative; transition: background .15s;
+}
+.te-switch__track::after {
+  content: ''; position: absolute; top: 2px; inset-inline-start: 2px; width: 16px; height: 16px;
+  border-radius: 50%; background: #fff; transition: inset-inline-start .15s; box-shadow: 0 1px 2px rgba(0,0,0,.2);
+}
+.te-switch[aria-checked='true'] { color: var(--te-accent); }
+.te-switch[aria-checked='true'] .te-switch__track { background: var(--te-accent); }
+.te-switch[aria-checked='true'] .te-switch__track::after { inset-inline-start: 16px; }
+
+/* Icon rail + panel (start side: the right in Arabic, like the dashboard) */
+.te-rail {
+  width: var(--te-rail); flex: none; display: flex; flex-direction: column; align-items: center;
+  gap: 6px; padding: 12px 0; border-inline-end: 1px solid var(--te-border); background: var(--te-bg);
+}
+.te-rail button {
+  width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
+  border: none; border-radius: 10px; background: transparent; color: var(--te-sub); cursor: pointer;
+}
+.te-rail button:hover { background: var(--te-row); color: var(--te-text); }
+.te-rail button[aria-selected='true'] { background: var(--te-accent-soft); color: var(--te-accent); }
+.te-rail__tabs { display: flex; flex-direction: column; gap: 6px; padding-top: 6px; border-top: 1px solid var(--te-border); }
+
+.te-panel {
+  width: var(--te-panel); flex: none; display: flex; flex-direction: column; min-height: 0;
+  border-inline-end: 1px solid var(--te-border); background: var(--te-bg);
+}
+.te-panel[hidden] { display: none; }
+.te-panel__head {
+  display: flex; align-items: center; gap: 8px; padding: 14px 16px 10px; font-weight: 700; font-size: 14px;
+}
+.te-panel__head span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.te-panel__body { flex: 1; overflow-y: auto; padding: 0 12px 16px; }
+.te-panel__actions { padding: 0 12px 4px; border-top: 1px solid var(--te-border); }
+.te-panel__actions .te-btn { margin-top: 8px; }
+.te-panel__foot { padding: 10px 16px; border-top: 1px solid var(--te-border); font-size: 11.5px; color: var(--te-faint); }
+
+.te-section-title {
+  font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
+  color: var(--te-faint); margin: 14px 4px 6px;
+}
+.te-hint { font-size: 12px; color: var(--te-sub); line-height: 1.6; margin: 8px 4px; }
+.te-note {
+  font-size: 12px; line-height: 1.6; margin: 4px 0 10px; padding: 8px 10px; border-radius: 8px;
+  background: var(--te-warn-bg); color: var(--te-warn);
+}
+.te-note button { margin-inline-start: 6px; border: none; background: none; color: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; padding: 0; }
+
+/* Block list */
+.te-block {
+  display: flex; align-items: center; gap: 8px; padding: 6px 6px; border-radius: 8px;
+  border-top: 2px solid transparent; cursor: pointer;
+}
+.te-block:hover { background: var(--te-row); }
+.te-block--over { border-top-color: var(--te-accent); }
+.te-block--dragging { opacity: .4; }
+.te-block--static { cursor: default; }
+.te-block__grip { color: var(--te-faint); cursor: grab; display: flex; }
+.te-block__icon { color: var(--te-sub); display: flex; flex: none; }
+.te-block__title {
+  flex: 1; min-width: 0; border: none; background: none; text-align: start; cursor: pointer;
+  padding: 4px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.te-block__tag { font-size: 11px; color: var(--te-faint); }
+.te-block__actions { display: flex; gap: 2px; opacity: 0; }
+.te-block:hover .te-block__actions, .te-block:focus-within .te-block__actions { opacity: 1; }
+
+.te-add {
+  display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 6px; padding: 9px 8px;
+  border: none; border-radius: 8px; background: none; color: var(--te-accent); font-weight: 600; cursor: pointer; text-align: start;
+}
+.te-add:hover { background: var(--te-accent-soft); }
+
+.te-btn {
+  display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%;
+  padding: 10px 12px; border-radius: 10px; border: 1px solid var(--te-border); background: var(--te-bg);
+  color: var(--te-text); font-weight: 600; cursor: pointer; margin-top: 8px;
+}
+.te-btn:hover { background: var(--te-row); }
+.te-btn--primary { background: var(--te-accent); border-color: var(--te-accent); color: #fff; }
+.te-btn--primary:hover { background: #0f766e; }
+.te-btn--quiet { border-color: transparent; color: var(--te-sub); font-weight: 500; }
+.te-btn--danger { color: var(--te-danger); border-color: var(--te-danger); }
+
+/* Fields */
+.te-field { padding: 10px 4px; border-bottom: 1px solid var(--te-row); }
+.te-field__label { display: block; font-size: 12.5px; color: var(--te-text); margin-bottom: 6px; line-height: 1.5; }
+.te-field--row { display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; }
+.te-field > .te-field--row .te-field__label { margin: 0; }
+.te-field--row .te-field__label { margin: 0; flex: 1; }
+.te-input {
+  width: 100%; padding: 8px 10px; border: 1px solid var(--te-border); border-radius: 8px;
+  background: var(--te-bg); color: var(--te-text); font: inherit;
+}
+.te-input:focus { outline: 2px solid var(--te-accent-soft); border-color: var(--te-accent); }
+.te-field__help { font-size: 11.5px; color: var(--te-faint); line-height: 1.6; margin: 6px 0 0; }
+.te-field__help--error { color: var(--te-danger); }
+.te-field__count { color: var(--te-faint); font-weight: 400; }
+textarea.te-input { resize: vertical; min-height: 64px; }
+.te-image__preview {
+  display: block; width: 100%; max-height: 140px; object-fit: contain; margin-bottom: 8px;
+  border-radius: 8px; background: var(--te-row);
+}
+.te-image__pick {
+  display: inline-block; margin-top: 6px; font-size: 12px; color: var(--te-accent); font-weight: 600; cursor: pointer;
+}
+.te-items { display: flex; flex-direction: column; gap: 6px; }
+.te-item { border: 1px solid var(--te-border); border-radius: 10px; background: var(--te-bg); }
+.te-item--open { border-color: var(--te-accent); }
+.te-item__head { display: flex; align-items: center; gap: 2px; padding: 4px 6px 4px 4px; }
+.te-item__title {
+  flex: 1; min-width: 0; border: none; background: none; cursor: pointer; text-align: start;
+  padding: 6px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.te-item__body { padding: 0 10px 6px; border-top: 1px solid var(--te-row); }
+.te-field__help--warn { color: var(--te-warn); background: var(--te-warn-bg); padding: 6px 8px; border-radius: 6px; }
+.te-input--spaced { margin-top: 8px; }
+.te-search--small { margin: 8px 0; }
+.te-search--small input { padding: 8px 0; }
+.te-lookup { margin-top: 6px; }
+.te-lookup__results { list-style: none; margin: 4px 0 0; padding: 0; max-height: 260px; overflow-y: auto; }
+.te-lookup__item {
+  display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px; border: none; border-radius: 8px;
+  background: none; cursor: pointer; text-align: start;
+}
+.te-lookup__item:hover { background: var(--te-row); }
+.te-lookup__item:disabled { opacity: .45; cursor: default; }
+.te-lookup__item img, .te-chip img, .te-lookup__noimage {
+  width: 32px; height: 32px; border-radius: 6px; object-fit: cover; flex: none; background: var(--te-row);
+}
+.te-chips { list-style: none; margin: 0 0 4px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
+.te-chip { display: flex; align-items: center; gap: 8px; padding: 4px 4px 4px 6px; border: 1px solid var(--te-border); border-radius: 10px; }
+.te-chip__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.te-add:disabled { opacity: .4; cursor: default; background: none; }
+.te-field__readonly { font-size: 11.5px; color: var(--te-faint); font-style: italic; }
+.te-checkbox { width: 16px; height: 16px; accent-color: var(--te-accent); cursor: pointer; flex: none; }
+
+/* Salla icons (sallaicons.css) inside the editor's own chrome */
+.te-sicon { font-size: 20px; line-height: 1; display: inline-flex; width: 20px; justify-content: center; }
+
+/* Add-element drawer: beside the panel, over the preview */
+.te-drawer {
+  /* reset what browsers give a <dialog> */
+  margin: 0; padding: 0; border: none; max-width: none; max-height: none; height: auto; color: inherit;
+  position: absolute; top: 0; bottom: 0; z-index: 5;
+  inset-inline-start: calc(var(--te-rail) + var(--te-panel));
+  width: min(760px, calc(100% - var(--te-rail) - var(--te-panel)));
+  display: flex; flex-direction: column; background: var(--te-bg);
+  border-inline-end: 1px solid var(--te-border); box-shadow: 0 12px 40px rgba(0,0,0,.12);
+}
+.te-drawer__head { display: flex; align-items: center; gap: 10px; padding: 16px 20px 8px; }
+.te-drawer__head h2 { flex: 1; margin: 0; font-size: 18px; }
+.te-icon-btn--danger-outline { color: var(--te-danger); border-color: #fca5a5; }
+.te-icon-btn--danger-outline:hover { color: var(--te-danger); background: #fef2f2; }
+.te-search {
+  display: flex; align-items: center; gap: 8px; margin: 8px 20px 14px; padding: 0 12px;
+  border: 1px solid var(--te-border); border-radius: 10px; color: var(--te-faint);
+}
+.te-search:focus-within { border-color: var(--te-accent); }
+.te-search input { flex: 1; border: none; outline: none; padding: 11px 0; font: inherit; color: var(--te-text); background: none; }
+.te-drawer__body { flex: 1; overflow-y: auto; padding: 0 20px 20px; }
+.te-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
+.te-card {
+  display: flex; flex-direction: column; text-align: start; padding: 0; overflow: hidden; cursor: pointer;
+  border: 1px solid var(--te-border); border-radius: 12px; background: var(--te-bg);
+}
+.te-card:hover, .te-card:focus-visible { border-color: var(--te-accent); box-shadow: 0 4px 14px rgba(13,148,136,.12); outline: none; }
+.te-card__title { display: flex; align-items: center; gap: 8px; padding: 12px 14px; font-weight: 600; }
+.te-card__icon { color: #d97706; display: flex; }
+.te-card__preview {
+  display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3;
+  background: var(--te-row); overflow: hidden;
+}
+.te-card__preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
+.te-card__placeholder { color: #cbd5e1; transform: scale(2); display: flex; }
+
+/* Canvas */
+.te-canvas {
+  flex: 1; min-width: 0; display: flex; justify-content: center; padding: 20px; overflow: auto;
+  background-color: var(--te-canvas);
+  background-image: radial-gradient(#d9dce1 1px, transparent 1px);
+  background-size: 16px 16px;
+}
+.te-frame {
+  border: none; background: #fff; height: 100%; display: block;
+  border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 8px 24px rgba(0,0,0,.06);
+  transition: width .2s ease;
+}
+.te-frame--desktop { width: 100%; }
+.te-canvas--mobile { align-items: center; }
+/* A typical phone screen (390\xD7844), never taller than the canvas. */
+.te-frame--mobile {
+  width: 390px; height: min(844px, 100%); flex: none;
+  border-radius: 36px; border: 10px solid #111827;
+}
+`;
+var DEVICE_KEY = "twilight:editor-device";
+var PANEL_KEY = "twilight:editor-panel";
+var PANEL_ID = "te-panel";
+var PATH_POLL_MS = 500;
+function readDevice() {
+  if (typeof window === "undefined") return "mobile";
+  try {
+    return window.localStorage.getItem(DEVICE_KEY) === "desktop" ? "desktop" : "mobile";
+  } catch {
+    return "mobile";
+  }
+}
+function readCollapsed() {
+  if (typeof window === "undefined") return false;
+  try {
+    return window.localStorage.getItem(PANEL_KEY) === "collapsed";
+  } catch {
+    return false;
+  }
+}
+function usePanelCollapsed() {
+  const [collapsed, setCollapsed] = useState(readCollapsed);
+  useEffect(() => {
+    try {
+      window.localStorage.setItem(PANEL_KEY, collapsed ? "collapsed" : "open");
+    } catch {
+    }
+  }, [collapsed]);
+  return [collapsed, setCollapsed];
+}
+function readInitialPath(initialPath) {
+  if (initialPath !== void 0 || typeof window === "undefined") return safePath(initialPath);
+  return safePath(new URLSearchParams(window.location.search).get("path"));
+}
+function useFramePath(initialPath) {
+  const [src, setSrc] = useState(() => readInitialPath(initialPath));
+  const [path, setPath] = useState(src);
+  const [frameKey, setFrameKey] = useState(0);
+  const frameRef = useRef(null);
+  useEffect(() => {
+    const timer = setInterval(() => {
+      try {
+        const location = frameRef.current?.contentWindow?.location;
+        if (!location || location.href === "about:blank") return;
+        const next = `${location.pathname}${location.search}${location.hash}`;
+        setPath((current) => current === next ? current : next);
+      } catch {
+      }
+    }, PATH_POLL_MS);
+    return () => clearInterval(timer);
+  }, []);
+  useEffect(() => {
+    const url = new URL(window.location.href);
+    url.searchParams.set("path", path);
+    window.history.replaceState(null, "", url);
+  }, [path]);
+  const navigate = useCallback((to) => {
+    setSrc(to);
+    setPath(to);
+    setFrameKey((key) => key + 1);
+  }, []);
+  useEffect(() => devSettingsStore.connectFrame(() => frameRef.current?.contentWindow ?? null), []);
+  return { src, path, frameKey, frameRef, navigate };
+}
+function Rail({
+  panel,
+  onPanel,
+  collapsed,
+  onCollapsed,
+  t
+}) {
+  const tabs = [
+    ["builder", t.builder, /* @__PURE__ */ jsx(HomeIcon, {}, "builder")],
+    ["settings", t.settings, /* @__PURE__ */ jsx(PaletteIcon, {}, "settings")]
+  ];
+  const toggle = collapsed ? t.showPanel : t.hidePanel;
+  return /* @__PURE__ */ jsxs("nav", { className: "te-rail", children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "aria-expanded": !collapsed,
+        "aria-controls": PANEL_ID,
+        "aria-label": toggle,
+        title: toggle,
+        onClick: () => onCollapsed(!collapsed),
+        children: /* @__PURE__ */ jsx(SidebarIcon, {})
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "te-rail__tabs", role: "tablist", "aria-orientation": "vertical", children: tabs.map(([id, label, icon]) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        role: "tab",
+        "aria-selected": !collapsed && panel === id,
+        "aria-controls": PANEL_ID,
+        "aria-label": label,
+        title: label,
+        onClick: () => onPanel(id),
+        children: icon
+      },
+      id
+    )) })
+  ] });
+}
+function SaveStatus({ t }) {
+  const { saveStatus } = useDevEditorMeta();
+  if (saveStatus === "idle") return null;
+  const label = { saving: t.saving, saved: t.saved, error: t.saveError }[saveStatus];
+  return /* @__PURE__ */ jsxs("span", { className: `te-status${saveStatus === "error" ? " te-status--error" : ""}`, role: "status", children: [
+    /* @__PURE__ */ jsx("span", { className: "te-dot" }),
+    label
+  ] });
+}
+function TopBar({
+  schema,
+  t,
+  locale,
+  path,
+  device,
+  onDevice,
+  onLocale,
+  onReload
+}) {
+  const store = useDevSettingsState();
+  const themeName = pick(schema.themeName, locale) || "Theme";
+  return /* @__PURE__ */ jsxs("header", { className: "te-top", children: [
+    /* @__PURE__ */ jsxs("div", { className: "te-top__start", children: [
+      /* @__PURE__ */ jsx("span", { className: "te-theme-name", children: themeName }),
+      /* @__PURE__ */ jsx("span", { className: "te-badge", children: "Local" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "te-segment", role: "group", "aria-label": `${t.mobile} / ${t.desktop}`, children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": t.mobile,
+          "aria-pressed": device === "mobile",
+          onClick: () => onDevice("mobile"),
+          children: /* @__PURE__ */ jsx(PhoneIcon, {})
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": t.desktop,
+          "aria-pressed": device === "desktop",
+          onClick: () => onDevice("desktop"),
+          children: /* @__PURE__ */ jsx(DesktopIcon, {})
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "te-top__end", children: [
+      /* @__PURE__ */ jsx(SaveStatus, { t }),
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          role: "switch",
+          className: "te-switch",
+          "aria-checked": store.enabled,
+          onClick: () => store.enabled ? devSettingsStore.disable() : devSettingsStore.enable(schema),
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "te-switch__track" }),
+            t.preview
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "te-segment te-segment--text", role: "group", "aria-label": t.language, children: ["ar", "en"].map((code) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "aria-pressed": locale === code,
+          onClick: () => onLocale(code),
+          children: code.toUpperCase()
+        },
+        code
+      )) }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "te-icon-btn",
+          "aria-label": t.reload,
+          title: t.reload,
+          onClick: onReload,
+          children: /* @__PURE__ */ jsx(ReloadIcon, {})
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "a",
+        {
+          className: "te-icon-btn",
+          href: standaloneHref(path),
+          target: "_blank",
+          rel: "noreferrer",
+          "aria-label": t.openStorefront,
+          title: t.openStorefront,
+          children: /* @__PURE__ */ jsx(ExternalIcon, {})
+        }
+      )
+    ] })
+  ] });
+}
+function PreviewCanvas({
+  frameRef,
+  frameKey,
+  src,
+  device,
+  title
+}) {
+  return /* @__PURE__ */ jsx("main", { className: `te-canvas te-canvas--${device}`, children: /* @__PURE__ */ jsx(
+    "iframe",
+    {
+      ref: frameRef,
+      src,
+      title,
+      className: `te-frame te-frame--${device}`,
+      onLoad: () => devSettingsStore.requestLiveBlocks(),
+      ...{ [DEV_EDITOR_FRAME_ATTR]: "" }
+    },
+    frameKey
+  ) });
+}
+function ThemeEditor({ schema, initialPath }) {
+  const [panel, setPanel] = useState("builder");
+  const [openId, setOpenId] = useState(null);
+  const [adding, setAdding] = useState(false);
+  const closeAdding = useCallback(() => setAdding(false), []);
+  const [device, setDevice] = useState(readDevice);
+  const [collapsed, setCollapsed] = usePanelCollapsed();
+  const { src, path, frameKey, frameRef, navigate } = useFramePath(initialPath);
+  const { frameBase } = useDevEditorMeta();
+  const locale = localeOf(path, frameBase);
+  const t = stringsFor(locale);
+  useEffect(() => {
+    document.documentElement.lang = locale;
+    document.documentElement.dir = locale === "ar" ? "rtl" : "ltr";
+  }, [locale]);
+  useEffect(() => {
+    try {
+      window.localStorage.setItem(DEVICE_KEY, device);
+    } catch {
+    }
+  }, [device]);
+  return /* @__PURE__ */ jsxs("div", { className: "te-shell", children: [
+    /* @__PURE__ */ jsx("style", { children: EDITOR_CSS }),
+    /* @__PURE__ */ jsx(
+      TopBar,
+      {
+        schema,
+        t,
+        locale,
+        path,
+        device,
+        onDevice: setDevice,
+        onLocale: (code) => navigate(withLocale(path, code, frameBase)),
+        onReload: () => navigate(path)
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "te-body", children: [
+      /* @__PURE__ */ jsx(
+        Rail,
+        {
+          panel,
+          onPanel: (next) => {
+            setPanel(next);
+            setCollapsed(false);
+            setAdding(false);
+          },
+          collapsed,
+          onCollapsed: (next) => {
+            setCollapsed(next);
+            setAdding(false);
+          },
+          t
+        }
+      ),
+      /* @__PURE__ */ jsxs("aside", { id: PANEL_ID, className: "te-panel", role: "tabpanel", hidden: collapsed, children: [
+        panel === "builder" ? /* @__PURE__ */ jsx(
+          BuilderPanel,
+          {
+            schema,
+            t,
+            locale,
+            isHome: isHomePath(path, frameBase),
+            onGoHome: () => navigate(homeOf(path, frameBase)),
+            openId,
+            onOpenId: setOpenId,
+            onAddElement: () => setAdding(true)
+          }
+        ) : /* @__PURE__ */ jsx(SettingsPanel, { schema, t }),
+        /* @__PURE__ */ jsxs("div", { className: "te-panel__foot", children: [
+          t.savedTo,
+          " ",
+          /* @__PURE__ */ jsx("code", { children: "twilight.preview.json" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(
+        PreviewCanvas,
+        {
+          frameRef,
+          frameKey,
+          src,
+          device,
+          title: pick(schema.themeName, locale) || "Storefront"
+        }
+      ),
+      adding && 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);
+          }
+        }
+      )
+    ] })
+  ] });
+}
+function mountThemeEditor(container, schema) {
+  const root = createRoot(container);
+  root.render(
+    /* @__PURE__ */ jsx(StrictMode, { children: /* @__PURE__ */ jsx(ThemeEditor, { schema }) })
+  );
+  return () => root.unmount();
+}
+
+export { ThemeEditor, mountThemeEditor };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map