@opkod-france/strapi-plugin-component-usage 2.0.0

package/dist/_chunks/index-CWocrxjE.js

@@ -0,0 +1,883 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const reactIntl = require("react-intl");
+const designSystem = require("@strapi/design-system");
+const admin = require("@strapi/strapi/admin");
+const index = require("./index-BrC4CJvo.js");
+const icons = require("@strapi/icons");
+const getTranslation = (id) => `${index.PLUGIN_ID}.${id}`;
+const ComponentSearch = ({
+  searchQuery,
+  onSearchChange
+}) => {
+  const { formatMessage } = reactIntl.useIntl();
+  return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingLeft: 4, paddingRight: 4, paddingBottom: 3, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.SearchForm, { children: /* @__PURE__ */ jsxRuntime.jsx(
+    designSystem.Searchbar,
+    {
+      name: "searchbar",
+      onClear: () => onSearchChange(""),
+      value: searchQuery,
+      onChange: (e) => onSearchChange(e.target.value),
+      clearLabel: formatMessage({
+        id: getTranslation("ComponentSearch.clearLabel"),
+        defaultMessage: "Clear"
+      }),
+      placeholder: formatMessage({
+        id: getTranslation("ComponentSearch.placeholder"),
+        defaultMessage: "Search components..."
+      }),
+      children: formatMessage({
+        id: getTranslation("ComponentSearch.label"),
+        defaultMessage: "Search components"
+      })
+    }
+  ) }) });
+};
+const EmptyResults = () => {
+  const { formatMessage } = reactIntl.useIntl();
+  return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 8, children: /* @__PURE__ */ jsxRuntime.jsx(
+    designSystem.EmptyStateLayout,
+    {
+      icon: /* @__PURE__ */ jsxRuntime.jsx(icons.WarningCircle, { width: "6rem", height: "6rem" }),
+      content: formatMessage({
+        id: getTranslation("EmptyResults.message"),
+        defaultMessage: "No components match your search"
+      })
+    }
+  ) });
+};
+const CategoryHeader = ({ category }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    designSystem.Box,
+    {
+      paddingLeft: 4,
+      paddingRight: 4,
+      paddingTop: 2,
+      paddingBottom: 2,
+      background: "neutral100",
+      children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", textColor: "neutral600", children: category.toUpperCase() })
+    }
+  );
+};
+const getBadgeVariant = (count) => {
+  if (count === 0) return "secondary";
+  if (count < 5) return "success";
+  if (count < 10) return "warning";
+  return "danger";
+};
+const isComponentSelected = (selectedComponent, componentUid) => {
+  return selectedComponent?.uid === componentUid;
+};
+const ComponentListItem = ({
+  component,
+  selectedComponent,
+  onSelectComponent
+}) => {
+  const isSelected = isComponentSelected(selectedComponent, component.uid);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    designSystem.Box,
+    {
+      paddingLeft: 4,
+      paddingRight: 4,
+      paddingTop: 3,
+      paddingBottom: 3,
+      background: isSelected ? "primary100" : "neutral0",
+      style: {
+        cursor: "pointer",
+        borderLeft: isSelected ? "3px solid #4945FF" : "3px solid transparent"
+      },
+      onClick: () => onSelectComponent(component),
+      children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", alignItems: "center", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "start", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            designSystem.Typography,
+            {
+              fontWeight: "semiBold",
+              textColor: isSelected ? "primary600" : "neutral800",
+              children: component.displayName
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", children: component.uid })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Badge, { variant: getBadgeVariant(component.usageCount), children: component.usageCount })
+      ] })
+    }
+  );
+};
+const CategoryGroup = ({
+  category,
+  components,
+  selectedComponent,
+  onSelectComponent
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { paddingBottom: 2, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(CategoryHeader, { category }),
+    components.map((component) => /* @__PURE__ */ jsxRuntime.jsx(
+      ComponentListItem,
+      {
+        component,
+        selectedComponent,
+        onSelectComponent
+      },
+      component.uid
+    ))
+  ] });
+};
+const filterComponentsByQuery = (components, searchQuery) => {
+  if (!searchQuery) return components;
+  const lowerQuery = searchQuery.toLowerCase();
+  return components.filter(
+    (comp) => comp.displayName.toLowerCase().includes(lowerQuery) || comp.category.toLowerCase().includes(lowerQuery) || comp.uid.toLowerCase().includes(lowerQuery)
+  );
+};
+const groupComponentsByCategory = (components) => {
+  return components.reduce((acc, comp) => {
+    if (!acc[comp.category]) {
+      acc[comp.category] = [];
+    }
+    acc[comp.category].push(comp);
+    return acc;
+  }, {});
+};
+const getSortedCategories = (groupedComponents) => {
+  return Object.keys(groupedComponents).sort();
+};
+const ComponentList = ({
+  components,
+  selectedComponent,
+  onSelectComponent,
+  searchQuery,
+  onSearchChange
+}) => {
+  const filteredComponents = react.useMemo(
+    () => filterComponentsByQuery(components, searchQuery),
+    [components, searchQuery]
+  );
+  const groupedComponents = react.useMemo(
+    () => groupComponentsByCategory(filteredComponents),
+    [filteredComponents]
+  );
+  const sortedCategories = react.useMemo(
+    () => getSortedCategories(groupedComponents),
+    [groupedComponents]
+  );
+  const hasNoResults = sortedCategories.length === 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    designSystem.Box,
+    {
+      background: "neutral0",
+      hasRadius: true,
+      shadow: "tableShadow",
+      paddingTop: 4,
+      paddingBottom: 4,
+      overflow: "auto",
+      height: "calc(100vh - 200px)",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ComponentSearch,
+          {
+            searchQuery,
+            onSearchChange
+          }
+        ),
+        hasNoResults ? /* @__PURE__ */ jsxRuntime.jsx(EmptyResults, {}) : sortedCategories.map((category) => /* @__PURE__ */ jsxRuntime.jsx(
+          CategoryGroup,
+          {
+            category,
+            components: groupedComponents[category],
+            selectedComponent,
+            onSelectComponent
+          },
+          category
+        ))
+      ]
+    }
+  );
+};
+const UsageTable = ({ usage }) => {
+  if (!usage || usage.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { background: "neutral0", hasRadius: true, shadow: "tableShadow", children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Table, { colCount: 3, rowCount: usage.length, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Thead, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Tr, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", children: "Content Type" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", children: "Entry ID" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", children: "Field Path" }) })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Tbody, { children: usage.map((usageItem, index2) => /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Tr, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { fontWeight: "semiBold", children: usageItem.contentType }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Badge, { children: usageItem.entryId }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", children: usageItem.fieldPath }) })
+    ] }, `${usageItem.contentType}-${usageItem.entryId}-${index2}`)) })
+  ] }) });
+};
+const UsageSection = ({
+  component,
+  usage,
+  loadingUsage,
+  onRefresh
+}) => {
+  const { formatMessage } = reactIntl.useIntl();
+  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { padding: 6, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", alignItems: "center", paddingBottom: 4, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "delta", children: formatMessage({
+        id: getTranslation("UsageSection.title"),
+        defaultMessage: "Usage Details"
+      }) }),
+      component.usageCount > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+        designSystem.Button,
+        {
+          size: "S",
+          variant: "secondary",
+          startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.ArrowClockwise, {}),
+          onClick: onRefresh,
+          loading: loadingUsage,
+          children: formatMessage({
+            id: getTranslation("UsageSection.refresh"),
+            defaultMessage: "Refresh"
+          })
+        }
+      )
+    ] }),
+    loadingUsage ? /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 8, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "center", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Loader, { small: true, children: formatMessage({
+      id: getTranslation("UsageSection.loading"),
+      defaultMessage: "Loading usage details..."
+    }) }) }) }) : component.usageCount === 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+      designSystem.EmptyStateLayout,
+      {
+        icon: /* @__PURE__ */ jsxRuntime.jsx(icons.Information, { width: "64px", height: "64px" }),
+        content: formatMessage({
+          id: getTranslation("UsageSection.emptyState"),
+          defaultMessage: "This component is not used in any content"
+        })
+      }
+    ) : /* @__PURE__ */ jsxRuntime.jsx(UsageTable, { usage })
+  ] });
+};
+const DeleteDialog = ({
+  isOpen,
+  onClose,
+  onConfirm,
+  component,
+  isDeleting
+}) => {
+  const { formatMessage } = reactIntl.useIntl();
+  if (!component || !isOpen) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Dialog.Root, { open: isOpen, onOpenChange: (open) => {
+    if (!open) onClose();
+  }, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Dialog.Content, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Dialog.Header, { children: formatMessage({
+      id: getTranslation("DeleteDialog.title"),
+      defaultMessage: "Confirm Deletion"
+    }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Dialog.Body, { icon: /* @__PURE__ */ jsxRuntime.jsx(icons.Trash, {}), children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 2, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { children: formatMessage(
+        {
+          id: getTranslation("DeleteDialog.message"),
+          defaultMessage: 'Are you sure you want to delete the component "{name}"?'
+        },
+        { name: component.displayName }
+      ) }),
+      component.usageCount > 0 && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 3, background: "danger100", hasRadius: true, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "danger700", children: formatMessage(
+        {
+          id: getTranslation("DeleteDialog.warning"),
+          defaultMessage: "Warning: This component is used in {count, plural, one {# place} other {# places}}. Deleting it may break your content types."
+        },
+        { count: component.usageCount }
+      ) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "neutral600", variant: "pi", children: formatMessage({
+        id: getTranslation("DeleteDialog.irreversible"),
+        defaultMessage: "This action cannot be undone."
+      }) })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Dialog.Footer, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Dialog.Cancel, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { onClick: onClose, variant: "tertiary", children: formatMessage({
+        id: getTranslation("DeleteDialog.cancel"),
+        defaultMessage: "Cancel"
+      }) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Dialog.Action, { children: /* @__PURE__ */ jsxRuntime.jsx(
+        designSystem.Button,
+        {
+          onClick: onConfirm,
+          variant: "danger",
+          startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.Trash, {}),
+          loading: isDeleting,
+          children: formatMessage({
+            id: getTranslation("DeleteDialog.confirm"),
+            defaultMessage: "Delete Component"
+          })
+        }
+      ) })
+    ] })
+  ] }) });
+};
+const DependencyCard = ({
+  title,
+  subtitle,
+  category,
+  badges = [],
+  metadata = [],
+  onClick
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    designSystem.Box,
+    {
+      padding: 4,
+      background: "neutral0",
+      hasRadius: true,
+      borderColor: "neutral200",
+      borderStyle: "solid",
+      borderWidth: "1px",
+      style: {
+        cursor: onClick ? "pointer" : "default",
+        transition: "all 0.2s ease",
+        width: "100%"
+      },
+      onClick,
+      children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 2, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", alignItems: "flex-start", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { style: { flex: 1 }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { fontWeight: "semiBold", textColor: "neutral800", children: title }),
+            subtitle && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", children: subtitle })
+          ] }),
+          category && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Badge, { variant: "secondary", children: category })
+        ] }),
+        badges.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { gap: 2, wrap: "wrap", children: badges.map((badge, index2) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.Badge, { variant: badge.variant || "default", size: "S", children: badge.label }, index2)) }),
+        metadata.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 1, children: metadata.map((item, index2) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral500", children: item }, index2)) })
+      ] })
+    }
+  );
+};
+const DependencySection = ({
+  title,
+  description,
+  icon: Icon,
+  count,
+  items = [],
+  defaultExpanded = true,
+  accentColor = "primary600"
+}) => {
+  const [isExpanded, setIsExpanded] = react.useState(defaultExpanded);
+  if (items.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { paddingBottom: 4, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      designSystem.Box,
+      {
+        padding: 3,
+        background: "neutral100",
+        hasRadius: true,
+        style: { cursor: "pointer" },
+        onClick: () => setIsExpanded(!isExpanded),
+        children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", alignItems: "center", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 3, alignItems: "center", children: [
+            Icon && /* @__PURE__ */ jsxRuntime.jsx(
+              designSystem.Box,
+              {
+                background: accentColor,
+                padding: 2,
+                hasRadius: true,
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center"
+                },
+                children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { width: "16px", height: "16px", fill: "white" })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, alignItems: "center", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  designSystem.Typography,
+                  {
+                    variant: "omega",
+                    fontWeight: "bold",
+                    textColor: "neutral800",
+                    children: title
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Badge, { children: count })
+              ] }),
+              description && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", children: description })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            designSystem.IconButton,
+            {
+              onClick: (e) => {
+                e.stopPropagation();
+                setIsExpanded(!isExpanded);
+              },
+              label: isExpanded ? "Collapse" : "Expand",
+              children: isExpanded ? /* @__PURE__ */ jsxRuntime.jsx(icons.ChevronUp, {}) : /* @__PURE__ */ jsxRuntime.jsx(icons.ChevronDown, {})
+            }
+          )
+        ] })
+      }
+    ),
+    isExpanded && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 3, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Root, { gap: 3, children: items.map((item, index2) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 12, direction: "column", children: /* @__PURE__ */ jsxRuntime.jsx(DependencyCard, { ...item }) }, index2)) }) })
+  ] });
+};
+const ComponentRelationships = ({
+  relationships
+}) => {
+  const { formatMessage } = reactIntl.useIntl();
+  if (!relationships) {
+    return null;
+  }
+  const { uses, usedIn } = relationships;
+  const hasUses = uses && uses.length > 0;
+  const hasUsedIn = usedIn && usedIn.length > 0;
+  const usesItems = (uses || []).map((use) => {
+    const badges = [];
+    if (use.repeatable) {
+      badges.push({
+        label: formatMessage({
+          id: getTranslation("ComponentRelationships.badge.repeatable"),
+          defaultMessage: "Repeatable"
+        }),
+        variant: "secondary"
+      });
+    }
+    if (use.isDynamicZone) {
+      badges.push({
+        label: formatMessage({
+          id: getTranslation("ComponentRelationships.badge.dynamicZone"),
+          defaultMessage: "Dynamic Zone"
+        }),
+        variant: "primary"
+      });
+    }
+    return {
+      title: use.componentUid,
+      subtitle: formatMessage(
+        {
+          id: getTranslation("ComponentRelationships.field"),
+          defaultMessage: "Field: {name}"
+        },
+        { name: use.attributeName }
+      ),
+      badges,
+      metadata: []
+    };
+  });
+  const usedInItems = (usedIn || []).map((parent) => {
+    const metadata = [];
+    if (parent.attributes && parent.attributes.length > 0) {
+      const fieldNames = parent.attributes.map((attr) => attr.name).join(", ");
+      metadata.push(
+        formatMessage(
+          {
+            id: getTranslation("ComponentRelationships.fields"),
+            defaultMessage: "Fields: {names}"
+          },
+          { names: fieldNames }
+        )
+      );
+    }
+    const badges = parent.attributes ? parent.attributes.map((attr) => {
+      const labels = [];
+      if (attr.repeatable)
+        labels.push(
+          formatMessage({
+            id: getTranslation(
+              "ComponentRelationships.badge.repeatable"
+            ),
+            defaultMessage: "Repeatable"
+          }).toLowerCase()
+        );
+      if (attr.isDynamicZone)
+        labels.push(
+          formatMessage({
+            id: getTranslation(
+              "ComponentRelationships.badge.dynamicZone"
+            ),
+            defaultMessage: "Dynamic Zone"
+          }).toLowerCase()
+        );
+      return labels.length > 0 ? { label: labels.join(", "), variant: "secondary" } : null;
+    }).filter(Boolean) : [];
+    return {
+      title: parent.displayName,
+      subtitle: parent.componentUid,
+      category: parent.category,
+      badges,
+      metadata
+    };
+  });
+  if (!hasUses && !hasUsedIn) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { padding: 6, paddingTop: 0, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "delta", paddingBottom: 4, children: formatMessage({
+        id: getTranslation("ComponentRelationships.title"),
+        defaultMessage: "Component Dependencies"
+      }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { padding: 4, background: "neutral100", hasRadius: true, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", fontWeight: "semiBold", children: formatMessage({
+          id: getTranslation(
+            "ComponentRelationships.noDependencies.title"
+          ),
+          defaultMessage: "No Dependencies"
+        }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", children: formatMessage({
+          id: getTranslation(
+            "ComponentRelationships.noDependencies.message"
+          ),
+          defaultMessage: "This component is independent - it doesn't use other components and isn't used by other components."
+        }) })
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { padding: 6, paddingTop: 0, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "delta", paddingBottom: 4, children: formatMessage({
+      id: getTranslation("ComponentRelationships.title"),
+      defaultMessage: "Component Dependencies"
+    }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      designSystem.Box,
+      {
+        padding: 4,
+        background: "neutral100",
+        hasRadius: true,
+        borderColor: "neutral200",
+        borderStyle: "solid",
+        borderWidth: "1px",
+        children: [
+          hasUses && /* @__PURE__ */ jsxRuntime.jsx(
+            DependencySection,
+            {
+              title: formatMessage({
+                id: getTranslation("ComponentRelationships.uses.title"),
+                defaultMessage: "Uses Components"
+              }),
+              description: formatMessage({
+                id: getTranslation("ComponentRelationships.uses.description"),
+                defaultMessage: "Components nested within this component"
+              }),
+              icon: icons.ArrowRight,
+              count: uses.length,
+              items: usesItems,
+              defaultExpanded: true,
+              accentColor: "success600"
+            }
+          ),
+          hasUsedIn && /* @__PURE__ */ jsxRuntime.jsx(
+            DependencySection,
+            {
+              title: formatMessage({
+                id: getTranslation("ComponentRelationships.usedIn.title"),
+                defaultMessage: "Used In Components"
+              }),
+              description: formatMessage({
+                id: getTranslation("ComponentRelationships.usedIn.description"),
+                defaultMessage: "Components that include this component"
+              }),
+              icon: icons.ArrowLeft,
+              count: usedIn.length,
+              items: usedInItems,
+              defaultExpanded: true,
+              accentColor: "primary600"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 4, paddingLeft: 3, paddingRight: 3, children: /* @__PURE__ */ jsxRuntime.jsxs(
+            designSystem.Box,
+            {
+              padding: 3,
+              background: "neutral0",
+              hasRadius: true,
+              style: { borderLeft: "3px solid #4945FF" },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  designSystem.Typography,
+                  {
+                    variant: "omega",
+                    fontWeight: "semiBold",
+                    textColor: "neutral700",
+                    children: formatMessage({
+                      id: getTranslation("ComponentRelationships.summary.title"),
+                      defaultMessage: "Dependency Summary"
+                    })
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "pi", textColor: "neutral600", children: [
+                  hasUses && formatMessage(
+                    {
+                      id: getTranslation(
+                        "ComponentRelationships.summary.uses"
+                      ),
+                      defaultMessage: "Uses {count, plural, one {# component} other {# components}}"
+                    },
+                    { count: uses.length }
+                  ),
+                  hasUses && hasUsedIn && " • ",
+                  hasUsedIn && formatMessage(
+                    {
+                      id: getTranslation(
+                        "ComponentRelationships.summary.usedBy"
+                      ),
+                      defaultMessage: "Used by {count, plural, one {# component} other {# components}}"
+                    },
+                    { count: usedIn.length }
+                  )
+                ] })
+              ]
+            }
+          ) })
+        ]
+      }
+    )
+  ] });
+};
+const ComponentDetail = ({ component, onDelete, onRefresh }) => {
+  const { formatMessage } = reactIntl.useIntl();
+  const { get, del } = admin.useFetchClient();
+  const { toggleNotification } = admin.useNotification();
+  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = react.useState(false);
+  const [isDeleting, setIsDeleting] = react.useState(false);
+  const [usage, setUsage] = react.useState(null);
+  const [loadingUsage, setLoadingUsage] = react.useState(false);
+  const [relationships, setRelationships] = react.useState(null);
+  const [loadingRelationships, setLoadingRelationships] = react.useState(false);
+  react.useEffect(() => {
+    if (component) {
+      if (component.usageCount > 0) {
+        fetchUsageDetails();
+      } else {
+        setUsage([]);
+      }
+      fetchRelationships();
+    }
+  }, [component?.uid]);
+  const fetchUsageDetails = async () => {
+    if (!component) return;
+    try {
+      setLoadingUsage(true);
+      const { data } = await get(
+        `/${index.PLUGIN_ID}/components/${encodeURIComponent(component.uid)}/usage`
+      );
+      setUsage(data.data || []);
+    } catch (err) {
+      console.error("Error fetching usage details:", err);
+      toggleNotification({
+        type: "warning",
+        message: "Failed to load usage details"
+      });
+      setUsage([]);
+    } finally {
+      setLoadingUsage(false);
+    }
+  };
+  const fetchRelationships = async () => {
+    if (!component) return;
+    try {
+      setLoadingRelationships(true);
+      const { data } = await get(
+        `/${index.PLUGIN_ID}/components/${encodeURIComponent(component.uid)}/relationships`
+      );
+      setRelationships(data.data || null);
+    } catch (err) {
+      console.error("Error fetching relationships:", err);
+      setRelationships(null);
+    } finally {
+      setLoadingRelationships(false);
+    }
+  };
+  const handleDelete = async () => {
+    try {
+      setIsDeleting(true);
+      await del(
+        `/${index.PLUGIN_ID}/components/${encodeURIComponent(component.uid)}`
+      );
+      toggleNotification({
+        type: "success",
+        message: `Component "${component.displayName}" deleted successfully`
+      });
+      setIsDeleteDialogOpen(false);
+      onDelete();
+      onRefresh();
+    } catch (err) {
+      console.error("Error deleting component:", err);
+      toggleNotification({
+        type: "warning",
+        message: err?.response?.data?.error?.message || "Failed to delete component. It may be in use."
+      });
+    } finally {
+      setIsDeleting(false);
+    }
+  };
+  if (!component) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      designSystem.Box,
+      {
+        background: "neutral0",
+        hasRadius: true,
+        shadow: "tableShadow",
+        height: "calc(100vh - 200px)",
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          designSystem.EmptyStateLayout,
+          {
+            icon: /* @__PURE__ */ jsxRuntime.jsx(icons.Puzzle, { width: "10rem", height: "10rem" }),
+            content: formatMessage({
+              id: getTranslation("ComponentDetail.emptyState"),
+              defaultMessage: "Choose a component from the list to view its details and usage"
+            })
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      designSystem.Box,
+      {
+        background: "neutral0",
+        hasRadius: true,
+        shadow: "tableShadow",
+        overflow: "auto",
+        height: "calc(100vh - 200px)",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 6, borderColor: "neutral200", children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", alignItems: "flex-start", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "beta", tag: "h2", children: `${component.category}/${component.displayName}` }),
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", textColor: "neutral600", children: component.uid })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              designSystem.Button,
+              {
+                variant: "danger-light",
+                startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.Trash, {}),
+                onClick: () => setIsDeleteDialogOpen(true),
+                children: formatMessage({
+                  id: getTranslation("ComponentDetail.deleteButton"),
+                  defaultMessage: "Delete Component"
+                })
+              }
+            )
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            UsageSection,
+            {
+              component,
+              usage,
+              loadingUsage,
+              onRefresh: fetchUsageDetails
+            }
+          ),
+          !loadingRelationships && /* @__PURE__ */ jsxRuntime.jsx(ComponentRelationships, { relationships })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      DeleteDialog,
+      {
+        isOpen: isDeleteDialogOpen,
+        onClose: () => setIsDeleteDialogOpen(false),
+        onConfirm: handleDelete,
+        component,
+        isDeleting
+      }
+    )
+  ] });
+};
+const HomePage = () => {
+  const { formatMessage } = reactIntl.useIntl();
+  const { get } = admin.useFetchClient();
+  const { toggleNotification } = admin.useNotification();
+  const [components, setComponents] = react.useState([]);
+  const [loading, setLoading] = react.useState(true);
+  const [error, setError] = react.useState(null);
+  const [selectedComponent, setSelectedComponent] = react.useState(null);
+  const [searchQuery, setSearchQuery] = react.useState("");
+  react.useEffect(() => {
+    fetchComponents();
+  }, []);
+  const fetchComponents = async () => {
+    try {
+      setLoading(true);
+      const { data } = await get(`/${index.PLUGIN_ID}/components`);
+      setComponents(data.data || []);
+      setError(null);
+    } catch (err) {
+      console.error("Error fetching components:", err);
+      setError(
+        formatMessage({
+          id: getTranslation("HomePage.error"),
+          defaultMessage: "Failed to load components. Please try again."
+        })
+      );
+    } finally {
+      setLoading(false);
+    }
+  };
+  const handleDeleteComplete = () => {
+    setSelectedComponent(null);
+  };
+  const calculateTotalUsages = () => {
+    return components.reduce((sum, c) => sum + c.usageCount, 0);
+  };
+  if (loading) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(admin.Layouts.Root, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        admin.Layouts.Header,
+        {
+          title: formatMessage({
+            id: getTranslation("HomePage.title"),
+            defaultMessage: "Component Usage"
+          }),
+          subtitle: formatMessage({
+            id: getTranslation("plugin.description"),
+            defaultMessage: "View all components and their usage across content types"
+          })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(admin.Layouts.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 8, background: "neutral0", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "center", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Loader, { children: formatMessage({
+        id: getTranslation("HomePage.loading"),
+        defaultMessage: "Loading components..."
+      }) }) }) }) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(admin.Layouts.Root, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      admin.Layouts.Header,
+      {
+        title: formatMessage({
+          id: getTranslation("HomePage.title"),
+          defaultMessage: "Component Usage"
+        }),
+        subtitle: formatMessage(
+          {
+            id: getTranslation("HomePage.subtitle"),
+            defaultMessage: "{count, plural, =0 {No components} one {# component} other {# components}} • {usages, plural, =0 {no usage} one {# total usage} other {# total usages}}"
+          },
+          { count: components.length, usages: calculateTotalUsages() }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(admin.Layouts.Content, { children: [
+      error && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingBottom: 4, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 4, background: "danger100", hasRadius: true, children: error }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Grid.Root, { gap: 4, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 4, direction: "column", alignItems: "stretch", children: /* @__PURE__ */ jsxRuntime.jsx(
+          ComponentList,
+          {
+            components,
+            selectedComponent,
+            onSelectComponent: setSelectedComponent,
+            searchQuery,
+            onSearchChange: setSearchQuery
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 8, direction: "column", alignItems: "stretch", children: /* @__PURE__ */ jsxRuntime.jsx(
+          ComponentDetail,
+          {
+            component: selectedComponent,
+            onDelete: handleDeleteComplete,
+            onRefresh: fetchComponents
+          }
+        ) })
+      ] })
+    ] })
+  ] });
+};
+exports.HomePage = HomePage;