@ttsc/playground 0.19.0 → 0.19.2

package/src/react/ConsoleViewer.tsx

@@ -15,7 +15,7 @@ export function ConsoleViewer({
 }: ConsoleViewerProps) {
   if (messages.length === 0)
     return (
-      <div className="h-full w-full flex items-center justify-center text-neutral-600 font-mono text-[11px] px-4 text-center">
+      <div className="flex h-full w-full items-center justify-center px-4 text-center font-mono text-[11px] text-slate-400">
         {empty}
       </div>
     );
@@ -24,7 +24,7 @@ export function ConsoleViewer({
       {messages.map((msg, i) => (
         <div
           key={i}
-          className="py-1 border-b border-neutral-900/70 last:border-b-0 flex gap-2"
+          className="flex gap-2 border-b border-[#d8e7f4] py-1 last:border-b-0"
         >
           <span
             className={`shrink-0 text-[10px] uppercase tracking-wider w-12 ${typeColor(
@@ -33,7 +33,7 @@ export function ConsoleViewer({
           >
             {msg.type}
           </span>
-          <span className="flex-1 break-words whitespace-pre-wrap text-neutral-200">
+          <span className="flex-1 whitespace-pre-wrap break-words text-slate-700">
             {(Array.isArray(msg.value) ? msg.value : [msg.value]).map(
               (arg, idx) => (
                 <span key={idx}>
@@ -52,33 +52,33 @@ export function ConsoleViewer({
 function typeColor(type: IConsoleMessage["type"]): string {
   switch (type) {
     case "error":
-      return "text-red-400";
+      return "text-red-600";
     case "warn":
-      return "text-yellow-400";
+      return "text-amber-600";
     case "info":
-      return "text-sky-400";
+      return "text-sky-700";
     case "debug":
-      return "text-fuchsia-400";
+      return "text-fuchsia-700";
     case "dir":
     case "table":
-      return "text-cyan-400";
+      return "text-cyan-700";
     default:
-      return "text-emerald-400";
+      return "text-emerald-700";
   }
 }
 
 function formatValue(value: unknown, depth = 0): JSX.Element {
   if (typeof value === "string")
-    return <span className="text-amber-200">{JSON.stringify(value)}</span>;
+    return <span className="text-amber-700">{JSON.stringify(value)}</span>;
   if (typeof value === "number")
-    return <span className="text-purple-300">{String(value)}</span>;
+    return <span className="text-purple-700">{String(value)}</span>;
   if (typeof value === "boolean")
-    return <span className="text-sky-300">{String(value)}</span>;
-  if (value === null) return <span className="text-neutral-500">null</span>;
+    return <span className="text-sky-700">{String(value)}</span>;
+  if (value === null) return <span className="text-slate-500">null</span>;
   if (value === undefined)
-    return <span className="text-neutral-500">undefined</span>;
+    return <span className="text-slate-500">undefined</span>;
   if (typeof value === "function")
-    return <span className="text-neutral-500">[Function]</span>;
+    return <span className="text-slate-500">[Function]</span>;
   if (Array.isArray(value))
     return (
       <span>
@@ -94,21 +94,21 @@ function formatValue(value: unknown, depth = 0): JSX.Element {
     );
   if (value instanceof Error)
     return (
-      <span className="text-red-300">
+      <span className="text-red-700">
         {value.name}: {value.message}
       </span>
     );
   try {
     const entries = Object.entries(value as Record<string, unknown>);
     if (entries.length === 0) return <span>{"{}"}</span>;
-    if (depth > 4) return <span className="text-neutral-500">[...]</span>;
+    if (depth > 4) return <span className="text-slate-500">[...]</span>;
     return (
       <span>
         {"{"}
         {entries.map(([k, v], idx) => (
           <span key={k}>
             {idx > 0 ? ", " : " "}
-            <span className="text-blue-300">{k}</span>:{" "}
+            <span className="text-[#3178c6]">{k}</span>:{" "}
             {formatValue(v, depth + 1)}
           </span>
         ))}

package/src/react/DependencyProgressModal.tsx

@@ -20,34 +20,34 @@ export function DependencyProgressModal({
       : progress.packageName;
 
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 px-4">
-      <div className="w-full max-w-md rounded-lg border border-neutral-700 bg-neutral-950 p-5 shadow-2xl">
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-[#102a43]/35 px-4 backdrop-blur-sm">
+      <div className="w-full max-w-md rounded-2xl border border-[#b9d5ee] bg-white p-5 shadow-[0_28px_70px_rgba(35,90,151,0.25)]">
         <div className="flex items-start justify-between gap-4">
           <div>
-            <div className="text-[11px] font-mono uppercase text-blue-300">
+            <div className="font-mono text-[11px] uppercase text-[#3178c6]">
               Dependencies
             </div>
-            <h2 className="mt-1 text-base font-mono text-white">
+            <h2 className="mt-1 font-mono text-base text-[#102a43]">
               Installing npm packages
             </h2>
           </div>
-          <div className="text-[11px] font-mono text-neutral-500">
+          <div className="font-mono text-[11px] text-slate-500">
             {progress.completed}/{total}
           </div>
         </div>
 
-        <div className="mt-4 h-2 overflow-hidden rounded-full bg-neutral-800">
+        <div className="mt-4 h-2 overflow-hidden rounded-full bg-[#e7f0f8]">
           <div
-            className="h-full bg-blue-400 transition-[width]"
+            className="h-full bg-[#3178c6] transition-[width]"
             style={{ width: `${Math.max(8, ratio * 100)}%` }}
           />
         </div>
 
         <div className="mt-4 space-y-1 font-mono">
           {activePackage && (
-            <div className="text-[12px] text-neutral-200">{activePackage}</div>
+            <div className="text-[12px] text-slate-700">{activePackage}</div>
           )}
-          <div className="text-[11px] text-neutral-400">{progress.message}</div>
+          <div className="text-[11px] text-slate-500">{progress.message}</div>
         </div>
 
         {packages.length > 0 && (
@@ -55,13 +55,13 @@ export function DependencyProgressModal({
             {packages.slice(0, 8).map((name) => (
               <span
                 key={name}
-                className="rounded border border-neutral-800 bg-neutral-900 px-2 py-1 text-[10px] font-mono text-neutral-300"
+                className="rounded border border-[#d2e4f4] bg-[#f7fbff] px-2 py-1 font-mono text-[10px] text-slate-600"
               >
                 {name}
               </span>
             ))}
             {packages.length > 8 && (
-              <span className="rounded border border-neutral-800 bg-neutral-900 px-2 py-1 text-[10px] font-mono text-neutral-500">
+              <span className="rounded border border-[#d2e4f4] bg-[#f7fbff] px-2 py-1 font-mono text-[10px] text-slate-500">
                 +{packages.length - 8}
               </span>
             )}

package/src/react/DiagnosticsPanel.tsx

@@ -15,19 +15,19 @@ export function DiagnosticsPanel({
 
   if (diagnostics.length === 0)
     return (
-      <div className="shrink-0 px-4 py-2 border-t border-neutral-800/70 bg-neutral-950 flex items-center gap-3">
+      <div className="flex shrink-0 items-center gap-3 border-t border-[#c7dff4] bg-[#eef6ff] px-4 py-2">
         <span className="text-emerald-400 text-xs">●</span>
-        <span className="text-[12px] font-mono text-neutral-400">
+        <span className="font-mono text-[12px] text-slate-600">
           0 errors · 0 warnings
         </span>
       </div>
     );
 
   return (
-    <div className="shrink-0 border-t border-neutral-800/70 bg-neutral-950">
+    <div className="shrink-0 border-t border-[#c7dff4] bg-[#eef6ff]">
       <button
         onClick={() => setExpanded((v) => !v)}
-        className="w-full px-4 py-2 flex items-center gap-3 hover:bg-neutral-900/50 transition-colors text-left"
+        className="flex w-full items-center gap-3 px-4 py-2 text-left transition-colors hover:bg-[#e1effc]"
       >
         <span
           className={`text-xs ${
@@ -36,20 +36,20 @@ export function DiagnosticsPanel({
         >
           ●
         </span>
-        <span className="text-[12px] font-mono text-neutral-300">
+        <span className="font-mono text-[12px] text-slate-700">
           {errorCount} error{errorCount === 1 ? "" : "s"} · {warnCount} warning
           {warnCount === 1 ? "" : "s"}
         </span>
-        <span className="ml-auto text-[10px] font-mono text-neutral-600">
+        <span className="ml-auto font-mono text-[10px] text-slate-400">
           {expanded ? "▲ collapse" : "▼ expand"}
         </span>
       </button>
       {expanded && (
-        <div className="border-t border-neutral-800/70 max-h-48 overflow-auto">
+        <div className="max-h-48 overflow-auto border-t border-[#c7dff4]">
           {diagnostics.map((d, i) => (
             <div
               key={i}
-              className="px-4 py-2 flex gap-3 text-[12px] font-mono border-b border-neutral-900 last:border-b-0"
+              className="flex gap-3 border-b border-[#d8e7f4] px-4 py-2 font-mono text-[12px] last:border-b-0"
             >
               <span
                 className={`shrink-0 ${
@@ -58,13 +58,13 @@ export function DiagnosticsPanel({
               >
                 {d.severity === "error" ? "✗" : "!"}
               </span>
-              <span className="shrink-0 text-neutral-500 w-16">
+              <span className="w-16 shrink-0 text-slate-500">
                 {d.line}:{d.column}
               </span>
-              <span className="shrink-0 text-neutral-600 w-16">
+              <span className="w-16 shrink-0 text-slate-400">
                 {d.code ?? ""}
               </span>
-              <span className="text-neutral-200">{d.message}</span>
+              <span className="text-slate-700">{d.message}</span>
             </div>
           ))}
         </div>

package/src/react/ExamplePicker.tsx

@@ -52,19 +52,19 @@ export function ExamplePicker({
       <button
         data-playground-examples-toggle
         onClick={() => setOpen((v) => !v)}
-        className="px-3 py-1.5 text-xs font-mono text-neutral-300 border border-neutral-800 rounded-md hover:border-neutral-600 hover:bg-neutral-900 transition-colors"
+        className="rounded-md border border-[#b9d5ee] bg-white px-3 py-1.5 font-mono text-xs text-[#235a97] transition-colors hover:border-[#3178c6] hover:bg-[#eaf4ff]"
         title="Cmd/Ctrl+K"
       >
         Examples ▾
       </button>
       {open && (
-        <div className="absolute right-0 top-full mt-2 w-80 rounded-lg border border-neutral-800 bg-neutral-950 shadow-[0_10px_40px_rgba(0,0,0,0.6)] z-10 overflow-hidden">
+        <div className="absolute right-0 top-full z-10 mt-2 w-80 overflow-hidden rounded-xl border border-[#b9d5ee] bg-white shadow-[0_14px_42px_rgba(49,120,198,0.18)]">
           {Object.entries(grouped).map(([group, items]) => (
             <div
               key={group}
-              className="border-b border-neutral-900 last:border-b-0"
+              className="border-b border-[#d8e7f4] last:border-b-0"
             >
-              <div className="px-3 py-1.5 text-[10px] font-mono uppercase tracking-wider text-neutral-600">
+              <div className="bg-[#f7fbff] px-3 py-1.5 font-mono text-[10px] uppercase tracking-wider text-slate-500">
                 {groupLabels?.[group] ?? group}
               </div>
               {items.map((item) => (
@@ -74,12 +74,12 @@ export function ExamplePicker({
                     onPick(item.id);
                     setOpen(false);
                   }}
-                  className="w-full text-left px-3 py-2 hover:bg-neutral-900 transition-colors"
+                  className="w-full px-3 py-2 text-left transition-colors hover:bg-[#eaf4ff]"
                 >
-                  <div className="text-[12px] font-mono text-neutral-100">
+                  <div className="font-mono text-[12px] text-[#102a43]">
                     {item.title}
                   </div>
-                  <div className="text-[10px] text-neutral-500 mt-0.5 leading-snug">
+                  <div className="mt-0.5 text-[10px] leading-snug text-slate-500">
                     {item.description}
                   </div>
                 </button>

package/src/react/LintPane.tsx

@@ -15,10 +15,10 @@ export function LintPane({
 }) {
   if (diagnostics.length === 0)
     return (
-      <div className="flex flex-col items-center justify-center h-full text-neutral-500 font-mono text-sm gap-2">
+      <div className="flex h-full flex-col items-center justify-center gap-2 font-mono text-sm text-slate-500">
         <span className="text-emerald-400 text-xl">✓</span>
         <span>No lint diagnostics.</span>
-        <span className="text-[10px] text-neutral-600 max-w-xs text-center">
+        <span className="max-w-xs text-center text-[10px] text-slate-400">
           {emptyHint}
         </span>
       </div>
@@ -28,7 +28,7 @@ export function LintPane({
       {diagnostics.map((d, i) => (
         <div
           key={i}
-          className="flex gap-3 p-3 rounded-md bg-neutral-900/60 border border-neutral-800/80"
+          className="flex gap-3 rounded-lg border border-[#d2e4f4] bg-[#f7fbff] p-3"
         >
           <span
             className={`mt-0.5 text-[10px] font-mono px-1.5 py-0.5 rounded shrink-0 ${
@@ -40,14 +40,14 @@ export function LintPane({
             {d.severity}
           </span>
           <div className="flex-1 min-w-0">
-            <div className="flex items-center gap-2 text-[11px] font-mono text-neutral-500 mb-1">
+            <div className="mb-1 flex items-center gap-2 font-mono text-[11px] text-slate-500">
               <span>{d.code}</span>
               <span>·</span>
               <span>
                 {d.line}:{d.column}
               </span>
             </div>
-            <div className="text-[13px] text-neutral-200 font-mono">
+            <div className="font-mono text-[13px] text-slate-700">
               {d.message}
             </div>
           </div>

package/src/react/OptionsPanel.tsx

@@ -62,7 +62,7 @@ export function OptionsPanel({
 
   return (
     <div
-      className="fixed inset-0 z-50 bg-black/60 backdrop-blur-sm flex items-center justify-center"
+      className="fixed inset-0 z-50 flex items-center justify-center bg-[#102a43]/35 backdrop-blur-sm"
       onClick={onClose}
     >
       <div
@@ -70,19 +70,19 @@ export function OptionsPanel({
         role="dialog"
         aria-modal="true"
         aria-labelledby="playground-options-title"
-        className="w-[480px] max-w-[90vw] rounded-2xl border border-neutral-800 bg-neutral-950 shadow-[0_30px_80px_rgba(0,0,0,0.7)]"
+        className="w-[480px] max-w-[90vw] rounded-2xl border border-[#b9d5ee] bg-white shadow-[0_30px_80px_rgba(35,90,151,0.25)]"
         onClick={(e) => e.stopPropagation()}
       >
-        <div className="flex items-center justify-between px-6 py-4 border-b border-neutral-800/70">
+        <div className="flex items-center justify-between border-b border-[#c7dff4] bg-[#f7fbff] px-6 py-4">
           <h2
             id="playground-options-title"
-            className="text-base font-semibold text-white"
+            className="text-base font-semibold text-[#102a43]"
           >
             {title}
           </h2>
           <button
             onClick={onClose}
-            className="text-neutral-500 hover:text-white transition-colors"
+            className="text-slate-400 transition-colors hover:text-[#235a97]"
             aria-label="Close options"
           >
             ✕
@@ -90,7 +90,7 @@ export function OptionsPanel({
         </div>
         <div className="p-6 space-y-6">
           <div>
-            <div className="text-[10px] font-mono uppercase tracking-wider text-neutral-600 mb-3">
+            <div className="mb-3 font-mono text-[10px] uppercase tracking-wider text-slate-500">
               Plugins
             </div>
             <div className="space-y-3">
@@ -106,10 +106,10 @@ export function OptionsPanel({
                     className="mt-1 w-4 h-4 accent-blue-500"
                   />
                   <div className="flex-1">
-                    <div className="text-sm font-mono text-neutral-100 group-hover:text-white transition-colors">
+                    <div className="font-mono text-sm text-slate-800 transition-colors group-hover:text-[#235a97]">
                       {t.label}
                     </div>
-                    <div className="text-[11px] text-neutral-500 leading-snug">
+                    <div className="text-[11px] leading-snug text-slate-500">
                       {t.description}
                     </div>
                   </div>
@@ -118,10 +118,10 @@ export function OptionsPanel({
             </div>
           </div>
         </div>
-        <div className="px-6 py-4 border-t border-neutral-800/70 flex justify-end">
+        <div className="flex justify-end border-t border-[#c7dff4] bg-[#f7fbff] px-6 py-4">
           <button
             onClick={onClose}
-            className="px-4 py-2 text-xs font-mono text-neutral-900 bg-white rounded-md hover:shadow-[0_0_30px_rgba(255,255,255,0.2)] transition-shadow"
+            className="rounded-md bg-[#3178c6] px-4 py-2 font-mono text-xs text-white transition-colors hover:bg-[#235a97]"
           >
             Done
           </button>

package/src/react/PlaygroundShell.tsx

@@ -15,7 +15,6 @@ import type { IPlaygroundDependencyProgress } from "../structures/IPlaygroundDep
 import type { IPlaygroundShellProps } from "../structures/IPlaygroundShellProps";
 import type { ITransformOptions } from "../structures/ITransformOptions";
 import { ConsoleViewer } from "./ConsoleViewer";
-import { createCompilerClient } from "./createCompilerClient";
 import { DEFAULT_OPTION_TOGGLES } from "./DEFAULT_OPTION_TOGGLES";
 import { DependencyProgressModal } from "./DependencyProgressModal";
 import { DiagnosticsPanel } from "./DiagnosticsPanel";
@@ -24,6 +23,7 @@ import { LintPane } from "./LintPane";
 import { OptionsPanel } from "./OptionsPanel";
 import { ResultViewer } from "./ResultViewer";
 import { SourceEditor } from "./SourceEditor";
+import { createCompilerClient } from "./createCompilerClient";
 
 const DEFAULT_OPTIONS: ITransformOptions = {
   typia: true,
@@ -64,9 +64,7 @@ export function PlaygroundShell({
   const [optionsOpen, setOptionsOpen] = useState(false);
   const [running, setRunning] = useState(false);
   const [shareToast, setShareToast] = useState(false);
-  const [consoleMessages, setConsoleMessages] = useState<IConsoleMessage[]>(
-    [],
-  );
+  const [consoleMessages, setConsoleMessages] = useState<IConsoleMessage[]>([]);
   const [executing, setExecuting] = useState(false);
   const [bootError, setBootError] = useState<unknown>(null);
   const [bootPhase, setBootPhase] = useState<"booting" | "ready" | "failed">(
@@ -284,8 +282,7 @@ export function PlaygroundShell({
           }, 2400);
           return error;
         } finally {
-          if (dependencyAbort.current === abort)
-            dependencyAbort.current = null;
+          if (dependencyAbort.current === abort) dependencyAbort.current = null;
         }
       });
       dependencyInstallChain.current = task.then(() => {});
@@ -302,11 +299,7 @@ export function PlaygroundShell({
   // pane is rendered. Re-running the wasm-heavy pipeline on every tab
   // click would burn multiple seconds of work per click.
   const run = useCallback(
-    async (
-      input: string,
-      opts: ITransformOptions,
-      version: number,
-    ) => {
+    async (input: string, opts: ITransformOptions, version: number) => {
       const epoch = ++compileEpoch.current;
       setRunning(true);
       try {
@@ -544,7 +537,12 @@ export function PlaygroundShell({
     // React state, so including `source` here would re-create the
     // callback per keystroke and propagate into the global keydown
     // useEffect, churning event-listener add/remove every character.
-  }, [createCompilerService, executeBundle, installDependenciesForSource, options]);
+  }, [
+    createCompilerService,
+    executeBundle,
+    installDependenciesForSource,
+    options,
+  ]);
 
   const allDiagnostics = useMemo(() => {
     const fromCompile: ICompilerService.IDiagnostic[] = [];
@@ -602,10 +600,10 @@ export function PlaygroundShell({
 
   if (bootPhase === "failed") {
     return (
-      <div className="flex flex-col h-screen w-full items-center justify-center bg-neutral-950 text-neutral-200 gap-5 px-6 text-center">
+      <div className="flex h-screen w-full flex-col items-center justify-center gap-5 bg-[#f7fbff] px-6 text-center text-[#102a43]">
         <span className="text-red-400 text-3xl">⚠</span>
         <h1 className="text-lg font-mono">Playground failed to boot.</h1>
-        <pre className="max-w-xl text-[12px] font-mono text-neutral-400 whitespace-pre-wrap break-words">
+        <pre className="max-w-xl whitespace-pre-wrap break-words font-mono text-[12px] text-slate-500">
           {(() => {
             const e = bootError;
             if (e instanceof Error) return `${e.name}: ${e.message}`;
@@ -639,7 +637,7 @@ export function PlaygroundShell({
               }
             })();
           }}
-          className="px-5 py-2 text-xs font-mono text-neutral-900 bg-white rounded-md hover:shadow-[0_0_30px_rgba(255,255,255,0.2)] transition-shadow"
+          className="rounded-md bg-[#3178c6] px-5 py-2 font-mono text-xs text-white shadow-[0_8px_22px_rgba(49,120,198,0.24)] transition-colors hover:bg-[#235a97]"
         >
           Retry
         </button>
@@ -648,54 +646,28 @@ export function PlaygroundShell({
   }
 
   return (
-    <div className="flex flex-col h-screen w-full bg-neutral-950 text-neutral-200 overflow-hidden">
-      {/* ── Toolbar ── */}
-      <div className="flex items-center gap-3 px-4 py-2.5 border-b border-neutral-800/70 bg-neutral-950 shrink-0">
-        {brand}
-        <span className="text-neutral-700">/</span>
-        <span className="text-sm text-neutral-400">Playground</span>
-
-        <div className="ml-auto flex items-center gap-2">
-          <ExamplePicker
-            examples={examples}
-            onPick={onPickExample}
-            groupLabels={exampleGroupLabels}
-          />
-          <button
-            onClick={() => setOptionsOpen((v) => !v)}
-            className="px-3 py-1.5 text-xs font-mono text-neutral-300 border border-neutral-800 rounded-md hover:border-neutral-600 hover:bg-neutral-900 transition-colors"
-          >
-            Options
-          </button>
-          <button
-            onClick={onReset}
-            className="px-3 py-1.5 text-xs font-mono text-neutral-400 hover:text-neutral-200 transition-colors"
-          >
-            Reset
-          </button>
-          <button
-            onClick={onShare}
-            className="px-3 py-1.5 text-xs font-mono text-neutral-900 bg-white rounded-md hover:shadow-[0_0_30px_rgba(255,255,255,0.2)] transition-shadow"
-          >
-            {shareToast ? "Copied ✓" : "Share"}
-          </button>
-        </div>
-      </div>
-
+    <div className="flex h-screen w-full flex-col overflow-hidden bg-white text-[#102a43]">
       {sourceFromURL && (
-        <div className="shrink-0 px-4 py-1.5 text-[11px] font-mono text-amber-200 bg-amber-500/10 border-b border-amber-700/40">
+        <div className="shrink-0 border-b border-amber-300 bg-amber-50 px-4 py-1.5 font-mono text-[11px] text-amber-800">
           Source loaded from share URL. Hit Reset to return to the default
           example.
         </div>
       )}
 
       {shareWarn && (
-        <div className="shrink-0 px-4 py-1.5 text-[11px] font-mono text-amber-200 bg-amber-500/10 border-b border-amber-700/40">
+        <div className="shrink-0 border-b border-amber-300 bg-amber-50 px-4 py-1.5 font-mono text-[11px] text-amber-800">
           {shareWarn}
         </div>
       )}
 
-      <div className="flex items-center gap-0 border-b border-neutral-800/70 bg-neutral-950 shrink-0">
+      <div className="flex shrink-0 flex-wrap items-center gap-0 border-b border-[#c7dff4] bg-white">
+        {brand ? (
+          <div className="flex items-center gap-2 border-r border-[#c7dff4] px-4 py-2">
+            {brand}
+            <span className="text-[#9db6cb]">/</span>
+            <span className="text-sm text-[#526b82]">Playground</span>
+          </div>
+        ) : null}
         {(
           [
             { id: "javascript", label: "Compiled JS" },
@@ -707,29 +679,47 @@ export function PlaygroundShell({
             onClick={() => setTarget(tab.id)}
             className={`px-4 py-2 text-[12px] font-mono border-b-2 transition-colors ${
               target === tab.id
-                ? "text-white border-blue-400"
-                : "text-neutral-500 border-transparent hover:text-neutral-300"
+                ? "border-[#3178c6] text-[#235a97]"
+                : "border-transparent text-slate-400 hover:text-[#3178c6]"
             }`}
           >
             {tab.label}
           </button>
         ))}
-        <div className="ml-auto px-4 text-[10px] font-mono text-neutral-600">
-          {bootPhase === "booting"
-            ? "booting wasm…"
-            : running
-              ? "compiling…"
-              : "ready"}
+        <div className="ml-auto flex w-full items-center justify-end gap-2 border-t border-[#d8e7f4] px-4 py-1.5 sm:w-auto sm:border-t-0 sm:pl-0">
+          <ExamplePicker
+            examples={examples}
+            onPick={onPickExample}
+            groupLabels={exampleGroupLabels}
+          />
+          <button
+            onClick={() => setOptionsOpen((v) => !v)}
+            className="rounded-md border border-[#b9d5ee] bg-white px-3 py-1.5 font-mono text-xs text-[#235a97] transition-colors hover:border-[#3178c6] hover:bg-[#eaf4ff]"
+          >
+            Options
+          </button>
+          <button
+            onClick={onReset}
+            className="px-3 py-1.5 font-mono text-xs text-slate-500 transition-colors hover:text-[#235a97]"
+          >
+            Reset
+          </button>
+          <button
+            onClick={onShare}
+            className="rounded-md bg-[#3178c6] px-3 py-1.5 font-mono text-xs text-white shadow-[0_6px_16px_rgba(49,120,198,0.22)] transition-colors hover:bg-[#235a97]"
+          >
+            {shareToast ? "Copied ✓" : "Share"}
+          </button>
         </div>
       </div>
 
       <div className="flex flex-1 min-h-0 flex-col md:flex-row">
-        <div className="flex-1 min-w-0 md:border-r border-neutral-800/70 flex flex-col h-1/2 md:h-full">
-          <div className="flex items-center justify-between px-4 py-1.5 border-b border-neutral-800/70 bg-neutral-950">
-            <span className="text-[11px] font-mono text-neutral-500">
+        <div className="flex h-1/2 min-w-0 flex-1 flex-col border-[#c7dff4] md:h-full md:border-r">
+          <div className="flex items-center justify-between border-b border-[#c7dff4] bg-[#eef6ff] px-4 py-1.5">
+            <span className="font-mono text-[11px] text-slate-500">
               src/playground.ts
             </span>
-            <span className="text-[10px] font-mono text-neutral-700">
+            <span className="font-mono text-[10px] text-slate-400">
               {source.split("\n").length} lines
             </span>
           </div>
@@ -742,14 +732,14 @@ export function PlaygroundShell({
           </div>
         </div>
 
-        <div className="flex-1 min-w-0 flex flex-col h-1/2 md:h-full border-t md:border-t-0 border-neutral-800/70">
-          <div className="flex items-center justify-between px-4 py-1.5 border-b border-neutral-800/70 bg-neutral-950">
-            <span className="text-[11px] font-mono text-neutral-500">
+        <div className="flex h-1/2 min-w-0 flex-1 flex-col border-t border-[#c7dff4] md:h-full md:border-t-0">
+          <div className="flex items-center justify-between border-b border-[#c7dff4] bg-[#eef6ff] px-4 py-1.5">
+            <span className="font-mono text-[11px] text-slate-500">
               {target === "javascript"
                 ? resultCaption(options)
                 : "lint diagnostics"}
             </span>
-            <span className="text-[10px] font-mono text-neutral-700">
+            <span className="font-mono text-[10px] text-slate-400">
               {result?.type === "error" ? "error" : ""}
             </span>
           </div>
@@ -774,22 +764,22 @@ export function PlaygroundShell({
       </div>
 
       {bundleError && (
-        <div className="shrink-0 px-4 py-1.5 text-[11px] font-mono text-red-300 bg-red-500/10 border-t border-red-700/40">
+        <div className="shrink-0 border-t border-red-300 bg-red-50 px-4 py-1.5 font-mono text-[11px] text-red-700">
           Bundle failed — {bundleError}
         </div>
       )}
 
       {executeBundle && (
-        <div className="shrink-0 border-t border-neutral-800/70 bg-neutral-950 flex flex-col h-48">
-          <div className="flex items-center justify-between px-4 py-1.5 border-b border-neutral-800/70">
-            <span className="text-[11px] font-mono text-neutral-500">
+        <div className="flex h-48 shrink-0 flex-col border-t border-[#c7dff4] bg-[#f7fbff]">
+          <div className="flex items-center justify-between border-b border-[#d8e7f4] px-4 py-1.5">
+            <span className="font-mono text-[11px] text-slate-500">
               console output
             </span>
             <div className="flex items-center gap-2">
               {consoleMessages.length > 0 && (
                 <button
                   onClick={() => setConsoleMessages([])}
-                  className="px-2 py-1 text-[10px] font-mono text-neutral-500 hover:text-neutral-200 transition-colors"
+                  className="px-2 py-1 font-mono text-[10px] text-slate-500 transition-colors hover:text-[#235a97]"
                 >
                   Clear
                 </button>
@@ -797,7 +787,7 @@ export function PlaygroundShell({
               <button
                 onClick={onExecute}
                 disabled={executing}
-                className="px-3 py-1 text-[11px] font-mono text-neutral-900 bg-emerald-400 rounded-md hover:bg-emerald-300 transition-colors disabled:opacity-50"
+                className="rounded-md bg-[#3178c6] px-3 py-1 font-mono text-[11px] text-white transition-colors hover:bg-[#235a97] disabled:opacity-50"
                 title="Cmd/Ctrl+Enter"
               >
                 ▶ {executing ? "Executing…" : "Execute"}