@nextsparkjs/core 0.1.0-beta.8 → 0.1.0-beta.82

package/dist/components/entities/ErrorBoundary.js

@@ -1,9 +1,9 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import React from "react";
-import { Alert, AlertDescription, AlertTitle } from "../ui/alert";
-import { Button } from "../ui/button";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../ui/card";
+import { Alert, AlertDescription, AlertTitle } from "../ui/alert.js";
+import { Button } from "../ui/button.js";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../ui/card.js";
 import { AlertTriangle, RefreshCw, Home, Bug } from "lucide-react";
 class EntityErrorBoundary extends React.Component {
   retryCount = 0;

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.d.ts

@@ -0,0 +1,33 @@
+interface DeletedPatternPlaceholderProps {
+    /**
+     * ID of the deleted pattern (for debugging/logging)
+     */
+    patternId: string;
+    /**
+     * Callback to remove this orphaned reference from the blocks array
+     */
+    onRemove: () => void;
+}
+/**
+ * DeletedPatternPlaceholder
+ *
+ * Displayed in the editor when a PatternReference points to a deleted pattern.
+ * Part of the "Lazy Cleanup" strategy:
+ * - Patterns can be deleted without updating all entities
+ * - Editor shows this placeholder instead of the missing pattern
+ * - User can click "Remove" or simply save the page to clean up the reference
+ *
+ * @example
+ * // In BlockEditor or similar component:
+ * if (isPatternReference(block) && !patternExists(block.ref)) {
+ *   return (
+ *     <DeletedPatternPlaceholder
+ *       patternId={block.ref}
+ *       onRemove={() => removeBlock(block.id)}
+ *     />
+ *   )
+ * }
+ */
+export declare function DeletedPatternPlaceholder({ patternId, onRemove }: DeletedPatternPlaceholderProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=DeletedPatternPlaceholder.d.ts.map

package/dist/components/patterns/DeletedPatternPlaceholder.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DeletedPatternPlaceholder.d.ts","sourceRoot":"","sources":["../../../src/components/patterns/DeletedPatternPlaceholder.tsx"],"names":[],"mappings":"AAOA,UAAU,8BAA8B;IACtC;;OAEG;IACH,SAAS,EAAE,MAAM,CAAA;IACjB;;OAEG;IACH,QAAQ,EAAE,MAAM,IAAI,CAAA;CACrB;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,yBAAyB,CAAC,EACxC,SAAS,EACT,QAAQ,EACT,EAAE,8BAA8B,2CA4BhC"}

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.d.ts

@@ -0,0 +1,41 @@
+interface PatternDeleteDialogProps {
+    /** The ID of the pattern to delete */
+    patternId: string;
+    /** The display title of the pattern */
+    patternTitle: string;
+    /** Callback when delete is confirmed */
+    onConfirm: () => void;
+    /** Custom trigger element (defaults to a delete button) */
+    trigger?: React.ReactNode;
+    /** Whether the delete action is in progress */
+    isDeleting?: boolean;
+    /** Controlled open state (optional - for external control) */
+    open?: boolean;
+    /** Callback when open state changes (optional - for external control) */
+    onOpenChange?: (open: boolean) => void;
+}
+/**
+ * PatternDeleteDialog
+ *
+ * A delete confirmation dialog that shows affected entities before deletion.
+ * Uses lazy loading - only fetches usage data when the dialog is opened.
+ *
+ * Features:
+ * - Lazy-loads usage data on dialog open
+ * - Shows list of affected entities (first 10)
+ * - Warns about orphaned references
+ * - Handles loading and error states
+ * - Full i18n support
+ *
+ * @example
+ * ```tsx
+ * <PatternDeleteDialog
+ *   patternId="pat-123"
+ *   patternTitle="Hero Section"
+ *   onConfirm={handleDelete}
+ * />
+ * ```
+ */
+export declare function PatternDeleteDialog({ patternId, patternTitle, onConfirm, trigger, isDeleting, open: controlledOpen, onOpenChange, }: PatternDeleteDialogProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=PatternDeleteDialog.d.ts.map

package/dist/components/patterns/PatternDeleteDialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PatternDeleteDialog.d.ts","sourceRoot":"","sources":["../../../src/components/patterns/PatternDeleteDialog.tsx"],"names":[],"mappings":"AAoBA,UAAU,wBAAwB;IAChC,sCAAsC;IACtC,SAAS,EAAE,MAAM,CAAA;IACjB,uCAAuC;IACvC,YAAY,EAAE,MAAM,CAAA;IACpB,wCAAwC;IACxC,SAAS,EAAE,MAAM,IAAI,CAAA;IACrB,2DAA2D;IAC3D,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,+CAA+C;IAC/C,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,8DAA8D;IAC9D,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,yEAAyE;IACzE,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;CACvC;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,SAAS,EACT,YAAY,EACZ,SAAS,EACT,OAAO,EACP,UAAkB,EAClB,IAAI,EAAE,cAAc,EACpB,YAAY,GACb,EAAE,wBAAwB,2CAqI1B"}

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.d.ts

@@ -0,0 +1,15 @@
+interface PatternUsageReportProps {
+    /** Pattern ID to show usages for */
+    patternId: string;
+    /** Initial page size (default: 20) */
+    pageSize?: number;
+}
+/**
+ * PatternUsageReport
+ *
+ * Main component for displaying pattern usage reports.
+ * Shows stats cards and a filterable table of usages.
+ */
+export declare function PatternUsageReport({ patternId, pageSize, }: PatternUsageReportProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=PatternUsageReport.d.ts.map

package/dist/components/patterns/PatternUsageReport.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PatternUsageReport.d.ts","sourceRoot":"","sources":["../../../src/components/patterns/PatternUsageReport.tsx"],"names":[],"mappings":"AAkBA,UAAU,uBAAuB;IAC/B,oCAAoC;IACpC,SAAS,EAAE,MAAM,CAAA;IACjB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB;AAED;;;;;GAKG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,SAAS,EACT,QAAa,GACd,EAAE,uBAAuB,2CAwHzB"}

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.d.ts

@@ -0,0 +1,14 @@
+import type { PatternUsageCount } from '@nextsparkjs/core/hooks/usePatternUsages';
+interface PatternUsageStatsProps {
+    counts: PatternUsageCount[];
+    total: number;
+    isLoading?: boolean;
+}
+/**
+ * PatternUsageStats
+ *
+ * Displays usage count statistics as cards grouped by entity type.
+ */
+export declare function PatternUsageStats({ counts, total, isLoading }: PatternUsageStatsProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=PatternUsageStats.d.ts.map

package/dist/components/patterns/PatternUsageStats.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PatternUsageStats.d.ts","sourceRoot":"","sources":["../../../src/components/patterns/PatternUsageStats.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,0CAA0C,CAAA;AAEjF,UAAU,sBAAsB;IAC9B,MAAM,EAAE,iBAAiB,EAAE,CAAA;IAC3B,KAAK,EAAE,MAAM,CAAA;IACb,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAyBD;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,sBAAsB,2CAyDrF"}