@unoverse-platform/studio 0.1.4 → 0.1.5

package/screens/AtomsView.tsx

@@ -20,6 +20,29 @@ interface AtomDef {
   description?: string;
   whenToUse?: string;
   props?: Record<string, PropDef>;
+  /** `markdown` marks a DOCUMENT component — one of the shapes a model composes Unoverse
+   *  Markdown from. Everything else is interface furniture. The distinction is load-bearing
+   *  rather than cosmetic: the category IS the menu the composer is derived from, so an
+   *  atom's group here is exactly what a model can and cannot reach for. */
+  category?: string;
+}
+
+/** The rail's groups, derived from the atoms themselves — a new category appears on its own
+ *  rather than falling into "Interface" unnoticed. Document components lead: they are the
+ *  set with a contract attached to it. */
+const GROUP_LABEL: Record<string, string> = { markdown: "Unoverse Markdown" };
+const UNGROUPED = "Interface";
+
+function groupAtoms(atoms: AtomDef[]): { label: string; atoms: AtomDef[] }[] {
+  const by = new Map<string, AtomDef[]>();
+  for (const a of atoms) {
+    const key = a.category ?? UNGROUPED;
+    (by.get(key) ?? by.set(key, []).get(key)!).push(a);
+  }
+  const keys = [...by.keys()].sort((a, b) =>
+    a === "markdown" ? -1 : b === "markdown" ? 1 : a === UNGROUPED ? 1 : b === UNGROUPED ? -1 : a.localeCompare(b),
+  );
+  return keys.map((k) => ({ label: GROUP_LABEL[k] ?? k, atoms: by.get(k)! }));
 }
 
 const VIEWPORTS: { id: string; label: string; w: number | null }[] = [
@@ -80,6 +103,7 @@ export function AtomsView({ theme }: { theme: ResolvedTheme }) {
   }, []);
 
   const current = atoms.find((a) => a.name === selected);
+  const groups = useMemo(() => groupAtoms(atoms), [atoms]);
 
   const setField = (key: string, raw: string, type?: string) => {
     setText((t) => ({ ...t, [key]: raw }));
@@ -102,20 +126,27 @@ export function AtomsView({ theme }: { theme: ResolvedTheme }) {
     <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>
+        {groups.map((g) => (
+          <div key={g.label} className="mb-2">
+            <div className="px-2 py-1 text-[10px] font-semibold uppercase tracking-wider text-gray-400">
+              {g.label}
+              <span className="ml-1.5 font-normal text-gray-500">{g.atoms.length}</span>
+            </div>
+            {g.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>
+            ))}
+          </div>
         ))}
       </nav>
 

package/screens/ComponentsView.tsx

@@ -3,10 +3,11 @@
  * by category. Top-right: the rendered component (canvas). Bottom: live controls
  * docked under the canvas. Each control edit is a COMPONENT_DATA merge.
  */
