@contractspec/bundle.marketing 3.8.9 → 3.8.10

package/dist/browser/components/templates/TemplatesClientPage.js

@@ -2839,7 +2839,11 @@ function TemplatesBrowseControls({
   onSearchChange,
   selectedTag,
   onTagChange,
-  availableTags
+  showTagFilters,
+  visibleTagFacets,
+  hiddenTagFacets,
+  showAllTags,
+  onShowAllTagsChange
 }) {
   return /* @__PURE__ */ jsxDEV14("section", {
     className: "editorial-section",
@@ -2900,29 +2904,40 @@ function TemplatesBrowseControls({
                 }, undefined, false, undefined, this)
               ]
             }, undefined, true, undefined, this),
-            /* @__PURE__ */ jsxDEV14("div", {
-              className: "flex flex-wrap gap-2",
+            showTagFilters ? /* @__PURE__ */ jsxDEV14("div", {
+              className: "space-y-3",
               children: [
-                /* @__PURE__ */ jsxDEV14("button", {
-                  onClick: () => onTagChange(null),
-                  className: cn("rounded-full px-4 py-2 font-medium text-sm transition-colors", {
-                    "bg-primary text-primary-foreground": selectedTag === null,
-                    "border border-border bg-card hover:bg-card/80": selectedTag !== null
-                  }),
-                  "aria-pressed": selectedTag === null,
-                  children: "All"
-                }, undefined, false, undefined, this),
-                availableTags.map((tag) => /* @__PURE__ */ jsxDEV14("button", {
-                  onClick: () => onTagChange(tag),
-                  className: cn("rounded-full px-4 py-2 font-medium text-sm transition-colors", {
-                    "bg-primary text-primary-foreground": selectedTag === tag,
-                    "border border-border bg-card hover:bg-card/80": selectedTag !== tag
-                  }),
-                  "aria-pressed": selectedTag === tag,
-                  children: tag
-                }, tag, false, undefined, this))
+                /* @__PURE__ */ jsxDEV14("div", {
+                  className: "flex flex-wrap gap-2",
+                  children: [
+                    /* @__PURE__ */ jsxDEV14("button", {
+                      onClick: () => onTagChange(null),
+                      className: cn("rounded-full px-4 py-2 font-medium text-sm transition-colors", {
+                        "bg-primary text-primary-foreground": selectedTag === null,
+                        "border border-border bg-card hover:bg-card/80": selectedTag !== null
+                      }),
+                      "aria-pressed": selectedTag === null,
+                      children: "All"
+                    }, undefined, false, undefined, this),
+                    visibleTagFacets.map((facet) => /* @__PURE__ */ jsxDEV14("button", {
+                      onClick: () => onTagChange(facet.tag),
+                      className: cn("rounded-full px-4 py-2 font-medium text-sm transition-colors", {
+                        "bg-primary text-primary-foreground": selectedTag === facet.tag,
+                        "border border-border bg-card hover:bg-card/80": selectedTag !== facet.tag
+                      }),
+                      "aria-pressed": selectedTag === facet.tag,
+                      children: facet.tag
+                    }, facet.tag, false, undefined, this))
+                  ]
+                }, undefined, true, undefined, this),
+                hiddenTagFacets.length > 0 || showAllTags ? /* @__PURE__ */ jsxDEV14("button", {
+                  type: "button",
+                  onClick: () => onShowAllTagsChange(!showAllTags),
+                  className: "text-muted-foreground text-sm transition-colors hover:text-foreground",
+                  children: showAllTags ? "Show fewer" : "More tags"
+                }, undefined, false, undefined, this) : null
               ]
-            }, undefined, true, undefined, this)
+            }, undefined, true, undefined, this) : null
           ]
         }, undefined, true, undefined, this)
       ]
