@unoverse-platform/studio 0.1.0

package/screens/index.ts

@@ -0,0 +1,26 @@
+/**
+ * studio: the Studio screens, owned once and imported by BOTH Studios,
+ * the Canvas-embedded catalog and the standalone local authoring app.
+ * See docs/architecture/LOCAL_STUDIO.md.
+ *
+ * These screens contain NO transport, auth or persistence of their own. Everything
+ * host-specific is imported from the bare specifier `studio-host`, which each app
+ * aliases to its own module (see host.ts in the consuming app). That is the whole
+ * seam: Canvas points it at a running universe, local Studio points it at a folder
+ * on disk.
+ *
+ * Consumed as SOURCE via a bundler alias, the same convention `@unoverse/sdk`
+ * already uses. No build step, no publish cycle, no stale dist.
+ */
+export { ComponentsView } from "./ComponentsView";
+export { AtomsView } from "./AtomsView";
+export { TemplatesView } from "./TemplatesView";
+export { DesignSystemView } from "./DesignSystemView";
+export { SkillsView } from "./SkillsView";
+export { PromptBlocksView } from "./PromptBlocksView";
+export { IdentityHeader } from "./IdentityHeader";
+export { stateActivation } from "./states";
+// ConfigForm renders a node/package config from its schema. Each host drives it from
+// its own screen (Canvas from MarketplaceView, local Studio from the node testing area),
+// so it is shared even though neither shares the screen around it.
+export { ConfigForm, defaultsFromSchema } from "./ConfigForm";

package/screens/states.ts

@@ -0,0 +1,44 @@
+/**
+ * Component-state activation — shared by the Templates and Components views.
+ *
+ * A component's `states/` files are its Switch-case layers: the state NAME is the
+ * case key, and the Switch's `on` field is the discriminant that selects it
+ * (UNOVERSE_LAYERS.md §7). To show a state, write `{ [discriminant]: name }` into
+ * the component's own slice — exactly what the component's own buttons do.
+ */
+
+/** Find the discriminant field whose Switch has a case named `stateName`. */
+export function discriminantFor(root: unknown, stateName: string): string | null {
+  let found: string | null = null;
+  const walk = (n: unknown): void => {
+    if (found || !n || typeof n !== "object") return;
+    if (Array.isArray(n)) return n.forEach(walk);
+    const o = n as Record<string, unknown>;
+    if (
+      o.type === "Switch" &&
+      typeof o.on === "string" &&
+      o.cases &&
+      typeof o.cases === "object" &&
+      Object.prototype.hasOwnProperty.call(o.cases, stateName)
+    ) {
+      found = o.on;
+      return;
+    }
+    Object.values(o).forEach(walk);
+  };
+  walk(root);
+  return found;
+}
+
+/** The COMPONENT_DATA payload that activates a component state (null if unresolvable). */
+export function stateActivation(root: unknown, state: { name: string; when?: unknown }): Record<string, unknown> | null {
+  const disc = discriminantFor(root, state.name);
+  if (disc) return { [disc]: state.name };
+  // Fallback: a state file that carries its own `visibleWhen` selector (template-style).
+  const w = state.when;
+  if (w && typeof w === "object" && typeof (w as { field?: unknown }).field === "string") {
+    const c = w as { field: string; eq?: unknown };
+    return { [c.field]: c.eq ?? true };
+  }
+  return null;
+}

package/src/App.tsx

