@unoverse-platform/studio 0.1.0

package/screens/ConfigForm.tsx

@@ -0,0 +1,217 @@
+/**
+ * Schema-driven config form — renders a node's `configSchema` as labelled fields
+ * (select / number / toggle / text / JSON), the same way the Canvas does, instead
+ * of a raw JSON blob. A compact port of GravityCanvas's FieldRenderer.
+ */
+import { useEffect, useState, type ReactNode } from "react";
+// Colours come from the HOST, never from this shared file. Canvas renders these fields
+// on a white panel; local Studio renders them on dark chrome. Hardcoding either one
+// makes the text unreadable in the other.
+import { chrome } from "studio-host";
+
+type Property = Record<string, any>;
+interface ConfigSchema {
+  properties?: Record<string, Property>;
+  required?: string[];
+}
+
+const inputCls =
+  `rounded-md border px-3 py-2 text-sm focus:border-emerald-500 focus:outline-none ${chrome.input}`;
+
+/** Build the initial config object from the schema's declared defaults. */
+export function defaultsFromSchema(schema?: ConfigSchema): Record<string, any> {
+  const props = schema?.properties ?? {};
+  return Object.fromEntries(
+    Object.entries(props).map(([k, p]) => [
+      k,
+      p.default ?? (p.type === "boolean" ? false : p.type === "array" ? [] : p.type === "object" ? "" : ""),
+    ]),
+  );
+}
+
+function FieldShell({
+  label,
+  required,
+  description,
+  children,
+}: {
+  label: string;
+  required?: boolean;
+  description?: string;
+  children: ReactNode;
+}) {
+  return (
+    <label className="flex flex-col gap-1">
+      <span className={`text-sm font-semibold ${chrome.label}`}>
+        {label}
+        {required && <span className="ml-0.5 text-red-400">*</span>}
+      </span>
+      {description && <span className={`text-[11px] leading-snug ${chrome.muted}`}>{description}</span>}
+      {children}
+    </label>
+  );
+}
+
+/** Textarea with a local text mirror so half-typed JSON is allowed while editing. */
+function Jsonish({
+  fieldKey,
+  property,
+  value,
+  required,
+  onChange,
+}: {
+  fieldKey: string;
+  property: Property;
+  value: any;
+  required?: boolean;
+  onChange: (k: string, v: any) => void;
+}) {
+  const toText = (v: any) => (typeof v === "string" ? v : v == null ? "" : JSON.stringify(v, null, 2));
+  const [text, setText] = useState(toText(value));
+  // Re-seed only when the field identity changes (node switch), not on each keystroke.
+  useEffect(() => setText(toText(value)), [fieldKey]); // eslint-disable-line react-hooks/exhaustive-deps
+  const isStructured = property.type === "object" || property.type === "array";
+  return (
+    <FieldShell label={property.title || fieldKey} required={required} description={property.description}>
+      <textarea
+        value={text}
+        spellCheck={false}
+        rows={property["ui:field"] === "template" ? 3 : 5}
+        className={`${inputCls} resize-y font-mono text-xs`}
+        onChange={(e) => {
+          setText(e.target.value);
+          if (isStructured) {
+            try {
+              onChange(fieldKey, JSON.parse(e.target.value));
+            } catch {
+              onChange(fieldKey, e.target.value); // keep raw until valid
+            }
+          } else {
+            onChange(fieldKey, e.target.value);
+          }
+        }}
+      />
+    </FieldShell>
+  );
+}
+
+function Field({
+  fieldKey,
+  property,
+  value,
+  required,
+  onChange,
+}: {
+  fieldKey: string;
+  property: Property;
+  value: any;
+  required?: boolean;
+  onChange: (k: string, v: any) => void;
+}) {
+  const label = property.title || fieldKey;
+
+  // Enum → select
+  if (property.enum) {
+    const labels: any[] = property.enumNames ?? property.enum;
+    return (
+      <FieldShell label={label} required={required} description={property.description}>
+        <select className={inputCls} value={value ?? ""} onChange={(e) => onChange(fieldKey, e.target.value)}>
+          {property.enum.map((opt: any, i: number) => (
+            <option key={String(opt)} value={opt}>
+              {labels[i] ?? String(opt)}
+            </option>
+          ))}
+        </select>
+      </FieldShell>
+    );
+  }
+
+  // Number / integer
+  if (property.type === "number" || property.type === "integer") {
+    return (
+      <FieldShell label={label} required={required} description={property.description}>
+        <input
+          type="number"
+          className={inputCls}
+          value={value ?? ""}
+          min={property.minimum}
+          max={property.maximum}
+          step={property.step ?? (property.type === "integer" ? 1 : "any")}
+          onChange={(e) => onChange(fieldKey, e.target.value === "" ? undefined : Number(e.target.value))}
+        />
+      </FieldShell>
+    );
+  }
+
+  // Boolean → checkbox/toggle
+  if (property.type === "boolean") {
+    return (
+      <label className="flex items-center gap-2">
+        <input
+          type="checkbox"
+          checked={!!value}
+          onChange={(e) => onChange(fieldKey, e.target.checked)}
+          className="h-4 w-4 accent-emerald-500"
+        />
+        <span className={`text-sm font-semibold ${chrome.label}`}>{label}</span>
+        {property.description && <span className={`text-[11px] ${chrome.muted}`}>{property.description}</span>}
+      </label>
+    );
+  }
+
+  // Object / array / template / JSON / textarea → multi-line editor
+  if (
+    property.type === "object" ||
+    property.type === "array" ||
+    property["ui:field"] === "template" ||
+    property["ui:field"] === "JSON" ||
+    property["ui:widget"] === "textarea"
+  ) {
+    return <Jsonish fieldKey={fieldKey} property={property} value={value} required={required} onChange={onChange} />;
+  }
+
+  // String (default)
+  return (
+    <FieldShell label={label} required={required} description={property.description}>
+      <input
+        type="text"
+        className={inputCls}
+        value={value ?? ""}
+        placeholder={property.placeholder}
+        onChange={(e) => onChange(fieldKey, e.target.value)}
+      />
+    </FieldShell>
+  );
+}
+
+export function ConfigForm({
+  schema,
+  value,
+  onChange,
+}: {
+  schema?: ConfigSchema;
+  value: Record<string, any>;
+  onChange: (key: string, val: any) => void;
+}) {
+  const props = schema?.properties ?? {};
+  const required = new Set(schema?.required ?? []);
+  const entries = Object.entries(props);
+  if (!entries.length) return <div className={`text-xs ${chrome.muted}`}>No configuration for this node.</div>;
+  return (
+    <div className="flex flex-col gap-4">
+      {entries.map(([key, p]) => {
+        // ui:dependencies — hide when a dependency value isn't met.
+        const deps = p["ui:dependencies"];
+        if (
+          deps &&
+          Object.entries(deps).some(([f, dv]: [string, any]) =>
+            Array.isArray(dv) ? !dv.includes(value[f]) : value[f] !== dv,
+          )
+        ) {
+          return null;
+        }
+        return <Field key={key} fieldKey={key} property={p} value={value[key] ?? p.default} required={required.has(key)} onChange={onChange} />;
+      })}
+    </div>
+  );
+}

