@wikex/admin-kit 0.2.1 → 0.2.2

package/dist/admin/nav.js

@@ -1,262 +1,8 @@
-import {
-  AdminIcon,
-  AdminLogo
-} from "../chunk-LP22Y3NO.js";
-import {
-  useAdminBrand
-} from "../chunk-XGKGKCQ6.js";
-import {
-  LogoutButton_default
-} from "../chunk-W4ZKDOWJ.js";
-
 // src/admin/Nav.tsx
 import { getNavGroups } from "@payloadcms/ui/shared";
-
-// src/admin/NavClient.tsx
-import { Link, useAuth, useConfig, useNav } from "@payloadcms/ui";
-import {
-  BookOpenText,
-  BriefcaseBusiness,
-  ChevronLeft,
-  ChevronRight,
-  FileText,
-  FolderKanban,
-  GalleryVerticalEnd,
-  Home,
-  Image,
-  LayoutDashboard,
-  Library,
-  Menu,
-  PanelBottom,
-  PanelTop,
-  Settings2,
-  Tags,
-  Users,
-  X
-} from "lucide-react";
-import { usePathname } from "next/navigation";
-import { formatAdminURL } from "payload/shared";
-import { useEffect, useMemo, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-var iconBySlug = {
-  categories: Tags,
-  footer: PanelBottom,
-  header: PanelTop,
-  homepage: Home,
-  media: Image,
-  pages: FileText,
-  posts: BookOpenText,
-  projects: FolderKanban,
-  services: BriefcaseBusiness,
-  settings: Settings2,
-  users: Users
-};
-var translateGroupLabel = (label) => label === "Collections" ? "B\u1ED9 s\u01B0u t\u1EADp" : label === "Globals" ? "Thi\u1EBFt l\u1EADp chung" : label;
-var getInitials = (name, email) => {
-  const source = name?.trim() || email?.split("@")[0] || "AD";
-  return source.split(/\s+/).slice(0, 2).map((part) => part.charAt(0).toUpperCase()).join("");
-};
-var AdminNavClient = ({ groups }) => {
-  const pathname = usePathname();
-  const brand = useAdminBrand();
-  const { user } = useAuth();
-  const { hydrated, navOpen, navRef, setNavOpen, shouldAnimate } = useNav();
-  const {
-    config: {
-      admin: { routes: adminRoutes },
-      folders,
-      routes: { admin: adminRoute }
-    }
-  } = useConfig();
-  const [isMini, setIsMini] = useState(false);
-  const [isMobile, setIsMobile] = useState(false);
-  useEffect(() => {
-    const storedValue = window.localStorage.getItem("minimal-admin-nav-mini");
-    setIsMini(storedValue === "true");
-  }, []);
-  useEffect(() => {
-    const mediaQuery = window.matchMedia("(max-width: 768px)");
-    const syncViewport = () => setIsMobile(mediaQuery.matches);
-    syncViewport();
-    mediaQuery.addEventListener("change", syncViewport);
-    return () => mediaQuery.removeEventListener("change", syncViewport);
-  }, []);
-  useEffect(() => {
-    document.documentElement.style.setProperty("--nav-width", isMini ? "88px" : "280px");
-    window.localStorage.setItem("minimal-admin-nav-mini", String(isMini));
-    return () => {
-      document.documentElement.style.removeProperty("--nav-width");
-    };
-  }, [isMini]);
-  const userLabel = user?.name?.trim() || user?.email?.split("@")[0] || "Qu\u1EA3n tr\u1ECB vi\xEAn";
-  const initials = useMemo(() => getInitials(user?.name, user?.email), [user?.email, user?.name]);
-  const closeMobileNav = () => {
-    if (window.matchMedia("(max-width: 768px)").matches) setNavOpen(false);
-  };
-  const classes = [
-    "minimal-nav",
-    navOpen && "minimal-nav--open",
-    isMini && "minimal-nav--mini",
-    shouldAnimate && "minimal-nav--animate",
-    hydrated && "minimal-nav--hydrated"
-  ].filter(Boolean).join(" ");
-  const isActive = (href) => pathname === href || href !== adminRoute && pathname.startsWith(`${href}/`);
-  return /* @__PURE__ */ jsxs(
-    "aside",
-    {
-      "aria-label": "\u0110i\u1EC1u h\u01B0\u1EDBng qu\u1EA3n tr\u1ECB",
-      className: classes,
-      inert: isMobile && !navOpen || void 0,
-      children: [
-        /* @__PURE__ */ jsxs("div", { className: "minimal-nav__scroll", ref: navRef, children: [
-          /* @__PURE__ */ jsxs("div", { className: "minimal-nav__brand-row", children: [
-            /* @__PURE__ */ jsxs(
-              Link,
-              {
-                "aria-label": `V\u1EC1 dashboard ${brand.siteName}`,
-                className: "minimal-nav__brand",
-                href: adminRoute,
-                onClick: closeMobileNav,
-                prefetch: false,
-                children: [
-                  /* @__PURE__ */ jsx("span", { className: "minimal-nav__brand-full", children: /* @__PURE__ */ jsx(AdminLogo, {}) }),
-                  /* @__PURE__ */ jsx("span", { className: "minimal-nav__brand-icon", children: /* @__PURE__ */ jsx(AdminIcon, {}) })
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                "aria-label": "\u0110\xF3ng menu",
-                className: "minimal-nav__mobile-close",
-                onClick: () => setNavOpen(false),
-                type: "button",
-                children: /* @__PURE__ */ jsx(X, { "aria-hidden": "true" })
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxs(
-            Link,
-            {
-              className: "minimal-nav__workspace",
-              href: adminRoute,
-              onClick: closeMobileNav,
-              prefetch: false,
-              title: brand.siteName,
-              children: [
-                /* @__PURE__ */ jsx("span", { className: "minimal-nav__workspace-icon", children: /* @__PURE__ */ jsx(GalleryVerticalEnd, { "aria-hidden": "true" }) }),
-                /* @__PURE__ */ jsxs("span", { className: "minimal-nav__workspace-copy", children: [
-                  /* @__PURE__ */ jsx("small", { children: "Kh\xF4ng gian l\xE0m vi\u1EC7c" }),
-                  /* @__PURE__ */ jsx("strong", { children: brand.siteName })
-                ] }),
-                /* @__PURE__ */ jsx(Menu, { "aria-hidden": "true", className: "minimal-nav__workspace-menu" })
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxs("nav", { className: "minimal-nav__menu", children: [
-            /* @__PURE__ */ jsxs("div", { className: "minimal-nav__group", children: [
-              /* @__PURE__ */ jsx("span", { className: "minimal-nav__group-label", children: "T\u1ED5ng quan" }),
-              /* @__PURE__ */ jsxs(
-                Link,
-                {
-                  "aria-current": pathname === adminRoute ? "page" : void 0,
-                  className: `minimal-nav__item ${pathname === adminRoute ? "minimal-nav__item--active" : ""}`,
-                  href: adminRoute,
-                  onClick: closeMobileNav,
-                  prefetch: false,
-                  title: "Dashboard",
-                  children: [
-                    /* @__PURE__ */ jsx(LayoutDashboard, { "aria-hidden": "true" }),
-                    /* @__PURE__ */ jsx("span", { children: "T\u1ED5ng quan" })
-                  ]
-                }
-              )
-            ] }),
-            groups.map((group) => /* @__PURE__ */ jsxs("div", { className: "minimal-nav__group", children: [
-              /* @__PURE__ */ jsx("span", { className: "minimal-nav__group-label", children: translateGroupLabel(group.label) }),
-              group.items.map((item) => {
-                const href = formatAdminURL({
-                  adminRoute,
-                  path: `/${item.type}/${item.slug}`
-                });
-                const Icon = iconBySlug[item.slug] || FileText;
-                const active = isActive(href);
-                return /* @__PURE__ */ jsxs(
-                  Link,
-                  {
-                    "aria-current": active ? "page" : void 0,
-                    className: `minimal-nav__item ${active ? "minimal-nav__item--active" : ""}`,
-                    href,
-                    onClick: closeMobileNav,
-                    prefetch: false,
-                    title: item.label,
-                    children: [
-                      /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true" }),
-                      /* @__PURE__ */ jsx("span", { children: item.label })
-                    ]
-                  },
-                  `${item.type}-${item.slug}`
-                );
-              })
-            ] }, group.label)),
-            folders && folders.browseByFolder && /* @__PURE__ */ jsxs("div", { className: "minimal-nav__group", children: [
-              /* @__PURE__ */ jsx("span", { className: "minimal-nav__group-label", children: "Th\u01B0 vi\u1EC7n" }),
-              /* @__PURE__ */ jsxs(
-                Link,
-                {
-                  "aria-current": isActive(formatAdminURL({ adminRoute, path: adminRoutes.browseByFolder })) ? "page" : void 0,
-                  className: `minimal-nav__item ${isActive(formatAdminURL({ adminRoute, path: adminRoutes.browseByFolder })) ? "minimal-nav__item--active" : ""}`,
-                  href: formatAdminURL({ adminRoute, path: adminRoutes.browseByFolder }),
-                  onClick: closeMobileNav,
-                  prefetch: false,
-                  title: "Duy\u1EC7t theo th\u01B0 m\u1EE5c",
-                  children: [
-                    /* @__PURE__ */ jsx(Library, { "aria-hidden": "true" }),
-                    /* @__PURE__ */ jsx("span", { children: "Duy\u1EC7t theo th\u01B0 m\u1EE5c" })
-                  ]
-                }
-              )
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: "minimal-nav__footer", children: [
-            /* @__PURE__ */ jsxs(
-              Link,
-              {
-                className: "minimal-nav__account",
-                href: formatAdminURL({ adminRoute, path: adminRoutes.account }),
-                onClick: closeMobileNav,
-                prefetch: false,
-                title: userLabel,
-                children: [
-                  /* @__PURE__ */ jsx("span", { className: "minimal-nav__avatar", children: initials }),
-                  /* @__PURE__ */ jsxs("span", { className: "minimal-nav__account-copy", children: [
-                    /* @__PURE__ */ jsx("strong", { children: userLabel }),
-                    /* @__PURE__ */ jsx("small", { children: user?.email || "T\xE0i kho\u1EA3n qu\u1EA3n tr\u1ECB" })
-                  ] })
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsx("div", { className: "minimal-nav__logout", children: /* @__PURE__ */ jsx(LogoutButton_default, {}) })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            "aria-label": isMini ? "M\u1EDF r\u1ED9ng menu" : "Thu g\u1ECDn menu",
-            className: "minimal-nav__collapse",
-            onClick: () => setIsMini((current) => !current),
-            title: isMini ? "M\u1EDF r\u1ED9ng menu" : "Thu g\u1ECDn menu",
-            type: "button",
-            children: isMini ? /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx(ChevronLeft, { "aria-hidden": "true" })
-          }
-        )
-      ]
-    }
-  );
-};
-
-// src/admin/Nav.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
+import { AdminNavClient } from "@wikex/admin-kit/admin/nav-client";
+import { AdminNavClient as AdminNavClient2 } from "@wikex/admin-kit/admin/nav-client";
+import { jsx } from "react/jsx-runtime";
 var localizeLabel = (label, language) => {
   if (typeof label === "string") return label;
   return label[language] || Object.values(label)[0] || "";
@@ -276,10 +22,10 @@ var AdminNav = ({ i18n, payload, permissions, visibleEntities }) => {
     })),
     label: group.label
   }));
-  return /* @__PURE__ */ jsx2(AdminNavClient, { groups });
+  return /* @__PURE__ */ jsx(AdminNavClient, { groups });
 };
 var Nav_default = AdminNav;
 export {
-  AdminNavClient,
+  AdminNavClient2 as AdminNavClient,
   Nav_default as default
 };

package/dist/admin/theme-toggle.js

@@ -1,7 +1,8 @@
+'use client';
 "use client";
 import {
   ThemeToggle_default
-} from "../chunk-GGSOO4FQ.js";
+} from "../chunk-SAI5SWZA.js";
 export {
   ThemeToggle_default as default
 };

package/dist/admin/view-site.js

@@ -1,6 +1,11 @@
-import {
-  ViewSite_default
-} from "../chunk-MDMKKWPU.js";
+// src/admin/ViewSite.tsx
+import { ArrowUpRight } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var AdminViewSite = () => /* @__PURE__ */ jsxs("a", { className: "admin-view-site", "data-slot": "button", href: "/", rel: "noreferrer", target: "_blank", children: [
+  "Xem website",
+  /* @__PURE__ */ jsx(ArrowUpRight, { "aria-hidden": "true" })
+] });
+var ViewSite_default = AdminViewSite;
 export {
   ViewSite_default as default
 };

package/dist/{chunk-IL2CUCDG.js → chunk-GMPR6LHH.js}

@@ -1,3 +1,4 @@
+'use client';
 import {
   EDITABLE_INTERACTIVE_SELECTOR,
   EDITABLE_PREVIEW_SELECTOR,
@@ -8,7 +9,7 @@ import {
   isSyntheticElementStyleKey,
   normalizeTextStyleMap,
   normalizeTextStyleValue
-} from "./chunk-BUD6BMFV.js";
+} from "./chunk-VK4EFLWH.js";
 
 // src/live-preview/LivePreviewEditor.tsx
 import { createPortal } from "react-dom";

package/dist/{chunk-W4ZKDOWJ.js → chunk-GZ2B5BTH.js}

@@ -1,3 +1,5 @@
+'use client';
+
 // src/admin/LogoutButton.tsx
 import { Link, useConfig, useTranslation } from "@payloadcms/ui";
 import { LogOut } from "lucide-react";

package/dist/{chunk-GGSOO4FQ.js → chunk-SAI5SWZA.js}

@@ -1,3 +1,5 @@
+'use client';
+
 // src/admin/ThemeToggle.tsx
 import { useTheme } from "@payloadcms/ui";
 import { Moon, Sun } from "lucide-react";

package/dist/{chunk-LP22Y3NO.js → chunk-SM6CCKQQ.js}

@@ -1,6 +1,7 @@
+'use client';
 import {
   useAdminBrand
-} from "./chunk-XGKGKCQ6.js";
+} from "./chunk-X7VETFVD.js";
 
 // src/admin/Brand.tsx
 import Image from "next/image";

package/dist/chunk-VK4EFLWH.js

@@ -0,0 +1,119 @@
+'use client';
+
+// src/textStyles.ts
+var TEXT_FONT_OPTIONS = [
+  { css: "", label: "M\u1EB7c \u0111\u1ECBnh", value: "default" },
+  { css: "var(--font-manrope), sans-serif", label: "Manrope", value: "manrope" },
+  { css: "var(--font-inter), sans-serif", label: "Inter", value: "inter" },
+  { css: "var(--font-roboto), sans-serif", label: "Roboto", value: "roboto" },
+  { css: "var(--font-montserrat), sans-serif", label: "Montserrat", value: "montserrat" },
+  { css: "var(--font-lora), serif", label: "Lora", value: "lora" },
+  {
+    css: "var(--font-playfair-display), serif",
+    label: "Playfair Display",
+    value: "playfair-display"
+  }
+];
+var TEXT_LINE_HEIGHT_OPTIONS = [
+  { css: "", label: "M\u1EB7c \u0111\u1ECBnh", value: "default" },
+  { css: "0.9", label: "R\u1EA5t ch\u1EB7t \xB7 0.9", value: "0.9" },
+  { css: "1", label: "Ch\u1EB7t \xB7 1.0", value: "1" },
+  { css: "1.15", label: "G\u1ECDn \xB7 1.15", value: "1.15" },
+  { css: "1.35", label: "Ti\xEAu chu\u1EA9n \xB7 1.35", value: "1.35" },
+  { css: "1.5", label: "Tho\xE1ng \xB7 1.5", value: "1.5" },
+  { css: "1.7", label: "R\u1ED9ng \xB7 1.7", value: "1.7" }
+];
+var EDITABLE_INTERACTIVE_SELECTOR = [
+  "a",
+  "button",
+  'input:not([type="hidden"])',
+  "select",
+  "textarea",
+  '[role="button"]',
+  '[role="link"]',
+  '[tabindex]:not([tabindex="-1"])'
+].join(",");
+var EDITABLE_PREVIEW_SELECTOR = [
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+  "p",
+  "li",
+  "span",
+  "strong",
+  EDITABLE_INTERACTIVE_SELECTOR
+].join(",");
+var isSyntheticElementStyleKey = (value) => value.startsWith("@element:");
+var getEditableElementStyleKey = (element) => {
+  const scopedRoot = element.closest("[data-wikex-scope]");
+  const root = scopedRoot ?? element.ownerDocument.body;
+  const scope = scopedRoot?.dataset.wikexScope || "body";
+  const segments = [];
+  let current = element;
+  while (current && current !== root) {
+    const parentElement = current.parentElement;
+    if (!parentElement) break;
+    const tagName = current.tagName.toLowerCase();
+    const sameTagSiblings = Array.from(parentElement.children).filter(
+      (sibling) => sibling.tagName === current?.tagName
+    );
+    const index = sameTagSiblings.indexOf(current) + 1;
+    segments.push(`${tagName}:nth-of-type(${Math.max(index, 1)})`);
+    current = parentElement;
+  }
+  return `@element:${scope}:${segments.reverse().join(">")}`;
+};
+var fontValues = new Set(TEXT_FONT_OPTIONS.map((option) => option.value));
+var lineHeightValues = new Set(TEXT_LINE_HEIGHT_OPTIONS.map((option) => option.value));
+var isRecord = (value) => Boolean(value) && typeof value === "object" && !Array.isArray(value);
+var normalizeTextStyleValue = (value) => {
+  if (!isRecord(value)) return {};
+  const fontFamily = typeof value.fontFamily === "string" && fontValues.has(value.fontFamily) ? value.fontFamily : void 0;
+  const lineHeight = typeof value.lineHeight === "string" && lineHeightValues.has(value.lineHeight) ? value.lineHeight : void 0;
+  const legacyWidth = typeof value.width === "string" && /^\d+(?:\.\d+)?%$/.test(value.width) ? Number.parseFloat(value.width) : void 0;
+  const widthValue = typeof value.width === "number" ? value.width : legacyWidth;
+  const width = typeof widthValue === "number" && Number.isFinite(widthValue) ? Math.min(100, Math.max(5, widthValue)) : void 0;
+  const widthOffset = typeof value.widthOffset === "number" && Number.isFinite(value.widthOffset) ? Math.min(width ? 100 - width : 95, Math.max(0, value.widthOffset)) : void 0;
+  return { fontFamily, lineHeight, width, widthOffset };
+};
+var normalizeTextStyleMap = (value) => {
+  if (!isRecord(value)) return {};
+  return Object.fromEntries(
+    Object.entries(value).map(([fieldPath, fieldStyle]) => [
+      fieldPath,
+      normalizeTextStyleValue(fieldStyle)
+    ])
+  );
+};
+var getTextStyleCSS = (value) => {
+  const fontFamily = TEXT_FONT_OPTIONS.find((option) => option.value === value.fontFamily)?.css;
+  const lineHeight = TEXT_LINE_HEIGHT_OPTIONS.find(
+    (option) => option.value === value.lineHeight
+  )?.css;
+  const width = typeof value.width === "number" ? `${value.width}%` : void 0;
+  const widthOffset = typeof value.widthOffset === "number" ? `${value.widthOffset}%` : void 0;
+  return {
+    boxSizing: width ? "border-box" : void 0,
+    fontFamily: fontFamily || void 0,
+    lineHeight: lineHeight || void 0,
+    marginLeft: width ? widthOffset || "0%" : void 0,
+    marginRight: width ? "auto" : void 0,
+    maxWidth: width ? "none" : void 0,
+    width
+  };
+};
+
+export {
+  TEXT_FONT_OPTIONS,
+  TEXT_LINE_HEIGHT_OPTIONS,
+  EDITABLE_INTERACTIVE_SELECTOR,
+  EDITABLE_PREVIEW_SELECTOR,
+  isSyntheticElementStyleKey,
+  getEditableElementStyleKey,
+  normalizeTextStyleValue,
+  normalizeTextStyleMap,
+  getTextStyleCSS
+};

package/dist/{chunk-XGKGKCQ6.js → chunk-X7VETFVD.js}

@@ -1,3 +1,5 @@
+'use client';
+
 // src/admin/useAdminBrand.ts
 import { useEffect, useState } from "react";
 var defaultBrand = {

package/dist/index.d.ts

@@ -1,9 +1,7 @@
 import { Plugin } from 'payload';
-export { VisualEditorRouteRegistry, WikexProjectDefinition, createVisualEditorRouteResolver, defineWikexProject } from './project.js';
+export { V as VisualEditorRouteRegistry, W as WikexProjectDefinition, c as createVisualEditorRouteResolver, d as defineWikexProject } from './project-ClCmpyeX.js';
 export { RichTextTypographyFeature } from './rich-text.js';
-export { TextStyleRuntime } from './text-style-runtime.js';
 export { EDITABLE_INTERACTIVE_SELECTOR, EDITABLE_PREVIEW_SELECTOR, TEXT_FONT_OPTIONS, TEXT_LINE_HEIGHT_OPTIONS, TextFontFamily, TextLineHeight, TextStyleMap, TextStyleValue, getEditableElementStyleKey, getTextStyleCSS, isSyntheticElementStyleKey, normalizeTextStyleMap, normalizeTextStyleValue } from './text-styles.js';
-import './runtimeConfig-BwjQepcW.js';
 import '@payloadcms/richtext-lexical';
 
 declare const IMAGE_UPLOAD_GUIDANCE = "Y\u00EAu c\u1EA7u \u0111\u1EC3 \u1EA3nh hi\u1EC3n th\u1ECB r\u00F5: hero/banner n\u00EAn t\u1EEB 1920 \u00D7 1080 px; \u1EA3nh n\u1ED9i dung n\u00EAn r\u1ED9ng t\u1ED1i thi\u1EC3u 1200 px. \u01AFu ti\u00EAn WebP ho\u1EB7c JPEG, dung l\u01B0\u1EE3ng d\u01B0\u1EDBi 500 KB.";
@@ -23,4 +21,8 @@ type WikexAdminPluginOptions = {
  */
 declare const wikexAdminPlugin: (options?: WikexAdminPluginOptions) => Plugin;
 
-export { IMAGE_UPLOAD_GUIDANCE, type WikexAdminPluginOptions, adminExperiencePlugin, wikexAdminPlugin };
+declare const TextStyleRuntime: ({ styles }: {
+    styles?: unknown;
+}) => null;
+
+export { IMAGE_UPLOAD_GUIDANCE, TextStyleRuntime, type WikexAdminPluginOptions, adminExperiencePlugin, wikexAdminPlugin };

package/dist/index.js

@@ -1,9 +1,3 @@
-import {
-  RichTextTypographyFeature
-} from "./chunk-LC2CP5SR.js";
-import {
-  TextStyleRuntime
-} from "./chunk-YMBJCWN3.js";
 import {
   IMAGE_UPLOAD_GUIDANCE,
   adminExperiencePlugin,
@@ -13,6 +7,9 @@ import {
   createVisualEditorRouteResolver,
   defineWikexProject
 } from "./chunk-JJLHSZ3T.js";
+import {
+  RichTextTypographyFeature
+} from "./chunk-LC2CP5SR.js";
 import {
   EDITABLE_INTERACTIVE_SELECTOR,
   EDITABLE_PREVIEW_SELECTOR,
@@ -24,6 +21,69 @@ import {
   normalizeTextStyleMap,
   normalizeTextStyleValue
 } from "./chunk-BUD6BMFV.js";
+
+// src/TextStyleRuntime.tsx
+import { useEffect } from "react";
+var TextStyleRuntime = ({ styles }) => {
+  useEffect(() => {
+    const normalizedStyles = normalizeTextStyleMap(styles);
+    const originals = /* @__PURE__ */ new Map();
+    let applyFrame = 0;
+    const applyStyles = () => {
+      const fields = new Set(
+        document.querySelectorAll(`[data-wikex-field],${EDITABLE_PREVIEW_SELECTOR}`)
+      );
+      for (const element of fields) {
+        const fieldPath = element.dataset.wikexField || getEditableElementStyleKey(element);
+        if (!fieldPath || !normalizedStyles[fieldPath]) continue;
+        if (!originals.has(element)) {
+          originals.set(element, {
+            boxSizing: element.style.boxSizing,
+            fontFamily: element.style.fontFamily,
+            lineHeight: element.style.lineHeight,
+            marginLeft: element.style.marginLeft,
+            marginRight: element.style.marginRight,
+            maxWidth: element.style.maxWidth,
+            width: element.style.width
+          });
+        }
+        const style = getTextStyleCSS(normalizedStyles[fieldPath]);
+        element.style.boxSizing = style.boxSizing || "";
+        element.style.fontFamily = style.fontFamily || "";
+        element.style.lineHeight = style.lineHeight || "";
+        element.style.marginLeft = style.marginLeft || "";
+        element.style.marginRight = style.marginRight || "";
+        element.style.maxWidth = style.maxWidth || "";
+        element.style.width = style.width || "";
+      }
+    };
+    const scheduleApplyStyles = () => {
+      if (applyFrame) return;
+      applyFrame = window.requestAnimationFrame(() => {
+        applyFrame = 0;
+        applyStyles();
+      });
+    };
+    applyStyles();
+    const observer = new MutationObserver(scheduleApplyStyles);
+    observer.observe(document.body, { childList: true, subtree: true });
+    return () => {
+      observer.disconnect();
+      window.cancelAnimationFrame(applyFrame);
+      for (const [element, original] of originals) {
+        if (!element.isConnected) continue;
+        element.style.boxSizing = original.boxSizing;
+        element.style.fontFamily = original.fontFamily;
+        element.style.lineHeight = original.lineHeight;
+        element.style.marginLeft = original.marginLeft;
+        element.style.marginRight = original.marginRight;
+        element.style.maxWidth = original.maxWidth;
+        element.style.width = original.width;
+      }
+    };
+  }, [styles]);
+  return null;
+};
 export {
   EDITABLE_INTERACTIVE_SELECTOR,
   EDITABLE_PREVIEW_SELECTOR,

package/dist/live-preview.d.ts

@@ -1,6 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React from 'react';
-import { TextStyleValue } from './text-styles.js';
 import { V as VisualEditorDocumentTarget } from './runtimeConfig-BwjQepcW.js';
 export { B as BlockPickerOption, a as BlockPickerScope, L as LivePreviewRuntimeConfig, b as VisualEditorRoute, c as VisualEditorScope, d as configureLivePreview } from './runtimeConfig-BwjQepcW.js';
 
@@ -33,6 +32,75 @@ declare const GlobalInlineInspector: ({ onApply, selection, }: {
     selection: GlobalInspectorSelection;
 }) => react_jsx_runtime.JSX.Element;
 
+declare const TEXT_FONT_OPTIONS: readonly [{
+    readonly css: "";
+    readonly label: "Mặc định";
+    readonly value: "default";
+}, {
+    readonly css: "var(--font-manrope), sans-serif";
+    readonly label: "Manrope";
+    readonly value: "manrope";
+}, {
+    readonly css: "var(--font-inter), sans-serif";
+    readonly label: "Inter";
+    readonly value: "inter";
+}, {
+    readonly css: "var(--font-roboto), sans-serif";
+    readonly label: "Roboto";
+    readonly value: "roboto";
+}, {
+    readonly css: "var(--font-montserrat), sans-serif";
+    readonly label: "Montserrat";
+    readonly value: "montserrat";
+}, {
+    readonly css: "var(--font-lora), serif";
+    readonly label: "Lora";
+    readonly value: "lora";
+}, {
+    readonly css: "var(--font-playfair-display), serif";
+    readonly label: "Playfair Display";
+    readonly value: "playfair-display";
+}];
+declare const TEXT_LINE_HEIGHT_OPTIONS: readonly [{
+    readonly css: "";
+    readonly label: "Mặc định";
+    readonly value: "default";
+}, {
+    readonly css: "0.9";
+    readonly label: "Rất chặt · 0.9";
+    readonly value: "0.9";
+}, {
+    readonly css: "1";
+    readonly label: "Chặt · 1.0";
+    readonly value: "1";
+}, {
+    readonly css: "1.15";
+    readonly label: "Gọn · 1.15";
+    readonly value: "1.15";
+}, {
+    readonly css: "1.35";
+    readonly label: "Tiêu chuẩn · 1.35";
+    readonly value: "1.35";
+}, {
+    readonly css: "1.5";
+    readonly label: "Thoáng · 1.5";
+    readonly value: "1.5";
+}, {
+    readonly css: "1.7";
+    readonly label: "Rộng · 1.7";
+    readonly value: "1.7";
+}];
+type TextFontFamily = (typeof TEXT_FONT_OPTIONS)[number]['value'];
+type TextLineHeight = (typeof TEXT_LINE_HEIGHT_OPTIONS)[number]['value'];
+type TextStyleValue = {
+    fontFamily?: TextFontFamily;
+    lineHeight?: TextLineHeight;
+    /** Percentage of the containing block, written by the canvas resize handles. */
+    width?: number;
+    /** Percentage offset from the containing block's left content edge. */
+    widthOffset?: number;
+};
+
 type TextInspectorSelection = VisualEditorDocumentTarget & {
     canEditText: boolean;
     fieldPath: string;

package/dist/live-preview.js

@@ -1,3 +1,4 @@
+'use client';
 import {
   GlobalInlineInspector,
   LivePreviewEditor_default,
@@ -6,8 +7,8 @@ import {
   readGlobal,
   saveTextStylePatch,
   updateGlobalFields
-} from "./chunk-IL2CUCDG.js";
-import "./chunk-BUD6BMFV.js";
+} from "./chunk-GMPR6LHH.js";
+import "./chunk-VK4EFLWH.js";
 export {
   GlobalInlineInspector,
   TextStyleInspector,