@unoverse-platform/studio 0.1.81 → 0.1.83

package/local/mcp.ts

@@ -138,7 +138,7 @@ export function buildTools(deps: McpDeps, appRoot: string): Record<string, Tool>
       description: "The project's components or templates.",
       inputSchema: {
         type: "object",
-        properties: { kind: { type: "string", enum: ["component", "template", "atom"] } },
+        properties: { kind: { type: "string", enum: ["component", "app", "atom", "template"] } },
         required: ["kind"],
       },
       run: async ({ kind }) => {
@@ -156,8 +156,8 @@ export function buildTools(deps: McpDeps, appRoot: string): Record<string, Tool>
         needsBinding();
         const c = await deps.catalog();
         // `.../definition` is a suffix on the app's URI, not part of its ref.
-        const ref = String(uri).replace(/^unoverse:\/\/(components|atoms|apps)\//, "").replace(/\/definition$/, "");
-        const kind = /\/apps\//.test(String(uri)) ? "template" : /\/atoms\//.test(String(uri)) ? "atom" : "component";
+        const ref = String(uri).replace(/^unoverse:\/\/(components|atoms|apps|templates)\//, "").replace(/\/definition$/, "");
+        const kind = /\/apps\//.test(String(uri)) ? "app" : /\/atoms\//.test(String(uri)) ? "atom" : /^unoverse:\/\/templates\//.test(String(uri)) ? "template" : "component";
         return { definition: c.loadDefinition(ref, kind), files: deps.sourceFiles(String(uri)) };
       },
     },

package/local/plugin.ts

@@ -42,7 +42,7 @@ function definitionHome(
 ): string | null {
   // An app definition is addressed as `unoverse://apps/<org>/<name>/definition`, so the
   // suffix has to come off before the rest is read as `<org>/<name>`.
-  const ref = uri.replace(/^unoverse:\/\/(components|atoms|apps)\//, "").replace(/\/definition$/, "");
+  const ref = uri.replace(/^unoverse:\/\/(components|atoms|apps|templates)\//, "").replace(/\/definition$/, "");
   if (/\/apps\//.test(uri)) {
     const i = ref.indexOf("/");
     const [org, name] = i === -1 ? [null, ref] : [ref.slice(0, i), ref.slice(i + 1)];
@@ -57,6 +57,16 @@ function definitionHome(
     const flat = resolve(designHome(projectRoot), "atoms", `${ref.toLowerCase()}.json`);
     return existsSync(flat) ? flat : null;
   }
+  // Templates (unoverse://templates/): two tiers, folder form, like components.
+  if (/^unoverse:\/\/templates\//.test(uri)) {
+    const i = ref.indexOf("/");
+    const [org, name] = i === -1 ? [null, ref] : [ref.slice(0, i), ref.slice(i + 1)];
+    const homes = org
+      ? [resolve(c.projectDir(org), "templates", name.toLowerCase())]
+      : [resolve(designHome(projectRoot), "marketplace/templates", ref.toLowerCase())];
+    for (const dir of homes) if (existsSync(dir)) return dir;
+    return null;
+  }
   const folder = c.componentFolder(ref);
   if (folder) return folder;
   // A flat, folderless component: `rx/components/<name>.json` in either tier.
@@ -354,6 +364,11 @@ export function localStudioHost(): Plugin {
             case path === "/dev/atoms":
               return json(res, { atoms: c.listDefinitions("atom") });
 
+            // The Template Model kind (authored `type: template`; label: Templates).
+            // Two tiers like components, so the org param scopes exactly the same way.
+            case path === "/dev/templates":
+              return json(res, { templates: c.listDefinitions("template", org) });
+
             // The SDK renderer's two reads, served locally instead of over MCP.
             case path === "/local/theme": {
               const t = c.resolveTheme(url.searchParams.get("ref") ?? "light");
@@ -363,13 +378,14 @@ export function localStudioHost(): Plugin {
               const uri = url.searchParams.get("uri") ?? "";
               // Apps are addressed both ways (unoverse://apps/<org>/<id> and
               // unoverse://apps/<org>/<id>/definition); both load the app kind.
-              const kind = /\/apps\//.test(uri) ? "template" : /\/atoms\//.test(uri) ? "atom" : "component";
+              // unoverse://templates/ is the Template Model kind.
+              const kind = /\/apps\//.test(uri) ? "app" : /\/atoms\//.test(uri) ? "atom" : /^unoverse:\/\/templates\//.test(uri) ? "template" : "component";
               // A trailing `@form` is a request for a VARIANT of the definition, not part of
               // its name. This door did not know that convention and looked up the whole
               // string, so every component read as `<name>@refs` answered "definition not
               // found". Strip any variant: this route serves the one form it has, which is
               // also the only form the server serves.
-              const ref = uri.replace(/^unoverse:\/\/(components|atoms|apps)\//, "").replace(/\/definition$/, "").replace(/@[a-z]+$/, "");
+              const ref = uri.replace(/^unoverse:\/\/(components|atoms|apps|templates)\//, "").replace(/\/definition$/, "").replace(/@[a-z]+$/, "");
               const d = c.loadDefinition(ref, kind);
               return d ? json(res, d) : json(res, { error: `definition not found: ${uri}` }, 404);
             }

package/package.json

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

package/screens/TemplatesLibraryView.tsx

@@ -0,0 +1,317 @@
+/**
+ * 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).
+ *
+ * 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).
+ *
+ * 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 { 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. */
+  state?: string;
+}
+interface TemplateDef {
+  name: string;
+  org?: string;
+  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). */
+  preview?: Record<string, string[]>;
+}
+
+const PREVIEW_CHAT = "preview";
+
+const VIEWPORTS: { id: string; label: string; w: number | null }[] = [
+  { id: "mobile", label: "Mobile", w: 390 },
+  { id: "tablet", label: "Tablet", w: 768 },
+  { id: "desktop", label: "Desktop", w: 1280 },
+  { id: "full", label: "Full", w: 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";
+}
+
+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 [panelHeight, setPanelHeight] = useState(200);
+  const [stageWidth, setStageWidth] = useState<number | null>(768);
+
+  // Drag the divider to resize the parts dock (up = taller). Same as ComponentsView.
+  const onDragStart = (e: ReactMouseEvent) => {
+    e.preventDefault();
+    const startY = e.clientY;
+    const startH = panelHeight;
+    const onMove = (ev: globalThis.MouseEvent) =>
+      setPanelHeight(Math.max(120, Math.min(window.innerHeight - 200, startH + (startY - ev.clientY))));
+    const onUp = () => {
+      window.removeEventListener("mousemove", onMove);
+      window.removeEventListener("mouseup", onUp);
+    };
+    window.addEventListener("mousemove", onMove);
+    window.addEventListener("mouseup", onUp);
+  };
+
+  useEffect(() => {
+    const q = org && org !== "all" ? `?org=${encodeURIComponent(org)}` : "";
+    authedFetch(`/dev/templates${q}`)
+      .then((r) => (r.ok ? r.json() : Promise.reject(new Error(`HTTP ${r.status}`))))
+      .then((d) => {
+        const list: TemplateDef[] = (d.templates ?? []).sort((a: TemplateDef, b: TemplateDef) =>
+          refOf(a).localeCompare(refOf(b)),
+        );
+        setTemplates(list);
+        if (!list.find((t) => refOf(t) === selected) && list[0]) setSelected(refOf(list[0]));
+      })
+      .catch(() => setTemplates([]));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [org]);
+
+  const current = templates.find((t) => refOf(t) === selected);
+  const uri = useMemo(() => (current ? `unoverse://templates/${refOf(current)}` : ""), [current]);
+
+  // REAL INSTANCES, fresh per selection (the Components screen's own pattern): the
+  // manifest's preview refs seed the store, and from there the standard runtime owns
+  // 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]);
+  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 });
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [store, current]);
+
+  // The ACTIVE STATE is DERIVED, never stored (the rules): the first declared shape
+  // whose name an instance's face matches, else the base. Structure writes bump on
+  // every guest tap, so the pills track the runtime exactly.
+  const storeVersion = useSyncExternalStore(
+    useCallback((cb) => store.subscribe(cb), [store]),
+    useCallback(() => store.getStructureVersion(), [store]),
+  );
+  const shapeNames = current?.shapes ? Object.keys(current.shapes) : [];
+  const activeState = useMemo(() => {
+    void storeVersion;
+    for (const name of shapeNames.slice(1)) {
+      const hit = store
+        .getResponses()
+        .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;
+        }));
+      if (hit) return name;
+    }
+    return shapeNames[0] ?? "";
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [storeVersion, store, current]);
+
+  return (
+    <div className={SCREEN}>
+      {/* NAVIGATOR — per-item org chip, like Components: no chip = BASE shelf. */}
+      <nav className={NAV}>
+        {templates.length === 0 && (
+          <div className="p-2 text-xs text-gray-400">
+            No templates — restart the Unoverse server so /dev/templates is available.
+          </div>
+        )}
+        {templates.map((t) => (
+          <div key={refOf(t)}>
+            <button
+              onClick={() => setSelected(refOf(t))}
+              className={`flex w-full items-center gap-2 rounded px-2 py-1 text-left text-sm transition ${navItem(selected === refOf(t))}`}
+            >
+              <span className="truncate">{t.title ?? t.name}</span>
+              {t.org && (
+                <span className="ml-auto shrink-0 rounded bg-emerald-900/50 px-1.5 py-0.5 text-[10px] text-emerald-300">
+                  {t.org}
+                </span>
+              )}
+            </button>
+          </div>
+        ))}
+      </nav>
+
+      {/* STAGE + PARTS DOCK — the ComponentsView/AtomsView anatomy. */}
+      <div className="flex min-h-0 flex-col overflow-hidden">
+        <section className="flex min-h-0 flex-1 flex-col overflow-hidden" style={{ background: theme.color["surface.sunken"] }}>
+          {/* HEADER — matches ComponentsView (name + responsive toggle). */}
+          <div
+            className="flex shrink-0 items-center gap-3 border-b px-4 py-2.5"
+            style={{ borderColor: theme.color["border.subtle"], background: theme.color["surface.base"] }}
+          >
+            <span className="text-sm font-semibold uppercase tracking-wide" style={{ color: theme.color["text.primary"] }}>
+              {current?.title ?? current?.name ?? ""}
+            </span>
+            {/* 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. */}
+            {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) => {
+                  const on = activeState === name;
+                  return (
+                    <button
+                      key={name}
+                      onClick={() => {
+                        // 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 });
+                            }
+                          }
+                      }}
+                      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"] }}
+                    >
+                      {name}
+                    </button>
+                  );
+                })}
+              </div>
+            )}
+            <div className="ml-auto flex items-center gap-1 rounded p-0.5 text-[11px]" style={{ background: theme.color["border.subtle"] }}>
+              {VIEWPORTS.map((v) => (
+                <button
+                  key={v.id}
+                  onClick={() => setStageWidth(v.w)}
+                  className="rounded px-2 py-0.5 font-medium transition"
+                  style={
+                    stageWidth === v.w
+                      ? { background: theme.color["surface.base"], color: theme.color["text.primary"] }
+                      : { color: theme.color["text.secondary"] }
+                  }
+                >
+                  {v.label}
+                </button>
+              ))}
+            </div>
+            <span className="tabular-nums text-[11px]" style={{ color: theme.color["text.tertiary"] }}>
+              {stageWidth ? `${stageWidth}px` : "100%"}
+            </span>
+          </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} />}
+            </div>
+          </div>
+        </section>
+
+        {/* PARTS — collapsible + drag-to-resize dock, same as ComponentsView/AtomsView. */}
+        {panelOpen && (
+          <div
+            onMouseDown={onDragStart}
+            className="h-1.5 shrink-0 cursor-row-resize bg-gray-700 transition-colors hover:bg-emerald-600/50"
+            title="Drag to resize"
+          />
+        )}
+        <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"}
+            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>
+            {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 ? (
+                <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">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>
+                    ))}
+                  </tbody>
+                </table>
+              ) : (
+                <div className="text-xs text-gray-500">This template declares no parts.</div>
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/screens/TemplatesView.tsx

@@ -621,7 +621,7 @@ export function TemplatesView({
     setSeeded(comps.map((c) => c.def.name));
     // The tab strips: one per seeded interface, filed under the container whose claim
     // matches the state it was seeded into (no claim match → filed under its own name).
-    const cts = (selectedDef?.app as { containers?: Record<string, { claim?: { state?: string } }> } | undefined)?.containers;
+    const cts = (selectedDef?.app as { templates?: Record<string, { claim?: { state?: string } }> } | undefined)?.templates;
     setSeededSpecs(
       comps.map(({ def: c, view: declaredView, envelope }, i) => {
         const view = declaredView ?? (envelope ? initialOf(c) : undefined);
@@ -723,7 +723,7 @@ export function TemplatesView({
     // A container names THE INTERFACE IT HOLDS (UNOVERSE_INTERFACE_MODEL §2, the PLACE
     // verb); the interface's own defaults ARE its mock, seeded into the container's
     // first state. Nothing else to author.
-    const containers = (selectedDef?.app as { containers?: Record<string, { states?: Record<string, { interface?: string; state?: string }>; interface?: string }> } | undefined)?.containers;
+    const containers = (selectedDef?.app as { templates?: Record<string, { states?: Record<string, { interface?: string; state?: string }>; interface?: string }> } | undefined)?.templates;
     const publicStatesOf = (name: string): string[] => {
       const hit = components.find((x) => x.name.toLowerCase() === name.toLowerCase());
       return ((hit as { publicStates?: string[] } | undefined)?.publicStates ?? []).filter(Boolean);
@@ -743,7 +743,17 @@ export function TemplatesView({
         })
       : undefined;
     const flatPreview = containerEntries?.length ? containerEntries : Array.isArray(rawPreview) ? rawPreview : undefined;
-    const layoutEntry = flatPreview ?? (activeLayout ? previewMap?.[activeLayout] : (stateEntry ?? previewMap?.[baseLayout]));
+    // A MOUNT STATE (the state holds a template — UNOVERSE_TEMPLATE_MODEL §12): its
+    // pill seeds the STATE'S OWN preview as envelope arrivals. Each card wakes in its
+    // arrival face (the mounted template's claim), so the reaction enters the state
+    // exactly as a live delivery would — nothing is forced.
+    const mounts = (selectedDef as { templates?: Record<string, { template?: string; preview?: string[] }> } | null)?.templates;
+    const mountName = activeLayout ?? activeState?.name;
+    const stateOwn = mountName ? mounts?.[mountName] : undefined;
+    const mountEntry = stateOwn && (stateOwn.template || stateOwn.preview?.length)
+      ? (stateOwn.preview ?? []).map((n): Record<string, Record<string, unknown>> => ({ [n]: {} }))
+      : undefined;
+    const layoutEntry = flatPreview ?? mountEntry ?? (activeLayout ? previewMap?.[activeLayout] : (stateEntry ?? previewMap?.[baseLayout]));
     const entry = Array.isArray(layoutEntry) ? layoutEntry : undefined;
     const wantEmpty = !entry && !activeLayout && typeof when === "string" && when === "isEmpty";
     // A COMPONENT is only seeded for a reaction-contract state (select.where) — the
@@ -829,7 +839,7 @@ export function TemplatesView({
       const axis = whereSel.field === "view" || whereSel.field === "defaultState";
       const data = axis ? { view: whereSel.eq ?? true, defaultState: whereSel.eq ?? true } : { [whereSel.field!]: whereSel.eq ?? true };
       seededSet.forEach((c, i) => {
-        if (c.view) return;
+        if (c.view || (c as { envelope?: boolean }).envelope) return;
         store.mergeComponentState(chatIdFor(selected ?? "app"), `${c.def.name}-${i}`, data);
       });
     }
@@ -926,6 +936,10 @@ export function TemplatesView({
                   <button
                     key={n}
                     onClick={() => {
+                      // FRESH STORE PER PICK (same law as the state chips' seedKey):
+                      // seeds from the previous pill would otherwise keep their claim
+                      // and the ladder never steps back down to the base.
+                      setSeedKey((k) => k + 1);
                       setActiveLayout(isDefault ? null : n);
                       // STATE MODEL v2: the base's substates (welcome/conversation) exist
                       // only inside the base arrangement — entering a reaction state
@@ -1258,7 +1272,7 @@ export function TemplatesView({
                 // THE CONTAINER'S OWN TABS (UNOVERSE_INTERFACE_MODEL §3): dev chrome drawn
                 // ON the container, never in the app header (that row was the legacy
                 // app-state pills). Inline styles — this renders inside the shadow root.
-                containerChrome={
+                templateChrome={
                   !live
                     ? ({ states, active, set }) => (
                           <div style={{ display: "flex", gap: 4, padding: "6px 8px", minHeight: 34, alignItems: "center", borderBottom: `1px solid ${theme.color["border.subtle"] ?? "#eee"}`, background: theme.color["surface.base"] ?? "#fff", flex: "0 0 auto" }}>

package/screens/index.ts

@@ -19,6 +19,9 @@ export * from "./chrome";
 export { ComponentsView } from "./ComponentsView";
 export { AtomsView } from "./AtomsView";
 export { TemplatesView } from "./TemplatesView";
+// The Template Model's kind (kind: template), display label "Templates". Distinct
+// screen from TemplatesView, which is the APPS screen under the legacy noun.
+export { TemplatesLibraryView } from "./TemplatesLibraryView";
 export { DesignSystemView } from "./DesignSystemView";
 export { SkillsView } from "./SkillsView";
 export { PromptBlocksView } from "./PromptBlocksView";

package/src/App.tsx

@@ -13,6 +13,7 @@ import {
   ComponentsView,
   AtomsView,
   TemplatesView,
+  TemplatesLibraryView,
   DesignSystemView,
   SkillsView,
   PromptBlocksView,
@@ -27,6 +28,7 @@ import {
   Atom,
   Boxes,
   LayoutDashboard,
+  LayoutTemplate,
   Palette,
   Sparkles,
   SquareDashed,
@@ -34,10 +36,11 @@ import {
   type LucideIcon,
 } from "lucide-react";
 
-type View = "apps" | "components" | "atoms" | "tokens" | "skills" | "prompts" | "nodes";
+type View = "apps" | "templates" | "components" | "atoms" | "tokens" | "skills" | "prompts" | "nodes";
 
 const NAV: { key: View; label: string; group: string; Icon: LucideIcon }[] = [
   { key: "apps", label: "Apps", group: "Build", Icon: LayoutDashboard },
+  { key: "templates", label: "Templates", group: "Build", Icon: LayoutTemplate },
   { key: "components", label: "Components", group: "Build", Icon: SquareDashed },
   { key: "atoms", label: "Atoms", group: "Build", Icon: Atom },
   { key: "tokens", label: "Styles", group: "Build", Icon: Palette },
@@ -190,6 +193,8 @@ function Shell() {
           // Standalone Studio authors offline: open apps in MOCK (the defaultLive=true
           // resting mode is Canvas's, where the universe is right there).
           <TemplatesView theme={theme} themeName={variant} org={org} defaultLive={false} />
+        ) : view === "templates" ? (
+          <TemplatesLibraryView theme={theme} org={org} />
         ) : view === "components" ? (
           <ComponentsView theme={theme} org={org} />
         ) : view === "atoms" ? (