@ttsc/playground 0.14.0-dev.20250530.1

package/src/react/ConsoleViewer.tsx

@@ -0,0 +1,121 @@
+"use client";
+
+import type { JSX } from "react";
+
+import type { IConsoleMessage } from "../structures/IConsoleMessage";
+
+interface ConsoleViewerProps {
+  messages: IConsoleMessage[];
+  empty?: string;
+}
+
+export function ConsoleViewer({
+  messages,
+  empty = "No output yet. Click Execute to run the compiled JavaScript.",
+}: 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">
+        {empty}
+      </div>
+    );
+  return (
+    <div className="h-full w-full overflow-auto p-3 font-mono text-[12px] leading-snug">
+      {messages.map((msg, i) => (
+        <div
+          key={i}
+          className="py-1 border-b border-neutral-900/70 last:border-b-0 flex gap-2"
+        >
+          <span
+            className={`shrink-0 text-[10px] uppercase tracking-wider w-12 ${typeColor(
+              msg.type,
+            )}`}
+          >
+            {msg.type}
+          </span>
+          <span className="flex-1 break-words whitespace-pre-wrap text-neutral-200">
+            {(Array.isArray(msg.value) ? msg.value : [msg.value]).map(
+              (arg, idx) => (
+                <span key={idx}>
+                  {idx > 0 ? " " : ""}
+                  {formatValue(arg)}
+                </span>
+              ),
+            )}
+          </span>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function typeColor(type: IConsoleMessage["type"]): string {
+  switch (type) {
+    case "error":
+      return "text-red-400";
+    case "warn":
+      return "text-yellow-400";
+    case "info":
+      return "text-sky-400";
+    case "debug":
+      return "text-fuchsia-400";
+    case "dir":
+    case "table":
+      return "text-cyan-400";
+    default:
+      return "text-emerald-400";
+  }
+}
+
+function formatValue(value: unknown, depth = 0): JSX.Element {
+  if (typeof value === "string")
+    return <span className="text-amber-200">{JSON.stringify(value)}</span>;
+  if (typeof value === "number")
+    return <span className="text-purple-300">{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>;
+  if (value === undefined)
+    return <span className="text-neutral-500">undefined</span>;
+  if (typeof value === "function")
+    return <span className="text-neutral-500">[Function]</span>;
+  if (Array.isArray(value))
+    return (
+      <span>
+        [
+        {value.map((item, idx) => (
+          <span key={idx}>
+            {idx > 0 ? ", " : ""}
+            {formatValue(item, depth + 1)}
+          </span>
+        ))}
+        ]
+      </span>
+    );
+  if (value instanceof Error)
+    return (
+      <span className="text-red-300">
+        {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>;
+    return (
+      <span>
+        {"{"}
+        {entries.map(([k, v], idx) => (
+          <span key={k}>
+            {idx > 0 ? ", " : " "}
+            <span className="text-blue-300">{k}</span>:{" "}
+            {formatValue(v, depth + 1)}
+          </span>
+        ))}
+        {" }"}
+      </span>
+    );
+  } catch {
+    return <span>{String(value)}</span>;
+  }
+}

package/src/react/DEFAULT_OPTION_TOGGLES.ts

@@ -0,0 +1,15 @@
+import type { IOptionToggle } from "../structures/IOptionToggle";
+
+/** Default toggles for sites that wire the bundled typia / lint plugins. */
+export const DEFAULT_OPTION_TOGGLES: readonly IOptionToggle[] = [
+  {
+    key: "typia",
+    label: "typia",
+    description: "Generate runtime validators from TypeScript types.",
+  },
+  {
+    key: "lint",
+    label: "@ttsc/lint",
+    description: "Report a subset of lint rules over the source AST.",
+  },
+];

package/src/react/DependencyProgressModal.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+import type { IPlaygroundDependencyProgress } from "../structures/IPlaygroundDependencyProgress";
+
+interface DependencyProgressModalProps {
+  progress: IPlaygroundDependencyProgress | null;
+  packages: readonly string[];
+}
+
+export function DependencyProgressModal({
+  progress,
+  packages,
+}: DependencyProgressModalProps) {
+  if (!progress) return null;
+  const total = Math.max(progress.total, 1);
+  const ratio = Math.min(1, Math.max(0, progress.completed / total));
+  const activePackage =
+    progress.packageName && progress.version
+      ? `${progress.packageName}@${progress.version}`
+      : 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="flex items-start justify-between gap-4">
+          <div>
+            <div className="text-[11px] font-mono uppercase text-blue-300">
+              Dependencies
+            </div>
+            <h2 className="mt-1 text-base font-mono text-white">
+              Installing npm packages
+            </h2>
+          </div>
+          <div className="text-[11px] font-mono text-neutral-500">
+            {progress.completed}/{total}
+          </div>
+        </div>
+
+        <div className="mt-4 h-2 overflow-hidden rounded-full bg-neutral-800">
+          <div
+            className="h-full bg-blue-400 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-[11px] text-neutral-400">{progress.message}</div>
+        </div>
+
+        {packages.length > 0 && (
+          <div className="mt-4 flex flex-wrap gap-1.5">
+            {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"
+              >
+                {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">
+                +{packages.length - 8}
+              </span>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/react/DiagnosticsPanel.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import { useState } from "react";
+
+import type { ICompilerService } from "../structures/ICompilerService";
+
+export function DiagnosticsPanel({
+  diagnostics,
+}: {
+  diagnostics: ICompilerService.IDiagnostic[];
+}) {
+  const [expanded, setExpanded] = useState(false);
+  const errorCount = diagnostics.filter((d) => d.severity === "error").length;
+  const warnCount = diagnostics.filter((d) => d.severity === "warning").length;
+
+  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">
+        <span className="text-emerald-400 text-xs">●</span>
+        <span className="text-[12px] font-mono text-neutral-400">
+          0 errors · 0 warnings
+        </span>
+      </div>
+    );
+
+  return (
+    <div className="shrink-0 border-t border-neutral-800/70 bg-neutral-950">
+      <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"
+      >
+        <span
+          className={`text-xs ${
+            errorCount > 0 ? "text-red-400" : "text-yellow-400"
+          }`}
+        >
+          ●
+        </span>
+        <span className="text-[12px] font-mono text-neutral-300">
+          {errorCount} error{errorCount === 1 ? "" : "s"} · {warnCount} warning
+          {warnCount === 1 ? "" : "s"}
+        </span>
+        <span className="ml-auto text-[10px] font-mono text-neutral-600">
+          {expanded ? "▲ collapse" : "▼ expand"}
+        </span>
+      </button>
+      {expanded && (
+        <div className="border-t border-neutral-800/70 max-h-48 overflow-auto">
+          {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"
+            >
+              <span
+                className={`shrink-0 ${
+                  d.severity === "error" ? "text-red-400" : "text-yellow-400"
+                }`}
+              >
+                {d.severity === "error" ? "✗" : "!"}
+              </span>
+              <span className="shrink-0 text-neutral-500 w-16">
+                {d.line}:{d.column}
+              </span>
+              <span className="shrink-0 text-neutral-600 w-16">
+                {d.code ?? ""}
+              </span>
+              <span className="text-neutral-200">{d.message}</span>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/react/ExamplePicker.tsx

@@ -0,0 +1,93 @@
+"use client";
+
+import { useEffect, useMemo, useRef, useState } from "react";
+
+import type { IPlaygroundExample } from "../structures/IPlaygroundExample";
+
+interface ExamplePickerProps {
+  examples: readonly IPlaygroundExample[];
+  onPick: (id: string) => void;
+  /** Display labels for groups. Maps `group` key → rendered heading. */
+  groupLabels?: Record<string, string>;
+}
+
+export function ExamplePicker({
+  examples,
+  onPick,
+  groupLabels,
+}: ExamplePickerProps) {
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    const close = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) {
+        setOpen(false);
+      }
+    };
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("mousedown", close);
+    document.addEventListener("keydown", onKey);
+    return () => {
+      document.removeEventListener("mousedown", close);
+      document.removeEventListener("keydown", onKey);
+    };
+  }, [open]);
+
+  const grouped = useMemo(() => {
+    return examples.reduce<Record<string, IPlaygroundExample[]>>((acc, e) => {
+      const key = e.group ?? "Examples";
+      (acc[key] ??= []).push(e);
+      return acc;
+    }, {});
+  }, [examples]);
+
+  if (examples.length === 0) return null;
+
+  return (
+    <div ref={ref} className="relative">
+      <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"
+        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">
+          {Object.entries(grouped).map(([group, items]) => (
+            <div
+              key={group}
+              className="border-b border-neutral-900 last:border-b-0"
+            >
+              <div className="px-3 py-1.5 text-[10px] font-mono uppercase tracking-wider text-neutral-600">
+                {groupLabels?.[group] ?? group}
+              </div>
+              {items.map((item) => (
+                <button
+                  key={item.id}
+                  onClick={() => {
+                    onPick(item.id);
+                    setOpen(false);
+                  }}
+                  className="w-full text-left px-3 py-2 hover:bg-neutral-900 transition-colors"
+                >
+                  <div className="text-[12px] font-mono text-neutral-100">
+                    {item.title}
+                  </div>
+                  <div className="text-[10px] text-neutral-500 mt-0.5 leading-snug">
+                    {item.description}
+                  </div>
+                </button>
+              ))}
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/react/LintPane.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import type { ICompilerService } from "../structures/ICompilerService";
+
+/**
+ * Renders the lint plugin's findings in a list view. Shown by `PlaygroundShell`
+ * when the active tab is "lint". Empty state is the green checkmark.
+ */
+export function LintPane({
+  diagnostics,
+  emptyHint = "Powered by @ttsc/lint inside playground.wasm.",
+}: {
+  diagnostics: ICompilerService.IDiagnostic[];
+  emptyHint?: string;
+}) {
+  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">
+        <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">
+          {emptyHint}
+        </span>
+      </div>
+    );
+  return (
+    <div className="overflow-auto h-full p-4 space-y-2">
+      {diagnostics.map((d, i) => (
+        <div
+          key={i}
+          className="flex gap-3 p-3 rounded-md bg-neutral-900/60 border border-neutral-800/80"
+        >
+          <span
+            className={`mt-0.5 text-[10px] font-mono px-1.5 py-0.5 rounded shrink-0 ${
+              d.severity === "error"
+                ? "text-red-300 bg-red-500/10"
+                : "text-yellow-300 bg-yellow-500/10"
+            }`}
+          >
+            {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">
+              <span>{d.code}</span>
+              <span>·</span>
+              <span>
+                {d.line}:{d.column}
+              </span>
+            </div>
+            <div className="text-[13px] text-neutral-200 font-mono">
+              {d.message}
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}

package/src/react/OptionsPanel.tsx

@@ -0,0 +1,132 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+
+import type { IOptionToggle } from "../structures/IOptionToggle";
+import type { ITransformOptions } from "../structures/ITransformOptions";
+import { DEFAULT_OPTION_TOGGLES } from "./DEFAULT_OPTION_TOGGLES";
+
+interface OptionsPanelProps {
+  options: ITransformOptions;
+  onChange: (next: ITransformOptions) => void;
+  onClose: () => void;
+  /** Defaults to the typia + lint pair from `DEFAULT_OPTION_TOGGLES`. */
+  toggles?: readonly IOptionToggle[];
+  /** Dialog heading. Defaults to "Transform Options". */
+  title?: string;
+}
+
+export function OptionsPanel({
+  options,
+  onChange,
+  onClose,
+  toggles = DEFAULT_OPTION_TOGGLES,
+  title = "Transform Options",
+}: OptionsPanelProps) {
+  const dialogRef = useRef<HTMLDivElement>(null);
+
+  const toggle = (key: string) =>
+    onChange({ ...options, [key]: !options[key] });
+
+  // Escape closes. Focus traps inside the dialog.
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        onClose();
+        return;
+      }
+      if (e.key !== "Tab" || !dialogRef.current) return;
+      const focusable = dialogRef.current.querySelectorAll<HTMLElement>(
+        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',
+      );
+      if (focusable.length === 0) return;
+      const first = focusable[0]!;
+      const last = focusable[focusable.length - 1]!;
+      if (e.shiftKey && document.activeElement === first) {
+        e.preventDefault();
+        last.focus();
+      } else if (!e.shiftKey && document.activeElement === last) {
+        e.preventDefault();
+        first.focus();
+      }
+    };
+    window.addEventListener("keydown", onKey);
+    // Auto-focus the first focusable on mount.
+    const focusable = dialogRef.current?.querySelector<HTMLElement>(
+      'button, input, [tabindex]:not([tabindex="-1"])',
+    );
+    focusable?.focus();
+    return () => window.removeEventListener("keydown", onKey);
+  }, [onClose]);
+
+  return (
+    <div
+      className="fixed inset-0 z-50 bg-black/60 backdrop-blur-sm flex items-center justify-center"
+      onClick={onClose}
+    >
+      <div
+        ref={dialogRef}
+        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)]"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="flex items-center justify-between px-6 py-4 border-b border-neutral-800/70">
+          <h2
+            id="playground-options-title"
+            className="text-base font-semibold text-white"
+          >
+            {title}
+          </h2>
+          <button
+            onClick={onClose}
+            className="text-neutral-500 hover:text-white transition-colors"
+            aria-label="Close options"
+          >
+            ✕
+          </button>
+        </div>
+        <div className="p-6 space-y-6">
+          <div>
+            <div className="text-[10px] font-mono uppercase tracking-wider text-neutral-600 mb-3">
+              Plugins
+            </div>
+            <div className="space-y-3">
+              {toggles.map((t) => (
+                <label
+                  key={t.key}
+                  className="flex items-start gap-3 cursor-pointer group"
+                >
+                  <input
+                    type="checkbox"
+                    checked={!!options[t.key]}
+                    onChange={() => toggle(t.key)}
+                    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">
+                      {t.label}
+                    </div>
+                    <div className="text-[11px] text-neutral-500 leading-snug">
+                      {t.description}
+                    </div>
+                  </div>
+                </label>
+              ))}
+            </div>
+          </div>
+        </div>
+        <div className="px-6 py-4 border-t border-neutral-800/70 flex justify-end">
+          <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"
+          >
+            Done
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}