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

package/dist/MarkdownView.js

@@ -11,31 +11,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);
@@ -43,10 +36,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;
@@ -68,16 +67,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,
@@ -90,7 +134,7 @@ function MarkdownView({
       }, undefined, false, undefined, this)
     }, undefined, false, undefined, this);
   }
-  const handleCopy = useCallback(() => {
+  const handleCopy = useCallback2(() => {
     if (markdownContent) {
       navigator.clipboard.writeText(markdownContent);
     }
@@ -102,7 +146,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, {
@@ -159,146 +203,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/PersonalizationInsights.js

@@ -155,10 +155,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({
@@ -207,7 +207,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",
@@ -232,7 +232,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: "\u2715"
@@ -274,7 +274,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", {
@@ -298,7 +298,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", {
@@ -315,7 +315,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",
@@ -347,7 +347,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", {
@@ -362,12 +362,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", {
@@ -393,7 +393,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", {
@@ -419,7 +419,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/SaveToStudioButton.js

@@ -12,8 +12,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({
@@ -63,7 +63,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
     ]

package/dist/SpecDrivenTemplateShell.d.ts

@@ -1,5 +1,5 @@
-import type { ReactNode } from 'react';
 import type { ResolvedSurfacePlan } from '@contractspec/lib.surface-runtime/runtime/resolve-bundle';
+import type { ReactNode } from 'react';
 import { type SaveToStudioButtonProps } from './SaveToStudioButton';
 export interface SpecDrivenTemplateShellProps {
     plan: ResolvedSurfacePlan;

package/dist/SpecDrivenTemplateShell.js

@@ -28,7 +28,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"
@@ -38,14 +38,14 @@ function LocalDataIndicator() {
           "Local runtime \xB7",
           " ",
           /* @__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: [
@@ -60,8 +60,8 @@ function LocalDataIndicator() {
 }
 
 // src/SaveToStudioButton.tsx
-import { useState as useState2 } from "react";
 import { Sparkles } from "lucide-react";
+import { useState as useState2 } from "react";
 import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
 "use client";
 function SaveToStudioButton({
@@ -111,7 +111,7 @@ function SaveToStudioButton({
         children: error
       }, undefined, false, undefined, this) : null,
       status === "saved" ? /* @__PURE__ */ jsxDEV2("p", {
-        className: "text-xs text-emerald-400",
+        className: "text-emerald-400 text-xs",
         children: "Template sent to Studio."
       }, undefined, false, undefined, this) : null
     ]
@@ -135,7 +135,7 @@ function SpecDrivenTemplateShell({
   children
 }) {
   const headerContent = /* @__PURE__ */ jsxDEV3("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__ */ jsxDEV3("div", {
         className: "flex flex-wrap items-center justify-between gap-4",
@@ -143,15 +143,15 @@ function SpecDrivenTemplateShell({
           /* @__PURE__ */ jsxDEV3("div", {
             children: [
               /* @__PURE__ */ jsxDEV3("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__ */ jsxDEV3("h1", {
-                className: "text-3xl font-bold",
+                className: "font-bold text-3xl",
                 children: title
               }, undefined, false, undefined, this),
               description ? /* @__PURE__ */ jsxDEV3("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
             ]
@@ -182,7 +182,7 @@ function SpecDrivenTemplateShell({
   };
   if (sidebar != null) {
     slotContent.sidebar = /* @__PURE__ */ jsxDEV3("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);
   }

package/dist/SpecEditorPanel.js

@@ -577,9 +577,9 @@ function useSpecContent(templateId) {
 }
 
 // src/SpecEditorPanel.tsx
-import { useCallback as useCallback2, useEffect as useEffect2 } from "react";
 import { Button, LoaderBlock } from "@contractspec/lib.design-system";
 import { Badge } from "@contractspec/lib.ui-kit-web/ui/badge";
+import { useCallback as useCallback2, useEffect as useEffect2 } from "react";
 import { jsxDEV } from "react/jsx-dev-runtime";
 "use client";
 function SpecEditorPanel({
@@ -683,7 +683,7 @@ function SpecEditorPanel({
         className: "rounded-lg border border-amber-500/50 bg-amber-500/10 p-3",
         children: [
           /* @__PURE__ */ jsxDEV("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__ */ jsxDEV("ul", {
@@ -701,7 +701,7 @@ function SpecEditorPanel({
         ]
       }, undefined, true, undefined, this),
       /* @__PURE__ */ jsxDEV("div", {
-        className: "border-border bg-card rounded-2xl border p-4",
+        className: "rounded-2xl border border-border bg-card p-4",
         children: /* @__PURE__ */ jsxDEV(SpecEditor, {
           projectId: "sandbox",
           type: "CAPABILITY",

package/dist/TemplateShell.js

@@ -28,7 +28,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"
@@ -38,14 +38,14 @@ function LocalDataIndicator() {
           "Local runtime \xB7",
           " ",
           /* @__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: [
@@ -60,8 +60,8 @@ function LocalDataIndicator() {
 }
 
 // src/SaveToStudioButton.tsx
-import { useState as useState2 } from "react";
 import { Sparkles } from "lucide-react";
+import { useState as useState2 } from "react";
 import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
 "use client";
 function SaveToStudioButton({
@@ -111,7 +111,7 @@ function SaveToStudioButton({
         children: error
       }, undefined, false, undefined, this) : null,
       status === "saved" ? /* @__PURE__ */ jsxDEV2("p", {
-        className: "text-xs text-emerald-400",
+        className: "text-emerald-400 text-xs",
         children: "Template sent to Studio."
       }, undefined, false, undefined, this) : null
     ]
@@ -132,7 +132,7 @@ var TemplateShell = ({
   className: "space-y-6",
   children: [
     /* @__PURE__ */ jsxDEV3("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__ */ jsxDEV3("div", {
           className: "flex flex-wrap items-center justify-between gap-4",
@@ -140,15 +140,15 @@ var TemplateShell = ({
             /* @__PURE__ */ jsxDEV3("div", {
               children: [
                 /* @__PURE__ */ jsxDEV3("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__ */ jsxDEV3("h1", {
-                  className: "text-3xl font-bold",
+                  className: "font-bold text-3xl",
                   children: title
                 }, undefined, false, undefined, this),
                 description ? /* @__PURE__ */ jsxDEV3("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
               ]
@@ -178,7 +178,7 @@ var TemplateShell = ({
           children
         }, undefined, false, undefined, this),
         sidebar ? /* @__PURE__ */ jsxDEV3("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
       ]