@@ -0,0 +1,252 @@
+/**
+ * Local Studio — the shell.
+ *
+ * Everything visible here is a SHARED screen (../screens), the same ones the Canvas
+ * Studio renders. This file only does what a host must: pick the project, pick the
+ * theme variant, resolve the theme, and choose which screen is showing.
+ *
+ * See docs/architecture/LOCAL_STUDIO.md.
+ */
+import { useEffect, useState } from "react";
+import type { ResolvedTheme } from "@unoverse/sdk";
+import {
+  ComponentsView,
+  AtomsView,
+  TemplatesView,
+  DesignSystemView,
+  SkillsView,
+  PromptBlocksView,
+} from "@unoverse/studio";
+import { client, usePersistentState } from "./host";
+import { UniverseSession } from "./UniverseSession";
+import { ConnectUniverse } from "./ConnectUniverse";
+import { PublishDialog } from "./PublishDialog";
+import { NewProject } from "./NewProject";
+import { loadUniverses, type Universe } from "./universes";
+// Local-only screens. Nodes are AUTHORED and TESTED here and nowhere else: Canvas keeps
+// the node library (using nodes), the marketplace acquires them (a universe's job).
+import { NodesView } from "./NodesView";
+
+type View = "apps" | "components" | "atoms" | "tokens" | "skills" | "prompts" | "nodes";
+
+const NAV: { key: View; label: string; group: string }[] = [
+  { key: "apps", label: "Apps", group: "Build" },
+  { key: "components", label: "Components", group: "Build" },
+  { key: "atoms", label: "Atoms", group: "Build" },
+  { key: "tokens", label: "Design System", group: "Build" },
+  { key: "skills", label: "Skills", group: "AI" },
+  { key: "prompts", label: "Prompt Blocks", group: "AI" },
+  { key: "nodes", label: "Nodes", group: "Code" },
+];
+
+/**
+ * The shell, wrapped in the session for the selected universe.
+ *
+ * The provider must sit ABOVE every screen, because a screen deep in the tree
+ * (TemplatesView) already calls `useAuth()`. With no universe selected nothing is
+ * mounted and Studio behaves exactly as it did offline.
+ */
+export function App() {
+  // Which universe is selected, remembered across refreshes. The list itself lives in
+  // localStorage (universes.ts); this is only the pointer into it.
+  const [activeUrl, setActiveUrl] = usePersistentState<string | null>("studio:universe", null);
+  const active = loadUniverses().find((u) => u.url === activeUrl) ?? null;
+
+  return (
+    <UniverseSession universe={active}>
+      <Shell
+        active={active}
+        onSelectUniverse={(u: Universe | null) => setActiveUrl(u?.url ?? null)}
+      />
+    </UniverseSession>
+  );
+}
+
+function Shell({
+  active,
+  onSelectUniverse,
+}: {
+  active: Universe | null;
+  onSelectUniverse: (u: Universe | null) => void;
+}) {
+  const [connectOpen, setConnectOpen] = useState(false);
+  const [publishOpen, setPublishOpen] = useState(false);
+  const [newProjectOpen, setNewProjectOpen] = useState(false);
+  const [view, setView] = usePersistentState<View>("studio:view", "components");
+  const [org, setOrg] = usePersistentState<string>("studio:org", "all");
+  const [variant, setVariant] = usePersistentState<string>("studio:variant", "light");
+
+  const [projects, setProjects] = useState<string[]>([]);
+  const [theme, setTheme] = useState<ResolvedTheme | null>(null);
+  const [foundation, setFoundation] = useState<ResolvedTheme | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  // The projects in this developer's rx/ folder. Flat, per RX_ORG_MODEL. Re-read after
+  // creating one, so a new project appears without a reload.
+  const loadProjects = () =>
+    fetch("/dev/orgs")
+      .then((r) => r.json())
+      .then((d) => setProjects(d.orgs ?? []))
+      .catch((e) => setError(String(e)));
+  useEffect(() => {
+    loadProjects();
+  }, []);
+
+  // The theme being previewed, plus the design-system foundation for the same variant
+  // so the tokens screen can show what this project overrides and what it inherits.
+  useEffect(() => {
+    const ref = org === "all" ? variant : `${org}/${variant}`;
+    client
+      .readTheme(ref)
+      .then(setTheme)
+      .catch(() => client.readTheme(variant).then(setTheme).catch((e) => setError(String(e))));
+    client.readTheme(variant).then(setFoundation).catch(() => setFoundation(null));
+  }, [org, variant]);
+
+  if (error) {
+    return (
+      <div className="flex h-screen items-center justify-center bg-[#0f141a] p-8 text-center text-sm text-red-300">
+        <div>
+          <p className="mb-2 font-semibold">Studio could not read your project.</p>
+          <p className="text-gray-400">{error}</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="grid h-screen grid-rows-[auto_1fr] bg-[#0f141a] text-gray-200">
+      <header className="flex items-center gap-4 border-b border-gray-800 px-4 py-2">
+        {/* Local asset, not a CDN URL: Studio is offline by design and the mark must
+            render on a plane. Wordmark stays lowercase per the brand. */}
+        <span className="flex items-center gap-2">
+          <img src="/logo.png" alt="" className="size-6 object-contain" />
+          <span className="text-sm font-semibold tracking-tight text-gray-100">unoverse studio</span>
+        </span>
+
+        <nav className="flex items-center gap-1">
+          {NAV.map((n) => (
+            <button
+              key={n.key}
+              onClick={() => setView(n.key)}
+              className={`rounded px-2.5 py-1 text-xs font-medium transition ${
+                view === n.key ? "bg-white/10 text-gray-100" : "text-gray-400 hover:text-gray-200"
+              }`}
+            >
+              {n.label}
+            </button>
+          ))}
+        </nav>
+
+        <div className="ml-auto flex items-center gap-2 text-xs">
+          {/*
+            The dropdown both SELECTS and CREATES. A separate button would be a second
+            place to look for the same idea, and the moment a developer wants a new project
+            is the moment they open this list and do not find it.
+          */}
+          <select
+            value={org}
+            onChange={(e) => {
+              if (e.target.value === "__new") return setNewProjectOpen(true);
+              setOrg(e.target.value);
+            }}
+            className="rounded border border-gray-700 bg-[#1b2129] px-2 py-1 text-gray-200"
+          >
+            <option value="all">All projects</option>
+            {projects.map((o) => (
+              <option key={o} value={o}>
+                {o}
+              </option>
+            ))}
+            <option disabled>──────────</option>
+            <option value="__new">New project…</option>
+          </select>
+          <button
+            onClick={() => setVariant(variant === "light" ? "dark" : "light")}
+            className="rounded border border-gray-700 px-2 py-1 text-gray-300 hover:text-gray-100"
+            title="Theme variant"
+          >
+            {variant}
+          </button>
+          {/* The ONLY place Studio asks for anything. Unconnected reads as an invitation,
+              not an error: working offline is a supported state, not a missing step. */}
+          <button
+            onClick={() => setConnectOpen(true)}
+            className="rounded border border-gray-700 px-2 py-1 text-gray-300 hover:text-gray-100"
+            title="Where your work publishes to"
+          >
+            {active ? active.label : "Not connected"}
+          </button>
+          {/* PUBLISHES THE SELECTED PROJECT. Disabled rather than hidden when there is
+              nowhere to send or nothing selected: a missing button reads as a missing
+              feature, a disabled one with a reason reads as a next step. */}
+          <button
+            onClick={() => setPublishOpen(true)}
+            disabled={!active || org === "all"}
+            title={
+              !active
+                ? "Connect a universe first"
+                : org === "all"
+                  ? "Pick one project to publish"
+                  : `Publish ${org} to ${active.label}`
+            }
+            className={
+              active && org !== "all"
+                ? "rounded bg-emerald-500 px-3 py-1 font-medium text-emerald-950 hover:bg-emerald-400"
+                : "rounded border border-gray-700 px-2 py-1 text-gray-500 disabled:cursor-not-allowed"
+            }
+          >
+            Publish
+          </button>
+        </div>
+      </header>
+
+      {publishOpen && active && org !== "all" && (
+        <PublishDialog project={org} universe={active} onClose={() => setPublishOpen(false)} />
+      )}
+
+      {/* Created, then SELECTED. Making a project and leaving the developer looking at the
+          old one would be a step they have to discover. */}
+      {newProjectOpen && (
+        <NewProject
+          onCreated={async (name) => {
+            await loadProjects();
+            setOrg(name);
+            setNewProjectOpen(false);
+          }}
+          onClose={() => setNewProjectOpen(false)}
+        />
+      )}
+
+      {connectOpen && (
+        <ConnectUniverse
+          active={active}
+          onSelect={onSelectUniverse}
+          onClose={() => setConnectOpen(false)}
+        />
+      )}
+
+      {/* The shared screens size themselves with `flex-1`, so the host must be a flex
+          column. As a grid cell they would collapse to their content height. */}
+      <main className="flex min-h-0 flex-col overflow-hidden">
+        {!theme ? (
+          <div className="p-6 text-xs text-gray-500">Reading your theme…</div>
+        ) : view === "apps" ? (
+          <TemplatesView theme={theme} themeName={variant} org={org} />
+        ) : view === "components" ? (
+          <ComponentsView theme={theme} org={org} />
+        ) : view === "atoms" ? (
+          <AtomsView theme={theme} />
+        ) : view === "tokens" ? (
+          <DesignSystemView theme={theme} foundation={foundation} org={org} />
+        ) : view === "skills" ? (
+          <SkillsView />
+        ) : view === "nodes" ? (
+          <NodesView />
+        ) : (
+          <PromptBlocksView />
+        )}
+      </main>
+    </div>
+  );
+}

package/src/ConnectUniverse.tsx

@@ -0,0 +1,232 @@
+/**
+ * Connect to a universe: the "when you are ready" step.
+ *
+ * Everything before this point is offline. A developer builds components, templates and
+ * nodes against their own folders with no account and no network. This screen is where
+ * they choose somewhere to publish, and it is deliberately the only place Studio asks
+ * for anything.
+ *
+ * The flow is: type an address, Studio asks that universe who authenticates it, then
+ * signs in against whatever the answer was. Studio names no provider.
+ *
+ * See docs/architecture/LOCAL_STUDIO.md.
+ */
+import { useState } from "react";
+import { useAuth } from "react-oidc-context";
+import {
+  normaliseUrl,
+  defaultLabel,
+  discover,
+  loginReady,
+  canPublish,
+  loadUniverses,
+  saveUniverse,
+  removeUniverse,
+  type Universe,
+} from "./universes";
+
+/** Decode a JWT payload without verifying it. Display only: the universe verifies. */
+function claimsOf(accessToken: string | undefined): Record<string, unknown> | null {
+  if (!accessToken) return null;
+  try {
+    return JSON.parse(atob(accessToken.split(".")[1] ?? ""));
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Sign out of the connected universe.
+ *
+ * `removeUser` clears the local session only: it does not sign you out of the identity
+ * provider, so signing in again may return the same account without prompting. That is the
+ * provider's decision, not ours, and a full federated logout needs a logout URL configured
+ * per universe. Local is the honest scope for a tool.
+ */
+function SignOut({ auth }: { auth: ReturnType<typeof useAuth> }) {
+  return (
+    <button
+      onClick={() => auth?.removeUser()}
+      className="text-xs text-gray-500 underline-offset-2 hover:text-gray-300 hover:underline"
+    >
+      Sign out
+    </button>
+  );
+}
+
+export function ConnectUniverse({
+  active,
+  onSelect,
+  onClose,
+}: {
+  active: Universe | null;
+  onSelect: (universe: Universe | null) => void;
+  onClose: () => void;
+}) {
+  const [universes, setUniverses] = useState<Universe[]>(() => loadUniverses());
+  const [address, setAddress] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // Undefined when no provider is mounted, which is the normal offline case.
+  const auth = useAuth();
+  const claims = claimsOf(auth?.user?.access_token);
+  const signedIn = Boolean(auth?.isAuthenticated);
+
+  async function connect() {
+    setError(null);
+    setBusy(true);
+    try {
+      const url = normaliseUrl(address);
+      const config = await discover(url);
+      const universe: Universe = {
+        url,
+        label: defaultLabel(url),
+        config,
+        connectedAt: new Date().toISOString(),
+      };
+      setUniverses(saveUniverse(universe));
+      setAddress("");
+      onSelect(universe);
+    } catch (e: any) {
+      // These messages are written to be actionable (universes.ts), so show them as-is.
+      setError(e?.message ?? String(e));
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  function forget(url: string) {
+    setUniverses(removeUniverse(url));
+    if (active?.url === url) onSelect(null);
+  }
+
+  const readiness = active ? loginReady(active.config) : null;
+  const allowed = active && claims ? canPublish(claims, active.config) : false;
+  /** The signed-in address. Namespace-aware: Auth0 emits `email` ONLY namespaced on an
+   *  access token, so a plain `claims.email` is undefined and the id leaks into the UI. */
+  const email = (() => {
+    const direct = (claims as any)?.email;
+    if (typeof direct === "string") return direct;
+    const key = Object.keys(claims ?? {}).find((k) => k.endsWith("/email") || k.endsWith("/claims/email"));
+    const value = key ? (claims as any)[key] : undefined;
+    return typeof value === "string" ? value : null;
+  })();
+
+  /** What the token says, for the message below. Trimmed, as the checks are. */
+  const permissionList: string[] = (() => {
+    const direct = (claims as any)?.permissions;
+    const nsKey = Object.keys(claims ?? {}).find((k) => k.endsWith("/permissions"));
+    const list = Array.isArray(direct) ? direct : ((claims as any)?.[nsKey ?? ""] ?? []);
+    return Array.isArray(list) ? list.map((p) => String(p).trim()) : [];
+  })();
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-start justify-center bg-black/60 p-8" onClick={onClose}>
+      <div
+        className="w-full max-w-lg rounded-xl border border-gray-800 bg-[#151b22] p-6 text-gray-200 shadow-2xl"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <h2 className="text-base font-semibold text-gray-100">Publish to a universe</h2>
+        <p className="mt-1 text-xs text-gray-400">
+          Studio works offline. Connect a universe when you are ready to publish.
+        </p>
+
+        {/* Add one */}
+        <div className="mt-5 flex gap-2">
+          <input
+            value={address}
+            onChange={(e) => setAddress(e.target.value)}
+            onKeyDown={(e) => e.key === "Enter" && !busy && connect()}
+            placeholder="your-universe.com"
+            className="flex-1 rounded border border-gray-700 bg-[#1b2129] px-3 py-2 text-sm text-gray-200 placeholder:text-gray-600 focus:border-gray-500 focus:outline-none"
+          />
+          <button
+            onClick={connect}
+            disabled={busy || !address.trim()}
+            className="rounded bg-gray-100 px-4 py-2 text-sm font-medium text-gray-900 hover:bg-white disabled:opacity-30"
+          >
+            {busy ? "Checking..." : "Connect"}
+          </button>
+        </div>
+        {error && <p className="mt-2 text-xs text-red-400">{error}</p>}
+
+        {/* The ones this developer has connected to. There is no central directory of
+            universes and there cannot be: each is independent with its own provider. */}
+        {universes.length > 0 && (
+          <ul className="mt-5 space-y-2">
+            {universes.map((u) => (
+              <li
+                key={u.url}
+                className={`flex items-center justify-between rounded-md border px-3 py-2 text-sm ${
+                  active?.url === u.url
+                    ? "border-gray-500 bg-white/5"
+                    : "border-gray-800 hover:border-gray-700"
+                }`}
+              >
+                <button className="text-left" onClick={() => onSelect(u)}>
+                  <span className="font-medium">{u.label}</span>
+                  <span className="ml-2 text-gray-500">{u.url}</span>
+                </button>
+                <button className="text-xs text-gray-500 hover:text-red-400" onClick={() => forget(u.url)}>
+                  Forget
+                </button>
+              </li>
+            ))}
+          </ul>
+        )}
+
+        {/* Sign-in state for the selected universe. Every branch says what to do next. */}
+        {active && (
+          <div className="mt-5 border-t border-gray-800 pt-4 text-sm">
+            {readiness && !readiness.ok ? (
+              // A universe with auth off, or one misconfigured. Publishing is not
+              // possible, and saying so beats a redirect to a provider that is not there.
+              <p className="text-xs text-amber-400">{readiness.reason}</p>
+            ) : !signedIn ? (
+              <button
+                onClick={() => auth?.signinRedirect()}
+                className="rounded bg-gray-100 px-4 py-2 text-sm font-medium text-gray-900 hover:bg-white"
+              >
+                Sign in to {active.label}
+              </button>
+            ) : allowed ? (
+              <div className="flex items-center justify-between gap-3">
+                {/* The fact, not the identifier. A raw `auth0|692be24b…` is noise: it is not
+                    how anyone thinks of themselves, and it appeared only because `email` is a
+                    NAMESPACED claim that a plain read misses (AUTH_TOKEN_FLOW.md names this
+                    exact footgun). Read properly it is an address; absent, the sentence is
+                    better without it. */}
+                <p className="text-sm font-medium text-emerald-400">
+                  Ready to publish{email ? <span className="font-normal text-gray-400"> as {email}</span> : null}
+                </p>
+                <SignOut auth={auth} />
+              </div>
+            ) : (
+              // Signed in but without the permission. Said HERE, not at the first push,
+              // so nobody builds for an hour and then finds out.
+              <div>
+                <p className="text-xs text-amber-400">
+                  Signed in, but your account does not have{" "}
+                  <code>{active.config.publishPermission}</code> on this universe. Ask whoever
+                  administers it to grant it.
+                </p>
+                {/* WHAT THE TOKEN ACTUALLY CARRIES. Kept, in a reduced form, because "you do not
+                    have this permission" is unhelpful when the identity provider visibly
+                    says you do. Printing the claim turns a guess into a fact: it is how a
+                    leading space in an Auth0 permission (" marketplace:publish") was found,
+                    after the screens, the token and the label had all agreed it was correct. */}
+                <p className="mt-2 text-xs text-gray-500">
+                  Your token carries: <code>{permissionList.join(", ") || "no permissions claim"}</code>
+                </p>
+                <div className="mt-2">
+                  <SignOut auth={auth} />
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/NewProject.tsx

@@ -0,0 +1,89 @@
+/**
+ * Creating a project from inside Studio.
+ *
+ * A project is `rx/<name>/`: the folder a developer authors in, and the unit that
+ * publishes. Until this existed, Studio could create your FIRST one (bin/studio.mjs, at
+ * launch, only when the folder was empty) and never your second. The dropdown listed what
+ * was on disk and offered no way to add to it, so the answer to "start another project"
+ * was to quit Studio and mkdir.
+ *
+ * The name is validated on the server (local/scaffold.mjs) rather than here, because it is
+ * the same rule the CLI applies and a rule stated twice is a rule that will disagree with
+ * itself. This screen shows what the server said.
+ */
+import { useState } from "react";
+
+export function NewProject({
+  onCreated,
+  onClose,
+}: {
+  onCreated: (name: string) => void;
+  onClose: () => void;
+}) {
+  const [name, setName] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [busy, setBusy] = useState(false);
+
+  async function create() {
+    setBusy(true);
+    setError(null);
+    try {
+      const res = await fetch("/dev/projects", {
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({ name: name.trim() }),
+      });
+      const b = await res.json();
+      if (!res.ok || b.error) throw new Error(b.error ?? `HTTP ${res.status}`);
+      onCreated(b.name);
+    } catch (e: any) {
+      setError(e?.message ?? String(e));
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-start justify-center bg-black/60 p-8" onClick={onClose}>
+      <div
+        className="w-full max-w-md rounded-xl border border-gray-800 bg-[#151b22] p-6 text-gray-200 shadow-2xl"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <h2 className="text-base font-semibold text-gray-100">New project</h2>
+        <p className="mt-1 text-xs text-gray-500">
+          Creates rx/&lt;name&gt;/ with components, styles and templates, and one component to
+          open on.
+        </p>
+
+        <input
+          autoFocus
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+          onKeyDown={(e) => e.key === "Enter" && name.trim() && !busy && create()}
+          placeholder="my-project"
+          spellCheck={false}
+          className="mt-4 w-full rounded border border-gray-700 bg-[#0f141a] px-3 py-2 text-sm text-white placeholder:text-gray-600 focus:border-emerald-500 focus:outline-none"
+        />
+        <p className="mt-2 text-xs text-gray-600">
+          Lowercase letters, numbers and dashes. This becomes the folder name and the owner
+          of everything you publish from it.
+        </p>
+
+        {error && <p className="mt-3 text-xs text-red-400">{error}</p>}
+
+        <div className="mt-6 flex items-center gap-2">
+          <button
+            onClick={create}
+            disabled={busy || !name.trim()}
+            className="rounded bg-emerald-500 px-4 py-2 text-sm font-semibold text-emerald-950 hover:bg-emerald-400 disabled:opacity-30"
+          >
+            {busy ? "Creating…" : "Create project"}
+          </button>
+          <button onClick={onClose} className="rounded px-3 py-2 text-sm text-gray-400 hover:text-gray-200">
+            Cancel
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}