package/screens/DesignSystemView.tsx

@@ -0,0 +1,324 @@
+/**
+ * Design System showcase — renders the live design tokens (from the SDK's compiled
+ * theme) so you can SEE the colors, typography, spacing, radius and shadows. Dogfoods
+ * the real `themes` export, so this IS the design system, not a copy. Driven by the
+ * active theme, so the light/dark toggle restyles it. Left nav jumps between token
+ * groups (no one big scroll); each group shows how many tokens THIS project overrides.
+ */
+import { useState } from "react";
+import type { ResolvedTheme } from "@unoverse/sdk";
+
+const COLOR_GROUP_ORDER = [
+  "brand", "primary", "secondary", "success", "action", "text", "surface", "border", "status",
+  "gray", "info", "warning", "error", "chart", "white", "black",
+];
+
+function groupColors(color: Record<string, string>) {
+  const groups: Record<string, [string, string][]> = {};
+  for (const [k, v] of Object.entries(color)) {
+    const g = k.split(".")[0];
+    (groups[g] ??= []).push([k, v]);
+  }
+  const ordered = Object.keys(groups).sort(
+    (a, b) => (COLOR_GROUP_ORDER.indexOf(a) + 1 || 99) - (COLOR_GROUP_ORDER.indexOf(b) + 1 || 99),
+  );
+  return ordered.map((g) => [g, groups[g]] as const);
+}
+
+// Motion families — group animations by what they DO (slide/pulse/fade/loop) so the
+// gallery reads as related sets rather than a flat wall. First matching family wins;
+// anything unmatched falls to "Other".
+const ANIM_GROUPS: { title: string; test: (n: string) => boolean }[] = [
+  { title: "Slide & enter", test: (n) => /slide|enter|reveal/i.test(n) },
+  { title: "Pulse & breathe", test: (n) => /pulse|ring|breathe|beat|glow/i.test(n) },
+  { title: "Fade", test: (n) => /fade|dissolve/i.test(n) },
+  { title: "Loop & ambient", test: (n) => /wave|equalize|spin|loop|bounce|shimmer/i.test(n) },
+];
+function groupAnimations(names: string[]) {
+  const buckets: Record<string, string[]> = {};
+  for (const n of names) {
+    const g = ANIM_GROUPS.find((g) => g.test(n));
+    (buckets[g ? g.title : "Other"] ??= []).push(n);
+  }
+  const order = [...ANIM_GROUPS.map((g) => g.title), "Other"];
+  return order.filter((t) => buckets[t]?.length).map((t) => [t, buckets[t]] as const);
+}
+
+export function DesignSystemView({
+  theme,
+  foundation = null,
+  org = "all",
+}: {
+  theme: ResolvedTheme;
+  /** The design-system foundation theme (same variant) to diff against — null when
+   *  viewing the foundation itself (nothing to compare, all tokens read as inherited). */
+  foundation?: ResolvedTheme | null;
+  org?: string;
+}) {
+  const ink = theme.color["text.primary"] ?? "#111827";
+  const sub = theme.color["text.secondary"] ?? "#6b7280";
+  const surface = theme.color["surface.base"] ?? "#ffffff";
+  const raised = theme.color["surface.raised"] ?? surface;
+  const borderC = theme.color["border.subtle"] ?? "#e5e7eb";
+  // FIXED neutral chrome — the view's OWN accent (nav highlight, override ring/pencil,
+  // spacing/radius demo blocks). Deliberately NOT the viewed project's action colour, so a
+  // loud brand (e.g. an all-red project) doesn't turn the whole page its brand colour. The
+  // real token swatches still render their true values; only the chrome is neutralised.
+  const accent = "#6366f1";
+  const onAction = "#ffffff";
+  const bodyFont = (theme.text["body.md"]?.fontFamily as string) ?? "system-ui";
+
+  // A token is THIS PROJECT'S OVERRIDE when its resolved value differs from the
+  // foundation's; otherwise it's INHERITED from the design system. No foundation to
+  // compare (viewing the design system itself) → everything is inherited.
+  const isOverride = (bucket: keyof ResolvedTheme, key: string) =>
+    !!foundation &&
+    JSON.stringify((foundation as any)[bucket]?.[key]) !== JSON.stringify((theme as any)[bucket]?.[key]);
+  const overrideCount = (bucket: keyof ResolvedTheme) =>
+    !foundation ? 0 : Object.keys((theme as any)[bucket] ?? {}).filter((k) => isOverride(bucket, k)).length;
+
+  // A small pencil marks a token this project has CUSTOMISED (overridden). Inherited
+  // tokens carry no mark and are NOT dimmed — full-strength, just unmarked — so the eye
+  // lands on what changed without washing out the rest of the palette.
+  const OverrideMark = () => (
+    <span className="ml-1 inline-flex align-middle" title={`Customised in ${org} — overrides the design-system value`}>
+      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke={accent} strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+        <path d="M12 20h9" />
+        <path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4Z" />
+      </svg>
+    </span>
+  );
+
+  // Serialise the theme's keyframes (DATA: stop → decls) into real @keyframes CSS so the
+  // Animations section can PLAY each one. Prefixed `uds-` to not collide with any globally
+  // injected keyframes of the same name.
+  const kebab = (s: string) => s.replace(/[A-Z]/g, (m) => "-" + m.toLowerCase());
+  const keyframesCss = Object.entries((theme.keyframes ?? {}) as Record<string, Record<string, Record<string, string>>>)
+    .map(
+      ([name, stops]) =>
+        `@keyframes uds-${name}{` +
+        Object.entries(stops)
+          .map(([stop, decls]) => `${stop}{${Object.entries(decls).map(([p, v]) => `${kebab(p)}:${v}`).join(";")}}`)
+          .join("") +
+        `}`,
+    )
+    .join("\n");
+
+  const [active, setActive] = useState("colors");
+
+  const SECTIONS: { id: string; title: string; bucket?: keyof ResolvedTheme; body: React.ReactNode }[] = [
+    {
+      id: "colors",
+      title: "Colors",
+      bucket: "color",
+      body: (
+        <div className="space-y-5">
+          {groupColors(theme.color).map(([group, entries]) => (
+            <div key={group}>
+              <div className="mb-2 text-[11px] font-semibold uppercase tracking-wider" style={{ color: sub }}>{group}</div>
+              <div className="flex flex-wrap gap-3">
+                {entries.map(([name, val]) => {
+                  const ov = isOverride("color", name);
+                  return (
+                    <div key={name} className="w-[110px]">
+                      <div
+                        className="h-14 w-full rounded-lg"
+                        style={{ background: val, border: ov ? `2px solid ${accent}` : `1px solid ${borderC}` }}
+                      />
+                      <div className="mt-1 truncate text-[11px] font-medium" title={name}>
+                        {name}
+                        {ov && <OverrideMark />}
+                      </div>
+                      <div className="text-[10px] uppercase" style={{ color: sub }}>{val}</div>
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+          ))}
+        </div>
+      ),
+    },
+    {
+      id: "typography",
+      title: "Typography",
+      bucket: "text",
+      body: (
+        <div className="space-y-5 rounded-xl p-6" style={{ background: raised, border: `1px solid ${borderC}` }}>
+          {Object.entries(theme.text).map(([name, style]) => {
+            const s = style as Record<string, unknown>;
+            const fams = String(s?.fontFamily ?? "")
+              .split(",")
+              .map((f) => f.trim().replace(/^['"]|['"]$/g, ""))
+              .filter(Boolean);
+            const meta = [s?.fontSize, s?.fontWeight && `weight ${s.fontWeight}`, s?.lineHeight && `lh ${s.lineHeight}`]
+              .filter(Boolean)
+              .join(" · ");
+            return (
+              <div key={name} className="flex items-baseline gap-4">
+                <div className="w-32 shrink-0 text-[11px] uppercase tracking-wider" style={{ color: sub }}>
+                  {name}
+                  {isOverride("text", name) && <OverrideMark />}
+                </div>
+                <div className="min-w-0 flex-1">
+                  <div style={style as React.CSSProperties}>The quick brown fox</div>
+                  <div className="mt-0.5 text-[10px]" style={{ color: sub }}>
+                    {fams.length ? (
+                      <>
+                        <span className="font-semibold" style={{ color: ink }}>{fams[0]}</span>
+                        {fams.length > 1 && <span> → {fams.slice(1).join(", ")}</span>}
+                      </>
+                    ) : (
+                      "—"
+                    )}
+                    {meta && <span> · {meta}</span>}
+                  </div>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      ),
+    },
+    {
+      id: "spacing",
+      title: "Spacing",
+      bucket: "space",
+      body: (
+        <div className="space-y-2 rounded-xl p-6" style={{ background: raised, border: `1px solid ${borderC}` }}>
+          {Object.entries(theme.space).map(([name, val]) => (
+            <div key={name} className="flex items-center gap-4">
+              <div className="w-20 shrink-0 text-[11px]" style={{ color: sub }}>
+                {name}
+                {isOverride("space", name) && <OverrideMark />}
+              </div>
+              <div className="h-3 rounded" style={{ width: val, background: accent }} />
+              <div className="text-[10px]" style={{ color: sub }}>{val}</div>
+            </div>
+          ))}
+        </div>
+      ),
+    },
+    {
+      id: "radius",
+      title: "Radius",
+      bucket: "radius",
+      body: (
+        <div className="flex flex-wrap gap-5">
+          {Object.entries(theme.radius).map(([name, val]) => (
+            <div key={name} className="text-center">
+              <div className="h-16 w-16" style={{ background: accent, borderRadius: val }} />
+              <div className="mt-1 text-[11px] font-medium">
+                {name}
+                {isOverride("radius", name) && <OverrideMark />}
+              </div>
+              <div className="text-[10px]" style={{ color: sub }}>{val}</div>
+            </div>
+          ))}
+        </div>
+      ),
+    },
+    {
+      id: "shadow",
+      title: "Shadow / Elevation",
+      body: (
+        <div className="flex flex-wrap gap-6 rounded-xl p-8" style={{ background: theme.color["surface.sunken"] ?? "#f3f4f6" }}>
+          {Object.entries(theme.shadow).map(([name, val]) => (
+            <div key={name} className="text-center">
+              <div className="h-20 w-28 rounded-lg" style={{ background: surface, boxShadow: val }} />
+              <div className="mt-2 text-[11px] font-medium">{name}</div>
+            </div>
+          ))}
+        </div>
+      ),
+    },
+    {
+      id: "animations",
+      title: "Animations",
+      bucket: "keyframes",
+      body: (
+        <>
+          <style>{keyframesCss}</style>
+          <div className="space-y-6">
+            {groupAnimations(Object.keys(theme.keyframes ?? {})).map(([title, names]) => (
+              <div key={title}>
+                <div className="mb-2 text-[11px] font-semibold uppercase tracking-wider" style={{ color: sub }}>{title}</div>
+                <div className="flex flex-wrap gap-6">
+                  {names.map((name) => (
+                    <div key={name} className="text-center">
+                      <div
+                        className="flex h-24 w-32 items-center justify-center overflow-hidden rounded-xl"
+                        style={{ background: raised, border: `1px solid ${borderC}` }}
+                      >
+                        <div style={{ width: 28, height: 28, borderRadius: 8, background: accent, animation: `uds-${name} 1.8s ease-in-out infinite` }} />
+                      </div>
+                      <div className="mt-2 text-[11px] font-medium">
+                        {name}
+                        {isOverride("keyframes", name) && <OverrideMark />}
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            ))}
+          </div>
+        </>
+      ),
+    },
+  ];
+  const current = SECTIONS.find((s) => s.id === active) ?? SECTIONS[0];
+
+  return (
+    <div className="flex h-full" style={{ background: theme.color["surface.sunken"] ?? "#f9fafb", color: ink }}>
+      {/* LEFT NAV — jump between token groups; badge = how many tokens THIS project overrides */}
+      <nav className="w-56 shrink-0 overflow-auto border-r p-5" style={{ borderColor: borderC, background: surface, fontFamily: bodyFont }}>
+        <h1 className="mb-1 text-lg font-bold">Design System</h1>
+        <p className="mb-5 text-[11px] leading-snug" style={{ color: sub }}>
+          {foundation ? (
+            <>Viewing <b style={{ color: ink }}>{org}</b></>
+          ) : (
+            <>The base foundation</>
+          )}
+        </p>
+        <ul className="space-y-1">
+          {SECTIONS.map((s) => {
+            const n = foundation && s.bucket ? overrideCount(s.bucket) : 0;
+            const on = active === s.id;
+            return (
+              <li key={s.id}>
+                <button
+                  onClick={() => setActive(s.id)}
+                  className="flex w-full items-center justify-between rounded px-3 py-2 text-left text-sm font-medium transition-colors"
+                  style={on ? { background: accent, color: onAction } : { color: ink }}
+                >
+                  <span>{s.title}</span>
+                  {n > 0 && (
+                    <span
+                      className="rounded-full px-1.5 py-0.5 text-[10px] font-semibold"
+                      style={{ background: on ? "rgba(255,255,255,0.25)" : accent, color: onAction }}
+                    >
+                      {n}
+                    </span>
+                  )}
+                </button>
+              </li>
+            );
+          })}
+        </ul>
+      </nav>
+
+      {/* CONTENT — the selected group only */}
+      <div className="flex-1 overflow-auto p-10" style={{ fontFamily: bodyFont }}>
+        <h2 className="mb-1 text-2xl font-bold">{current.title}</h2>
+        <p className="mb-8 text-xs" style={{ color: sub }}>
+          {foundation ? (
+            <>Tokens with an <OverrideMark /> are <b style={{ color: ink }}>{org}</b>&rsquo;s own; the rest are inherited from the design-system foundation.</>
+          ) : (
+            <>Live tokens from the design-system foundation (<code>rx/design-system/styles</code>). Toggle the theme to restyle everything.</>
+          )}
+        </p>
+        {current.body}
+      </div>
+    </div>
+  );
+}

package/screens/IdentityHeader.tsx

@@ -0,0 +1,88 @@
+/**
+ * IdentityHeader — the standardized identity presentation for catalog items
+ * (apps, skills, prompts, nodes): initials avatar, title + category pill +
+ * version, description, and the accented "When to use" callout. Extracted from
+ * the Apps view's MCP-app meta panel so every section presents the same anatomy.
+ * Designed for the white main panel.
+ */
+import type { ReactNode } from "react";
+
+export function IdentityHeader({
+  name,
+  category,
+  version,
+  id,
+  description,
+  whenToUse,
+  accent = "#6366f1",
+  logoUrl,
+  chips,
+  right,
+}: {
+  name: string;
+  category?: string;
+  version?: string;
+  /** A mono identity line under the title (node type, `{{prompt.*}}` key, URI). */
+  id?: string;
+  description?: string;
+  whenToUse?: string;
+  accent?: string;
+  /** The item's real logo (node/package `logoUrl`) — replaces the initials avatar. */
+  logoUrl?: string | null;
+  /** Extra chips after the version (e.g. execution mode). */
+  chips?: ReactNode;
+  /** Right-aligned actions (e.g. a ToggleSwitch). */
+  right?: ReactNode;
+}) {
+  const initials = name
+    .split(/\s+/)
+    .map((w) => w[0])
+    .slice(0, 2)
+    .join("")
+    .toUpperCase();
+  return (
+    <div className="mb-5 flex items-start gap-3.5">
+      {logoUrl ? (
+        <div
+          className="flex h-11 w-11 shrink-0 items-center justify-center overflow-hidden rounded-xl bg-white p-1.5"
+          style={{ border: `1px solid ${accent}33` }}
+        >
+          <img src={logoUrl} alt="" className="max-h-full max-w-full object-contain" />
+        </div>
+      ) : (
+        <div
+          className="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl text-[13px] font-bold tracking-tight"
+          style={{ background: `${accent}1a`, color: accent, border: `1px solid ${accent}33` }}
+        >
+          {initials}
+        </div>
+      )}
+      <div className="min-w-0 flex-1">
+        <div className="flex flex-wrap items-center gap-2">
+          <h1 className="text-xl font-bold leading-tight tracking-tight text-gray-900">{name}</h1>
+          {category && (
+            <span
+              className="rounded-full px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide"
+              style={{ background: `${accent}14`, color: accent }}
+            >
+              {category}
+            </span>
+          )}
+          {version && <span className="font-mono text-[10px] text-gray-400">v{version}</span>}
+          {chips}
+          {right && <span className="ml-auto">{right}</span>}
+        </div>
+        {id && <div className="mt-0.5 font-mono text-[11px] text-gray-400">{id}</div>}
+        {description && <p className="mt-1 max-w-3xl text-sm leading-relaxed text-gray-600">{description}</p>}
+        {whenToUse && (
+          <div className="mt-2 max-w-3xl rounded-r py-1.5 pl-3" style={{ borderLeft: `3px solid ${accent}`, background: "#f3f4f6" }}>
+            <div className="mb-0.5 text-[10px] font-semibold uppercase tracking-wider" style={{ color: accent }}>
+              When to use
+            </div>
+            <p className="text-[15px] font-medium leading-relaxed text-gray-900">{whenToUse}</p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}