@contractspec/lib.example-shared-ui 6.0.5 → 6.0.7

package/dist/browser/index.js

@@ -257,10 +257,10 @@ function generateRecommendedActions(anomaly) {
 }
 
 // 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 { Card } from "@contractspec/lib.ui-kit-web/ui/card";
+import { useCallback as useCallback2, useMemo as useMemo2 } from "react";
 import { jsxDEV } from "react/jsx-dev-runtime";
 "use client";
 function EvolutionDashboard({
@@ -339,7 +339,7 @@ function EvolutionDashboard({
           /* @__PURE__ */ jsxDEV("div", {
             children: [
               /* @__PURE__ */ jsxDEV("h2", {
-                className: "text-xl font-semibold",
+                className: "font-semibold text-xl",
                 children: "AI Evolution Engine"
               }, undefined, false, undefined, this),
               /* @__PURE__ */ jsxDEV("p", {
@@ -397,7 +397,7 @@ function EvolutionDashboard({
             ]
           }, undefined, true, undefined, this),
           /* @__PURE__ */ jsxDEV("p", {
-            className: "text-muted-foreground mt-2 text-xs",
+            className: "mt-2 text-muted-foreground text-xs",
             children: "Simulate sandbox operations, analyze patterns, and generate AI improvement suggestions."
           }, undefined, false, undefined, this)
         ]
@@ -514,7 +514,7 @@ function UsageStatCard({ stat }) {
         className: "mb-2 flex items-center justify-between",
         children: [
           /* @__PURE__ */ jsxDEV("span", {
-            className: "font-mono text-sm font-medium",
+            className: "font-medium font-mono text-sm",
             children: stat.operation.name
           }, undefined, false, undefined, this),
           /* @__PURE__ */ jsxDEV(Badge, {
@@ -616,7 +616,7 @@ function AnomalyCard({ anomaly }) {
           /* @__PURE__ */ jsxDEV("div", {
             children: [
               /* @__PURE__ */ jsxDEV("p", {
-                className: "text-sm font-medium",
+                className: "font-medium text-sm",
                 children: anomaly.description
               }, undefined, false, undefined, this),
               /* @__PURE__ */ jsxDEV("p", {
@@ -686,7 +686,7 @@ function SuggestionCard({
                 ]
               }, undefined, true, undefined, this),
               /* @__PURE__ */ jsxDEV("p", {
-                className: "text-muted-foreground mt-1 text-sm",
+                className: "mt-1 text-muted-foreground text-sm",
                 children: suggestion.proposal.rationale
               }, undefined, false, undefined, this)
             ]
@@ -702,7 +702,7 @@ function SuggestionCard({
         className: "mt-3",
         children: [
           /* @__PURE__ */ jsxDEV("p", {
-            className: "mb-1 text-xs font-semibold text-violet-400 uppercase",
+            className: "mb-1 font-semibold text-violet-400 text-xs uppercase",
             children: "Recommended Actions"
           }, undefined, false, undefined, this),
           /* @__PURE__ */ jsxDEV("ul", {
@@ -783,7 +783,7 @@ function HintCard({ hint }) {
               children: hint.summary
             }, undefined, false, undefined, this),
             /* @__PURE__ */ jsxDEV("p", {
-              className: "text-muted-foreground mt-1 text-xs",
+              className: "mt-1 text-muted-foreground text-xs",
               children: hint.justification
             }, undefined, false, undefined, this),
             hint.recommendedActions.length > 0 && /* @__PURE__ */ jsxDEV("ul", {
@@ -800,10 +800,10 @@ function HintCard({ hint }) {
 }
 
 // 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 { Card as Card2 } from "@contractspec/lib.ui-kit-web/ui/card";
+import { useCallback as useCallback3, useMemo as useMemo3 } from "react";
 import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
 "use client";
 function EvolutionSidebar({
@@ -862,7 +862,7 @@ function EvolutionSidebar({
     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",
+        className: "flex items-center justify-between border-violet-500/20 border-b bg-violet-500/5 px-3 py-2",
         children: [
           /* @__PURE__ */ jsxDEV2("div", {
             className: "flex items-center gap-2",
@@ -871,7 +871,7 @@ function EvolutionSidebar({
                 children: "\uD83E\uDD16"
               }, undefined, false, undefined, this),
               /* @__PURE__ */ jsxDEV2("span", {
-                className: "text-sm font-semibold",
+                className: "font-semibold text-sm",
                 children: "Evolution"
               }, undefined, false, undefined, this)
             ]
@@ -887,7 +887,7 @@ function EvolutionSidebar({
               }, undefined, false, undefined, this),
               /* @__PURE__ */ jsxDEV2("button", {
                 onClick: onToggle,
-                className: "text-muted-foreground hover:text-foreground p-1",
+                className: "p-1 text-muted-foreground hover:text-foreground",
                 type: "button",
                 title: "Collapse",
                 children: "✕"
@@ -932,14 +932,14 @@ function EvolutionSidebar({
             ]
           }, undefined, true, undefined, this),
           loading && /* @__PURE__ */ jsxDEV2("div", {
-            className: "text-muted-foreground py-4 text-center text-sm",
+            className: "py-4 text-center text-muted-foreground 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",
+                className: "mb-2 font-semibold text-violet-400 text-xs uppercase",
                 children: "Top Issues"
               }, undefined, false, undefined, this),
               /* @__PURE__ */ jsxDEV2("div", {
@@ -960,7 +960,7 @@ function EvolutionSidebar({
                       ]
                     }, undefined, true, undefined, this),
                     /* @__PURE__ */ jsxDEV2("p", {
-                      className: "text-muted-foreground mt-1 truncate",
+                      className: "mt-1 truncate text-muted-foreground",
                       children: anomaly.description
                     }, undefined, false, undefined, this)
                   ]
@@ -971,7 +971,7 @@ function EvolutionSidebar({
           pendingSuggestions.length > 0 && /* @__PURE__ */ jsxDEV2("div", {
             children: [
               /* @__PURE__ */ jsxDEV2("p", {
-                className: "mb-2 text-xs font-semibold text-violet-400 uppercase",
+                className: "mb-2 font-semibold text-violet-400 text-xs uppercase",
                 children: "Pending Suggestions"
               }, undefined, false, undefined, this),
               /* @__PURE__ */ jsxDEV2("div", {
@@ -983,7 +983,7 @@ function EvolutionSidebar({
                     onReject: handleReject
                   }, suggestion.id, false, undefined, this)),
                   pendingSuggestions.length > 3 && /* @__PURE__ */ jsxDEV2("p", {
-                    className: "text-muted-foreground text-center text-xs",
+                    className: "text-center text-muted-foreground text-xs",
                     children: [
                       "+",
                       pendingSuggestions.length - 3,
@@ -995,13 +995,13 @@ function EvolutionSidebar({
             ]
           }, undefined, true, undefined, this),
           anomalies.length === 0 && pendingSuggestions.length === 0 && !loading && /* @__PURE__ */ jsxDEV2("div", {
-            className: "text-muted-foreground py-4 text-center text-xs",
+            className: "py-4 text-center text-muted-foreground 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",
+        className: "border-violet-500/20 border-t p-2",
         children: /* @__PURE__ */ jsxDEV2(Button2, {
           variant: "ghost",
           size: "sm",
@@ -1027,7 +1027,7 @@ function CompactSuggestionCard({
           className: "min-w-0 flex-1",
           children: [
             /* @__PURE__ */ jsxDEV2("p", {
-              className: "truncate text-xs font-medium",
+              className: "truncate font-medium text-xs",
               children: suggestion.proposal.summary
             }, undefined, false, undefined, this),
             /* @__PURE__ */ jsxDEV2("div", {
@@ -1054,13 +1054,13 @@ function CompactSuggestionCard({
         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",
+            className: "rounded px-2 py-0.5 text-red-400 text-xs 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",
+            className: "rounded bg-violet-500/20 px-2 py-0.5 text-violet-400 text-xs hover:bg-violet-500/30",
             type: "button",
             children: "Approve"
           }, undefined, false, undefined, this)
@@ -1099,7 +1099,7 @@ function LocalDataIndicator() {
     }
   };
   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",
+    className: "inline-flex items-center gap-2 rounded-full border border-border bg-muted/40 px-3 py-1 text-muted-foreground text-xs",
     children: [
       /* @__PURE__ */ jsxDEV3(Shield, {
         className: "h-3.5 w-3.5 text-violet-400"
@@ -1109,14 +1109,14 @@ function LocalDataIndicator() {
           "Local runtime ·",
           " ",
           /* @__PURE__ */ jsxDEV3("span", {
-            className: "text-foreground font-semibold",
+            className: "font-semibold text-foreground",
             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",
+        className: "inline-flex items-center gap-1 rounded-full border border-border px-2 py-0.5 font-semibold text-[11px] text-muted-foreground hover:text-foreground",
         onClick: handleReset,
         disabled: isResetting,
         children: [
@@ -1130,31 +1130,24 @@ function LocalDataIndicator() {
   }, undefined, true, undefined, this);
 }
 
-// src/MarkdownView.tsx
+// src/markdown/formatPresentationName.ts
+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/markdown/useMarkdownPresentation.ts
 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,
+function useMarkdownPresentation({
+  engine,
+  fetchData,
   presentationId,
-  className
+  presentations,
+  resolvePresentation,
+  templateId
 }) {
-  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);
@@ -1162,10 +1155,16 @@ function MarkdownView({
   useEffect2(() => {
     if (presentationId && presentations.includes(presentationId)) {
       setSelectedPresentation(presentationId);
-    } else if (presentations.length > 0 && !selectedPresentation) {
+      return;
+    }
+    if (presentations.length === 0) {
+      setSelectedPresentation("");
+      return;
+    }
+    if (!presentations.includes(selectedPresentation)) {
       setSelectedPresentation(presentations[0] ?? "");
     }
-  }, [presentationId, presentations, selectedPresentation]);
+  }, [presentationId, presentations, selectedPresentation, templateId]);
   const renderMarkdown = useCallback4(async () => {
     if (!selectedPresentation || !engine)
       return;
@@ -1187,16 +1186,61 @@ function MarkdownView({
     } finally {
       setLoading(false);
     }
-  }, [
+  }, [engine, fetchData, resolvePresentation, selectedPresentation]);
+  useEffect2(() => {
+    renderMarkdown();
+  }, [renderMarkdown]);
+  return {
+    error,
+    loading,
+    markdownContent,
+    renderMarkdown,
     selectedPresentation,
-    templateId,
+    setSelectedPresentation
+  };
+}
+
+// src/MarkdownView.tsx
+import {
+  Button as Button3,
+  ErrorState,
+  LoaderBlock as LoaderBlock2,
+  MarkdownRenderer
+} from "@contractspec/lib.design-system";
+import { Badge as Badge3 } from "@contractspec/lib.ui-kit-web/ui/badge";
+import { Card as Card3 } from "@contractspec/lib.ui-kit-web/ui/card";
+import { useCallback as useCallback5 } from "react";
+import { jsxDEV as jsxDEV4 } from "react/jsx-dev-runtime";
+"use client";
+function MarkdownView({
+  templateId: propTemplateId,
+  presentationId,
+  className
+}) {
+  const {
     engine,
+    template,
+    templateId: contextTemplateId,
     resolvePresentation,
     fetchData
-  ]);
-  useEffect2(() => {
-    renderMarkdown();
-  }, [renderMarkdown]);
+  } = useTemplateRuntime();
+  const templateId = propTemplateId ?? contextTemplateId;
+  const presentations = template?.presentations ?? [];
+  const {
+    error,
+    loading,
+    markdownContent,
+    renderMarkdown,
+    selectedPresentation,
+    setSelectedPresentation
+  } = useMarkdownPresentation({
+    engine,
+    fetchData,
+    presentationId,
+    presentations,
+    resolvePresentation,
+    templateId
+  });
   if (!presentations.length) {
     return /* @__PURE__ */ jsxDEV4(Card3, {
       className,
@@ -1209,7 +1253,7 @@ function MarkdownView({
       }, undefined, false, undefined, this)
     }, undefined, false, undefined, this);
   }
-  const handleCopy = useCallback4(() => {
+  const handleCopy = useCallback5(() => {
     if (markdownContent) {
       navigator.clipboard.writeText(markdownContent);
     }
@@ -1221,7 +1265,7 @@ function MarkdownView({
         className: "mb-4 flex flex-wrap items-center gap-2",
         children: [
           /* @__PURE__ */ jsxDEV4("span", {
-            className: "text-muted-foreground text-sm font-medium",
+            className: "font-medium text-muted-foreground text-sm",
             children: "Presentation:"
           }, undefined, false, undefined, this),
           presentations.map((name) => /* @__PURE__ */ jsxDEV4(Button3, {
@@ -1278,145 +1322,6 @@ function MarkdownView({
     ]
   }, 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";
@@ -1617,7 +1522,7 @@ function getTemplateOverlays(templateId, _role) {
 }
 
 // src/hooks/useBehaviorTracking.ts
-import { useCallback as useCallback5, useEffect as useEffect3, useMemo as useMemo5, useRef as useRef2, useState as useState4 } from "react";
+import { useCallback as useCallback6, 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 = [
@@ -1662,7 +1567,7 @@ function useBehaviorTracking(templateId) {
       } catch {}
     }
   }, [events]);
-  const trackEvent = useCallback5((type, metadata) => {
+  const trackEvent = useCallback6((type, metadata) => {
     const event = {
       type,
       timestamp: new Date,
@@ -1672,10 +1577,10 @@ function useBehaviorTracking(templateId) {
     setEvents((prev) => [...prev, event]);
     setEventCount((prev) => prev + 1);
   }, [templateId]);
-  const getEventsByType = useCallback5((type) => {
+  const getEventsByType = useCallback6((type) => {
     return events.filter((e) => e.type === type);
   }, [events]);
-  const getSummary = useCallback5(() => {
+  const getSummary = useCallback6(() => {
     const now = new Date;
     const sessionDuration = now.getTime() - sessionStartRef.current.getTime();
     const templateCounts = new Map;
@@ -1730,7 +1635,7 @@ function useBehaviorTracking(templateId) {
       recommendations
     };
   }, [events]);
-  const clear = useCallback5(() => {
+  const clear = useCallback6(() => {
     setEvents([]);
     setEventCount(0);
     sessionStartRef.current = new Date;
@@ -1772,10 +1677,10 @@ function generateRecommendations(featuresUsed, unusedFeatures, mostUsedModes, to
 }
 
 // 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 { Card as Card4 } from "@contractspec/lib.ui-kit-web/ui/card";
+import { useCallback as useCallback7, useMemo as useMemo6, useState as useState5 } from "react";
 import { jsxDEV as jsxDEV6 } from "react/jsx-dev-runtime";
 "use client";
 function PersonalizationInsights({
@@ -1786,7 +1691,7 @@ function PersonalizationInsights({
   const { getSummary, eventCount, clear, sessionStart } = useBehaviorTracking(templateId);
   const [showDetails, setShowDetails] = useState5(false);
   const summary = useMemo6(() => getSummary(), [getSummary]);
-  const formatDuration = useCallback6((ms) => {
+  const formatDuration = useCallback7((ms) => {
     const seconds = Math.floor(ms / 1000);
     const minutes = Math.floor(seconds / 60);
     const hours = Math.floor(minutes / 60);
@@ -1798,7 +1703,7 @@ function PersonalizationInsights({
     }
     return `${seconds}s`;
   }, []);
-  const handleClear = useCallback6(() => {
+  const handleClear = useCallback7(() => {
     clear();
   }, [clear]);
   if (collapsed) {
@@ -1824,7 +1729,7 @@ function PersonalizationInsights({
     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",
+        className: "flex items-center justify-between border-blue-500/20 border-b bg-blue-500/5 px-4 py-3",
         children: [
           /* @__PURE__ */ jsxDEV6("div", {
             className: "flex items-center gap-2",
@@ -1849,7 +1754,7 @@ function PersonalizationInsights({
               }, undefined, false, undefined, this),
               onToggle && /* @__PURE__ */ jsxDEV6("button", {
                 onClick: onToggle,
-                className: "text-muted-foreground hover:text-foreground p-1",
+                className: "p-1 text-muted-foreground hover:text-foreground",
                 type: "button",
                 title: "Collapse",
                 children: "✕"
@@ -1891,7 +1796,7 @@ function PersonalizationInsights({
             className: "mb-4",
             children: [
               /* @__PURE__ */ jsxDEV6("h4", {
-                className: "mb-2 text-xs font-semibold text-blue-400 uppercase",
+                className: "mb-2 font-semibold text-blue-400 text-xs uppercase",
                 children: "Recommendations"
               }, undefined, false, undefined, this),
               /* @__PURE__ */ jsxDEV6("ul", {
@@ -1915,7 +1820,7 @@ function PersonalizationInsights({
             className: "mb-4",
             children: [
               /* @__PURE__ */ jsxDEV6("h4", {
-                className: "mb-2 text-xs font-semibold text-blue-400 uppercase",
+                className: "mb-2 font-semibold text-blue-400 text-xs uppercase",
                 children: "Try These Features"
               }, undefined, false, undefined, this),
               /* @__PURE__ */ jsxDEV6("div", {
@@ -1932,7 +1837,7 @@ function PersonalizationInsights({
             sessionStart
           }, undefined, false, undefined, this),
           /* @__PURE__ */ jsxDEV6("div", {
-            className: "mt-4 flex justify-end border-t border-blue-500/10 pt-4",
+            className: "mt-4 flex justify-end border-blue-500/10 border-t pt-4",
             children: /* @__PURE__ */ jsxDEV6(Button4, {
               variant: "ghost",
               size: "sm",
@@ -1964,7 +1869,7 @@ function StatCard({
         children: icon
       }, undefined, false, undefined, this),
       /* @__PURE__ */ jsxDEV6("div", {
-        className: "text-lg font-bold",
+        className: "font-bold text-lg",
         children: value
       }, undefined, false, undefined, this),
       /* @__PURE__ */ jsxDEV6("div", {
@@ -1979,12 +1884,12 @@ function DetailedInsights({
   sessionStart
 }) {
   return /* @__PURE__ */ jsxDEV6("div", {
-    className: "mt-4 space-y-4 border-t border-blue-500/10 pt-4",
+    className: "mt-4 space-y-4 border-blue-500/10 border-t 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",
+            className: "mb-2 font-semibold text-blue-400 text-xs uppercase",
             children: "Most Used Templates"
           }, undefined, false, undefined, this),
           /* @__PURE__ */ jsxDEV6("div", {
@@ -2010,7 +1915,7 @@ function DetailedInsights({
       summary.mostUsedModes.length > 0 && /* @__PURE__ */ jsxDEV6("div", {
         children: [
           /* @__PURE__ */ jsxDEV6("h4", {
-            className: "mb-2 text-xs font-semibold text-blue-400 uppercase",
+            className: "mb-2 font-semibold text-blue-400 text-xs uppercase",
             children: "Mode Usage"
           }, undefined, false, undefined, this),
           /* @__PURE__ */ jsxDEV6("div", {
@@ -2036,7 +1941,7 @@ function DetailedInsights({
       /* @__PURE__ */ jsxDEV6("div", {
         children: [
           /* @__PURE__ */ jsxDEV6("h4", {
-            className: "mb-2 text-xs font-semibold text-blue-400 uppercase",
+            className: "mb-2 font-semibold text-blue-400 text-xs uppercase",
             children: "Features Used"
           }, undefined, false, undefined, this),
           /* @__PURE__ */ jsxDEV6("div", {
@@ -2070,8 +1975,8 @@ function formatTemplateId(id) {
 }
 
 // src/SaveToStudioButton.tsx
-import { useState as useState6 } from "react";
 import { Sparkles } from "lucide-react";
+import { useState as useState6 } from "react";
 import { jsxDEV as jsxDEV7 } from "react/jsx-dev-runtime";
 "use client";
 function SaveToStudioButton({
@@ -2121,7 +2026,7 @@ function SaveToStudioButton({
         children: error
       }, undefined, false, undefined, this) : null,
       status === "saved" ? /* @__PURE__ */ jsxDEV7("p", {
-        className: "text-xs text-emerald-400",
+        className: "text-emerald-400 text-xs",
         children: "Template sent to Studio."
       }, undefined, false, undefined, this) : null
     ]
@@ -2145,7 +2050,7 @@ function SpecDrivenTemplateShell({
   children
 }) {
   const headerContent = /* @__PURE__ */ jsxDEV8("header", {
-    className: "border-border bg-card rounded-2xl border p-6 shadow-sm",
+    className: "rounded-2xl border border-border bg-card p-6 shadow-sm",
     children: [
       /* @__PURE__ */ jsxDEV8("div", {
         className: "flex flex-wrap items-center justify-between gap-4",
@@ -2153,15 +2058,15 @@ function SpecDrivenTemplateShell({
           /* @__PURE__ */ jsxDEV8("div", {
             children: [
               /* @__PURE__ */ jsxDEV8("p", {
-                className: "text-muted-foreground text-sm font-semibold tracking-wide uppercase",
+                className: "font-semibold text-muted-foreground text-sm uppercase tracking-wide",
                 children: "ContractSpec Templates"
               }, undefined, false, undefined, this),
               /* @__PURE__ */ jsxDEV8("h1", {
-                className: "text-3xl font-bold",
+                className: "font-bold text-3xl",
                 children: title
               }, undefined, false, undefined, this),
               description ? /* @__PURE__ */ jsxDEV8("p", {
-                className: "text-muted-foreground mt-2 max-w-2xl text-sm",
+                className: "mt-2 max-w-2xl text-muted-foreground text-sm",
                 children: description
               }, undefined, false, undefined, this) : null
             ]
@@ -2192,7 +2097,7 @@ function SpecDrivenTemplateShell({
   };
   if (sidebar != null) {
     slotContent.sidebar = /* @__PURE__ */ jsxDEV8("aside", {
-      className: "border-border bg-card rounded-2xl border p-4",
+      className: "rounded-2xl border border-border bg-card p-4",
       children: sidebar
     }, undefined, false, undefined, this);
   }
@@ -2626,7 +2531,7 @@ contractSpec("${templateId}.main.v1", {
 }
 
 // src/hooks/useSpecContent.ts
-import { useCallback as useCallback7, useEffect as useEffect4, useState as useState7 } from "react";
+import { useCallback as useCallback8, useEffect as useEffect4, useState as useState7 } from "react";
 "use client";
 var SPEC_STORAGE_KEY = "contractspec-spec-content";
 function useSpecContent(templateId) {
@@ -2663,11 +2568,11 @@ function useSpecContent(templateId) {
     }
     setLoading(false);
   }, [templateId]);
-  const setContent = useCallback7((newContent) => {
+  const setContent = useCallback8((newContent) => {
     setContentState(newContent);
     setValidation(null);
   }, []);
-  const save = useCallback7(() => {
+  const save = useCallback8(() => {
     try {
       const savedAt = new Date().toISOString();
       localStorage.setItem(`${SPEC_STORAGE_KEY}-${templateId}`, JSON.stringify({
@@ -2678,7 +2583,7 @@ function useSpecContent(templateId) {
       setLastSaved(savedAt);
     } catch {}
   }, [content, templateId]);
-  const validate = useCallback7(() => {
+  const validate = useCallback8(() => {
     const errors = [];
     const lines = content.split(`
 `);
@@ -2746,7 +2651,7 @@ function useSpecContent(templateId) {
     setValidation(result);
     return result;
   }, [content]);
-  const reset = useCallback7(() => {
+  const reset = useCallback8(() => {
     const generated = generateSpecFromTemplate(template);
     setContentState(generated);
     setSavedContent(generated);
@@ -2770,9 +2675,9 @@ function useSpecContent(templateId) {
 }
 
 // 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 { useCallback as useCallback9, useEffect as useEffect5 } from "react";
 import { jsxDEV as jsxDEV9 } from "react/jsx-dev-runtime";
 "use client";
 function SpecEditorPanel({
@@ -2796,11 +2701,11 @@ function SpecEditorPanel({
       onLog?.(`Spec loaded for ${templateId}`);
     }
   }, [loading, content, templateId, onLog]);
-  const handleSave = useCallback8(() => {
+  const handleSave = useCallback9(() => {
     save();
     onLog?.("Spec saved locally");
   }, [save, onLog]);
-  const handleValidate = useCallback8(() => {
+  const handleValidate = useCallback9(() => {
     const result = validate();
     if (result.valid) {
       onLog?.("Spec validation passed");
@@ -2810,7 +2715,7 @@ function SpecEditorPanel({
       onLog?.(`Spec validation: ${errorCount} errors, ${warnCount} warnings`);
     }
   }, [validate, onLog]);
-  const handleReset = useCallback8(() => {
+  const handleReset = useCallback9(() => {
     reset();
     onLog?.("Spec reset to template defaults");
   }, [reset, onLog]);
@@ -2876,7 +2781,7 @@ function SpecEditorPanel({
         className: "rounded-lg border border-amber-500/50 bg-amber-500/10 p-3",
         children: [
           /* @__PURE__ */ jsxDEV9("p", {
-            className: "mb-2 text-xs font-semibold text-amber-400 uppercase",
+            className: "mb-2 font-semibold text-amber-400 text-xs uppercase",
             children: "Validation Issues"
           }, undefined, false, undefined, this),
           /* @__PURE__ */ jsxDEV9("ul", {
@@ -2894,7 +2799,7 @@ function SpecEditorPanel({
         ]
       }, undefined, true, undefined, this),
       /* @__PURE__ */ jsxDEV9("div", {
-        className: "border-border bg-card rounded-2xl border p-4",
+        className: "rounded-2xl border border-border bg-card p-4",
         children: /* @__PURE__ */ jsxDEV9(SpecEditor, {
           projectId: "sandbox",
           type: "CAPABILITY",
@@ -2923,7 +2828,7 @@ var TemplateShell = ({
   className: "space-y-6",
   children: [
     /* @__PURE__ */ jsxDEV10("header", {
-      className: "border-border bg-card rounded-2xl border p-6 shadow-sm",
+      className: "rounded-2xl border border-border bg-card p-6 shadow-sm",
       children: [
         /* @__PURE__ */ jsxDEV10("div", {
           className: "flex flex-wrap items-center justify-between gap-4",
@@ -2931,15 +2836,15 @@ var TemplateShell = ({
             /* @__PURE__ */ jsxDEV10("div", {
               children: [
                 /* @__PURE__ */ jsxDEV10("p", {
-                  className: "text-muted-foreground text-sm font-semibold tracking-wide uppercase",
+                  className: "font-semibold text-muted-foreground text-sm uppercase tracking-wide",
                   children: "ContractSpec Templates"
                 }, undefined, false, undefined, this),
                 /* @__PURE__ */ jsxDEV10("h1", {
-                  className: "text-3xl font-bold",
+                  className: "font-bold text-3xl",
                   children: title
                 }, undefined, false, undefined, this),
                 description ? /* @__PURE__ */ jsxDEV10("p", {
-                  className: "text-muted-foreground mt-2 max-w-2xl text-sm",
+                  className: "mt-2 max-w-2xl text-muted-foreground text-sm",
                   children: description
                 }, undefined, false, undefined, this) : null
               ]
@@ -2969,7 +2874,7 @@ var TemplateShell = ({
           children
         }, undefined, false, undefined, this),
         sidebar ? /* @__PURE__ */ jsxDEV10("aside", {
-          className: "border-border bg-card rounded-2xl border p-4",
+          className: "rounded-2xl border border-border bg-card p-4",
           children: sidebar
         }, undefined, false, undefined, this) : null
       ]
@@ -2977,8 +2882,37 @@ var TemplateShell = ({
   ]
 }, undefined, true, undefined, this);
 
+// 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/hooks/useWorkflowComposer.ts
-import { useCallback as useCallback9, useEffect as useEffect6, useMemo as useMemo7, useState as useState8 } from "react";
+import { useCallback as useCallback10, useEffect as useEffect6, useMemo as useMemo7, useState as useState8 } from "react";
 "use client";
 function useWorkflowComposer(templateId) {
   const [selectedWorkflow, setSelectedWorkflow] = useState8(null);
@@ -2995,7 +2929,7 @@ function useWorkflowComposer(templateId) {
   const currentBase = useMemo7(() => {
     return baseWorkflows.find((w) => w.meta.key === selectedWorkflow) ?? null;
   }, [baseWorkflows, selectedWorkflow]);
-  const compose = useCallback9((scope) => {
+  const compose = useCallback10((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));
@@ -3009,13 +2943,13 @@ function useWorkflowComposer(templateId) {
     return composedWorkflow;
   }, [currentBase, extensions]);
   const workflow = useMemo7(() => compose(), [compose]);
-  const selectWorkflow = useCallback9((workflowName) => {
+  const selectWorkflow = useCallback10((workflowName) => {
     setSelectedWorkflow(workflowName);
   }, []);
-  const addExtension = useCallback9((extension) => {
+  const addExtension = useCallback10((extension) => {
     setExtensions((prev) => [...prev, extension]);
   }, []);
-  const removeExtension = useCallback9((workflowName, index) => {
+  const removeExtension = useCallback10((workflowName, index) => {
     setExtensions((prev) => {
       const forWorkflow = prev.filter((e) => e.workflow === workflowName);
       const others = prev.filter((e) => e.workflow !== workflowName);
@@ -3023,7 +2957,7 @@ function useWorkflowComposer(templateId) {
       return [...others, ...forWorkflow];
     });
   }, []);
-  const generateSpecCode = useCallback9(() => {
+  const generateSpecCode = useCallback10(() => {
     const composed = workflow;
     if (!composed) {
       return "// No workflow selected";
@@ -3467,47 +3401,8 @@ function getTemplateWorkflows(templateId) {
   };
   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";
+import { useEffect as useEffect7, useState as useState9 } from "react";
 "use client";
 
 class TemplateComponentRegistry {
@@ -3542,6 +3437,18 @@ function useTemplateComponents(templateId) {
   }, [templateId]);
   return components;
 }
+// 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/index.ts
+import { MarkdownRenderer as MarkdownRenderer2 } from "@contractspec/lib.design-system";
 export {
   useWorkflowComposer,
   useTemplateRuntime,
@@ -3567,7 +3474,7 @@ export {
   PersonalizationInsights,
   OverlayContextProvider,
   MarkdownView,
-  MarkdownRenderer,
+  MarkdownRenderer2 as MarkdownRenderer,
   LocalDataIndicator,
   EvolutionSidebar,
   EvolutionDashboard