@ttsc/playground 0.18.4 → 0.19.1

package/src/npm/collectExternalPackageNames.ts

@@ -1,9 +1,6 @@
 import { BUILT_IN_PLAYGROUND_PACKAGES } from "./BUILT_IN_PLAYGROUND_PACKAGES";
 import { packageNameFromSpecifier } from "./packageNameFromSpecifier";
 
-const MODULE_SPECIFIER_REGEXP =
-  /\b(?:import|export)\s+(?:type\s+)?(?:[^"'()]*?\s+from\s*)?["']([^"']+)["']|import\s*\(\s*["']([^"']+)["']\s*\)|require\s*\(\s*["']([^"']+)["']\s*\)/g;
-
 /**
  * Scan `source` for `import` / `require` specifiers and return the unique
  * sorted list of bare npm package names that are not in `ignoredPackages`.
@@ -21,14 +18,270 @@ export function collectExternalPackageNames(
   return [...found].sort();
 }
 
+/**
+ * Collect the string specifiers of every executable module-loading construct in
+ * `source`: `import`/`export ... from`, side-effect `import "x"`, dynamic
+ * `import("x")`, and `require("x")` calls.
+ *
+ * The scan tokenizes `source` first so import/export/require lookalikes that
+ * live inside comments, string or template contents, or regular-expression
+ * literals never become package requests — only real code-level string
+ * arguments are returned. Specifiers that cannot be resolved statically (a
+ * template-literal or computed argument) are intentionally skipped so inert
+ * text cannot drive a network install.
+ */
 function collectModuleSpecifiers(source: string): string[] {
+  const tokens = tokenize(source);
   const out: string[] = [];
-  MODULE_SPECIFIER_REGEXP.lastIndex = 0;
-  for (;;) {
-    const match = MODULE_SPECIFIER_REGEXP.exec(source);
-    if (!match) break;
-    const specifier = match[1] ?? match[2] ?? match[3];
-    if (specifier) out.push(specifier);
+  const asString = (token: Token | undefined): string | null =>
+    token && token.kind === "string" ? token.value : null;
+  const isOpenParen = (token: Token | undefined): boolean =>
+    token !== undefined && token.kind === "punct" && token.value === "(";
+  const isMemberAccess = (token: Token | undefined): boolean =>
+    token !== undefined && token.kind === "punct" && token.value === ".";
+
+  for (let i = 0; i < tokens.length; i++) {
+    const token = tokens[i];
+    if (!token || token.kind !== "word") continue;
+
+    if (token.value === "require") {
+      // `obj.require(...)` is an unrelated method call, not CommonJS require.
+      if (isMemberAccess(tokens[i - 1])) continue;
+      if (isOpenParen(tokens[i + 1])) {
+        const spec = asString(tokens[i + 2]);
+        if (spec !== null) out.push(spec);
+      }
+      continue;
+    }
+
+    if (token.value === "import" || token.value === "export") {
+      // `foo.import(...)` / `import.meta` are not module-loading imports.
+      if (token.value === "import" && isMemberAccess(tokens[i - 1])) continue;
+      // Dynamic `import("x")`.
+      if (token.value === "import" && isOpenParen(tokens[i + 1])) {
+        const spec = asString(tokens[i + 2]);
+        if (spec !== null) out.push(spec);
+        continue;
+      }
+      // Side-effect `import "x"`.
+      if (token.value === "import") {
+        const bare = asString(tokens[i + 1]);
+        if (bare !== null) {
+          out.push(bare);
+          continue;
+        }
+      }
+      // `import ... from "x"` / `export ... from "x"`.
+      const spec = findFromSpecifier(tokens, i + 1);
+      if (spec !== null) out.push(spec);
+    }
   }
   return out;
 }
+
+/**
+ * From token index `start`, find the specifier of a `... from "x"` clause,
+ * bounded to the current statement. Stops at a `;` terminator or the start of
+ * another `import`/`export` so a local `export const x = ...` never borrows a
+ * later statement's `from`.
+ */
+function findFromSpecifier(tokens: Token[], start: number): string | null {
+  for (let i = start; i < tokens.length; i++) {
+    const token = tokens[i];
+    if (!token) break;
+    if (token.kind === "punct" && token.value === ";") return null;
+    if (
+      token.kind === "word" &&
+      (token.value === "import" || token.value === "export")
+    )
+      return null;
+    if (token.kind === "word" && token.value === "from") {
+      const next = tokens[i + 1];
+      return next && next.kind === "string" ? next.value : null;
+    }
+  }
+  return null;
+}
+
+type Token =
+  // An identifier or keyword.
+  | { kind: "word"; value: string }
+  // A single- or double-quoted string literal, with escapes decoded to their
+  // literal characters so a specifier survives unchanged.
+  | { kind: "string"; value: string }
+  // A single punctuation character.
+  | { kind: "punct"; value: string }
+  // An opaque value token — number, template literal, or regular-expression
+  // literal — whose contents can never be a static specifier.
+  | { kind: "other" };
+
+// Keywords after which a `/` begins a regular-expression literal rather than a
+// division operator. After any other word (an identifier or value keyword such
+// as `this`), `/` is division.
+const REGEX_PRECEDING_KEYWORDS = new Set([
+  "return",
+  "typeof",
+  "instanceof",
+  "in",
+  "of",
+  "new",
+  "delete",
+  "void",
+  "do",
+  "else",
+  "yield",
+  "await",
+  "case",
+  "throw",
+]);
+
+/**
+ * Lexically tokenize `source` into the coarse token stream the specifier
+ * collector needs. Comments are dropped; strings, templates, regex literals,
+ * and numbers become single tokens so their contents cannot leak into the
+ * grammar match.
+ */
+function tokenize(source: string): Token[] {
+  const tokens: Token[] = [];
+  const n = source.length;
+  const isIdStart = (c: string): boolean =>
+    (c >= "a" && c <= "z") || (c >= "A" && c <= "Z") || c === "_" || c === "$";
+  const isIdPart = (c: string): boolean =>
+    isIdStart(c) || (c >= "0" && c <= "9");
+  const isDigit = (c: string): boolean => c >= "0" && c <= "9";
+
+  // A `/` opens a regex only in operator/statement position — never right after
+  // a value (identifier, number, string, template, regex, `)` or `]`).
+  const regexAllowed = (): boolean => {
+    const prev = tokens[tokens.length - 1];
+    if (!prev) return true;
+    if (prev.kind === "string" || prev.kind === "other") return false;
+    if (prev.kind === "word") return REGEX_PRECEDING_KEYWORDS.has(prev.value);
+    return prev.value !== ")" && prev.value !== "]";
+  };
+
+  let i = 0;
+  while (i < n) {
+    const c = source[i]!;
+    // Whitespace.
+    if (
+      c === " " ||
+      c === "\t" ||
+      c === "\r" ||
+      c === "\n" ||
+      c === "\f" ||
+      c === "\v"
+    ) {
+      i++;
+      continue;
+    }
+    // Line comment.
+    if (c === "/" && source[i + 1] === "/") {
+      i += 2;
+      while (i < n && source[i] !== "\n") i++;
+      continue;
+    }
+    // Block comment.
+    if (c === "/" && source[i + 1] === "*") {
+      i += 2;
+      while (i < n && !(source[i] === "*" && source[i + 1] === "/")) i++;
+      i += 2;
+      continue;
+    }
+    // Regular-expression literal.
+    if (c === "/" && regexAllowed()) {
+      i++;
+      let inClass = false;
+      while (i < n) {
+        const d = source[i];
+        if (d === "\\") {
+          i += 2;
+          continue;
+        }
+        if (d === "\n") break;
+        if (d === "[") inClass = true;
+        else if (d === "]") inClass = false;
+        else if (d === "/" && !inClass) {
+          i++;
+          break;
+        }
+        i++;
+      }
+      while (i < n && isIdPart(source[i]!)) i++; // flags
+      tokens.push({ kind: "other" });
+      continue;
+    }
+    // String literal.
+    if (c === '"' || c === "'") {
+      i++;
+      let value = "";
+      while (i < n) {
+        const d = source[i]!;
+        if (d === "\\") {
+          value += source[i + 1] ?? "";
+          i += 2;
+          continue;
+        }
+        if (d === c) {
+          i++;
+          break;
+        }
+        if (d === "\n") break; // unterminated single-line string
+        value += d;
+        i++;
+      }
+      tokens.push({ kind: "string", value });
+      continue;
+    }
+    // Template literal. Contents (including `${...}` expressions) are treated as
+    // opaque: a template specifier is not statically resolvable.
+    if (c === "`") {
+      i++;
+      let depth = 0;
+      while (i < n) {
+        const d = source[i];
+        if (d === "\\") {
+          i += 2;
+          continue;
+        }
+        if (depth === 0 && d === "`") {
+          i++;
+          break;
+        }
+        if (d === "$" && source[i + 1] === "{") {
+          depth++;
+          i += 2;
+          continue;
+        }
+        if (depth > 0 && d === "}") {
+          depth--;
+          i++;
+          continue;
+        }
+        i++;
+      }
+      tokens.push({ kind: "other" });
+      continue;
+    }
+    // Identifier / keyword.
+    if (isIdStart(c)) {
+      let j = i + 1;
+      while (j < n && isIdPart(source[j]!)) j++;
+      tokens.push({ kind: "word", value: source.slice(i, j) });
+      i = j;
+      continue;
+    }
+    // Numeric literal.
+    if (isDigit(c) || (c === "." && isDigit(source[i + 1] ?? ""))) {
+      let j = i + 1;
+      while (j < n && /[0-9a-fA-FxXoObBeE._]/.test(source[j]!)) j++;
+      tokens.push({ kind: "other" });
+      i = j;
+      continue;
+    }
+    // Single punctuation character.
+    tokens.push({ kind: "punct", value: c });
+    i++;
+  }
+  return tokens;
+}

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>