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

package/dist/browser/EvolutionDashboard.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", {

package/dist/browser/EvolutionSidebar.js

@@ -257,10 +257,10 @@ function generateRecommendedActions(anomaly) {
 }
 
 // src/EvolutionSidebar.tsx
-import { useCallback as useCallback2, useMemo as useMemo2 } from "react";
 import { Button } 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 EvolutionSidebar({
@@ -319,7 +319,7 @@ function EvolutionSidebar({
     className: "w-80 overflow-hidden",
     children: [
       /* @__PURE__ */ jsxDEV("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__ */ jsxDEV("div", {
             className: "flex items-center gap-2",
@@ -328,7 +328,7 @@ function EvolutionSidebar({
                 children: "\uD83E\uDD16"
               }, undefined, false, undefined, this),
               /* @__PURE__ */ jsxDEV("span", {
-                className: "text-sm font-semibold",
+                className: "font-semibold text-sm",
                 children: "Evolution"
               }, undefined, false, undefined, this)
             ]
@@ -344,7 +344,7 @@ function EvolutionSidebar({
               }, undefined, false, undefined, this),
               /* @__PURE__ */ jsxDEV("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: "✕"
@@ -389,14 +389,14 @@ function EvolutionSidebar({
             ]
           }, undefined, true, undefined, this),
           loading && /* @__PURE__ */ jsxDEV("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__ */ jsxDEV("div", {
             className: "mb-4",
             children: [
               /* @__PURE__ */ jsxDEV("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__ */ jsxDEV("div", {
@@ -417,7 +417,7 @@ function EvolutionSidebar({
                       ]
                     }, undefined, true, undefined, this),
                     /* @__PURE__ */ jsxDEV("p", {
-                      className: "text-muted-foreground mt-1 truncate",
+                      className: "mt-1 truncate text-muted-foreground",
                       children: anomaly.description
                     }, undefined, false, undefined, this)
                   ]
@@ -428,7 +428,7 @@ function EvolutionSidebar({
           pendingSuggestions.length > 0 && /* @__PURE__ */ jsxDEV("div", {
             children: [
               /* @__PURE__ */ jsxDEV("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__ */ jsxDEV("div", {
@@ -440,7 +440,7 @@ function EvolutionSidebar({
                     onReject: handleReject
                   }, suggestion.id, false, undefined, this)),
                   pendingSuggestions.length > 3 && /* @__PURE__ */ jsxDEV("p", {
-                    className: "text-muted-foreground text-center text-xs",
+                    className: "text-center text-muted-foreground text-xs",
                     children: [
                       "+",
                       pendingSuggestions.length - 3,
@@ -452,13 +452,13 @@ function EvolutionSidebar({
             ]
           }, undefined, true, undefined, this),
           anomalies.length === 0 && pendingSuggestions.length === 0 && !loading && /* @__PURE__ */ jsxDEV("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__ */ jsxDEV("div", {
-        className: "border-t border-violet-500/20 p-2",
+        className: "border-violet-500/20 border-t p-2",
         children: /* @__PURE__ */ jsxDEV(Button, {
           variant: "ghost",
           size: "sm",
@@ -484,7 +484,7 @@ function CompactSuggestionCard({
           className: "min-w-0 flex-1",
           children: [
             /* @__PURE__ */ jsxDEV("p", {
-              className: "truncate text-xs font-medium",
+              className: "truncate font-medium text-xs",
               children: suggestion.proposal.summary
             }, undefined, false, undefined, this),
             /* @__PURE__ */ jsxDEV("div", {
@@ -511,13 +511,13 @@ function CompactSuggestionCard({
         children: [
           /* @__PURE__ */ jsxDEV("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__ */ jsxDEV("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)

package/dist/browser/LocalDataIndicator.js

@@ -27,7 +27,7 @@ function LocalDataIndicator() {
     }
   };
   return /* @__PURE__ */ jsxDEV("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__ */ jsxDEV(Shield, {
         className: "h-3.5 w-3.5 text-violet-400"
@@ -37,14 +37,14 @@ function LocalDataIndicator() {
           "Local runtime ·",
           " ",
           /* @__PURE__ */ jsxDEV("span", {
-            className: "text-foreground font-semibold",
+            className: "font-semibold text-foreground",
             children: template.name
           }, undefined, false, undefined, this)
         ]
       }, undefined, true, undefined, this),
       /* @__PURE__ */ jsxDEV("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: [

package/dist/browser/MarkdownView.js

@@ -10,31 +10,24 @@ function useTemplateRuntime() {
   return context;
 }
 
-// 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, useEffect, useState } from "react";
-import {
-  Button,
-  ErrorState,
-  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 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] = useState("");
   const [markdownContent, setMarkdownContent] = useState("");
   const [loading, setLoading] = useState(false);
@@ -42,10 +35,16 @@ function MarkdownView({
   useEffect(() => {
     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 = useCallback(async () => {
     if (!selectedPresentation || !engine)
       return;
@@ -67,16 +66,61 @@ function MarkdownView({
     } finally {
       setLoading(false);
     }
-  }, [
+  }, [engine, fetchData, resolvePresentation, selectedPresentation]);
+  useEffect(() => {
+    renderMarkdown();
+  }, [renderMarkdown]);
+  return {
+    error,
+    loading,
+    markdownContent,
+    renderMarkdown,
     selectedPresentation,
-    templateId,
+    setSelectedPresentation
+  };
+}
+
+// src/MarkdownView.tsx
+import {
+  Button,
+  ErrorState,
+  LoaderBlock,
+  MarkdownRenderer
+} from "@contractspec/lib.design-system";
+import { Badge } from "@contractspec/lib.ui-kit-web/ui/badge";
+import { Card } from "@contractspec/lib.ui-kit-web/ui/card";
+import { useCallback as useCallback2 } from "react";
+import { jsxDEV } from "react/jsx-dev-runtime";
+"use client";
+function MarkdownView({
+  templateId: propTemplateId,
+  presentationId,
+  className
+}) {
+  const {
     engine,
+    template,
+    templateId: contextTemplateId,
     resolvePresentation,
     fetchData
-  ]);
-  useEffect(() => {
-    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__ */ jsxDEV(Card, {
       className,
@@ -89,7 +133,7 @@ function MarkdownView({
       }, undefined, false, undefined, this)
     }, undefined, false, undefined, this);
   }
-  const handleCopy = useCallback(() => {
+  const handleCopy = useCallback2(() => {
     if (markdownContent) {
       navigator.clipboard.writeText(markdownContent);
     }
@@ -101,7 +145,7 @@ function MarkdownView({
         className: "mb-4 flex flex-wrap items-center gap-2",
         children: [
           /* @__PURE__ */ jsxDEV("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__ */ jsxDEV(Button, {
@@ -158,146 +202,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__ */ jsxDEV("h1", {
-        className: "mb-4 text-2xl font-bold",
-        children: line.slice(2)
-      }, i, false, undefined, this));
-    } else if (line.startsWith("## ")) {
-      rendered.push(/* @__PURE__ */ jsxDEV("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__ */ jsxDEV("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__ */ jsxDEV("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__ */ jsxDEV("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__ */ jsxDEV("p", {
-        className: "my-1",
-        children: [
-          /* @__PURE__ */ jsxDEV("strong", {
-            children: [
-              label?.slice(2),
-              ":"
-            ]
-          }, undefined, true, undefined, this),
-          rest.join(":**")
-        ]
-      }, i, true, undefined, this));
-    } else if (line.startsWith("_") && line.endsWith("_")) {
-      rendered.push(/* @__PURE__ */ jsxDEV("p", {
-        className: "text-muted-foreground my-1 italic",
-        children: line.slice(1, -1)
-      }, i, false, undefined, this));
-    } else if (!line.trim()) {
-      rendered.push(/* @__PURE__ */ jsxDEV("div", {
-        className: "h-2"
-      }, i, false, undefined, this));
-    } else {
-      rendered.push(/* @__PURE__ */ jsxDEV("p", {
-        className: "my-1",
-        children: formatInlineMarkdown(line)
-      }, i, false, undefined, this));
-    }
-    i++;
-  }
-  return /* @__PURE__ */ jsxDEV("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__ */ jsxDEV("div", {
-    className: "my-4 overflow-x-auto",
-    children: /* @__PURE__ */ jsxDEV("table", {
-      className: "border-border min-w-full border-collapse border text-sm",
-      children: [
-        /* @__PURE__ */ jsxDEV("thead", {
-          children: /* @__PURE__ */ jsxDEV("tr", {
-            className: "bg-muted/50",
-            children: headers.map((header, idx) => /* @__PURE__ */ jsxDEV("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__ */ jsxDEV("tbody", {
-          children: dataRows.map((row, rowIdx) => /* @__PURE__ */ jsxDEV("tr", {
-            className: "hover:bg-muted/30",
-            children: row.map((cell, cellIdx) => /* @__PURE__ */ jsxDEV("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__ */ jsxDEV("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__ */ jsxDEV("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(" ");
-}
 export {
-  MarkdownView,
-  MarkdownRenderer
+  MarkdownView
 };

package/dist/browser/PersonalizationInsights.js

@@ -154,10 +154,10 @@ function generateRecommendations(featuresUsed, unusedFeatures, mostUsedModes, to
 }
 
 // src/PersonalizationInsights.tsx
-import { useCallback as useCallback2, useMemo as useMemo2, useState as useState2 } from "react";
 import { Button } 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, useState as useState2 } from "react";
 import { jsxDEV } from "react/jsx-dev-runtime";
 "use client";
 function PersonalizationInsights({
@@ -206,7 +206,7 @@ function PersonalizationInsights({
     className: "overflow-hidden",
     children: [
       /* @__PURE__ */ jsxDEV("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__ */ jsxDEV("div", {
             className: "flex items-center gap-2",
@@ -231,7 +231,7 @@ function PersonalizationInsights({
               }, undefined, false, undefined, this),
               onToggle && /* @__PURE__ */ jsxDEV("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: "✕"
@@ -273,7 +273,7 @@ function PersonalizationInsights({
             className: "mb-4",
             children: [
               /* @__PURE__ */ jsxDEV("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__ */ jsxDEV("ul", {
@@ -297,7 +297,7 @@ function PersonalizationInsights({
             className: "mb-4",
             children: [
               /* @__PURE__ */ jsxDEV("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__ */ jsxDEV("div", {
@@ -314,7 +314,7 @@ function PersonalizationInsights({
             sessionStart
           }, undefined, false, undefined, this),
           /* @__PURE__ */ jsxDEV("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__ */ jsxDEV(Button, {
               variant: "ghost",
               size: "sm",
@@ -346,7 +346,7 @@ function StatCard({
         children: icon
       }, undefined, false, undefined, this),
       /* @__PURE__ */ jsxDEV("div", {
-        className: "text-lg font-bold",
+        className: "font-bold text-lg",
         children: value
       }, undefined, false, undefined, this),
       /* @__PURE__ */ jsxDEV("div", {
@@ -361,12 +361,12 @@ function DetailedInsights({
   sessionStart
 }) {
   return /* @__PURE__ */ jsxDEV("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__ */ jsxDEV("div", {
         children: [
           /* @__PURE__ */ jsxDEV("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__ */ jsxDEV("div", {
@@ -392,7 +392,7 @@ function DetailedInsights({
       summary.mostUsedModes.length > 0 && /* @__PURE__ */ jsxDEV("div", {
         children: [
           /* @__PURE__ */ jsxDEV("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__ */ jsxDEV("div", {
@@ -418,7 +418,7 @@ function DetailedInsights({
       /* @__PURE__ */ jsxDEV("div", {
         children: [
           /* @__PURE__ */ jsxDEV("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__ */ jsxDEV("div", {

package/dist/browser/SaveToStudioButton.js

@@ -11,8 +11,8 @@ function useTemplateRuntime() {
 }
 
 // src/SaveToStudioButton.tsx
-import { useState } from "react";
 import { Sparkles } from "lucide-react";
+import { useState } from "react";
 import { jsxDEV } from "react/jsx-dev-runtime";
 "use client";
 function SaveToStudioButton({
@@ -62,7 +62,7 @@ function SaveToStudioButton({
         children: error
       }, undefined, false, undefined, this) : null,
       status === "saved" ? /* @__PURE__ */ jsxDEV("p", {
-        className: "text-xs text-emerald-400",
+        className: "text-emerald-400 text-xs",
         children: "Template sent to Studio."
       }, undefined, false, undefined, this) : null
     ]