-import { useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { ComponentStore } from "@unoverse/sdk";
-import { StreamedUnoverseComponent, type ResolvedTheme } from "@unoverse/sdk";
-import { client, authedFetch } from "studio-host";
+import { UnoverseComponent, type ResolvedTheme } from "@unoverse/sdk";
+import { client, authedFetch, hasSourceAccess } from "studio-host";
+import { SourceView } from "./SourceView";
 import { stateActivation } from "./states";
 import { usePersistentState, useRegistryToggles, ToggleSwitch } from "studio-host";
 
@@ -40,6 +41,10 @@ interface ComponentDef {
   states?: { name: string; when?: unknown }[];
   /** The definition tree (used to resolve a state's Switch discriminant). */
   root?: unknown;
+  /** The component's OWN state keys and their initial values. What the sub-state rail is
+   *  allowed to list: a Switch in the tree turning on anything else belongs to an inlined
+   *  atom or shared component, or to plain data. */
+  state?: Record<string, unknown>;
 }
 
 const VIEWPORTS: { id: string; label: string; w: number | null }[] = [
@@ -61,11 +66,36 @@ export function ComponentsView({ theme, org = "all" }: { theme: ResolvedTheme; o
   const [panelOpen, setPanelOpen] = useState(false); // controls dock starts closed — most microapps have no props
   const [panelHeight, setPanelHeight] = useState(240);
   const [metaOpen, setMetaOpen] = usePersistentState<boolean>("wb:components:meta", false); // manifest meta panel
+  const [sourceOpen, setSourceOpen] = usePersistentState<boolean>("wb:components:source", false); // the source pane
+  // The editor takes the larger half by default: with it open, this is a code surface.
+  const [editorPct, setEditorPct] = usePersistentState<number>("wb:components:editorPct", 58);
+  // Bumped after a save so the preview re-reads the definition. A remount is the lever the
+  // SDK gives a host; the renderer is a dumb renderer and is not edited for this.
+  const [previewNonce, setPreviewNonce] = useState(0);
   // Responsive preview — the stage width. Components are fluid (width: full), so
   // the channel/slot sizes them; here we simulate that slot to test responsiveness.
   const [stageWidth, setStageWidth] = useState<number | null>(768); // default Tablet — a single component reads best at a contained width
 
   // Drag the divider to resize the controls dock (up = taller).
+  /** Drag the code/preview split. Percentages, so it survives a window resize. */
+  const onSplitDrag = (e: React.MouseEvent) => {
+    e.preventDefault();
+    const host = (e.currentTarget as HTMLElement).parentElement;
+    if (!host) return;
+    const { left, width } = host.getBoundingClientRect();
+    const onMove = (ev: MouseEvent) =>
+      setEditorPct(Math.max(25, Math.min(80, ((ev.clientX - left) / width) * 100)));
+    const onUp = () => {
+      window.removeEventListener("mousemove", onMove);
+      window.removeEventListener("mouseup", onUp);
+    };
+    window.addEventListener("mousemove", onMove);
+    window.addEventListener("mouseup", onUp);
+  };
+
+  /** After a save the host accepted: re-read the definition without reloading the page. */
+  const refreshPreview = useCallback(() => setPreviewNonce((n) => n + 1), []);
+
   const onDragStart = (e: React.MouseEvent) => {
     e.preventDefault();
     const startY = e.clientY;
@@ -154,30 +184,96 @@ export function ComponentsView({ theme, org = "all" }: { theme: ResolvedTheme; o
   // CONTEXTUAL SUB-STATES — a face's own internal steps (a Switch inside the face on a
   // PRIVATE key, e.g. `step`: detail ⇄ book). They exist only within that face, so they
   // show only while it's active — never as component-wide states. Fully derived: any
-  // named case of any non-defaultState Switch in the ACTIVE face's subtree.
-  const subStates = ((): { on: string; name: string }[] => {
-    if (!current?.root || !hasFaces || masterState === "inline") return [];
+  // named case of any Switch in the ACTIVE face's subtree that turns on ONE OF THE
+  // COMPONENT'S OWN STATE KEYS.
+  //
+  // That last clause is the whole rule. A face's subtree contains inlined atoms and
+  // shared components, and those carry Switches of their own — the Document switches on
+  // `tabbed`, on each section's `kind`, and on its own `tab`. Collecting every Switch
+  // listed True, Prose, Steps, KeyFacts, List, Faq, FinePrint, Table, Callout, 0, 1, 2, 3
+  // beside Detail and Apply, as if a product card had fourteen states. None of them are
+  // states of this component: they turn on DATA (`kind`) or on another component's slice
+  // (`tab`), and writing them into this slice does nothing. A component's states are the
+  // keys it declares in `state` — that is what the toolbar is allowed to write.
+  const subStatesOf = (faceName: string): { on: string; name: string }[] => {
+    if (!current?.root || !hasFaces || faceName === "inline") return [];
     let face: unknown;
     const findFace = (n: any): void => {
       if (face || !n || typeof n !== "object") return;
       if (Array.isArray(n)) { n.forEach(findFace); return; }
-      if (n.type === "Switch" && n.on === "defaultState" && n.cases?.[masterState]) { face = n.cases[masterState]; return; }
+      if (n.type === "Switch" && n.on === "defaultState" && n.cases?.[faceName]) { face = n.cases[faceName]; return; }
       Object.values(n).forEach(findFace);
     };
     findFace(current.root);
+    // The component's OWN state keys — everything else in the subtree belongs to an
+    // inlined atom or shared component, or is plain data.
+    const ownKeys = new Set(Object.keys((current.state ?? {}) as Record<string, unknown>));
     const out: { on: string; name: string }[] = [];
     const walk = (n: any): void => {
       if (!n || typeof n !== "object") return;
       if (Array.isArray(n)) { n.forEach(walk); return; }
-      if (n.type === "Switch" && typeof n.on === "string" && n.on !== "defaultState" && n.cases && typeof n.cases === "object") {
+      if (n.type === "Switch" && typeof n.on === "string" && n.on !== "defaultState" && ownKeys.has(n.on) && n.cases && typeof n.cases === "object") {
         for (const k of Object.keys(n.cases)) if (k !== "default" && !out.some((s) => s.name === k)) out.push({ on: n.on, name: k });
       }
       Object.values(n).forEach(walk);
     };
     walk(face);
     return out;
+  };
+  const subStates = subStatesOf(masterState);
+
+  /**
+   * OPEN A LAYOUT: put the preview into the view that layout draws.
+   *
+   * NOT EVERY LAYOUT IS A FACE. `layouts/course.yaml` is the `course` face, but
+   * `layouts/course-detail.yaml` is a STEP inside it: the face is a Switch on `step` whose
+   * `detail` case includes that file. Setting `defaultState` to "course-detail" matches no
+   * case at all, so the preview fell back to its default and the rail appeared to lie.
+   *
+   * The name carries the relationship (`<face>-<step>`), which is the same name-sync rule
+   * that makes a layout filename a state name in the first place. Longest face prefix wins,
+   * so a face called `course` never swallows one called `course-list`.
+   */
+  /**
+   * THE VIEW ON THE PREVIEW, as the layout that draws it.
+   *
+   * The face alone is not the answer: inside `course` the `step` key decides whether
+   * `course-detail` or `course-apply` is drawn, and both are their own layout files. So
+   * this reads the face AND its active step, which is what lets the rail follow along when
+   * the component's own buttons change the view.
+   */
+  const activeLayout = ((): string => {
+    if (!hasFaces || masterState === "inline") return masterState;
+    const subs = subStates;
+    if (!subs.length) return masterState;
+    const slice = selected ? (store.get(CHAT_ID, selected) as Record<string, unknown> | undefined) : undefined;
+    // No value yet means the face's FIRST named case, the same default the renderer takes.
+    const step = (slice?.[subs[0].on] as string) || subs[0].name;
+    return `${masterState}-${step}`;
   })();
 
+  const openLayout = (name: string) => {
+    if (!selected) return;
+    if (faces.includes(name)) {
+      setMasterState(name);
+      return;
+    }
+    const face = [...faces]
+      .filter((f) => f !== "inline")
+      .sort((a, b) => b.length - a.length)
+      .find((f) => name.startsWith(`${f}-`));
+    if (!face) {
+      setMasterState(name); // not a face and not a step of one: best effort
+      return;
+    }
+    const step = subStatesOf(face).find((s) => s.name === name.slice(face.length + 1));
+    setMasterState(face);
+    if (step) {
+      store.apply({ type: "COMPONENT_DATA", chatId: CHAT_ID, nodeId: selected, data: { [step.on]: step.name } });
+      setStoreTick((v) => v + 1);
+    }
+  };
+
   // COPY FOR CANVAS — writes the canvas's own clipboard payload (gravity-workflow,
   // the same shape its Cmd+C emits), so Cmd+V on any canvas pastes this component's
   // node. This is how design components reach a workflow now — the canvas palette
@@ -264,7 +360,9 @@ export function ComponentsView({ theme, org = "all" }: { theme: ResolvedTheme; o
                     STATE_MODEL §5b) are NOT in this list; they live in the toolbar because
                     every component has them. A stateless component is inline by default —
                     no states/ folder, no rail entry at all (inline needs no dedicated state). */}
-                {selected === c.name && (c.states?.length ?? 0) > 0 && (
+                {/* Hidden in dev mode: the file rail lists these as `states/` and
+                    `layouts/`, and opening one is what puts the preview into it. */}
+                {selected === c.name && !sourceOpen && (c.states?.length ?? 0) > 0 && (
                   <div className="my-0.5 ml-2 flex flex-col gap-px border-l border-gray-700 pl-2">
                     {(c.states ?? []).map((s) => {
                       const data = stateActivation(c.root, s);
@@ -294,7 +392,7 @@ export function ComponentsView({ theme, org = "all" }: { theme: ResolvedTheme; o
                     Switch, e.g. focus's detail ⇄ book). Layouts on top, states down the
                     left: these list here ONLY while their face is active — they aren't
                     states of the other faces. First named case = the face's default. */}
-                {selected === c.name && subStates.length > 0 && (
+                {selected === c.name && !sourceOpen && subStates.length > 0 && (
                   <div className="my-0.5 ml-2 flex flex-col gap-px border-l border-gray-700 pl-2">
                     {subStates.map((s, i) => {
                       const cur = (store.get(CHAT_ID, c.name) as Record<string, unknown>)[s.on];
@@ -327,6 +425,34 @@ export function ComponentsView({ theme, org = "all" }: { theme: ResolvedTheme; o
         {/* CANVAS */}
         <section className="flex min-h-0 flex-1 flex-col" style={{ background: theme.color["surface.sunken"] ?? "#f3f4f6", color: theme.color["text.primary"] }}>
           <div className="flex items-center gap-3 border-b px-4 py-2" style={{ borderColor: theme.color["border.subtle"] }}>
+            {/* CODE — FIRST, because it is the biggest change on this screen: it turns a
+                preview surface into a development one. It sat mid-row looking like a peer
+                of Meta, which is only a disclosure. Renders only where the host grants
+                source access, so Canvas never shows it (LOCAL_STUDIO.md §The capability
+                gate). The icon is a panel-split glyph rather than a `</>` typed out of
+                punctuation: it says WHERE the code goes, and it flips to show the state. */}
+            {hasSourceAccess && selected && (
+              <button
+                onClick={() => setSourceOpen((o) => !o)}
+                aria-pressed={sourceOpen}
+                className="flex items-center gap-1.5 rounded border px-2 py-1 text-[11px] font-medium transition"
+                style={{
+                  borderColor: sourceOpen ? "transparent" : theme.color["border.subtle"],
+                  color: sourceOpen ? theme.color["text.inverse"] : theme.color["text.secondary"],
+                  background: sourceOpen ? theme.color["action.primary"] : "transparent",
+                }}
+                title={sourceOpen ? "Close the editor" : "Edit the source behind this component"}
+              >
+                <svg width="13" height="13" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+                  <rect x="1" y="2.5" width="14" height="11" rx="2" stroke="currentColor" strokeWidth="1.3" />
+                  {/* The filled half is the pane the code takes, so the glyph mirrors the
+                      layout: editor left, preview right. */}
+                  <path d="M1.6 3.2h5.4v9.6H1.6z" fill="currentColor" opacity={sourceOpen ? 0.9 : 0.35} />
+                </svg>
+                Code
+              </button>
+            )}
+
             <span className="text-[11px] font-medium uppercase tracking-wider opacity-60">{current?.name ?? "rendered"}</span>
 
             {/* The component's OWN states are picked in the LEFT RAIL; the two MASTER
@@ -334,7 +460,11 @@ export function ComponentsView({ theme, org = "all" }: { theme: ResolvedTheme; o
                 apart from the step states. NOT universal: only a component specifically
                 coded with the two faces (root Switch on defaultState) shows the control —
                 a flat component has one look and gets nothing. */}
-            {hasFaces && (
+            {/* HIDDEN IN DEV MODE. With the editor open the file rail lists the same faces
+                as `layouts/`, in the same order, and opening one switches the preview. Two
+                controls for one choice is one too many, and the rail is the one that also
+                tells you which file you are reading. */}
+            {hasFaces && !sourceOpen && (
               <div className="flex items-center gap-1 rounded p-0.5 text-[11px]" style={{ background: theme.color["border.subtle"] }}>
                 {faces.map((ms) => (
                   <button
@@ -456,13 +586,40 @@ export function ComponentsView({ theme, org = "all" }: { theme: ResolvedTheme; o
           {/* Focus faces that fill + scroll internally never overflow this box; a
               CONTENT-TALL focus face (a document component like PerfectDay) scrolls
               the stage instead of being clipped. */}
-          <div className={isFocused ? "min-h-0 flex-1 overflow-auto" : "flex-1 overflow-auto p-10"}>
-            <div
-              key={masterState}
-              className={`mx-auto max-w-full ${isFocused ? "h-full" : "transition-[width] duration-200"}`}
-              style={{ width: stageWidth ?? "100%", ...(isFocused ? { animation: "wb-focusFadeIn 0.2s ease-out" } : {}) }}
-            >
-              {selected && <StreamedUnoverseComponent client={client} store={store} chatId={CHAT_ID} nodeId={selected} theme={theme} onAction={(a) => setLastAction(typeof a === "string" ? a : a?.type ?? null)} />}
+          {/* CODE LEFT, RENDER RIGHT. With the editor open this is a development surface,
+              so the editor takes the dominant half and the component becomes the preview
+              beside it. Closed, the component has the stage to itself. */}
+          <div className="flex min-h-0 min-w-0 flex-1 overflow-hidden">
+            {sourceOpen && selected && (
+              <>
+                {/* min-w-0 and a basis rather than a width: a flex child sized by content
+                    ignores its width and grows, which is what pushed the preview off. */}
+                <div className="flex min-h-0 min-w-0 shrink-0 flex-col" style={{ flexBasis: `${editorPct}%` }}>
+                  <SourceView
+                    uri={`unoverse://components/${selected.toLowerCase()}`}
+                    accent={theme.color["action.primary"]}
+                    layoutOrder={faces}
+                    activeState={activeLayout}
+                    onPickState={openLayout}
+                    onSaved={refreshPreview}
+                  />
+                </div>
+                {/* Drag to rebalance. The same affordance the controls dock already uses. */}
+                <div
+                  onMouseDown={onSplitDrag}
+                  className="w-1.5 shrink-0 cursor-col-resize bg-gray-700 transition-colors hover:bg-emerald-600/50"
+                  title="Drag to resize"
+                />
+              </>
+            )}
+            <div className={isFocused ? "min-h-0 flex-1 overflow-auto" : "min-w-0 flex-1 overflow-auto p-10"}>
+              <div
+                key={`${masterState}:${previewNonce}`}
+                className={`mx-auto max-w-full ${isFocused ? "h-full" : "transition-[width] duration-200"}`}
+                style={{ width: sourceOpen ? "100%" : (stageWidth ?? "100%"), ...(isFocused ? { animation: "wb-focusFadeIn 0.2s ease-out" } : {}) }}
+              >
+                {selected && <UnoverseComponent client={client} store={store} chatId={CHAT_ID} nodeId={selected} theme={theme} onAction={(a) => setLastAction(typeof a === "string" ? a : a?.type ?? null)} />}
+              </div>
             </div>
           </div>
         </section>