@zachariaz/strapi-plugin-content-variants 0.1.0

package/dist/_chunks/index-Dj2sexmk.mjs

@@ -0,0 +1,1020 @@
+import * as React from "react";
+import { useRef, useEffect, useState, useCallback } from "react";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { unstable_useDocument } from "@strapi/content-manager/strapi-admin";
+import { Flex, Typography, Status, SingleSelect, SingleSelectOption, Box, Button, Menu, IconButton, Tooltip } from "@strapi/design-system";
+import { Plus, More, Sparkle } from "@strapi/icons";
+import { useIntl, RawIntlProvider } from "react-intl";
+import { useNavigate } from "react-router-dom";
+import { useFetchClient } from "@strapi/strapi/admin";
+import { createRoot } from "react-dom/client";
+import { useTheme, ThemeProvider } from "styled-components";
+const pluginId = "content-variants";
+const Initializer = ({ setPlugin }) => {
+  const ref = useRef(setPlugin);
+  useEffect(() => {
+    ref.current(pluginId);
+  }, []);
+  return null;
+};
+function useVariantFamily({ contentType, documentId }) {
+  const { get } = useFetchClient();
+  const [family, setFamily] = useState(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const fetchFamily = useCallback(async () => {
+    if (!contentType || !documentId) {
+      setFamily(null);
+      return;
+    }
+    setIsLoading(true);
+    setError(null);
+    try {
+      const { data } = await get(`/${pluginId}/links/family`, {
+        params: { contentType, documentId }
+      });
+      setFamily(data);
+    } catch (err) {
+      setError(err?.message ?? "Failed to fetch variant family");
+    } finally {
+      setIsLoading(false);
+    }
+  }, [get, contentType, documentId]);
+  useEffect(() => {
+    fetchFamily();
+  }, [fetchFamily]);
+  return { family, isLoading, error, refetch: fetchFamily };
+}
+function useSegments() {
+  const [segments, setSegments] = useState([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const { get, post, put, del } = useFetchClient();
+  const fetchSegments = useCallback(async () => {
+    setIsLoading(true);
+    setError(null);
+    try {
+      const { data } = await get(`/${pluginId}/segments`);
+      setSegments(Array.isArray(data) ? data : []);
+    } catch (err) {
+      setError(err?.message ?? "Failed to fetch segments");
+    } finally {
+      setIsLoading(false);
+    }
+  }, [get]);
+  const createSegment = useCallback(
+    async (payload) => {
+      const { data } = await post(`/${pluginId}/segments`, payload);
+      await fetchSegments();
+      return data;
+    },
+    [post, fetchSegments]
+  );
+  const updateSegment = useCallback(
+    async (documentId, payload) => {
+      const { data } = await put(`/${pluginId}/segments/${documentId}`, payload);
+      await fetchSegments();
+      return data;
+    },
+    [put, fetchSegments]
+  );
+  const deleteSegment = useCallback(
+    async (documentId) => {
+      await del(`/${pluginId}/segments/${documentId}`);
+      await fetchSegments();
+    },
+    [del, fetchSegments]
+  );
+  useEffect(() => {
+    fetchSegments();
+  }, [fetchSegments]);
+  return { segments, isLoading, error, fetchSegments, createSegment, updateSegment, deleteSegment };
+}
+function useVariantLinks({ baseContentType, baseDocumentId, variantDocumentId }) {
+  const { get, post, put, del } = useFetchClient();
+  const [links, setLinks] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const fetchLinks = useCallback(async () => {
+    if (!baseContentType || !baseDocumentId && !variantDocumentId) {
+      setLinks([]);
+      return;
+    }
+    setIsLoading(true);
+    setError(null);
+    try {
+      const params = { baseContentType };
+      if (baseDocumentId) {
+        params.baseDocumentId = baseDocumentId;
+      }
+      if (variantDocumentId) {
+        params.variantDocumentId = variantDocumentId;
+      }
+      const { data } = await get(`/${pluginId}/links`, { params });
+      setLinks(Array.isArray(data) ? data : []);
+    } catch (err) {
+      setError(err?.message ?? "Failed to fetch variant links");
+    } finally {
+      setIsLoading(false);
+    }
+  }, [get, baseContentType, baseDocumentId, variantDocumentId]);
+  const createLink = useCallback(
+    async (payload) => {
+      const { data } = await post(`/${pluginId}/links`, payload);
+      await fetchLinks();
+      return data;
+    },
+    [post, fetchLinks]
+  );
+  const createVariantWithSegments = useCallback(
+    async (payload) => {
+      const { data } = await post(`/${pluginId}/links/with-variant`, payload);
+      await fetchLinks();
+      return data;
+    },
+    [post, fetchLinks]
+  );
+  const updateLink = useCallback(
+    async (documentId, payload) => {
+      const { data } = await put(`/${pluginId}/links/${documentId}`, payload);
+      await fetchLinks();
+      return data;
+    },
+    [put, fetchLinks]
+  );
+  const deleteLink = useCallback(
+    async (documentId) => {
+      await del(`/${pluginId}/links/${documentId}`);
+      await fetchLinks();
+    },
+    [del, fetchLinks]
+  );
+  useEffect(() => {
+    fetchLinks();
+  }, [fetchLinks]);
+  return { links, isLoading, error, fetchLinks, createLink, createVariantWithSegments, updateLink, deleteLink };
+}
+const PLUGIN_ID = "content-variants";
+function isVariantEnabledContentType(options) {
+  return !!options?.[PLUGIN_ID]?.enabled;
+}
+function isVariantField(attribute) {
+  return !!attribute?.pluginOptions?.[PLUGIN_ID]?.variant;
+}
+const STATUS_VARIANTS = {
+  draft: "secondary",
+  published: "success",
+  modified: "alternative"
+};
+const capitalize = (s) => s.charAt(0).toUpperCase() + s.slice(1);
+const StatusBadge = ({ status }) => {
+  if (!status) return null;
+  return /* @__PURE__ */ jsx(
+    Status,
+    {
+      display: "flex",
+      paddingLeft: "6px",
+      paddingRight: "6px",
+      paddingTop: "2px",
+      paddingBottom: "2px",
+      size: "S",
+      variant: STATUS_VARIANTS[status] || "secondary",
+      children: /* @__PURE__ */ jsx(Typography, { tag: "span", variant: "pi", fontWeight: "bold", children: capitalize(status) })
+    }
+  );
+};
+const VariantPickerAction = ({ model, documentId, collectionType }) => {
+  const { formatMessage } = useIntl();
+  const navigate = useNavigate();
+  const { schema } = unstable_useDocument({
+    model,
+    documentId,
+    collectionType
+  });
+  const isEnabled = isVariantEnabledContentType(schema?.pluginOptions);
+  const isDraftAndPublish = !!schema?.options?.draftAndPublish;
+  const { family, isLoading: familyLoading } = useVariantFamily({
+    contentType: model,
+    documentId
+  });
+  const { segments } = useSegments();
+  const { createVariantWithSegments } = useVariantLinks({
+    baseContentType: model,
+    baseDocumentId: family?.baseDocumentId
+  });
+  if (!isEnabled || !documentId || familyLoading || !family) {
+    return null;
+  }
+  const currentLocale = (() => {
+    try {
+      const params = new URLSearchParams(window.location.search);
+      return params.get("plugins[i18n][locale]") || void 0;
+    } catch {
+      return void 0;
+    }
+  })();
+  const navigateTo = (targetId) => {
+    const localeQuery = currentLocale ? `?plugins[i18n][locale]=${encodeURIComponent(currentLocale)}` : "";
+    navigate(
+      `/content-manager/collection-types/${model}/${targetId}${localeQuery}`
+    );
+  };
+  const assignedSegmentIds = /* @__PURE__ */ new Set();
+  for (const link of family.links) {
+    for (const assignment of link.assignments || []) {
+      if (assignment.segment?.documentId) {
+        assignedSegmentIds.add(assignment.segment.documentId);
+      }
+    }
+  }
+  const unassignedSegments = segments.filter(
+    (s) => !assignedSegmentIds.has(s.documentId)
+  );
+  const options = [];
+  options.push({
+    label: /* @__PURE__ */ jsxs(Flex, { width: "100%", justifyContent: "space-between", gap: 2, children: [
+      /* @__PURE__ */ jsx(Typography, { children: formatMessage({
+        id: `${PLUGIN_ID}.variant-picker.base`,
+        defaultMessage: "Base (default)"
+      }) }),
+      isDraftAndPublish && /* @__PURE__ */ jsx(StatusBadge, { status: family.baseStatus })
+    ] }),
+    value: "base"
+  });
+  for (const link of family.links) {
+    const segmentNames = (link.assignments || []).map((a) => a.segment?.name).filter(Boolean);
+    const name = segmentNames.length > 0 ? segmentNames.join(", ") : link.label || formatMessage({
+      id: `${PLUGIN_ID}.variant-picker.variant-fallback`,
+      defaultMessage: "Variant"
+    });
+    options.push({
+      label: /* @__PURE__ */ jsxs(Flex, { width: "100%", justifyContent: "space-between", gap: 2, children: [
+        /* @__PURE__ */ jsx(Typography, { children: name }),
+        isDraftAndPublish && /* @__PURE__ */ jsx(StatusBadge, { status: link.variantStatus })
+      ] }),
+      value: `variant:${link.variantDocumentId}`
+    });
+  }
+  for (const seg of unassignedSegments) {
+    options.push({
+      label: formatMessage(
+        {
+          id: `${PLUGIN_ID}.variant-picker.create-segment`,
+          defaultMessage: "Create <bold>{segment}</bold> variant"
+        },
+        { bold: (chunks) => /* @__PURE__ */ jsx("b", { children: chunks }), segment: seg.name }
+      ),
+      value: `create:${seg.documentId}`,
+      startIcon: /* @__PURE__ */ jsx(Plus, {})
+    });
+  }
+  let currentValue = "base";
+  if (family.isVariant) {
+    currentValue = `variant:${documentId}`;
+  }
+  const displayText = (() => {
+    if (family.isVariant) {
+      const currentLink = family.links.find(
+        (l) => l.variantDocumentId === documentId
+      );
+      if (currentLink) {
+        const names = (currentLink.assignments || []).map((a) => a.segment?.name).filter(Boolean);
+        return names.length > 0 ? names.join(", ") : currentLink.label || formatMessage({
+          id: `${PLUGIN_ID}.variant-picker.variant-fallback`,
+          defaultMessage: "Variant"
+        });
+      }
+      return formatMessage({
+        id: `${PLUGIN_ID}.variant-picker.variant-fallback`,
+        defaultMessage: "Variant"
+      });
+    }
+    return formatMessage({
+      id: `${PLUGIN_ID}.variant-picker.base`,
+      defaultMessage: "Base (default)"
+    });
+  })();
+  const handleSelect = async (value) => {
+    if (value === currentValue) return;
+    if (value === "base") {
+      navigateTo(family.baseDocumentId);
+      return;
+    }
+    if (value.startsWith("variant:")) {
+      const variantDocId = value.slice("variant:".length);
+      navigateTo(variantDocId);
+      return;
+    }
+    if (value.startsWith("create:")) {
+      const segDocId = value.slice("create:".length);
+      const seg = segments.find((s) => s.documentId === segDocId);
+      if (!seg) return;
+      try {
+        const res = await createVariantWithSegments({
+          baseContentType: model,
+          baseDocumentId: family.baseDocumentId,
+          locale: currentLocale,
+          segments: [{ documentId: seg.documentId, name: seg.name }]
+        });
+        if (res?.variantDocumentId) {
+          navigateTo(res.variantDocumentId);
+        }
+      } catch (err) {
+        window.alert(
+          err?.response?.data?.error?.message || err?.message || formatMessage({
+            id: `${PLUGIN_ID}.variant-picker.create-error`,
+            defaultMessage: "Failed to create variant. Please try again."
+          })
+        );
+      }
+    }
+  };
+  return {
+    label: formatMessage({
+      id: `${PLUGIN_ID}.variant-picker.label`,
+      defaultMessage: "Segments"
+    }),
+    options,
+    value: currentValue,
+    customizeContent: () => displayText,
+    onSelect: handleSelect
+  };
+};
+const VariantModalSelect = ({ family, model, currentDocumentId }) => {
+  const { formatMessage } = useIntl();
+  const baseLabel = formatMessage({
+    id: `${PLUGIN_ID}.variant-picker.base`,
+    defaultMessage: "Base (default)"
+  });
+  const getSegmentLabel = (link) => {
+    const names = (link.assignments || []).map((a) => a.segment?.name).filter(Boolean);
+    return names.length > 0 ? names.join(", ") : link.label || formatMessage({
+      id: `${PLUGIN_ID}.variant-picker.variant-fallback`,
+      defaultMessage: "Variant"
+    });
+  };
+  let currentValue = "base";
+  if (family.isVariant && currentDocumentId) {
+    const match = family.links.find((l) => l.variantDocumentId === currentDocumentId);
+    if (match?.variantDocumentId) currentValue = match.variantDocumentId;
+  }
+  return /* @__PURE__ */ jsxs(
+    SingleSelect,
+    {
+      size: "S",
+      value: currentValue,
+      onChange: (newValue) => {
+        const val = String(newValue);
+        if (val === currentValue) return;
+        const targetId = val === "base" ? family.baseDocumentId : val;
+        if (targetId) {
+          window.open(
+            `/admin/content-manager/collection-types/${model}/${targetId}`,
+            "_blank"
+          );
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsx(SingleSelectOption, { value: "base", children: baseLabel }),
+        family.links.map((link) => /* @__PURE__ */ jsx(
+          SingleSelectOption,
+          {
+            value: link.variantDocumentId,
+            children: getSegmentLabel(link)
+          },
+          link.variantDocumentId
+        ))
+      ]
+    }
+  );
+};
+const VariantInfoAction = ({
+  model,
+  documentId,
+  collectionType
+}) => {
+  const intl = useIntl();
+  const theme = useTheme();
+  const { schema } = unstable_useDocument({
+    model,
+    documentId,
+    collectionType
+  });
+  const isEnabled = isVariantEnabledContentType(schema?.pluginOptions);
+  const { family, isLoading } = useVariantFamily({
+    contentType: model,
+    documentId
+  });
+  React.useEffect(() => {
+    const shouldShow = isEnabled && !!documentId && !isLoading && !!family && family.links.length > 0;
+    const dialogs = document.querySelectorAll('[role="dialog"]');
+    if (dialogs.length === 0) return;
+    const modal = dialogs[dialogs.length - 1];
+    const existing = modal.querySelector("[data-variant-info]");
+    if (existing) {
+      const existingRoot = existing.__reactRoot;
+      if (existingRoot) {
+        try {
+          existingRoot.unmount();
+        } catch {
+        }
+      }
+      existing.remove();
+    }
+    if (!shouldShow || !family) return;
+    const buttons = modal.querySelectorAll("button");
+    let btnContainer = null;
+    for (const btn of buttons) {
+      const text = btn.textContent?.trim().toLowerCase();
+      if (text === "save" || text === "publish") {
+        btnContainer = btn.parentElement;
+        break;
+      }
+    }
+    if (!btnContainer) return;
+    const container = document.createElement("div");
+    container.setAttribute("data-variant-info", "true");
+    container.style.display = "contents";
+    btnContainer.insertBefore(container, btnContainer.firstChild);
+    const root = createRoot(container);
+    container.__reactRoot = root;
+    root.render(
+      /* @__PURE__ */ jsx(RawIntlProvider, { value: intl, children: /* @__PURE__ */ jsx(ThemeProvider, { theme, children: /* @__PURE__ */ jsx(
+        VariantModalSelect,
+        {
+          family,
+          model,
+          currentDocumentId: documentId
+        }
+      ) }) })
+    );
+    return () => {
+      try {
+        root.unmount();
+      } catch {
+      }
+      container.remove();
+    };
+  }, [isEnabled, documentId, isLoading, family, model, intl, theme]);
+  return null;
+};
+const VariantPanel = ({ documentId, model, collectionType }) => {
+  const { formatMessage } = useIntl();
+  const navigate = useNavigate();
+  const currentLocale = React.useMemo(() => {
+    try {
+      const params = new URLSearchParams(window.location.search);
+      return params.get("plugins[i18n][locale]") || void 0;
+    } catch {
+      return void 0;
+    }
+  }, []);
+  const { schema } = unstable_useDocument({
+    model,
+    documentId,
+    collectionType
+  });
+  const isEnabled = isVariantEnabledContentType(schema?.pluginOptions);
+  const { family, isLoading: familyLoading, refetch } = useVariantFamily({
+    contentType: model || "",
+    documentId
+  });
+  const { deleteLink } = useVariantLinks({
+    baseContentType: model || "",
+    baseDocumentId: family?.baseDocumentId
+  });
+  if (!model || !documentId || !isEnabled) {
+    return null;
+  }
+  const handleNavigateTo = (targetId) => {
+    const localeQuery = currentLocale ? `?plugins[i18n][locale]=${encodeURIComponent(currentLocale)}` : "";
+    navigate(`/content-manager/collection-types/${model}/${targetId}${localeQuery}`);
+  };
+  const handleDelete = async (linkDocumentId, redirectToBase = false) => {
+    await deleteLink(linkDocumentId);
+    if (redirectToBase && family?.baseDocumentId) {
+      handleNavigateTo(family.baseDocumentId);
+    } else {
+      refetch();
+    }
+  };
+  const isVariant = family?.isVariant ?? false;
+  return {
+    title: formatMessage({
+      id: `${PLUGIN_ID}.variant-panel.title`,
+      defaultMessage: "Variants"
+    }),
+    content: /* @__PURE__ */ jsx(Flex, { direction: "column", gap: 4, alignItems: "stretch", width: "100%", children: familyLoading ? /* @__PURE__ */ jsx(Typography, { variant: "pi", children: formatMessage({
+      id: `${PLUGIN_ID}.variant-panel.loading`,
+      defaultMessage: "Loading variants…"
+    }) }) : isVariant && family ? (
+      /* ---- Variant document view ---- */
+      /* @__PURE__ */ jsxs(Box, { children: [
+        /* @__PURE__ */ jsx(Box, { paddingBottom: 2, children: /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral500", children: formatMessage({
+          id: `${PLUGIN_ID}.variant-panel.is-variant`,
+          defaultMessage: "This is a variant document."
+        }) }) }),
+        (() => {
+          const currentLink = family.links.find(
+            (l) => l.variantDocumentId === documentId
+          );
+          if (!currentLink) return null;
+          const segmentNames = (currentLink.assignments || []).map((a) => a.segment?.name).filter(Boolean);
+          const label = segmentNames.length > 0 ? segmentNames.join(", ") : currentLink.label || formatMessage({
+            id: `${PLUGIN_ID}.variant-panel.no-segments`,
+            defaultMessage: "No segments"
+          });
+          return /* @__PURE__ */ jsxs(Flex, { gap: 2, marginBottom: 1, children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "secondary",
+                size: "S",
+                style: { flex: 1, minWidth: 0 },
+                onClick: () => handleNavigateTo(family.baseDocumentId),
+                children: label
+              }
+            ),
+            /* @__PURE__ */ jsxs(Menu.Root, { children: [
+              /* @__PURE__ */ jsx(
+                Menu.Trigger,
+                {
+                  tag: IconButton,
+                  icon: /* @__PURE__ */ jsx(More, {}),
+                  variant: "secondary",
+                  size: "S",
+                  label: formatMessage({
+                    id: `${PLUGIN_ID}.variant-panel.actions`,
+                    defaultMessage: "Variant actions"
+                  })
+                }
+              ),
+              /* @__PURE__ */ jsxs(Menu.Content, { popoverPlacement: "bottom-end", children: [
+                /* @__PURE__ */ jsx(
+                  Menu.Item,
+                  {
+                    onSelect: () => handleNavigateTo(family.baseDocumentId),
+                    children: formatMessage({
+                      id: `${PLUGIN_ID}.variant-panel.go-to-base`,
+                      defaultMessage: "Go to base document"
+                    })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Menu.Item,
+                  {
+                    variant: "danger",
+                    onSelect: () => handleDelete(
+                      currentLink.documentId || String(currentLink.id),
+                      true
+                    ),
+                    children: formatMessage({
+                      id: `${PLUGIN_ID}.variant-panel.delete-link`,
+                      defaultMessage: "Delete variant"
+                    })
+                  }
+                )
+              ] })
+            ] })
+          ] });
+        })()
+      ] })
+    ) : family ? (
+      /* ---- Base document view ---- */
+      /* @__PURE__ */ jsxs(Box, { children: [
+        /* @__PURE__ */ jsx(Box, { paddingBottom: 2, children: /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral500", children: formatMessage({
+          id: `${PLUGIN_ID}.variant-panel.base-help`,
+          defaultMessage: "Use the header dropdown to create new variants. Existing variants are listed below."
+        }) }) }),
+        family.links.length === 0 ? /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral500", children: formatMessage({
+          id: `${PLUGIN_ID}.variant-panel.no-variants`,
+          defaultMessage: "No variants yet. Use the segment dropdown in the header to create one."
+        }) }) : family.links.map((link) => {
+          const segmentNames = (link.assignments || []).map((a) => a.segment?.name).filter(Boolean);
+          const label = segmentNames.length > 0 ? segmentNames.join(", ") : link.label || formatMessage({
+            id: `${PLUGIN_ID}.variant-panel.no-segments`,
+            defaultMessage: "No segments"
+          });
+          return /* @__PURE__ */ jsxs(
+            Flex,
+            {
+              gap: 2,
+              marginBottom: 1,
+              children: [
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: "secondary",
+                    size: "S",
+                    style: { flex: 1, minWidth: 0 },
+                    onClick: () => link.variantDocumentId ? handleNavigateTo(link.variantDocumentId) : void 0,
+                    children: label
+                  }
+                ),
+                /* @__PURE__ */ jsxs(Menu.Root, { children: [
+                  /* @__PURE__ */ jsx(
+                    Menu.Trigger,
+                    {
+                      tag: IconButton,
+                      icon: /* @__PURE__ */ jsx(More, {}),
+                      variant: "secondary",
+                      size: "S",
+                      label: formatMessage({
+                        id: `${PLUGIN_ID}.variant-panel.actions`,
+                        defaultMessage: "Variant actions"
+                      })
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(Menu.Content, { popoverPlacement: "bottom-end", children: [
+                    link.variantDocumentId && /* @__PURE__ */ jsx(
+                      Menu.Item,
+                      {
+                        onSelect: () => handleNavigateTo(link.variantDocumentId),
+                        children: formatMessage({
+                          id: `${PLUGIN_ID}.variant-panel.open-variant`,
+                          defaultMessage: "Open variant"
+                        })
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      Menu.Item,
+                      {
+                        variant: "danger",
+                        onSelect: () => handleDelete(
+                          link.documentId || String(link.id)
+                        ),
+                        children: formatMessage({
+                          id: `${PLUGIN_ID}.variant-panel.delete-link`,
+                          defaultMessage: "Delete variant"
+                        })
+                      }
+                    )
+                  ] })
+                ] })
+              ]
+            },
+            link.documentId || link.id
+          );
+        })
+      ] })
+    ) : null })
+  };
+};
+const VariantFieldIndicator = () => {
+  const { formatMessage } = useIntl();
+  const title = formatMessage({
+    id: `${PLUGIN_ID}.edit-view.variant-field`,
+    defaultMessage: "This field has per-segment variants"
+  });
+  return /* @__PURE__ */ jsx(Tooltip, { label: title, children: /* @__PURE__ */ jsx(
+    Flex,
+    {
+      tag: "span",
+      "aria-label": title,
+      role: "img",
+      justifyContent: "center",
+      alignItems: "center",
+      style: {
+        cursor: "help",
+        width: "1.5rem",
+        height: "1.5rem",
+        borderRadius: 4,
+        background: "#fef3c7",
+        color: "#d97706"
+      },
+      children: /* @__PURE__ */ jsx(Sparkle, { width: "1rem", height: "1rem" })
+    }
+  ) });
+};
+const addLabelActionToField = (field) => {
+  const attribute = field.attribute;
+  if (!attribute || !isVariantField(attribute)) {
+    return field;
+  }
+  return {
+    ...field,
+    labelAction: /* @__PURE__ */ jsx(VariantFieldIndicator, {})
+  };
+};
+const mutateEditViewHook = ({ layout }) => {
+  const options = layout.options || {};
+  if (!options?.[PLUGIN_ID]?.enabled) {
+    return { layout };
+  }
+  const decorateField = (field) => addLabelActionToField(field);
+  const components = Object.entries(layout.components).reduce(
+    (acc, [key, componentLayout]) => {
+      return {
+        ...acc,
+        [key]: {
+          ...componentLayout,
+          layout: componentLayout.layout.map((row) => row.map(decorateField))
+        }
+      };
+    },
+    {}
+  );
+  return {
+    layout: {
+      ...layout,
+      components,
+      layout: layout.layout.map((panel) => panel.map((row) => row.map(decorateField)))
+    }
+  };
+};
+const batches = /* @__PURE__ */ new Map();
+function fetchLinksForDocument(postFn, contentType, documentId) {
+  return new Promise((resolve, reject) => {
+    let batch = batches.get(contentType);
+    if (!batch) {
+      batch = { pending: [], timer: null, postFn };
+      batches.set(contentType, batch);
+    }
+    batch.pending.push({ documentId, resolve, reject });
+    if (batch.timer) {
+      clearTimeout(batch.timer);
+    }
+    const currentBatch = batch;
+    currentBatch.timer = setTimeout(() => {
+      flushBatch(contentType, currentBatch);
+    }, 50);
+  });
+}
+async function flushBatch(contentType, batch) {
+  const requests = batch.pending.splice(0);
+  batch.timer = null;
+  batches.delete(contentType);
+  if (requests.length === 0) return;
+  const uniqueIds = [...new Set(requests.map((r) => r.documentId))];
+  try {
+    const pluginId2 = "content-variants";
+    const { data } = await batch.postFn(`/${pluginId2}/links/batch`, {
+      baseContentType: contentType,
+      documentIds: uniqueIds
+    });
+    const grouped = data || {};
+    for (const req of requests) {
+      req.resolve(grouped[req.documentId] || []);
+    }
+  } catch (err) {
+    for (const req of requests) {
+      req.reject(err);
+    }
+  }
+}
+const VariantSegmentCell = ({
+  documentId,
+  contentType
+}) => {
+  const { post } = useFetchClient();
+  const { formatMessage } = useIntl();
+  const navigate = useNavigate();
+  const [links, setLinks] = React.useState(null);
+  React.useEffect(() => {
+    if (!documentId || !contentType) return;
+    let cancelled = false;
+    fetchLinksForDocument(
+      (url, config) => post(url, config),
+      contentType,
+      documentId
+    ).then((result) => {
+      if (!cancelled) setLinks(result);
+    }).catch(() => {
+      if (!cancelled) setLinks([]);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [post, documentId, contentType]);
+  if (links === null) {
+    return /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral500", children: "…" });
+  }
+  if (links.length === 0) {
+    return /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral500", children: "--" });
+  }
+  const isVariant = links.some((l) => l.variantDocumentId === documentId);
+  const entries = [];
+  for (const link of links) {
+    for (const assignment of link.assignments || []) {
+      if (assignment.segment?.name) {
+        entries.push({
+          name: assignment.segment.name,
+          variantDocumentId: link.variantDocumentId,
+          baseDocumentId: link.baseDocumentId
+        });
+      }
+    }
+  }
+  if (entries.length === 0) {
+    return /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral500", children: "--" });
+  }
+  const MAX_VISIBLE = 2;
+  const visibleNames = entries.slice(0, MAX_VISIBLE).map((e) => e.name);
+  const remaining = entries.length - MAX_VISIBLE;
+  const displayText = remaining > 0 ? formatMessage(
+    {
+      id: `${PLUGIN_ID}.list-view.more-segments`,
+      defaultMessage: "{names} +{count} more"
+    },
+    { names: visibleNames.join(", "), count: remaining }
+  ) : visibleNames.join(", ");
+  const currentLocale = (() => {
+    try {
+      const params = new URLSearchParams(window.location.search);
+      return params.get("plugins[i18n][locale]") || void 0;
+    } catch {
+      return void 0;
+    }
+  })();
+  const buildPath = (targetDocumentId) => {
+    const localeQuery = currentLocale ? `?plugins[i18n][locale]=${encodeURIComponent(currentLocale)}` : "";
+    return `/content-manager/collection-types/${contentType}/${targetDocumentId}${localeQuery}`;
+  };
+  return (
+    // Prevent clicks from propagating to the table row (which navigates to edit view)
+    /* @__PURE__ */ jsx("span", { onClick: (e) => e.stopPropagation(), onKeyDown: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsxs(Menu.Root, { children: [
+      /* @__PURE__ */ jsx(Menu.Trigger, { children: /* @__PURE__ */ jsx(
+        Flex,
+        {
+          minWidth: "100%",
+          alignItems: "center",
+          justifyContent: "center",
+          gap: 1,
+          children: /* @__PURE__ */ jsx(
+            Typography,
+            {
+              textColor: "primary600",
+              variant: "pi",
+              children: isVariant ? formatMessage(
+                {
+                  id: `${PLUGIN_ID}.list-view.variant-suffix`,
+                  defaultMessage: "{segments} (variant)"
+                },
+                { segments: displayText }
+              ) : displayText
+            }
+          )
+        }
+      ) }),
+      /* @__PURE__ */ jsxs(Menu.Content, { children: [
+        isVariant && entries.length > 0 && /* @__PURE__ */ jsx(
+          Menu.Item,
+          {
+            onClick: (e) => {
+              e.stopPropagation();
+              navigate(buildPath(entries[0].baseDocumentId));
+            },
+            children: /* @__PURE__ */ jsx(Typography, { children: formatMessage({
+              id: `${PLUGIN_ID}.variant-picker.base`,
+              defaultMessage: "Base (default)"
+            }) })
+          }
+        ),
+        entries.map((entry, i) => /* @__PURE__ */ jsx(
+          Menu.Item,
+          {
+            onClick: (e) => {
+              e.stopPropagation();
+              navigate(buildPath(entry.variantDocumentId));
+            },
+            children: /* @__PURE__ */ jsx(Typography, { children: entry.name })
+          },
+          i
+        ))
+      ] })
+    ] }) })
+  );
+};
+const addVariantColumnHook = ({
+  displayedHeaders,
+  layout
+}) => {
+  const options = layout.options || {};
+  const isEnabled = options?.[PLUGIN_ID]?.enabled;
+  if (!isEnabled) {
+    return { displayedHeaders, layout };
+  }
+  const match = window.location.pathname.match(/collection-types\/([^/]+)/);
+  const contentType = match ? decodeURIComponent(match[1]) : "";
+  if (!contentType || !/^[a-zA-Z0-9:._-]+$/.test(contentType)) {
+    return { displayedHeaders, layout };
+  }
+  return {
+    displayedHeaders: [
+      ...displayedHeaders,
+      {
+        attribute: { type: "string" },
+        label: {
+          id: `${PLUGIN_ID}.list-view.segments-column`,
+          defaultMessage: "Segments"
+        },
+        searchable: false,
+        sortable: false,
+        name: "variants",
+        cellFormatter: (props, _header, _meta) => /* @__PURE__ */ jsx(
+          VariantSegmentCell,
+          {
+            documentId: props.documentId,
+            contentType
+          }
+        )
+      }
+    ],
+    layout
+  };
+};
+const VARIANT_FIELD_TYPES = ["string", "text", "richtext", "media", "blocks"];
+const index = {
+  register(app) {
+    app.registerPlugin({
+      id: pluginId,
+      initializer: Initializer,
+      isReady: false,
+      name: pluginId
+    });
+  },
+  bootstrap(app) {
+    app.addSettingsLink("global", {
+      intlLabel: {
+        id: `${pluginId}.settings.link`,
+        defaultMessage: "Content Variants"
+      },
+      id: pluginId,
+      to: `/settings/${pluginId}`,
+      Component: () => import("./Segments-BgxnvvtR.mjs")
+    });
+    const ctbPlugin = app.getPlugin("content-type-builder");
+    if (ctbPlugin) {
+      const ctbFormsAPI = ctbPlugin.apis.forms;
+      ctbFormsAPI.extendContentType({
+        form: {
+          advanced() {
+            return [
+              {
+                name: "pluginOptions.content-variants.enabled",
+                type: "checkbox",
+                intlLabel: {
+                  id: `${pluginId}.contentType.enabled`,
+                  defaultMessage: "Enable content variants"
+                },
+                description: {
+                  id: `${pluginId}.contentType.enabled.description`,
+                  defaultMessage: "Allow segment-based content variants for this content type"
+                }
+              }
+            ];
+          }
+        }
+      });
+      ctbFormsAPI.extendFields(VARIANT_FIELD_TYPES, {
+        form: {
+          advanced({ contentTypeSchema, forTarget }) {
+            if (forTarget !== "contentType") {
+              return [];
+            }
+            return [
+              {
+                name: "pluginOptions.content-variants.variant",
+                type: "checkbox",
+                intlLabel: {
+                  id: `${pluginId}.field.variant`,
+                  defaultMessage: "Enable variants for this field"
+                },
+                description: {
+                  id: `${pluginId}.field.variant.description`,
+                  defaultMessage: "When enabled, this field can have different values per segment"
+                }
+              }
+            ];
+          }
+        }
+      });
+    }
+    const contentManager = app.getPlugin("content-manager");
+    if (contentManager) {
+      contentManager.apis.addDocumentHeaderAction([VariantPickerAction]);
+      contentManager.apis.addDocumentAction([VariantInfoAction]);
+      contentManager.apis.addEditViewSidePanel([VariantPanel]);
+    }
+    app.registerHook(
+      "Admin/CM/pages/EditView/mutate-edit-view-layout",
+      mutateEditViewHook
+    );
+    app.registerHook(
+      "Admin/CM/pages/ListView/inject-column-in-table",
+      addVariantColumnHook
+    );
+  },
+  async registerTrads({ locales }) {
+    const enTranslations = (await import("./en-e_966kWj.mjs")).default;
+    return locales.map((locale) => ({
+      locale,
+      data: locale === "en" ? enTranslations : {}
+    }));
+  }
+};
+export {
+  PLUGIN_ID as P,
+  index as i,
+  useSegments as u
+};