@contractspec/bundle.marketing 3.8.8 → 3.8.9

package/dist/components/templates/TemplatesCatalogSection.js

@@ -0,0 +1,279 @@
+// @bun
+var __require = import.meta.require;
+
+// src/components/templates/TemplateCard.tsx
+import { jsxDEV } from "react/jsx-dev-runtime";
+"use client";
+function TemplateCard({
+  title,
+  description,
+  metaBadges,
+  tags,
+  featureList = [],
+  isNew = false,
+  previewAction,
+  useAction
+}) {
+  return /* @__PURE__ */ jsxDEV("div", {
+    className: "editorial-panel relative flex flex-col space-y-4 transition-colors hover:border-[color:rgb(162_79_42_/_0.55)]",
+    children: [
+      isNew ? /* @__PURE__ */ jsxDEV("span", {
+        className: "absolute top-4 right-4 rounded-full bg-[color:var(--success)] px-2.5 py-1 font-medium text-[11px] text-white uppercase",
+        children: "New"
+      }, undefined, false, undefined, this) : null,
+      /* @__PURE__ */ jsxDEV("div", {
+        children: [
+          /* @__PURE__ */ jsxDEV("h3", {
+            className: "font-serif text-2xl tracking-[-0.03em]",
+            children: title
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("p", {
+            className: "mt-1 text-muted-foreground text-sm",
+            children: description
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV("div", {
+        className: "flex-1 space-y-3",
+        children: [
+          /* @__PURE__ */ jsxDEV("div", {
+            className: "flex flex-wrap gap-2",
+            children: metaBadges.map((badge) => /* @__PURE__ */ jsxDEV("span", {
+              className: "rounded-full border border-border bg-background px-3 py-1 text-[11px] text-foreground",
+              children: badge
+            }, badge, false, undefined, this))
+          }, undefined, false, undefined, this),
+          featureList.length > 0 ? /* @__PURE__ */ jsxDEV("p", {
+            className: "text-muted-foreground text-xs",
+            children: [
+              /* @__PURE__ */ jsxDEV("span", {
+                className: "font-medium text-foreground",
+                children: "Features:"
+              }, undefined, false, undefined, this),
+              " ",
+              featureList.join(", ")
+            ]
+          }, undefined, true, undefined, this) : null,
+          /* @__PURE__ */ jsxDEV("div", {
+            className: "flex flex-wrap gap-1",
+            children: tags.map((tag) => /* @__PURE__ */ jsxDEV("span", {
+              className: "rounded-full border border-border bg-muted px-3 py-1 text-[11px] text-muted-foreground",
+              children: tag
+            }, tag, false, undefined, this))
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV("div", {
+        className: "flex gap-2 pt-4",
+        children: [
+          previewAction,
+          useAction
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/components/templates/template-new.ts
+var NEW_TEMPLATE_IDS = [
+  "minimal",
+  "messaging-agent-actions",
+  "policy-safe-knowledge-assistant",
+  "visualization-showcase"
+];
+var NEW_TEMPLATE_ID_SET = new Set(NEW_TEMPLATE_IDS);
+function isNewTemplateId(templateId) {
+  return NEW_TEMPLATE_ID_SET.has(templateId);
+}
+
+// src/components/templates/template-catalog.ts
+import { listExamples, listTemplates } from "@contractspec/module.examples";
+var NEW_TEMPLATE_INDEX = new Map(NEW_TEMPLATE_IDS.map((templateId, index) => [templateId, index]));
+function buildLocalTemplateCatalog(examples = listExamples(), templates = listTemplates()) {
+  const templatesById = new Map(templates.map((template) => [template.id, template]));
+  return examples.filter((example) => example.meta.visibility === "public" && example.surfaces.templates).map((example) => {
+    const template = templatesById.get(example.meta.key);
+    const tags = Array.from(new Set(example.meta.tags.map((tag) => tag.trim()).filter(Boolean))).sort((left, right) => left.localeCompare(right));
+    return {
+      id: example.meta.key,
+      title: example.meta.title ?? template?.name ?? example.meta.key,
+      description: example.meta.summary ?? example.meta.description,
+      tags,
+      kind: example.meta.kind,
+      stability: example.meta.stability,
+      previewUrl: template?.preview?.demoUrl ?? `/sandbox?template=${encodeURIComponent(example.meta.key)}`,
+      featureList: [...template?.features ?? []],
+      sandboxModes: example.surfaces.sandbox.modes,
+      renderTargets: [...template?.renderTargets ?? []],
+      isNew: isNewTemplateId(example.meta.key),
+      packageName: example.entrypoints.packageName
+    };
+  }).sort(compareLocalTemplateCatalogItems);
+}
+function matchesTemplateFilters(template, search, selectedTag) {
+  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;
+}
+function formatExampleKindLabel(kind) {
+  return kind.split("-").map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join(" ");
+}
+function formatStabilityLabel(stability) {
+  return stability.split("_").map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join(" ");
+}
+function compareLocalTemplateCatalogItems(left, right) {
+  const leftNewIndex = NEW_TEMPLATE_INDEX.get(left.id);
+  const rightNewIndex = NEW_TEMPLATE_INDEX.get(right.id);
+  if (leftNewIndex !== undefined || rightNewIndex !== undefined) {
+    if (leftNewIndex === undefined) {
+      return 1;
+    }
+    if (rightNewIndex === undefined) {
+      return -1;
+    }
+    return leftNewIndex - rightNewIndex;
+  }
+  return left.title.localeCompare(right.title);
+}
+
+// src/components/templates/template-preview.ts
+var INLINE_TEMPLATE_PREVIEW_IDS = [
+  "agent-console",
+  "ai-chat-assistant",
+  "analytics-dashboard",
+  "crm-pipeline",
+  "data-grid-showcase",
+  "integration-hub",
+  "marketplace",
+  "saas-boilerplate",
+  "visualization-showcase",
+  "workflow-system"
+];
+var INLINE_TEMPLATE_PREVIEW_SET = new Set(INLINE_TEMPLATE_PREVIEW_IDS);
+function supportsInlineTemplatePreview(templateId) {
+  return INLINE_TEMPLATE_PREVIEW_SET.has(templateId);
+}
+function getLocalTemplatePreviewAction(template) {
+  if (supportsInlineTemplatePreview(template.id)) {
+    return { kind: "modal", templateId: template.id };
+  }
+  return { kind: "sandbox", href: template.previewUrl };
+}
+function getRegistryTemplatePreviewAction(template, localTemplate) {
+  if (!localTemplate) {
+    return { kind: "disabled" };
+  }
+  return getLocalTemplatePreviewAction(localTemplate);
+}
+
+// src/components/templates/TemplatesCatalogSection.tsx
+import Link from "next/link";
+import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
+"use client";
+function TemplatesCatalogSection({
+  source,
+  registryConfigured,
+  registryLoading,
+  localTemplates,
+  registryTemplates,
+  localTemplateById,
+  onPreview,
+  onUseTemplate
+}) {
+  const showRegistry = source === "registry" && registryConfigured;
+  return /* @__PURE__ */ jsxDEV2("section", {
+    className: "section-padding",
+    children: /* @__PURE__ */ jsxDEV2("div", {
+      className: "editorial-shell",
+      children: showRegistry ? registryLoading ? /* @__PURE__ */ jsxDEV2("div", {
+        className: "py-12 text-center",
+        children: /* @__PURE__ */ jsxDEV2("p", {
+          className: "text-muted-foreground",
+          children: "Loading community templates\u2026"
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this) : registryTemplates.length === 0 ? /* @__PURE__ */ jsxDEV2("div", {
+        className: "py-12 text-center",
+        children: /* @__PURE__ */ jsxDEV2("p", {
+          className: "text-muted-foreground",
+          children: "No community templates found."
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV2("div", {
+        className: "grid gap-6 md:grid-cols-2 lg:grid-cols-3",
+        children: registryTemplates.map((template) => {
+          const localTemplate = localTemplateById.get(template.id);
+          const previewAction = getRegistryTemplatePreviewAction(template, localTemplate);
+          return /* @__PURE__ */ jsxDEV2(TemplateCard, {
+            title: template.name,
+            description: template.description,
+            metaBadges: ["Community"],
+            tags: template.tags,
+            previewAction: previewAction.kind === "modal" ? /* @__PURE__ */ jsxDEV2("button", {
+              className: "btn-ghost flex-1 text-center text-xs",
+              onClick: () => onPreview(template.id),
+              children: "Preview"
+            }, undefined, false, undefined, this) : previewAction.kind === "sandbox" ? /* @__PURE__ */ jsxDEV2(Link, {
+              href: previewAction.href,
+              className: "btn-ghost flex-1 text-center text-xs",
+              children: "Open Sandbox"
+            }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV2("button", {
+              className: "btn-ghost flex-1 cursor-not-allowed text-center text-xs opacity-60",
+              type: "button",
+              disabled: true,
+              children: "Preview Unavailable"
+            }, undefined, false, undefined, this),
+            useAction: /* @__PURE__ */ jsxDEV2("button", {
+              className: "btn-primary flex-1 text-center text-xs",
+              onClick: () => onUseTemplate(template.id, "registry"),
+              children: "Use Template"
+            }, undefined, false, undefined, this)
+          }, template.id, false, undefined, this);
+        })
+      }, undefined, false, undefined, this) : localTemplates.length === 0 ? /* @__PURE__ */ jsxDEV2("div", {
+        className: "py-12 text-center",
+        children: /* @__PURE__ */ jsxDEV2("p", {
+          className: "text-muted-foreground",
+          children: "No templates match your filters. Try a different search."
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV2("div", {
+        className: "grid gap-6 md:grid-cols-2 lg:grid-cols-3",
+        children: localTemplates.map((template) => {
+          const previewAction = getLocalTemplatePreviewAction(template);
+          return /* @__PURE__ */ jsxDEV2(TemplateCard, {
+            title: template.title,
+            description: template.description,
+            isNew: template.isNew,
+            metaBadges: [
+              formatExampleKindLabel(template.kind),
+              formatStabilityLabel(template.stability)
+            ],
+            tags: template.tags,
+            featureList: template.featureList,
+            previewAction: previewAction.kind === "modal" ? /* @__PURE__ */ jsxDEV2("button", {
+              className: "btn-ghost flex-1 text-center text-xs",
+              onClick: () => onPreview(template.id),
+              children: "Preview"
+            }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV2(Link, {
+              href: previewAction.href,
+              className: "btn-ghost flex-1 text-center text-xs",
+              children: "Open Sandbox"
+            }, undefined, false, undefined, this),
+            useAction: /* @__PURE__ */ jsxDEV2("button", {
+              className: "btn-primary flex-1 text-center text-xs",
+              onClick: () => onUseTemplate(template.id, "local"),
+              children: "Use Template"
+            }, undefined, false, undefined, this)
+          }, template.id, false, undefined, this);
+        })
+      }, undefined, false, undefined, this)
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+export {
+  TemplatesCatalogSection
+};