feat(ui,web): Phase 2 — Shared Components & Terminal Panel (#449) (#452)

Co-authored-by: Jason Woltje <jason@diversecanvas.com>
Co-committed-by: Jason Woltje <jason@diversecanvas.com>

packages/ui/src/components/Textarea.tsx

@@ -1,3 +1,4 @@
+import { useState } from "react";
 import type { TextareaHTMLAttributes, ReactElement } from "react";
 
 export interface TextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "size"> {
@@ -16,48 +17,72 @@ export function Textarea({
   resize = "vertical",
   className = "",
   id,
+  style,
+  onFocus,
+  onBlur,
   ...props
 }: TextareaProps): ReactElement {
+  const [isFocused, setIsFocused] = useState(false);
   const textareaId = id ?? `textarea-${Math.random().toString(36).substring(2, 11)}`;
   const errorId = error ? `${textareaId}-error` : undefined;
   const helperId = helperText ? `${textareaId}-helper` : undefined;
 
-  const baseStyles =
-    "px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors";
-  const widthStyles = fullWidth ? "w-full" : "";
-  const resizeStyles = {
+  const resizeStyles: Record<string, string> = {
     none: "resize-none",
     both: "resize",
     horizontal: "resize-x",
     vertical: "resize-y",
   };
-  const errorStyles = error ? "border-red-500 focus:ring-red-500" : "border-gray-300";
 
-  const combinedClassName = [baseStyles, widthStyles, resizeStyles[resize], errorStyles, className]
-    .filter(Boolean)
-    .join(" ");
+  const textareaStyle: React.CSSProperties = {
+    background: "var(--bg-mid)",
+    border: error
+      ? `1px solid var(--danger)`
+      : isFocused
+        ? `1px solid var(--primary)`
+        : `1px solid var(--border)`,
+    color: "var(--text)",
+    outline: "none",
+    boxShadow: isFocused ? `0 0 0 2px rgba(47,128,255,0.2)` : "none",
+    ...style,
+  };
+
+  const widthClass = fullWidth ? "w-full" : "";
 
   return (
     <div className={fullWidth ? "w-full" : ""}>
       {label && (
-        <label htmlFor={textareaId} className="block text-sm font-medium text-gray-700 mb-1">
+        <label
+          htmlFor={textareaId}
+          className="block text-sm font-medium mb-1"
+          style={{ color: "var(--text-2)" }}
+        >
           {label}
         </label>
       )}
       <textarea
         id={textareaId}
-        className={combinedClassName}
+        className={`px-3 py-2 rounded-md transition-colors ${widthClass} ${resizeStyles[resize] ?? "resize-y"} ${className}`}
+        style={textareaStyle}
         aria-invalid={error ? "true" : "false"}
         aria-describedby={[errorId, helperId].filter(Boolean).join(" ") || undefined}
+        onFocus={(e) => {
+          setIsFocused(true);
+          onFocus?.(e);
+        }}
+        onBlur={(e) => {
+          setIsFocused(false);
+          onBlur?.(e);
+        }}
         {...props}
       />
       {error && (
-        <p id={errorId} className="mt-1 text-sm text-red-600" role="alert">
+        <p id={errorId} className="mt-1 text-sm" style={{ color: "var(--danger)" }} role="alert">
           {error}
         </p>
       )}
       {helperText && !error && (
-        <p id={helperId} className="mt-1 text-sm text-gray-500">
+        <p id={helperId} className="mt-1 text-sm" style={{ color: "var(--muted)" }}>
           {helperText}
         </p>
       )}