@contractspec/lib.example-shared-ui 1.11.0 → 1.12.0

package/dist/node/index.js

@@ -0,0 +1,3497 @@
+// src/hooks/useEvolution.ts
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+"use client";
+var EVOLUTION_STORAGE_KEY = "contractspec-evolution-data";
+function useEvolution(templateId) {
+  const [usageStats, setUsageStats] = useState([]);
+  const [anomalies, setAnomalies] = useState([]);
+  const [suggestions, setSuggestions] = useState([]);
+  const [hints, setHints] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const metricsRef = useRef([]);
+  const [operationCount, setOperationCount] = useState(0);
+  useEffect(() => {
+    try {
+      const stored = localStorage.getItem(`${EVOLUTION_STORAGE_KEY}-${templateId}`);
+      if (stored) {
+        const data = JSON.parse(stored);
+        setSuggestions(data.suggestions.map((s) => ({
+          ...s,
+          createdAt: new Date(s.createdAt)
+        })));
+      }
+    } catch {}
+  }, [templateId]);
+  useEffect(() => {
+    try {
+      localStorage.setItem(`${EVOLUTION_STORAGE_KEY}-${templateId}`, JSON.stringify({ suggestions }));
+    } catch {}
+  }, [suggestions, templateId]);
+  const trackOperation = useCallback((operationName, durationMs, success, errorCode) => {
+    const sample = {
+      operation: {
+        name: operationName,
+        version: "1.0.0",
+        tenantId: "sandbox"
+      },
+      durationMs,
+      success,
+      timestamp: new Date,
+      errorCode
+    };
+    metricsRef.current.push(sample);
+    setOperationCount((prev) => prev + 1);
+  }, []);
+  const analyzeUsage = useCallback(() => {
+    const samples = metricsRef.current;
+    if (samples.length < 5)
+      return;
+    const groups = new Map;
+    for (const sample of samples) {
+      const key = `${sample.operation.name}.v${sample.operation.version}`;
+      const arr = groups.get(key) ?? [];
+      arr.push(sample);
+      groups.set(key, arr);
+    }
+    const stats = [];
+    const detectedAnomalies = [];
+    groups.forEach((opSamples) => {
+      if (opSamples.length < 3)
+        return;
+      const durations = opSamples.map((s) => s.durationMs).sort((a, b) => a - b);
+      const errors = opSamples.filter((s) => !s.success);
+      const totalCalls = opSamples.length;
+      const errorRate = errors.length / totalCalls;
+      const averageLatencyMs = durations.reduce((sum, value) => sum + value, 0) / totalCalls;
+      const timestamps = opSamples.map((s) => s.timestamp.getTime());
+      const firstSample = opSamples[0];
+      if (!firstSample)
+        return;
+      const stat = {
+        operation: firstSample.operation,
+        totalCalls,
+        successRate: 1 - errorRate,
+        errorRate,
+        averageLatencyMs,
+        p95LatencyMs: percentile(durations, 0.95),
+        p99LatencyMs: percentile(durations, 0.99),
+        maxLatencyMs: Math.max(...durations),
+        lastSeenAt: new Date(Math.max(...timestamps)),
+        windowStart: new Date(Math.min(...timestamps)),
+        windowEnd: new Date(Math.max(...timestamps)),
+        topErrors: errors.reduce((acc, s) => {
+          if (s.errorCode) {
+            acc[s.errorCode] = (acc[s.errorCode] ?? 0) + 1;
+          }
+          return acc;
+        }, {})
+      };
+      stats.push(stat);
+      if (errorRate > 0.1) {
+        detectedAnomalies.push({
+          operation: stat.operation,
+          severity: errorRate > 0.3 ? "high" : errorRate > 0.2 ? "medium" : "low",
+          metric: "error-rate",
+          description: `Error rate ${(errorRate * 100).toFixed(1)}% exceeds threshold`,
+          detectedAt: new Date,
+          threshold: 0.1,
+          observedValue: errorRate
+        });
+      }
+      if (stat.p99LatencyMs > 500) {
+        detectedAnomalies.push({
+          operation: stat.operation,
+          severity: stat.p99LatencyMs > 1000 ? "high" : stat.p99LatencyMs > 750 ? "medium" : "low",
+          metric: "latency",
+          description: `P99 latency ${stat.p99LatencyMs.toFixed(0)}ms exceeds threshold`,
+          detectedAt: new Date,
+          threshold: 500,
+          observedValue: stat.p99LatencyMs
+        });
+      }
+    });
+    setUsageStats(stats);
+    setAnomalies(detectedAnomalies);
+    const newHints = detectedAnomalies.map((anomaly) => ({
+      operation: anomaly.operation,
+      category: anomaly.metric === "latency" ? "performance" : "error-handling",
+      summary: anomaly.metric === "latency" ? "Latency regression detected" : "Error spike detected",
+      justification: anomaly.description,
+      recommendedActions: anomaly.metric === "latency" ? [
+        "Add caching layer",
+        "Optimize database queries",
+        "Consider pagination"
+      ] : [
+        "Add retry logic",
+        "Improve error handling",
+        "Add circuit breaker"
+      ]
+    }));
+    setHints(newHints);
+  }, []);
+  const generateSuggestions = useCallback(async () => {
+    if (anomalies.length === 0)
+      return;
+    setLoading(true);
+    await new Promise((resolve) => setTimeout(resolve, 800));
+    const newSuggestions = anomalies.map((anomaly) => ({
+      id: `suggestion-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`,
+      intent: {
+        id: `intent-${anomaly.operation.name}`,
+        type: anomaly.metric === "latency" ? "latency-regression" : anomaly.metric === "error-rate" ? "error-spike" : "throughput-drop",
+        description: anomaly.description,
+        operation: anomaly.operation,
+        confidence: {
+          score: anomaly.severity === "high" ? 0.9 : anomaly.severity === "medium" ? 0.7 : 0.5,
+          sampleSize: usageStats.find((s) => s.operation.name === anomaly.operation.name)?.totalCalls ?? 0
+        }
+      },
+      target: anomaly.operation,
+      proposal: {
+        summary: generateSuggestionSummary(anomaly),
+        rationale: generateSuggestionRationale(anomaly),
+        changeType: anomaly.metric === "error-rate" ? "policy-update" : "revision",
+        recommendedActions: generateRecommendedActions(anomaly)
+      },
+      confidence: anomaly.severity === "high" ? 0.85 : anomaly.severity === "medium" ? 0.7 : 0.55,
+      createdAt: new Date,
+      createdBy: "ai-evolution-agent",
+      status: "pending",
+      priority: anomaly.severity
+    }));
+    setSuggestions((prev) => [...prev, ...newSuggestions]);
+    setLoading(false);
+  }, [anomalies, usageStats]);
+  const approveSuggestion = useCallback((id, _notes) => {
+    setSuggestions((prev) => prev.map((s) => s.id === id ? { ...s, status: "approved" } : s));
+  }, []);
+  const rejectSuggestion = useCallback((id, _notes) => {
+    setSuggestions((prev) => prev.map((s) => s.id === id ? { ...s, status: "rejected" } : s));
+  }, []);
+  const clear = useCallback(() => {
+    metricsRef.current = [];
+    setOperationCount(0);
+    setUsageStats([]);
+    setAnomalies([]);
+    setSuggestions([]);
+    setHints([]);
+    localStorage.removeItem(`${EVOLUTION_STORAGE_KEY}-${templateId}`);
+  }, [templateId]);
+  return useMemo(() => ({
+    usageStats,
+    anomalies,
+    suggestions,
+    hints,
+    loading,
+    trackOperation,
+    analyzeUsage,
+    generateSuggestions,
+    approveSuggestion,
+    rejectSuggestion,
+    clear,
+    operationCount
+  }), [
+    usageStats,
+    anomalies,
+    suggestions,
+    hints,
+    loading,
+    trackOperation,
+    analyzeUsage,
+    generateSuggestions,
+    approveSuggestion,
+    rejectSuggestion,
+    clear,
+    operationCount
+  ]);
+}
+function percentile(values, p) {
+  if (!values.length)
+    return 0;
+  if (values.length === 1)
+    return values[0] ?? 0;
+  const idx = Math.min(values.length - 1, Math.floor(p * values.length));
+  return values[idx] ?? 0;
+}
+function generateSuggestionSummary(anomaly) {
+  if (anomaly.metric === "latency") {
+    return `Add caching and pagination to ${anomaly.operation.name} to reduce latency`;
+  }
+  if (anomaly.metric === "error-rate") {
+    return `Add retry policy and circuit breaker to ${anomaly.operation.name}`;
+  }
+  return `Optimize ${anomaly.operation.name} for improved throughput`;
+}
+function generateSuggestionRationale(anomaly) {
+  if (anomaly.metric === "latency") {
+    return `The operation ${anomaly.operation.name} is experiencing P99 latency of ${anomaly.observedValue?.toFixed(0)}ms, which is above the recommended threshold of ${anomaly.threshold}ms. This can impact user experience and downstream operations.`;
+  }
+  if (anomaly.metric === "error-rate") {
+    return `The error rate for ${anomaly.operation.name} is ${((anomaly.observedValue ?? 0) * 100).toFixed(1)}%, indicating potential issues with input validation, external dependencies, or resource limits.`;
+  }
+  return `Throughput for ${anomaly.operation.name} has dropped significantly, suggesting potential bottlenecks or reduced demand that should be investigated.`;
+}
+function generateRecommendedActions(anomaly) {
+  if (anomaly.metric === "latency") {
+    return [
+      "Add response caching for frequently accessed data",
+      "Implement pagination for large result sets",
+      "Optimize database queries with proper indexing",
+      "Consider adding a GraphQL DataLoader for batching"
+    ];
+  }
+  if (anomaly.metric === "error-rate") {
+    return [
+      "Add input validation at the contract level",
+      "Implement retry policy with exponential backoff",
+      "Add circuit breaker for external dependencies",
+      "Enhance error logging for better debugging"
+    ];
+  }
+  return [
+    "Review resource allocation and scaling policies",
+    "Check for upstream routing or load balancer issues",
+    "Validate feature flag configurations",
+    "Monitor dependency health metrics"
+  ];
+}
+
+// src/EvolutionDashboard.tsx
+import { useCallback as useCallback2, useMemo as useMemo2 } from "react";
+import { Button, LoaderBlock } from "@contractspec/lib.design-system";
+import { Card } from "@contractspec/lib.ui-kit-web/ui/card";
+import { Badge } from "@contractspec/lib.ui-kit-web/ui/badge";
+import { jsxDEV } from "react/jsx-dev-runtime";
+"use client";
+function EvolutionDashboard({
+  templateId,
+  onLog
+}) {
+  const {
+    usageStats,
+    anomalies,
+    suggestions,
+    hints,
+    loading,
+    trackOperation,
+    analyzeUsage,
+    generateSuggestions,
+    approveSuggestion,
+    rejectSuggestion,
+    clear,
+    operationCount
+  } = useEvolution(templateId);
+  const handleSimulateOperations = useCallback2(() => {
+    const operations = [
+      { name: `${templateId}.list`, duration: 150, success: true },
+      { name: `${templateId}.list`, duration: 180, success: true },
+      { name: `${templateId}.create`, duration: 350, success: true },
+      {
+        name: `${templateId}.create`,
+        duration: 420,
+        success: false,
+        error: "VALIDATION_ERROR"
+      },
+      { name: `${templateId}.list`, duration: 200, success: true },
+      { name: `${templateId}.get`, duration: 80, success: true },
+      { name: `${templateId}.update`, duration: 280, success: true },
+      { name: `${templateId}.list`, duration: 950, success: true },
+      {
+        name: `${templateId}.delete`,
+        duration: 150,
+        success: false,
+        error: "NOT_FOUND"
+      },
+      { name: `${templateId}.create`, duration: 380, success: true }
+    ];
+    for (const op of operations) {
+      trackOperation(op.name, op.duration, op.success, op.error);
+    }
+    onLog?.(`Simulated ${operations.length} operations`);
+    setTimeout(() => {
+      analyzeUsage();
+      onLog?.("Analysis complete");
+    }, 100);
+  }, [templateId, trackOperation, analyzeUsage, onLog]);
+  const handleGenerateSuggestions = useCallback2(async () => {
+    await generateSuggestions();
+    onLog?.("AI suggestions generated");
+  }, [generateSuggestions, onLog]);
+  const handleApproveSuggestion = useCallback2((id) => {
+    approveSuggestion(id);
+    onLog?.(`Suggestion ${id.slice(0, 8)} approved`);
+  }, [approveSuggestion, onLog]);
+  const handleRejectSuggestion = useCallback2((id) => {
+    rejectSuggestion(id);
+    onLog?.(`Suggestion ${id.slice(0, 8)} rejected`);
+  }, [rejectSuggestion, onLog]);
+  const handleClear = useCallback2(() => {
+    clear();
+    onLog?.("Evolution data cleared");
+  }, [clear, onLog]);
+  const pendingSuggestions = useMemo2(() => suggestions.filter((s) => s.status === "pending"), [suggestions]);
+  return /* @__PURE__ */ jsxDEV("div", {
+    className: "space-y-6",
+    children: [
+      /* @__PURE__ */ jsxDEV("div", {
+        className: "flex items-center justify-between",
+        children: [
+          /* @__PURE__ */ jsxDEV("div", {
+            children: [
+              /* @__PURE__ */ jsxDEV("h2", {
+                className: "text-xl font-semibold",
+                children: "AI Evolution Engine"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV("p", {
+                className: "text-muted-foreground text-sm",
+                children: "Analyze usage patterns and get AI-powered suggestions"
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV("div", {
+            className: "flex items-center gap-2",
+            children: [
+              /* @__PURE__ */ jsxDEV(Badge, {
+                variant: "secondary",
+                children: [
+                  operationCount,
+                  " ops tracked"
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV(Button, {
+                variant: "ghost",
+                size: "sm",
+                onPress: handleClear,
+                children: "Clear"
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV(Card, {
+        className: "p-4",
+        children: [
+          /* @__PURE__ */ jsxDEV("div", {
+            className: "flex flex-wrap items-center gap-3",
+            children: [
+              /* @__PURE__ */ jsxDEV(Button, {
+                variant: "default",
+                size: "sm",
+                onPress: handleSimulateOperations,
+                children: "Simulate Operations"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV(Button, {
+                variant: "outline",
+                size: "sm",
+                onPress: analyzeUsage,
+                disabled: operationCount < 5,
+                children: "Analyze Usage"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV(Button, {
+                variant: "outline",
+                size: "sm",
+                onPress: handleGenerateSuggestions,
+                disabled: anomalies.length === 0 || loading,
+                children: loading ? "Generating..." : "Generate AI Suggestions"
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV("p", {
+            className: "text-muted-foreground mt-2 text-xs",
+            children: "Simulate sandbox operations, analyze patterns, and generate AI improvement suggestions."
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      loading && /* @__PURE__ */ jsxDEV(LoaderBlock, {
+        label: "Generating AI suggestions..."
+      }, undefined, false, undefined, this),
+      usageStats.length > 0 && /* @__PURE__ */ jsxDEV(Card, {
+        className: "p-4",
+        children: [
+          /* @__PURE__ */ jsxDEV("h3", {
+            className: "mb-3 font-semibold",
+            children: "Usage Statistics"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("div", {
+            className: "grid gap-3 md:grid-cols-2 lg:grid-cols-3",
+            children: usageStats.map((stat) => /* @__PURE__ */ jsxDEV(UsageStatCard, {
+              stat
+            }, stat.operation.name, false, undefined, this))
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      anomalies.length > 0 && /* @__PURE__ */ jsxDEV(Card, {
+        className: "p-4",
+        children: [
+          /* @__PURE__ */ jsxDEV("div", {
+            className: "mb-3 flex items-center justify-between",
+            children: [
+              /* @__PURE__ */ jsxDEV("h3", {
+                className: "font-semibold",
+                children: "Detected Anomalies"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV(Badge, {
+                variant: "secondary",
+                className: "border-amber-500/30 bg-amber-500/20 text-amber-400",
+                children: [
+                  anomalies.length,
+                  " issues"
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV("div", {
+            className: "space-y-2",
+            children: anomalies.map((anomaly, index) => /* @__PURE__ */ jsxDEV(AnomalyCard, {
+              anomaly
+            }, `${anomaly.operation.name}-${index}`, false, undefined, this))
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      suggestions.length > 0 && /* @__PURE__ */ jsxDEV(Card, {
+        className: "p-4",
+        children: [
+          /* @__PURE__ */ jsxDEV("div", {
+            className: "mb-3 flex items-center justify-between",
+            children: [
+              /* @__PURE__ */ jsxDEV("h3", {
+                className: "font-semibold",
+                children: "AI Suggestions"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV("div", {
+                className: "flex items-center gap-2",
+                children: pendingSuggestions.length > 0 && /* @__PURE__ */ jsxDEV(Badge, {
+                  variant: "secondary",
+                  className: "border-amber-500/30 bg-amber-500/20 text-amber-400",
+                  children: [
+                    pendingSuggestions.length,
+                    " pending"
+                  ]
+                }, undefined, true, undefined, this)
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV("div", {
+            className: "space-y-3",
+            children: suggestions.map((suggestion) => /* @__PURE__ */ jsxDEV(SuggestionCard, {
+              suggestion,
+              onApprove: handleApproveSuggestion,
+              onReject: handleRejectSuggestion
+            }, suggestion.id, false, undefined, this))
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      hints.length > 0 && /* @__PURE__ */ jsxDEV(Card, {
+        className: "p-4",
+        children: [
+          /* @__PURE__ */ jsxDEV("h3", {
+            className: "mb-3 font-semibold",
+            children: "Optimization Hints"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("div", {
+            className: "space-y-2",
+            children: hints.map((hint, index) => /* @__PURE__ */ jsxDEV(HintCard, {
+              hint
+            }, `${hint.operation.name}-${index}`, false, undefined, this))
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      usageStats.length === 0 && anomalies.length === 0 && suggestions.length === 0 && /* @__PURE__ */ jsxDEV(Card, {
+        className: "p-8 text-center",
+        children: /* @__PURE__ */ jsxDEV("p", {
+          className: "text-muted-foreground",
+          children: 'Click "Simulate Operations" to generate sample data for analysis.'
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+function UsageStatCard({ stat }) {
+  return /* @__PURE__ */ jsxDEV("div", {
+    className: "rounded-lg border border-violet-500/20 bg-violet-500/5 p-3",
+    children: [
+      /* @__PURE__ */ jsxDEV("div", {
+        className: "mb-2 flex items-center justify-between",
+        children: [
+          /* @__PURE__ */ jsxDEV("span", {
+            className: "font-mono text-sm font-medium",
+            children: stat.operation.name
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV(Badge, {
+            variant: stat.errorRate > 0.1 ? "destructive" : "default",
+            className: stat.errorRate > 0.1 ? "" : "border-green-500/30 bg-green-500/20 text-green-400",
+            children: [
+              ((1 - stat.errorRate) * 100).toFixed(0),
+              "% success"
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV("div", {
+        className: "grid grid-cols-2 gap-2 text-xs",
+        children: [
+          /* @__PURE__ */ jsxDEV("div", {
+            children: [
+              /* @__PURE__ */ jsxDEV("span", {
+                className: "text-muted-foreground",
+                children: "Total Calls:"
+              }, undefined, false, undefined, this),
+              " ",
+              /* @__PURE__ */ jsxDEV("span", {
+                className: "font-medium",
+                children: stat.totalCalls
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV("div", {
+            children: [
+              /* @__PURE__ */ jsxDEV("span", {
+                className: "text-muted-foreground",
+                children: "Avg Latency:"
+              }, undefined, false, undefined, this),
+              " ",
+              /* @__PURE__ */ jsxDEV("span", {
+                className: "font-medium",
+                children: [
+                  stat.averageLatencyMs.toFixed(0),
+                  "ms"
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV("div", {
+            children: [
+              /* @__PURE__ */ jsxDEV("span", {
+                className: "text-muted-foreground",
+                children: "P95:"
+              }, undefined, false, undefined, this),
+              " ",
+              /* @__PURE__ */ jsxDEV("span", {
+                className: "font-medium",
+                children: [
+                  stat.p95LatencyMs.toFixed(0),
+                  "ms"
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV("div", {
+            children: [
+              /* @__PURE__ */ jsxDEV("span", {
+                className: "text-muted-foreground",
+                children: "P99:"
+              }, undefined, false, undefined, this),
+              " ",
+              /* @__PURE__ */ jsxDEV("span", {
+                className: "font-medium",
+                children: [
+                  stat.p99LatencyMs.toFixed(0),
+                  "ms"
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+function AnomalyCard({ anomaly }) {
+  const severityColors = {
+    low: "text-amber-400",
+    medium: "text-orange-400",
+    high: "text-red-400"
+  };
+  return /* @__PURE__ */ jsxDEV("div", {
+    className: "flex items-center justify-between rounded-lg border border-amber-500/30 bg-amber-500/5 p-3",
+    children: [
+      /* @__PURE__ */ jsxDEV("div", {
+        className: "flex items-center gap-3",
+        children: [
+          /* @__PURE__ */ jsxDEV("span", {
+            className: `text-lg ${severityColors[anomaly.severity]}`,
+            title: `${anomaly.severity} severity`,
+            children: anomaly.severity === "high" ? "\uD83D\uDD34" : anomaly.severity === "medium" ? "\uD83D\uDFE0" : "\uD83D\uDFE1"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("div", {
+            children: [
+              /* @__PURE__ */ jsxDEV("p", {
+                className: "text-sm font-medium",
+                children: anomaly.description
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV("p", {
+                className: "text-muted-foreground text-xs",
+                children: [
+                  anomaly.operation.name,
+                  " • ",
+                  anomaly.metric
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV(Badge, {
+        variant: anomaly.severity === "high" ? "destructive" : "secondary",
+        className: anomaly.severity === "medium" ? "border-amber-500/30 bg-amber-500/20 text-amber-400" : "",
+        children: anomaly.severity
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+function SuggestionCard({
+  suggestion,
+  onApprove,
+  onReject
+}) {
+  const getStatusStyles = (status) => {
+    switch (status) {
+      case "pending":
+        return {
+          variant: "secondary",
+          className: "bg-amber-500/20 text-amber-400 border-amber-500/30"
+        };
+      case "approved":
+        return {
+          variant: "default",
+          className: "bg-green-500/20 text-green-400 border-green-500/30"
+        };
+      case "rejected":
+        return { variant: "destructive", className: "" };
+      default:
+        return { variant: "secondary", className: "" };
+    }
+  };
+  const statusStyle = getStatusStyles(suggestion.status);
+  return /* @__PURE__ */ jsxDEV("div", {
+    className: "rounded-lg border border-violet-500/30 bg-violet-500/5 p-4",
+    children: [
+      /* @__PURE__ */ jsxDEV("div", {
+        className: "mb-2 flex items-start justify-between",
+        children: [
+          /* @__PURE__ */ jsxDEV("div", {
+            className: "flex-1",
+            children: [
+              /* @__PURE__ */ jsxDEV("div", {
+                className: "flex items-center gap-2",
+                children: [
+                  /* @__PURE__ */ jsxDEV("span", {
+                    className: "text-lg",
+                    children: suggestion.intent.type === "latency-regression" ? "⚡" : suggestion.intent.type === "error-spike" ? "\uD83D\uDD25" : "\uD83D\uDCC9"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV("h4", {
+                    className: "font-medium",
+                    children: suggestion.proposal.summary
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV("p", {
+                className: "text-muted-foreground mt-1 text-sm",
+                children: suggestion.proposal.rationale
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV(Badge, {
+            variant: statusStyle.variant,
+            className: statusStyle.className,
+            children: suggestion.status
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      suggestion.proposal.recommendedActions && suggestion.proposal.recommendedActions.length > 0 && /* @__PURE__ */ jsxDEV("div", {
+        className: "mt-3",
+        children: [
+          /* @__PURE__ */ jsxDEV("p", {
+            className: "mb-1 text-xs font-semibold text-violet-400 uppercase",
+            children: "Recommended Actions"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("ul", {
+            className: "list-inside list-disc space-y-1 text-xs",
+            children: suggestion.proposal.recommendedActions.slice(0, 3).map((action, i) => /* @__PURE__ */ jsxDEV("li", {
+              children: action
+            }, i, false, undefined, this))
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV("div", {
+        className: "mt-3 flex items-center justify-between",
+        children: [
+          /* @__PURE__ */ jsxDEV("div", {
+            className: "flex items-center gap-2 text-xs",
+            children: [
+              /* @__PURE__ */ jsxDEV("span", {
+                className: "text-muted-foreground",
+                children: [
+                  "Confidence: ",
+                  (suggestion.confidence * 100).toFixed(0),
+                  "%"
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV("span", {
+                className: "text-muted-foreground",
+                children: "•"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV(Badge, {
+                variant: "secondary",
+                children: suggestion.priority
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          suggestion.status === "pending" && /* @__PURE__ */ jsxDEV("div", {
+            className: "flex items-center gap-2",
+            children: [
+              /* @__PURE__ */ jsxDEV(Button, {
+                variant: "outline",
+                size: "sm",
+                onPress: () => onReject(suggestion.id),
+                children: "Reject"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV(Button, {
+                variant: "default",
+                size: "sm",
+                onPress: () => onApprove(suggestion.id),
+                children: "Approve"
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+function HintCard({ hint }) {
+  const categoryIcons = {
+    schema: "\uD83D\uDCD0",
+    policy: "\uD83D\uDD12",
+    performance: "⚡",
+    "error-handling": "\uD83D\uDEE1️"
+  };
+  return /* @__PURE__ */ jsxDEV("div", {
+    className: "rounded-lg border border-blue-500/20 bg-blue-500/5 p-3",
+    children: /* @__PURE__ */ jsxDEV("div", {
+      className: "flex items-start gap-3",
+      children: [
+        /* @__PURE__ */ jsxDEV("span", {
+          className: "text-lg",
+          children: categoryIcons[hint.category]
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsxDEV("div", {
+          className: "flex-1",
+          children: [
+            /* @__PURE__ */ jsxDEV("p", {
+              className: "font-medium",
+              children: hint.summary
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV("p", {
+              className: "text-muted-foreground mt-1 text-xs",
+              children: hint.justification
+            }, undefined, false, undefined, this),
+            hint.recommendedActions.length > 0 && /* @__PURE__ */ jsxDEV("ul", {
+              className: "mt-2 list-inside list-disc text-xs",
+              children: hint.recommendedActions.slice(0, 2).map((action, i) => /* @__PURE__ */ jsxDEV("li", {
+                children: action
+              }, i, false, undefined, this))
+            }, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this)
+      ]
+    }, undefined, true, undefined, this)
+  }, undefined, false, undefined, this);
+}
+
+// src/EvolutionSidebar.tsx
+import { useCallback as useCallback3, useMemo as useMemo3 } from "react";
+import { Button as Button2 } from "@contractspec/lib.design-system";
+import { Card as Card2 } from "@contractspec/lib.ui-kit-web/ui/card";
+import { Badge as Badge2 } from "@contractspec/lib.ui-kit-web/ui/badge";
+import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
+"use client";
+function EvolutionSidebar({
+  templateId,
+  expanded = false,
+  onToggle,
+  onLog,
+  onOpenEvolution
+}) {
+  const {
+    anomalies,
+    suggestions,
+    loading,
+    approveSuggestion,
+    rejectSuggestion,
+    operationCount
+  } = useEvolution(templateId);
+  const pendingSuggestions = useMemo3(() => suggestions.filter((s) => s.status === "pending"), [suggestions]);
+  const topAnomalies = useMemo3(() => anomalies.sort((a, b) => {
+    const severityOrder = { high: 0, medium: 1, low: 2 };
+    return severityOrder[a.severity] - severityOrder[b.severity];
+  }).slice(0, 3), [anomalies]);
+  const handleApprove = useCallback3((id) => {
+    approveSuggestion(id);
+    onLog?.(`Approved suggestion ${id.slice(0, 8)}`);
+  }, [approveSuggestion, onLog]);
+  const handleReject = useCallback3((id) => {
+    rejectSuggestion(id);
+    onLog?.(`Rejected suggestion ${id.slice(0, 8)}`);
+  }, [rejectSuggestion, onLog]);
+  if (!expanded) {
+    return /* @__PURE__ */ jsxDEV2("button", {
+      onClick: onToggle,
+      className: "flex items-center gap-2 rounded-lg border border-violet-500/30 bg-violet-500/10 px-3 py-2 text-sm transition hover:bg-violet-500/20",
+      type: "button",
+      children: [
+        /* @__PURE__ */ jsxDEV2("span", {
+          children: "\uD83E\uDD16"
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsxDEV2("span", {
+          children: "Evolution"
+        }, undefined, false, undefined, this),
+        pendingSuggestions.length > 0 && /* @__PURE__ */ jsxDEV2(Badge2, {
+          variant: "secondary",
+          className: "border-amber-500/30 bg-amber-500/20 text-amber-400",
+          children: pendingSuggestions.length
+        }, undefined, false, undefined, this),
+        anomalies.length > 0 && pendingSuggestions.length === 0 && /* @__PURE__ */ jsxDEV2(Badge2, {
+          variant: "destructive",
+          children: anomalies.length
+        }, undefined, false, undefined, this)
+      ]
+    }, undefined, true, undefined, this);
+  }
+  return /* @__PURE__ */ jsxDEV2(Card2, {
+    className: "w-80 overflow-hidden",
+    children: [
+      /* @__PURE__ */ jsxDEV2("div", {
+        className: "flex items-center justify-between border-b border-violet-500/20 bg-violet-500/5 px-3 py-2",
+        children: [
+          /* @__PURE__ */ jsxDEV2("div", {
+            className: "flex items-center gap-2",
+            children: [
+              /* @__PURE__ */ jsxDEV2("span", {
+                children: "\uD83E\uDD16"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV2("span", {
+                className: "text-sm font-semibold",
+                children: "Evolution"
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV2("div", {
+            className: "flex items-center gap-1",
+            children: [
+              onOpenEvolution && /* @__PURE__ */ jsxDEV2(Button2, {
+                variant: "ghost",
+                size: "sm",
+                onPress: onOpenEvolution,
+                children: "Expand"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV2("button", {
+                onClick: onToggle,
+                className: "text-muted-foreground hover:text-foreground p-1",
+                type: "button",
+                title: "Collapse",
+                children: "✕"
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV2("div", {
+        className: "max-h-96 overflow-y-auto p-3",
+        children: [
+          /* @__PURE__ */ jsxDEV2("div", {
+            className: "mb-3 flex items-center justify-between text-xs",
+            children: [
+              /* @__PURE__ */ jsxDEV2("span", {
+                className: "text-muted-foreground",
+                children: [
+                  operationCount,
+                  " ops tracked"
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV2("div", {
+                className: "flex items-center gap-2",
+                children: [
+                  anomalies.length > 0 && /* @__PURE__ */ jsxDEV2(Badge2, {
+                    variant: "destructive",
+                    children: [
+                      anomalies.length,
+                      " anomalies"
+                    ]
+                  }, undefined, true, undefined, this),
+                  pendingSuggestions.length > 0 && /* @__PURE__ */ jsxDEV2(Badge2, {
+                    variant: "secondary",
+                    className: "border-amber-500/30 bg-amber-500/20 text-amber-400",
+                    children: [
+                      pendingSuggestions.length,
+                      " pending"
+                    ]
+                  }, undefined, true, undefined, this)
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          loading && /* @__PURE__ */ jsxDEV2("div", {
+            className: "text-muted-foreground py-4 text-center text-sm",
+            children: "Generating suggestions..."
+          }, undefined, false, undefined, this),
+          topAnomalies.length > 0 && /* @__PURE__ */ jsxDEV2("div", {
+            className: "mb-4",
+            children: [
+              /* @__PURE__ */ jsxDEV2("p", {
+                className: "mb-2 text-xs font-semibold text-violet-400 uppercase",
+                children: "Top Issues"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV2("div", {
+                className: "space-y-2",
+                children: topAnomalies.map((anomaly, index) => /* @__PURE__ */ jsxDEV2("div", {
+                  className: "rounded border border-amber-500/20 bg-amber-500/5 p-2 text-xs",
+                  children: [
+                    /* @__PURE__ */ jsxDEV2("div", {
+                      className: "flex items-center gap-2",
+                      children: [
+                        /* @__PURE__ */ jsxDEV2("span", {
+                          children: anomaly.severity === "high" ? "\uD83D\uDD34" : anomaly.severity === "medium" ? "\uD83D\uDFE0" : "\uD83D\uDFE1"
+                        }, undefined, false, undefined, this),
+                        /* @__PURE__ */ jsxDEV2("span", {
+                          className: "truncate font-medium",
+                          children: anomaly.operation.name
+                        }, undefined, false, undefined, this)
+                      ]
+                    }, undefined, true, undefined, this),
+                    /* @__PURE__ */ jsxDEV2("p", {
+                      className: "text-muted-foreground mt-1 truncate",
+                      children: anomaly.description
+                    }, undefined, false, undefined, this)
+                  ]
+                }, `${anomaly.operation.name}-${index}`, true, undefined, this))
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          pendingSuggestions.length > 0 && /* @__PURE__ */ jsxDEV2("div", {
+            children: [
+              /* @__PURE__ */ jsxDEV2("p", {
+                className: "mb-2 text-xs font-semibold text-violet-400 uppercase",
+                children: "Pending Suggestions"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV2("div", {
+                className: "space-y-2",
+                children: [
+                  pendingSuggestions.slice(0, 3).map((suggestion) => /* @__PURE__ */ jsxDEV2(CompactSuggestionCard, {
+                    suggestion,
+                    onApprove: handleApprove,
+                    onReject: handleReject
+                  }, suggestion.id, false, undefined, this)),
+                  pendingSuggestions.length > 3 && /* @__PURE__ */ jsxDEV2("p", {
+                    className: "text-muted-foreground text-center text-xs",
+                    children: [
+                      "+",
+                      pendingSuggestions.length - 3,
+                      " more suggestions"
+                    ]
+                  }, undefined, true, undefined, this)
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          anomalies.length === 0 && pendingSuggestions.length === 0 && !loading && /* @__PURE__ */ jsxDEV2("div", {
+            className: "text-muted-foreground py-4 text-center text-xs",
+            children: "No issues detected. Keep coding!"
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      onOpenEvolution && /* @__PURE__ */ jsxDEV2("div", {
+        className: "border-t border-violet-500/20 p-2",
+        children: /* @__PURE__ */ jsxDEV2(Button2, {
+          variant: "ghost",
+          size: "sm",
+          className: "w-full",
+          onPress: onOpenEvolution,
+          children: "Open Evolution Dashboard →"
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+function CompactSuggestionCard({
+  suggestion,
+  onApprove,
+  onReject
+}) {
+  return /* @__PURE__ */ jsxDEV2("div", {
+    className: "rounded border border-violet-500/20 bg-violet-500/5 p-2",
+    children: [
+      /* @__PURE__ */ jsxDEV2("div", {
+        className: "flex items-start justify-between gap-2",
+        children: /* @__PURE__ */ jsxDEV2("div", {
+          className: "min-w-0 flex-1",
+          children: [
+            /* @__PURE__ */ jsxDEV2("p", {
+              className: "truncate text-xs font-medium",
+              children: suggestion.proposal.summary
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV2("div", {
+              className: "mt-1 flex items-center gap-2 text-xs",
+              children: [
+                /* @__PURE__ */ jsxDEV2(Badge2, {
+                  variant: "secondary",
+                  children: suggestion.priority
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV2("span", {
+                  className: "text-muted-foreground",
+                  children: [
+                    (suggestion.confidence * 100).toFixed(0),
+                    "%"
+                  ]
+                }, undefined, true, undefined, this)
+              ]
+            }, undefined, true, undefined, this)
+          ]
+        }, undefined, true, undefined, this)
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV2("div", {
+        className: "mt-2 flex justify-end gap-1",
+        children: [
+          /* @__PURE__ */ jsxDEV2("button", {
+            onClick: () => onReject(suggestion.id),
+            className: "rounded px-2 py-0.5 text-xs text-red-400 hover:bg-red-400/10",
+            type: "button",
+            children: "Reject"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV2("button", {
+            onClick: () => onApprove(suggestion.id),
+            className: "rounded bg-violet-500/20 px-2 py-0.5 text-xs text-violet-400 hover:bg-violet-500/30",
+            type: "button",
+            children: "Approve"
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/lib/runtime-context.tsx
+import { createContext, useContext } from "react";
+"use client";
+var TemplateRuntimeContext = createContext(null);
+function useTemplateRuntime() {
+  const context = useContext(TemplateRuntimeContext);
+  if (!context) {
+    throw new Error("useTemplateRuntime must be used within a TemplateRuntimeProvider");
+  }
+  return context;
+}
+
+// src/LocalDataIndicator.tsx
+import { RefreshCw, Shield } from "lucide-react";
+import { useState as useState2 } from "react";
+import { jsxDEV as jsxDEV3 } from "react/jsx-dev-runtime";
+"use client";
+function LocalDataIndicator() {
+  const { projectId, templateId, template, installer } = useTemplateRuntime();
+  const [isResetting, setIsResetting] = useState2(false);
+  const handleReset = async () => {
+    setIsResetting(true);
+    try {
+      await installer.install(templateId, { projectId });
+    } finally {
+      setIsResetting(false);
+    }
+  };
+  return /* @__PURE__ */ jsxDEV3("div", {
+    className: "border-border bg-muted/40 text-muted-foreground inline-flex items-center gap-2 rounded-full border px-3 py-1 text-xs",
+    children: [
+      /* @__PURE__ */ jsxDEV3(Shield, {
+        className: "h-3.5 w-3.5 text-violet-400"
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV3("span", {
+        children: [
+          "Local runtime ·",
+          " ",
+          /* @__PURE__ */ jsxDEV3("span", {
+            className: "text-foreground font-semibold",
+            children: template.name
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV3("button", {
+        type: "button",
+        className: "border-border text-muted-foreground hover:text-foreground inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-[11px] font-semibold",
+        onClick: handleReset,
+        disabled: isResetting,
+        children: [
+          /* @__PURE__ */ jsxDEV3(RefreshCw, {
+            className: "h-3 w-3"
+          }, undefined, false, undefined, this),
+          isResetting ? "Resetting…" : "Reset data"
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/MarkdownView.tsx
+import { useCallback as useCallback4, useEffect as useEffect2, useState as useState3 } from "react";
+import {
+  Button as Button3,
+  ErrorState,
+  LoaderBlock as LoaderBlock2
+} from "@contractspec/lib.design-system";
+import { Card as Card3 } from "@contractspec/lib.ui-kit-web/ui/card";
+import { Badge as Badge3 } from "@contractspec/lib.ui-kit-web/ui/badge";
+import { jsxDEV as jsxDEV4 } from "react/jsx-dev-runtime";
+"use client";
+function MarkdownView({
+  templateId: propTemplateId,
+  presentationId,
+  className
+}) {
+  const {
+    engine,
+    template,
+    templateId: contextTemplateId,
+    resolvePresentation,
+    fetchData
+  } = useTemplateRuntime();
+  const templateId = propTemplateId ?? contextTemplateId;
+  const presentations = template?.presentations ?? [];
+  const [selectedPresentation, setSelectedPresentation] = useState3("");
+  const [markdownContent, setMarkdownContent] = useState3("");
+  const [loading, setLoading] = useState3(false);
+  const [error, setError] = useState3(null);
+  useEffect2(() => {
+    if (presentationId && presentations.includes(presentationId)) {
+      setSelectedPresentation(presentationId);
+    } else if (presentations.length > 0 && !selectedPresentation) {
+      setSelectedPresentation(presentations[0] ?? "");
+    }
+  }, [presentationId, presentations, selectedPresentation]);
+  const renderMarkdown = useCallback4(async () => {
+    if (!selectedPresentation || !engine)
+      return;
+    setLoading(true);
+    setError(null);
+    try {
+      if (!resolvePresentation) {
+        throw new Error("resolvePresentation not available in runtime context");
+      }
+      const descriptor = resolvePresentation(selectedPresentation);
+      if (!descriptor) {
+        throw new Error(`Presentation descriptor not found: ${selectedPresentation}`);
+      }
+      const dataResult = await fetchData(selectedPresentation);
+      const result = await engine.render("markdown", descriptor, { data: dataResult.data });
+      setMarkdownContent(result.body);
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error("Failed to render markdown"));
+    } finally {
+      setLoading(false);
+    }
+  }, [
+    selectedPresentation,
+    templateId,
+    engine,
+    resolvePresentation,
+    fetchData
+  ]);
+  useEffect2(() => {
+    renderMarkdown();
+  }, [renderMarkdown]);
+  if (!presentations.length) {
+    return /* @__PURE__ */ jsxDEV4(Card3, {
+      className,
+      children: /* @__PURE__ */ jsxDEV4("div", {
+        className: "p-6 text-center",
+        children: /* @__PURE__ */ jsxDEV4("p", {
+          className: "text-muted-foreground",
+          children: "No presentations available for this template."
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this)
+    }, undefined, false, undefined, this);
+  }
+  const handleCopy = useCallback4(() => {
+    if (markdownContent) {
+      navigator.clipboard.writeText(markdownContent);
+    }
+  }, [markdownContent]);
+  return /* @__PURE__ */ jsxDEV4("div", {
+    className,
+    children: [
+      /* @__PURE__ */ jsxDEV4("div", {
+        className: "mb-4 flex flex-wrap items-center gap-2",
+        children: [
+          /* @__PURE__ */ jsxDEV4("span", {
+            className: "text-muted-foreground text-sm font-medium",
+            children: "Presentation:"
+          }, undefined, false, undefined, this),
+          presentations.map((name) => /* @__PURE__ */ jsxDEV4(Button3, {
+            variant: selectedPresentation === name ? "default" : "outline",
+            size: "sm",
+            onPress: () => setSelectedPresentation(name),
+            children: formatPresentationName(name)
+          }, name, false, undefined, this)),
+          /* @__PURE__ */ jsxDEV4("div", {
+            className: "ml-auto flex items-center gap-2",
+            children: [
+              /* @__PURE__ */ jsxDEV4(Badge3, {
+                variant: "secondary",
+                children: "LLM-friendly"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV4(Button3, {
+                variant: "outline",
+                size: "sm",
+                onPress: handleCopy,
+                disabled: !markdownContent || loading,
+                children: "Copy"
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV4(Card3, {
+        className: "overflow-hidden",
+        children: [
+          loading && /* @__PURE__ */ jsxDEV4(LoaderBlock2, {
+            label: "Rendering markdown..."
+          }, undefined, false, undefined, this),
+          error && /* @__PURE__ */ jsxDEV4(ErrorState, {
+            title: "Render failed",
+            description: error.message,
+            onRetry: renderMarkdown,
+            retryLabel: "Retry"
+          }, undefined, false, undefined, this),
+          !loading && !error && markdownContent && /* @__PURE__ */ jsxDEV4("div", {
+            className: "p-6",
+            children: /* @__PURE__ */ jsxDEV4(MarkdownRenderer, {
+              content: markdownContent
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this),
+          !loading && !error && !markdownContent && /* @__PURE__ */ jsxDEV4("div", {
+            className: "p-6 text-center",
+            children: /* @__PURE__ */ jsxDEV4("p", {
+              className: "text-muted-foreground",
+              children: "Select a presentation to view its markdown output."
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+function MarkdownRenderer({ content }) {
+  const lines = content.split(`
+`);
+  const rendered = [];
+  let i = 0;
+  while (i < lines.length) {
+    const line = lines[i] ?? "";
+    if (line.startsWith("|") && lines[i + 1]?.match(/^\|[\s-|]+\|$/)) {
+      const tableLines = [line];
+      i++;
+      while (i < lines.length && (lines[i]?.startsWith("|") ?? false)) {
+        tableLines.push(lines[i] ?? "");
+        i++;
+      }
+      rendered.push(renderTable(tableLines, rendered.length));
+      continue;
+    }
+    if (line.startsWith("# ")) {
+      rendered.push(/* @__PURE__ */ jsxDEV4("h1", {
+        className: "mb-4 text-2xl font-bold",
+        children: line.slice(2)
+      }, i, false, undefined, this));
+    } else if (line.startsWith("## ")) {
+      rendered.push(/* @__PURE__ */ jsxDEV4("h2", {
+        className: "mt-6 mb-3 text-xl font-semibold",
+        children: line.slice(3)
+      }, i, false, undefined, this));
+    } else if (line.startsWith("### ")) {
+      rendered.push(/* @__PURE__ */ jsxDEV4("h3", {
+        className: "mt-4 mb-2 text-lg font-medium",
+        children: line.slice(4)
+      }, i, false, undefined, this));
+    } else if (line.startsWith("> ")) {
+      rendered.push(/* @__PURE__ */ jsxDEV4("blockquote", {
+        className: "text-muted-foreground my-2 border-l-4 border-violet-500/50 pl-4 italic",
+        children: line.slice(2)
+      }, i, false, undefined, this));
+    } else if (line.startsWith("- ")) {
+      rendered.push(/* @__PURE__ */ jsxDEV4("li", {
+        className: "ml-4 list-disc",
+        children: formatInlineMarkdown(line.slice(2))
+      }, i, false, undefined, this));
+    } else if (line.startsWith("**") && line.includes(":**")) {
+      const [label, ...rest] = line.split(":**");
+      rendered.push(/* @__PURE__ */ jsxDEV4("p", {
+        className: "my-1",
+        children: [
+          /* @__PURE__ */ jsxDEV4("strong", {
+            children: [
+              label?.slice(2),
+              ":"
+            ]
+          }, undefined, true, undefined, this),
+          rest.join(":**")
+        ]
+      }, i, true, undefined, this));
+    } else if (line.startsWith("_") && line.endsWith("_")) {
+      rendered.push(/* @__PURE__ */ jsxDEV4("p", {
+        className: "text-muted-foreground my-1 italic",
+        children: line.slice(1, -1)
+      }, i, false, undefined, this));
+    } else if (!line.trim()) {
+      rendered.push(/* @__PURE__ */ jsxDEV4("div", {
+        className: "h-2"
+      }, i, false, undefined, this));
+    } else {
+      rendered.push(/* @__PURE__ */ jsxDEV4("p", {
+        className: "my-1",
+        children: formatInlineMarkdown(line)
+      }, i, false, undefined, this));
+    }
+    i++;
+  }
+  return /* @__PURE__ */ jsxDEV4("div", {
+    className: "prose prose-sm dark:prose-invert max-w-none",
+    children: rendered
+  }, undefined, false, undefined, this);
+}
+function renderTable(lines, keyPrefix) {
+  if (lines.length < 2)
+    return null;
+  const parseRow = (row) => row.split("|").slice(1, -1).map((cell) => cell.trim());
+  const headers = parseRow(lines[0] ?? "");
+  const dataRows = lines.slice(2).map(parseRow);
+  return /* @__PURE__ */ jsxDEV4("div", {
+    className: "my-4 overflow-x-auto",
+    children: /* @__PURE__ */ jsxDEV4("table", {
+      className: "border-border min-w-full border-collapse border text-sm",
+      children: [
+        /* @__PURE__ */ jsxDEV4("thead", {
+          children: /* @__PURE__ */ jsxDEV4("tr", {
+            className: "bg-muted/50",
+            children: headers.map((header, idx) => /* @__PURE__ */ jsxDEV4("th", {
+              className: "border-border border px-3 py-2 text-left font-semibold",
+              children: header
+            }, idx, false, undefined, this))
+          }, undefined, false, undefined, this)
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsxDEV4("tbody", {
+          children: dataRows.map((row, rowIdx) => /* @__PURE__ */ jsxDEV4("tr", {
+            className: "hover:bg-muted/30",
+            children: row.map((cell, cellIdx) => /* @__PURE__ */ jsxDEV4("td", {
+              className: "border-border border px-3 py-2",
+              children: formatInlineMarkdown(cell)
+            }, cellIdx, false, undefined, this))
+          }, rowIdx, false, undefined, this))
+        }, undefined, false, undefined, this)
+      ]
+    }, undefined, true, undefined, this)
+  }, `table-${keyPrefix}`, false, undefined, this);
+}
+function formatInlineMarkdown(text) {
+  const parts = text.split(/(\*\*[^*]+\*\*)/g);
+  return parts.map((part, i) => {
+    if (part.startsWith("**") && part.endsWith("**")) {
+      return /* @__PURE__ */ jsxDEV4("strong", {
+        children: part.slice(2, -2)
+      }, i, false, undefined, this);
+    }
+    if (part.includes("`")) {
+      const codeParts = part.split(/(`[^`]+`)/g);
+      return codeParts.map((cp, j) => {
+        if (cp.startsWith("`") && cp.endsWith("`")) {
+          return /* @__PURE__ */ jsxDEV4("code", {
+            className: "rounded bg-violet-500/10 px-1.5 py-0.5 font-mono text-sm",
+            children: cp.slice(1, -1)
+          }, `${i}-${j}`, false, undefined, this);
+        }
+        return cp;
+      });
+    }
+    return part;
+  });
+}
+function formatPresentationName(name) {
+  const parts = name.split(".");
+  const lastPart = parts[parts.length - 1] ?? name;
+  return lastPart.split("-").map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join(" ");
+}
+
+// src/OverlayContextProvider.tsx
+import * as React from "react";
+import { useContext as useContext2, useMemo as useMemo4 } from "react";
+import { jsxDEV as jsxDEV5 } from "react/jsx-dev-runtime";
+"use client";
+var OverlayContext = React.createContext(null);
+function OverlayContextProvider({
+  templateId,
+  role = "user",
+  device = "desktop",
+  children
+}) {
+  const overlays = useMemo4(() => getTemplateOverlays(templateId, role), [templateId, role]);
+  const activeOverlays = useMemo4(() => {
+    return overlays.filter((overlay) => {
+      const conditions = overlay.conditions;
+      if (!conditions)
+        return true;
+      if (conditions.role && !conditions.role.includes(role)) {
+        return false;
+      }
+      if (conditions.device && conditions.device !== "any" && conditions.device !== device) {
+        return false;
+      }
+      return true;
+    });
+  }, [overlays, role, device]);
+  const overlayMap = useMemo4(() => {
+    const map = new Map;
+    for (const overlay of activeOverlays) {
+      map.set(overlay.target, overlay);
+    }
+    return map;
+  }, [activeOverlays]);
+  const applyOverlay = useMemo4(() => (path, target) => {
+    const overlay = overlayMap.get(path);
+    if (!overlay)
+      return target;
+    let result = { ...target };
+    for (const mod of overlay.modifications) {
+      switch (mod.op) {
+        case "hide":
+          result = { ...result, hidden: true };
+          break;
+        case "relabel":
+          result = { ...result, label: mod.label };
+          break;
+        case "reorder":
+          result = { ...result, position: mod.position };
+          break;
+        case "restyle":
+          result = {
+            ...result,
+            className: mod.className,
+            variant: mod.variant
+          };
+          break;
+        case "set-default":
+          result = { ...result, defaultValue: mod.value };
+          break;
+      }
+    }
+    return result;
+  }, [overlayMap]);
+  const isHidden = useMemo4(() => (path) => {
+    const overlay = overlayMap.get(path);
+    return overlay?.modifications.some((m) => m.op === "hide") ?? false;
+  }, [overlayMap]);
+  const getLabel = useMemo4(() => (path, defaultLabel) => {
+    const overlay = overlayMap.get(path);
+    const relabel = overlay?.modifications.find((m) => m.op === "relabel");
+    return relabel && relabel.op === "relabel" ? relabel.label : defaultLabel;
+  }, [overlayMap]);
+  const getPosition = useMemo4(() => (path, defaultPosition) => {
+    const overlay = overlayMap.get(path);
+    const reorder = overlay?.modifications.find((m) => m.op === "reorder");
+    return reorder && reorder.op === "reorder" ? reorder.position : defaultPosition;
+  }, [overlayMap]);
+  const getStyle = useMemo4(() => (path) => {
+    const overlay = overlayMap.get(path);
+    const restyle = overlay?.modifications.find((m) => m.op === "restyle");
+    if (restyle && restyle.op === "restyle") {
+      return {
+        className: restyle.className,
+        variant: restyle.variant
+      };
+    }
+    return {};
+  }, [overlayMap]);
+  const getDefault = useMemo4(() => (path, defaultValue) => {
+    const overlay = overlayMap.get(path);
+    const setDefault = overlay?.modifications.find((m) => m.op === "set-default");
+    return setDefault && setDefault.op === "set-default" ? setDefault.value : defaultValue;
+  }, [overlayMap]);
+  const value = useMemo4(() => ({
+    overlays: activeOverlays,
+    applyOverlay,
+    isHidden,
+    getLabel,
+    getPosition,
+    getStyle,
+    getDefault,
+    role,
+    device
+  }), [
+    activeOverlays,
+    applyOverlay,
+    isHidden,
+    getLabel,
+    getPosition,
+    getStyle,
+    getDefault,
+    role,
+    device
+  ]);
+  return /* @__PURE__ */ jsxDEV5(OverlayContext.Provider, {
+    value,
+    children
+  }, undefined, false, undefined, this);
+}
+function useOverlayContext() {
+  const context = useContext2(OverlayContext);
+  if (!context) {
+    throw new Error("useOverlayContext must be used within an OverlayContextProvider");
+  }
+  return context;
+}
+function useIsInOverlayContext() {
+  return useContext2(OverlayContext) !== null;
+}
+function getTemplateOverlays(templateId, _role) {
+  const templateOverlays = {
+    "crm-pipeline": [
+      {
+        id: "crm-hide-internal-fields",
+        target: "deal.internalNotes",
+        modifications: [{ op: "hide" }],
+        conditions: { role: ["viewer", "user"] }
+      },
+      {
+        id: "crm-relabel-value",
+        target: "deal.value",
+        modifications: [{ op: "relabel", label: "Deal Amount" }]
+      }
+    ],
+    "saas-boilerplate": [
+      {
+        id: "saas-hide-billing",
+        target: "settings.billing",
+        modifications: [{ op: "hide" }],
+        conditions: { role: ["viewer"] }
+      },
+      {
+        id: "saas-restyle-plan",
+        target: "settings.plan",
+        modifications: [{ op: "restyle", variant: "premium" }],
+        conditions: { role: ["admin"] }
+      }
+    ],
+    "agent-console": [
+      {
+        id: "agent-hide-cost",
+        target: "run.cost",
+        modifications: [{ op: "hide" }],
+        conditions: { role: ["viewer"] }
+      },
+      {
+        id: "agent-relabel-tokens",
+        target: "run.tokens",
+        modifications: [{ op: "relabel", label: "Token Usage" }]
+      }
+    ],
+    "todos-app": [
+      {
+        id: "todos-hide-assignee",
+        target: "task.assignee",
+        modifications: [{ op: "hide" }],
+        conditions: { device: "mobile" }
+      }
+    ],
+    "messaging-app": [
+      {
+        id: "messaging-reorder-timestamp",
+        target: "message.timestamp",
+        modifications: [{ op: "reorder", position: 0 }]
+      }
+    ],
+    "recipe-app-i18n": [
+      {
+        id: "recipe-relabel-servings",
+        target: "recipe.servings",
+        modifications: [{ op: "relabel", label: "Portions" }]
+      }
+    ]
+  };
+  return templateOverlays[templateId] ?? [];
+}
+
+// src/hooks/useBehaviorTracking.ts
+import { useCallback as useCallback5, useEffect as useEffect3, useMemo as useMemo5, useRef as useRef2, useState as useState4 } from "react";
+"use client";
+var BEHAVIOR_STORAGE_KEY = "contractspec-behavior-data";
+var ALL_FEATURES = [
+  "playground",
+  "specs",
+  "builder",
+  "markdown",
+  "evolution",
+  "canvas_add",
+  "canvas_delete",
+  "spec_save",
+  "spec_validate",
+  "ai_suggestions"
+];
+function useBehaviorTracking(templateId) {
+  const [events, setEvents] = useState4([]);
+  const sessionStartRef = useRef2(new Date);
+  const [eventCount, setEventCount] = useState4(0);
+  useEffect3(() => {
+    try {
+      const stored = localStorage.getItem(BEHAVIOR_STORAGE_KEY);
+      if (stored) {
+        const data = JSON.parse(stored);
+        setEvents(data.events.map((e) => ({
+          ...e,
+          timestamp: new Date(e.timestamp)
+        })));
+        sessionStartRef.current = new Date(data.sessionStart);
+      }
+    } catch {}
+  }, []);
+  useEffect3(() => {
+    if (events.length > 0) {
+      try {
+        localStorage.setItem(BEHAVIOR_STORAGE_KEY, JSON.stringify({
+          events: events.map((e) => ({
+            ...e,
+            timestamp: e.timestamp.toISOString()
+          })),
+          sessionStart: sessionStartRef.current.toISOString()
+        }));
+      } catch {}
+    }
+  }, [events]);
+  const trackEvent = useCallback5((type, metadata) => {
+    const event = {
+      type,
+      timestamp: new Date,
+      templateId,
+      metadata
+    };
+    setEvents((prev) => [...prev, event]);
+    setEventCount((prev) => prev + 1);
+  }, [templateId]);
+  const getEventsByType = useCallback5((type) => {
+    return events.filter((e) => e.type === type);
+  }, [events]);
+  const getSummary = useCallback5(() => {
+    const now = new Date;
+    const sessionDuration = now.getTime() - sessionStartRef.current.getTime();
+    const templateCounts = new Map;
+    for (const event of events) {
+      const count = templateCounts.get(event.templateId) ?? 0;
+      templateCounts.set(event.templateId, count + 1);
+    }
+    const mostUsedTemplates = Array.from(templateCounts.entries()).map(([templateId2, count]) => ({ templateId: templateId2, count })).sort((a, b) => b.count - a.count).slice(0, 3);
+    const modeCounts = new Map;
+    for (const event of events) {
+      if (event.type === "mode_change" && event.metadata?.mode) {
+        const mode = event.metadata.mode;
+        const count = modeCounts.get(mode) ?? 0;
+        modeCounts.set(mode, count + 1);
+      }
+    }
+    const mostUsedModes = Array.from(modeCounts.entries()).map(([mode, count]) => ({ mode, count })).sort((a, b) => b.count - a.count);
+    const featuresUsed = new Set;
+    for (const event of events) {
+      if (event.type === "mode_change" && event.metadata?.mode) {
+        featuresUsed.add(event.metadata.mode);
+      }
+      if (event.type === "feature_usage" && event.metadata?.feature) {
+        featuresUsed.add(event.metadata.feature);
+      }
+      if (event.type === "canvas_interaction") {
+        const action = event.metadata?.action;
+        if (action === "add")
+          featuresUsed.add("canvas_add");
+        if (action === "delete")
+          featuresUsed.add("canvas_delete");
+      }
+      if (event.type === "spec_edit") {
+        const action = event.metadata?.action;
+        if (action === "save")
+          featuresUsed.add("spec_save");
+        if (action === "validate")
+          featuresUsed.add("spec_validate");
+      }
+    }
+    const unusedFeatures = ALL_FEATURES.filter((f) => !featuresUsed.has(f));
+    const errorCount = events.filter((e) => e.type === "error").length;
+    const recommendations = generateRecommendations(Array.from(featuresUsed), unusedFeatures, mostUsedModes, events.length);
+    return {
+      totalEvents: events.length,
+      sessionDuration,
+      mostUsedTemplates,
+      mostUsedModes,
+      featuresUsed: Array.from(featuresUsed),
+      unusedFeatures,
+      errorCount,
+      recommendations
+    };
+  }, [events]);
+  const clear = useCallback5(() => {
+    setEvents([]);
+    setEventCount(0);
+    sessionStartRef.current = new Date;
+    localStorage.removeItem(BEHAVIOR_STORAGE_KEY);
+  }, []);
+  return useMemo5(() => ({
+    trackEvent,
+    getSummary,
+    getEventsByType,
+    eventCount,
+    sessionStart: sessionStartRef.current,
+    clear
+  }), [trackEvent, getSummary, getEventsByType, eventCount, clear]);
+}
+function generateRecommendations(featuresUsed, unusedFeatures, mostUsedModes, totalEvents) {
+  const recommendations = [];
+  if (unusedFeatures.includes("evolution")) {
+    recommendations.push("Try the AI Evolution mode to get automated improvement suggestions");
+  }
+  if (unusedFeatures.includes("markdown")) {
+    recommendations.push("Use Markdown preview to see documentation for your specs");
+  }
+  if (unusedFeatures.includes("builder")) {
+    recommendations.push("Explore the Visual Builder to design your UI components");
+  }
+  if (!featuresUsed.includes("spec_validate") && featuresUsed.includes("specs")) {
+    recommendations.push("Don't forget to validate your specs before saving");
+  }
+  if (featuresUsed.includes("evolution") && !featuresUsed.includes("ai_suggestions")) {
+    recommendations.push("Generate AI suggestions to get actionable improvement recommendations");
+  }
+  if (totalEvents > 50) {
+    recommendations.push("Great engagement! Consider saving your work regularly");
+  }
+  if (mostUsedModes.length === 1) {
+    recommendations.push("Try different modes to explore all sandbox capabilities");
+  }
+  return recommendations;
+}
+
+// src/PersonalizationInsights.tsx
+import { useCallback as useCallback6, useMemo as useMemo6, useState as useState5 } from "react";
+import { Button as Button4 } from "@contractspec/lib.design-system";
+import { Card as Card4 } from "@contractspec/lib.ui-kit-web/ui/card";
+import { Badge as Badge4 } from "@contractspec/lib.ui-kit-web/ui/badge";
+import { jsxDEV as jsxDEV6 } from "react/jsx-dev-runtime";
+"use client";
+function PersonalizationInsights({
+  templateId,
+  collapsed = false,
+  onToggle
+}) {
+  const { getSummary, eventCount, clear, sessionStart } = useBehaviorTracking(templateId);
+  const [showDetails, setShowDetails] = useState5(false);
+  const summary = useMemo6(() => getSummary(), [getSummary]);
+  const formatDuration = useCallback6((ms) => {
+    const seconds = Math.floor(ms / 1000);
+    const minutes = Math.floor(seconds / 60);
+    const hours = Math.floor(minutes / 60);
+    if (hours > 0) {
+      return `${hours}h ${minutes % 60}m`;
+    }
+    if (minutes > 0) {
+      return `${minutes}m ${seconds % 60}s`;
+    }
+    return `${seconds}s`;
+  }, []);
+  const handleClear = useCallback6(() => {
+    clear();
+  }, [clear]);
+  if (collapsed) {
+    return /* @__PURE__ */ jsxDEV6("button", {
+      onClick: onToggle,
+      className: "flex items-center gap-2 rounded-lg border border-blue-500/30 bg-blue-500/10 px-3 py-2 text-sm transition hover:bg-blue-500/20",
+      type: "button",
+      children: [
+        /* @__PURE__ */ jsxDEV6("span", {
+          children: "\uD83D\uDCCA"
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsxDEV6("span", {
+          children: "Insights"
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsxDEV6(Badge4, {
+          variant: "secondary",
+          children: eventCount
+        }, undefined, false, undefined, this)
+      ]
+    }, undefined, true, undefined, this);
+  }
+  return /* @__PURE__ */ jsxDEV6(Card4, {
+    className: "overflow-hidden",
+    children: [
+      /* @__PURE__ */ jsxDEV6("div", {
+        className: "flex items-center justify-between border-b border-blue-500/20 bg-blue-500/5 px-4 py-3",
+        children: [
+          /* @__PURE__ */ jsxDEV6("div", {
+            className: "flex items-center gap-2",
+            children: [
+              /* @__PURE__ */ jsxDEV6("span", {
+                children: "\uD83D\uDCCA"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV6("span", {
+                className: "font-semibold",
+                children: "Personalization Insights"
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV6("div", {
+            className: "flex items-center gap-2",
+            children: [
+              /* @__PURE__ */ jsxDEV6(Button4, {
+                variant: "ghost",
+                size: "sm",
+                onPress: () => setShowDetails(!showDetails),
+                children: showDetails ? "Hide Details" : "Show Details"
+              }, undefined, false, undefined, this),
+              onToggle && /* @__PURE__ */ jsxDEV6("button", {
+                onClick: onToggle,
+                className: "text-muted-foreground hover:text-foreground p-1",
+                type: "button",
+                title: "Collapse",
+                children: "✕"
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV6("div", {
+        className: "p-4",
+        children: [
+          /* @__PURE__ */ jsxDEV6("div", {
+            className: "mb-4 grid grid-cols-2 gap-3 md:grid-cols-4",
+            children: [
+              /* @__PURE__ */ jsxDEV6(StatCard, {
+                label: "Session Time",
+                value: formatDuration(summary.sessionDuration),
+                icon: "⏱️"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV6(StatCard, {
+                label: "Events Tracked",
+                value: summary.totalEvents.toString(),
+                icon: "\uD83D\uDCC8"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV6(StatCard, {
+                label: "Features Used",
+                value: `${summary.featuresUsed.length}/${summary.featuresUsed.length + summary.unusedFeatures.length}`,
+                icon: "✨"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV6(StatCard, {
+                label: "Errors",
+                value: summary.errorCount.toString(),
+                icon: "⚠️",
+                variant: summary.errorCount > 0 ? "warning" : "success"
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          summary.recommendations.length > 0 && /* @__PURE__ */ jsxDEV6("div", {
+            className: "mb-4",
+            children: [
+              /* @__PURE__ */ jsxDEV6("h4", {
+                className: "mb-2 text-xs font-semibold text-blue-400 uppercase",
+                children: "Recommendations"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV6("ul", {
+                className: "space-y-1",
+                children: summary.recommendations.map((rec, index) => /* @__PURE__ */ jsxDEV6("li", {
+                  className: "flex items-start gap-2 text-sm",
+                  children: [
+                    /* @__PURE__ */ jsxDEV6("span", {
+                      className: "text-blue-400",
+                      children: "\uD83D\uDCA1"
+                    }, undefined, false, undefined, this),
+                    /* @__PURE__ */ jsxDEV6("span", {
+                      children: rec
+                    }, undefined, false, undefined, this)
+                  ]
+                }, index, true, undefined, this))
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          summary.unusedFeatures.length > 0 && /* @__PURE__ */ jsxDEV6("div", {
+            className: "mb-4",
+            children: [
+              /* @__PURE__ */ jsxDEV6("h4", {
+                className: "mb-2 text-xs font-semibold text-blue-400 uppercase",
+                children: "Try These Features"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV6("div", {
+                className: "flex flex-wrap gap-2",
+                children: summary.unusedFeatures.slice(0, 5).map((feature) => /* @__PURE__ */ jsxDEV6(Badge4, {
+                  variant: "secondary",
+                  children: formatFeatureName(feature)
+                }, feature, false, undefined, this))
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          showDetails && /* @__PURE__ */ jsxDEV6(DetailedInsights, {
+            summary,
+            sessionStart
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV6("div", {
+            className: "mt-4 flex justify-end border-t border-blue-500/10 pt-4",
+            children: /* @__PURE__ */ jsxDEV6(Button4, {
+              variant: "ghost",
+              size: "sm",
+              onPress: handleClear,
+              children: "Clear Data"
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+function StatCard({
+  label,
+  value,
+  icon,
+  variant = "default"
+}) {
+  const bgColors = {
+    default: "bg-blue-500/5 border-blue-500/20",
+    warning: "bg-amber-500/5 border-amber-500/20",
+    success: "bg-green-500/5 border-green-500/20"
+  };
+  return /* @__PURE__ */ jsxDEV6("div", {
+    className: `rounded-lg border p-3 text-center ${bgColors[variant]}`,
+    children: [
+      /* @__PURE__ */ jsxDEV6("div", {
+        className: "mb-1 text-lg",
+        children: icon
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV6("div", {
+        className: "text-lg font-bold",
+        children: value
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV6("div", {
+        className: "text-muted-foreground text-xs",
+        children: label
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+function DetailedInsights({
+  summary,
+  sessionStart
+}) {
+  return /* @__PURE__ */ jsxDEV6("div", {
+    className: "mt-4 space-y-4 border-t border-blue-500/10 pt-4",
+    children: [
+      summary.mostUsedTemplates.length > 0 && /* @__PURE__ */ jsxDEV6("div", {
+        children: [
+          /* @__PURE__ */ jsxDEV6("h4", {
+            className: "mb-2 text-xs font-semibold text-blue-400 uppercase",
+            children: "Most Used Templates"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV6("div", {
+            className: "space-y-1",
+            children: summary.mostUsedTemplates.map(({ templateId, count }) => /* @__PURE__ */ jsxDEV6("div", {
+              className: "flex items-center justify-between text-sm",
+              children: [
+                /* @__PURE__ */ jsxDEV6("span", {
+                  children: formatTemplateId(templateId)
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV6("span", {
+                  className: "text-muted-foreground",
+                  children: [
+                    count,
+                    " events"
+                  ]
+                }, undefined, true, undefined, this)
+              ]
+            }, templateId, true, undefined, this))
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      summary.mostUsedModes.length > 0 && /* @__PURE__ */ jsxDEV6("div", {
+        children: [
+          /* @__PURE__ */ jsxDEV6("h4", {
+            className: "mb-2 text-xs font-semibold text-blue-400 uppercase",
+            children: "Mode Usage"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV6("div", {
+            className: "space-y-1",
+            children: summary.mostUsedModes.map(({ mode, count }) => /* @__PURE__ */ jsxDEV6("div", {
+              className: "flex items-center justify-between text-sm",
+              children: [
+                /* @__PURE__ */ jsxDEV6("span", {
+                  children: formatFeatureName(mode)
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV6("span", {
+                  className: "text-muted-foreground",
+                  children: [
+                    count,
+                    " switches"
+                  ]
+                }, undefined, true, undefined, this)
+              ]
+            }, mode, true, undefined, this))
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV6("div", {
+        children: [
+          /* @__PURE__ */ jsxDEV6("h4", {
+            className: "mb-2 text-xs font-semibold text-blue-400 uppercase",
+            children: "Features Used"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV6("div", {
+            className: "flex flex-wrap gap-2",
+            children: summary.featuresUsed.map((feature) => /* @__PURE__ */ jsxDEV6(Badge4, {
+              variant: "default",
+              className: "border-green-500/30 bg-green-500/20 text-green-400",
+              children: [
+                "✓ ",
+                formatFeatureName(feature)
+              ]
+            }, feature, true, undefined, this))
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV6("div", {
+        className: "text-muted-foreground text-xs",
+        children: [
+          "Session started: ",
+          sessionStart.toLocaleString()
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+function formatFeatureName(feature) {
+  return feature.replace(/_/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
+}
+function formatTemplateId(id) {
+  return id.replace(/-/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
+}
+
+// src/SaveToStudioButton.tsx
+import { useState as useState6 } from "react";
+import { Sparkles } from "lucide-react";
+import { jsxDEV as jsxDEV7 } from "react/jsx-dev-runtime";
+"use client";
+function SaveToStudioButton({
+  organizationId = "demo-org",
+  projectName,
+  endpoint,
+  token
+}) {
+  const { installer, templateId, template } = useTemplateRuntime();
+  const [status, setStatus] = useState6("idle");
+  const [error, setError] = useState6(null);
+  const handleSave = async () => {
+    setStatus("saving");
+    setError(null);
+    try {
+      await installer.saveToStudio({
+        templateId,
+        projectName: projectName ?? `${template.name} demo`,
+        organizationId,
+        endpoint,
+        token
+      });
+      setStatus("saved");
+      setTimeout(() => setStatus("idle"), 3000);
+    } catch (err) {
+      setStatus("error");
+      setError(err instanceof Error ? err.message : "Unknown error");
+    }
+  };
+  return /* @__PURE__ */ jsxDEV7("div", {
+    className: "flex flex-col items-end gap-1",
+    children: [
+      /* @__PURE__ */ jsxDEV7("button", {
+        type: "button",
+        className: "btn-primary inline-flex items-center gap-2 text-sm",
+        onClick: handleSave,
+        disabled: status === "saving",
+        children: [
+          /* @__PURE__ */ jsxDEV7(Sparkles, {
+            className: "h-4 w-4"
+          }, undefined, false, undefined, this),
+          status === "saving" ? "Publishing…" : "Save to Studio"
+        ]
+      }, undefined, true, undefined, this),
+      status === "error" && error ? /* @__PURE__ */ jsxDEV7("p", {
+        className: "text-destructive text-xs",
+        children: error
+      }, undefined, false, undefined, this) : null,
+      status === "saved" ? /* @__PURE__ */ jsxDEV7("p", {
+        className: "text-xs text-emerald-400",
+        children: "Template sent to Studio."
+      }, undefined, false, undefined, this) : null
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/utils/generateSpecFromTemplate.ts
+function generateSpecFromTemplate(template) {
+  const templateId = template?.id ?? "unknown";
+  if (!template) {
+    return generateDefaultSpec(templateId);
+  }
+  switch (templateId) {
+    case "crm-pipeline":
+      return generateCrmPipelineSpec(template.schema.contracts);
+    case "saas-boilerplate":
+      return generateSaasBoilerplateSpec(template.schema.contracts);
+    case "agent-console":
+      return generateAgentConsoleSpec(template.schema.contracts);
+    case "todos-app":
+      return generateTodosSpec(template.schema.contracts);
+    case "messaging-app":
+      return generateMessagingSpec(template.schema.contracts);
+    case "recipe-app-i18n":
+      return generateRecipeSpec(template.schema.contracts);
+    default:
+      return generateDefaultSpec(templateId);
+  }
+}
+function generateCrmPipelineSpec(contracts) {
+  return `// CRM Pipeline Specs
+// Contracts: ${contracts.join(", ")}
+
+contractSpec("crm.deal.updateStage.v1", {
+  goal: "Move a deal to a different pipeline stage",
+  transport: { gql: { mutation: "updateDealStage" } },
+  io: {
+    input: { 
+      dealId: "string",
+      stageId: "string",
+      notes: "string?"
+    },
+    output: { 
+      deal: {
+        id: "string",
+        stage: "string",
+        probability: "number",
+        value: "number"
+      }
+    }
+  },
+  events: ["deal.stage.changed"],
+  policy: { auth: "user", rbac: "org:sales" }
+});
+
+contractSpec("crm.deal.create.v1", {
+  goal: "Create a new deal in the pipeline",
+  transport: { gql: { mutation: "createDeal" } },
+  io: {
+    input: { 
+      title: "string",
+      value: "number",
+      contactId: "string",
+      stageId: "string",
+      ownerId: "string?"
+    },
+    output: { 
+      deal: {
+        id: "string",
+        title: "string",
+        value: "number",
+        stage: "string",
+        createdAt: "ISO8601"
+      }
+    }
+  },
+  events: ["deal.created"]
+});
+
+contractSpec("crm.contact.list.v1", {
+  goal: "List contacts with filtering and pagination",
+  transport: { gql: { query: "listContacts" } },
+  io: {
+    input: { 
+      filter: {
+        search: "string?",
+        companyId: "string?",
+        tags: "string[]?"
+      },
+      pagination: {
+        page: "number",
+        limit: "number"
+      }
+    },
+    output: { 
+      contacts: "array<Contact>",
+      total: "number",
+      hasMore: "boolean"
+    }
+  }
+});`;
+}
+function generateSaasBoilerplateSpec(contracts) {
+  return `// SaaS Boilerplate Specs
+// Contracts: ${contracts.join(", ")}
+
+contractSpec("saas.project.create.v1", {
+  goal: "Create a new project in an organization",
+  transport: { gql: { mutation: "createProject" } },
+  io: {
+    input: { 
+      orgId: "string",
+      name: "string",
+      description: "string?"
+    },
+    output: { 
+      project: {
+        id: "string",
+        name: "string",
+        description: "string?",
+        createdAt: "ISO8601"
+      }
+    }
+  },
+  policy: { auth: "user", rbac: "org:member" }
+});
+
+contractSpec("saas.billing.recordUsage.v1", {
+  goal: "Record usage for billing purposes",
+  transport: { gql: { mutation: "recordUsage" } },
+  io: {
+    input: { 
+      orgId: "string",
+      metric: "enum<'api_calls'|'storage_gb'|'seats'>",
+      quantity: "number",
+      timestamp: "ISO8601?"
+    },
+    output: { 
+      usage: {
+        id: "string",
+        metric: "string",
+        quantity: "number",
+        recordedAt: "ISO8601"
+      }
+    }
+  },
+  events: ["billing.usage.recorded"]
+});
+
+contractSpec("saas.settings.update.v1", {
+  goal: "Update organization or user settings",
+  transport: { gql: { mutation: "updateSettings" } },
+  io: {
+    input: { 
+      scope: "enum<'org'|'user'>",
+      targetId: "string",
+      settings: "Record<string, unknown>"
+    },
+    output: { 
+      settings: {
+        scope: "string",
+        values: "Record<string, unknown>",
+        updatedAt: "ISO8601"
+      }
+    }
+  },
+  events: ["settings.updated"]
+});`;
+}
+function generateAgentConsoleSpec(contracts) {
+  return `// Agent Console Specs
+// Contracts: ${contracts.join(", ")}
+
+contractSpec("agent.run.execute.v1", {
+  goal: "Execute an agent run with specified tools",
+  transport: { gql: { mutation: "executeAgentRun" } },
+  io: {
+    input: { 
+      agentId: "string",
+      input: "string",
+      tools: "string[]?",
+      maxSteps: "number?"
+    },
+    output: { 
+      runId: "string",
+      status: "enum<'running'|'completed'|'failed'>",
+      steps: "number"
+    }
+  },
+  events: ["run.started", "run.completed", "run.failed"]
+});
+
+contractSpec("agent.tool.create.v1", {
+  goal: "Register a new tool in the tool registry",
+  transport: { gql: { mutation: "createTool" } },
+  io: {
+    input: { 
+      name: "string",
+      description: "string",
+      category: "enum<'code'|'data'|'api'|'file'|'custom'>",
+      schema: "JSONSchema",
+      handler: "string"
+    },
+    output: { 
+      tool: {
+        id: "string",
+        name: "string",
+        category: "string",
+        createdAt: "ISO8601"
+      }
+    }
+  },
+  events: ["tool.created"]
+});
+
+contractSpec("agent.agent.create.v1", {
+  goal: "Create a new AI agent configuration",
+  transport: { gql: { mutation: "createAgent" } },
+  io: {
+    input: { 
+      name: "string",
+      description: "string",
+      model: "string",
+      systemPrompt: "string?",
+      tools: "string[]?"
+    },
+    output: { 
+      agent: {
+        id: "string",
+        name: "string",
+        model: "string",
+        toolCount: "number",
+        createdAt: "ISO8601"
+      }
+    }
+  },
+  events: ["agent.created"]
+});`;
+}
+function generateTodosSpec(contracts) {
+  return `// To-dos App Specs
+// Contracts: ${contracts.join(", ")}
+
+contractSpec("tasks.board.v1", {
+  goal: "Assign and approve craft work",
+  transport: { gql: { field: "tasksBoard" } },
+  io: {
+    input: { 
+      tenantId: "string", 
+      assignee: "string?",
+      status: "enum<'pending'|'in_progress'|'completed'>?"
+    },
+    output: { 
+      tasks: "array<Task>",
+      summary: {
+        total: "number",
+        completed: "number",
+        overdue: "number"
+      }
+    }
+  }
+});
+
+contractSpec("tasks.create.v1", {
+  goal: "Create a new task",
+  transport: { gql: { mutation: "createTask" } },
+  io: {
+    input: { 
+      title: "string",
+      description: "string?",
+      assignee: "string?",
+      priority: "enum<'low'|'medium'|'high'>",
+      dueDate: "ISO8601?"
+    },
+    output: { 
+      task: {
+        id: "string",
+        title: "string",
+        status: "string",
+        createdAt: "ISO8601"
+      }
+    }
+  },
+  events: ["task.created"]
+});
+
+contractSpec("tasks.complete.v1", {
+  goal: "Mark a task as completed",
+  transport: { gql: { mutation: "completeTask" } },
+  io: {
+    input: { taskId: "string" },
+    output: { 
+      task: {
+        id: "string",
+        status: "string",
+        completedAt: "ISO8601"
+      }
+    }
+  },
+  events: ["task.completed"]
+});`;
+}
+function generateMessagingSpec(contracts) {
+  return `// Messaging App Specs
+// Contracts: ${contracts.join(", ")}
+
+contractSpec("messaging.send.v1", {
+  goal: "Deliver intent-rich updates",
+  io: {
+    input: { 
+      conversationId: "string", 
+      body: "richtext",
+      attachments: "array<Attachment>?"
+    },
+    output: { 
+      messageId: "string", 
+      deliveredAt: "ISO8601"
+    }
+  },
+  events: ["message.sent", "message.delivered"]
+});
+
+contractSpec("messaging.conversation.create.v1", {
+  goal: "Start a new conversation",
+  transport: { gql: { mutation: "createConversation" } },
+  io: {
+    input: { 
+      participants: "string[]",
+      title: "string?",
+      type: "enum<'direct'|'group'>"
+    },
+    output: { 
+      conversation: {
+        id: "string",
+        title: "string?",
+        participantCount: "number",
+        createdAt: "ISO8601"
+      }
+    }
+  },
+  events: ["conversation.created"]
+});
+
+contractSpec("messaging.read.v1", {
+  goal: "Mark messages as read",
+  transport: { gql: { mutation: "markRead" } },
+  io: {
+    input: { 
+      conversationId: "string",
+      messageIds: "string[]"
+    },
+    output: { 
+      readCount: "number",
+      readAt: "ISO8601"
+    }
+  },
+  events: ["message.read"]
+});`;
+}
+function generateRecipeSpec(contracts) {
+  return `// Recipe App (i18n) Specs
+// Contracts: ${contracts.join(", ")}
+
+contractSpec("recipes.lookup.v1", {
+  goal: "Serve bilingual rituals",
+  io: {
+    input: { 
+      locale: "enum<'EN'|'FR'>", 
+      slug: "string" 
+    },
+    output: { 
+      title: "string", 
+      content: "markdown",
+      ingredients: "array<Ingredient>",
+      instructions: "array<Instruction>"
+    }
+  }
+});
+
+contractSpec("recipes.list.v1", {
+  goal: "Browse recipes with filtering",
+  transport: { gql: { query: "listRecipes" } },
+  io: {
+    input: { 
+      locale: "enum<'EN'|'FR'>",
+      category: "string?",
+      search: "string?",
+      favorites: "boolean?"
+    },
+    output: { 
+      recipes: "array<RecipeSummary>",
+      categories: "array<Category>",
+      total: "number"
+    }
+  }
+});
+
+contractSpec("recipes.favorite.toggle.v1", {
+  goal: "Toggle recipe favorite status",
+  transport: { gql: { mutation: "toggleFavorite" } },
+  io: {
+    input: { recipeId: "string" },
+    output: { 
+      isFavorite: "boolean",
+      totalFavorites: "number"
+    }
+  },
+  events: ["recipe.favorited", "recipe.unfavorited"]
+});`;
+}
+function generateDefaultSpec(templateId) {
+  return `// ${templateId} Specs
+
+contractSpec("${templateId}.main.v1", {
+  goal: "Main operation for ${templateId}",
+  transport: { gql: { query: "main" } },
+  io: {
+    input: { 
+      id: "string"
+    },
+    output: { 
+      result: "unknown"
+    }
+  }
+});`;
+}
+
+// src/hooks/useSpecContent.ts
+import { useCallback as useCallback7, useEffect as useEffect4, useState as useState7 } from "react";
+"use client";
+var SPEC_STORAGE_KEY = "contractspec-spec-content";
+function useSpecContent(templateId) {
+  const { template } = useTemplateRuntime();
+  const [content, setContentState] = useState7("");
+  const [savedContent, setSavedContent] = useState7("");
+  const [loading, setLoading] = useState7(true);
+  const [validation, setValidation] = useState7(null);
+  const [lastSaved, setLastSaved] = useState7(null);
+  useEffect4(() => {
+    setLoading(true);
+    try {
+      const stored = localStorage.getItem(`${SPEC_STORAGE_KEY}-${templateId}`);
+      if (stored) {
+        const parsed = JSON.parse(stored);
+        if (parsed.content) {
+          setContentState(parsed.content);
+          setSavedContent(parsed.content);
+          setLastSaved(parsed.savedAt);
+        } else {
+          const generated = generateSpecFromTemplate(template);
+          setContentState(generated);
+          setSavedContent(generated);
+        }
+      } else {
+        const generated = generateSpecFromTemplate(template);
+        setContentState(generated);
+        setSavedContent(generated);
+      }
+    } catch {
+      const generated = generateSpecFromTemplate(template);
+      setContentState(generated);
+      setSavedContent(generated);
+    }
+    setLoading(false);
+  }, [templateId]);
+  const setContent = useCallback7((newContent) => {
+    setContentState(newContent);
+    setValidation(null);
+  }, []);
+  const save = useCallback7(() => {
+    try {
+      const savedAt = new Date().toISOString();
+      localStorage.setItem(`${SPEC_STORAGE_KEY}-${templateId}`, JSON.stringify({
+        content,
+        savedAt
+      }));
+      setSavedContent(content);
+      setLastSaved(savedAt);
+    } catch {}
+  }, [content, templateId]);
+  const validate = useCallback7(() => {
+    const errors = [];
+    const lines = content.split(`
+`);
+    if (!content.includes("contractSpec(")) {
+      errors.push({
+        line: 1,
+        message: "Spec must contain a contractSpec() definition",
+        severity: "error"
+      });
+    }
+    if (!content.includes("goal:")) {
+      errors.push({
+        line: 1,
+        message: "Spec should have a goal field",
+        severity: "warning"
+      });
+    }
+    if (!content.includes("io:")) {
+      errors.push({
+        line: 1,
+        message: "Spec should define io (input/output)",
+        severity: "warning"
+      });
+    }
+    const openBraces = (content.match(/{/g) ?? []).length;
+    const closeBraces = (content.match(/}/g) ?? []).length;
+    if (openBraces !== closeBraces) {
+      errors.push({
+        line: lines.length,
+        message: `Unbalanced braces: ${openBraces} opening, ${closeBraces} closing`,
+        severity: "error"
+      });
+    }
+    const openParens = (content.match(/\(/g) ?? []).length;
+    const closeParens = (content.match(/\)/g) ?? []).length;
+    if (openParens !== closeParens) {
+      errors.push({
+        line: lines.length,
+        message: `Unbalanced parentheses: ${openParens} opening, ${closeParens} closing`,
+        severity: "error"
+      });
+    }
+    lines.forEach((line, index) => {
+      const singleQuotes = (line.match(/'/g) ?? []).length;
+      const doubleQuotes = (line.match(/"/g) ?? []).length;
+      if (singleQuotes % 2 !== 0) {
+        errors.push({
+          line: index + 1,
+          message: "Unclosed single quote",
+          severity: "error"
+        });
+      }
+      if (doubleQuotes % 2 !== 0) {
+        errors.push({
+          line: index + 1,
+          message: "Unclosed double quote",
+          severity: "error"
+        });
+      }
+    });
+    const result = {
+      valid: errors.filter((e) => e.severity === "error").length === 0,
+      errors
+    };
+    setValidation(result);
+    return result;
+  }, [content]);
+  const reset = useCallback7(() => {
+    const generated = generateSpecFromTemplate(template);
+    setContentState(generated);
+    setSavedContent(generated);
+    setValidation(null);
+    setLastSaved(null);
+    try {
+      localStorage.removeItem(`${SPEC_STORAGE_KEY}-${templateId}`);
+    } catch {}
+  }, [templateId]);
+  return {
+    content,
+    loading,
+    isDirty: content !== savedContent,
+    validation,
+    setContent,
+    save,
+    validate,
+    reset,
+    lastSaved
+  };
+}
+
+// src/SpecEditorPanel.tsx
+import { useCallback as useCallback8, useEffect as useEffect5 } from "react";
+import { Button as Button5, LoaderBlock as LoaderBlock3 } from "@contractspec/lib.design-system";
+import { Badge as Badge5 } from "@contractspec/lib.ui-kit-web/ui/badge";
+import { jsxDEV as jsxDEV8 } from "react/jsx-dev-runtime";
+"use client";
+function SpecEditorPanel({
+  templateId,
+  SpecEditor,
+  onLog
+}) {
+  const {
+    content,
+    loading,
+    isDirty,
+    validation,
+    setContent,
+    save,
+    validate,
+    reset,
+    lastSaved
+  } = useSpecContent(templateId);
+  useEffect5(() => {
+    if (!loading && content) {
+      onLog?.(`Spec loaded for ${templateId}`);
+    }
+  }, [loading, content, templateId, onLog]);
+  const handleSave = useCallback8(() => {
+    save();
+    onLog?.("Spec saved locally");
+  }, [save, onLog]);
+  const handleValidate = useCallback8(() => {
+    const result = validate();
+    if (result.valid) {
+      onLog?.("Spec validation passed");
+    } else {
+      const errorCount = result.errors.filter((e) => e.severity === "error").length;
+      const warnCount = result.errors.filter((e) => e.severity === "warning").length;
+      onLog?.(`Spec validation: ${errorCount} errors, ${warnCount} warnings`);
+    }
+  }, [validate, onLog]);
+  const handleReset = useCallback8(() => {
+    reset();
+    onLog?.("Spec reset to template defaults");
+  }, [reset, onLog]);
+  if (loading) {
+    return /* @__PURE__ */ jsxDEV8(LoaderBlock3, {
+      label: "Loading spec..."
+    }, undefined, false, undefined, this);
+  }
+  return /* @__PURE__ */ jsxDEV8("div", {
+    className: "space-y-4",
+    children: [
+      /* @__PURE__ */ jsxDEV8("div", {
+        className: "flex items-center justify-between",
+        children: [
+          /* @__PURE__ */ jsxDEV8("div", {
+            className: "flex items-center gap-2",
+            children: [
+              /* @__PURE__ */ jsxDEV8(Button5, {
+                variant: "default",
+                size: "sm",
+                onClick: handleSave,
+                children: "Save"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV8(Button5, {
+                variant: "outline",
+                size: "sm",
+                onClick: handleValidate,
+                children: "Validate"
+              }, undefined, false, undefined, this),
+              isDirty && /* @__PURE__ */ jsxDEV8(Badge5, {
+                variant: "secondary",
+                className: "border-amber-500/30 bg-amber-500/20 text-amber-400",
+                children: "Unsaved changes"
+              }, undefined, false, undefined, this),
+              validation && /* @__PURE__ */ jsxDEV8(Badge5, {
+                variant: validation.valid ? "default" : "destructive",
+                className: validation.valid ? "border-green-500/30 bg-green-500/20 text-green-400" : "",
+                children: validation.valid ? "Valid" : `${validation.errors.filter((e) => e.severity === "error").length} errors`
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV8("div", {
+            className: "flex items-center gap-2",
+            children: [
+              lastSaved && /* @__PURE__ */ jsxDEV8("span", {
+                className: "text-muted-foreground text-xs",
+                children: [
+                  "Last saved: ",
+                  new Date(lastSaved).toLocaleTimeString()
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV8(Button5, {
+                variant: "ghost",
+                size: "sm",
+                onPress: handleReset,
+                children: "Reset"
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      validation && validation.errors.length > 0 && /* @__PURE__ */ jsxDEV8("div", {
+        className: "rounded-lg border border-amber-500/50 bg-amber-500/10 p-3",
+        children: [
+          /* @__PURE__ */ jsxDEV8("p", {
+            className: "mb-2 text-xs font-semibold text-amber-400 uppercase",
+            children: "Validation Issues"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV8("ul", {
+            className: "space-y-1",
+            children: validation.errors.map((error, index) => /* @__PURE__ */ jsxDEV8("li", {
+              className: `text-xs ${error.severity === "error" ? "text-red-400" : "text-amber-400"}`,
+              children: [
+                "Line ",
+                error.line,
+                ": ",
+                error.message
+              ]
+            }, `${error.line}-${error.message}-${index}`, true, undefined, this))
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV8("div", {
+        className: "border-border bg-card rounded-2xl border p-4",
+        children: /* @__PURE__ */ jsxDEV8(SpecEditor, {
+          projectId: "sandbox",
+          type: "CAPABILITY",
+          content,
+          onChange: setContent,
+          metadata: { template: templateId },
+          onSave: handleSave,
+          onValidate: handleValidate
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/TemplateShell.tsx
+import { jsxDEV as jsxDEV9 } from "react/jsx-dev-runtime";
+var TemplateShell = ({
+  title,
+  description,
+  sidebar,
+  actions,
+  showSaveAction = true,
+  saveProps,
+  children
+}) => /* @__PURE__ */ jsxDEV9("div", {
+  className: "space-y-6",
+  children: [
+    /* @__PURE__ */ jsxDEV9("header", {
+      className: "border-border bg-card rounded-2xl border p-6 shadow-sm",
+      children: [
+        /* @__PURE__ */ jsxDEV9("div", {
+          className: "flex flex-wrap items-center justify-between gap-4",
+          children: [
+            /* @__PURE__ */ jsxDEV9("div", {
+              children: [
+                /* @__PURE__ */ jsxDEV9("p", {
+                  className: "text-muted-foreground text-sm font-semibold tracking-wide uppercase",
+                  children: "ContractSpec Templates"
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV9("h1", {
+                  className: "text-3xl font-bold",
+                  children: title
+                }, undefined, false, undefined, this),
+                description ? /* @__PURE__ */ jsxDEV9("p", {
+                  className: "text-muted-foreground mt-2 max-w-2xl text-sm",
+                  children: description
+                }, undefined, false, undefined, this) : null
+              ]
+            }, undefined, true, undefined, this),
+            /* @__PURE__ */ jsxDEV9("div", {
+              className: "flex flex-col items-end gap-2",
+              children: [
+                /* @__PURE__ */ jsxDEV9(LocalDataIndicator, {}, undefined, false, undefined, this),
+                showSaveAction ? /* @__PURE__ */ jsxDEV9(SaveToStudioButton, {
+                  ...saveProps
+                }, undefined, false, undefined, this) : null
+              ]
+            }, undefined, true, undefined, this)
+          ]
+        }, undefined, true, undefined, this),
+        actions ? /* @__PURE__ */ jsxDEV9("div", {
+          className: "mt-4",
+          children: actions
+        }, undefined, false, undefined, this) : null
+      ]
+    }, undefined, true, undefined, this),
+    /* @__PURE__ */ jsxDEV9("div", {
+      className: sidebar ? "grid gap-6 lg:grid-cols-[minmax(0,1fr)_320px]" : "w-full",
+      children: [
+        /* @__PURE__ */ jsxDEV9("main", {
+          className: "space-y-4 p-2",
+          children
+        }, undefined, false, undefined, this),
+        sidebar ? /* @__PURE__ */ jsxDEV9("aside", {
+          className: "border-border bg-card rounded-2xl border p-4",
+          children: sidebar
+        }, undefined, false, undefined, this) : null
+      ]
+    }, undefined, true, undefined, this)
+  ]
+}, undefined, true, undefined, this);
+
+// src/hooks/useWorkflowComposer.ts
+import { useCallback as useCallback9, useEffect as useEffect6, useMemo as useMemo7, useState as useState8 } from "react";
+"use client";
+function useWorkflowComposer(templateId) {
+  const [selectedWorkflow, setSelectedWorkflow] = useState8(null);
+  const [extensions, setExtensions] = useState8([]);
+  const [loading, _setLoading] = useState8(false);
+  const [error, _setError] = useState8(null);
+  const baseWorkflows = useMemo7(() => getTemplateWorkflows(templateId), [templateId]);
+  useEffect6(() => {
+    const firstWorkflow = baseWorkflows[0];
+    if (baseWorkflows.length > 0 && !selectedWorkflow && firstWorkflow) {
+      setSelectedWorkflow(firstWorkflow.meta.key);
+    }
+  }, [baseWorkflows, selectedWorkflow]);
+  const currentBase = useMemo7(() => {
+    return baseWorkflows.find((w) => w.meta.key === selectedWorkflow) ?? null;
+  }, [baseWorkflows, selectedWorkflow]);
+  const compose = useCallback9((scope) => {
+    if (!currentBase)
+      return null;
+    const applicableExtensions = extensions.filter((ext) => ext.workflow === currentBase.meta.key).filter((ext) => matchesScope(ext, scope)).sort((a, b) => (a.priority ?? 0) - (b.priority ?? 0));
+    if (applicableExtensions.length === 0) {
+      return currentBase;
+    }
+    let composedWorkflow = { ...currentBase, steps: [...currentBase.steps] };
+    for (const extension of applicableExtensions) {
+      composedWorkflow = applyExtension(composedWorkflow, extension);
+    }
+    return composedWorkflow;
+  }, [currentBase, extensions]);
+  const workflow = useMemo7(() => compose(), [compose]);
+  const selectWorkflow = useCallback9((workflowName) => {
+    setSelectedWorkflow(workflowName);
+  }, []);
+  const addExtension = useCallback9((extension) => {
+    setExtensions((prev) => [...prev, extension]);
+  }, []);
+  const removeExtension = useCallback9((workflowName, index) => {
+    setExtensions((prev) => {
+      const forWorkflow = prev.filter((e) => e.workflow === workflowName);
+      const others = prev.filter((e) => e.workflow !== workflowName);
+      forWorkflow.splice(index, 1);
+      return [...others, ...forWorkflow];
+    });
+  }, []);
+  const generateSpecCode = useCallback9(() => {
+    const composed = workflow;
+    if (!composed) {
+      return "// No workflow selected";
+    }
+    const stepsCode = composed.steps.map((step) => `    {
+      id: '${step.id}',
+      name: '${step.name}',
+      type: '${step.type}',${step.description ? `
+      description: '${step.description}',` : ""}${step.next ? `
+      next: ${JSON.stringify(step.next)},` : ""}${step.condition ? `
+      condition: '${step.condition}',` : ""}${step.timeout ? `
+      timeout: ${step.timeout},` : ""}${step.retries ? `
+      retries: ${step.retries},` : ""}${step.onError ? `
+      onError: '${step.onError}',` : ""}
+    }`).join(`,
+`);
+    const extensionsCode = extensions.length > 0 ? `
+
+// Extensions applied:
+${extensions.map((ext) => `// - ${ext.workflow} (priority: ${ext.priority ?? 0})${ext.customSteps?.length ? ` +${ext.customSteps.length} steps` : ""}${ext.hiddenSteps?.length ? ` -${ext.hiddenSteps.length} hidden` : ""}`).join(`
+`)}` : "";
+    return `// Workflow Spec: ${composed.meta.key} v${composed.meta.version}
+// Generated from ${templateId} template
+${extensionsCode}
+
+import { workflowSpec } from '@contractspec/lib.contracts/workflow';
+
+export const ${toCamelCase(composed.meta.key)}Workflow = workflowSpec({
+  meta: {
+    key: '${composed.meta.key}',
+    version: ${composed.meta.version},${composed.meta.description ? `
+    description: '${composed.meta.description}',` : ""}
+  },
+  start: '${composed.start}',
+  steps: [
+${stepsCode}
+  ],${composed.context ? `
+  context: ${JSON.stringify(composed.context, null, 2)},` : ""}
+});
+`;
+  }, [workflow, extensions, templateId]);
+  return {
+    workflow,
+    baseWorkflows,
+    extensions,
+    selectWorkflow,
+    addExtension,
+    removeExtension,
+    compose,
+    generateSpecCode,
+    loading,
+    error
+  };
+}
+function matchesScope(extension, scope) {
+  if (!scope)
+    return true;
+  if (extension.tenantId && extension.tenantId !== scope.tenantId) {
+    return false;
+  }
+  if (extension.role && extension.role !== scope.role) {
+    return false;
+  }
+  if (extension.device && extension.device !== scope.device) {
+    return false;
+  }
+  return true;
+}
+function applyExtension(workflow, extension) {
+  let steps = [...workflow.steps];
+  if (extension.hiddenSteps) {
+    steps = steps.filter((s) => !extension.hiddenSteps?.includes(s.id));
+  }
+  if (extension.customSteps) {
+    for (const injection of extension.customSteps) {
+      const stepToInject = {
+        ...injection.inject,
+        id: injection.id ?? injection.inject.id
+      };
+      if (injection.after) {
+        const afterIndex = steps.findIndex((s) => s.id === injection.after);
+        if (afterIndex !== -1) {
+          steps.splice(afterIndex + 1, 0, stepToInject);
+        }
+      } else if (injection.before) {
+        const beforeIndex = steps.findIndex((s) => s.id === injection.before);
+        if (beforeIndex !== -1) {
+          steps.splice(beforeIndex, 0, stepToInject);
+        }
+      } else {
+        steps.push(stepToInject);
+      }
+    }
+  }
+  return { ...workflow, steps };
+}
+function toCamelCase(str) {
+  return str.replace(/[^a-zA-Z0-9]+(.)/g, (_, c) => c.toUpperCase()).replace(/^./, (c) => c.toLowerCase());
+}
+function getTemplateWorkflows(templateId) {
+  const templateWorkflows = {
+    "crm-pipeline": [
+      {
+        meta: {
+          key: "deal.qualification",
+          version: "1.0.0",
+          description: "Deal qualification workflow"
+        },
+        start: "lead-received",
+        steps: [
+          {
+            id: "lead-received",
+            name: "Lead Received",
+            type: "action",
+            description: "New lead enters the pipeline",
+            next: "qualify-lead"
+          },
+          {
+            id: "qualify-lead",
+            name: "Qualify Lead",
+            type: "decision",
+            description: "Determine if lead meets qualification criteria",
+            next: ["qualified", "disqualified"],
+            condition: "lead.score >= threshold"
+          },
+          {
+            id: "qualified",
+            name: "Lead Qualified",
+            type: "action",
+            next: "assign-rep"
+          },
+          {
+            id: "disqualified",
+            name: "Lead Disqualified",
+            type: "end"
+          },
+          {
+            id: "assign-rep",
+            name: "Assign Sales Rep",
+            type: "action",
+            next: "complete"
+          },
+          {
+            id: "complete",
+            name: "Workflow Complete",
+            type: "end"
+          }
+        ]
+      },
+      {
+        meta: {
+          key: "deal.closing",
+          version: "1.0.0",
+          description: "Deal closing workflow"
+        },
+        start: "proposal-sent",
+        steps: [
+          {
+            id: "proposal-sent",
+            name: "Proposal Sent",
+            type: "action",
+            next: "wait-response"
+          },
+          {
+            id: "wait-response",
+            name: "Wait for Response",
+            type: "wait",
+            timeout: 604800000,
+            next: "negotiate",
+            onError: "follow-up"
+          },
+          {
+            id: "follow-up",
+            name: "Follow Up",
+            type: "action",
+            next: "wait-response",
+            retries: 3
+          },
+          {
+            id: "negotiate",
+            name: "Negotiation",
+            type: "action",
+            next: "finalize"
+          },
+          {
+            id: "finalize",
+            name: "Finalize Deal",
+            type: "decision",
+            next: ["won", "lost"],
+            condition: "deal.accepted"
+          },
+          {
+            id: "won",
+            name: "Deal Won",
+            type: "end"
+          },
+          {
+            id: "lost",
+            name: "Deal Lost",
+            type: "end"
+          }
+        ]
+      }
+    ],
+    "saas-boilerplate": [
+      {
+        meta: {
+          key: "user.onboarding",
+          version: "1.0.0",
+          description: "User onboarding workflow"
+        },
+        start: "signup",
+        steps: [
+          {
+            id: "signup",
+            name: "User Signup",
+            type: "action",
+            next: "verify-email"
+          },
+          {
+            id: "verify-email",
+            name: "Verify Email",
+            type: "wait",
+            timeout: 86400000,
+            next: "profile-setup",
+            onError: "resend-verification"
+          },
+          {
+            id: "resend-verification",
+            name: "Resend Verification",
+            type: "action",
+            next: "verify-email",
+            retries: 2
+          },
+          {
+            id: "profile-setup",
+            name: "Setup Profile",
+            type: "action",
+            next: "onboarding-tour"
+          },
+          {
+            id: "onboarding-tour",
+            name: "Onboarding Tour",
+            type: "action",
+            next: "complete"
+          },
+          {
+            id: "complete",
+            name: "Onboarding Complete",
+            type: "end"
+          }
+        ]
+      }
+    ],
+    "agent-console": [
+      {
+        meta: {
+          key: "agent.execution",
+          version: "1.0.0",
+          description: "Agent execution workflow"
+        },
+        start: "receive-task",
+        steps: [
+          {
+            id: "receive-task",
+            name: "Receive Task",
+            type: "action",
+            next: "plan-execution"
+          },
+          {
+            id: "plan-execution",
+            name: "Plan Execution",
+            type: "action",
+            next: "execute-steps"
+          },
+          {
+            id: "execute-steps",
+            name: "Execute Steps",
+            type: "parallel",
+            next: ["tool-call", "observe", "reason"]
+          },
+          {
+            id: "tool-call",
+            name: "Tool Call",
+            type: "action",
+            next: "evaluate"
+          },
+          {
+            id: "observe",
+            name: "Observe",
+            type: "action",
+            next: "evaluate"
+          },
+          {
+            id: "reason",
+            name: "Reason",
+            type: "action",
+            next: "evaluate"
+          },
+          {
+            id: "evaluate",
+            name: "Evaluate Result",
+            type: "decision",
+            condition: "task.isComplete",
+            next: ["complete", "execute-steps"]
+          },
+          {
+            id: "complete",
+            name: "Task Complete",
+            type: "end"
+          }
+        ]
+      }
+    ],
+    "todos-app": [
+      {
+        meta: {
+          key: "task.lifecycle",
+          version: "1.0.0",
+          description: "Task lifecycle workflow"
+        },
+        start: "created",
+        steps: [
+          {
+            id: "created",
+            name: "Task Created",
+            type: "action",
+            next: "in-progress"
+          },
+          {
+            id: "in-progress",
+            name: "In Progress",
+            type: "action",
+            next: "review"
+          },
+          {
+            id: "review",
+            name: "Review",
+            type: "decision",
+            condition: "task.approved",
+            next: ["done", "in-progress"]
+          },
+          {
+            id: "done",
+            name: "Done",
+            type: "end"
+          }
+        ]
+      }
+    ],
+    "messaging-app": [
+      {
+        meta: {
+          key: "message.delivery",
+          version: "1.0.0",
+          description: "Message delivery workflow"
+        },
+        start: "compose",
+        steps: [
+          {
+            id: "compose",
+            name: "Compose Message",
+            type: "action",
+            next: "send"
+          },
+          {
+            id: "send",
+            name: "Send Message",
+            type: "action",
+            next: "deliver"
+          },
+          {
+            id: "deliver",
+            name: "Deliver",
+            type: "decision",
+            condition: "recipient.online",
+            next: ["delivered", "queue"]
+          },
+          {
+            id: "queue",
+            name: "Queue for Delivery",
+            type: "wait",
+            next: "deliver"
+          },
+          {
+            id: "delivered",
+            name: "Message Delivered",
+            type: "action",
+            next: "read"
+          },
+          {
+            id: "read",
+            name: "Message Read",
+            type: "end"
+          }
+        ]
+      }
+    ],
+    "recipe-app-i18n": [
+      {
+        meta: {
+          key: "recipe.creation",
+          version: "1.0.0",
+          description: "Recipe creation workflow"
+        },
+        start: "draft",
+        steps: [
+          {
+            id: "draft",
+            name: "Draft Recipe",
+            type: "action",
+            next: "add-ingredients"
+          },
+          {
+            id: "add-ingredients",
+            name: "Add Ingredients",
+            type: "action",
+            next: "add-steps"
+          },
+          {
+            id: "add-steps",
+            name: "Add Steps",
+            type: "action",
+            next: "review"
+          },
+          {
+            id: "review",
+            name: "Review Recipe",
+            type: "decision",
+            condition: "recipe.isComplete",
+            next: ["publish", "draft"]
+          },
+          {
+            id: "publish",
+            name: "Publish Recipe",
+            type: "end"
+          }
+        ]
+      }
+    ]
+  };
+  return templateWorkflows[templateId] ?? [];
+}
+
+// src/hooks/useRegistryTemplates.ts
+import { useQuery } from "@tanstack/react-query";
+function useRegistryTemplates() {
+  return useQuery({
+    queryKey: ["registryTemplates"],
+    queryFn: async () => {
+      const registryUrl = process.env.NEXT_PUBLIC_CONTRACTSPEC_REGISTRY_URL ?? "";
+      if (!registryUrl)
+        return [];
+      const res = await fetch(`${registryUrl.replace(/\/$/, "")}/r/contractspec.json`, {
+        method: "GET",
+        headers: { Accept: "application/json" }
+      });
+      if (!res.ok)
+        return [];
+      const json = await res.json();
+      const items = json.items ?? [];
+      return items.filter((i) => i.type === "contractspec:template").map((i) => ({
+        id: i.name,
+        name: i.title ?? i.name,
+        description: i.description,
+        tags: i.meta?.tags ?? [],
+        source: "registry",
+        registryUrl
+      }));
+    }
+  });
+}
+// src/utils/fetchPresentationData.ts
+async function fetchPresentationData(_presentationName, _templateId) {
+  throw new Error("fetchPresentationData is deprecated. Use fetchData from TemplateRuntimeContext.");
+}
+function hasPresentationDataFetcher(_presentationName) {
+  return false;
+}
+function getRegisteredPresentationFetchers() {
+  return [];
+}
+// src/lib/component-registry.tsx
+import { useState as useState9, useEffect as useEffect7 } from "react";
+"use client";
+
+class TemplateComponentRegistry {
+  components = new Map;
+  listeners = new Set;
+  register(templateId, registration) {
+    this.components.set(templateId, registration);
+    this.listeners.forEach((l) => l(templateId));
+  }
+  get(templateId) {
+    return this.components.get(templateId);
+  }
+  subscribe(listener) {
+    this.listeners.add(listener);
+    return () => {
+      this.listeners.delete(listener);
+    };
+  }
+}
+var templateComponentRegistry = new TemplateComponentRegistry;
+function registerTemplateComponents(templateId, components) {
+  templateComponentRegistry.register(templateId, components);
+}
+function useTemplateComponents(templateId) {
+  const [components, setComponents] = useState9(() => templateComponentRegistry.get(templateId));
+  useEffect7(() => {
+    return templateComponentRegistry.subscribe((updatedId) => {
+      if (updatedId === templateId) {
+        setComponents(templateComponentRegistry.get(templateId));
+      }
+    });
+  }, [templateId]);
+  return components;
+}
+export {
+  useWorkflowComposer,
+  useTemplateRuntime,
+  useTemplateComponents,
+  useSpecContent,
+  useRegistryTemplates,
+  useOverlayContext,
+  useIsInOverlayContext,
+  useEvolution,
+  useBehaviorTracking,
+  templateComponentRegistry,
+  registerTemplateComponents,
+  hasPresentationDataFetcher,
+  getRegisteredPresentationFetchers,
+  generateSpecFromTemplate,
+  fetchPresentationData,
+  TemplateShell,
+  TemplateRuntimeContext,
+  TemplateComponentRegistry,
+  SpecEditorPanel,
+  SaveToStudioButton,
+  PersonalizationInsights,
+  OverlayContextProvider,
+  MarkdownView,
+  MarkdownRenderer,
+  LocalDataIndicator,
+  EvolutionSidebar,
+  EvolutionDashboard
+};