@unoverse-platform/studio 0.1.0

package/screens/AtomsView.tsx

@@ -0,0 +1,206 @@
+/**
+ * Atoms view — the design system's building-block tier, made browsable. Atoms are
+ * normally authoring-time only (Ref-inlined into components/templates, no canvas node),
+ * so this view PREVIEWS one via its `unoverse://atoms/{name}` resource (served by the
+ * MCP server solely for this view). Header + controls mirror ComponentsView (responsive
+ * width toggle, collapsible drag-resize dock) — minus Copy-for-Canvas (not a node) and
+ * Meta (no manifest). Ported from apps/unoverse/web/studio (kept diffable).
+ */
+import { useEffect, useMemo, useState, type MouseEvent as ReactMouseEvent } from "react";
+import { UnoverseComponent, type ResolvedTheme } from "@unoverse/sdk";
+import { client, authedFetch } from "studio-host";
+import { usePersistentState } from "studio-host";
+
+interface PropDef {
+  type?: string;
+  default?: unknown;
+}
+interface AtomDef {
+  name: string;
+  description?: string;
+  whenToUse?: string;
+  props?: Record<string, PropDef>;
+}
+
+const VIEWPORTS: { id: string; label: string; w: number | null }[] = [
+  { id: "mobile", label: "Mobile", w: 390 },
+  { id: "tablet", label: "Tablet", w: 768 },
+  { id: "desktop", label: "Desktop", w: 1280 },
+  { id: "full", label: "Full", w: null },
+];
+
+const toText = (v: unknown) => (typeof v === "string" ? v : v == null ? "" : JSON.stringify(v));
+const defaultsOf = (a: AtomDef): Record<string, unknown> =>
+  Object.fromEntries(
+    Object.entries(a.props ?? {}).map(([k, v]) => [k, v.default ?? (v.type === "array" ? [] : v.type === "object" ? {} : v.type === "boolean" ? false : "")]),
+  );
+const slug = (n: string) => n.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+
+export function AtomsView({ theme }: { theme: ResolvedTheme }) {
+  const [atoms, setAtoms] = useState<AtomDef[]>([]);
+  const [selected, setSelected] = usePersistentState<string>("wb:atom", "");
+  const [values, setValues] = useState<Record<string, unknown>>({});
+  const [text, setText] = useState<Record<string, string>>({});
+  const [panelOpen, setPanelOpen] = useState(true);
+  const [panelHeight, setPanelHeight] = useState(200);
+  const [stageWidth, setStageWidth] = useState<number | null>(768);
+
+  // Drag the divider to resize the controls dock (up = taller). Same as ComponentsView.
+  const onDragStart = (e: ReactMouseEvent) => {
+    e.preventDefault();
+    const startY = e.clientY;
+    const startH = panelHeight;
+    const onMove = (ev: globalThis.MouseEvent) => setPanelHeight(Math.max(120, Math.min(window.innerHeight - 200, startH + (startY - ev.clientY))));
+    const onUp = () => {
+      window.removeEventListener("mousemove", onMove);
+      window.removeEventListener("mouseup", onUp);
+    };
+    window.addEventListener("mousemove", onMove);
+    window.addEventListener("mouseup", onUp);
+  };
+
+  const choose = (a: AtomDef) => {
+    setSelected(a.name);
+    const defs = defaultsOf(a);
+    setValues(defs);
+    setText(Object.fromEntries(Object.entries(defs).map(([k, v]) => [k, toText(v)])));
+  };
+
+  useEffect(() => {
+    authedFetch("/dev/atoms")
+      .then((r) => (r.ok ? r.json() : Promise.reject(new Error(`HTTP ${r.status}`))))
+      .then((d) => {
+        const list: AtomDef[] = (d.atoms ?? []).sort((a: AtomDef, b: AtomDef) => a.name.localeCompare(b.name));
+        setAtoms(list);
+        const restore = list.find((a) => a.name === selected) ?? list[0];
+        if (restore) choose(restore);
+      })
+      .catch(() => setAtoms([]));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const current = atoms.find((a) => a.name === selected);
+
+  const setField = (key: string, raw: string, type?: string) => {
+    setText((t) => ({ ...t, [key]: raw }));
+    let val: unknown = raw;
+    if (type === "array" || type === "object") {
+      try {
+        val = JSON.parse(raw);
+      } catch {
+        return;
+      }
+    } else if (type === "boolean") {
+      val = raw === "true";
+    }
+    setValues((v) => ({ ...v, [key]: val }));
+  };
+
+  const uri = useMemo(() => (selected ? `unoverse://atoms/${slug(selected)}` : ""), [selected]);
+
+  return (
+    <div className="grid min-h-0 flex-1 grid-cols-[190px_1fr] overflow-hidden">
+      {/* NAVIGATOR */}
+      <nav className="flex min-h-0 min-w-0 flex-col overflow-auto border-r border-gray-700 bg-[#1b2129] p-2">
+        <div className="px-2 py-1 text-[10px] font-semibold uppercase tracking-wider text-gray-400">Atoms</div>
+        {atoms.length === 0 && (
+          <div className="p-2 text-xs text-gray-400">No atoms — restart the Unoverse server so /dev/atoms is available.</div>
+        )}
+        {atoms.map((a) => (
+          <button
+            key={a.name}
+            onClick={() => choose(a)}
+            className={`block w-full rounded px-2 py-1 text-left text-sm transition ${
+              selected === a.name ? "bg-emerald-500/15 text-emerald-300" : "text-gray-300 hover:bg-white/5"
+            }`}
+          >
+            {a.name}
+          </button>
+        ))}
+      </nav>
+
+      {/* STAGE + CONTROLS */}
+      <div className="flex min-h-0 flex-col overflow-hidden">
+        <section className="flex min-h-0 flex-1 flex-col overflow-hidden" style={{ background: theme.color["surface.sunken"] }}>
+          {/* HEADER — matches ComponentsView (name + responsive toggle); no Copy-for-Canvas
+              (atoms are not canvas nodes) and no Meta panel (atoms carry no manifest). */}
+          <div className="flex shrink-0 items-center gap-3 border-b px-4 py-2.5" style={{ borderColor: theme.color["border.subtle"], background: theme.color["surface.base"] }}>
+            <span className="text-sm font-semibold uppercase tracking-wide" style={{ color: theme.color["text.primary"] }}>{current?.name ?? ""}</span>
+            <div className="ml-auto flex items-center gap-1 rounded p-0.5 text-[11px]" style={{ background: theme.color["border.subtle"] }}>
+              {VIEWPORTS.map((v) => (
+                <button
+                  key={v.id}
+                  onClick={() => setStageWidth(v.w)}
+                  className="rounded px-2 py-0.5 font-medium transition"
+                  style={
+                    stageWidth === v.w
+                      ? { background: theme.color["surface.base"], color: theme.color["text.primary"] }
+                      : { color: theme.color["text.secondary"] }
+                  }
+                >
+                  {v.label}
+                </button>
+              ))}
+            </div>
+            <span className="tabular-nums text-[11px]" style={{ color: theme.color["text.tertiary"] }}>
+              {stageWidth ? `${stageWidth}px` : "100%"}
+            </span>
+          </div>
+
+          <div className="flex-1 overflow-auto p-10">
+            <div className="mx-auto max-w-full transition-[width] duration-200" style={{ width: stageWidth ?? "100%" }}>
+              {uri && <UnoverseComponent client={client} uri={uri} data={values} theme={theme} />}
+            </div>
+          </div>
+        </section>
+
+        {/* CONTROLS — collapsible + drag-to-resize dock, same as ComponentsView */}
+        {panelOpen && (
+          <div
+            onMouseDown={onDragStart}
+            className="h-1.5 shrink-0 cursor-row-resize bg-gray-700 transition-colors hover:bg-emerald-600/50"
+            title="Drag to resize"
+          />
+        )}
+        <div className="flex min-h-0 shrink-0 flex-col bg-[#232a34] text-gray-200" style={panelOpen ? { height: panelHeight } : undefined}>
+          <div
+            onClick={() => setPanelOpen((o) => !o)}
+            title={panelOpen ? "Collapse controls" : "Expand controls"}
+            className="flex cursor-pointer select-none items-center gap-2 border-y border-gray-700 px-3 py-2 text-[11px] uppercase tracking-wider text-gray-400 hover:bg-white/5"
+          >
+            <span className="leading-none text-gray-300">{panelOpen ? "▾" : "▸"}</span>
+            <span>controls</span>
+            {current && <span className="text-gray-400">· {current.name}</span>}
+          </div>
+          {panelOpen && (
+            <div className="min-h-0 flex-1 overflow-auto p-3">
+              {current && Object.keys(current.props ?? {}).length > 0 ? (
+                <div className="grid grid-cols-2 gap-3">
+                  {Object.entries(current.props ?? {}).map(([key, def]) => (
+                    <label key={key} className="flex flex-col gap-1 text-xs">
+                      <span className="text-gray-400">
+                        {key} <span className="text-gray-600">{def.type ?? "string"}</span>
+                      </span>
+                      {def.type === "boolean" ? (
+                        <select value={text[key] ?? "false"} onChange={(e) => setField(key, e.target.value, "boolean")} className="rounded border border-gray-600 bg-[#1b2129] px-2 py-1 text-gray-200">
+                          <option value="false">false</option>
+                          <option value="true">true</option>
+                        </select>
+                      ) : def.type === "array" || def.type === "object" ? (
+                        <textarea value={text[key] ?? ""} onChange={(e) => setField(key, e.target.value, def.type)} rows={3} className="rounded border border-gray-600 bg-[#1b2129] px-2 py-1 font-mono text-[11px] text-gray-200" />
+                      ) : (
+                        <input value={text[key] ?? ""} onChange={(e) => setField(key, e.target.value, def.type)} className="rounded border border-gray-600 bg-[#1b2129] px-2 py-1 text-gray-200" />
+                      )}
+                    </label>
+                  ))}
+                </div>
+              ) : (
+                <div className="text-xs text-gray-500">This atom has no props.</div>
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}