@@ -2967,15 +2982,16 @@ function buildLocalTemplateCatalog(examples = listExamples(), templates = listTe
   }).sort(compareLocalTemplateCatalogItems);
 }
 function matchesTemplateFilters(template, search, selectedTag) {
+  return matchesTemplateSearch(template, search) && (selectedTag === null || template.tags.includes(selectedTag));
+}
+function matchesTemplateSearch(template, search) {
   const haystack = [
     template.title,
     template.description,
     template.tags.join(" ")
   ].join(" ").toLowerCase();
   const searchTokens = search.trim().toLowerCase().split(/\s+/).filter(Boolean);
-  const matchesSearch = searchTokens.length === 0 || searchTokens.every((token) => haystack.includes(token));
-  const matchesTag = selectedTag === null || template.tags.includes(selectedTag);
-  return matchesSearch && matchesTag;
+  return searchTokens.length === 0 || searchTokens.every((token) => haystack.includes(token));
 }
 function formatExampleKindLabel(kind) {
   return kind.split("-").map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join(" ");
@@ -3036,13 +3052,17 @@ function TemplatesCatalogSection({
   source,
   registryConfigured,
   registryLoading,
+  registryHasTemplates,
   localTemplates,
   registryTemplates,
   localTemplateById,
   onPreview,
-  onUseTemplate
+  onUseTemplate,
+  hasSearch,
+  selectedTag
 }) {
   const showRegistry = source === "registry" && registryConfigured;
+  const emptyStateMessage = getEmptyStateMessage(hasSearch, selectedTag);
   return /* @__PURE__ */ jsxDEV15("section", {
     className: "section-padding",
     children: /* @__PURE__ */ jsxDEV15("div", {
@@ -3053,12 +3073,18 @@ function TemplatesCatalogSection({
           className: "text-muted-foreground",
           children: "Loading community templates…"
         }, undefined, false, undefined, this)
-      }, undefined, false, undefined, this) : registryTemplates.length === 0 ? /* @__PURE__ */ jsxDEV15("div", {
+      }, undefined, false, undefined, this) : !registryHasTemplates ? /* @__PURE__ */ jsxDEV15("div", {
         className: "py-12 text-center",
         children: /* @__PURE__ */ jsxDEV15("p", {
           className: "text-muted-foreground",
           children: "No community templates found."
         }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this) : registryTemplates.length === 0 ? /* @__PURE__ */ jsxDEV15("div", {
+        className: "py-12 text-center",
+        children: /* @__PURE__ */ jsxDEV15("p", {
+          className: "text-muted-foreground",
+          children: emptyStateMessage
+        }, undefined, false, undefined, this)
       }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV15("div", {
         className: "grid gap-6 md:grid-cols-2 lg:grid-cols-3",
         children: registryTemplates.map((template) => {
@@ -3094,7 +3120,7 @@ function TemplatesCatalogSection({
         className: "py-12 text-center",
         children: /* @__PURE__ */ jsxDEV15("p", {
           className: "text-muted-foreground",
-          children: "No templates match your filters. Try a different search."
+          children: emptyStateMessage
         }, undefined, false, undefined, this)
       }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV15("div", {
         className: "grid gap-6 md:grid-cols-2 lg:grid-cols-3",
@@ -3130,6 +3156,18 @@ function TemplatesCatalogSection({
     }, undefined, false, undefined, this)
   }, undefined, false, undefined, this);
 }
+function getEmptyStateMessage(hasSearch, selectedTag) {
+  if (selectedTag !== null && hasSearch) {
+    return "No templates match this tag for the current search.";
+  }
+  if (selectedTag !== null) {
+    return "No templates match this tag. Try another tag or reset filters.";
+  }
+  if (hasSearch) {
+    return "No templates match your search. Try a different keyword.";
+  }
+  return "No templates match your filters. Try a different search.";
+}
 
 // src/components/templates/TemplatesHeroSection.tsx
 import { jsxDEV as jsxDEV16 } from "react/jsx-dev-runtime";
@@ -3356,6 +3394,82 @@ function TemplatePreviewModal({
   }, undefined, false, undefined, this);
 }
 
+// src/components/templates/TemplatesOverlays.tsx
+import {
+  Dialog as Dialog4,
+  DialogContent as DialogContent4,
+  DialogDescription as DialogDescription3,
+  DialogHeader as DialogHeader3,
+  DialogTitle as DialogTitle3
+} from "@contractspec/lib.ui-kit-web/ui/dialog";
+import { jsxDEV as jsxDEV19, Fragment } from "react/jsx-dev-runtime";
+"use client";
+function TemplatesOverlays({
+  previewTemplateId,
+  onPreviewClose,
+  studioSignupModalOpen,
+  onStudioSignupModalOpenChange,
+  selectedTemplateId,
+  onTemplateCommandClose,
+  onDeployStudio
+}) {
+  return /* @__PURE__ */ jsxDEV19(Fragment, {
+    children: [
+      previewTemplateId ? /* @__PURE__ */ jsxDEV19(TemplatePreviewModal, {
+        templateId: previewTemplateId,
+        onClose: onPreviewClose
+      }, undefined, false, undefined, this) : null,
+      /* @__PURE__ */ jsxDEV19(Dialog4, {
+        open: studioSignupModalOpen,
+        onOpenChange: onStudioSignupModalOpenChange,
+        children: /* @__PURE__ */ jsxDEV19(DialogContent4, {
+          className: "max-h-[90vh] max-w-2xl overflow-y-auto",
+          children: [
+            /* @__PURE__ */ jsxDEV19(DialogHeader3, {
+              children: [
+                /* @__PURE__ */ jsxDEV19(DialogTitle3, {
+                  children: "Deploy in Studio"
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV19(DialogDescription3, {
+                  children: "Deploy templates in ContractSpec Studio and run the full evidence-to-spec loop with your team."
+                }, undefined, false, undefined, this)
+              ]
+            }, undefined, true, undefined, this),
+            /* @__PURE__ */ jsxDEV19(StudioSignupSection, {
+              variant: "compact"
+            }, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this)
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV19(TemplateCommandDialog, {
+        templateId: selectedTemplateId,
+        onClose: onTemplateCommandClose,
+        onDeployStudio
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/components/templates/template-filters.ts
+function buildTemplateFilterState(templates, search, selectedTag, getCandidate) {
+  const searchScopedTemplates = templates.filter((template) => matchesTemplateSearch(getCandidate(template), search));
+  const finalTemplates = selectedTag === null ? searchScopedTemplates : searchScopedTemplates.filter((template) => getCandidate(template).tags.includes(selectedTag));
+  return {
+    searchScopedTemplates,
+    finalTemplates,
+    tagFacets: buildTemplateTagFacets(searchScopedTemplates, getCandidate)
+  };
+}
+function buildTemplateTagFacets(templates, getCandidate) {
+  const counts = new Map;
+  for (const template of templates) {
+    for (const tag of new Set(getCandidate(template).tags)) {
+      counts.set(tag, (counts.get(tag) ?? 0) + 1);
+    }
+  }
+  return [...counts.entries()].map(([tag, count]) => ({ tag, count })).sort((left, right) => right.count - left.count || left.tag.localeCompare(right.tag));
+}
+
 // src/components/templates/template-source.ts
 function isRegistryConfigured(registryUrl) {
   return Boolean(registryUrl?.trim());
@@ -3364,51 +3478,132 @@ function getAvailableTemplateSources(registryUrl) {
   return isRegistryConfigured(registryUrl) ? ["local", "registry"] : ["local"];
 }
 
-// src/components/templates/TemplatesClientPage.tsx
-import {
-  analyticsEventNames as analyticsEventNames3,
-  captureAnalyticsEvent as captureAnalyticsEvent3
-} from "@contractspec/bundle.library/libs/posthog/client";
+// src/components/templates/template-tag-visibility.ts
+var DEFAULT_VISIBLE_TEMPLATE_TAGS = 10;
+function getVisibleTemplateTagFacets(tagFacets, selectedTag, expanded, visibleCount = DEFAULT_VISIBLE_TEMPLATE_TAGS) {
+  if (expanded) {
+    return {
+      visibleTagFacets: pinSelectedTagFacet(tagFacets, selectedTag),
+      hiddenTagFacets: []
+    };
+  }
+  const visibleTagFacets = pinSelectedTagFacet(tagFacets.slice(0, visibleCount), selectedTag, tagFacets);
+  const visibleTags = new Set(visibleTagFacets.map((facet) => facet.tag));
+  return {
+    visibleTagFacets,
+    hiddenTagFacets: tagFacets.filter((facet) => !visibleTags.has(facet.tag))
+  };
+}
+function pinSelectedTagFacet(tagFacets, selectedTag, fallbackTagFacets = tagFacets) {
+  if (selectedTag === null || tagFacets.some((facet) => facet.tag === selectedTag)) {
+    return [...tagFacets];
+  }
+  return [
+    ...tagFacets,
+    fallbackTagFacets.find((facet) => facet.tag === selectedTag) ?? {
+      tag: selectedTag,
+      count: 0
+    }
+  ];
+}
+
+// src/components/templates/useTemplateBrowseState.ts
 import { useRegistryTemplates } from "@contractspec/lib.example-shared-ui";
-import {
-  Dialog as Dialog4,
-  DialogContent as DialogContent4,
-  DialogDescription as DialogDescription3,
-  DialogHeader as DialogHeader3,
-  DialogTitle as DialogTitle3
-} from "@contractspec/lib.ui-kit-web/ui/dialog";
-import { useMemo, useState as useState2 } from "react";
-import { jsxDEV as jsxDEV19, Fragment } from "react/jsx-dev-runtime";
+import { useEffect, useMemo, useState as useState2 } from "react";
 "use client";
 var REGISTRY_URL = process.env.NEXT_PUBLIC_CONTRACTSPEC_REGISTRY_URL;
-var TemplatesPage = () => {
+function useTemplateBrowseState() {
   const [selectedTag, setSelectedTag] = useState2(null);
   const [search, setSearch] = useState2("");
-  const [previewTemplateId, setPreviewTemplateId] = useState2(null);
-  const [studioSignupModalOpen, setStudioSignupModalOpen] = useState2(false);
-  const [selectedTemplateId, setSelectedTemplateId] = useState2(null);
   const [source, setSource] = useState2("local");
+  const [showAllTags, setShowAllTags] = useState2(false);
   const registryConfigured = isRegistryConfigured(REGISTRY_URL);
   const availableSources = getAvailableTemplateSources(REGISTRY_URL);
   const localTemplates = useMemo(() => buildLocalTemplateCatalog(), []);
   const localTemplateById = useMemo(() => new Map(localTemplates.map((template) => [template.id, template])), [localTemplates]);
-  const availableTags = useMemo(() => Array.from(new Set(localTemplates.flatMap((template) => template.tags))).sort((left, right) => left.localeCompare(right)), [localTemplates]);
   const { data: registryTemplates = [], isLoading: registryLoading } = useRegistryTemplates();
-  const filteredLocalTemplates = useMemo(() => localTemplates.filter((template) => matchesTemplateFilters(template, search, selectedTag)), [localTemplates, search, selectedTag]);
-  const filteredRegistryTemplates = useMemo(() => registryTemplates.filter((template) => matchesTemplateFilters({
+  const localFilterState = useMemo(() => buildTemplateFilterState(localTemplates, search, selectedTag, (template) => ({
+    title: template.title,
+    description: template.description,
+    tags: template.tags
+  })), [localTemplates, search, selectedTag]);
+  const registryFilterState = useMemo(() => buildTemplateFilterState(registryTemplates, search, selectedTag, (template) => ({
     title: template.name,
     description: template.description,
     tags: template.tags
-  }, search, selectedTag)), [registryTemplates, search, selectedTag]);
-  return /* @__PURE__ */ jsxDEV19(Fragment, {
+  })), [registryTemplates, search, selectedTag]);
+  const activeFilterState = source === "registry" ? registryFilterState : localFilterState;
+  const suppressTagRail = source === "registry" && (registryLoading || registryTemplates.length === 0);
+  const { visibleTagFacets, hiddenTagFacets } = useMemo(() => getVisibleTemplateTagFacets(activeFilterState.tagFacets, selectedTag, showAllTags), [activeFilterState.tagFacets, selectedTag, showAllTags]);
+  const showTagFilters = !suppressTagRail && (visibleTagFacets.length > 0 || hiddenTagFacets.length > 0);
+  useEffect(() => {
+    setShowAllTags(false);
+  }, [search, showTagFilters, source]);
+  return {
+    selectedTag,
+    setSelectedTag,
+    search,
+    setSearch,
+    source,
+    setSource,
+    showAllTags,
+    setShowAllTags,
+    registryConfigured,
+    availableSources,
+    localTemplates,
+    localTemplateById,
+    registryTemplates,
+    registryLoading,
+    localFilterState,
+    registryFilterState,
+    visibleTagFacets,
+    hiddenTagFacets,
+    showTagFilters
+  };
+}
+
+// src/components/templates/TemplatesClientPage.tsx
+import {
+  analyticsEventNames as analyticsEventNames3,
+  captureAnalyticsEvent as captureAnalyticsEvent3
+} from "@contractspec/bundle.library/libs/posthog/client";
+import { useState as useState3 } from "react";
+import { jsxDEV as jsxDEV20, Fragment as Fragment2 } from "react/jsx-dev-runtime";
+"use client";
+var TemplatesPage = () => {
+  const [previewTemplateId, setPreviewTemplateId] = useState3(null);
+  const [studioSignupModalOpen, setStudioSignupModalOpen] = useState3(false);
+  const [selectedTemplateId, setSelectedTemplateId] = useState3(null);
+  const {
+    selectedTag,
+    setSelectedTag,
+    search,
+    setSearch,
+    source,
+    setSource,
+    showAllTags,
+    setShowAllTags,
+    registryConfigured,
+    availableSources,
+    localTemplates,
+    localTemplateById,
+    registryTemplates,
+    registryLoading,
+    localFilterState,
+    registryFilterState,
+    visibleTagFacets,
+    hiddenTagFacets,
+    showTagFilters
+  } = useTemplateBrowseState();
+  return /* @__PURE__ */ jsxDEV20(Fragment2, {
     children: [
-      /* @__PURE__ */ jsxDEV19("main", {
+      /* @__PURE__ */ jsxDEV20("main", {
         children: [
-          /* @__PURE__ */ jsxDEV19(TemplatesHeroSection, {
+          /* @__PURE__ */ jsxDEV20(TemplatesHeroSection, {
             localTemplateCount: localTemplates.length,
             sourceCount: availableSources.length
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV19(TemplatesBrowseControls, {
+          /* @__PURE__ */ jsxDEV20(TemplatesBrowseControls, {
             registryConfigured,
             availableSources,
             source,
@@ -3417,14 +3612,19 @@ var TemplatesPage = () => {
             onSearchChange: setSearch,
             selectedTag,
             onTagChange: setSelectedTag,
-            availableTags
+            showTagFilters,
+            visibleTagFacets,
+            hiddenTagFacets,
+            showAllTags,
+            onShowAllTagsChange: setShowAllTags
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV19(TemplatesCatalogSection, {
+          /* @__PURE__ */ jsxDEV20(TemplatesCatalogSection, {
             source,
             registryConfigured,
             registryLoading,
-            localTemplates: filteredLocalTemplates,
-            registryTemplates: filteredRegistryTemplates,
+            registryHasTemplates: registryTemplates.length > 0,
+            localTemplates: localFilterState.finalTemplates,
+            registryTemplates: registryFilterState.finalTemplates,
             localTemplateById,
             onPreview: setPreviewTemplateId,
             onUseTemplate: (templateId, templateSource) => {
@@ -3434,40 +3634,20 @@ var TemplatesPage = () => {
                 source: templateSource
               });
               setSelectedTemplateId(templateId);
-            }
+            },
+            hasSearch: search.trim().length > 0,
+            selectedTag
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV19(TemplatesNextStepsSection, {}, undefined, false, undefined, this)
+          /* @__PURE__ */ jsxDEV20(TemplatesNextStepsSection, {}, undefined, false, undefined, this)
         ]
       }, undefined, true, undefined, this),
-      previewTemplateId ? /* @__PURE__ */ jsxDEV19(TemplatePreviewModal, {
-        templateId: previewTemplateId,
-        onClose: () => setPreviewTemplateId(null)
-      }, undefined, false, undefined, this) : null,
-      /* @__PURE__ */ jsxDEV19(Dialog4, {
-        open: studioSignupModalOpen,
-        onOpenChange: setStudioSignupModalOpen,
-        children: /* @__PURE__ */ jsxDEV19(DialogContent4, {
-          className: "max-h-[90vh] max-w-2xl overflow-y-auto",
-          children: [
-            /* @__PURE__ */ jsxDEV19(DialogHeader3, {
-              children: [
-                /* @__PURE__ */ jsxDEV19(DialogTitle3, {
-                  children: "Deploy in Studio"
-                }, undefined, false, undefined, this),
-                /* @__PURE__ */ jsxDEV19(DialogDescription3, {
-                  children: "Deploy templates in ContractSpec Studio and run the full evidence-to-spec loop with your team."
-                }, undefined, false, undefined, this)
-              ]
-            }, undefined, true, undefined, this),
-            /* @__PURE__ */ jsxDEV19(StudioSignupSection, {
-              variant: "compact"
-            }, undefined, false, undefined, this)
-          ]
-        }, undefined, true, undefined, this)
-      }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV19(TemplateCommandDialog, {
-        templateId: selectedTemplateId,
-        onClose: () => setSelectedTemplateId(null),
+      /* @__PURE__ */ jsxDEV20(TemplatesOverlays, {
+        previewTemplateId,
+        onPreviewClose: () => setPreviewTemplateId(null),
+        studioSignupModalOpen,
+        onStudioSignupModalOpenChange: setStudioSignupModalOpen,
+        selectedTemplateId,
+        onTemplateCommandClose: () => setSelectedTemplateId(null),
         onDeployStudio: () => {
           setSelectedTemplateId(null);
           setStudioSignupModalOpen(true);