feat: added a twist

2026-04-01 00:53:55 +02:00
parent 0b7deee59e
commit b40c6436cd
76 changed files with 15121 additions and 64 deletions
--- a/frontend/src/components/editor/PreviewPane.tsx
+++ b/frontend/src/components/editor/PreviewPane.tsx
@@ -0,0 +1,88 @@
+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";
+
+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 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" },
+  ];
+
+  return (
+    <div className="flex flex-col h-full">
+      <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
+          {isCompiling && (
+            <span className="ml-2 text-yellow-500 animate-pulse">
+              compiling…
+            </span>
+          )}
+          {compileError && (
+            <span className="ml-2 text-red-400" title={compileError}>
+              ✗ error
+            </span>
+          )}
+        </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>
+          ))}
+        </div>
+      </div>
+      <ScrollArea className="flex-1 bg-background">
+        {previewMode === "ascii" ? (
+          <pre className="p-4 font-mono text-sm whitespace-pre leading-tight text-green-100/90">
+            {compiledAscii || (
+              <span className="text-muted-foreground">
+                ASCII preview will appear here…
+              </span>
+            )}
+          </pre>
+        ) : previewMode === "micron" ? (
+          compiledMicron ? (
+            <div
+              className="p-4 font-mono text-sm whitespace-pre leading-tight"
+              dangerouslySetInnerHTML={{
+                __html: renderMicron(compiledMicron),
+              }}
+            />
+          ) : (
+            <div className="p-4">
+              <span className="text-muted-foreground text-sm">
+                Micron preview will appear here…
+              </span>
+            </div>
+          )
+        ) : (
+          <pre className="p-4 font-mono text-sm whitespace-pre-wrap break-words text-muted-foreground">
+            {compiledMicron || "Raw Micron output will appear here…"}
+          </pre>
+        )}
+      </ScrollArea>
+    </div>
+  );
+}