@lodashventure/medusa-product-content 1.2.20 → 1.2.21

package/.medusa/server/src/admin/index.mjs

@@ -0,0 +1,1595 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useEffect, useMemo, useCallback, useRef } from "react";
+import { defineWidgetConfig, defineRouteConfig } from "@medusajs/admin-sdk";
+import { Toaster, Heading, Text, Button, IconButton, Badge, Input, Label, Switch, toast, Container, Alert, Tabs, Textarea, Table } from "@medusajs/ui";
+import { Plus, ChevronUpDown, XMark, PencilSquare, EllipsisHorizontal, Trash, ArrowUturnLeft, ArrowDownTray, DocumentText, SquareTwoStack, MagnifyingGlass } from "@medusajs/icons";
+import Medusa from "@medusajs/js-sdk";
+import DOMPurify from "isomorphic-dompurify";
+import "@medusajs/admin-shared";
+const sdk = new Medusa({
+  baseUrl: "/",
+  debug: false,
+  auth: {
+    type: "session"
+  }
+});
+const DEFAULT_ALLOWED_TAGS = [
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+  "p",
+  "br",
+  "hr",
+  "strong",
+  "b",
+  "em",
+  "i",
+  "u",
+  "strike",
+  "s",
+  "del",
+  "ul",
+  "ol",
+  "li",
+  "blockquote",
+  "pre",
+  "code",
+  "a",
+  "img",
+  "table",
+  "thead",
+  "tbody",
+  "tfoot",
+  "tr",
+  "th",
+  "td",
+  "span",
+  "div"
+];
+const DEFAULT_ALLOWED_ATTRIBUTES = {
+  a: ["href", "target", "rel", "title"],
+  img: [
+    "src",
+    "alt",
+    "title",
+    "width",
+    "height",
+    "class",
+    "loading",
+    "decoding"
+  ],
+  blockquote: ["cite"],
+  code: ["class"],
+  pre: ["class"],
+  span: ["class", "style"],
+  div: ["class"],
+  table: ["class"],
+  th: ["colspan", "rowspan", "align"],
+  td: ["colspan", "rowspan", "align"]
+};
+function sanitizeHTML(html, options = {}) {
+  const {
+    allowedTags = DEFAULT_ALLOWED_TAGS,
+    allowedAttributes = DEFAULT_ALLOWED_ATTRIBUTES,
+    removeScripts = true,
+    removeStyles = true
+  } = options;
+  const config2 = {
+    ALLOWED_TAGS: allowedTags,
+    ALLOWED_ATTR: Object.keys(allowedAttributes).reduce((acc, tag) => {
+      allowedAttributes[tag].forEach((attr) => {
+        acc.push(attr);
+      });
+      return acc;
+    }, []),
+    KEEP_CONTENT: true,
+    ALLOW_DATA_ATTR: false,
+    FORBID_TAGS: removeScripts ? ["script", "style"] : [],
+    FORBID_ATTR: removeStyles ? ["style"] : []
+  };
+  DOMPurify.addHook("afterSanitizeAttributes", (node) => {
+    var _a;
+    const tagName = (_a = node.tagName) == null ? void 0 : _a.toLowerCase();
+    if (tagName && allowedAttributes[tagName]) {
+      const allowedAttrs = allowedAttributes[tagName];
+      const attrs = node.attributes;
+      if (attrs) {
+        for (let i = attrs.length - 1; i >= 0; i--) {
+          const attr = attrs[i];
+          if (!allowedAttrs.includes(attr.name)) {
+            node.removeAttribute(attr.name);
+          }
+        }
+      }
+    }
+    if (tagName === "a") {
+      const href = node.getAttribute("href");
+      if (href && !isValidUrl(href)) {
+        node.removeAttribute("href");
+      }
+      const target = node.getAttribute("target");
+      if (target === "_blank") {
+        node.setAttribute("rel", "noopener noreferrer");
+      }
+    }
+    if (tagName === "img") {
+      const src = node.getAttribute("src");
+      if (src && !isValidImageUrl(src)) {
+        node.removeAttribute("src");
+      }
+    }
+  });
+  const cleaned = DOMPurify.sanitize(html, config2);
+  DOMPurify.removeHook("afterSanitizeAttributes");
+  return String(cleaned);
+}
+function isValidUrl(url) {
+  try {
+    if (url.startsWith("/") || url.startsWith("#")) {
+      return true;
+    }
+    const urlObj = new URL(url);
+    return ["http:", "https:", "mailto:"].includes(urlObj.protocol);
+  } catch {
+    return false;
+  }
+}
+function isValidImageUrl(url) {
+  if (url.startsWith("data:image/")) {
+    return true;
+  }
+  if (url.startsWith("/")) {
+    return true;
+  }
+  return isValidUrl(url);
+}
+function useProductContent(options) {
+  const { productId, maxVersions = 10, autoSanitize = true } = options;
+  const PRODUCT_FIELDS = ["id", "title", "status", "handle", "metadata"].join(
+    ","
+  );
+  const [product, setProduct] = useState(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const fetchProduct = async () => {
+    setIsLoading(true);
+    setError(null);
+    try {
+      const response = await sdk.admin.product.retrieve(productId, {
+        fields: PRODUCT_FIELDS
+      });
+      setProduct(response.product);
+    } catch (err) {
+      try {
+        const fallback = await sdk.admin.product.retrieve(productId);
+        setProduct(fallback.product);
+      } catch (innerErr) {
+        const error2 = innerErr instanceof Error ? innerErr : err instanceof Error ? err : new Error("Failed to fetch product");
+        setError(error2);
+      }
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  useEffect(() => {
+    fetchProduct();
+  }, [productId]);
+  const updateProduct = async (data) => {
+    return await sdk.admin.product.update(productId, data);
+  };
+  const metadata = useMemo(() => {
+    if (!product || !product.metadata) return {};
+    return product.metadata;
+  }, [product]);
+  const longDescription = useMemo(() => {
+    return metadata.long_description || null;
+  }, [metadata.long_description]);
+  const specs = useMemo(() => {
+    return metadata.specs || null;
+  }, [metadata.specs]);
+  const versions = useMemo(() => {
+    return metadata.long_description_versions || [];
+  }, [metadata.long_description_versions]);
+  const updateLongDescription = useCallback(
+    async (html, richjson, locale = "th-TH") => {
+      const sanitizedHtml = autoSanitize ? sanitizeHTML(html) : html;
+      const newDescription = {
+        html: sanitizedHtml,
+        richjson,
+        locale,
+        updated_at: (/* @__PURE__ */ new Date()).toISOString(),
+        updated_by: "current_user"
+        // TODO: Get from auth context
+      };
+      let newVersions = [...versions];
+      if (longDescription) {
+        const version = {
+          ...longDescription,
+          version: versions.length + 1,
+          created_at: longDescription.updated_at || (/* @__PURE__ */ new Date()).toISOString()
+        };
+        newVersions = [version, ...versions].slice(0, maxVersions);
+      }
+      await updateProduct({
+        metadata: {
+          ...metadata,
+          long_description: newDescription,
+          long_description_versions: newVersions,
+          content_last_updated: (/* @__PURE__ */ new Date()).toISOString(),
+          content_updated_by: "current_user"
+        }
+      });
+      await fetchProduct();
+    },
+    [autoSanitize, longDescription, maxVersions, metadata, versions]
+  );
+  const updateSpecs = useCallback(
+    async (newSpecs) => {
+      await updateProduct({
+        metadata: {
+          ...metadata,
+          specs: newSpecs,
+          content_last_updated: (/* @__PURE__ */ new Date()).toISOString(),
+          content_updated_by: "current_user"
+        }
+      });
+      await fetchProduct();
+    },
+    [metadata]
+  );
+  const createVersion = useCallback(
+    async (description) => {
+      const version = {
+        ...description,
+        version: versions.length + 1,
+        created_at: (/* @__PURE__ */ new Date()).toISOString()
+      };
+      const newVersions = [version, ...versions].slice(0, maxVersions);
+      await updateProduct({
+        metadata: {
+          ...metadata,
+          long_description_versions: newVersions
+        }
+      });
+      await fetchProduct();
+    },
+    [maxVersions, metadata, versions]
+  );
+  const restoreVersion = useCallback(
+    async (versionNumber) => {
+      const version = versions.find((v) => v.version === versionNumber);
+      if (!version) {
+        throw new Error(`Version ${versionNumber} not found`);
+      }
+      const restoredDescription = {
+        html: version.html,
+        richjson: version.richjson,
+        locale: version.locale,
+        updated_at: (/* @__PURE__ */ new Date()).toISOString(),
+        updated_by: "current_user"
+      };
+      await updateProduct({
+        metadata: {
+          ...metadata,
+          long_description: restoredDescription,
+          content_last_updated: (/* @__PURE__ */ new Date()).toISOString(),
+          content_updated_by: "current_user"
+        }
+      });
+      await fetchProduct();
+    },
+    [metadata, versions]
+  );
+  const deleteVersion = useCallback(
+    async (versionNumber) => {
+      const newVersions = versions.filter((v) => v.version !== versionNumber);
+      await updateProduct({
+        metadata: {
+          ...metadata,
+          long_description_versions: newVersions
+        }
+      });
+      await fetchProduct();
+    },
+    [metadata, versions]
+  );
+  const updateMetadata = useCallback(
+    async (updates) => {
+      await updateProduct({
+        metadata: {
+          ...metadata,
+          ...updates,
+          content_last_updated: (/* @__PURE__ */ new Date()).toISOString(),
+          content_updated_by: "current_user"
+        }
+      });
+      await fetchProduct();
+    },
+    [metadata]
+  );
+  return {
+    product,
+    isLoading,
+    error,
+    metadata,
+    longDescription,
+    specs,
+    versions,
+    updateLongDescription,
+    updateSpecs,
+    createVersion,
+    restoreVersion,
+    deleteVersion,
+    updateMetadata
+  };
+}
+const DEFAULT_LOCALE$1 = "th-TH";
+const ProductSpecsManager = ({
+  specs,
+  locale = DEFAULT_LOCALE$1,
+  onSave,
+  isSaving = false
+}) => {
+  const [groups, setGroups] = useState(() => {
+    if (!specs || !specs.groups || specs.groups.length === 0) {
+      return [
+        {
+          id: createRowId(),
+          key: "default",
+          label: "Specifications",
+          position: 1,
+          rows: [],
+          isExpanded: true,
+          isEditing: false
+        }
+      ];
+    }
+    return specs.groups.sort((a, b) => (a.position || 0) - (b.position || 0)).map((group) => {
+      var _a, _b;
+      return {
+        id: createRowId(),
+        key: group.key,
+        label: ((_b = (_a = group.i18n) == null ? void 0 : _a[locale]) == null ? void 0 : _b.label) || group.key,
+        position: group.position || 1,
+        rows: group.items.map((item) => {
+          var _a2, _b2, _c, _d;
+          return {
+            id: createRowId(),
+            key: ((_b2 = (_a2 = item.i18n) == null ? void 0 : _a2[locale]) == null ? void 0 : _b2.key) || "",
+            value: ((_d = (_c = item.i18n) == null ? void 0 : _c[locale]) == null ? void 0 : _d.value) || "",
+            visible: item.visible !== false
+          };
+        }),
+        isExpanded: true,
+        isEditing: false
+      };
+    });
+  });
+  const [baselineGroups] = useState(groups);
+  const hasChanges = useMemo(() => {
+    return JSON.stringify(groups) !== JSON.stringify(baselineGroups);
+  }, [groups, baselineGroups]);
+  const addGroup = () => {
+    const newGroup = {
+      id: createRowId(),
+      key: `group-${Date.now()}`,
+      label: `New Group ${groups.length + 1}`,
+      position: groups.length + 1,
+      rows: [],
+      isExpanded: true,
+      isEditing: true
+    };
+    setGroups([...groups, newGroup]);
+  };
+  const updateGroup = (groupId, updates) => {
+    setGroups(
+      (prev) => prev.map((g) => g.id === groupId ? { ...g, ...updates } : g)
+    );
+  };
+  const deleteGroup = (groupId) => {
+    if (groups.length === 1) {
+      toast.error("Cannot delete the last group");
+      return;
+    }
+    setGroups((prev) => prev.filter((g) => g.id !== groupId));
+  };
+  const duplicateGroup = (groupId) => {
+    const group = groups.find((g) => g.id === groupId);
+    if (!group) return;
+    const newGroup = {
+      ...group,
+      id: createRowId(),
+      key: `${group.key}-copy`,
+      label: `${group.label} (Copy)`,
+      position: groups.length + 1,
+      rows: group.rows.map((row) => ({ ...row, id: createRowId() }))
+    };
+    setGroups([...groups, newGroup]);
+  };
+  const moveGroup = (groupId, direction) => {
+    const index = groups.findIndex((g) => g.id === groupId);
+    if (index === -1) return;
+    if (direction === "up" && index === 0) return;
+    if (direction === "down" && index === groups.length - 1) return;
+    const newGroups = [...groups];
+    const targetIndex = direction === "up" ? index - 1 : index + 1;
+    [newGroups[index], newGroups[targetIndex]] = [
+      newGroups[targetIndex],
+      newGroups[index]
+    ];
+    newGroups.forEach((g, i) => {
+      g.position = i + 1;
+    });
+    setGroups(newGroups);
+  };
+  const addRow = (groupId) => {
+    updateGroup(groupId, {
+      rows: [
+        ...groups.find((g) => g.id === groupId).rows,
+        {
+          id: createRowId(),
+          key: "",
+          value: "",
+          visible: true
+        }
+      ]
+    });
+  };
+  const updateRow = (groupId, rowId, updates) => {
+    const group = groups.find((g) => g.id === groupId);
+    if (!group) return;
+    updateGroup(groupId, {
+      rows: group.rows.map((r) => r.id === rowId ? { ...r, ...updates } : r)
+    });
+  };
+  const deleteRow = (groupId, rowId) => {
+    const group = groups.find((g) => g.id === groupId);
+    if (!group) return;
+    updateGroup(groupId, {
+      rows: group.rows.filter((r) => r.id !== rowId)
+    });
+  };
+  const duplicateRow = (groupId, rowId) => {
+    const group = groups.find((g) => g.id === groupId);
+    if (!group) return;
+    const row = group.rows.find((r) => r.id === rowId);
+    if (!row) return;
+    const newRow = {
+      ...row,
+      id: createRowId()
+    };
+    updateGroup(groupId, {
+      rows: [...group.rows, newRow]
+    });
+  };
+  const moveRow = (groupId, rowId, direction) => {
+    const group = groups.find((g) => g.id === groupId);
+    if (!group) return;
+    const index = group.rows.findIndex((r) => r.id === rowId);
+    if (index === -1) return;
+    if (direction === "up" && index === 0) return;
+    if (direction === "down" && index === group.rows.length - 1) return;
+    const newRows = [...group.rows];
+    const targetIndex = direction === "up" ? index - 1 : index + 1;
+    [newRows[index], newRows[targetIndex]] = [
+      newRows[targetIndex],
+      newRows[index]
+    ];
+    updateGroup(groupId, { rows: newRows });
+  };
+  const clearAllRows = (groupId) => {
+    if (confirm("Are you sure you want to delete all attributes in this group?")) {
+      updateGroup(groupId, { rows: [] });
+    }
+  };
+  const toggleAllVisible = (groupId, visible) => {
+    const group = groups.find((g) => g.id === groupId);
+    if (!group) return;
+    updateGroup(groupId, {
+      rows: group.rows.map((r) => ({ ...r, visible }))
+    });
+  };
+  const handleSave = async () => {
+    try {
+      for (const group of groups) {
+        if (!group.key.trim()) {
+          toast.error("All groups must have a key");
+          return;
+        }
+        if (!group.label.trim()) {
+          toast.error("All groups must have a label");
+          return;
+        }
+      }
+      const payload = {
+        default_locale: locale,
+        groups: groups.map((group, groupIndex) => ({
+          key: group.key.trim(),
+          position: groupIndex + 1,
+          i18n: {
+            [locale]: {
+              label: group.label.trim()
+            }
+          },
+          items: group.rows.filter((row) => row.key.trim() || row.value.trim()).map((row, rowIndex) => ({
+            position: rowIndex + 1,
+            visible: row.visible,
+            i18n: {
+              [locale]: {
+                key: row.key.trim(),
+                value: row.value.trim()
+              }
+            }
+          }))
+        }))
+      };
+      await onSave(payload);
+      toast.success("Specifications saved successfully");
+    } catch (error) {
+      toast.error("Failed to save specifications");
+      console.error(error);
+    }
+  };
+  const handleReset = () => {
+    if (confirm("Are you sure you want to reset all changes?")) {
+      setGroups(baselineGroups);
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsx(Toaster, {}),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx(Heading, { level: "h3", className: "text-base", children: "Product Specifications" }),
+        /* @__PURE__ */ jsx(Text, { className: "text-xs text-ui-fg-subtle", children: "Manage custom attributes organized in groups" })
+      ] }),
+      /* @__PURE__ */ jsxs(Button, { variant: "secondary", size: "small", onClick: addGroup, children: [
+        /* @__PURE__ */ jsx(Plus, { className: "mr-1 h-4 w-4" }),
+        "Add Group"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "space-y-4", children: groups.map((group, groupIndex) => /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "rounded-lg border border-ui-border-base bg-ui-bg-base",
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "border-b border-ui-border-base bg-ui-bg-subtle px-4 py-3", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 flex-1", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx(
+                  IconButton,
+                  {
+                    size: "small",
+                    variant: "transparent",
+                    onClick: () => updateGroup(group.id, {
+                      isExpanded: !group.isExpanded
+                    }),
+                    children: /* @__PURE__ */ jsx(ChevronUpDown, {})
+                  }
+                ),
+                /* @__PURE__ */ jsx(Badge, { size: "small", color: "blue", children: groupIndex + 1 })
+              ] }),
+              group.isEditing ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 flex-1", children: [
+                /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    size: "small",
+                    placeholder: "Group Key",
+                    value: group.key,
+                    onChange: (e) => updateGroup(group.id, { key: e.target.value }),
+                    className: "w-40"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    size: "small",
+                    placeholder: "Group Label",
+                    value: group.label,
+                    onChange: (e) => updateGroup(group.id, { label: e.target.value }),
+                    className: "flex-1"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  IconButton,
+                  {
+                    size: "small",
+                    variant: "transparent",
+                    onClick: () => updateGroup(group.id, { isEditing: false }),
+                    children: /* @__PURE__ */ jsx(XMark, {})
+                  }
+                )
+              ] }) : /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx(Text, { className: "text-sm font-medium", children: group.label }),
+                /* @__PURE__ */ jsx(Badge, { size: "xsmall", color: "grey", children: group.key }),
+                /* @__PURE__ */ jsxs(Badge, { size: "xsmall", color: "green", children: [
+                  group.rows.filter((r) => r.visible).length,
+                  " visible"
+                ] })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+              /* @__PURE__ */ jsx(
+                IconButton,
+                {
+                  size: "small",
+                  variant: "transparent",
+                  onClick: () => updateGroup(group.id, { isEditing: true }),
+                  children: /* @__PURE__ */ jsx(PencilSquare, {})
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                IconButton,
+                {
+                  size: "small",
+                  variant: "transparent",
+                  onClick: () => moveGroup(group.id, "up"),
+                  disabled: groupIndex === 0,
+                  children: "↑"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                IconButton,
+                {
+                  size: "small",
+                  variant: "transparent",
+                  onClick: () => moveGroup(group.id, "down"),
+                  disabled: groupIndex === groups.length - 1,
+                  children: "↓"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                IconButton,
+                {
+                  size: "small",
+                  variant: "transparent",
+                  onClick: () => duplicateGroup(group.id),
+                  children: /* @__PURE__ */ jsx(EllipsisHorizontal, {})
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                IconButton,
+                {
+                  size: "small",
+                  variant: "transparent",
+                  onClick: () => deleteGroup(group.id),
+                  disabled: groups.length === 1,
+                  children: /* @__PURE__ */ jsx(Trash, {})
+                }
+              )
+            ] })
+          ] }) }),
+          group.isExpanded && /* @__PURE__ */ jsxs("div", { className: "p-4 space-y-3", children: [
+            group.rows.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 pb-2 border-b border-ui-border-base", children: [
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "secondary",
+                  size: "small",
+                  onClick: () => toggleAllVisible(group.id, true),
+                  children: "Show All"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "secondary",
+                  size: "small",
+                  onClick: () => toggleAllVisible(group.id, false),
+                  children: "Hide All"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "secondary",
+                  size: "small",
+                  onClick: () => clearAllRows(group.id),
+                  children: "Clear All"
+                }
+              )
+            ] }),
+            group.rows.length === 0 && /* @__PURE__ */ jsx("div", { className: "rounded-lg border-2 border-dashed border-ui-border-base bg-ui-bg-subtle p-6 text-center", children: /* @__PURE__ */ jsx(Text, { className: "text-sm text-ui-fg-muted", children: "No attributes in this group yet" }) }),
+            group.rows.map((row, rowIndex) => /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "rounded-lg border border-ui-border-base bg-ui-bg-subtle p-3",
+                children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+                    /* @__PURE__ */ jsxs(Badge, { size: "xsmall", color: "blue", children: [
+                      "#",
+                      rowIndex + 1
+                    ] }),
+                    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+                      /* @__PURE__ */ jsx(
+                        IconButton,
+                        {
+                          size: "small",
+                          variant: "transparent",
+                          onClick: () => moveRow(group.id, row.id, "up"),
+                          disabled: rowIndex === 0,
+                          children: "↑"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        IconButton,
+                        {
+                          size: "small",
+                          variant: "transparent",
+                          onClick: () => moveRow(group.id, row.id, "down"),
+                          disabled: rowIndex === group.rows.length - 1,
+                          children: "↓"
+                        }
+                      )
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { className: "flex-1 grid gap-3 md:grid-cols-2", children: [
+                    /* @__PURE__ */ jsxs("div", { children: [
+                      /* @__PURE__ */ jsx(Label, { htmlFor: `key-${row.id}`, className: "text-xs", children: "Attribute Name" }),
+                      /* @__PURE__ */ jsx(
+                        Input,
+                        {
+                          id: `key-${row.id}`,
+                          size: "small",
+                          value: row.key,
+                          onChange: (e) => updateRow(group.id, row.id, {
+                            key: e.target.value
+                          }),
+                          placeholder: "e.g., Screen Size"
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsxs("div", { children: [
+                      /* @__PURE__ */ jsx(Label, { htmlFor: `value-${row.id}`, className: "text-xs", children: "Value" }),
+                      /* @__PURE__ */ jsx(
+                        Input,
+                        {
+                          id: `value-${row.id}`,
+                          size: "small",
+                          value: row.value,
+                          onChange: (e) => updateRow(group.id, row.id, {
+                            value: e.target.value
+                          }),
+                          placeholder: "e.g., 15.6 inches"
+                        }
+                      )
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2 pt-6", children: [
+                    /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-1", children: [
+                      /* @__PURE__ */ jsx(
+                        Switch,
+                        {
+                          checked: row.visible,
+                          onCheckedChange: (value) => updateRow(group.id, row.id, { visible: value })
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(Text, { className: "text-xs text-ui-fg-subtle", children: row.visible ? "Visible" : "Hidden" })
+                    ] }),
+                    /* @__PURE__ */ jsx(
+                      IconButton,
+                      {
+                        size: "small",
+                        variant: "transparent",
+                        onClick: () => duplicateRow(group.id, row.id),
+                        children: /* @__PURE__ */ jsx(EllipsisHorizontal, {})
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      IconButton,
+                      {
+                        size: "small",
+                        variant: "transparent",
+                        onClick: () => deleteRow(group.id, row.id),
+                        children: /* @__PURE__ */ jsx(Trash, {})
+                      }
+                    )
+                  ] })
+                ] })
+              },
+              row.id
+            )),
+            /* @__PURE__ */ jsxs(
+              Button,
+              {
+                variant: "secondary",
+                size: "small",
+                onClick: () => addRow(group.id),
+                className: "w-full",
+                children: [
+                  /* @__PURE__ */ jsx(Plus, { className: "mr-2 h-4 w-4" }),
+                  "Add Attribute"
+                ]
+              }
+            )
+          ] })
+        ]
+      },
+      group.id
+    )) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-2 pt-4 border-t border-ui-border-base", children: [
+      /* @__PURE__ */ jsxs(
+        Button,
+        {
+          variant: "secondary",
+          onClick: handleReset,
+          disabled: !hasChanges || isSaving,
+          children: [
+            /* @__PURE__ */ jsx(ArrowUturnLeft, { className: "mr-2 h-4 w-4" }),
+            "Reset"
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(Button, { onClick: handleSave, disabled: !hasChanges || isSaving, children: [
+        /* @__PURE__ */ jsx(ArrowDownTray, { className: "mr-2 h-4 w-4" }),
+        isSaving ? "Saving..." : "Save All Changes"
+      ] })
+    ] })
+  ] });
+};
+function createRowId() {
+  if (typeof crypto !== "undefined" && crypto.randomUUID) {
+    return crypto.randomUUID();
+  }
+  return `row_${Math.random().toString(36).slice(2, 11)}`;
+}
+const DEFAULT_LOCALE = "th-TH";
+const ProductContentWidget = ({ data }) => {
+  const {
+    product,
+    isLoading,
+    error,
+    longDescription,
+    specs,
+    metadata,
+    updateLongDescription,
+    updateSpecs
+  } = useProductContent({
+    productId: data.id
+  });
+  const [markdown, setMarkdown] = useState("");
+  const [baselineMarkdown, setBaselineMarkdown] = useState("");
+  const [descriptionSuccess, setDescriptionSuccess] = useState(
+    null
+  );
+  const [descriptionError, setDescriptionError] = useState(null);
+  const [savingDescription, setSavingDescription] = useState(false);
+  const markdownRef = useRef(null);
+  const [markdownTab, setMarkdownTab] = useState("write");
+  const [specLocale] = useState(DEFAULT_LOCALE);
+  const [savingSpecs, setSavingSpecs] = useState(false);
+  const hasDescriptionChanges = useMemo(() => {
+    const normalizedCurrent = markdown.trim();
+    const normalizedBaseline = baselineMarkdown.trim();
+    return normalizedCurrent !== normalizedBaseline;
+  }, [markdown, baselineMarkdown]);
+  useEffect(() => {
+    if (!longDescription) {
+      setMarkdown("");
+      setBaselineMarkdown("");
+      return;
+    }
+    const markdownContent = typeof longDescription.richjson === "object" && longDescription.richjson !== null && typeof longDescription.richjson.markdown === "string" ? longDescription.richjson.markdown : longDescription.html || "";
+    setMarkdown(markdownContent);
+    setBaselineMarkdown(markdownContent);
+  }, [longDescription]);
+  const statusBadges = useMemo(() => {
+    const badges = [];
+    if (longDescription == null ? void 0 : longDescription.html) {
+      badges.push(
+        /* @__PURE__ */ jsx(Badge, { color: "green", size: "small", children: "Description" }, "long-description")
+      );
+    } else {
+      badges.push(
+        /* @__PURE__ */ jsx(Badge, { color: "grey", size: "small", children: "Description" }, "long-description")
+      );
+    }
+    if (specs && specs.groups && specs.groups.length > 0) {
+      const hasItems = specs.groups.some((g) => g.items && g.items.length > 0);
+      badges.push(
+        /* @__PURE__ */ jsx(Badge, { color: hasItems ? "green" : "grey", size: "small", children: "Specs" }, "specs")
+      );
+    } else {
+      badges.push(
+        /* @__PURE__ */ jsx(Badge, { color: "grey", size: "small", children: "Specs" }, "specs")
+      );
+    }
+    return badges;
+  }, [longDescription == null ? void 0 : longDescription.html, specs]);
+  const handleInsertMarkdown = (before, after) => {
+    const textarea = markdownRef.current;
+    if (!textarea) {
+      return;
+    }
+    const start = textarea.selectionStart ?? 0;
+    const end = textarea.selectionEnd ?? 0;
+    const selection = markdown.substring(start, end);
+    const suffix = typeof after === "string" ? after : before;
+    const nextValue = markdown.substring(0, start) + before + selection + suffix + markdown.substring(end);
+    setMarkdown(nextValue);
+    requestAnimationFrame(() => {
+      textarea.focus();
+      const cursorStart = start + before.length;
+      const cursorEnd = cursorStart + selection.length;
+      textarea.setSelectionRange(
+        cursorStart,
+        typeof after === "string" ? cursorEnd : cursorStart
+      );
+    });
+  };
+  const handleMarkdownChange = (event) => {
+    setMarkdown(event.target.value);
+    setDescriptionError(null);
+    setDescriptionSuccess(null);
+  };
+  const handleSaveDescription = async () => {
+    if (!hasDescriptionChanges) {
+      return;
+    }
+    setSavingDescription(true);
+    setDescriptionError(null);
+    setDescriptionSuccess(null);
+    try {
+      const html = convertMarkdownToHtml(markdown);
+      const locale = (longDescription == null ? void 0 : longDescription.locale) || specLocale || DEFAULT_LOCALE;
+      await updateLongDescription(html, { markdown }, locale);
+      setDescriptionSuccess("Long description saved");
+      setBaselineMarkdown(markdown);
+    } catch (err) {
+      const message = err instanceof Error ? err.message : "Failed to save long description";
+      setDescriptionError(message);
+    } finally {
+      setSavingDescription(false);
+    }
+  };
+  const handleResetDescription = () => {
+    setMarkdown(baselineMarkdown);
+    setDescriptionError(null);
+    setDescriptionSuccess(null);
+  };
+  const descriptionPreview = useMemo(() => {
+    if (!markdown.trim()) {
+      return "";
+    }
+    return sanitizeHTML(convertMarkdownToHtml(markdown));
+  }, [markdown]);
+  if (error) {
+    return /* @__PURE__ */ jsx(Container, { className: "p-6", children: /* @__PURE__ */ jsx(Alert, { variant: "error", children: error.message }) });
+  }
+  if (isLoading && !product) {
+    return /* @__PURE__ */ jsx(Container, { className: "p-6", children: /* @__PURE__ */ jsx(Text, { children: "Loading product content…" }) });
+  }
+  const lastUpdated = (metadata == null ? void 0 : metadata.content_last_updated) || (product == null ? void 0 : product.updated_at) || data.updated_at || null;
+  return /* @__PURE__ */ jsx(Container, { className: "divide-y px-0 pb-0", children: /* @__PURE__ */ jsxs("div", { className: "px-6 py-6 space-y-6", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 md:flex-row md:items-center md:justify-between", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsx(DocumentText, { className: "h-6 w-6 text-ui-fg-subtle" }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx(Heading, { level: "h2", children: "Product Content" }),
+          /* @__PURE__ */ jsx(Text, { className: "text-sm text-ui-fg-subtle", children: "Enrich the product page with a detailed description and structured specifications." })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: statusBadges })
+    ] }),
+    lastUpdated && /* @__PURE__ */ jsxs("div", { className: "rounded-lg border bg-ui-bg-base px-3 py-2 text-xs text-ui-fg-subtle", children: [
+      "Last updated",
+      " ",
+      new Date(lastUpdated).toLocaleString(void 0, {
+        dateStyle: "medium",
+        timeStyle: "short"
+      }),
+      (metadata == null ? void 0 : metadata.content_updated_by) ? ` by ${metadata.content_updated_by}` : ""
+    ] }),
+    /* @__PURE__ */ jsxs(
+      Tabs,
+      {
+        value: markdownTab,
+        onValueChange: (val) => setMarkdownTab(val),
+        children: [
+          /* @__PURE__ */ jsxs(Tabs.List, { children: [
+            /* @__PURE__ */ jsx(Tabs.Trigger, { value: "write", children: "Long Description" }),
+            /* @__PURE__ */ jsx(Tabs.Trigger, { value: "preview", children: "Specifications" })
+          ] }),
+          /* @__PURE__ */ jsxs(Tabs.Content, { value: "write", className: "mt-6 space-y-4", children: [
+            /* @__PURE__ */ jsxs("div", { className: "rounded-lg border bg-ui-bg-base p-4", children: [
+              /* @__PURE__ */ jsxs("div", { className: "mb-4 flex items-center justify-between", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsx(PencilSquare, { className: "h-5 w-5 text-ui-fg-subtle" }),
+                  /* @__PURE__ */ jsx(Heading, { level: "h3", className: "text-base", children: "Rich Text (Markdown)" })
+                ] }),
+                /* @__PURE__ */ jsx(Text, { className: "text-xs text-ui-fg-subtle", children: "Supports headings, lists, images, links and code blocks" })
+              ] }),
+              descriptionError && /* @__PURE__ */ jsx(Alert, { variant: "error", dismissible: true, className: "mb-4", children: descriptionError }),
+              descriptionSuccess && /* @__PURE__ */ jsx(Alert, { variant: "success", dismissible: true, className: "mb-4", children: descriptionSuccess }),
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-2 border-b pb-4", children: [
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    type: "button",
+                    variant: "secondary",
+                    size: "small",
+                    onClick: () => handleInsertMarkdown("**", "**"),
+                    children: "Bold"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    type: "button",
+                    variant: "secondary",
+                    size: "small",
+                    onClick: () => handleInsertMarkdown("*", "*"),
+                    children: "Italic"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    type: "button",
+                    variant: "secondary",
+                    size: "small",
+                    onClick: () => handleInsertMarkdown("`", "`"),
+                    children: "Code"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    type: "button",
+                    variant: "secondary",
+                    size: "small",
+                    onClick: () => handleInsertMarkdown("## "),
+                    children: "Heading"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    type: "button",
+                    variant: "secondary",
+                    size: "small",
+                    onClick: () => handleInsertMarkdown("- "),
+                    children: "List"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    type: "button",
+                    variant: "secondary",
+                    size: "small",
+                    onClick: () => handleInsertMarkdown("[", "](https://)"),
+                    children: "Link"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    type: "button",
+                    variant: "secondary",
+                    size: "small",
+                    onClick: () => handleInsertMarkdown("![alt text](", ")"),
+                    children: "Image"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx(
+                Textarea,
+                {
+                  ref: markdownRef,
+                  value: markdown,
+                  onChange: handleMarkdownChange,
+                  rows: 12,
+                  className: "mt-4",
+                  placeholder: "Tell the full story about this product..."
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "mt-6 flex flex-col gap-2 md:flex-row md:justify-end", children: [
+                /* @__PURE__ */ jsxs(
+                  Button,
+                  {
+                    variant: "secondary",
+                    onClick: handleResetDescription,
+                    disabled: !hasDescriptionChanges || savingDescription,
+                    children: [
+                      /* @__PURE__ */ jsx(ArrowUturnLeft, { className: "mr-2 h-4 w-4" }),
+                      "Reset"
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  Button,
+                  {
+                    onClick: handleSaveDescription,
+                    disabled: !hasDescriptionChanges || savingDescription,
+                    children: [
+                      /* @__PURE__ */ jsx(ArrowDownTray, { className: "mr-2 h-4 w-4" }),
+                      savingDescription ? "Saving..." : "Save Description"
+                    ]
+                  }
+                )
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "rounded-lg border bg-ui-bg-subtle p-4", children: [
+              /* @__PURE__ */ jsx(Heading, { level: "h3", className: "text-base mb-2", children: "Live Preview" }),
+              markdown.trim() ? /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "prose prose-sm max-w-none",
+                  dangerouslySetInnerHTML: { __html: descriptionPreview }
+                }
+              ) : /* @__PURE__ */ jsx(Text, { className: "text-sm text-ui-fg-muted", children: "Start writing to see a preview." })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(Tabs.Content, { value: "preview", className: "mt-6", children: /* @__PURE__ */ jsx(
+            ProductSpecsManager,
+            {
+              specs,
+              locale: specLocale,
+              onSave: updateSpecs,
+              isSaving: savingSpecs
+            }
+          ) })
+        ]
+      }
+    )
+  ] }) });
+};
+defineWidgetConfig({
+  zone: "product.details.after"
+});
+function convertMarkdownToHtml(markdown) {
+  const normalized = markdown.replace(/\r\n/g, "\n");
+  const lines = normalized.split("\n");
+  const output = [];
+  let listContext = null;
+  let inCodeBlock = false;
+  let codeLang = "";
+  const codeBuffer = [];
+  const closeList = () => {
+    if (listContext === "unordered") {
+      output.push("</ul>");
+    }
+    if (listContext === "ordered") {
+      output.push("</ol>");
+    }
+    listContext = null;
+  };
+  const flushCodeBuffer = () => {
+    if (!inCodeBlock || !codeBuffer.length) {
+      return;
+    }
+    const content = codeBuffer.join("\n");
+    output.push(
+      `<pre><code${codeLang ? ` class="language-${codeLang}"` : ""}>${content}</code></pre>`
+    );
+    codeBuffer.length = 0;
+    inCodeBlock = false;
+    codeLang = "";
+  };
+  const processInline = (value) => renderInline(value);
+  for (const rawLine of lines) {
+    const line = rawLine;
+    const trimmed = line.trim();
+    if (trimmed.startsWith("```")) {
+      flushCodeBuffer();
+      closeList();
+      if (!inCodeBlock) {
+        inCodeBlock = true;
+        codeLang = trimmed.substring(3).trim();
+      } else {
+        flushCodeBuffer();
+      }
+      continue;
+    }
+    if (inCodeBlock) {
+      const escaped = line.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+      codeBuffer.push(escaped);
+      continue;
+    }
+    if (!trimmed) {
+      closeList();
+      flushCodeBuffer();
+      output.push("");
+      continue;
+    }
+    const headingMatch = trimmed.match(/^(#{1,6})\s+(.*)$/);
+    if (headingMatch) {
+      closeList();
+      flushCodeBuffer();
+      const level = headingMatch[1].length;
+      const content = processInline(headingMatch[2].trim());
+      output.push(`<h${level}>${content}</h${level}>`);
+      continue;
+    }
+    const unorderedMatch = trimmed.match(/^[-*+]\s+(.*)$/);
+    if (unorderedMatch) {
+      flushCodeBuffer();
+      if (listContext !== "unordered") {
+        closeList();
+        listContext = "unordered";
+        output.push("<ul>");
+      }
+      output.push(`<li>${processInline(unorderedMatch[1].trim())}</li>`);
+      continue;
+    }
+    const orderedMatch = trimmed.match(/^\d+\.\s+(.*)$/);
+    if (orderedMatch) {
+      flushCodeBuffer();
+      if (listContext !== "ordered") {
+        closeList();
+        listContext = "ordered";
+        output.push("<ol>");
+      }
+      output.push(`<li>${processInline(orderedMatch[1].trim())}</li>`);
+      continue;
+    }
+    if (trimmed.startsWith(">")) {
+      closeList();
+      flushCodeBuffer();
+      const content = processInline(trimmed.replace(/^>\s?/, ""));
+      output.push(`<blockquote>${content}</blockquote>`);
+      continue;
+    }
+    closeList();
+    flushCodeBuffer();
+    output.push(`<p>${processInline(trimmed)}</p>`);
+  }
+  closeList();
+  flushCodeBuffer();
+  return output.filter((line, index, arr) => {
+    if (line === "" && (index === 0 || arr[index - 1] === "")) {
+      return false;
+    }
+    return true;
+  }).join("\n");
+}
+function renderInline(value) {
+  const segments = [];
+  let buffer = "";
+  let index = 0;
+  const flushBuffer = () => {
+    if (!buffer) {
+      return;
+    }
+    segments.push(applyTextFormatting(buffer));
+    buffer = "";
+  };
+  while (index < value.length) {
+    if (value[index] === "!" && value[index + 1] === "[") {
+      const parsedImage = parseMarkdownLink(value, index, true);
+      if (parsedImage) {
+        flushBuffer();
+        segments.push(parsedImage.html);
+        index = parsedImage.nextIndex;
+        continue;
+      }
+    }
+    if (value[index] === "[") {
+      const parsedLink = parseMarkdownLink(value, index, false);
+      if (parsedLink) {
+        flushBuffer();
+        segments.push(parsedLink.html);
+        index = parsedLink.nextIndex;
+        continue;
+      }
+    }
+    buffer += value[index];
+    index += 1;
+  }
+  flushBuffer();
+  return segments.join("");
+}
+function parseMarkdownLink(source, start, isImage) {
+  const bracketStart = isImage ? start + 1 : start;
+  if (source[bracketStart] !== "[") {
+    return null;
+  }
+  const labelEnd = findClosingToken(source, bracketStart, "[", "]");
+  if (labelEnd === -1) {
+    return null;
+  }
+  if (source[labelEnd + 1] !== "(") {
+    return null;
+  }
+  const destinationEnd = findClosingToken(source, labelEnd + 1, "(", ")");
+  if (destinationEnd === -1) {
+    return null;
+  }
+  const labelRaw = source.slice(bracketStart + 1, labelEnd);
+  const destinationRaw = source.slice(labelEnd + 2, destinationEnd);
+  const destination = splitDestination(destinationRaw);
+  if (!destination || !destination.url) {
+    return null;
+  }
+  const { url, title } = destination;
+  const escapedUrl = escapeHtml(url);
+  const titleAttr = title ? ` title="${escapeHtml(title)}"` : "";
+  if (isImage) {
+    return {
+      html: `<img src="${escapedUrl}" alt="${escapeHtml(
+        labelRaw
+      )}"${titleAttr} class="max-w-full h-auto rounded-md" />`,
+      nextIndex: destinationEnd + 1
+    };
+  }
+  return {
+    html: `<a href="${escapedUrl}" class="text-ui-fg-interactive underline"${titleAttr}>${applyTextFormatting(
+      labelRaw
+    )}</a>`,
+    nextIndex: destinationEnd + 1
+  };
+}
+function findClosingToken(source, start, open, close) {
+  let depth = 0;
+  for (let i = start; i < source.length; i++) {
+    const char = source[i];
+    if (char === "\\") {
+      i += 1;
+      continue;
+    }
+    if (char === open) {
+      depth += 1;
+      continue;
+    }
+    if (char === close) {
+      depth -= 1;
+      if (depth === 0) {
+        return i;
+      }
+    }
+  }
+  return -1;
+}
+function splitDestination(raw) {
+  let value = raw.trim();
+  if (!value) {
+    return null;
+  }
+  let url = "";
+  let rest = "";
+  if (value.startsWith("<")) {
+    const angleEnd = value.indexOf(">");
+    if (angleEnd === -1) {
+      url = value.slice(1).trim();
+    } else {
+      url = value.slice(1, angleEnd).trim();
+      rest = value.slice(angleEnd + 1).trim();
+    }
+  } else {
+    const splitIndex = findFirstWhitespaceOutsideQuotes(value);
+    if (splitIndex === -1) {
+      url = value;
+    } else {
+      url = value.slice(0, splitIndex).trim();
+      rest = value.slice(splitIndex).trim();
+    }
+  }
+  if (!url) {
+    return null;
+  }
+  const maybeTitle = extractTitle(rest);
+  return maybeTitle !== void 0 ? { url, title: maybeTitle } : { url: rest ? `${url} ${rest}`.trim() : url };
+}
+function findFirstWhitespaceOutsideQuotes(value) {
+  let quote = null;
+  for (let i = 0; i < value.length; i++) {
+    const char = value[i];
+    if (quote) {
+      if (char === "\\") {
+        i += 1;
+        continue;
+      }
+      if (char === quote || quote === ")" && char === ")") {
+        quote = null;
+      }
+      continue;
+    }
+    if (char === '"' || char === "'") {
+      quote = char;
+      continue;
+    }
+    if (char === "(") {
+      quote = ")";
+      continue;
+    }
+    if (/\s/.test(char)) {
+      return i;
+    }
+  }
+  return -1;
+}
+function extractTitle(input) {
+  const trimmed = input.trim();
+  if (!trimmed) {
+    return void 0;
+  }
+  if (trimmed.length < 2) {
+    return void 0;
+  }
+  const first = trimmed[0];
+  const last = trimmed[trimmed.length - 1];
+  if (first === '"' && last === '"' || first === "'" && last === "'" || first === "(" && last === ")") {
+    return trimmed.slice(1, -1).trim();
+  }
+  return void 0;
+}
+function applyTextFormatting(segment) {
+  let formatted = segment;
+  formatted = formatted.replace(/\*\*(.+?)\*\*/g, "<strong>$1</strong>");
+  formatted = formatted.replace(/__(.+?)__/g, "<strong>$1</strong>");
+  formatted = formatted.replace(/\*(.+?)\*/g, "<em>$1</em>");
+  formatted = formatted.replace(/_(.+?)_/g, "<em>$1</em>");
+  formatted = formatted.replace(/~~(.+?)~~/g, "<del>$1</del>");
+  formatted = formatted.replace(/`([^`]+)`/g, "<code>$1</code>");
+  return formatted;
+}
+function escapeHtml(value) {
+  return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+const ProductContentPage = () => {
+  const [products, setProducts] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [searchQuery, setSearchQuery] = useState("");
+  useEffect(() => {
+    fetchProducts();
+  }, []);
+  const fetchProducts = async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const result = await sdk.admin.product.list({
+        limit: 100,
+        fields: "id,title,handle,status,metadata"
+      });
+      setProducts(result.products || []);
+    } catch (err) {
+      const message = err instanceof Error ? err.message : "Failed to fetch products";
+      setError(message);
+      console.error("Error fetching products:", err);
+    } finally {
+      setLoading(false);
+    }
+  };
+  const handleManageContent = (productId) => {
+    window.location.href = `/app/products/${productId}`;
+  };
+  const filteredProducts = products.filter((product) => {
+    var _a, _b;
+    if (!searchQuery) return true;
+    const query = searchQuery.toLowerCase();
+    return ((_a = product.title) == null ? void 0 : _a.toLowerCase().includes(query)) || ((_b = product.handle) == null ? void 0 : _b.toLowerCase().includes(query));
+  });
+  const getContentStatus = (product) => {
+    var _a, _b;
+    const hasLongDesc = !!((_a = product.metadata) == null ? void 0 : _a.long_description);
+    const hasSpecs = !!((_b = product.metadata) == null ? void 0 : _b.specs);
+    if (hasLongDesc && hasSpecs) return { label: "Complete", color: "green" };
+    if (hasLongDesc || hasSpecs) return { label: "Partial", color: "orange" };
+    return { label: "Empty", color: "grey" };
+  };
+  if (loading) {
+    return /* @__PURE__ */ jsx(Container, { children: /* @__PURE__ */ jsx("div", { className: "flex h-64 items-center justify-center", children: /* @__PURE__ */ jsx(Text, { children: "Loading products..." }) }) });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsx(Container, { children: /* @__PURE__ */ jsx(Alert, { variant: "error", dismissible: true, children: error }) });
+  }
+  return /* @__PURE__ */ jsxs(Container, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "mb-8", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between mb-4", children: /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx(Heading, { level: "h1", className: "mb-2", children: "Product Content" }),
+        /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-subtle", children: "Manage long descriptions and specifications for all products" })
+      ] }) }),
+      /* @__PURE__ */ jsx("div", { className: "flex items-center gap-4", children: /* @__PURE__ */ jsxs("div", { className: "relative flex-1 max-w-md", children: [
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            placeholder: "Search products...",
+            value: searchQuery,
+            onChange: (e) => setSearchQuery(e.target.value),
+            className: "pl-10"
+          }
+        ),
+        /* @__PURE__ */ jsx(MagnifyingGlass, { className: "absolute left-3 top-1/2 -translate-y-1/2 text-ui-fg-muted" })
+      ] }) })
+    ] }),
+    filteredProducts.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "flex h-64 flex-col items-center justify-center rounded-lg border-2 border-dashed border-ui-border-base", children: [
+      /* @__PURE__ */ jsx(
+        SquareTwoStack,
+        {
+          className: "mb-4 text-ui-fg-subtle",
+          style: { width: "3rem", height: "3rem" }
+        }
+      ),
+      /* @__PURE__ */ jsx(Text, { className: "mb-2 text-lg font-medium", children: searchQuery ? "No products found" : "No products yet" }),
+      /* @__PURE__ */ jsx(Text, { className: "mb-4 text-ui-fg-subtle", children: searchQuery ? "Try adjusting your search query" : "Create products to manage their content" })
+    ] }) : /* @__PURE__ */ jsx("div", { className: "overflow-hidden rounded-lg border", children: /* @__PURE__ */ jsxs(Table, { children: [
+      /* @__PURE__ */ jsx(Table.Header, { children: /* @__PURE__ */ jsxs(Table.Row, { children: [
+        /* @__PURE__ */ jsx(Table.HeaderCell, { children: "Product" }),
+        /* @__PURE__ */ jsx(Table.HeaderCell, { children: "Handle" }),
+        /* @__PURE__ */ jsx(Table.HeaderCell, { children: "Status" }),
+        /* @__PURE__ */ jsx(Table.HeaderCell, { children: "Content Status" }),
+        /* @__PURE__ */ jsx(Table.HeaderCell, { className: "text-right", children: "Actions" })
+      ] }) }),
+      /* @__PURE__ */ jsx(Table.Body, { children: filteredProducts.map((product) => {
+        var _a, _b;
+        const contentStatus = getContentStatus(product);
+        return /* @__PURE__ */ jsxs(Table.Row, { children: [
+          /* @__PURE__ */ jsx(Table.Cell, { children: /* @__PURE__ */ jsx(Text, { className: "font-medium", children: product.title }) }),
+          /* @__PURE__ */ jsx(Table.Cell, { children: /* @__PURE__ */ jsx(Badge, { color: "blue", children: product.handle || "—" }) }),
+          /* @__PURE__ */ jsx(Table.Cell, { children: /* @__PURE__ */ jsx(
+            Badge,
+            {
+              color: product.status === "published" ? "green" : "grey",
+              children: product.status || "draft"
+            }
+          ) }),
+          /* @__PURE__ */ jsx(Table.Cell, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(Badge, { color: contentStatus.color, children: contentStatus.label }),
+            ((_a = product.metadata) == null ? void 0 : _a.long_description) && /* @__PURE__ */ jsx(Badge, { color: "green", size: "xsmall", children: "Description" }),
+            ((_b = product.metadata) == null ? void 0 : _b.specs) && /* @__PURE__ */ jsx(Badge, { color: "green", size: "xsmall", children: "Specs" })
+          ] }) }),
+          /* @__PURE__ */ jsx(Table.Cell, { children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-end", children: /* @__PURE__ */ jsxs(
+            Button,
+            {
+              variant: "secondary",
+              size: "small",
+              onClick: () => handleManageContent(product.id),
+              children: [
+                /* @__PURE__ */ jsx(PencilSquare, { className: "mr-1" }),
+                "View Product"
+              ]
+            }
+          ) }) })
+        ] }, product.id);
+      }) })
+    ] }) })
+  ] });
+};
+const config = defineRouteConfig({
+  label: "Product Content",
+  icon: SquareTwoStack
+});
+const widgetModule = { widgets: [
+  {
+    Component: ProductContentWidget,
+    zone: ["product.details.after"]
+  }
+] };
+const routeModule = {
+  routes: [
+    {
+      Component: ProductContentPage,
+      path: "/product-content"
+    }
+  ]
+};
+const menuItemModule = {
+  menuItems: [
+    {
+      label: config.label,
+      icon: config.icon,
+      path: "/product-content",
+      nested: void 0
+    }
+  ]
+};
+const formModule = { customFields: {} };
+const displayModule = {
+  displays: {}
+};
+const i18nModule = { resources: {} };
+const plugin = {
+  widgetModule,
+  routeModule,
+  menuItemModule,
+  formModule,
+  displayModule,
+  i18nModule
+};
+export {
+  plugin as default
+};