feat: dynamic mode

frontend/src/components/editor/PreviewPane.tsx

@@ -1,23 +1,25 @@
 import { ScrollArea } from "@/components/ui/scroll-area";
-import { Button } from "@/components/ui/button";
 import { useEditorStore } from "@/stores/editorStore";
 import { renderMicron } from "./micronRenderer";
 import { cn } from "@/lib/utils";
 
-type PreviewMode = "ascii" | "micron" | "raw";
+type PreviewMode = "ascii" | "micron" | "raw" | "script";
 
 export default function PreviewPane() {
   const previewMode = useEditorStore((s) => s.previewMode);
   const setPreviewMode = useEditorStore((s) => s.setPreviewMode);
   const compiledAscii = useEditorStore((s) => s.compiledAscii);
   const compiledMicron = useEditorStore((s) => s.compiledMicron);
+  const compiledScript = useEditorStore((s) => s.compiledScript);
+  const isDynamic = useEditorStore((s) => s.isDynamic);
   const isCompiling = useEditorStore((s) => s.isCompiling);
   const compileError = useEditorStore((s) => s.compileError);
 
-  const tabs: { value: PreviewMode; label: string }[] = [
-    { value: "ascii", label: "ASCII" },
-    { value: "micron", label: "Micron" },
-    { value: "raw", label: "Raw" },
+  const tabs: { value: PreviewMode; label: string; show: boolean }[] = [
+    { value: "ascii", label: "ASCII", show: true },
+    { value: "micron", label: "Micron", show: true },
+    { value: "raw", label: "Raw", show: true },
+    { value: "script", label: "Script", show: isDynamic },
   ];
 
   return (
@@ -25,6 +27,11 @@ export default function PreviewPane() {
       <div className="flex items-center px-3 py-1.5 border-b shrink-0 gap-2">
         <span className="text-xs text-muted-foreground flex-1">
           Preview
+          {isDynamic && (
+            <span className="ml-1.5 text-amber-400" title="This page has dynamic features (source, if, for)">
+              ⚡ dynamic
+            </span>
+          )}
           {isCompiling && (
             <span className="ml-2 text-yellow-500 animate-pulse">
               compiling…
@@ -37,20 +44,22 @@ export default function PreviewPane() {
           )}
         </span>
         <div className="flex gap-0.5 bg-muted rounded-md p-0.5">
-          {tabs.map((tab) => (
-            <button
-              key={tab.value}
-              onClick={() => setPreviewMode(tab.value)}
-              className={cn(
-                "text-xs px-2 py-0.5 rounded transition-colors",
-                previewMode === tab.value
-                  ? "bg-background text-foreground shadow-sm"
-                  : "text-muted-foreground hover:text-foreground",
-              )}
-            >
-              {tab.label}
-            </button>
-          ))}
+          {tabs
+            .filter((t) => t.show)
+            .map((tab) => (
+              <button
+                key={tab.value}
+                onClick={() => setPreviewMode(tab.value)}
+                className={cn(
+                  "text-xs px-2 py-0.5 rounded transition-colors",
+                  previewMode === tab.value
+                    ? "bg-background text-foreground shadow-sm"
+                    : "text-muted-foreground hover:text-foreground",
+                )}
+              >
+                {tab.label}
+              </button>
+            ))}
         </div>
       </div>
       <ScrollArea className="flex-1 bg-background">
@@ -77,6 +86,10 @@ export default function PreviewPane() {
               </span>
             </div>
           )
+        ) : previewMode === "script" ? (
+          <pre className="p-4 font-mono text-xs whitespace-pre-wrap break-words text-amber-200/80 leading-relaxed">
+            {compiledScript || "No dynamic script generated."}
+          </pre>
         ) : (
           <pre className="p-4 font-mono text-sm whitespace-pre-wrap break-words text-muted-foreground">
             {compiledMicron || "Raw Micron output will appear here…"}