@unoverse-platform/studio 0.1.0

package/src/PublishDialog.tsx

@@ -0,0 +1,309 @@
+/**
+ * Publish a project to the connected universe.
+ *
+ * PLAN, THEN SEND. Publishing writes rows that every workflow in a universe can use, so
+ * "what am I about to do" is answered before anything moves. Blind publishing is how a
+ * project half-lands and nobody can tell by looking.
+ *
+ * The plan runs the moment this opens, unasked: it reads disk and dry-runs against the
+ * universe, writing nothing. Only the second press sends. An empty dialog with a button
+ * marked "check" made the developer ask for the answer they opened the dialog to get.
+ *
+ * The work happens in Studio's local host (`local/plugin.ts`), not here: it reads the
+ * developer's disk, which a browser cannot. This screen collects a decision and shows a
+ * result. It calls the same functions as `unoverse publish assets`, so the two cannot
+ * disagree about what a publish is.
+ *
+ * See docs/architecture/DECLARATIVE_NODES.md §9.
+ */
+import { useEffect, useRef, useState } from "react";
+import { useAuth } from "react-oidc-context";
+import { canPublish, type Universe } from "./universes";
+
+interface Item {
+  kind: string;
+  name: string;
+  why?: string;
+  mode?: string;
+}
+interface Plan {
+  create: Item[];
+  update: Item[];
+  unchanged: Item[];
+  refused: Item[];
+}
+interface Problem {
+  level: string;
+  file: string;
+  line?: number;
+  msg: string;
+}
+
+/** Decode a JWT payload without verifying it. Display only: the universe verifies. */
+function claimsOf(token: string | undefined): Record<string, unknown> | null {
+  if (!token) return null;
+  try {
+    return JSON.parse(atob(token.split(".")[1] ?? ""));
+  } catch {
+    return null;
+  }
+}
+
+export function PublishDialog({
+  project,
+  universe,
+  onClose,
+}: {
+  project: string;
+  universe: Universe;
+  onClose: () => void;
+}) {
+  const auth = useAuth();
+  const token = auth?.user?.access_token;
+
+  const [plan, setPlan] = useState<Plan | null>(null);
+  const [problems, setProblems] = useState<Problem[]>([]);
+  const [blocked, setBlocked] = useState<Problem[] | null>(null);
+  const [sent, setSent] = useState<{ sent: Item[]; failed: Item[] } | null>(null);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const allowed = canPublish(claimsOf(token), universe.config);
+
+  async function call(step: "plan" | "send") {
+    setError(null);
+    setBusy(true);
+    try {
+      const res = await fetch(`/publish/${step}`, {
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({ project, universe: universe.url, token }),
+      });
+      const body = await res.json();
+      if (body.error) throw new Error(body.error);
+      // Errors STOP the publish. Reported as findings rather than a failure, because the
+      // developer's next action is to fix a file, not to retry.
+      if (body.blocked) {
+        setBlocked(body.errors);
+        return;
+      }
+      setProblems(body.problems ?? []);
+      setPlan(body.plan);
+      if (step === "send") setSent({ sent: body.sent ?? [], failed: body.failed ?? [] });
+    } catch (e: any) {
+      setError(e?.message ?? String(e));
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  /**
+   * PLAN ON OPEN. The dialog's whole job is to answer "what am I about to publish", so it
+   * answers it without being asked. Planning reads disk and dry-runs against the universe;
+   * it writes nothing, which is what makes running it unprompted safe.
+   *
+   * The guard is a ref rather than the usual empty dep array: `call` closes over state that
+   * changes, and a second plan on a re-render would be a wasted round trip and a flicker.
+   */
+  const planned = useRef(false);
+  useEffect(() => {
+    if (planned.current || !allowed || !token) return;
+    planned.current = true;
+    call("plan");
+  }, [allowed, token]);
+
+  const toSend = (plan?.create.length ?? 0) + (plan?.update.length ?? 0);
+  const warnings = problems.filter((p) => p.level === "warn").length;
+
+  /**
+   * ONE ROW PER ITEM. A comma-joined list per status cannot be scanned: the question a
+   * developer opens this with is "which of MY things is about to move", and that is a
+   * property of the item, not of a group heading. So every item gets a line carrying its
+   * own status, and the statuses sort so the ones that will move sit at the top.
+   *
+   * The kind is singular here, because a row is one thing. `bpp` is a style set and
+   * `bppchatlayout` is an app; without that word they read as five apps, which is how a
+   * developer concludes their components were never collected when they were.
+   */
+  const KIND_LABEL: Record<string, string> = {
+    component: "component",
+    atom: "atom",
+    style: "styles",
+    template: "app",
+    node: "node",
+    skill: "skill",
+    "prompt-block": "prompt block",
+    recipe: "recipe",
+  };
+
+  /**
+   * Contrast is the whole job here. Dark text on a dark panel made a five row list
+   * unreadable, so the name carries full weight, the status carries colour, and only the
+   * kind is allowed to recede.
+   */
+  const STATUS = {
+    create: { label: "new", pill: "bg-emerald-400/15 text-emerald-300 ring-emerald-400/30", order: 0 },
+    update: { label: "changed", pill: "bg-amber-400/15 text-amber-300 ring-amber-400/30", order: 1 },
+    refused: { label: "refused", pill: "bg-red-400/15 text-red-300 ring-red-400/30", order: 2 },
+    unchanged: { label: "unchanged", pill: "bg-gray-500/10 text-gray-400 ring-gray-500/30", order: 3 },
+  } as const;
+  type Status = keyof typeof STATUS;
+
+  /** Every item, flattened, carrying its status. Sorted by what will move, then by name. */
+  const rows: Array<Item & { status: Status }> = plan
+    ? (Object.keys(STATUS) as Status[])
+        .flatMap((status) => plan[status].map((i) => ({ ...i, status })))
+        .sort(
+          (a, b) =>
+            STATUS[a.status].order - STATUS[b.status].order ||
+            a.kind.localeCompare(b.kind) ||
+            a.name.localeCompare(b.name),
+        )
+    : [];
+
+  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-xl 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 <span className="text-gray-400">{project}</span> to {universe.label}
+        </h2>
+
+        {/* Said HERE, before any work, not at the first push. */}
+        {!allowed && (
+          <p className="mt-3 text-xs text-amber-400">
+            Your account does not have <code>{universe.config.publishPermission}</code> on this
+            universe. Ask whoever administers it to grant it.
+          </p>
+        )}
+
+        {error && <p className="mt-3 text-xs text-red-400">{error}</p>}
+
+        {busy && !plan && !blocked && (
+          <p className="mt-4 text-sm text-gray-500">Reading {project}…</p>
+        )}
+
+        {/* Lint errors: nothing was sent, and the file and line are what fixes it. */}
+        {blocked && (
+          <div className="mt-4">
+            <p className="text-xs text-red-400">
+              {blocked.length} error{blocked.length === 1 ? "" : "s"} in {project}. Nothing was sent.
+            </p>
+            <ul className="mt-2 max-h-48 space-y-1 overflow-y-auto text-xs">
+              {blocked.slice(0, 12).map((p, i) => (
+                <li key={i} className="text-gray-400">
+                  <span className="text-gray-500">
+                    {p.file}
+                    {p.line ? `:${p.line}` : ""}
+                  </span>{" "}
+                  {p.msg}
+                </li>
+              ))}
+            </ul>
+          </div>
+        )}
+
+        {plan && !blocked && (
+          <div className="mt-4">
+            {/* The count sentence answers "how much", the list answers "which". Both, always. */}
+            <p className="text-xs font-medium uppercase tracking-wide text-gray-400">
+              {[
+                plan.create.length && `${plan.create.length} new`,
+                plan.update.length && `${plan.update.length} changed`,
+                plan.unchanged.length && `${plan.unchanged.length} unchanged`,
+                plan.refused.length && `${plan.refused.length} refused`,
+              ]
+                .filter(Boolean)
+                .join(", ") || "nothing to publish"}
+            </p>
+
+            <div className="mt-3 max-h-72 divide-y divide-white/5 overflow-y-auto rounded-lg border border-white/10 bg-black/20">
+              {rows.map((r) => (
+                <div key={`${r.kind}/${r.name}`} className="flex items-baseline gap-3 px-3 py-2 hover:bg-white/5">
+                  <span
+                    className={`w-[74px] shrink-0 rounded px-1.5 py-0.5 text-center text-[11px] font-semibold uppercase tracking-wide ring-1 ${STATUS[r.status].pill}`}
+                  >
+                    {STATUS[r.status].label}
+                  </span>
+                  <span
+                    className={`flex-1 truncate text-sm font-medium ${
+                      r.status === "unchanged" ? "text-gray-400" : "text-white"
+                    }`}
+                  >
+                    {r.name}
+                  </span>
+                  {/* The kind sits last and quiet: it labels the name rather than competing with it. */}
+                  <span className="shrink-0 text-xs text-gray-500">{KIND_LABEL[r.kind] ?? r.kind}</span>
+                  {/* The reason belongs ON the refused row: it is the only row it explains. */}
+                  {r.why && <span className="shrink-0 text-xs text-red-300">{r.why}</span>}
+                </div>
+              ))}
+            </div>
+            {/*
+              Said once, in the place where its absence gets noticed. The Components tab
+              lists the design system alongside this project's own, so a plan holding two
+              components where the tab showed eighteen reads as a collection bug.
+            */}
+            <p className="pt-3 text-xs leading-relaxed text-gray-500">
+              Only {project} publishes. Design system components, atoms and styles belong to
+              the universe already.
+            </p>
+            {/*
+              A COUNT ALONE IS USELESS. "2 warnings" tells a developer something is wrong
+              and gives them no way to find it, which is worse than silence: it is a nag
+              with no address. The file, line and message are what fixes it, so they are
+              here, one click away rather than one grep away.
+            */}
+            {warnings > 0 && (
+              <details className="pt-1">
+                <summary className="cursor-pointer text-xs text-amber-300/80 hover:text-amber-300">
+                  {warnings} warning{warnings === 1 ? "" : "s"}, not blocking
+                </summary>
+                <ul className="mt-2 max-h-40 space-y-2 overflow-y-auto text-xs">
+                  {problems
+                    .filter((p) => p.level === "warn")
+                    .map((p, i) => (
+                      <li key={i} className="leading-relaxed">
+                        <span className="text-gray-500">
+                          {p.file?.replace(/^.*\/rx\//, "")}
+                          {p.line ? `:${p.line}` : ""}
+                        </span>
+                        <br />
+                        <span className="text-gray-400">{p.msg}</span>
+                      </li>
+                    ))}
+                </ul>
+              </details>
+            )}
+          </div>
+        )}
+
+        {sent && (
+          <p className={`mt-4 text-sm ${sent.failed.length ? "text-red-400" : "text-emerald-400"}`}>
+            {sent.sent.length} published{sent.failed.length ? `, ${sent.failed.length} failed` : ""}
+          </p>
+        )}
+
+        <div className="mt-6 flex items-center gap-2">
+          {plan && !sent && toSend > 0 && (
+            <button
+              onClick={() => call("send")}
+              disabled={busy}
+              className="rounded bg-emerald-500 px-4 py-2 text-sm font-semibold text-emerald-950 hover:bg-emerald-400 disabled:opacity-30"
+            >
+              {busy ? "Publishing…" : `Publish ${toSend} item${toSend === 1 ? "" : "s"}`}
+            </button>
+          )}
+          {plan && !sent && toSend === 0 && (
+            <p className="text-sm text-emerald-400">{project} is already up to date</p>
+          )}
+          <button onClick={onClose} className="rounded px-3 py-2 text-sm text-gray-400 hover:text-gray-200">
+            {sent ? "Done" : "Cancel"}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/UniverseSession.tsx

@@ -0,0 +1,121 @@
+/**
+ * The signed-in session for ONE universe.
+ *
+ * Local Studio is offline and unauthenticated by default, and that must not change:
+ * building a component needs no account, no network and no provider. Authentication
+ * appears only when a developer connects to a universe in order to publish.
+ *
+ * So the provider is mounted CONDITIONALLY. With no universe selected, or one that has
+ * auth switched off, children render exactly as they did before this file existed.
+ *
+ * THE CONFIG COMES FROM THE UNIVERSE, NOT FROM HERE. Canvas reads its issuer and client
+ * id from `window.__GRAVITY_CONFIG__` injected into its own page; Studio runs on the
+ * developer's machine and cannot, so it asks (`universes.ts` → discover). That is what
+ * keeps the tooling provider-agnostic: nothing in Studio names Auth0.
+ *
+ * See docs/architecture/LOCAL_STUDIO.md.
+ */
+import type { ReactNode } from "react";
+import { AuthProvider, AuthContext, type AuthContextProps } from "react-oidc-context";
+import { WebStorageStateStore } from "oidc-client-ts";
+import { loginReady, type Universe } from "./universes";
+
+/**
+ * The OIDC settings for one universe. Mirrors Canvas's `oidcConfig`
+ * (`apps/canvas/src/App.jsx`) so a token minted for Studio looks the same to the
+ * platform as one minted for Canvas, with one difference: every value is read from the
+ * universe rather than from this app's build.
+ */
+function oidcConfigFor(universe: Universe) {
+  const { issuer, clientId, audience } = universe.config;
+  return {
+    authority: issuer as string,
+    client_id: clientId as string,
+    // Studio's own origin. The universe's identity provider must list this as an allowed
+    // callback, which is the one setup step a customer does on their side.
+    redirect_uri: window.location.origin,
+    scope: "openid profile email",
+    // Auth0 and friends only mint an API access token when an audience is asked for.
+    // Without it the login succeeds and the token is useless against the universe.
+    ...(audience ? { extraQueryParams: { audience } } : {}),
+    // sessionStorage, not localStorage: the token dies with the tab. Studio's standing
+    // rule is that it never persists a secret (local/keys.ts), and a token is a secret.
+    userStore: new WebStorageStateStore({ store: window.sessionStorage }),
+    // Same reason Canvas disables it: a stored user carries the redirect_uri it was
+    // minted with, and a silent renew against a different universe reuses the wrong one.
+    automaticSilentRenew: false,
+    onSigninCallback: () => {
+      window.history.replaceState({}, document.title, window.location.pathname);
+    },
+  };
+}
+
+/**
+ * A signed-out session, for when Studio is not connected to a universe.
+ *
+ * Cast because `AuthContextProps` also carries the oidc-client-ts settings and event
+ * surface, none of which exists without a provider and none of which the screens touch.
+ * The honest alternative is a fake settings object, which would be a bigger lie than this.
+ */
+const OFFLINE_SESSION = {
+  isAuthenticated: false,
+  isLoading: false,
+  user: undefined,
+  error: undefined,
+  activeNavigator: undefined,
+  signinRedirect: offline("signinRedirect"),
+  signinPopup: offline("signinPopup"),
+  signinSilent: offline("signinSilent"),
+  signoutRedirect: offline("signoutRedirect"),
+  signoutPopup: offline("signoutPopup"),
+  signoutSilent: offline("signoutSilent"),
+  removeUser: offline("removeUser"),
+  clearStaleState: offline("clearStaleState"),
+  querySessionStatus: offline("querySessionStatus"),
+  revokeTokens: offline("revokeTokens"),
+  startSilentRenew: () => {},
+  stopSilentRenew: () => {},
+} as unknown as AuthContextProps;
+
+/** Reject loudly: calling this means a caller forgot Studio has no universe connected. */
+function offline(name: string) {
+  return async () => {
+    throw new Error(`${name} needs a universe. Connect one first (Studio is offline).`);
+  };
+}
+
+export function UniverseSession({
+  universe,
+  children,
+}: {
+  universe: Universe | null;
+  children: ReactNode;
+}) {
+  // No universe, or one that cannot be logged into: the offline case, and the normal one.
+  //
+  // The shared screens call `useAuth()` unconditionally and cope with having no session.
+  // But react-oidc-context warns whenever the context VALUE is falsy:
+  //
+  //     const context = React.useContext(AuthContext);
+  //     if (!context) console.warn("AuthProvider context is undefined, ...");
+  //
+  // so mounting the provider with `undefined` warns exactly as loudly as mounting nothing
+  // (both were tried). With TemplatesView re-rendering it is a stream of warnings about a
+  // state that is fully supported.
+  //
+  // So hand it a real value meaning SIGNED OUT. Everything the screens read is present and
+  // false; the sign-in actions throw rather than no-op, because reaching one from here
+  // would mean a code path forgot there is no universe, and silence would hide that.
+  if (!universe || !loginReady(universe.config).ok) {
+    return <AuthContext.Provider value={OFFLINE_SESSION}>{children}</AuthContext.Provider>;
+  }
+
+  // `key` forces a fresh provider when the universe changes. Without it the library keeps
+  // the previous authority and client id, and a developer switching universes would stay
+  // signed in to the old one while appearing to be on the new.
+  return (
+    <AuthProvider key={universe.url} {...oidcConfigFor(universe)}>
+      {children}
+    </AuthProvider>
+  );
+}

package/src/host.ts

@@ -0,0 +1,165 @@
+/**
+ * The local Studio's HOST module.
+ *
+ * The shared screens (../screens) import transport, auth and persistence from the bare
+ * specifier `studio-host`. Canvas aliases that to a module talking to a running
+ * universe. This one talks to the developer's own disk, via the local routes in
+ * ../local/plugin.ts. Same screens, different world underneath.
+ *
+ * There is no auth here on purpose. Local Studio is offline and single-user: the files
+ * are already yours. Authentication belongs to a universe, not to a folder.
+ *
+ * See docs/architecture/LOCAL_STUDIO.md.
+ */
+import { useCallback, useEffect, useState } from "react";
+import type { ResolvedTheme, UnoverseDefinition, UnoverseClient } from "@unoverse/sdk";
+
+/** Everything is same-origin: the Vite dev server serves both the app and the routes. */
+export const UNOVERSE_BASE = "";
+
+/** No login offline. Kept so the shared screens can ask without branching on host. */
+export const hasAuth = false;
+
+/** Plain fetch. The bearer the Canvas host attaches has no meaning against a folder. */
+export async function authedFetch(input: string, init?: RequestInit): Promise<Response> {
+  return fetch(input, init);
+}
+
+/** The Canvas host's helper under its other name, so shared screens can use either. */
+export const fetchUnoverse = authedFetch;
+
+/**
+ * The disk-backed client.
+ *
+ * The SDK renderer takes an `UnoverseClient` and calls it to resolve definitions and
+ * themes. Against a universe those are MCP reads. Here they are reads of the
+ * developer's folder, served by the local plugin. The SDK is untouched: it asks the
+ * same questions and neither knows nor cares what answers them.
+ */
+class LocalUnoverseClient {
+  /**
+   * THE ORIGIN OF THE UNIVERSE THIS CLIENT TALKS TO. There isn't one: this reads a folder.
+   *
+   * It is here because the SDK's client exposes it (`core/client.ts`) and the renderer uses
+   * it to derive other lanes on the same server, notably the voice audio socket
+   * (`template.tsx` → `client.serverOrigin.replace(/^http/, "ws")`). This class is a
+   * duck-typed stand-in for that client, so a member it does not implement is not a missing
+   * feature, it is a CRASH at render: reading `.replace` of undefined took the whole
+   * Studio page down the moment a template carrying a voice config was previewed.
+   *
+   * Studio's own origin is the honest answer. Nothing is listening on `/ws/gravity` here,
+   * so voice fails when it tries to CONNECT, which is a message about needing a universe
+   * rather than a blank screen. Previewing the layout keeps working either way.
+   */
+  get serverOrigin(): string {
+    // CONNECTED UNIVERSE FIRST (2026-07-28). Once the developer connects this Studio to a
+    // universe (App.tsx persists the pointer under `studio:universe`), every lane the
+    // renderer derives from the client's origin — above all the VOICE audio socket
+    // (`template.tsx` → serverOrigin.replace(/^http/, "ws") → /ws/gravity) — must dial
+    // THE UNIVERSE, which actually serves it. Studio's own origin serves no /ws/gravity,
+    // so before this read the voice socket died against :4108 even while chat streamed
+    // fine from the universe. The folder answers only when no universe is selected.
+    try {
+      const raw = localStorage.getItem("studio:universe");
+      if (raw) {
+        const url = JSON.parse(raw) as unknown;
+        if (typeof url === "string" && url) return new URL(url).origin;
+      }
+    } catch {
+      /* malformed pointer → fall through to the folder's honest answer */
+    }
+    return typeof location === "undefined" ? "http://localhost" : location.origin;
+  }
+
+  /** Nothing to connect to. Present because the SDK's lifecycle calls it. */
+  async connect(): Promise<void> {}
+
+  /** Tools are a universe's verbs (they run workflows). A folder has none. */
+  async callTool(name: string): Promise<unknown> {
+    throw new Error(
+      `Local Studio cannot call "${name}". Tools run workflows, which need a universe. ` +
+        `Deploy your work and use it on Canvas.`,
+    );
+  }
+
+  async readDefinition(uri: string): Promise<UnoverseDefinition> {
+    const r = await fetch(`/local/definition?uri=${encodeURIComponent(uri)}`);
+    if (!r.ok) throw new Error(`${uri}: ${(await r.json().catch(() => ({}))).error ?? r.status}`);
+    return (await r.json()) as UnoverseDefinition;
+  }
+
+  async readTheme(name = "light"): Promise<ResolvedTheme> {
+    const r = await fetch(`/local/theme?ref=${encodeURIComponent(name)}`);
+    if (!r.ok) throw new Error(`theme ${name}: ${r.status}`);
+    return (await r.json()) as ResolvedTheme;
+  }
+
+  async listThemes(): Promise<string[]> {
+    const r = await fetch("/dev/themes");
+    return r.ok ? ((await r.json()).themes ?? []) : [];
+  }
+
+  async listComponents(): Promise<{ uri: string; name?: string }[]> {
+    const r = await fetch("/dev/components");
+    if (!r.ok) return [];
+    const { components = [] } = await r.json();
+    return components.map((c: { name: string }) => ({ uri: `unoverse://components/${c.name}`, name: c.name }));
+  }
+}
+
+// The cast is the duck-typing made explicit: the SDK types its prop as the concrete
+// UnoverseClient CLASS (private fields block structural matching), and this class is
+// its documented stand-in — it implements every member the renderer actually calls.
+export const client = new LocalUnoverseClient() as unknown as UnoverseClient;
+
+/** Like useState, but survives a reload, so an edit-and-refresh keeps your place. */
+export function usePersistentState<T>(key: string, initial: T): [T, React.Dispatch<React.SetStateAction<T>>] {
+  const [value, setValue] = useState<T>(() => {
+    try {
+      const raw = localStorage.getItem(key);
+      return raw === null ? initial : (JSON.parse(raw) as T);
+    } catch {
+      return initial;
+    }
+  });
+  useEffect(() => {
+    try {
+      localStorage.setItem(key, JSON.stringify(value));
+    } catch {
+      /* ignore */
+    }
+  }, [key, value]);
+  return [value, setValue];
+}
+
+export type RegistryKind = "node" | "skill" | "template" | "prompt" | "component";
+
+/**
+ * Registry toggles decide what a RUNNING universe exposes; they persist to
+ * installed_plugins. Offline there is no universe and nothing to persist, so
+ * everything reads as enabled and toggling does nothing. The screens are shared, so
+ * they must not have to know which host they are in.
+ */
+export function useRegistryToggles(_kind: RegistryKind) {
+  // Signature parity with the web host's hook (registry.tsx): the shared screens
+  // call isEnabled(name)/toggle(name), so the offline stubs must accept the arg.
+  const isEnabled = useCallback((_name: string) => true, []);
+  const toggle = useCallback(async (_name: string) => {}, []);
+  return { isEnabled, toggle };
+}
+
+/** Rendered by the shared screens next to catalog items. Inert offline (see above). */
+export function ToggleSwitch(_: { on: boolean; onClick: () => void; label: string }) {
+  return null;
+}
+
+/**
+ * Chrome for the shared screens. Content panels are LIGHT in both hosts (Design System,
+ * Prompt Blocks and Nodes all read on white); only the surrounding navigator chrome is
+ * dark here. The seam stays so either host can diverge without touching a shared screen.
+ */
+export const chrome = {
+  input: "border-gray-300 bg-white text-gray-800",
+  label: "text-gray-700",
+  muted: "text-gray-500",
+};

package/src/index.css

@@ -0,0 +1,7 @@
+@import "tailwindcss";
+
+html,
+body,
+#root {
+  height: 100%;
+}

package/src/main.tsx

@@ -0,0 +1,11 @@
+/** Local Studio entry point. No auth provider: offline, single-user, your own files. */
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { App } from "./App";
+import "./index.css";
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);