@nextsparkjs/core 0.1.0-beta.7 → 0.1.0-beta.70

package/dist/components/entities/index.js

@@ -1,22 +1,22 @@
-import { EntityDetail } from "./EntityDetail";
-import { EntityForm } from "./EntityForm";
-import { EntityList } from "./EntityList";
-import { EntityTable } from "./EntityTable";
-import { EntityDetailPage } from "./EntityDetailPage";
-import { EntityDetailHeader } from "./EntityDetailHeader";
-import { EntityPageHeader } from "./EntityPageHeader";
-import { EntityNavigation, EntityNavigationSection, FullEntityNavigation } from "./EntityNavigation";
-import { EntityFieldRenderer } from "./EntityFieldRenderer";
-import { EntitySearch, EntitySearchModal } from "./EntitySearch";
-import { EntityBulkActions } from "./EntityBulkActions";
-import { EntityChildManager } from "./EntityChildManager";
-import { EntityErrorBoundary, useEntityErrorHandler, withEntityErrorBoundary } from "./ErrorBoundary";
+import { EntityDetail } from "./EntityDetail.js";
+import { EntityForm } from "./EntityForm.js";
+import { EntityList } from "./EntityList.js";
+import { EntityTable } from "./EntityTable.js";
+import { EntityDetailPage } from "./EntityDetailPage.js";
+import { EntityDetailHeader } from "./EntityDetailHeader.js";
+import { EntityPageHeader } from "./EntityPageHeader.js";
+import { EntityNavigation, EntityNavigationSection, FullEntityNavigation } from "./EntityNavigation.js";
+import { EntityFieldRenderer } from "./EntityFieldRenderer.js";
+import { EntitySearch, EntitySearchModal } from "./EntitySearch.js";
+import { EntityBulkActions } from "./EntityBulkActions.js";
+import { EntityChildManager } from "./EntityChildManager.js";
+import { EntityErrorBoundary, useEntityErrorHandler, withEntityErrorBoundary } from "./ErrorBoundary.js";
 import {
   EntityFormWrapper,
   EntityListWrapper,
   EntityDetailWrapper
-} from "./wrappers";
-import { generateColumnsFromConfig } from "./entity-table.types";
+} from "./wrappers/index.js";
+import { generateColumnsFromConfig } from "./entity-table.types.js";
 export {
   EntityBulkActions,
   EntityChildManager,

package/dist/components/entities/wrappers/EntityDetailWrapper.js

@@ -1,13 +1,13 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import React, { useState, useEffect, useCallback, useMemo } from "react";
-import { EntityDetail } from "../EntityDetail";
-import { Alert, AlertDescription } from "../../ui/alert";
-import { SkeletonEntityDetail } from "../../ui/skeleton-detail";
-import { useEntityConfig } from "../../../hooks/useEntityConfig";
+import { EntityDetail } from "../EntityDetail.js";
+import { Alert, AlertDescription } from "../../ui/alert.js";
+import { SkeletonEntityDetail } from "../../ui/skeleton-detail.js";
+import { useEntityConfig } from "../../../hooks/useEntityConfig.js";
 import { useRouter } from "next/navigation";
-import { getEntityData, deleteEntityData } from "../../../lib/api/entities";
-import { TeamDetailSection } from "../../teams/TeamDetailSection";
+import { getEntityData, deleteEntityData } from "../../../lib/api/entities.js";
+import { TeamDetailSection } from "../../teams/TeamDetailSection.js";
 function EntityDetailWrapper({
   entityType,
   id,

package/dist/components/entities/wrappers/EntityFormWrapper.js

@@ -2,13 +2,13 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useState, useEffect } from "react";
 import { useRouter } from "next/navigation";
-import { EntityForm } from "../EntityForm";
-import { EntityDetailHeader } from "../EntityDetailHeader";
-import { Alert, AlertDescription } from "../../ui/alert";
-import { SkeletonEntityForm } from "../../ui/skeleton-form";
-import { useEntityConfig } from "../../../hooks/useEntityConfig";
-import { useTeam } from "../../../hooks/useTeam";
-import { getEntityData, createEntityData, updateEntityData } from "../../../lib/api/entities";
+import { EntityForm } from "../EntityForm.js";
+import { EntityDetailHeader } from "../EntityDetailHeader.js";
+import { Alert, AlertDescription } from "../../ui/alert.js";
+import { SkeletonEntityForm } from "../../ui/skeleton-form.js";
+import { useEntityConfig } from "../../../hooks/useEntityConfig.js";
+import { useTeam } from "../../../hooks/useTeam.js";
+import { getEntityData, createEntityData, updateEntityData } from "../../../lib/api/entities.js";
 function EntityFormWrapper({
   entityType,
   mode,

package/dist/components/entities/wrappers/EntityListWrapper.js

@@ -3,19 +3,19 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useState, useEffect, useCallback, useMemo, useRef } from "react";
 import Link from "next/link";
 import { Plus, Loader2 } from "lucide-react";
-import { EntityTable } from "../EntityTable";
-import { EntityBulkActions } from "../EntityBulkActions";
-import { Alert, AlertDescription } from "../../ui/alert";
-import { Button } from "../../ui/button";
-import { SkeletonEntityList } from "../../ui/skeleton-list";
-import { SearchInput } from "../../shared/SearchInput";
-import { MultiSelectFilter } from "../../shared/MultiSelectFilter";
-import { useEntityConfig } from "../../../hooks/useEntityConfig";
-import { useUrlFilters } from "../../../hooks/useUrlFilters";
-import { listEntityData, deleteEntityData } from "../../../lib/api/entities";
-import { useTeam } from "../../../hooks/useTeam";
-import { usePermission } from "../../../lib/permissions/hooks";
-import { createCyId } from "../../../lib/test";
+import { EntityTable } from "../EntityTable.js";
+import { EntityBulkActions } from "../EntityBulkActions.js";
+import { Alert, AlertDescription } from "../../ui/alert.js";
+import { Button } from "../../ui/button.js";
+import { SkeletonEntityList } from "../../ui/skeleton-list.js";
+import { SearchInput } from "../../shared/SearchInput.js";
+import { MultiSelectFilter } from "../../shared/MultiSelectFilter.js";
+import { useEntityConfig } from "../../../hooks/useEntityConfig.js";
+import { useUrlFilters } from "../../../hooks/useUrlFilters.js";
+import { listEntityData, deleteEntityData } from "../../../lib/api/entities.js";
+import { useTeam } from "../../../hooks/useTeam.js";
+import { usePermission } from "../../../lib/permissions/hooks.js";
+import { sel } from "../../../lib/test/index.js";
 import { toast } from "sonner";
 function EntityListWrapper({
   entityType,
@@ -183,10 +183,10 @@ function EntityListWrapper({
   const enableSearch = entityConfig.ui.features.searchable;
   const enableFilters = entityConfig.ui.features.filterable && ((_a = entityConfig.ui.dashboard.filters) == null ? void 0 : _a.length);
   const searchValue = typeof filters.search === "string" ? filters.search : "";
-  return /* @__PURE__ */ jsxs("div", { className: "p-6 space-y-6", "data-cy": createCyId(entityConfig.slug, "page"), children: [
+  return /* @__PURE__ */ jsxs("div", { className: "p-6 space-y-6", "data-cy": sel("entities.list.container", { slug: entityConfig.slug }), children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
       /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
-        /* @__PURE__ */ jsx("h1", { className: "text-2xl font-bold tracking-tight", "data-cy": createCyId(entityConfig.slug, "title"), children: entityConfig.names.plural }),
+        /* @__PURE__ */ jsx("h1", { className: "text-2xl font-bold tracking-tight", "data-cy": sel("entities.page.title", { slug: entityConfig.slug }), children: entityConfig.names.plural }),
         /* @__PURE__ */ jsxs("p", { className: "text-muted-foreground", children: [
           "Manage your ",
           entityConfig.names.plural.toLowerCase()
@@ -194,7 +194,7 @@ function EntityListWrapper({
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
         headerActions,
-        canCreate && /* @__PURE__ */ jsx(Button, { asChild: true, "data-cy": createCyId(entityConfig.slug, "add"), children: /* @__PURE__ */ jsxs(Link, { href: `/dashboard/${entityConfig.slug}/create`, children: [
+        canCreate && /* @__PURE__ */ jsx(Button, { asChild: true, "data-cy": sel("entities.list.addButton", { slug: entityConfig.slug }), children: /* @__PURE__ */ jsxs(Link, { href: `/dashboard/${entityConfig.slug}/create`, children: [
           /* @__PURE__ */ jsx(Plus, { className: "h-4 w-4 mr-2" }),
           "Add ",
           entityConfig.names.singular
@@ -209,7 +209,7 @@ function EntityListWrapper({
           value: searchValue,
           onChange: (e) => handleSearch(e.target.value),
           containerClassName: "flex-1 max-w-md",
-          "data-cy": createCyId(entityConfig.slug, "search")
+          "data-cy": sel("entities.list.search.container", { slug: entityConfig.slug })
         }
       ),
       enableFilters && ((_b = entityConfig.ui.dashboard.filters) == null ? void 0 : _b.map((filterConfig) => {
@@ -227,7 +227,7 @@ function EntityListWrapper({
             })),
             values,
             onChange: (newValues) => setFilter(filterConfig.field, newValues),
-            "data-cy": createCyId(entityConfig.slug, `filter-${filterConfig.field}`)
+            "data-cy": sel("entities.list.filters.trigger", { slug: entityConfig.slug, field: filterConfig.field })
           },
           filterConfig.field
         );

package/dist/components/entities/wrappers/index.js

@@ -1,6 +1,6 @@
-import { EntityFormWrapper } from "./EntityFormWrapper";
-import { EntityListWrapper } from "./EntityListWrapper";
-import { EntityDetailWrapper } from "./EntityDetailWrapper";
+import { EntityFormWrapper } from "./EntityFormWrapper.js";
+import { EntityListWrapper } from "./EntityListWrapper.js";
+import { EntityDetailWrapper } from "./EntityDetailWrapper.js";
 export {
   EntityDetailWrapper,
   EntityFormWrapper,

package/dist/components/patterns/DeletedPatternPlaceholder.js

@@ -0,0 +1,44 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { AlertTriangle, Trash2 } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { Button } from "../ui/button.js";
+import { sel } from "@nextsparkjs/core/lib/test";
+function DeletedPatternPlaceholder({
+  patternId,
+  onRemove
+}) {
+  const t = useTranslations("admin.patterns.placeholder");
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "flex items-center gap-3 p-4 border border-dashed border-destructive/50 rounded-lg bg-destructive/5",
+      "data-cy": sel("patterns.placeholder.container"),
+      "data-pattern-id": patternId,
+      children: [
+        /* @__PURE__ */ jsx(AlertTriangle, { className: "h-5 w-5 text-destructive flex-shrink-0" }),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-destructive", children: t("title") }),
+          /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground truncate", children: t("description") })
+        ] }),
+        /* @__PURE__ */ jsxs(
+          Button,
+          {
+            variant: "ghost",
+            size: "sm",
+            onClick: onRemove,
+            className: "text-destructive hover:text-destructive hover:bg-destructive/10 flex-shrink-0",
+            "data-cy": sel("patterns.placeholder.removeBtn"),
+            children: [
+              /* @__PURE__ */ jsx(Trash2, { className: "h-4 w-4 mr-1" }),
+              t("remove")
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  DeletedPatternPlaceholder
+};

package/dist/components/patterns/PatternDeleteDialog.js

@@ -0,0 +1,148 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { useTranslations } from "next-intl";
+import { AlertTriangle, Loader2 } from "lucide-react";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger
+} from "@nextsparkjs/core/components/ui/alert-dialog";
+import { Button } from "@nextsparkjs/core/components/ui/button";
+import { usePatternUsages } from "@nextsparkjs/core/hooks/usePatternUsages";
+import { sel } from "@nextsparkjs/core/lib/test";
+function PatternDeleteDialog({
+  patternId,
+  patternTitle,
+  onConfirm,
+  trigger,
+  isDeleting = false,
+  open: controlledOpen,
+  onOpenChange
+}) {
+  const [internalOpen, setInternalOpen] = useState(false);
+  const isControlled = controlledOpen !== void 0;
+  const open = isControlled ? controlledOpen : internalOpen;
+  const setOpen = isControlled ? onOpenChange ?? (() => {
+  }) : setInternalOpen;
+  const t = useTranslations("admin.patterns.delete");
+  const { data, isLoading, error } = usePatternUsages(patternId, {
+    enabled: open,
+    limit: 10
+  });
+  const usageCount = (data == null ? void 0 : data.total) ?? 0;
+  const usages = (data == null ? void 0 : data.usages) ?? [];
+  const handleConfirm = () => {
+    onConfirm();
+    setOpen(false);
+  };
+  const showTrigger = !isControlled || trigger;
+  return /* @__PURE__ */ jsxs(AlertDialog, { open, onOpenChange: setOpen, children: [
+    showTrigger && /* @__PURE__ */ jsx(AlertDialogTrigger, { asChild: true, children: trigger ?? /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "outline",
+        className: "text-destructive hover:text-destructive",
+        "data-cy": sel("patterns.deleteDialog.trigger"),
+        children: t("trigger")
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(AlertDialogContent, { "data-cy": sel("patterns.deleteDialog.container"), children: [
+      /* @__PURE__ */ jsxs(AlertDialogHeader, { children: [
+        /* @__PURE__ */ jsxs(AlertDialogTitle, { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(AlertTriangle, { className: "h-5 w-5 text-destructive" }),
+          t("title")
+        ] }),
+        /* @__PURE__ */ jsx(AlertDialogDescription, { asChild: true, children: /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+          /* @__PURE__ */ jsxs("p", { children: [
+            t("confirm"),
+            " ",
+            /* @__PURE__ */ jsxs("strong", { className: "text-foreground", children: [
+              '"',
+              patternTitle,
+              '"'
+            ] }),
+            "?"
+          ] }),
+          isLoading ? /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "flex items-center gap-2 text-muted-foreground",
+              "data-cy": sel("patterns.deleteDialog.loading"),
+              children: [
+                /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin" }),
+                t("loading")
+              ]
+            }
+          ) : error ? /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "text-sm text-destructive",
+              "data-cy": sel("patterns.deleteDialog.error"),
+              children: t("error")
+            }
+          ) : usageCount > 0 ? /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "rounded-md border border-destructive/20 bg-destructive/5 p-3",
+              "data-cy": sel("patterns.deleteDialog.warning"),
+              children: [
+                /* @__PURE__ */ jsx("p", { className: "font-medium text-destructive", children: t("inUse", { count: usageCount }) }),
+                /* @__PURE__ */ jsxs(
+                  "ul",
+                  {
+                    className: "mt-2 space-y-1 text-sm text-muted-foreground",
+                    "data-cy": sel("patterns.deleteDialog.usageList"),
+                    children: [
+                      usages.map((usage) => /* @__PURE__ */ jsxs("li", { children: [
+                        "\u2022 ",
+                        usage.entityTitle || usage.entitySlug || usage.entityId,
+                        " (",
+                        usage.entityType,
+                        ")"
+                      ] }, usage.entityId)),
+                      usageCount > 10 && /* @__PURE__ */ jsx("li", { className: "text-muted-foreground/70", children: t("moreItems", { count: usageCount - 10 }) })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx("p", { className: "mt-2 text-xs text-muted-foreground", children: t("cleanupNote") })
+              ]
+            }
+          ) : /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: "text-muted-foreground",
+              "data-cy": sel("patterns.deleteDialog.noUsage"),
+              children: t("notInUse")
+            }
+          )
+        ] }) })
+      ] }),
+      /* @__PURE__ */ jsxs(AlertDialogFooter, { children: [
+        /* @__PURE__ */ jsx(AlertDialogCancel, { "data-cy": sel("patterns.deleteDialog.cancel"), children: t("cancel") }),
+        /* @__PURE__ */ jsx(
+          AlertDialogAction,
+          {
+            onClick: handleConfirm,
+            disabled: isDeleting,
+            className: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+            "data-cy": sel("patterns.deleteDialog.confirm"),
+            children: isDeleting ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }),
+              t("deleting")
+            ] }) : t("deleteAction")
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+export {
+  PatternDeleteDialog
+};

package/dist/components/patterns/PatternUsageReport.js

@@ -0,0 +1,134 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { usePatternUsages } from "@nextsparkjs/core/hooks/usePatternUsages";
+import { PatternUsageStats } from "./PatternUsageStats.js";
+import { PatternUsageTable } from "./PatternUsageTable.js";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from "@nextsparkjs/core/components/ui/select";
+import { Button } from "@nextsparkjs/core/components/ui/button";
+import { Alert, AlertDescription, AlertTitle } from "@nextsparkjs/core/components/ui/alert";
+import { ChevronLeft, ChevronRight, AlertCircle, RefreshCw } from "lucide-react";
+import { sel } from "@nextsparkjs/core/lib/test";
+function PatternUsageReport({
+  patternId,
+  pageSize = 20
+}) {
+  const [entityTypeFilter, setEntityTypeFilter] = useState("all");
+  const [page, setPage] = useState(1);
+  const {
+    usages,
+    counts,
+    total,
+    totalPages,
+    isLoading,
+    isError,
+    error,
+    refetch
+  } = usePatternUsages(patternId, {
+    entityType: entityTypeFilter === "all" ? void 0 : entityTypeFilter,
+    limit: pageSize,
+    page
+  });
+  const handleFilterChange = (value) => {
+    setEntityTypeFilter(value);
+    setPage(1);
+  };
+  const handlePrevPage = () => setPage((p) => Math.max(1, p - 1));
+  const handleNextPage = () => setPage((p) => Math.min(totalPages, p + 1));
+  if (isError) {
+    return /* @__PURE__ */ jsxs(Alert, { variant: "destructive", "data-cy": sel("patterns.usageReport.error"), children: [
+      /* @__PURE__ */ jsx(AlertCircle, { className: "h-4 w-4" }),
+      /* @__PURE__ */ jsx(AlertTitle, { children: "Error Loading Usages" }),
+      /* @__PURE__ */ jsxs(AlertDescription, { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsx("span", { children: error instanceof Error ? error.message : "Failed to load pattern usages" }),
+        /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", onClick: () => refetch(), children: [
+          /* @__PURE__ */ jsx(RefreshCw, { className: "mr-2 h-4 w-4" }),
+          "Retry"
+        ] })
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-6", "data-cy": sel("patterns.usageReport.container"), children: [
+    /* @__PURE__ */ jsx(
+      PatternUsageStats,
+      {
+        counts,
+        total,
+        isLoading
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", "data-cy": sel("patterns.usageReport.filters"), children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: "Filter by type:" }),
+        /* @__PURE__ */ jsxs(Select, { value: entityTypeFilter, onValueChange: handleFilterChange, children: [
+          /* @__PURE__ */ jsx(SelectTrigger, { className: "w-[180px]", "data-cy": sel("patterns.usageReport.filterSelect"), children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "All entity types" }) }),
+          /* @__PURE__ */ jsxs(SelectContent, { children: [
+            /* @__PURE__ */ jsx(SelectItem, { value: "all", children: "All entity types" }),
+            counts.map((item) => /* @__PURE__ */ jsxs(SelectItem, { value: item.entityType, children: [
+              item.entityType.charAt(0).toUpperCase() + item.entityType.slice(1),
+              " (",
+              item.count,
+              ")"
+            ] }, item.entityType))
+          ] })
+        ] })
+      ] }),
+      totalPages > 1 && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", "data-cy": sel("patterns.usageReport.pagination"), children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "outline",
+            size: "sm",
+            onClick: handlePrevPage,
+            disabled: page === 1 || isLoading,
+            "data-cy": sel("patterns.usageReport.prevPage"),
+            children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" })
+          }
+        ),
+        /* @__PURE__ */ jsxs("span", { className: "text-sm text-muted-foreground", children: [
+          "Page ",
+          page,
+          " of ",
+          totalPages
+        ] }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "outline",
+            size: "sm",
+            onClick: handleNextPage,
+            disabled: page >= totalPages || isLoading,
+            "data-cy": sel("patterns.usageReport.nextPage"),
+            children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" })
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      PatternUsageTable,
+      {
+        usages,
+        isLoading,
+        emptyMessage: entityTypeFilter !== "all" ? `This pattern is not used in any ${entityTypeFilter}` : "This pattern is not used in any entities yet"
+      }
+    ),
+    !isLoading && usages.length > 0 && /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground", "data-cy": sel("patterns.usageReport.resultsInfo"), children: [
+      "Showing ",
+      (page - 1) * pageSize + 1,
+      " to ",
+      Math.min(page * pageSize, total),
+      " of ",
+      total,
+      " usages"
+    ] })
+  ] });
+}
+export {
+  PatternUsageReport
+};

package/dist/components/patterns/PatternUsageStats.js

@@ -0,0 +1,63 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Card, CardContent, CardHeader, CardTitle } from "@nextsparkjs/core/components/ui/card";
+import { FileText, LayoutGrid, Newspaper, Hash } from "lucide-react";
+import { sel } from "@nextsparkjs/core/lib/test";
+const entityIcons = {
+  pages: FileText,
+  posts: Newspaper,
+  patterns: LayoutGrid
+};
+function getEntityIcon(entityType) {
+  return entityIcons[entityType] || Hash;
+}
+function formatEntityType(entityType) {
+  return entityType.charAt(0).toUpperCase() + entityType.slice(1);
+}
+function PatternUsageStats({ counts, total, isLoading }) {
+  if (isLoading) {
+    return /* @__PURE__ */ jsx("div", { className: "grid gap-4 md:grid-cols-2 lg:grid-cols-4", "data-cy": sel("patterns.usageStats.loading"), children: [...Array(4)].map((_, i) => /* @__PURE__ */ jsxs(Card, { children: [
+      /* @__PURE__ */ jsxs(CardHeader, { className: "flex flex-row items-center justify-between space-y-0 pb-2", children: [
+        /* @__PURE__ */ jsx("div", { className: "h-4 w-20 animate-pulse rounded bg-muted" }),
+        /* @__PURE__ */ jsx("div", { className: "h-4 w-4 animate-pulse rounded bg-muted" })
+      ] }),
+      /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx("div", { className: "h-8 w-12 animate-pulse rounded bg-muted" }) })
+    ] }, i)) });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "grid gap-4 md:grid-cols-2 lg:grid-cols-4", "data-cy": sel("patterns.usageStats.container"), children: [
+    /* @__PURE__ */ jsxs(Card, { "data-cy": sel("patterns.usageStats.total"), children: [
+      /* @__PURE__ */ jsxs(CardHeader, { className: "flex flex-row items-center justify-between space-y-0 pb-2", children: [
+        /* @__PURE__ */ jsx(CardTitle, { className: "text-sm font-medium", children: "Total Uses" }),
+        /* @__PURE__ */ jsx(Hash, { className: "h-4 w-4 text-muted-foreground" })
+      ] }),
+      /* @__PURE__ */ jsxs(CardContent, { children: [
+        /* @__PURE__ */ jsx("div", { className: "text-2xl font-bold", children: total }),
+        /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground", children: [
+          "Across ",
+          counts.length,
+          " entity type",
+          counts.length !== 1 ? "s" : ""
+        ] })
+      ] })
+    ] }),
+    counts.map((item) => {
+      const Icon = getEntityIcon(item.entityType);
+      return /* @__PURE__ */ jsxs(Card, { "data-cy": sel("patterns.usageStats.byType", { entityType: item.entityType }), children: [
+        /* @__PURE__ */ jsxs(CardHeader, { className: "flex flex-row items-center justify-between space-y-0 pb-2", children: [
+          /* @__PURE__ */ jsx(CardTitle, { className: "text-sm font-medium", children: formatEntityType(item.entityType) }),
+          /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4 text-muted-foreground" })
+        ] }),
+        /* @__PURE__ */ jsxs(CardContent, { children: [
+          /* @__PURE__ */ jsx("div", { className: "text-2xl font-bold", children: item.count }),
+          /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground", children: [
+            (item.count / total * 100).toFixed(1),
+            "% of total"
+          ] })
+        ] })
+      ] }, item.entityType);
+    })
+  ] });
+}
+export {
+  PatternUsageStats
+};