@ttsc/playground 0.24.0 → 0.25.0

package/src/react/ExamplePicker.tsx

@@ -1,93 +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="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 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-[#d8e7f4] last:border-b-0"
-            >
-              <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) => (
-                <button
-                  key={item.id}
-                  onClick={() => {
-                    onPick(item.id);
-                    setOpen(false);
-                  }}
-                  className="w-full px-3 py-2 text-left transition-colors hover:bg-[#eaf4ff]"
-                >
-                  <div className="font-mono text-[12px] text-[#102a43]">
-                    {item.title}
-                  </div>
-                  <div className="mt-0.5 text-[10px] leading-snug text-slate-500">
-                    {item.description}
-                  </div>
-                </button>
-              ))}
-            </div>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-}
+"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="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 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-[#d8e7f4] last:border-b-0"
+            >
+              <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) => (
+                <button
+                  key={item.id}
+                  onClick={() => {
+                    onPick(item.id);
+                    setOpen(false);
+                  }}
+                  className="w-full px-3 py-2 text-left transition-colors hover:bg-[#eaf4ff]"
+                >
+                  <div className="font-mono text-[12px] text-[#102a43]">
+                    {item.title}
+                  </div>
+                  <div className="mt-0.5 text-[10px] leading-snug text-slate-500">
+                    {item.description}
+                  </div>
+                </button>
+              ))}
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/react/LintPane.tsx

@@ -1,58 +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 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="max-w-xs text-center text-[10px] text-slate-400">
-          {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 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 ${
-              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="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="font-mono text-[13px] text-slate-700">
-              {d.message}
-            </div>
-          </div>
-        </div>
-      ))}
-    </div>
-  );
-}
+"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 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="max-w-xs text-center text-[10px] text-slate-400">
+          {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 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 ${
+              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="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="font-mono text-[13px] text-slate-700">
+              {d.message}
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}

package/src/react/OptionsPanel.tsx

@@ -1,132 +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 flex items-center justify-center bg-[#102a43]/35 backdrop-blur-sm"
-      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-[#b9d5ee] bg-white shadow-[0_30px_80px_rgba(35,90,151,0.25)]"
-        onClick={(e) => e.stopPropagation()}
-      >
-        <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-[#102a43]"
-          >
-            {title}
-          </h2>
-          <button
-            onClick={onClose}
-            className="text-slate-400 transition-colors hover:text-[#235a97]"
-            aria-label="Close options"
-          >
-            ✕
-          </button>
-        </div>
-        <div className="p-6 space-y-6">
-          <div>
-            <div className="mb-3 font-mono text-[10px] uppercase tracking-wider text-slate-500">
-              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="font-mono text-sm text-slate-800 transition-colors group-hover:text-[#235a97]">
-                      {t.label}
-                    </div>
-                    <div className="text-[11px] leading-snug text-slate-500">
-                      {t.description}
-                    </div>
-                  </div>
-                </label>
-              ))}
-            </div>
-          </div>
-        </div>
-        <div className="flex justify-end border-t border-[#c7dff4] bg-[#f7fbff] px-6 py-4">
-          <button
-            onClick={onClose}
-            className="rounded-md bg-[#3178c6] px-4 py-2 font-mono text-xs text-white transition-colors hover:bg-[#235a97]"
-          >
-            Done
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-}
+"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 flex items-center justify-center bg-[#102a43]/35 backdrop-blur-sm"
+      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-[#b9d5ee] bg-white shadow-[0_30px_80px_rgba(35,90,151,0.25)]"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <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-[#102a43]"
+          >
+            {title}
+          </h2>
+          <button
+            onClick={onClose}
+            className="text-slate-400 transition-colors hover:text-[#235a97]"
+            aria-label="Close options"
+          >
+            ✕
+          </button>
+        </div>
+        <div className="p-6 space-y-6">
+          <div>
+            <div className="mb-3 font-mono text-[10px] uppercase tracking-wider text-slate-500">
+              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="font-mono text-sm text-slate-800 transition-colors group-hover:text-[#235a97]">
+                      {t.label}
+                    </div>
+                    <div className="text-[11px] leading-snug text-slate-500">
+                      {t.description}
+                    </div>
+                  </div>
+                </label>
+              ))}
+            </div>
+          </div>
+        </div>
+        <div className="flex justify-end border-t border-[#c7dff4] bg-[#f7fbff] px-6 py-4">
+          <button
+            onClick={onClose}
+            className="rounded-md bg-[#3178c6] px-4 py-2 font-mono text-xs text-white transition-colors hover:bg-[#235a97]"
+          >
+            Done
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}