@wikex/admin-kit 0.2.0 → 0.2.2

package/dist/chunk-GMPR6LHH.js

@@ -0,0 +1,2063 @@
+'use client';
+import {
+  EDITABLE_INTERACTIVE_SELECTOR,
+  EDITABLE_PREVIEW_SELECTOR,
+  TEXT_FONT_OPTIONS,
+  TEXT_LINE_HEIGHT_OPTIONS,
+  getEditableElementStyleKey,
+  getTextStyleCSS,
+  isSyntheticElementStyleKey,
+  normalizeTextStyleMap,
+  normalizeTextStyleValue
+} from "./chunk-VK4EFLWH.js";
+
+// src/live-preview/LivePreviewEditor.tsx
+import { createPortal } from "react-dom";
+import {
+  useCallback,
+  useEffect as useEffect3,
+  useRef as useRef2,
+  useState as useState3
+} from "react";
+
+// src/live-preview/GlobalInlineInspector.tsx
+import { useEffect, useMemo, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var isRecord = (value) => Boolean(value) && typeof value === "object" && !Array.isArray(value);
+var readValueAtPath = (source, fieldPath) => {
+  return fieldPath.split(".").reduce((current, segment) => {
+    if (Array.isArray(current)) return current[Number(segment)];
+    if (isRecord(current)) return current[segment];
+    return void 0;
+  }, source);
+};
+var setValueAtPath = (source, segments, value) => {
+  if (!segments.length) return value;
+  const [segment, ...remainingSegments] = segments;
+  const arrayIndex = Number(segment);
+  if (Number.isInteger(arrayIndex) && String(arrayIndex) === segment) {
+    const nextArray = Array.isArray(source) ? [...source] : [];
+    nextArray[arrayIndex] = setValueAtPath(nextArray[arrayIndex], remainingSegments, value);
+    return nextArray;
+  }
+  const nextRecord = isRecord(source) ? { ...source } : {};
+  nextRecord[segment] = setValueAtPath(nextRecord[segment], remainingSegments, value);
+  return nextRecord;
+};
+var getErrorMessage = async (response) => {
+  try {
+    const body = await response.json();
+    return body.errors?.[0]?.message || body.message;
+  } catch {
+    return void 0;
+  }
+};
+var readGlobal = async (scope, signal) => {
+  const response = await fetch(`/api/globals/${scope}?depth=0&draft=true`, {
+    credentials: "include",
+    signal
+  });
+  if (!response.ok) {
+    throw new Error(await getErrorMessage(response) || `Kh\xF4ng th\u1EC3 \u0111\u1ECDc ${scope}.`);
+  }
+  return await response.json();
+};
+var updateGlobalFields = async (scope, updates) => {
+  const currentGlobal = await readGlobal(scope);
+  const patch = { _status: "draft" };
+  for (const { path, value } of updates) {
+    const [rootField, ...remainingSegments] = path.split(".");
+    const currentRoot = Object.hasOwn(patch, rootField) ? patch[rootField] : currentGlobal[rootField];
+    patch[rootField] = setValueAtPath(currentRoot, remainingSegments, value);
+  }
+  const response = await fetch(`/api/globals/${scope}?depth=0&draft=true&autosave=true`, {
+    body: JSON.stringify(patch),
+    credentials: "include",
+    headers: { "Content-Type": "application/json" },
+    method: "POST"
+  });
+  if (!response.ok) {
+    throw new Error(await getErrorMessage(response) || `Kh\xF4ng th\u1EC3 c\u1EADp nh\u1EADt ${scope}.`);
+  }
+};
+var getLinkBasePath = (fieldPath) => {
+  if (fieldPath.endsWith(".label")) return fieldPath.slice(0, -".label".length);
+  if (fieldPath === "announcement.text") return "announcement";
+  return void 0;
+};
+var normalizeInspectorColor = (value) => typeof value === "string" && /^#[0-9A-F]{6}$/i.test(value) ? value.toUpperCase() : "";
+var GlobalInlineInspector = ({
+  onApply,
+  selection
+}) => {
+  const linkBasePath = useMemo(() => getLinkBasePath(selection.fieldPath), [selection.fieldPath]);
+  const [values, setValues] = useState({
+    backgroundColor: "",
+    text: selection.text,
+    textColor: "",
+    url: selection.href || ""
+  });
+  const [status, setStatus] = useState(
+    "loading"
+  );
+  const [linkContext, setLinkContext] = useState({ initialURL: selection.href || "", type: "" });
+  const [message, setMessage] = useState("\u0110ang t\u1EA3i thu\u1ED9c t\xEDnh\u2026");
+  useEffect(() => {
+    const controller = new AbortController();
+    setStatus("loading");
+    setMessage("\u0110ang t\u1EA3i thu\u1ED9c t\xEDnh\u2026");
+    void readGlobal(selection.scope, controller.signal).then((global) => {
+      const storedURL = linkBasePath ? String(readValueAtPath(global, `${linkBasePath}.url`) ?? selection.href ?? "") : "";
+      setValues({
+        backgroundColor: linkBasePath ? normalizeInspectorColor(readValueAtPath(global, `${linkBasePath}.backgroundColor`)) : "",
+        text: String(readValueAtPath(global, selection.fieldPath) ?? selection.text) || selection.text,
+        textColor: linkBasePath ? normalizeInspectorColor(readValueAtPath(global, `${linkBasePath}.textColor`)) : "",
+        url: storedURL
+      });
+      setLinkContext({
+        initialURL: storedURL,
+        type: linkBasePath ? String(readValueAtPath(global, `${linkBasePath}.type`) ?? "") : ""
+      });
+      setStatus("idle");
+      setMessage("");
+    }).catch((error) => {
+      if (controller.signal.aborted) return;
+      setStatus("error");
+      setMessage(error instanceof Error ? error.message : "Kh\xF4ng th\u1EC3 t\u1EA3i thu\u1ED9c t\xEDnh.");
+    });
+    return () => controller.abort();
+  }, [linkBasePath, selection]);
+  const save = async () => {
+    const textColor = normalizeInspectorColor(values.textColor);
+    const backgroundColor = normalizeInspectorColor(values.backgroundColor);
+    if (values.textColor && !textColor || values.backgroundColor && !backgroundColor) {
+      setStatus("error");
+      setMessage("M\xE0u t\xF9y ch\u1EC9nh c\u1EA7n d\xF9ng m\xE3 HEX \u0111\u1EA7y \u0111\u1EE7, v\xED d\u1EE5 #172019.");
+      return;
+    }
+    setStatus("saving");
+    setMessage("\u0110ang l\u01B0u\u2026");
+    const savedValues = { ...values, backgroundColor, textColor };
+    const updates = [{ path: selection.fieldPath, value: values.text }];
+    if (selection.supportsLink && linkBasePath) {
+      updates.push(
+        { path: `${linkBasePath}.textColor`, value: textColor || null },
+        { path: `${linkBasePath}.backgroundColor`, value: backgroundColor || null }
+      );
+      if (!linkBasePath.includes(".link") || linkContext.type === "custom") {
+        updates.push({ path: `${linkBasePath}.url`, value: values.url });
+      } else if (values.url !== linkContext.initialURL) {
+        updates.push(
+          { path: `${linkBasePath}.type`, value: "custom" },
+          { path: `${linkBasePath}.url`, value: values.url }
+        );
+      }
+    }
+    try {
+      await updateGlobalFields(selection.scope, updates);
+      setValues(savedValues);
+      onApply(savedValues);
+      setStatus("success");
+      setMessage("\u0110\xE3 l\u01B0u v\xE0o n\u1ED9i dung d\xF9ng chung.");
+    } catch (error) {
+      setStatus("error");
+      setMessage(error instanceof Error ? error.message : "Kh\xF4ng th\u1EC3 l\u01B0u thay \u0111\u1ED5i.");
+    }
+  };
+  const disabled = status === "loading" || status === "saving";
+  const scopeLabel = selection.scope === "header" ? "\u0110\u1EA7u trang" : selection.scope === "footer" ? "Ch\xE2n trang" : "Th\xF4ng tin website";
+  return /* @__PURE__ */ jsxs("section", { "aria-label": `Thu\u1ED9c t\xEDnh ${scopeLabel}`, className: "wikex-global-inspector", children: [
+    /* @__PURE__ */ jsx("div", { className: "wikex-global-inspector__eyebrow", children: "N\u1ED9i dung d\xF9ng chung" }),
+    /* @__PURE__ */ jsx("h2", { children: scopeLabel }),
+    /* @__PURE__ */ jsx("p", { className: "wikex-global-inspector__path", children: selection.fieldPath }),
+    /* @__PURE__ */ jsxs("label", { className: "wikex-global-inspector__field", children: [
+      /* @__PURE__ */ jsx("span", { children: "N\u1ED9i dung" }),
+      /* @__PURE__ */ jsx(
+        "textarea",
+        {
+          disabled,
+          onChange: (event) => setValues((current) => ({ ...current, text: event.target.value })),
+          rows: 3,
+          value: values.text
+        }
+      )
+    ] }),
+    selection.supportsLink && linkBasePath && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("label", { className: "wikex-global-inspector__field", children: [
+        /* @__PURE__ */ jsx("span", { children: "\u0110\u01B0\u1EDDng d\u1EABn" }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            disabled,
+            onChange: (event) => setValues((current) => ({ ...current, url: event.target.value })),
+            placeholder: "/contact ho\u1EB7c https://\u2026",
+            type: "text",
+            value: values.url
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "wikex-global-inspector__colors", children: [
+        /* @__PURE__ */ jsxs("label", { className: "wikex-global-inspector__field", children: [
+          /* @__PURE__ */ jsx("span", { children: "M\xE0u ch\u1EEF" }),
+          /* @__PURE__ */ jsxs("div", { className: "wikex-global-inspector__color-control", children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                "aria-label": "Ch\u1ECDn m\xE0u ch\u1EEF",
+                disabled,
+                onChange: (event) => setValues((current) => ({ ...current, textColor: event.target.value })),
+                type: "color",
+                value: normalizeInspectorColor(values.textColor) || "#FFFFFF"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                disabled,
+                maxLength: 7,
+                onChange: (event) => setValues((current) => ({ ...current, textColor: event.target.value })),
+                placeholder: "M\u1EB7c \u0111\u1ECBnh",
+                type: "text",
+                value: values.textColor
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("label", { className: "wikex-global-inspector__field", children: [
+          /* @__PURE__ */ jsx("span", { children: "M\xE0u n\u1EC1n" }),
+          /* @__PURE__ */ jsxs("div", { className: "wikex-global-inspector__color-control", children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                "aria-label": "Ch\u1ECDn m\xE0u n\u1EC1n",
+                disabled,
+                onChange: (event) => setValues((current) => ({ ...current, backgroundColor: event.target.value })),
+                type: "color",
+                value: normalizeInspectorColor(values.backgroundColor) || "#172019"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                disabled,
+                maxLength: 7,
+                onChange: (event) => setValues((current) => ({ ...current, backgroundColor: event.target.value })),
+                placeholder: "M\u1EB7c \u0111\u1ECBnh",
+                type: "text",
+                value: values.backgroundColor
+              }
+            )
+          ] })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "wikex-global-inspector__actions", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          disabled: disabled || !values.text.trim(),
+          onClick: () => void save(),
+          type: "button",
+          children: status === "saving" ? "\u0110ang l\u01B0u\u2026" : "L\u01B0u thay \u0111\u1ED5i"
+        }
+      ),
+      selection.supportsLink && linkBasePath && /* @__PURE__ */ jsx(
+        "button",
+        {
+          className: "wikex-global-inspector__reset",
+          disabled,
+          onClick: () => setValues((current) => ({ ...current, backgroundColor: "", textColor: "" })),
+          type: "button",
+          children: "D\xF9ng m\xE0u m\u1EB7c \u0111\u1ECBnh"
+        }
+      )
+    ] }),
+    message && /* @__PURE__ */ jsx("p", { className: `wikex-global-inspector__status is-${status}`, children: message })
+  ] });
+};
+
+// src/live-preview/TextStyleInspector.tsx
+import { useEffect as useEffect2, useRef, useState as useState2 } from "react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var getErrorMessage2 = async (response) => {
+  try {
+    const body = await response.json();
+    return body.errors?.[0]?.message || body.message;
+  } catch {
+    return void 0;
+  }
+};
+var getDocumentURL = (selection) => selection.kind === "collection" ? `/api/${selection.collection}/${encodeURIComponent(selection.documentID)}?depth=0&draft=true` : `/api/globals/${selection.global}?depth=0&draft=true`;
+var saveTextStylePatch = async (selection, patch, signal) => {
+  const currentResponse = await fetch(getDocumentURL(selection), {
+    credentials: "include",
+    signal
+  });
+  if (!currentResponse.ok) {
+    throw new Error(await getErrorMessage2(currentResponse) || "Kh\xF4ng th\u1EC3 \u0111\u1ECDc d\u1EEF li\u1EC7u hi\u1EC7n t\u1EA1i.");
+  }
+  const currentDocument = await currentResponse.json();
+  const textStyles = normalizeTextStyleMap(currentDocument.textStyles);
+  const nextStyle = normalizeTextStyleValue({
+    ...textStyles[selection.fieldPath],
+    ...patch
+  });
+  const persistedStyle = {};
+  if (nextStyle.fontFamily && nextStyle.fontFamily !== "default") {
+    persistedStyle.fontFamily = nextStyle.fontFamily;
+  }
+  if (nextStyle.lineHeight && nextStyle.lineHeight !== "default") {
+    persistedStyle.lineHeight = nextStyle.lineHeight;
+  }
+  if (nextStyle.width) {
+    persistedStyle.width = nextStyle.width;
+    persistedStyle.widthOffset = nextStyle.widthOffset;
+  }
+  if (Object.keys(persistedStyle).length) {
+    textStyles[selection.fieldPath] = persistedStyle;
+  } else {
+    delete textStyles[selection.fieldPath];
+  }
+  const response = await fetch(`${getDocumentURL(selection)}&autosave=true`, {
+    body: JSON.stringify({ _status: "draft", textStyles }),
+    credentials: "include",
+    headers: { "Content-Type": "application/json" },
+    method: selection.kind === "collection" ? "PATCH" : "POST",
+    signal
+  });
+  if (!response.ok) {
+    throw new Error(await getErrorMessage2(response) || "Kh\xF4ng th\u1EC3 l\u01B0u thu\u1ED9c t\xEDnh text.");
+  }
+  return persistedStyle;
+};
+var TextStyleInspector = ({
+  onApply,
+  onTextApply,
+  selection
+}) => {
+  const initialValues = {
+    fontFamily: "default",
+    lineHeight: "default"
+  };
+  const [values, setValues] = useState2(initialValues);
+  const [status, setStatus] = useState2(
+    "loading"
+  );
+  const [message, setMessage] = useState2("\u0110ang t\u1EA3i thu\u1ED9c t\xEDnh\u2026");
+  const [text, setText] = useState2(selection.text);
+  const saveController = useRef(null);
+  const saveSequence = useRef(0);
+  const valuesRef = useRef(initialValues);
+  useEffect2(() => {
+    const controller = new AbortController();
+    saveController.current?.abort();
+    saveSequence.current += 1;
+    setText(selection.text);
+    setStatus("loading");
+    setMessage("\u0110ang t\u1EA3i thu\u1ED9c t\xEDnh\u2026");
+    void fetch(getDocumentURL(selection), {
+      credentials: "include",
+      signal: controller.signal
+    }).then(async (response) => {
+      if (!response.ok) {
+        throw new Error(await getErrorMessage2(response) || "Kh\xF4ng th\u1EC3 t\u1EA3i thu\u1ED9c t\xEDnh text.");
+      }
+      const document2 = await response.json();
+      const savedStyle = normalizeTextStyleValue(
+        normalizeTextStyleMap(document2.textStyles)[selection.fieldPath]
+      );
+      const nextValues = {
+        fontFamily: savedStyle.fontFamily || "default",
+        lineHeight: savedStyle.lineHeight || "default"
+      };
+      valuesRef.current = nextValues;
+      setValues(nextValues);
+      setStatus("idle");
+      setMessage("");
+    }).catch((error) => {
+      if (controller.signal.aborted) return;
+      setStatus("error");
+      setMessage(error instanceof Error ? error.message : "Kh\xF4ng th\u1EC3 t\u1EA3i thu\u1ED9c t\xEDnh text.");
+    });
+    return () => {
+      controller.abort();
+      saveController.current?.abort();
+    };
+  }, [selection]);
+  const save = async (nextValues) => {
+    saveController.current?.abort();
+    const controller = new AbortController();
+    const sequence = ++saveSequence.current;
+    saveController.current = controller;
+    setStatus("saving");
+    setMessage("\u0110ang t\u1EF1 \u0111\u1ED9ng l\u01B0u\u2026");
+    try {
+      await saveTextStylePatch(
+        selection,
+        {
+          fontFamily: nextValues.fontFamily,
+          lineHeight: nextValues.lineHeight
+        },
+        controller.signal
+      );
+      if (sequence !== saveSequence.current) return;
+      setStatus("success");
+      setMessage("\u0110\xE3 t\u1EF1 \u0111\u1ED9ng l\u01B0u v\xE0o b\u1EA3n nh\xE1p. B\u1EA5m \u201CXu\u1EA5t b\u1EA3n thay \u0111\u1ED5i\u201D \u0111\u1EC3 xu\u1EA5t b\u1EA3n.");
+    } catch (error) {
+      if (controller.signal.aborted || sequence !== saveSequence.current) return;
+      setStatus("error");
+      setMessage(error instanceof Error ? error.message : "Kh\xF4ng th\u1EC3 t\u1EF1 \u0111\u1ED9ng l\u01B0u thu\u1ED9c t\xEDnh text.");
+    }
+  };
+  const applyAndSave = (nextValues) => {
+    valuesRef.current = nextValues;
+    setValues(nextValues);
+    onApply(nextValues);
+    void save(nextValues);
+  };
+  const disabled = status === "loading";
+  return /* @__PURE__ */ jsxs2("section", { "aria-label": "Thu\u1ED9c t\xEDnh text", className: "wikex-global-inspector wikex-text-inspector", children: [
+    /* @__PURE__ */ jsx2("div", { className: "wikex-global-inspector__eyebrow", children: "Thu\u1ED9c t\xEDnh v\u0103n b\u1EA3n" }),
+    /* @__PURE__ */ jsx2("h2", { children: selection.tagName.toUpperCase() }),
+    /* @__PURE__ */ jsx2("p", { className: "wikex-global-inspector__path", children: selection.fieldPath }),
+    /* @__PURE__ */ jsxs2("label", { className: "wikex-global-inspector__field", children: [
+      /* @__PURE__ */ jsx2("span", { children: "N\u1ED9i dung" }),
+      selection.multiline ? /* @__PURE__ */ jsx2(
+        "textarea",
+        {
+          disabled: !selection.canEditText,
+          onChange: (event) => {
+            setText(event.target.value);
+            onTextApply(event.target.value);
+          },
+          rows: 3,
+          value: text
+        }
+      ) : /* @__PURE__ */ jsx2(
+        "input",
+        {
+          disabled: !selection.canEditText,
+          onChange: (event) => {
+            setText(event.target.value);
+            onTextApply(event.target.value);
+          },
+          type: "text",
+          value: text
+        }
+      ),
+      !selection.canEditText && /* @__PURE__ */ jsx2("small", { className: "wikex-text-inspector__hint", children: "N\u1ED9i dung n\xE0y n\u1EB1m trong component t\u0129nh; c\xF3 th\u1EC3 ch\u1EC9nh ki\u1EC3u ch\u1EEF nh\u01B0ng kh\xF4ng th\u1EC3 s\u1EEDa v\u0103n b\u1EA3n t\u1EEB CMS." })
+    ] }),
+    /* @__PURE__ */ jsxs2("label", { className: "wikex-global-inspector__field", children: [
+      /* @__PURE__ */ jsx2("span", { children: "Ph\xF4ng ch\u1EEF" }),
+      /* @__PURE__ */ jsx2(
+        "select",
+        {
+          disabled,
+          onChange: (event) => applyAndSave({
+            ...valuesRef.current,
+            fontFamily: event.target.value
+          }),
+          value: values.fontFamily,
+          children: TEXT_FONT_OPTIONS.map((option) => /* @__PURE__ */ jsx2("option", { value: option.value, children: option.label }, option.value))
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs2("label", { className: "wikex-global-inspector__field", children: [
+      /* @__PURE__ */ jsx2("span", { children: "Chi\u1EC1u cao d\xF2ng" }),
+      /* @__PURE__ */ jsx2(
+        "select",
+        {
+          disabled,
+          onChange: (event) => applyAndSave({
+            ...valuesRef.current,
+            lineHeight: event.target.value
+          }),
+          value: values.lineHeight,
+          children: TEXT_LINE_HEIGHT_OPTIONS.map((option) => /* @__PURE__ */ jsx2("option", { value: option.value, children: option.label }, option.value))
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx2("div", { className: "wikex-global-inspector__actions", children: /* @__PURE__ */ jsx2(
+      "button",
+      {
+        className: "wikex-global-inspector__reset",
+        disabled,
+        onClick: () => applyAndSave({ fontFamily: "default", lineHeight: "default" }),
+        type: "button",
+        children: "\u0110\u1EB7t l\u1EA1i m\u1EB7c \u0111\u1ECBnh"
+      }
+    ) }),
+    message && /* @__PURE__ */ jsx2("p", { className: `wikex-global-inspector__status is-${status}`, children: message })
+  ] });
+};
+
+// src/live-preview/runtimeConfig.ts
+var runtimeConfig = {
+  getVisualEditorRoute: () => null,
+  pageBlocks: [],
+  postBlocks: []
+};
+var configureLivePreview = (config) => {
+  runtimeConfig = config;
+};
+var getVisualEditorRoute = (pathname) => runtimeConfig.getVisualEditorRoute(pathname);
+var isVisualEditorRoute = (pathname) => Boolean(getVisualEditorRoute(pathname));
+var getBlockPickerOptions = (scope) => scope === "post" ? runtimeConfig.postBlocks : runtimeConfig.pageBlocks;
+
+// src/live-preview/LivePreviewEditor.tsx
+import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var DEFAULT_EDIT_RATIO = 0.4;
+var HANDLE_WIDTH = 12;
+var LIVE_PREVIEW_TRANSITION_MS = 160;
+var MIN_EDIT_WIDTH = 320;
+var MIN_PREVIEW_WIDTH = 320;
+var STORAGE_KEY = "wikex-live-preview-edit-ratio";
+var LEGACY_STORAGE_KEY = "aurea-live-preview-edit-ratio";
+var MIN_TEXT_WIDTH_PX = 72;
+var RESIZABLE_TEXT_SELECTOR = "h1,h2,h3,h4,h5,h6,p,li";
+var isEditableGlobalScope = (value) => value === "header" || value === "footer" || value === "settings";
+var normalizeText = (value) => value.replace(/\s+/g, " ").trim();
+var readInlineText = (element) => element.innerText.replace(/\u00a0/g, " ").replace(/\r\n/g, "\n").trim();
+var getMatchingPreviewFields = (element, fieldPath) => isSyntheticElementStyleKey(fieldPath) ? Array.from(
+  element.ownerDocument.querySelectorAll(EDITABLE_PREVIEW_SELECTOR)
+).filter((candidate) => getEditableElementStyleKey(candidate) === fieldPath) : Array.from(element.ownerDocument.querySelectorAll("[data-wikex-field]")).filter(
+  (candidate) => candidate.dataset.wikexField === fieldPath
+);
+var EditorIcon = ({ name }) => {
+  if (name === "elements") {
+    return /* @__PURE__ */ jsx3("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx3("path", { d: "M4 4h6v6H4zM14 4h6v6h-6zM4 14h6v6H4zM14 14h6v6h-6z" }) });
+  }
+  if (name === "sections") {
+    return /* @__PURE__ */ jsx3("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx3("path", { d: "M4 5h16v5H4zM4 14h16v5H4z" }) });
+  }
+  return /* @__PURE__ */ jsx3("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx3("path", { d: "M6 3h10l3 3v15H6zM16 3v4h4M9 11h7M9 15h7" }) });
+};
+var getVisibleBlocksField = () => {
+  const fields = Array.from(
+    document.querySelectorAll("#field-customLayout, #field-layout, .blocks-field")
+  );
+  return fields[0] ?? null;
+};
+var getVisibleSectionsTarget = () => getVisibleBlocksField() ?? document.querySelector("#field-hero, #field-customHero, .collapsible-field");
+var getVisibleRichTextTarget = () => document.querySelector(".collection-edit__main .rich-text-lexical");
+var scrollEditorTo = (target) => {
+  if (!target) return;
+  target.scrollIntoView({ behavior: "smooth", block: "center" });
+  target.classList.remove("wikex-editor-target--active");
+  window.requestAnimationFrame(() => target.classList.add("wikex-editor-target--active"));
+  window.setTimeout(() => target.classList.remove("wikex-editor-target--active"), 1200);
+};
+var activateEditorTab = (label) => {
+  const tabLabels = label === "content" ? /* @__PURE__ */ new Set(["content", "n\u1ED9i dung"]) : /* @__PURE__ */ new Set(["hero", "m\u1EDF \u0111\u1EA7u"]);
+  const tab = Array.from(
+    document.querySelectorAll(".tabs-field__tab-button")
+  ).find((button) => tabLabels.has(normalizeText(button.textContent || "").toLowerCase()));
+  if (tab && !tab.classList.contains("tabs-field__tab-button--active")) tab.click();
+};
+var getPageBlockTriggerWhenReady = (onReady, attempt = 0) => {
+  const blocksField = getVisibleBlocksField();
+  if (!blocksField) {
+    activateEditorTab("content");
+    if (attempt < 12) {
+      window.setTimeout(() => getPageBlockTriggerWhenReady(onReady, attempt + 1), 100);
+    }
+    return;
+  }
+  scrollEditorTo(blocksField);
+  const trigger = blocksField.querySelector(
+    ".blocks-field__drawer-toggler button, .blocks-field__drawer-toggler"
+  );
+  if (trigger) window.setTimeout(() => onReady(trigger), 180);
+};
+var getPageBlockTrigger = (onReady) => {
+  const customLayoutRadio = document.querySelector(
+    '#field-layoutMode-custom, input[type="radio"][value="custom"]'
+  );
+  if (customLayoutRadio && !customLayoutRadio.checked) customLayoutRadio.click();
+  getPageBlockTriggerWhenReady(onReady);
+};
+var getPostBlockTriggerWhenReady = (onReady, attempt = 0) => {
+  activateEditorTab("content");
+  const richTextTarget = getVisibleRichTextTarget();
+  const blockTrigger = richTextTarget?.querySelector(
+    'button[aria-label="blocks dropdown"], button.add-block-menu'
+  );
+  if (!richTextTarget || !blockTrigger) {
+    if (attempt < 16) {
+      window.setTimeout(() => getPostBlockTriggerWhenReady(onReady, attempt + 1), 100);
+    }
+    return;
+  }
+  scrollEditorTo(richTextTarget);
+  window.setTimeout(() => onReady(blockTrigger), 180);
+};
+var selectPostBlockWhenReady = (blockTrigger, itemKey, attempt = 0) => {
+  if (!blockTrigger.classList.contains("active")) blockTrigger.click();
+  const option = document.querySelector(`[data-item-key="${itemKey}"]`);
+  if (option) {
+    option.click();
+    return;
+  }
+  if (attempt < 12) {
+    window.setTimeout(() => selectPostBlockWhenReady(blockTrigger, itemKey, attempt + 1), 50);
+  }
+};
+var selectPageBlockWhenReady = (payloadLabel, attempt = 0) => {
+  const openDrawer = Array.from(document.querySelectorAll(".drawer--is-open")).find(
+    (drawer) => drawer.querySelector(".blocks-drawer__blocks")
+  );
+  const option = Array.from(
+    openDrawer?.querySelectorAll(".thumbnail-card") ?? []
+  ).find((button) => button.title === payloadLabel);
+  if (option) {
+    option.click();
+    document.documentElement.removeAttribute("data-wikex-forwarding-block");
+    return;
+  }
+  if (attempt < 12) {
+    window.setTimeout(() => selectPageBlockWhenReady(payloadLabel, attempt + 1), 50);
+    return;
+  }
+  document.documentElement.removeAttribute("data-wikex-forwarding-block");
+};
+var BlockPickerModal = ({
+  onClose,
+  onSelect,
+  options,
+  title
+}) => {
+  useEffect3(() => {
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [onClose]);
+  return /* @__PURE__ */ jsx3("div", { className: "wikex-block-picker", onMouseDown: onClose, role: "presentation", children: /* @__PURE__ */ jsxs3(
+    "section",
+    {
+      "aria-label": title,
+      "aria-modal": "true",
+      className: "wikex-block-picker__dialog",
+      onMouseDown: (event) => event.stopPropagation(),
+      role: "dialog",
+      children: [
+        /* @__PURE__ */ jsxs3("header", { className: "wikex-block-picker__header", children: [
+          /* @__PURE__ */ jsxs3("div", { children: [
+            /* @__PURE__ */ jsx3("span", { children: "Th\xEAm kh\u1ED1i" }),
+            /* @__PURE__ */ jsx3("h2", { children: title })
+          ] }),
+          /* @__PURE__ */ jsx3("button", { "aria-label": "\u0110\xF3ng b\u1ED9 ch\u1ECDn component", onClick: onClose, type: "button", children: /* @__PURE__ */ jsx3("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx3("path", { d: "M6 6l12 12M18 6 6 18" }) }) })
+        ] }),
+        /* @__PURE__ */ jsx3("div", { className: "wikex-block-picker__grid", children: options.map((option) => /* @__PURE__ */ jsxs3(
+          "button",
+          {
+            className: "wikex-block-picker__card",
+            onClick: () => onSelect(option),
+            type: "button",
+            children: [
+              /* @__PURE__ */ jsx3(
+                "span",
+                {
+                  "aria-hidden": "true",
+                  className: `wikex-block-picker__thumbnail${option.image ? "" : " wikex-block-picker__thumbnail--empty"}`,
+                  style: option.image ? { backgroundImage: `url(${option.image})` } : void 0
+                }
+              ),
+              /* @__PURE__ */ jsxs3("span", { className: "wikex-block-picker__copy", children: [
+                /* @__PURE__ */ jsx3("strong", { children: option.label }),
+                /* @__PURE__ */ jsx3("span", { children: option.description })
+              ] })
+            ]
+          },
+          option.slug
+        )) })
+      ]
+    }
+  ) });
+};
+var getAdminBasePath = () => {
+  const match = window.location.pathname.match(/^(.*\/admin)(?:\/|$)/);
+  return match?.[1] ?? "/admin";
+};
+var getEditorDocumentTarget = () => {
+  return getVisualEditorRoute(window.location.pathname)?.documentTarget ?? null;
+};
+var getEditorScope = (pathname = window.location.pathname) => getVisualEditorRoute(pathname)?.scope ?? "content";
+var getFieldControl = (fieldPath, text) => {
+  if (fieldPath) {
+    const namedControl = Array.from(document.getElementsByName(fieldPath)).find(
+      (control) => control instanceof HTMLInputElement || control instanceof HTMLTextAreaElement
+    );
+    if (namedControl) return namedControl;
+  }
+  if (!text) return null;
+  const controls = Array.from(
+    document.querySelectorAll(
+      '.collection-edit__main input:not([type="hidden"]):not([type="radio"]):not([type="checkbox"]), .collection-edit__main textarea'
+    )
+  );
+  return controls.find((control) => normalizeText(control.value) === text) ?? null;
+};
+var getFieldContainer = (control, fieldPath) => {
+  if (control) return control.closest(".field-type");
+  if (!fieldPath) return null;
+  const blockMatch = fieldPath.match(/^(customLayout|layout)\.(\d+)(?:\.|$)/);
+  if (blockMatch) {
+    return document.getElementById(`${blockMatch[1]}-row-${Number(blockMatch[2])}`);
+  }
+  const rowMatch = fieldPath.match(/^([^.]+)\.(\d+)(?:\.|$)/);
+  if (rowMatch) {
+    const row = document.getElementById(`${rowMatch[1]}-row-${Number(rowMatch[2])}`);
+    if (row) return row;
+  }
+  return document.getElementById(`field-${fieldPath.replaceAll(".", "__")}`) ?? Array.from(document.querySelectorAll("[data-field-path]")).find(
+    (field) => field.dataset.fieldPath === fieldPath
+  ) ?? null;
+};
+var getRichTextControl = (fieldPath, text) => {
+  if (!text) return null;
+  const scope = getFieldContainer(null, fieldPath) ?? document.querySelector(".collection-edit__main");
+  if (!scope) return null;
+  const textNode = Array.from(
+    scope.querySelectorAll('.rich-text-lexical [data-lexical-text="true"]')
+  ).find((node) => normalizeText(node.textContent || "") === normalizeText(text));
+  const editor = textNode?.closest('[contenteditable="true"]');
+  return textNode && editor ? { editor, textNode } : null;
+};
+var expandEditorTarget = (target) => {
+  const row = target?.matches('[id*="-row-"]') ? target : target?.closest('[id*="-row-"]');
+  const collapsible = row?.querySelector(".blocks-field__row, .array-field__row");
+  if (collapsible?.classList.contains("collapsible--collapsed")) {
+    collapsible.querySelector(".collapsible__toggle")?.click();
+  }
+};
+var focusRichTextValue = (scope, text) => {
+  if (!scope || !text) return false;
+  const textNode = Array.from(
+    scope.querySelectorAll('.rich-text-lexical [data-lexical-text="true"]')
+  ).find((node) => normalizeText(node.textContent || "") === text);
+  const editor = textNode?.closest('[contenteditable="true"]');
+  if (!textNode || !editor) return false;
+  editor.focus({ preventScroll: true });
+  const selection = window.getSelection();
+  const range = document.createRange();
+  range.selectNodeContents(textNode);
+  selection?.removeAllRanges();
+  selection?.addRange(range);
+  return true;
+};
+var inferEditableFieldPath = (element, fieldPath) => {
+  if (!fieldPath) return void 0;
+  if (fieldPath === "hero" || fieldPath === "customHero") {
+    return `${fieldPath}.richText`;
+  }
+  const blockType = element.closest("[data-block-type]")?.dataset.blockType;
+  if (/^(customLayout|layout)\.\d+$/.test(fieldPath)) {
+    if (blockType === "cta") return `${fieldPath}.richText`;
+    if (blockType === "archive") return `${fieldPath}.introContent`;
+  }
+  return fieldPath;
+};
+var isAggregateInspectorSelection = (documentTarget, fieldPath) => {
+  if (!fieldPath) return false;
+  if (/^(customLayout|layout)\.\d+$/.test(fieldPath)) return true;
+  return documentTarget?.kind === "collection" && documentTarget.collection === "posts" && fieldPath === "content";
+};
+var updatePayloadControl = (control, value) => {
+  const prototype = control instanceof HTMLTextAreaElement ? HTMLTextAreaElement.prototype : HTMLInputElement.prototype;
+  const setter = Object.getOwnPropertyDescriptor(prototype, "value")?.set;
+  setter?.call(control, value);
+  control.dispatchEvent(new InputEvent("input", { bubbles: true, inputType: "insertText" }));
+  control.dispatchEvent(new Event("change", { bubbles: true }));
+};
+var updateRichTextControl = ({ editor, textNode }, value) => {
+  editor.focus({ preventScroll: true });
+  const selection = window.getSelection();
+  const range = document.createRange();
+  range.selectNodeContents(textNode);
+  selection?.removeAllRanges();
+  selection?.addRange(range);
+  const updated = document.execCommand("insertText", false, value);
+  if (!updated) {
+    textNode.textContent = value;
+    editor.dispatchEvent(new InputEvent("input", { bubbles: true, inputType: "insertText" }));
+  }
+  editor.dispatchEvent(new Event("change", { bubbles: true }));
+};
+var WixEditorChrome = ({ container, editor, previewWrapper, route, scope }) => {
+  const pagesHref = `${getAdminBasePath()}/collections/pages`;
+  const editorScopeRef = useRef2(scope);
+  editorScopeRef.current = scope;
+  const isGlobalEditor = scope === "header" || scope === "footer";
+  const selectedControl = useRef2(null);
+  const selectedRichTextControl = useRef2(null);
+  const selectedFieldPath = useRef2(void 0);
+  const selectedGlobal = useRef2(null);
+  const selectedPreviewElement = useRef2(null);
+  const selectedTextInspector = useRef2(null);
+  const selectedTextResize = useRef2(null);
+  const textWidthSaveController = useRef2(null);
+  const blockPickerTrigger = useRef2(null);
+  const selectedText = useRef2("");
+  const revealPreviewField = useRef2(() => void 0);
+  const [globalInspectorSelection, setGlobalInspectorSelection] = useState3(null);
+  const [textInspectorSelection, setTextInspectorSelection] = useState3(null);
+  const [inspectorOpen, setInspectorOpen] = useState3(false);
+  const [blockPickerScope, setBlockPickerScope] = useState3(null);
+  const [selectionLabel, setSelectionLabel] = useState3("Ch\u1ECDn m\u1ED9t ph\u1EA7n t\u1EED tr\xEAn trang");
+  useEffect3(() => {
+    selectedControl.current = null;
+    selectedRichTextControl.current = null;
+    selectedFieldPath.current = void 0;
+    selectedGlobal.current = null;
+    selectedPreviewElement.current = null;
+    selectedTextInspector.current = null;
+    selectedTextResize.current = null;
+    textWidthSaveController.current?.abort();
+    blockPickerTrigger.current = null;
+    selectedText.current = "";
+    setGlobalInspectorSelection(null);
+    setTextInspectorSelection(null);
+    setInspectorOpen(false);
+    setBlockPickerScope(null);
+    setSelectionLabel("Ch\u1ECDn m\u1ED9t ph\u1EA7n t\u1EED tr\xEAn trang");
+  }, [previewWrapper, route]);
+  const openInspector = useCallback(() => {
+    setInspectorOpen(true);
+    if (selectedGlobal.current) {
+      setGlobalInspectorSelection({ ...selectedGlobal.current });
+      setTextInspectorSelection(null);
+      return;
+    }
+    if (selectedTextInspector.current) {
+      setGlobalInspectorSelection(null);
+      setTextInspectorSelection({ ...selectedTextInspector.current });
+      return;
+    }
+    setGlobalInspectorSelection(null);
+    setTextInspectorSelection(null);
+    const revealSelectedField = (attempt = 0) => {
+      const fieldPath = selectedFieldPath.current;
+      const target = getFieldContainer(selectedControl.current, fieldPath);
+      if (!target && attempt < 12) {
+        if (fieldPath?.startsWith("layout.")) activateEditorTab("content");
+        if (fieldPath === "hero" || fieldPath?.startsWith("hero.")) activateEditorTab("hero");
+        window.setTimeout(() => revealSelectedField(attempt + 1), 100);
+        return;
+      }
+      scrollEditorTo(target);
+      expandEditorTarget(target);
+      window.setTimeout(() => {
+        const control = getFieldControl(fieldPath, selectedText.current);
+        if (control) {
+          selectedControl.current = control;
+          control.focus({ preventScroll: true });
+          control.select();
+          return;
+        }
+        const refreshedTarget = getFieldContainer(null, fieldPath) ?? target;
+        focusRichTextValue(refreshedTarget, selectedText.current);
+      }, 180);
+    };
+    window.setTimeout(revealSelectedField, 80);
+  }, []);
+  const applyGlobalInspectorValues = useCallback((values) => {
+    const element = selectedPreviewElement.current;
+    if (!element) return;
+    const globalSelection = selectedGlobal.current;
+    const matchingElements = globalSelection ? getMatchingPreviewFields(element, globalSelection.fieldPath) : [element];
+    for (const matchingElement of matchingElements) {
+      matchingElement.innerText = values.text;
+      const interactiveElement = matchingElement.closest("a, button");
+      if (interactiveElement) {
+        interactiveElement.style.backgroundColor = values.backgroundColor;
+        interactiveElement.style.color = values.textColor;
+        const resolvedURL = globalSelection?.scope === "settings" && globalSelection.fieldPath === "email" ? `mailto:${values.text}` : values.url;
+        if (interactiveElement instanceof HTMLAnchorElement && resolvedURL) {
+          interactiveElement.setAttribute("href", resolvedURL);
+        }
+      }
+    }
+    selectedText.current = values.text;
+    if (globalSelection) {
+      selectedGlobal.current = {
+        ...globalSelection,
+        href: values.url || globalSelection.href,
+        text: values.text
+      };
+    }
+    setSelectionLabel(`\u0110\xE3 c\u1EADp nh\u1EADt \xB7 ${selectedGlobal.current?.scope || "n\u1ED9i dung d\xF9ng chung"}`);
+  }, []);
+  const applyTextInspectorValues = useCallback((values) => {
+    const element = selectedPreviewElement.current;
+    const selection = selectedTextInspector.current;
+    if (!element || !selection) return;
+    const style = getTextStyleCSS(values);
+    const matchingElements = getMatchingPreviewFields(element, selection.fieldPath);
+    for (const matchingElement of matchingElements.length ? matchingElements : [element]) {
+      if ("fontFamily" in values) matchingElement.style.fontFamily = style.fontFamily || "";
+      if ("lineHeight" in values) matchingElement.style.lineHeight = style.lineHeight || "";
+    }
+    setSelectionLabel(`\u0110\xE3 c\u1EADp nh\u1EADt ki\u1EC3u ch\u1EEF \xB7 ${selection.fieldPath}`);
+  }, []);
+  const applyTextInspectorText = useCallback((value) => {
+    const element = selectedPreviewElement.current;
+    const control = selectedControl.current;
+    const selection = selectedTextInspector.current;
+    if (!element || !control || !selection) return;
+    const matchingElements = getMatchingPreviewFields(element, selection.fieldPath);
+    for (const matchingElement of matchingElements.length ? matchingElements : [element]) {
+      matchingElement.innerText = value;
+    }
+    updatePayloadControl(
+      control,
+      control instanceof HTMLInputElement ? value.replace(/\s+/g, " ") : value
+    );
+    selectedText.current = value;
+    selectedTextInspector.current = { ...selection, text: value };
+    setSelectionLabel(`\u0110ang t\u1EF1 \u0111\u1ED9ng l\u01B0u n\u1ED9i dung \xB7 ${selection.fieldPath}`);
+    window.requestAnimationFrame(() => {
+      element.ownerDocument.defaultView?.dispatchEvent(new Event("resize"));
+    });
+  }, []);
+  const openElements = useCallback(() => {
+    setGlobalInspectorSelection(null);
+    setTextInspectorSelection(null);
+    setInspectorOpen(false);
+    const documentTarget = getEditorDocumentTarget();
+    if (documentTarget?.kind === "collection" && documentTarget.collection === "posts") {
+      setSelectionLabel("Th\xEAm component v\xE0o n\u1ED9i dung b\xE0i vi\u1EBFt");
+      window.setTimeout(
+        () => getPostBlockTriggerWhenReady((trigger) => {
+          blockPickerTrigger.current = trigger;
+          setBlockPickerScope("post");
+        }),
+        80
+      );
+      return;
+    }
+    setSelectionLabel("Th\xEAm component v\xE0o b\u1ED1 c\u1EE5c trang");
+    window.setTimeout(
+      () => getPageBlockTrigger((trigger) => {
+        blockPickerTrigger.current = trigger;
+        setBlockPickerScope("page");
+      }),
+      80
+    );
+  }, []);
+  const closeBlockPicker = useCallback(() => setBlockPickerScope(null), []);
+  const selectBlock = useCallback(
+    (option) => {
+      const trigger = blockPickerTrigger.current;
+      const scopeToInsert = blockPickerScope;
+      setBlockPickerScope(null);
+      if (!trigger?.isConnected || !scopeToInsert) return;
+      if (scopeToInsert === "post") {
+        window.setTimeout(() => selectPostBlockWhenReady(trigger, `block-${option.slug}`), 80);
+        return;
+      }
+      document.documentElement.setAttribute("data-wikex-forwarding-block", "true");
+      trigger.click();
+      window.setTimeout(() => selectPageBlockWhenReady(option.payloadLabel ?? option.label), 50);
+    },
+    [blockPickerScope]
+  );
+  const openSections = useCallback(() => {
+    setGlobalInspectorSelection(null);
+    setTextInspectorSelection(null);
+    setInspectorOpen(true);
+    const revealSections = (attempt = 0) => {
+      const documentTarget = getEditorDocumentTarget();
+      const isPostEditor = documentTarget?.kind === "collection" && documentTarget.collection === "posts";
+      const target = isPostEditor ? getVisibleRichTextTarget() : getVisibleBlocksField();
+      if (!target && attempt < 12) {
+        activateEditorTab("content");
+        window.setTimeout(() => revealSections(attempt + 1), 100);
+        return;
+      }
+      const resolvedTarget = target ?? getVisibleSectionsTarget();
+      scrollEditorTo(resolvedTarget);
+      if (!isPostEditor) expandEditorTarget(target);
+    };
+    window.setTimeout(revealSections, 80);
+  }, []);
+  useEffect3(() => {
+    editor.classList.add("wikex-visual-editor");
+    editor.setAttribute("data-wikex-visual-editor", "true");
+    editor.setAttribute("data-wikex-editor-route", route);
+    return () => {
+      editor.classList.remove("wikex-visual-editor", "wikex-editor--inspecting");
+      editor.removeAttribute("data-wikex-visual-editor");
+      editor.removeAttribute("data-wikex-editor-route");
+      editor.removeAttribute("data-wikex-inspecting");
+      document.documentElement.removeAttribute("data-wikex-forwarding-block");
+    };
+  }, [editor, route]);
+  useEffect3(() => {
+    editor.classList.toggle("wikex-editor--inspecting", inspectorOpen);
+    editor.setAttribute("data-wikex-inspecting", String(inspectorOpen));
+  }, [editor, inspectorOpen]);
+  useEffect3(() => {
+    let activeIframe = null;
+    let cleanupActiveIframe = () => void 0;
+    let bindFrame = 0;
+    const bindIframe = () => {
+      const iframe = previewWrapper.querySelector("#live-preview-iframe");
+      if (iframe === activeIframe) return;
+      cleanupActiveIframe();
+      activeIframe = iframe;
+      if (!iframe) return;
+      let cleanupFrame = () => void 0;
+      const installFrameEditor = () => {
+        cleanupFrame();
+        let frameDocument = null;
+        try {
+          frameDocument = iframe.contentDocument;
+        } catch {
+          return;
+        }
+        if (!frameDocument?.body) return;
+        const style = frameDocument.createElement("style");
+        style.dataset.wikexEditor = "true";
+        style.textContent = `
+        #wikex-selection-box {
+          border: 1.5px solid #a67c3f;
+          border-radius: 4px;
+          display: none;
+          pointer-events: none;
+          position: fixed;
+          z-index: 30;
+        }
+        .wikex-text-resize-handle {
+          align-items: center;
+          background: #fff;
+          border: 2px solid #a67c3f;
+          border-radius: 999px;
+          box-shadow: 0 3px 12px rgba(15,20,17,.22);
+          cursor: ew-resize;
+          display: none;
+          height: 34px;
+          justify-content: center;
+          padding: 0;
+          position: fixed;
+          touch-action: none;
+          transform: translate(-50%, -50%);
+          width: 12px;
+          z-index: 62;
+        }
+        .wikex-text-resize-handle::after {
+          background: #a67c3f;
+          border-radius: 99px;
+          content: "";
+          height: 18px;
+          width: 2px;
+        }
+        .wikex-text-resize-handle:hover,
+        .wikex-text-resize-handle[data-active="true"] {
+          background: #f3dfb5;
+          box-shadow: 0 0 0 4px rgba(166,124,63,.18), 0 3px 12px rgba(15,20,17,.22);
+        }
+        #wikex-text-width-label {
+          background: #a67c3f;
+          border-radius: 6px;
+          color: #fff;
+          display: none;
+          font: 700 11px/1 ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+          padding: 5px 7px;
+          pointer-events: none;
+          position: fixed;
+          transform: translate(-50%, -100%);
+          white-space: nowrap;
+          z-index: 63;
+        }
+        #wikex-selection-toolbar {
+          align-items: center;
+          background: rgba(20,29,23,.96);
+          border: 1px solid rgba(255,255,255,.12);
+          border-radius: 12px;
+          box-shadow: 0 14px 40px rgba(15,20,17,.24);
+          color: #172019;
+          display: none;
+          font: 600 12px/1.2 ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+          gap: 4px;
+          max-width: calc(100vw - 24px);
+          padding: 5px;
+          position: fixed;
+          z-index: 60;
+        }
+        #wikex-selection-toolbar span {
+          color: rgba(255,255,255,.7);
+          max-width: 220px;
+          overflow: hidden;
+          padding: 0 8px;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+        #wikex-selection-toolbar button {
+          background: rgba(255,255,255,.1);
+          border: 1px solid transparent;
+          border-radius: 8px;
+          color: #fff;
+          cursor: pointer;
+          font: inherit;
+          min-height: 30px;
+          padding: 6px 10px;
+          transition: background-color 140ms ease, border-color 140ms ease;
+          white-space: nowrap;
+        }
+        #wikex-selection-toolbar button:hover { background: rgba(255,255,255,.17); }
+        #wikex-selection-toolbar button[data-primary="true"] {
+          background: #d2b477;
+          color: #162019;
+        }
+        #wikex-selection-toolbar button[data-primary="true"]:hover { background: #e4cc9b; }
+        #wikex-selection-toolbar button:disabled { cursor: not-allowed; opacity: .45; }
+        [data-wikex-inline-editing="true"] {
+          caret-color: #a67c3f;
+          cursor: text !important;
+          min-width: 1ch;
+          outline: none !important;
+        }
+        [data-wikex-field]:is(h1,h2,h3,h4,h5,h6,p,span,strong),
+        [data-wikex-field] :is(h1,h2,h3,h4,h5,h6,p,span,strong) { cursor: text; }
+        [data-wikex-field]:is(h1,h2,h3,h4,h5,h6,p,span,strong):not([data-wikex-selected="true"]):hover {
+          outline: 1px dashed rgba(166,124,63,.58);
+          outline-offset: 4px;
+        }
+        .admin-bar { display: none !important; }
+        html { --admin-bar-height: 0px !important; }
+        body * { cursor: default; }
+        body a, body button { cursor: pointer; }
+      `;
+        frameDocument.head.appendChild(style);
+        const selectionBox = frameDocument.createElement("div");
+        selectionBox.id = "wikex-selection-box";
+        const leftResizeHandle = frameDocument.createElement("button");
+        leftResizeHandle.ariaLabel = "K\xE9o \u0111\u1EC3 \u0111\u1ED5i chi\u1EC1u r\u1ED9ng t\u1EEB b\xEAn tr\xE1i";
+        leftResizeHandle.className = "wikex-text-resize-handle";
+        leftResizeHandle.dataset.side = "left";
+        leftResizeHandle.title = "K\xE9o \u0111\u1EC3 \u0111\u1ED5i chi\u1EC1u r\u1ED9ng \xB7 Nh\u1EA5p \u0111\xFAp \u0111\u1EC3 tr\u1EA3 v\u1EC1 t\u1EF1 \u0111\u1ED9ng";
+        leftResizeHandle.type = "button";
+        const rightResizeHandle = frameDocument.createElement("button");
+        rightResizeHandle.ariaLabel = "K\xE9o \u0111\u1EC3 \u0111\u1ED5i chi\u1EC1u r\u1ED9ng t\u1EEB b\xEAn ph\u1EA3i";
+        rightResizeHandle.className = "wikex-text-resize-handle";
+        rightResizeHandle.dataset.side = "right";
+        rightResizeHandle.title = "K\xE9o \u0111\u1EC3 \u0111\u1ED5i chi\u1EC1u r\u1ED9ng \xB7 Nh\u1EA5p \u0111\xFAp \u0111\u1EC3 tr\u1EA3 v\u1EC1 t\u1EF1 \u0111\u1ED9ng";
+        rightResizeHandle.type = "button";
+        const widthLabel = frameDocument.createElement("span");
+        widthLabel.id = "wikex-text-width-label";
+        const toolbar = frameDocument.createElement("div");
+        toolbar.id = "wikex-selection-toolbar";
+        const label = frameDocument.createElement("span");
+        const propertiesButton = frameDocument.createElement("button");
+        propertiesButton.dataset.primary = "true";
+        propertiesButton.textContent = "Thu\u1ED9c t\xEDnh";
+        propertiesButton.type = "button";
+        toolbar.append(label, propertiesButton);
+        frameDocument.body.append(
+          selectionBox,
+          leftResizeHandle,
+          rightResizeHandle,
+          widthLabel,
+          toolbar
+        );
+        let selectedElement = null;
+        let inlineInputHandler = null;
+        let inlineBlurHandler = null;
+        let inlineKeyHandler = null;
+        let inlineOriginalText = "";
+        const resizeHandles = [leftResizeHandle, rightResizeHandle];
+        const hideResizeControls = () => {
+          for (const handle of resizeHandles) handle.style.display = "none";
+          widthLabel.style.display = "none";
+        };
+        const updateSelectionPosition = () => {
+          if (!selectedElement?.isConnected) {
+            selectionBox.style.display = "none";
+            toolbar.style.display = "none";
+            hideResizeControls();
+            return;
+          }
+          const bounds = selectedElement.getBoundingClientRect();
+          const isHeaderSelection = Boolean(
+            selectedElement.closest('header, [data-wikex-scope="header"]')
+          );
+          const obstructedTop = isHeaderSelection ? 0 : Array.from(
+            frameDocument?.querySelectorAll(
+              'header, [data-wikex-scope="header"]'
+            ) ?? []
+          ).reduce((top, candidate) => {
+            const style2 = iframe.contentWindow?.getComputedStyle(candidate);
+            const candidateBounds = candidate.getBoundingClientRect();
+            const obstructsCanvas = (style2?.position === "fixed" || style2?.position === "sticky") && candidateBounds.top <= top + 1 && candidateBounds.bottom > 0;
+            return obstructsCanvas ? Math.max(top, candidateBounds.bottom) : top;
+          }, 0);
+          const visibleLeft = Math.max(0, bounds.left);
+          const visibleTop = Math.max(obstructedTop, 0, bounds.top);
+          const visibleRight = Math.min(iframe.clientWidth, bounds.right);
+          const visibleBottom = Math.min(iframe.clientHeight, bounds.bottom);
+          if (visibleRight <= visibleLeft || visibleBottom <= visibleTop) {
+            selectionBox.style.display = "none";
+            toolbar.style.display = "none";
+            hideResizeControls();
+            return;
+          }
+          selectionBox.style.display = "block";
+          selectionBox.style.height = `${visibleBottom - visibleTop}px`;
+          selectionBox.style.left = `${visibleLeft}px`;
+          selectionBox.style.top = `${visibleTop}px`;
+          selectionBox.style.width = `${visibleRight - visibleLeft}px`;
+          const canResizeText = Boolean(selectedTextResize.current);
+          for (const [handle, horizontalPosition] of [
+            [leftResizeHandle, visibleLeft],
+            [rightResizeHandle, visibleRight]
+          ]) {
+            handle.style.display = canResizeText ? "flex" : "none";
+            handle.style.left = `${Math.max(8, Math.min(iframe.clientWidth - 8, horizontalPosition))}px`;
+            handle.style.top = `${visibleTop + (visibleBottom - visibleTop) / 2}px`;
+          }
+          toolbar.style.display = "flex";
+          const toolbarBounds = toolbar.getBoundingClientRect();
+          const toolbarWidth = Math.min(toolbarBounds.width || 260, iframe.clientWidth - 16);
+          const toolbarHeight = toolbarBounds.height || 42;
+          const belowTop = visibleBottom + 8;
+          const aboveTop = visibleTop - toolbarHeight - 8;
+          const toolbarTop = belowTop + toolbarHeight <= iframe.clientHeight ? belowTop : aboveTop >= obstructedTop + 8 ? aboveTop : Math.min(visibleTop + 8, iframe.clientHeight - toolbarHeight - 8);
+          toolbar.style.left = `${Math.max(8, Math.min(visibleLeft, iframe.clientWidth - toolbarWidth - 8))}px`;
+          toolbar.style.top = `${Math.max(obstructedTop + 8, toolbarTop)}px`;
+        };
+        let activeTextResize = null;
+        const startTextResize = (event, side, handle) => {
+          const element = selectedElement;
+          const selection = selectedTextResize.current;
+          const parent = element?.parentElement;
+          if (!element || !selection || !parent) return;
+          event.preventDefault();
+          event.stopPropagation();
+          event.stopImmediatePropagation();
+          stopInlineEditing(true);
+          const bounds = element.getBoundingClientRect();
+          const parentBounds = parent.getBoundingClientRect();
+          const parentStyle = iframe.contentWindow?.getComputedStyle(parent);
+          const paddingLeft = Number.parseFloat(parentStyle?.paddingLeft || "0") || 0;
+          const paddingRight = Number.parseFloat(parentStyle?.paddingRight || "0") || 0;
+          const contentLeft = parentBounds.left + paddingLeft;
+          const contentWidth = Math.max(
+            MIN_TEXT_WIDTH_PX,
+            parentBounds.width - paddingLeft - paddingRight
+          );
+          const contentRight = contentLeft + contentWidth;
+          const startLeft = Math.max(contentLeft, Math.min(bounds.left, contentRight));
+          const startRight = Math.max(startLeft, Math.min(bounds.right, contentRight));
+          activeTextResize = {
+            contentLeft,
+            contentWidth,
+            element,
+            originalStyle: {
+              boxSizing: element.style.boxSizing,
+              marginLeft: element.style.marginLeft,
+              marginRight: element.style.marginRight,
+              maxWidth: element.style.maxWidth,
+              width: element.style.width
+            },
+            selection,
+            side,
+            startLeft,
+            startRight,
+            width: Math.max(MIN_TEXT_WIDTH_PX, startRight - startLeft),
+            widthOffset: Math.max(0, startLeft - contentLeft)
+          };
+          handle.dataset.active = "true";
+          handle.setPointerCapture(event.pointerId);
+          frameDocument.body.style.cursor = "ew-resize";
+          frameDocument.body.style.userSelect = "none";
+          widthLabel.style.display = "block";
+          widthLabel.style.left = `${bounds.left + bounds.width / 2}px`;
+          widthLabel.style.top = `${Math.max(28, bounds.top - 8)}px`;
+          widthLabel.textContent = `${Math.round(activeTextResize.width)} px`;
+          setSelectionLabel(`\u0110ang ch\u1EC9nh chi\u1EC1u r\u1ED9ng \xB7 ${selection.fieldPath}`);
+        };
+        const moveTextResize = (event) => {
+          const resize = activeTextResize;
+          if (!resize) return;
+          event.preventDefault();
+          event.stopPropagation();
+          const minimumWidth = Math.min(MIN_TEXT_WIDTH_PX, resize.contentWidth);
+          const contentRight = resize.contentLeft + resize.contentWidth;
+          const nextLeft = resize.side === "left" ? Math.max(
+            resize.contentLeft,
+            Math.min(event.clientX, resize.startRight - minimumWidth)
+          ) : resize.startLeft;
+          const nextRight = resize.side === "right" ? Math.min(contentRight, Math.max(event.clientX, resize.startLeft + minimumWidth)) : resize.startRight;
+          const nextWidth = Math.max(minimumWidth, nextRight - nextLeft);
+          const width = Math.min(100, Math.max(5, nextWidth / resize.contentWidth * 100));
+          const widthOffset = Math.min(
+            100 - width,
+            Math.max(0, (nextLeft - resize.contentLeft) / resize.contentWidth * 100)
+          );
+          resize.width = Math.round(width * 1e3) / 1e3;
+          resize.widthOffset = Math.round(widthOffset * 1e3) / 1e3;
+          resize.element.style.boxSizing = "border-box";
+          resize.element.style.marginLeft = `${resize.widthOffset}%`;
+          resize.element.style.marginRight = "auto";
+          resize.element.style.maxWidth = "none";
+          resize.element.style.width = `${resize.width}%`;
+          updateSelectionPosition();
+          const resizedBounds = resize.element.getBoundingClientRect();
+          widthLabel.style.display = "block";
+          widthLabel.style.left = `${resizedBounds.left + resizedBounds.width / 2}px`;
+          widthLabel.style.top = `${Math.max(28, resizedBounds.top - 8)}px`;
+          widthLabel.textContent = `${Math.round(resizedBounds.width)} px`;
+        };
+        const finishTextResize = (event) => {
+          const resize = activeTextResize;
+          if (!resize) return;
+          event.preventDefault();
+          event.stopPropagation();
+          activeTextResize = null;
+          for (const handle of resizeHandles) delete handle.dataset.active;
+          frameDocument.body.style.cursor = "";
+          frameDocument.body.style.userSelect = "";
+          widthLabel.style.display = "none";
+          textWidthSaveController.current?.abort();
+          const controller = new AbortController();
+          textWidthSaveController.current = controller;
+          setSelectionLabel(`\u0110ang t\u1EF1 \u0111\u1ED9ng l\u01B0u chi\u1EC1u r\u1ED9ng \xB7 ${resize.selection.fieldPath}`);
+          void saveTextStylePatch(
+            resize.selection,
+            { width: resize.width, widthOffset: resize.widthOffset },
+            controller.signal
+          ).then(() => {
+            if (controller.signal.aborted) return;
+            setSelectionLabel(`\u0110\xE3 l\u01B0u chi\u1EC1u r\u1ED9ng \xB7 ${Math.round(resize.width)}%`);
+          }).catch((error) => {
+            if (controller.signal.aborted) return;
+            Object.assign(resize.element.style, resize.originalStyle);
+            updateSelectionPosition();
+            setSelectionLabel(
+              error instanceof Error ? `Kh\xF4ng th\u1EC3 l\u01B0u chi\u1EC1u r\u1ED9ng \xB7 ${error.message}` : "Kh\xF4ng th\u1EC3 l\u01B0u chi\u1EC1u r\u1ED9ng \xB7 Th\u1EED l\u1EA1i"
+            );
+          });
+        };
+        const bindResizeHandle = (handle, side) => {
+          const handlePointerDown = (event) => startTextResize(event, side, handle);
+          const stopHandleClick = (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            event.stopImmediatePropagation();
+          };
+          const resetTextWidth = (event) => {
+            stopHandleClick(event);
+            const element = selectedElement;
+            const selection = selectedTextResize.current;
+            if (!element || !selection) return;
+            const previousStyle = {
+              boxSizing: element.style.boxSizing,
+              marginLeft: element.style.marginLeft,
+              marginRight: element.style.marginRight,
+              maxWidth: element.style.maxWidth,
+              width: element.style.width
+            };
+            element.style.boxSizing = "";
+            element.style.marginLeft = "";
+            element.style.marginRight = "";
+            element.style.maxWidth = "";
+            element.style.width = "";
+            updateSelectionPosition();
+            textWidthSaveController.current?.abort();
+            const controller = new AbortController();
+            textWidthSaveController.current = controller;
+            setSelectionLabel(`\u0110ang tr\u1EA3 chi\u1EC1u r\u1ED9ng v\u1EC1 t\u1EF1 \u0111\u1ED9ng \xB7 ${selection.fieldPath}`);
+            void saveTextStylePatch(
+              selection,
+              { width: void 0, widthOffset: void 0 },
+              controller.signal
+            ).then(() => {
+              if (!controller.signal.aborted) {
+                setSelectionLabel(`Chi\u1EC1u r\u1ED9ng t\u1EF1 \u0111\u1ED9ng \xB7 ${selection.fieldPath}`);
+              }
+            }).catch((error) => {
+              if (controller.signal.aborted) return;
+              Object.assign(element.style, previousStyle);
+              updateSelectionPosition();
+              setSelectionLabel(
+                error instanceof Error ? `Kh\xF4ng th\u1EC3 \u0111\u1EB7t l\u1EA1i chi\u1EC1u r\u1ED9ng \xB7 ${error.message}` : "Kh\xF4ng th\u1EC3 \u0111\u1EB7t l\u1EA1i chi\u1EC1u r\u1ED9ng \xB7 Th\u1EED l\u1EA1i"
+              );
+            });
+          };
+          handle.addEventListener("click", stopHandleClick);
+          handle.addEventListener("dblclick", resetTextWidth);
+          handle.addEventListener("pointerdown", handlePointerDown);
+          handle.addEventListener("pointermove", moveTextResize);
+          handle.addEventListener("pointerup", finishTextResize);
+          handle.addEventListener("pointercancel", finishTextResize);
+          return () => {
+            handle.removeEventListener("click", stopHandleClick);
+            handle.removeEventListener("dblclick", resetTextWidth);
+            handle.removeEventListener("pointerdown", handlePointerDown);
+            handle.removeEventListener("pointermove", moveTextResize);
+            handle.removeEventListener("pointerup", finishTextResize);
+            handle.removeEventListener("pointercancel", finishTextResize);
+          };
+        };
+        const unbindLeftResizeHandle = bindResizeHandle(leftResizeHandle, "left");
+        const unbindRightResizeHandle = bindResizeHandle(rightResizeHandle, "right");
+        const stopInlineEditing = (commit = true) => {
+          const element = selectedElement;
+          if (!element?.hasAttribute("data-wikex-inline-editing")) return;
+          if (inlineInputHandler) element.removeEventListener("input", inlineInputHandler);
+          if (inlineBlurHandler) element.removeEventListener("blur", inlineBlurHandler);
+          if (inlineKeyHandler) element.removeEventListener("keydown", inlineKeyHandler);
+          const nextText = commit ? readInlineText(element) : inlineOriginalText;
+          if (!commit) element.innerText = inlineOriginalText;
+          element.removeAttribute("contenteditable");
+          element.removeAttribute("data-wikex-inline-editing");
+          if (commit && nextText !== inlineOriginalText) {
+            const control = selectedControl.current;
+            const richTextControl = selectedRichTextControl.current;
+            const globalSelection = selectedGlobal.current;
+            if (control) {
+              updatePayloadControl(
+                control,
+                control instanceof HTMLInputElement ? normalizeText(nextText) : nextText
+              );
+            } else if (richTextControl) {
+              updateRichTextControl(richTextControl, nextText);
+            } else if (globalSelection) {
+              const previousText = inlineOriginalText;
+              const savedElement = element;
+              setSelectionLabel(`\u0110ang l\u01B0u \xB7 ${globalSelection.scope}`);
+              void updateGlobalFields(globalSelection.scope, [
+                { path: globalSelection.fieldPath, value: nextText }
+              ]).then(() => {
+                for (const matchingElement of getMatchingPreviewFields(
+                  savedElement,
+                  globalSelection.fieldPath
+                )) {
+                  matchingElement.innerText = nextText;
+                  if (globalSelection.scope === "settings" && globalSelection.fieldPath === "email") {
+                    matchingElement.closest("a")?.setAttribute("href", `mailto:${nextText}`);
+                  }
+                }
+                selectedGlobal.current = { ...globalSelection, text: nextText };
+                setSelectionLabel(`\u0110\xE3 c\u1EADp nh\u1EADt \xB7 ${globalSelection.scope}`);
+              }).catch(() => {
+                if (savedElement.isConnected && readInlineText(savedElement) === nextText) {
+                  savedElement.innerText = previousText;
+                }
+                selectedText.current = previousText;
+                setSelectionLabel("Kh\xF4ng th\u1EC3 l\u01B0u n\u1ED9i dung d\xF9ng chung \xB7 Th\u1EED l\u1EA1i");
+              });
+            }
+            selectedText.current = nextText;
+            if (!globalSelection) {
+              setSelectionLabel(`\u0110\xE3 c\u1EADp nh\u1EADt \xB7 ${selectedFieldPath.current || "n\u1ED9i dung"}`);
+            }
+          } else {
+            setSelectionLabel(selectedFieldPath.current || "Ch\u1ECDn m\u1ED9t ph\u1EA7n t\u1EED tr\xEAn trang");
+          }
+          propertiesButton.textContent = "Thu\u1ED9c t\xEDnh";
+          inlineInputHandler = null;
+          inlineBlurHandler = null;
+          inlineKeyHandler = null;
+        };
+        const startInlineEditing = () => {
+          if (!selectedElement) return;
+          if (!selectedControl.current && !selectedRichTextControl.current && !selectedGlobal.current) {
+            openInspector();
+            return;
+          }
+          stopInlineEditing(false);
+          inlineOriginalText = readInlineText(selectedElement);
+          selectedElement.setAttribute("contenteditable", "plaintext-only");
+          selectedElement.dataset.wikexInlineEditing = "true";
+          selectedElement.focus();
+          inlineInputHandler = () => {
+            updateSelectionPosition();
+            setSelectionLabel("\u0110ang s\u1EEDa tr\u1EF1c ti\u1EBFp \xB7 Enter \u0111\u1EC3 l\u01B0u \xB7 Esc \u0111\u1EC3 h\u1EE7y");
+          };
+          inlineBlurHandler = () => stopInlineEditing(true);
+          inlineKeyHandler = (event) => {
+            if (event.key === "Escape") {
+              event.preventDefault();
+              stopInlineEditing(false);
+              return;
+            }
+            if (event.key === "Enter" && !event.shiftKey) {
+              event.preventDefault();
+              stopInlineEditing(true);
+            }
+          };
+          selectedElement.addEventListener("input", inlineInputHandler);
+          selectedElement.addEventListener("blur", inlineBlurHandler);
+          selectedElement.addEventListener("keydown", inlineKeyHandler);
+          propertiesButton.textContent = "Thu\u1ED9c t\xEDnh";
+          const selection = frameDocument?.getSelection();
+          const range = frameDocument?.createRange();
+          if (selection && range) {
+            range.selectNodeContents(selectedElement);
+            selection.removeAllRanges();
+            selection.addRange(range);
+          }
+        };
+        const selectElement = (element) => {
+          stopInlineEditing(true);
+          selectedElement?.removeAttribute("data-wikex-selected");
+          selectedElement = element;
+          selectedElement.dataset.wikexSelected = "true";
+          selectedPreviewElement.current = element;
+          const baseFieldPath = element.dataset.wikexField ?? element.closest("[data-wikex-field]")?.dataset.wikexField;
+          const text = normalizeText(element.innerText || element.textContent || "");
+          const fieldPath = inferEditableFieldPath(element, baseFieldPath);
+          const documentTarget = getEditorDocumentTarget();
+          const isAggregateSelection = isAggregateInspectorSelection(documentTarget, fieldPath);
+          const supportsTextStyles = Boolean(text) && element.matches(EDITABLE_PREVIEW_SELECTOR);
+          const elementStyleKey = supportsTextStyles ? fieldPath || getEditableElementStyleKey(element) : void 0;
+          const resizeStyleKey = isAggregateSelection ? getEditableElementStyleKey(element) : elementStyleKey;
+          const elementScope = element.closest("[data-wikex-scope]")?.dataset.wikexScope;
+          const configuredGlobalScope = element.dataset.wikexGlobal ?? element.closest("[data-wikex-global]")?.dataset.wikexGlobal;
+          const fieldGlobalScope = isEditableGlobalScope(configuredGlobalScope) ? configuredGlobalScope : isEditableGlobalScope(elementScope) ? elementScope : void 0;
+          const externalGlobalScope = fieldGlobalScope && fieldGlobalScope !== editorScopeRef.current ? fieldGlobalScope : void 0;
+          const control = externalGlobalScope ? null : getFieldControl(fieldPath, text);
+          const richTextControl = control ? null : getRichTextControl(fieldPath, text);
+          const interactiveElement = element.closest(
+            "a, button"
+          );
+          const globalSelection = externalGlobalScope && fieldPath ? {
+            fieldPath,
+            href: interactiveElement instanceof HTMLAnchorElement ? interactiveElement.getAttribute("href") || void 0 : void 0,
+            scope: externalGlobalScope,
+            supportsLink: Boolean(interactiveElement),
+            text
+          } : null;
+          const textInspector = !globalSelection && !isAggregateSelection && documentTarget && elementStyleKey ? {
+            ...documentTarget,
+            canEditText: Boolean(control),
+            fieldPath: elementStyleKey,
+            multiline: control instanceof HTMLTextAreaElement,
+            tagName: element.tagName.toLowerCase(),
+            text
+          } : null;
+          const textResize = !globalSelection && documentTarget && resizeStyleKey && element.matches(RESIZABLE_TEXT_SELECTOR) ? {
+            ...documentTarget,
+            canEditText: false,
+            fieldPath: resizeStyleKey,
+            multiline: false,
+            tagName: element.tagName.toLowerCase(),
+            text
+          } : null;
+          const tagLabel = element.tagName.toLowerCase();
+          const semanticLabel = tagLabel === "img" || element.querySelector("img") ? "H\xECnh \u1EA3nh" : /^h[1-6]$/.test(tagLabel) ? "Ti\xEAu \u0111\u1EC1" : tagLabel === "p" ? "\u0110o\u1EA1n v\u0103n" : interactiveElement ? "Li\xEAn k\u1EBFt / n\xFAt" : "N\u1ED9i dung";
+          const readableLabel = fieldPath || control?.name || `${semanticLabel}${text ? ` \xB7 ${text.slice(0, 36)}` : ""}`;
+          selectedControl.current = control;
+          selectedRichTextControl.current = externalGlobalScope ? null : richTextControl;
+          selectedFieldPath.current = fieldPath;
+          selectedGlobal.current = globalSelection;
+          selectedTextInspector.current = textInspector;
+          selectedTextResize.current = textResize;
+          setGlobalInspectorSelection(globalSelection);
+          setTextInspectorSelection(textInspector);
+          selectedText.current = text;
+          propertiesButton.disabled = false;
+          label.textContent = readableLabel;
+          setSelectionLabel(readableLabel);
+          updateSelectionPosition();
+        };
+        const revealFieldInPreview = (fieldPath, attempt = 0) => {
+          const target = Array.from(
+            frameDocument?.querySelectorAll("[data-wikex-field]") ?? []
+          ).find((element) => element.dataset.wikexField === fieldPath);
+          if (!target) {
+            if (attempt < 24) {
+              window.setTimeout(() => revealFieldInPreview(fieldPath, attempt + 1), 150);
+            }
+            return;
+          }
+          target.scrollIntoView({ behavior: "smooth", block: "center" });
+          selectElement(target);
+        };
+        revealPreviewField.current = revealFieldInPreview;
+        const handleFrameClick = (event) => {
+          const rawTarget = event.target;
+          if (!rawTarget || typeof rawTarget.closest !== "function") return;
+          const rawElement = rawTarget;
+          if (rawElement.closest("#wikex-selection-toolbar, .wikex-text-resize-handle")) {
+            return;
+          }
+          if (rawElement.closest('[data-wikex-inline-editing="true"]')) return;
+          const interactiveCandidate = rawElement.closest(
+            EDITABLE_INTERACTIVE_SELECTOR
+          );
+          const fieldCandidate = rawElement.closest("[data-wikex-field]") ?? interactiveCandidate?.querySelector("[data-wikex-field]");
+          const semanticCandidate = rawElement.closest(EDITABLE_PREVIEW_SELECTOR);
+          const candidate = fieldCandidate?.matches(EDITABLE_PREVIEW_SELECTOR) ? fieldCandidate : semanticCandidate ?? fieldCandidate;
+          if (!candidate || candidate.closest("[data-wikex-no-edit]")) return;
+          const candidateScope = candidate.closest("[data-wikex-scope]")?.dataset.wikexScope;
+          const isSharedGlobalInPage = editorScopeRef.current === "content" && (candidateScope === "header" || candidateScope === "footer");
+          if (candidateScope && candidateScope !== editorScopeRef.current && !isSharedGlobalInPage) {
+            return;
+          }
+          if (interactiveCandidate) event.preventDefault();
+          event.stopPropagation();
+          event.stopImmediatePropagation();
+          selectElement(candidate);
+        };
+        const handleDoubleClick = (event) => {
+          const eventTarget = event.target;
+          if (eventTarget instanceof Element && eventTarget.closest(".wikex-text-resize-handle")) {
+            return;
+          }
+          event.preventDefault();
+          startInlineEditing();
+        };
+        const stopToolbarEvent = (event) => event.stopPropagation();
+        const keepEditorFocus = (event) => event.preventDefault();
+        const handlePropertiesClick = () => {
+          stopInlineEditing(true);
+          openInspector();
+        };
+        propertiesButton.addEventListener("click", handlePropertiesClick);
+        toolbar.addEventListener("click", stopToolbarEvent);
+        toolbar.addEventListener("pointerdown", keepEditorFocus);
+        frameDocument.addEventListener("click", handleFrameClick, true);
+        frameDocument.addEventListener("dblclick", handleDoubleClick, true);
+        frameDocument.addEventListener("scroll", updateSelectionPosition, true);
+        iframe.contentWindow?.addEventListener("resize", updateSelectionPosition);
+        cleanupFrame = () => {
+          stopInlineEditing(false);
+          textWidthSaveController.current?.abort();
+          activeTextResize = null;
+          if (frameDocument?.body) {
+            frameDocument.body.style.cursor = "";
+            frameDocument.body.style.userSelect = "";
+          }
+          selectedElement?.removeAttribute("data-wikex-selected");
+          selectedTextResize.current = null;
+          unbindLeftResizeHandle();
+          unbindRightResizeHandle();
+          propertiesButton.removeEventListener("click", handlePropertiesClick);
+          toolbar.removeEventListener("click", stopToolbarEvent);
+          toolbar.removeEventListener("pointerdown", keepEditorFocus);
+          frameDocument?.removeEventListener("click", handleFrameClick, true);
+          frameDocument?.removeEventListener("dblclick", handleDoubleClick, true);
+          frameDocument?.removeEventListener("scroll", updateSelectionPosition, true);
+          iframe.contentWindow?.removeEventListener("resize", updateSelectionPosition);
+          selectionBox.remove();
+          leftResizeHandle.remove();
+          rightResizeHandle.remove();
+          widthLabel.remove();
+          toolbar.remove();
+          style.remove();
+          if (revealPreviewField.current === revealFieldInPreview) {
+            revealPreviewField.current = () => void 0;
+          }
+          selectedPreviewElement.current = null;
+          selectedTextInspector.current = null;
+        };
+      };
+      iframe.addEventListener("load", installFrameEditor);
+      installFrameEditor();
+      cleanupActiveIframe = () => {
+        iframe.removeEventListener("load", installFrameEditor);
+        cleanupFrame();
+      };
+    };
+    const scheduleBindIframe = () => {
+      if (bindFrame) return;
+      bindFrame = window.requestAnimationFrame(() => {
+        bindFrame = 0;
+        bindIframe();
+      });
+    };
+    bindIframe();
+    const observer = new MutationObserver(scheduleBindIframe);
+    observer.observe(previewWrapper, { childList: true, subtree: true });
+    return () => {
+      observer.disconnect();
+      window.cancelAnimationFrame(bindFrame);
+      cleanupActiveIframe();
+    };
+  }, [openInspector, previewWrapper]);
+  useEffect3(() => {
+    let activeBlocksFieldID = "";
+    let initialized = false;
+    let knownRows = /* @__PURE__ */ new Set();
+    let revealTimer;
+    let scanFrame = 0;
+    const scanRows = () => {
+      const blocksField = getVisibleBlocksField();
+      if (!blocksField) return;
+      const rows = Array.from(
+        blocksField.querySelectorAll(
+          '.blocks-field__rows > [id^="layout-row-"], .blocks-field__rows > [id^="customLayout-row-"]'
+        )
+      );
+      if (!initialized || activeBlocksFieldID !== blocksField.id) {
+        activeBlocksFieldID = blocksField.id;
+        knownRows = new Set(rows.map((row) => row.id));
+        initialized = true;
+        return;
+      }
+      if (!rows.length) {
+        knownRows.clear();
+        return;
+      }
+      const addedRows = rows.filter((row) => !knownRows.has(row.id));
+      knownRows = new Set(rows.map((row) => row.id));
+      const addedRow = addedRows.at(-1);
+      const match = addedRow?.id.match(/^(customLayout|layout)-row-(\d+)$/);
+      if (!addedRow || !match) return;
+      const fieldPath = `${match[1]}.${match[2]}`;
+      setSelectionLabel(fieldPath);
+      scrollEditorTo(addedRow);
+      window.clearTimeout(revealTimer);
+      revealTimer = window.setTimeout(() => revealPreviewField.current(fieldPath), 300);
+    };
+    const scheduleScanRows = () => {
+      if (scanFrame) return;
+      scanFrame = window.requestAnimationFrame(() => {
+        scanFrame = 0;
+        scanRows();
+      });
+    };
+    scanRows();
+    const observer = new MutationObserver(scheduleScanRows);
+    observer.observe(document.body, { childList: true, subtree: true });
+    return () => {
+      observer.disconnect();
+      window.cancelAnimationFrame(scanFrame);
+      window.clearTimeout(revealTimer);
+    };
+  }, []);
+  return /* @__PURE__ */ jsxs3(Fragment2, { children: [
+    createPortal(
+      /* @__PURE__ */ jsxs3(Fragment2, { children: [
+        /* @__PURE__ */ jsxs3("aside", { "aria-label": "C\xF4ng c\u1EE5 d\u1EF1ng trang", className: "wikex-editor-rail", children: [
+          /* @__PURE__ */ jsx3("div", { "aria-label": "Wikex Editor", className: "wikex-editor-rail__brand", children: "W" }),
+          /* @__PURE__ */ jsxs3(
+            "button",
+            {
+              className: "wikex-editor-tool",
+              onClick: isGlobalEditor ? openInspector : openElements,
+              type: "button",
+              children: [
+                /* @__PURE__ */ jsx3(EditorIcon, { name: "elements" }),
+                /* @__PURE__ */ jsx3("span", { children: isGlobalEditor ? "N\u1ED9i dung" : "Th\xEAm kh\u1ED1i" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs3(
+            "button",
+            {
+              className: "wikex-editor-tool",
+              onClick: isGlobalEditor ? openInspector : openSections,
+              type: "button",
+              children: [
+                /* @__PURE__ */ jsx3(EditorIcon, { name: "sections" }),
+                /* @__PURE__ */ jsx3("span", { children: isGlobalEditor ? "Li\xEAn k\u1EBFt" : "B\u1ED1 c\u1EE5c" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs3("a", { className: "wikex-editor-tool", href: pagesHref, children: [
+            /* @__PURE__ */ jsx3(EditorIcon, { name: "pages" }),
+            /* @__PURE__ */ jsx3("span", { children: "Trang" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs3("div", { className: "wikex-editor-canvas-title", children: [
+          /* @__PURE__ */ jsx3("strong", { children: "Tr\xECnh ch\u1EC9nh s\u1EEDa Wikex" }),
+          /* @__PURE__ */ jsx3("span", { children: selectionLabel }),
+          /* @__PURE__ */ jsx3("span", { className: "wikex-editor-canvas-title__hint", children: "Nh\u1EA5p \u0111\xFAp v\u0103n b\u1EA3n \u0111\u1EC3 s\u1EEDa" })
+        ] })
+      ] }),
+      previewWrapper
+    ),
+    inspectorOpen && globalInspectorSelection && createPortal(
+      /* @__PURE__ */ jsx3(
+        GlobalInlineInspector,
+        {
+          onApply: applyGlobalInspectorValues,
+          selection: globalInspectorSelection
+        },
+        `${globalInspectorSelection.scope}:${globalInspectorSelection.fieldPath}`
+      ),
+      container
+    ),
+    inspectorOpen && textInspectorSelection && createPortal(
+      /* @__PURE__ */ jsx3(
+        TextStyleInspector,
+        {
+          onApply: applyTextInspectorValues,
+          onTextApply: applyTextInspectorText,
+          selection: textInspectorSelection
+        },
+        `${textInspectorSelection.kind === "collection" ? `${textInspectorSelection.collection}:${textInspectorSelection.documentID}` : `global:${textInspectorSelection.global}`}:${textInspectorSelection.fieldPath}`
+      ),
+      container
+    ),
+    inspectorOpen && createPortal(
+      /* @__PURE__ */ jsx3(
+        "button",
+        {
+          "aria-label": "\u0110\xF3ng b\u1EA3ng thu\u1ED9c t\xEDnh",
+          className: "wikex-inspector-close",
+          onClick: () => setInspectorOpen(false),
+          title: "\u0110\xF3ng b\u1EA3ng thu\u1ED9c t\xEDnh",
+          type: "button",
+          children: /* @__PURE__ */ jsx3("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx3("path", { d: "M6 6l12 12M18 6 6 18" }) })
+        }
+      ),
+      container
+    ),
+    blockPickerScope && createPortal(
+      /* @__PURE__ */ jsx3(
+        BlockPickerModal,
+        {
+          onClose: closeBlockPicker,
+          onSelect: selectBlock,
+          options: getBlockPickerOptions(blockPickerScope),
+          title: blockPickerScope === "post" ? "Ch\u1ECDn component cho b\xE0i vi\u1EBFt" : "Ch\u1ECDn component cho trang"
+        }
+      ),
+      document.body
+    )
+  ] });
+};
+var clampEditWidth = (width, containerWidth) => {
+  const maximumWidth = Math.max(MIN_EDIT_WIDTH, containerWidth - HANDLE_WIDTH - MIN_PREVIEW_WIDTH);
+  return Math.min(Math.max(width, MIN_EDIT_WIDTH), maximumWidth);
+};
+var readStoredRatio = () => {
+  const storedRatio = Number(
+    window.localStorage.getItem(STORAGE_KEY) ?? window.localStorage.getItem(LEGACY_STORAGE_KEY)
+  );
+  return Number.isFinite(storedRatio) && storedRatio > 0 && storedRatio < 1 ? storedRatio : DEFAULT_EDIT_RATIO;
+};
+var setEditWidth = (container, requestedWidth) => {
+  const containerWidth = container.getBoundingClientRect().width;
+  const width = clampEditWidth(requestedWidth, containerWidth);
+  const ratio = width / containerWidth;
+  container.style.setProperty("--live-preview-edit-width", `${width}px`);
+  return ratio;
+};
+var LivePreviewResizeHandle = ({ container }) => {
+  const dragState = useRef2(null);
+  const latestRatio = useRef2(DEFAULT_EDIT_RATIO);
+  const [isDragging, setIsDragging] = useState3(false);
+  const [ratio, setRatio] = useState3(DEFAULT_EDIT_RATIO);
+  useEffect3(() => {
+    const storedRatio = readStoredRatio();
+    const initialRatio = setEditWidth(
+      container,
+      container.getBoundingClientRect().width * storedRatio
+    );
+    latestRatio.current = initialRatio;
+    setRatio(initialRatio);
+    const resizeObserver = new ResizeObserver(() => {
+      if (!dragState.current) {
+        const nextRatio = setEditWidth(
+          container,
+          container.getBoundingClientRect().width * readStoredRatio()
+        );
+        latestRatio.current = nextRatio;
+        setRatio(nextRatio);
+      }
+    });
+    resizeObserver.observe(container);
+    return () => resizeObserver.disconnect();
+  }, [container]);
+  const finishDragging = (event) => {
+    if (dragState.current?.pointerId !== event.pointerId) return;
+    window.localStorage.setItem(STORAGE_KEY, String(latestRatio.current));
+    dragState.current = null;
+    setIsDragging(false);
+  };
+  const handlePointerDown = (event) => {
+    const bounds = container.getBoundingClientRect();
+    event.preventDefault();
+    event.currentTarget.setPointerCapture(event.pointerId);
+    dragState.current = {
+      containerLeft: bounds.left,
+      pointerId: event.pointerId
+    };
+    setIsDragging(true);
+  };
+  const handlePointerMove = (event) => {
+    const drag = dragState.current;
+    if (!drag || drag.pointerId !== event.pointerId) return;
+    const nextRatio = setEditWidth(container, event.clientX - drag.containerLeft);
+    latestRatio.current = nextRatio;
+    setRatio(nextRatio);
+  };
+  const handleKeyDown = (event) => {
+    if (!["ArrowLeft", "ArrowRight", "Home"].includes(event.key)) return;
+    event.preventDefault();
+    const containerWidth = container.getBoundingClientRect().width;
+    const currentWidth = containerWidth * ratio;
+    const step = event.shiftKey ? 40 : 10;
+    const requestedWidth = event.key === "Home" ? containerWidth * DEFAULT_EDIT_RATIO : currentWidth + (event.key === "ArrowLeft" ? -step : step);
+    const nextRatio = setEditWidth(container, requestedWidth);
+    latestRatio.current = nextRatio;
+    setRatio(nextRatio);
+    window.localStorage.setItem(STORAGE_KEY, String(nextRatio));
+  };
+  const resetWidth = () => {
+    const nextRatio = setEditWidth(
+      container,
+      container.getBoundingClientRect().width * DEFAULT_EDIT_RATIO
+    );
+    latestRatio.current = nextRatio;
+    setRatio(nextRatio);
+    window.localStorage.setItem(STORAGE_KEY, String(nextRatio));
+  };
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      "aria-label": "Thay \u0111\u1ED5i \u0111\u1ED9 r\u1ED9ng Live Preview",
+      "aria-orientation": "vertical",
+      "aria-valuemax": Math.round(
+        (1 - MIN_PREVIEW_WIDTH / container.getBoundingClientRect().width) * 100
+      ),
+      "aria-valuemin": Math.round(MIN_EDIT_WIDTH / container.getBoundingClientRect().width * 100),
+      "aria-valuenow": Math.round(ratio * 100),
+      className: `live-preview-resizer${isDragging ? " live-preview-resizer--dragging" : ""}`,
+      onDoubleClick: resetWidth,
+      onKeyDown: handleKeyDown,
+      onPointerCancel: finishDragging,
+      onPointerDown: handlePointerDown,
+      onPointerMove: handlePointerMove,
+      onPointerUp: finishDragging,
+      role: "separator",
+      tabIndex: 0,
+      title: "K\xE9o \u0111\u1EC3 \u0111\u1ED5i \u0111\u1ED9 r\u1ED9ng preview \xB7 Nh\u1EA5p \u0111\xFAp \u0111\u1EC3 \u0111\u1EB7t l\u1EA1i",
+      children: /* @__PURE__ */ jsx3("span", { "aria-hidden": "true", className: "live-preview-resizer__grip" })
+    }
+  );
+};
+var LivePreviewResizer = ({ children }) => {
+  const [targets, setTargets] = useState3(null);
+  useEffect3(() => {
+    let transitionTimer = 0;
+    const clearTransitionState = () => {
+      document.documentElement.classList.remove("wikex-live-preview-switching");
+      document.documentElement.removeAttribute("data-wikex-live-preview-target");
+    };
+    const prepareLivePreviewToggle = (event) => {
+      const eventTarget = event.target;
+      if (!(eventTarget instanceof Element) || !eventTarget.closest("#live-preview-toggler")) {
+        return;
+      }
+      if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+      const editor = document.querySelector(".collection-edit");
+      if (!editor) return;
+      window.clearTimeout(transitionTimer);
+      document.documentElement.dataset.wikexLivePreviewTarget = editor.classList.contains(
+        "collection-edit--is-live-previewing"
+      ) ? "edit" : "preview";
+      document.documentElement.classList.add("wikex-live-preview-switching");
+      transitionTimer = window.setTimeout(clearTransitionState, LIVE_PREVIEW_TRANSITION_MS + 80);
+    };
+    document.addEventListener("click", prepareLivePreviewToggle, true);
+    return () => {
+      document.removeEventListener("click", prepareLivePreviewToggle, true);
+      window.clearTimeout(transitionTimer);
+      clearTransitionState();
+    };
+  }, []);
+  useEffect3(() => {
+    const syncVisualEditorState = () => {
+      const pathname = window.location.pathname;
+      const isVisualEditor = isVisualEditorRoute(pathname);
+      const editor = document.querySelector(".collection-edit");
+      const isActive = Boolean(
+        isVisualEditor && editor?.classList.contains("collection-edit--is-live-previewing")
+      );
+      editor?.toggleAttribute("data-wikex-visual-editor", isActive);
+      if (editor && isActive) editor.dataset.wikexVisualEditor = "true";
+      document.documentElement.classList.toggle("wikex-visual-preview-active", isActive);
+    };
+    const findTargets = () => {
+      syncVisualEditorState();
+      const previewWindow = document.querySelector(
+        ".collection-edit__main-wrapper > .live-preview-window"
+      );
+      const pathname = window.location.pathname;
+      const isVisualEditor = isVisualEditorRoute(pathname);
+      const scope = getEditorScope(pathname);
+      const container = previewWindow?.parentElement ?? null;
+      const editor = previewWindow?.closest(".collection-edit") ?? null;
+      const previewWrapper = previewWindow?.querySelector(
+        ".live-preview-window__wrapper"
+      );
+      const activeIframe = previewWrapper?.querySelector("#live-preview-iframe");
+      const isLivePreviewing = editor?.classList.contains("collection-edit--is-live-previewing");
+      const nextTargets = isVisualEditor && isLivePreviewing && container && editor && previewWrapper && activeIframe ? { container, editor, previewWrapper, route: pathname, scope } : null;
+      setTargets((currentTargets) => {
+        if (!currentTargets || !nextTargets)
+          return currentTargets === nextTargets ? currentTargets : nextTargets;
+        const targetsAreUnchanged = currentTargets.container === nextTargets.container && currentTargets.editor === nextTargets.editor && currentTargets.previewWrapper === nextTargets.previewWrapper && currentTargets.route === nextTargets.route && currentTargets.scope === nextTargets.scope;
+        return targetsAreUnchanged ? currentTargets : nextTargets;
+      });
+    };
+    findTargets();
+    let scanFrame = 0;
+    const scheduleFindTargets = () => {
+      if (scanFrame) return;
+      scanFrame = window.requestAnimationFrame(() => {
+        scanFrame = 0;
+        findTargets();
+      });
+    };
+    const previewStructureSelector = ".collection-edit, .live-preview-window, .live-preview-window__wrapper, #live-preview-iframe";
+    const touchesPreviewStructure = (mutation) => {
+      if (mutation.type === "attributes" && mutation.target instanceof HTMLElement && mutation.target.classList.contains("collection-edit")) {
+        return true;
+      }
+      if (mutation.type !== "childList") return false;
+      return [...mutation.addedNodes, ...mutation.removedNodes].some(
+        (node) => node instanceof HTMLElement && (node.matches(previewStructureSelector) || Boolean(node.querySelector(previewStructureSelector)))
+      );
+    };
+    const observer = new MutationObserver((mutations) => {
+      if (mutations.some(touchesPreviewStructure)) {
+        window.cancelAnimationFrame(scanFrame);
+        scanFrame = 0;
+        findTargets();
+        return;
+      }
+      scheduleFindTargets();
+    });
+    observer.observe(document.body, {
+      attributeFilter: ["class"],
+      attributes: true,
+      childList: true,
+      subtree: true
+    });
+    return () => {
+      observer.disconnect();
+      window.cancelAnimationFrame(scanFrame);
+      document.documentElement.classList.remove("wikex-visual-preview-active");
+    };
+  }, []);
+  return /* @__PURE__ */ jsxs3(Fragment2, { children: [
+    children,
+    targets && /* @__PURE__ */ jsxs3(Fragment2, { children: [
+      createPortal(
+        /* @__PURE__ */ jsx3(LivePreviewResizeHandle, { container: targets.container }),
+        targets.container
+      ),
+      /* @__PURE__ */ jsx3(WixEditorChrome, { ...targets }, targets.route)
+    ] })
+  ] });
+};
+var LivePreviewEditor_default = LivePreviewResizer;
+
+export {
+  readGlobal,
+  updateGlobalFields,
+  GlobalInlineInspector,
+  saveTextStylePatch,
+  TextStyleInspector,
+  configureLivePreview,
+  LivePreviewEditor_default
+};