@unoverse-platform/studio 0.1.85 → 0.1.87

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unoverse-platform/studio",
-  "version": "0.1.85",
+  "version": "0.1.87",
   "type": "module",
   "description": "Unoverse Studio: the local authoring app. Reads your own rx/ folder, no backend.",
   "scripts": {

package/screens/ComponentsView.tsx

@@ -150,7 +150,8 @@ export function ComponentsView({ theme, org = "all" }: { theme: ResolvedTheme; o
     // the arrival face; `state.defaultState` is the legacy spelling. Seed whichever
     // the def declares, under the same key the renderer resolves.
     const st = c.state as Record<string, unknown> | undefined;
-    if (typeof st?.view === "string") store.apply({ type: "COMPONENT_DATA", chatId: CHAT_ID, nodeId: refOf(c), data: { view: st.view } });
+    const face0 = st?.state ?? st?.view;
+    if (typeof face0 === "string") store.apply({ type: "COMPONENT_DATA", chatId: CHAT_ID, nodeId: refOf(c), data: { state: face0 } });
     else if (typeof st?.defaultState === "string")
       store.apply({ type: "COMPONENT_DATA", chatId: CHAT_ID, nodeId: refOf(c), data: { defaultState: st.defaultState } });
   }
@@ -186,7 +187,7 @@ export function ComponentsView({ theme, org = "all" }: { theme: ResolvedTheme; o
   // on (faceAxisOf), so a v2 component and a legacy one both flip.
   const faceAxis = current?.root ? faceAxisOf(current.root) : "defaultState";
   const masterState =
-    ((slice?.view ?? slice?.defaultState ?? slice?.displayState) as string | undefined) ??
+    ((slice?.state ?? slice?.view ?? slice?.defaultState ?? slice?.displayState) as string | undefined) ??
     ((current as { initialView?: string } | undefined)?.initialView ?? "inline");
   // A component's FACES come from its OWN root Switch on the public axis — an OPEN
   // name set (inline/focused/course/…), never a hardcoded pair. The BASE face (a v2
@@ -197,7 +198,7 @@ export function ComponentsView({ theme, org = "all" }: { theme: ResolvedTheme; o
     const walk = (n: any): void => {
       if (!n || typeof n !== "object") return;
       if (Array.isArray(n)) { n.forEach(walk); return; }
-      if (n.type === "Switch" && (n.on === "view" || n.on === "defaultState") && n.cases && typeof n.cases === "object") {
+      if (n.type === "Switch" && (n.on === "state" || n.on === "view" || n.on === "defaultState") && n.cases && typeof n.cases === "object") {
         for (const k of Object.keys(n.cases)) if (k !== "default" && !found.includes(k)) found.push(k);
       }
       Object.values(n).forEach(walk);

package/screens/TemplatesLibraryView.tsx

@@ -1,50 +1,62 @@
 /**
- * Templates view — the Template Model's kind (docs/unoverse/UNOVERSE_TEMPLATE_MODEL.md),
- * made browsable. A template is an authored arrangement of PARTS: static markup the
- * designer fixed, and SLOTS something fills (data, the director, or the copywriter).
- * Authors write `type: template`; the app kind is `app` in code. Two tiers like
- * components: the marketplace shelf (no chip = BASE, installed, read-only) and org
- * packs (org chip).
+ * Templates view — the Template Model's kind (docs/unoverse/UNOVERSE_TEMPLATE_MODEL.md
+ * §9b, the three-word grammar), made browsable. A template is states owning
+ * arrangements; a layout's SECTIONS are `static:` (placed as designed),
+ * `copywriter:` (written into through briefs) and ONE `director:` (decided from
+ * what streams in). Authors write `type: template`; the app kind is `app` in code.
+ * Two tiers like components: the marketplace shelf (no chip = BASE, installed,
+ * read-only) and org packs (org chip).
  *
  * Header + dock MIRROR ComponentsView/AtomsView exactly (responsive width toggle,
- * collapsible drag-resize dock) — the dock holds the PARTS table (the template's
- * contract: each part and who fills it) instead of prop controls, because a template's
- * fills come from deliveries, not typed values. The preview renders the shape-true
- * synthesized root: static parts and the first shape's real arrangement, slots filled
- * with the manifest's preview mocks (real interfaces, their own defaults).
+ * collapsible drag-resize dock) — the dock holds the SECTIONS table (the template's
+ * contract: each section and who fills it) instead of prop controls, because a
+ * template's fills come from deliveries, not typed values. The preview renders the
+ * synthesized root: linked sections seed their own components, the director section
+ * seeds its preview mocks (real interfaces, their own defaults).
  *
  * NOT TemplatesView.tsx: that name is taken by the Apps screen (the legacy noun).
  */
 import { useEffect, useMemo, useState, useSyncExternalStore, useCallback, type MouseEvent as ReactMouseEvent } from "react";
 import { ComponentStore, StreamedUnoverseApp, type ResolvedTheme } from "@unoverse/sdk";
-import { client, authedFetch, usePersistentState } from "studio-host";
+import { client, authedFetch, usePersistentState, useRegistryToggles, ToggleSwitch } from "studio-host";
 import { NAV, SCREEN, navItem } from "./chrome";
 
-interface TemplatePart {
-  static?: string;
-  slot?: string;
-  accepts?: string;
-  prompt?: { component?: string };
-  /** The container reaction's own key: how many the slot holds. */
-  limit?: number;
-  /** The reaction policy; `latest` (each delivery replaces) is the unwritten default. */
-  hold?: string;
-  /** Names the state arriving interfaces render in; absent = their own declared state. */
+interface TemplateSection {
+  /** static = placed as designed; copywriter = written into through its briefs;
+   *  director = decided from what streams in (§9b, the three words). */
+  kind: "static" | "copywriter" | "director";
+  /** The state instances render in at this section — what the claim matches. */
+  face: string;
+  /** Linked sections: the authored path (components/masthead). */
+  component?: string;
+  /** Linked sections: the resolvable scoped ref (email-digest/masthead). */
+  ref?: string;
+  /** The previewed components' mock values, keyed by ref, compiled by the server (only
+   *  it can resolve a template-local part). Seeded into each instance so the arrangement
+   *  previews as written and filled rather than as a page of ghosts. */
+  seeds?: Record<string, Record<string, unknown>>;
   state?: string;
+  limit?: number;
+  rules?: string;
+  preview?: string[];
 }
 interface TemplateDef {
   name: string;
   org?: string;
+  /** Spatial-CAPABLE (server-projected, §9c): every template is, because its manifest is
+   *  mandatory. Capability, not activation — the switch below is the opt-in. */
+  spatial?: boolean;
   title?: string;
   description?: string;
   whenToUse?: string;
   category?: string;
-  parts?: TemplatePart[];
-  shapes?: Record<string, unknown>;
-  /** ONE director per template: granted duties + soft rules. Never on a slot. */
-  director?: Record<string, unknown>;
-  /** Studio preview mocks per slot (manifest) — interface refs seeded as REAL store
-   *  instances, so every reaction runs for real (faces, claims, contained steps). */
+  /** Compiled per-state sections (§9b) — the loader's projection of the layout's
+   *  three-word lines; the wire layouts carry the expanded claims. */
+  sections?: Record<string, TemplateSection[]>;
+  /** The composed arrangements, keyed by state — the pills. */
+  layouts?: Record<string, unknown>;
+  defaultLayout?: string;
+  /** Seeding map the loader assembles: face → interface refs. */
   preview?: Record<string, string[]>;
 }
 
@@ -59,22 +71,30 @@ const VIEWPORTS: { id: string; label: string; w: number | null }[] = [
 
 const refOf = (t: TemplateDef) => (t.org ? `${t.org}/${t.name}` : t.name);
 
-/** One part's filler, in the cast's standard names: designer / data / director / copywriter.
- *  The director is the TEMPLATE's (one per template); it manages the interface slots. */
-function fillerOf(p: TemplatePart, director?: Record<string, unknown>): string {
-  if (typeof p.static === "string") return "designer";
-  if (p.prompt) return `copywriter · ${p.prompt.component ?? "brief"}`;
-  if (director) {
-    const duties = Object.keys(director).filter((k) => director[k] === true);
-    return `director · ${duties.join(", ") || "arranges"}`;
-  }
-  return "data";
+/** One section's description for the dock table — the three words (§9b). */
+function sectionLabel(sec: TemplateSection): { name: string; filler: string; rules: string } {
+  if (sec.kind === "director")
+    return {
+      name: "director",
+      filler: "director",
+      rules: [
+        sec.state ? `state ${sec.state}` : null,
+        sec.limit != null ? `limit ${sec.limit}` : null,
+        sec.rules ?? null,
+      ].filter(Boolean).join(" · "),
+    };
+  return {
+    name: sec.component ?? sec.face,
+    filler: sec.kind === "copywriter" ? "copywriter" : "static",
+    rules: "",
+  };
 }
 
 export function TemplatesLibraryView({ theme, org }: { theme: ResolvedTheme; org?: string }) {
   const [templates, setTemplates] = useState<TemplateDef[]>([]);
   const [selected, setSelected] = usePersistentState<string>("wb:template", "");
   const [panelOpen, setPanelOpen] = useState(true);
+  const [metaOpen, setMetaOpen] = usePersistentState<boolean>("wb:templates:meta", false); // manifest meta panel
   const [panelHeight, setPanelHeight] = useState(200);
   const [stageWidth, setStageWidth] = useState<number | null>(768);
 
@@ -108,6 +128,10 @@ export function TemplatesLibraryView({ theme, org }: { theme: ResolvedTheme; org
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [org]);
 
+  // AVAILABLE — the same master switch every other kind has (§9c): is this template
+  // offered to workflows at all? Level 2 (is it on THIS workflow's map?) stays in
+  // Canvas's Content Library, exactly as for a component.
+  const available = useRegistryToggles("template");
   const current = templates.find((t) => refOf(t) === selected);
   const uri = useMemo(() => (current ? `unoverse://templates/${refOf(current)}` : ""), [current]);
 
@@ -116,20 +140,40 @@ export function TemplatesLibraryView({ theme, org }: { theme: ResolvedTheme; org
   // everything — a tap re-faces an instance, the name-matched layout surfaces, its
   // slot claims the instance, and sub-states stay contained in the instance's slice.
   const store = useMemo(() => new ComponentStore(), [selected]);
+
+  const seeds = useMemo(() => {
+    // THE SEED PLAN, from the BASE state's compiled sections (§9b): a linked
+    // section (static/copywriter) seeds ONE instance of its own component at its
+    // face — the template's FRAME, which the state pills never re-face. The
+    // director section seeds its preview refs at its face — the items the guest
+    // actually browses.
+    const base = current?.defaultLayout ?? (current?.layouts ? Object.keys(current.layouts)[0] : undefined);
+    const secs = (base && current?.sections?.[base]) || [];
+    const out: { nodeId: string; ref: string; face?: string; framed: boolean; seed?: Record<string, unknown> }[] = [];
+    for (const sec of secs) {
+      if (sec.kind === "director") {
+        for (const [i, ref] of (sec.preview ?? []).entries())
+          out.push({ nodeId: `${sec.face}~${ref}~${i}`, ref, face: sec.face, framed: false, seed: sec.seeds?.[ref] });
+      } else if (sec.ref) {
+        out.push({ nodeId: `${sec.face}~${sec.ref}`, ref: sec.ref, face: sec.face, framed: true, seed: sec.seeds?.[sec.ref] });
+      }
+    }
+    return out;
+  }, [current]);
+  const framedIds = useMemo(() => new Set(seeds.filter((s) => s.framed).map((s) => s.nodeId)), [seeds]);
+
   useEffect(() => {
     // Seed once per store, and only once `current` has actually loaded — the list
     // arrives async, so this must re-run when it lands, not just on store creation.
     if (!current || store.getTimeline().length) return;
-    const firstSlot = current.parts?.find((p) => typeof p.slot === "string")?.slot;
-    const refs = (firstSlot && current.preview?.[firstSlot]) || [];
-    // Seed AT the base shape's name-matched face (the manifest contract: "each
-    // template state shows the mock in the NAME-MATCHED face"). A face-less seed
-    // matches no name-synced slot select, so the grid rendered empty.
-    const baseFace = current.shapes ? Object.keys(current.shapes)[0] : undefined;
-    refs.forEach((ref, i) => {
-      store.apply({ type: "COMPONENT_INIT", chatId: PREVIEW_CHAT, nodeId: `${ref}~${i}`, component: { type: ref, props: {} } });
-      if (baseFace) store.mergeComponentState(PREVIEW_CHAT, `${ref}~${i}`, { view: baseFace });
-    });
+    for (const { nodeId, ref, face, seed } of seeds) {
+      // The part's own mock values, exactly as the Components screen seeds a component
+      // (`preview ?? default`) — compiled onto the section by the server, because only it
+      // can resolve a template-local part. Seeded with nothing, every copywriter part
+      // draws as skeletons and a finished arrangement reads as a broken one.
+      store.apply({ type: "COMPONENT_INIT", chatId: PREVIEW_CHAT, nodeId, component: { type: ref, props: seed ?? {} } });
+      if (face) store.mergeComponentState(PREVIEW_CHAT, nodeId, { state: face });
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [store, current]);
 
@@ -140,7 +184,7 @@ export function TemplatesLibraryView({ theme, org }: { theme: ResolvedTheme; org
     useCallback((cb) => store.subscribe(cb), [store]),
     useCallback(() => store.getStructureVersion(), [store]),
   );
-  const shapeNames = current?.shapes ? Object.keys(current.shapes) : [];
+  const shapeNames = current?.layouts ? Object.keys(current.layouts) : [];
   const activeState = useMemo(() => {
     void storeVersion;
     for (const name of shapeNames.slice(1)) {
@@ -149,7 +193,7 @@ export function TemplatesLibraryView({ theme, org }: { theme: ResolvedTheme; org
         .some((r) => r.components.some((p) => {
           const { chatId, nodeId } = store.split(p);
           const slice = store.get(chatId, nodeId) as Record<string, unknown> | undefined;
-          return (slice?.view ?? slice?.defaultState) === name;
+          return (slice?.state ?? slice?.view ?? slice?.defaultState) === name;
         }));
       if (hit) return name;
     }
@@ -197,6 +241,31 @@ export function TemplatesLibraryView({ theme, org }: { theme: ResolvedTheme; org
             {/* THE TEMPLATE'S STATES, across the top — the same pill row the Apps
                 screen gives a multi-layout template (states own shapes; the pill puts
                 the preview into that state). One state is not a choice: no row. */}
+            {current?.spatial && (
+              <ToggleSwitch
+                on={available.isEnabled(refOf(current))}
+                onClick={() => available.toggle(refOf(current))}
+                label="Available"
+              />
+            )}
+            {/* META — the same disclosure Components and Apps carry, on the same
+                mandatory manifest (§9c: a template is discovered like everything
+                else, so what it is DISCOVERED BY must be readable where it is
+                designed). Disclosure only; it changes nothing. */}
+            {current?.spatial && (
+              <button
+                onClick={() => setMetaOpen((o) => !o)}
+                className="flex items-center gap-1 rounded border px-2 py-0.5 text-[11px] font-medium"
+                style={{
+                  borderColor: theme.color["border.subtle"],
+                  color: metaOpen ? theme.color["text.primary"] : theme.color["text.secondary"],
+                  background: metaOpen ? theme.color["surface.sunken"] : "transparent",
+                }}
+                title="Show the template's manifest (spatial discovery meta)"
+              >
+                ⓘ Meta <span className="opacity-60">{metaOpen ? "▴" : "▾"}</span>
+              </button>
+            )}
             {shapeNames.length > 1 && (
               <div className="flex items-center gap-1 rounded p-0.5 text-[11px]" style={{ background: theme.color["border.subtle"] }}>
                 {shapeNames.map((name, i) => {
@@ -208,16 +277,29 @@ export function TemplatesLibraryView({ theme, org }: { theme: ResolvedTheme; org
                         // The pill is the guest's hand: it writes FACES, and the
                         // state derives — never the other way round. Base pill
                         // returns every instance to the base face.
-                        for (const r of store.getResponses())
-                          for (const ptr of r.components) {
-                            const { chatId, nodeId } = store.split(ptr);
-                            const slice = store.get(chatId, nodeId) as Record<string, unknown> | undefined;
-                            if (i === 0) {
-                              if ((slice?.view ?? slice?.defaultState) != null) store.mergeComponentState(chatId, nodeId, { view: shapeNames[0] });
-                            } else if (r.components.indexOf(ptr) === 0) {
-                              store.mergeComponentState(chatId, nodeId, { view: name });
-                            }
+                        //
+                        // THE FRAME IS NOT AN ITEM. Every seeded instance used to be
+                        // treated as one, which held while a template had a single
+                        // slot: on email-digest the base pill re-faced the masthead
+                        // and footer to `grid` (they left their slots and landed in
+                        // the item band), and the `page` pill wrote the face onto the
+                        // first component in the response — the masthead — so the
+                        // detail shape surfaced with nothing in it. Slots with an
+                        // authored `state:` are skipped, and the detail pill opens
+                        // the first ITEM.
+                        const items = store
+                          .getResponses()
+                          .flatMap((r) => r.components)
+                          .filter((ptr) => !framedIds.has(store.split(ptr).nodeId));
+                        for (const [j, ptr] of items.entries()) {
+                          const { chatId, nodeId } = store.split(ptr);
+                          const slice = store.get(chatId, nodeId) as Record<string, unknown> | undefined;
+                          if (i === 0) {
+                            if ((slice?.state ?? slice?.view ?? slice?.defaultState) != null) store.mergeComponentState(chatId, nodeId, { state: shapeNames[0] });
+                          } else if (j === 0) {
+                            store.mergeComponentState(chatId, nodeId, { state: name });
                           }
+                        }
                       }}
                       className="rounded px-2 py-0.5 font-medium capitalize transition"
                       style={on ? { background: theme.color["surface.base"], color: theme.color["text.primary"] } : { color: theme.color["text.secondary"] }}
@@ -249,6 +331,42 @@ export function TemplatesLibraryView({ theme, org }: { theme: ResolvedTheme; org
             </span>
           </div>
 
+          {/* MANIFEST META — identical anatomy to the Components and Apps panels:
+              title / category chip / muted tag, description, when-to-use callout. */}
+          {metaOpen && current?.spatial && (() => {
+            const accent = theme.color["action.primary"] ?? "#6366f1";
+            return (
+              <div className="border-b px-5 py-4" style={{ borderColor: theme.color["border.subtle"], background: theme.color["surface.base"] }}>
+                <div className="mx-auto flex max-w-5xl flex-col gap-1">
+                  <div className="flex flex-wrap items-center gap-2">
+                    <h2 className="text-[17px] font-semibold leading-tight tracking-tight" style={{ color: theme.color["text.primary"] }}>
+                      {current.title || current.name}
+                    </h2>
+                    {current.category && (
+                      <span className="rounded-full px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide" style={{ background: `${accent}14`, color: accent }}>
+                        {current.category}
+                      </span>
+                    )}
+                    <span className="font-mono text-[10px]" style={{ color: theme.color["text.tertiary"] }}>
+                      manifest.json
+                    </span>
+                  </div>
+                  {current.description && (
+                    <p className="mt-1 max-w-3xl text-[13px] leading-relaxed" style={{ color: theme.color["text.secondary"] }}>{current.description}</p>
+                  )}
+                  {current.whenToUse && (
+                    <div className="mt-2 max-w-3xl rounded-r py-1.5 pl-3" style={{ borderLeft: `3px solid ${accent}`, background: theme.color["surface.sunken"] }}>
+                      <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" style={{ color: theme.color["text.primary"] }}>{current.whenToUse}</p>
+                    </div>
+                  )}
+                </div>
+              </div>
+            );
+          })()}
+
           <div className="flex-1 overflow-auto p-10">
             <div className="mx-auto max-w-full transition-[width] duration-200" style={{ width: stageWidth ?? "100%" }}>
               {uri && <StreamedUnoverseApp key={uri} client={client} store={store} uri={uri} theme={theme} />}
@@ -267,46 +385,43 @@ export function TemplatesLibraryView({ theme, org }: { theme: ResolvedTheme; org
         <div className="flex min-h-0 shrink-0 flex-col bg-[#232a34] text-gray-200" style={panelOpen ? { height: panelHeight } : undefined}>
           <div
             onClick={() => setPanelOpen((o) => !o)}
-            title={panelOpen ? "Collapse parts" : "Expand parts"}
+            title={panelOpen ? "Collapse sections" : "Expand sections"}
             className="flex cursor-pointer select-none items-center gap-2 border-y border-gray-700 px-3 py-2 text-[11px] uppercase tracking-wider text-gray-400 hover:bg-white/5"
           >
             <span className="leading-none text-gray-300">{panelOpen ? "▾" : "▸"}</span>
-            <span>parts</span>
+            <span>sections</span>
             {current && <span className="text-gray-400">· {current.name}</span>}
           </div>
           {panelOpen && (
             <div className="min-h-0 flex-1 overflow-auto p-3">
-              {current?.parts?.length ? (
+              {(() => {
+                const base = current?.defaultLayout ?? (current?.layouts ? Object.keys(current.layouts)[0] : undefined);
+                const secs = (base && current?.sections?.[base]) || [];
+                return secs.length ? (
                 <table className="w-full text-left text-xs">
                   <thead className="text-gray-500">
                     <tr>
-                      <th className="pb-1 pr-4 font-medium">part</th>
+                      <th className="pb-1 pr-4 font-medium">section</th>
                       <th className="pb-1 pr-4 font-medium">filled by</th>
                       <th className="pb-1 font-medium">rules</th>
                     </tr>
                   </thead>
                   <tbody className="text-gray-300">
-                    {current.parts.map((p, i) => (
-                      <tr key={i} className="border-t border-gray-700/60">
-                        <td className="py-1 pr-4 font-mono">{p.static ?? p.slot ?? "?"}</td>
-                        <td className="py-1 pr-4">{fillerOf(p, current?.director)}</td>
-                        <td className="py-1 text-gray-500">
-                          {typeof p.static === "string" || p.prompt
-                            ? ""
-                            : [
-                                p.limit != null ? `limit ${p.limit}` : null,
-                                `hold ${p.hold ?? "latest"}`,
-                                p.state ? `state ${p.state}` : null,
-                              ]
-                                .filter(Boolean)
-                                .join(" · ")}
-                        </td>
-                      </tr>
-                    ))}
+                    {secs.map((sec, i) => {
+                      const l = sectionLabel(sec);
+                      return (
+                        <tr key={i} className="border-t border-gray-700/60">
+                          <td className="py-1 pr-4 font-mono">{l.name}</td>
+                          <td className="py-1 pr-4">{l.filler}</td>
+                          <td className="py-1 text-gray-500">{l.rules}</td>
+                        </tr>
+                      );
+                    })}
                   </tbody>
                 </table>
-              ) : (
-                <div className="text-xs text-gray-500">This template declares no parts.</div>
+                ) : null;
+              })() || (
+                <div className="text-xs text-gray-500">This template declares no sections.</div>
               )}
             </div>
           )}

package/screens/TemplatesView.tsx

@@ -77,6 +77,9 @@ interface PropDef {
 }
 interface Def {
   name: string;
+  /** The artifact's kind. Templates sit beside components in the seed lookup (§9c), and
+   *  the kind decides which home their definition is addressed at. */
+  kind?: string;
   // The client org this app belongs to (server-injected) — names its theme (`<org>/light`).
   org?: string;
   description?: string;
@@ -172,7 +175,7 @@ export function TemplatesView({
   // MOCK (offline) vs LIVE (real data plane). A fresh store per mode keeps the two paths
   // from bleeding into each other.
   const [live, setLive] = useState(defaultLive);
-  const available = useRegistryToggles("template");
+  const available = useRegistryToggles("app");
   const [templates, setTemplates] = useState<Def[]>([]);
   const [components, setComponents] = useState<Def[]>([]);
   const [selected, setSelected] = usePersistentState<string | null>("wb:apps:selected", null);
@@ -578,6 +581,21 @@ export function TemplatesView({
     return d.initialView ?? d.publicStates?.[0] ?? d.state?.view?.initial ?? Object.keys(d.state?.view?.states ?? {})[0];
   };
 
+  /** The instances a seeded TEMPLATE stands for: each linked part at its own face with
+   *  its own mock values, and the director's stand-ins at the band's face. Empty for a
+   *  component, which stands for itself. */
+  const templateSeeds = (c: Def): { ref: string; face: string; props: Record<string, unknown> }[] => {
+    const d = c as { kind?: string; defaultLayout?: string; layouts?: Record<string, unknown>; sections?: Record<string, { kind: string; face: string; ref?: string; preview?: string[]; seeds?: Record<string, Record<string, unknown>> }[]> };
+    if (d.kind !== "template") return [];
+    const base = d.defaultLayout ?? Object.keys(d.layouts ?? {})[0];
+    const out: { ref: string; face: string; props: Record<string, unknown> }[] = [];
+    for (const sec of (base && d.sections?.[base]) || []) {
+      const refs = sec.kind === "director" ? (sec.preview ?? []) : sec.ref ? [sec.ref] : [];
+      for (const ref of refs) out.push({ ref, face: sec.face, props: sec.seeds?.[ref] ?? {} });
+    }
+    return out;
+  };
+
   function seed(comps: SeedSpec[]) {
     // nodeId is per-INSTANCE (`name-i`), so previewComponents may repeat a name to
     // seed several instances — e.g. ["course-card", "course-card"] previews a rail of cards.
@@ -593,7 +611,21 @@ export function TemplatesView({
       // instance ARRIVES with its own view, both spellings, exactly as a real moment
       // would deliver it — and the chip never overrides it (the activation loop skips
       // envelope instances).
-      const { view: _v, defaultState: _d, ...restState } = ((c as { state?: Record<string, unknown> }).state ?? {}) as Record<string, unknown>;
+      const { state: _s, view: _v, defaultState: _d, ...restState } = ((c as { state?: Record<string, unknown> }).state ?? {}) as Record<string, unknown>;
+      // A template arrives WITH its page: the parts it links and the stand-ins its band
+      // holds, each at its own face, exactly as a delivery would land them.
+      for (const [j, part] of templateSeeds(c).entries()) {
+        store.apply({
+          type: "COMPONENT_INIT",
+          chatId: chatIdFor(selected ?? "app"),
+          nodeId: `${c.name}-${i}-${part.face}-${j}`,
+          component: {
+            type: part.ref,
+            componentUrl: `unoverse://components/${part.ref}`,
+            props: { ...part.props, state: part.face, view: part.face, defaultState: part.face },
+          },
+        });
+      }
       store.apply({
         type: "COMPONENT_INIT",
         chatId: chatIdFor(selected ?? "app"),
@@ -604,7 +636,9 @@ export function TemplatesView({
           // cannot rebuild it (names are unique only within a tier — store.ts), so a
           // mock seed without it resolved bare `unoverse://components/<name>` and the
           // resolver rightly refused to guess between two orgs' clones.
-          componentUrl: `unoverse://components/${c.org ? `${c.org}/` : ""}${c.name}`,
+          // THE ADDRESS SAYS WHAT IT IS (§9c): a seeded TEMPLATE is served, read and
+          // rendered from the templates home, so a preview naming one resolves.
+          componentUrl: `unoverse://${c.kind === "template" ? "templates" : "components"}/${c.org ? `${c.org}/` : ""}${c.name}`,
           // ORDER MATTERS: prop DEFAULTS come after the flattened state scalars,
           // because a projected axis (loadState) appears in BOTH — as the tree's first
           // substate in state (its live arrival) and as a prop default (its preview) —
@@ -657,10 +691,17 @@ export function TemplatesView({
       // Mock seeding picked whichever listed first.
       authedFetch(`/dev/apps${org !== "all" ? `?org=${encodeURIComponent(org)}` : ""}`).then((r) => (r.ok ? r.json() : { apps: [] })),
       authedFetch(`/dev/components${org !== "all" ? `?org=${encodeURIComponent(org)}` : ""}`).then((r) => (r.ok ? r.json() : { components: [] })),
+      // TEMPLATES SEED LIKE COMPONENTS (§9c). A state whose surface holds a page that
+      // STREAMS IN names that page in its preview, so the seed lookup has to be able to
+      // find it — otherwise the state's chip seeds nothing and the tab looks broken.
+      authedFetch(`/dev/templates${org !== "all" ? `?org=${encodeURIComponent(org)}` : ""}`).then((r) => (r.ok ? r.json() : { templates: [] })),
     ])
-      .then(([t, c]) => {
+      .then(([t, c, tpl]) => {
         const tl: Def[] = t.apps ?? [];
-        const cl: Def[] = c.components ?? [];
+        const cl: Def[] = [
+          ...((c.components ?? []) as Def[]),
+          ...((tpl.templates ?? []) as Def[]).map((d) => ({ ...d, kind: "template" as const })),
+        ];
         setTemplates(tl);
         setComponents(cl);
         if (live) setSeeded([]);
@@ -737,7 +778,7 @@ export function TemplatesView({
             return Object.entries(c.states).flatMap(([stName, st]): (string | Record<string, Record<string, unknown>>)[] => {
               if (typeof st.interface !== "string" || !st.interface) return [];
               const face = st.state ?? (publicStatesOf(st.interface).includes(stName) ? stName : undefined);
-              return [face ? { [st.interface]: { view: face } } : st.interface];
+              return [face ? { [st.interface]: { state: face } } : st.interface];
             });
           return typeof c.interface === "string" && c.interface ? [c.interface] : [];
         })
@@ -836,8 +877,8 @@ export function TemplatesView({
       // An ENVELOPE instance is NEVER moved: it declared its own view, and forcing it
       // would recreate the one-view-for-all mock the envelope form exists to retire
       // (UNOVERSE_INTERFACE_MODEL §3, §7).
-      const axis = whereSel.field === "view" || whereSel.field === "defaultState";
-      const data = axis ? { view: whereSel.eq ?? true, defaultState: whereSel.eq ?? true } : { [whereSel.field!]: whereSel.eq ?? true };
+      const axis = whereSel.field === "state" || whereSel.field === "view" || whereSel.field === "defaultState";
+      const data = axis ? { state: whereSel.eq ?? true, view: whereSel.eq ?? true, defaultState: whereSel.eq ?? true } : { [whereSel.field!]: whereSel.eq ?? true };
       seededSet.forEach((c, i) => {
         if (c.view || (c as { envelope?: boolean }).envelope) return;
         store.mergeComponentState(chatIdFor(selected ?? "app"), `${c.def.name}-${i}`, data);

package/screens/states.ts

@@ -21,15 +21,31 @@ function walkTree(n: unknown, visit: (node: Record<string, unknown>) => boolean
   return Object.values(o).some((v) => walkTree(v, visit));
 }
 
-/** The PUBLIC axis (STATE_MODEL v2): `view`, with `defaultState` as the legacy alias. */
-export const VIEW_AXES = ["view", "defaultState"] as const;
-const isViewAxis = (on: unknown): boolean => on === "view" || on === "defaultState";
+/**
+ * The PUBLIC axis: `state` (the ruled word, 2026-08-29), with `view` and `defaultState`
+ * as the older spellings a component may still switch on.
+ *
+ * `state` WAS MISSING HERE, and it broke every face control in Studio. A v2 component
+ * compiles its state tree into a root `Switch` on `state` (`{ on: "state", cases:
+ * ["grid", "page", …] }`), so with only the two legacy words admitted:
+ *   - `faceAxisOf` fell through to its `defaultState` default, so clicking a face wrote
+ *     `{ defaultState: "page" }` while the root watched `state`, and nothing moved. The
+ *     buttons still RENDERED, because the names come from the served `stateTree` rather
+ *     than from this file, which is what made it look like dead buttons rather than a
+ *     missing axis;
+ *   - `faceOf` could not find a face's subtree;
+ *   - `switchLayers` counted the public axis as a STEP, because it identifies steps by
+ *     everything this predicate rejects.
+ * One list, three symptoms.
+ */
+export const VIEW_AXES = ["state", "view", "defaultState"] as const;
+const isViewAxis = (on: unknown): boolean => on === "state" || on === "view" || on === "defaultState";
 
 /** The state an instance is showing, read off its slice on the public axis. Reading
  *  only the legacy alias leaves every migrated component looking state-less. */
 export const viewOfSlice = (slice: unknown): unknown => {
   const s = (slice ?? {}) as Record<string, unknown>;
-  return s.view ?? s.defaultState;
+  return s.state ?? s.view ?? s.defaultState;
 };
 
 /** The subtree a face draws: the root's Switch-on-the-public-axis case of that name. */
@@ -45,11 +61,13 @@ export function faceOf(root: unknown, face: string): unknown {
 }
 
 /** Which public-axis spelling the root actually switches on (writes must match it). */
-export function faceAxisOf(root: unknown): "view" | "defaultState" {
-  let axis: "view" | "defaultState" = "defaultState";
+export function faceAxisOf(root: unknown): "state" | "view" | "defaultState" {
+  // The default stays `defaultState`: a tree with no public-axis Switch at all is a
+  // legacy component, and writing the modern word to it would flip nothing.
+  let axis: "state" | "view" | "defaultState" = "defaultState";
   walkTree(root, (o) => {
     if (o.type === "Switch" && isViewAxis(o.on) && o.cases && typeof o.cases === "object") {
-      axis = o.on as "view" | "defaultState";
+      axis = o.on as "state" | "view" | "defaultState";
       return true;
     }
   });

package/src/host.ts

@@ -187,7 +187,7 @@ export function usePersistentState<T>(key: string, initial: T): [T, React.Dispat
   return [value, setValue];
 }
 
-export type RegistryKind = "node" | "skill" | "template" | "prompt" | "component";
+export type RegistryKind = "node" | "skill" | "app" | "prompt" | "component" | "template";
 
 /**
  * Registry toggles decide what a RUNNING universe exposes; they persist to