feat(25-01): extend template types with rich metadata

- Add TemplateMetadata interface with nodeCount, category, tags, previewImage
- Add TemplateCategory type (product, style, composition, community)
- Update PresetTemplate interface with category and tags fields
- Add category and tags to all 6 preset templates
- Add getTemplateMetadata() to extract node count from workflow
- Add getPresetWithMetadata() to get template with full metadata
- Update getAllPresets() to include category and tags in return type

src/lib/quickstart/templates.ts

@@ -1,4 +1,5 @@
 import { WorkflowFile } from "@/store/workflowStore";
+import { TemplateCategory, TemplateMetadata } from "@/types/quickstart";
 
 export type ContentLevel = "empty" | "minimal" | "full";
 
@@ -7,6 +8,8 @@ export interface PresetTemplate {
   name: string;
   description: string;
   icon: string; // SVG path or emoji
+  category: TemplateCategory;
+  tags: string[];
   workflow: Omit<WorkflowFile, "id">;
 }
 
@@ -249,6 +252,8 @@ export const PRESET_TEMPLATES: PresetTemplate[] = [
     name: "Product Shot",
     description: "Place product in a new scene or environment",
     icon: "M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4",
+    category: "product",
+    tags: ["product", "scene", "placement"],
     workflow: {
       version: 1,
       name: "Product Shot",
@@ -327,6 +332,8 @@ export const PRESET_TEMPLATES: PresetTemplate[] = [
     name: "Model + Product",
     description: "Combine model, product, and scene",
     icon: "M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z",
+    category: "product",
+    tags: ["product", "model", "fashion"],
     workflow: {
       version: 1,
       name: "Model + Product",
@@ -419,6 +426,8 @@ export const PRESET_TEMPLATES: PresetTemplate[] = [
     name: "Color Variations",
     description: "Generate product color variants from references",
     icon: "M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01",
+    category: "product",
+    tags: ["product", "color", "variations"],
     workflow: {
       version: 1,
       name: "Color Variations",
@@ -511,6 +520,8 @@ export const PRESET_TEMPLATES: PresetTemplate[] = [
     name: "Background Swap",
     description: "Place subject in a new background",
     icon: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z",
+    category: "composition",
+    tags: ["composite", "background", "subject"],
     workflow: {
       version: 1,
       name: "Background Swap",
@@ -589,6 +600,8 @@ export const PRESET_TEMPLATES: PresetTemplate[] = [
     name: "Style Transfer",
     description: "Apply style from one image to another",
     icon: "M9.53 16.122a3 3 0 00-5.78 1.128 2.25 2.25 0 01-2.4 2.245 4.5 4.5 0 008.4-2.245c0-.399-.078-.78-.22-1.128zm0 0a15.998 15.998 0 003.388-1.62m-5.043-.025a15.994 15.994 0 011.622-3.395m3.42 3.42a15.995 15.995 0 004.764-4.648l3.876-5.814a1.151 1.151 0 00-1.597-1.597L14.146 6.32a15.996 15.996 0 00-4.649 4.763m3.42 3.42a6.776 6.776 0 00-3.42-3.42",
+    category: "style",
+    tags: ["style", "artistic", "transfer"],
     workflow: {
       version: 1,
       name: "Style Transfer",
@@ -667,6 +680,8 @@ export const PRESET_TEMPLATES: PresetTemplate[] = [
     name: "Scene Composite",
     description: "Combine elements from multiple scenes",
     icon: "M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10",
+    category: "composition",
+    tags: ["composite", "scene", "elements"],
     workflow: {
       version: 1,
       name: "Scene Composite",
@@ -810,15 +825,42 @@ export function getPresetTemplate(
 /**
  * Get all preset templates for display
  */
-export function getAllPresets(): Pick<PresetTemplate, "id" | "name" | "description" | "icon">[] {
+export function getAllPresets(): Pick<PresetTemplate, "id" | "name" | "description" | "icon" | "category" | "tags">[] {
-  return PRESET_TEMPLATES.map(({ id, name, description, icon }) => ({
+  return PRESET_TEMPLATES.map(({ id, name, description, icon, category, tags }) => ({
     id,
     name,
     description,
     icon,
+    category,
+    tags,
   }));
 }
 
+/**
+ * Get metadata for a template, extracting node count from workflow
+ */
+export function getTemplateMetadata(template: PresetTemplate): TemplateMetadata {
+  return {
+    nodeCount: template.workflow.nodes.length,
+    category: template.category,
+    tags: template.tags,
+  };
+}
+
+/**
+ * Get a preset template with full data including metadata
+ */
+export function getPresetWithMetadata(templateId: string): (PresetTemplate & { metadata: TemplateMetadata }) | null {
+  const template = PRESET_TEMPLATES.find((t) => t.id === templateId);
+  if (!template) {
+    return null;
+  }
+  return {
+    ...template,
+    metadata: getTemplateMetadata(template),
+  };
+}
+
 /**
  * Export template content for use in API route (for fetching images)
  */

src/types/quickstart.ts

@@ -1,5 +1,14 @@
 export type QuickstartView = "initial" | "templates" | "vibe";
 
+export type TemplateCategory = "product" | "style" | "composition" | "community";
+
+export interface TemplateMetadata {
+  nodeCount: number;
+  category: TemplateCategory;
+  tags: string[];
+  previewImage?: string;
+}
+
 export interface CommunityWorkflowMeta {
   id: string;
   name: string;