@contractspec/bundle.marketing 3.8.9 → 3.8.10

package/src/components/templates/template-catalog.test.ts

@@ -4,11 +4,16 @@ import {
 	buildLocalTemplateCatalog,
 	matchesTemplateFilters,
 } from './template-catalog';
+import { buildTemplateFilterState } from './template-filters';
 import { NEW_TEMPLATE_IDS } from './template-new';
 import {
 	getAvailableTemplateSources,
 	isRegistryConfigured,
 } from './template-source';
+import {
+	DEFAULT_VISIBLE_TEMPLATE_TAGS,
+	getVisibleTemplateTagFacets,
+} from './template-tag-visibility';
 
 describe('template catalog', () => {
 	test('includes every public example exposed as a template', () => {
@@ -51,6 +56,97 @@ describe('template catalog', () => {
 			)
 		).toBe(true);
 	});
+
+	test('derives tag facets from the templates remaining after search', () => {
+		const catalog = buildLocalTemplateCatalog(listExamples(), listTemplates());
+		const state = buildTemplateFilterState(
+			catalog,
+			'agent',
+			null,
+			(template) => template
+		);
+		const tags = state.tagFacets.map((facet) => facet.tag);
+
+		expect(state.searchScopedTemplates.length).toBeGreaterThan(0);
+		expect(tags).toContain('agents');
+		expect(tags).not.toContain('billing');
+	});
+
+	test('applies selected tags after search scoping', () => {
+		const catalog = buildLocalTemplateCatalog(listExamples(), listTemplates());
+		const state = buildTemplateFilterState(
+			catalog,
+			'agent',
+			'telegram',
+			(template) => template
+		);
+
+		expect(state.searchScopedTemplates.length).toBeGreaterThan(
+			state.finalTemplates.length
+		);
+		expect(
+			state.finalTemplates.every((template) =>
+				template.tags.includes('telegram')
+			)
+		).toBe(true);
+	});
+
+	test('caps default tag visibility and keeps selected hidden tags visible', () => {
+		const tagFacets = Array.from(
+			{ length: DEFAULT_VISIBLE_TEMPLATE_TAGS + 2 },
+			(_, index) => ({
+				tag: `tag-${index}`,
+				count: DEFAULT_VISIBLE_TEMPLATE_TAGS + 2 - index,
+			})
+		);
+		const { visibleTagFacets, hiddenTagFacets } = getVisibleTemplateTagFacets(
+			tagFacets,
+			'tag-11',
+			false
+		);
+
+		expect(visibleTagFacets).toHaveLength(DEFAULT_VISIBLE_TEMPLATE_TAGS + 1);
+		expect(visibleTagFacets.some((facet) => facet.tag === 'tag-11')).toBe(true);
+		expect(hiddenTagFacets.some((facet) => facet.tag === 'tag-11')).toBe(false);
+	});
+
+	test('recomputes source-specific tags from the active source only', () => {
+		const localTemplates = [
+			{
+				title: 'Local agent console',
+				description: 'Agent workflows',
+				tags: ['agents', 'local'],
+			},
+		];
+		const registryTemplates = [
+			{
+				title: 'Registry recipe app',
+				description: 'Cooking workflows',
+				tags: ['recipes', 'community'],
+			},
+		];
+		const localState = buildTemplateFilterState(
+			localTemplates,
+			'',
+			null,
+			(template) => template
+		);
+		const registryState = buildTemplateFilterState(
+			registryTemplates,
+			'',
+			null,
+			(template) => template
+		);
+
+		expect(localState.tagFacets.map((facet) => facet.tag)).toEqual([
+			'agents',
+			'local',
+		]);
+		expect(registryState.tagFacets.map((facet) => facet.tag)).toEqual([
+			'community',
+			'recipes',
+		]);
+	});
 });
 
 describe('template source configuration', () => {

package/src/components/templates/template-catalog.ts

@@ -79,6 +79,16 @@ export function matchesTemplateFilters(
 	template: TemplateFilterCandidate,
 	search: string,
 	selectedTag: string | null
+): boolean {
+	return (
+		matchesTemplateSearch(template, search) &&
+		(selectedTag === null || template.tags.includes(selectedTag))
+	);
+}
+
+export function matchesTemplateSearch(
+	template: TemplateFilterCandidate,
+	search: string
 ): boolean {
 	const haystack = [
 		template.title,
@@ -88,13 +98,11 @@ export function matchesTemplateFilters(
 		.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))
+	);
 }
 
 export function formatExampleKindLabel(kind: ExampleKind): string {

package/src/components/templates/template-filters.ts

@@ -0,0 +1,57 @@
+import { matchesTemplateSearch } from './template-catalog';
+import type { TemplateTagFacet } from './template-tag-visibility';
+
+export interface TemplateFilterCandidate {
+	title: string;
+	description: string;
+	tags: readonly string[];
+}
+
+export interface TemplateFilterState<TTemplate> {
+	searchScopedTemplates: TTemplate[];
+	finalTemplates: TTemplate[];
+	tagFacets: TemplateTagFacet[];
+}
+
+export function buildTemplateFilterState<TTemplate>(
+	templates: readonly TTemplate[],
+	search: string,
+	selectedTag: string | null,
+	getCandidate: (template: TTemplate) => TemplateFilterCandidate
+): TemplateFilterState<TTemplate> {
+	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<TTemplate>(
+	templates: readonly TTemplate[],
+	getCandidate: (template: TTemplate) => TemplateFilterCandidate
+): TemplateTagFacet[] {
+	const counts = new Map<string, number>();
+
+	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)
+		);
+}

package/src/components/templates/template-tag-visibility.ts

@@ -0,0 +1,58 @@
+export const DEFAULT_VISIBLE_TEMPLATE_TAGS = 10;
+
+export interface TemplateTagFacet {
+	tag: string;
+	count: number;
+}
+
+export interface VisibleTemplateTagFacets {
+	visibleTagFacets: TemplateTagFacet[];
+	hiddenTagFacets: TemplateTagFacet[];
+}
+
+export function getVisibleTemplateTagFacets(
+	tagFacets: readonly TemplateTagFacet[],
+	selectedTag: string | null,
+	expanded: boolean,
+	visibleCount = DEFAULT_VISIBLE_TEMPLATE_TAGS
+): VisibleTemplateTagFacets {
+	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: readonly TemplateTagFacet[],
+	selectedTag: string | null,
+	fallbackTagFacets: readonly TemplateTagFacet[] = tagFacets
+): TemplateTagFacet[] {
+	if (
+		selectedTag === null ||
+		tagFacets.some((facet) => facet.tag === selectedTag)
+	) {
+		return [...tagFacets];
+	}
+
+	return [
+		...tagFacets,
+		fallbackTagFacets.find((facet) => facet.tag === selectedTag) ?? {
+			tag: selectedTag,
+			count: 0,
+		},
+	];
+}

package/src/components/templates/useTemplateBrowseState.ts

@@ -0,0 +1,101 @@
+'use client';
+
+import { useRegistryTemplates } from '@contractspec/lib.example-shared-ui';
+import { useEffect, useMemo, useState } from 'react';
+import { buildLocalTemplateCatalog } from './template-catalog';
+import { buildTemplateFilterState } from './template-filters';
+import {
+	getAvailableTemplateSources,
+	isRegistryConfigured,
+	type TemplateSource,
+} from './template-source';
+import { getVisibleTemplateTagFacets } from './template-tag-visibility';
+
+const REGISTRY_URL = process.env.NEXT_PUBLIC_CONTRACTSPEC_REGISTRY_URL;
+
+export function useTemplateBrowseState() {
+	const [selectedTag, setSelectedTag] = useState<string | null>(null);
+	const [search, setSearch] = useState('');
+	const [source, setSource] = useState<TemplateSource>('local');
+	const [showAllTags, setShowAllTags] = useState(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 { data: registryTemplates = [], isLoading: registryLoading } =
+		useRegistryTemplates();
+	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,
+				})
+			),
+		[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,
+	};
+}