From 66219aab3afff23fcad80f5326228f5ec3e63349 Mon Sep 17 00:00:00 2001
From: Brett Kolodny <brett.kolodny@coder.com>
Date: Sat, 31 May 2025 21:16:47 +0000
Subject: [PATCH 1/4] fix: editor overflow accounts for copy button

---
 src/Editor.tsx | 27 ++++++++++++++-------------
 1 file changed, 14 insertions(+), 13 deletions(-)

diff --git a/src/Editor.tsx b/src/Editor.tsx
index 72b51db..e80193f 100644
--- a/src/Editor.tsx
+++ b/src/Editor.tsx
@@ -70,9 +70,9 @@ export const Editor: FC = () => {
 	}, [codeCopied]);
 
 	return (
-		<ResizablePanel className="flex flex-col items-start">
+		<ResizablePanel className="relative flex flex-col items-start">
 			{/* EDITOR TOP BAR */}
-			<div className="flex w-full items-center justify-between border-b border-b-surface-quaternary pr-3">
+			<div className="flex h-12 w-full items-center justify-between border-b border-b-surface-quaternary pr-3">
 				<div className="flex">
 					<button className="flex w-fit min-w-[120px] items-center gap-1 border-x bg-surface-secondary px-4 py-3 text-content-primary transition-colors hover:bg-surface-tertiary">
 						<FileJsonIcon className="w-[18px] min-w-[18px]" />
@@ -125,24 +125,25 @@ export const Editor: FC = () => {
 			</div>
 
 			{/* CODE EDITOR */}
-			<div className="relative h-full w-full overflow-y-scroll">
+			<div className="absolute mt-12 flex h-full w-full justify-end p-3">
 				<Button
-					className="absolute top-3 right-3 z-10"
+					className="z-10"
 					variant="subtle"
 					size="sm"
 					onClick={onCopy}
 				>
 					{codeCopied ? <CheckIcon /> : <CopyIcon />} Copy
 				</Button>
-				<div className="h-full w-full bg-surface-secondary font-mono">
-					<CodeEditor
-						value={$code}
-						onValueChange={(code) => $setCode(code)}
-						highlight={(code) => hightlightWithLineNumbers(code, languages.hcl)}
-						textareaId="codeArea"
-						className="editor pt-3"
-					/>
-				</div>
+			</div>
+
+			<div className="h-full w-full overflow-y-scroll bg-surface-secondary font-mono">
+				<CodeEditor
+					value={$code}
+					onValueChange={(code) => $setCode(code)}
+					highlight={(code) => hightlightWithLineNumbers(code, languages.hcl)}
+					textareaId="codeArea"
+					className="editor pt-3"
+				/>
 			</div>
 		</ResizablePanel>
 	);

From 7995e16756f07d55bf753e3c31ce10248aa2c165 Mon Sep 17 00:00:00 2001
From: Brett Kolodny <brett.kolodny@coder.com>
Date: Sat, 31 May 2025 21:17:57 +0000
Subject: [PATCH 2/4] fix: adjust error overlay in light mode

---
 src/Preview.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Preview.tsx b/src/Preview.tsx
index e602fcc..96d2735 100644
--- a/src/Preview.tsx
+++ b/src/Preview.tsx
@@ -199,7 +199,7 @@ const ErrorPane = () => {
 				aria-hidden={true}
 				className={cn(
 					"absolute top-0 left-0 hidden h-full w-full transition-all",
-					$errors.show && "block cursor-pointer bg-black/20 dark:bg-black/50",
+					$errors.show && "block cursor-pointer bg-black/10 dark:bg-black/50",
 				)}
 				onClick={() => {
 					$toggleShowError(false);

From fcb18595ef1a32c3d9765875fa041df113b6cc8a Mon Sep 17 00:00:00 2001
From: Brett Kolodny <brett.kolodny@coder.com>
Date: Sat, 31 May 2025 22:32:19 +0000
Subject: [PATCH 3/4] feat: animations for error drawer

---
 src/Preview.tsx | 117 +++++++++++++++++++++++++++---------------------
 1 file changed, 67 insertions(+), 50 deletions(-)

diff --git a/src/Preview.tsx b/src/Preview.tsx
index 96d2735..e2be05c 100644
--- a/src/Preview.tsx
+++ b/src/Preview.tsx
@@ -1,5 +1,6 @@
 import { Button } from "@/components/Button";
 import { ResizablePanel } from "@/components/Resizable";
+import { useTheme } from "@/contexts/theme";
 import {
 	type Diagnostic,
 	type InternalDiagnostic,
@@ -10,7 +11,8 @@ import { useDebouncedValue } from "@/hooks/debounce";
 import { useStore } from "@/store";
 import { cn } from "@/utils/cn";
 import { ActivityIcon, ExternalLinkIcon, LoaderIcon } from "lucide-react";
-import { type FC, useEffect, useState } from "react";
+import { AnimatePresence, motion } from "motion/react";
+import { type FC, useEffect, useMemo, useState } from "react";
 
 export const Preview: FC = () => {
 	const $wasmState = useStore((state) => state.wasmState);
@@ -183,60 +185,75 @@ const ErrorPane = () => {
 	const $errors = useStore((state) => state.errors);
 	const $toggleShowError = useStore((state) => state.toggleShowError);
 
-	if ($errors.diagnostics.length === 0) {
-		return null;
-	}
+	const hasErrors = useMemo(() => $errors.diagnostics.length > 0, [$errors]);
 
 	return (
 		<>
-			{/*
-			 * biome-ignore lint/a11y/useKeyWithClickEvents: key events don't seem to
-			 * work for divs, and I'm otherwise not sure how to make this element
-			 * more accesible. But I think it's fine since the functionality is able to
-			 * be used with the button.
-			 */}
-			<div
-				aria-hidden={true}
-				className={cn(
-					"absolute top-0 left-0 hidden h-full w-full transition-all",
-					$errors.show && "block cursor-pointer bg-black/10 dark:bg-black/50",
-				)}
-				onClick={() => {
-					$toggleShowError(false);
-				}}
-			>
-				{/* OVERLAY */}
-			</div>
+			<AnimatePresence propagate={true}>
+				{$errors.show && hasErrors ? (
+					// lint/a11y/useKeyWithClickEvents: key events don't seem to
+					// work for divs, and I'm otherwise not sure how to make this element
+					// more accesible. But I think it's fine since the functionality is able to
+					// be used with the button below.
+					<motion.div
+						initial={{ opacity: 0 }}
+						animate={{ opacity: 1 }}
+						exit={{ opacity: 0 }}
+						aria-hidden={true}
+						className="absolute top-0 left-0 h-full w-full cursor-pointer bg-black/10 dark:bg-black/50"
+						onClick={() => {
+							$toggleShowError(false);
+						}}
+					>
+						{/* OVERLAY */}
+					</motion.div>
+				) : null}
+			</AnimatePresence>
 
-			<div
-				role="alertdialog"
-				className={cn(
-					"absolute bottom-0 left-0 flex max-h-[60%] w-full flex-col justify-start",
-					$errors.show && "h-auto",
-				)}
-			>
-				<button
-					className="flex h-4 min-h-4 w-full items-center justify-center rounded-t-xl bg-border-destructive"
-					onClick={() => $toggleShowError()}
-					aria-label={$errors.show ? "Hide error dialog" : "Show error dialog"}
-				>
-					<div className="h-0.5 w-2/3 max-w-32 rounded-full bg-white/40"></div>
-				</button>
+			<AnimatePresence propagate={true}>
+				{hasErrors ? (
+					<motion.div
+						role="alertdialog"
+						transition={{
+							when: "afterChildren",
+						}}
+						exit={{ opacity: 0}}
+						className={cn(
+							"absolute bottom-0 left-0 flex max-h-[60%] w-full flex-col justify-start",
+							$errors.show && "h-auto",
+						)}
+					>
+						<motion.button
+							className="flex h-4 min-h-4 w-full items-center justify-center rounded-t-xl bg-border-destructive"
+							onClick={() => $toggleShowError()}
+							aria-label={
+								$errors.show ? "Hide error dialog" : "Show error dialog"
+							}
+						>
+							<div className="h-0.5 w-2/3 max-w-32 rounded-full bg-white/40"></div>
+						</motion.button>
 
-				<div
-					aria-hidden={!$errors.show}
-					className={cn(
-						"flex flex-col gap-6 overflow-y-scroll bg-surface-secondary p-6",
-						!$errors.show && "pointer-events-none h-0 p-0",
-					)}
-				>
-					<div className="flex w-full flex-col gap-3">
-						{$errors.diagnostics.map((diagnostic, index) => (
-							<ErrorBlock diagnostic={diagnostic} key={index} />
-						))}
-					</div>
-				</div>
-			</div>
+						<AnimatePresence propagate={true}>
+							{$errors.show ? (
+								<motion.div
+									initial={{ height: 0 }}
+									animate={{
+										height: "auto",
+									}}
+									exit={{ height: 0 }}
+									className="flex flex-col gap-6 overflow-y-scroll bg-surface-secondary"
+								>
+									<div className="flex w-full flex-col gap-3 p-6">
+										{$errors.diagnostics.map((diagnostic, index) => (
+											<ErrorBlock diagnostic={diagnostic} key={index} />
+										))}
+									</div>
+								</motion.div>
+							) : null}
+						</AnimatePresence>
+					</motion.div>
+				) : null}
+			</AnimatePresence>
 		</>
 	);
 };

From fc9947f0510877f5215e8b60a357e594010050b0 Mon Sep 17 00:00:00 2001
From: Brett Kolodny <brett.kolodny@coder.com>
Date: Sat, 31 May 2025 22:39:13 +0000
Subject: [PATCH 4/4] chore: change debouncing animation

---
 src/Preview.tsx | 25 ++++++++++++++++++-------
 1 file changed, 18 insertions(+), 7 deletions(-)

diff --git a/src/Preview.tsx b/src/Preview.tsx
index e2be05c..2cb809f 100644
--- a/src/Preview.tsx
+++ b/src/Preview.tsx
@@ -89,9 +89,23 @@ export const Preview: FC = () => {
 				)}
 			>
 				<div className="flex w-full items-center justify-between">
-					<p className="font-semibold text-3xl text-content-primary">
-						Parameters
-					</p>
+					<div className="flex items-center justify-center gap-4">
+						<p className="font-semibold text-3xl text-content-primary">
+							Parameters
+						</p>
+
+						<AnimatePresence>
+							{isDebouncing && $wasmState === "loaded" ? (
+								<motion.div
+									initial={{ opacity: 0, scale: 0.75 }}
+									animate={{ opacity: 1, scale: 1 }}
+									exit={{ opacity: 0, scale: 0.75 }}
+								>
+									<LoaderIcon className="animate-spin text-content-primary" />
+								</motion.div>
+							) : null}
+						</AnimatePresence>
+					</div>
 					<Button variant="destructive">Reset form</Button>
 				</div>
 
@@ -100,9 +114,6 @@ export const Preview: FC = () => {
 						"flex h-full w-full items-center justify-center overflow-x-clip rounded-xl border p-4",
 						output && "block overflow-y-scroll",
 					)}
-					style={{
-						opacity: isDebouncing && $wasmState === "loaded" ? 0.5 : 1,
-					}}
 				>
 					{output ? (
 						<div className="flex flex-col gap-4">
@@ -217,7 +228,7 @@ const ErrorPane = () => {
 						transition={{
 							when: "afterChildren",
 						}}
-						exit={{ opacity: 0}}
+						exit={{ opacity: 0 }}
 						className={cn(
 							"absolute bottom-0 left-0 flex max-h-[60%] w-full flex-col justify-start",
 							$errors.show && "h-auto",