@unoverse-platform/studio 0.1.55 → 0.1.57

package/local/sample-template/chat/components/assistant-turn.yaml

@@ -0,0 +1,40 @@
+type: Box
+visibleWhen: active
+style:
+  direction: row
+  gap: "2"
+  align: start
+children:
+  - type: Box
+    style:
+      direction: column
+      flex: 1
+      gap: "2"
+      minWidth: 0
+    children:
+      - type: ComponentSlot
+        select: {}
+      - type: Box
+        visibleWhen: streaming
+        children:
+          - type: Box
+            visibleWhen: empty
+            style:
+              direction: row
+              gap: "2"
+              align: center
+            children:
+              - $include: components/thinking-dots
+              - type: Text
+                bind:
+                  value: thinkingText
+                style:
+                  font: body.sm
+                  color: text.secondary
+      - type: Text
+        visibleWhen: time
+        bind:
+          value: time
+        style:
+          font: body.sm
+          color: text.secondary

package/local/sample-template/chat/components/core-focus.yaml

@@ -0,0 +1,46 @@
+# THE CHAT COLUMN WITH A FOCUSED COMPONENT OVER IT — core, plus the focus surface
+# laid over the conversation region. A core VARIANT, not a copy: header, states and
+# composer are the same shared files core.yaml includes; the only difference is the
+# overlay slot.
+type: Box
+appWidth: chat
+style:
+  direction: column
+  minHeight: "0"
+children:
+  - type: Box
+    style:
+      direction: column
+      flex: 1
+      minHeight: "0"
+      position: relative
+    children:
+      - $include: components/header
+      - type: Box
+        style:
+          direction: column
+          flex: 1
+          minHeight: "0"
+          position: relative
+          when:
+            - field: hasMessages
+              eq: true
+              apply:
+                background: surface.base
+                radiusTopLeft: 2xl
+                overflow: hidden
+        children:
+          - $include: states/welcome
+          - $include: states/conversation
+      - type: Box
+        style:
+          position: absolute
+          bottom: "0"
+          left: "0"
+          right: "0"
+          direction: column
+        children:
+          - $include: components/suggestions
+      - $include: components/focus-overlay
+  - type: Ref
+    ref: composer-bar

package/local/sample-template/chat/components/core.yaml

@@ -0,0 +1,41 @@
+type: Box
+appWidth: chat
+style:
+  direction: column
+  minHeight: "0"
+children:
+  - type: Box
+    style:
+      direction: column
+      flex: 1
+      minHeight: "0"
+      position: relative
+    children:
+      - $include: components/header
+      - type: Box
+        style:
+          direction: column
+          flex: 1
+          minHeight: "0"
+          position: relative
+          when:
+            - field: hasMessages
+              eq: true
+              apply:
+                background: surface.base
+                radiusTopLeft: 2xl
+                overflow: hidden
+        children:
+          - $include: states/welcome
+          - $include: states/conversation
+      - type: Box
+        style:
+          position: absolute
+          bottom: "0"
+          left: "0"
+          right: "0"
+          direction: column
+        children:
+          - $include: components/suggestions
+  - type: Ref
+    ref: composer-bar

package/local/sample-template/chat/components/focus-overlay.yaml

@@ -0,0 +1,20 @@
+type: ComponentSlot
+select:
+  from: all
+  where:
+    field: view
+    eq: focused
+  limit: 1
+frame:
+  type: Box
+  style:
+    position: absolute
+    inset: "0"
+    width: full
+    height: full
+    background: surface.base
+    overflow: hidden
+    direction: column
+    align: stretch
+  children:
+    - type: ComponentSlot

package/local/sample-template/chat/components/header.yaml

@@ -0,0 +1,53 @@
+type: Box
+style:
+  direction: row
+  align: center
+  justify: space-between
+  height: "20"
+  padding: [ "0", "4" ]
+  background: transparent
+children:
+  - type: Box
+    style:
+      direction: row
+      align: center
+      gap: "2"
+    children:
+      - type: Icon
+        icon: sparkles
+        style:
+          width: "6"
+          height: "6"
+          color: action.primary
+      - type: Text
+        style:
+          font: title
+          color: text.primary
+        value: Assistant
+  - type: Button
+    action: close
+    style:
+      flex: 0 0 auto
+      cursor: pointer
+      width: "8"
+      height: "8"
+      radius: full
+      background: surface.base
+      border: subtle
+      shadow: sm
+      direction: row
+      align: center
+      justify: center
+      transition: all 150ms ease
+      hover:
+        background: surface.sunken
+    children:
+      - type: Icon
+        icon: close
+        style:
+          width: "4"
+          height: "4"
+          color: text.secondary
+    visibleWhen:
+      field: surfacedView
+      in: [ "" ]

package/local/sample-template/chat/components/suggestions.yaml

@@ -0,0 +1,142 @@
+type: Box
+visibleWhen: hasMessages
+style:
+  width: full
+  position: relative
+  direction: column
+  background: transparent
+children:
+  - type: Box
+    visibleWhen:
+      field: openPanel
+      eq: faq
+    style:
+      width: full
+      direction: column
+      gap: "2"
+      background: surface.base
+      radius: lg
+      padding: "4"
+      shadow: lg
+      margin: [ "0", "0", "2", "0" ]
+      animation:
+        name: slideUp
+        duration: 0.3s
+        easing: ease-out
+        iteration: "1"
+    children:
+      - type: Box
+        style:
+          direction: row
+          justify: end
+        children:
+          - type: Button
+            action:
+              type: setTemplateValue
+              values:
+                - key: openPanel
+                  value: null
+            style:
+              flex: 0 0 auto
+              cursor: pointer
+              width: "8"
+              height: "8"
+              radius: full
+              background: surface.base
+              border: subtle
+              shadow: sm
+              direction: row
+              align: center
+              justify: center
+              transition: all 150ms ease
+              hover:
+                background: surface.sunken
+            children:
+              - type: Icon
+                icon: close
+                style:
+                  width: "4"
+                  height: "4"
+                  color: text.secondary
+      - type: Each
+        style:
+          direction: row
+          wrap: wrap
+          align: start
+          gap: "2"
+          width: full
+        template:
+          type: Button
+          action:
+            type: sendMessage
+            then:
+              type: setTemplateValue
+              values:
+                - key: openPanel
+                  value: null
+          style:
+            direction: row
+            align: center
+            flex: 0 0 auto
+            maxWidth: full
+            padding: [ "2", "4" ]
+            background: surface.base
+            border: subtle
+            outline: none
+            radius: full
+            shadow: sm
+            cursor: pointer
+            transition: all 150ms ease
+            hover:
+              background: surface.sunken
+          children:
+            - type: Text
+              bind:
+                value: text
+              style:
+                font: body.sm
+                color: text.secondary
+                lineHeight: tight
+        items:
+          - text: What can you help me with?
+          - text: How does this work?
+          - text: Show me an example
+  - type: Box
+    style:
+      width: full
+      direction: row
+      justify: center
+      padding: [ "1", "0" ]
+    children:
+      - type: Button
+        action:
+          type: setTemplateValue
+          values:
+            - key: openPanel
+              value: faq
+        style:
+          direction: row
+          align: center
+          gap: "1"
+          padding: [ "1", "3" ]
+          background: surface.base
+          border: subtle
+          outline: none
+          radius: full
+          cursor: pointer
+          transition: all 150ms ease
+          hover:
+            background: surface.sunken
+        children:
+          - type: Icon
+            icon: chat
+            style:
+              width: "4"
+              height: "4"
+              color: text.secondary
+          - type: Text
+            style:
+              font: body.sm
+              color: text.secondary
+              weight: medium
+            value: Suggestions

package/local/sample-template/chat/components/thinking-dots.yaml

@@ -0,0 +1,38 @@
+type: Box
+style:
+  direction: row
+  gap: "1"
+  align: center
+children:
+  - type: Box
+    style:
+      width: "1.5"
+      height: "1.5"
+      background: action.primary
+      radius: full
+      animation:
+        name: wave
+        duration: 1.6s
+        easing: ease-in-out
+  - type: Box
+    style:
+      width: "1.5"
+      height: "1.5"
+      background: action.primary
+      radius: full
+      animation:
+        name: wave
+        duration: 1.6s
+        easing: ease-in-out
+      animationDelay: 0.16s
+  - type: Box
+    style:
+      width: "1.5"
+      height: "1.5"
+      background: action.primary
+      radius: full
+      animation:
+        name: wave
+        duration: 1.6s
+        easing: ease-in-out
+      animationDelay: 0.32s

package/local/sample-template/chat/components/user-turn.yaml

@@ -0,0 +1,22 @@
+type: Box
+style:
+  direction: row
+  justify: end
+children:
+  - type: Box
+    style:
+      direction: row
+      align: center
+      background: action.primary
+      radius: 2xl
+      radiusTopRight: sm
+      padding: [ "2", "4" ]
+      maxWidth: compact
+    children:
+      - type: Text
+        bind:
+          value: text
+        style:
+          font: body.md
+          color: action.primary-text
+          lineHeight: tight

package/local/sample-template/chat/layouts/focused.yaml

@@ -0,0 +1,12 @@
+# FOCUSED — a component holding the conversation region, composer live beneath.
+# A LAYOUT owned by the `focused` state: a hosted component writes `view: focused`,
+# the ladder makes this arrangement active, this file draws it.
+type: Box
+style:
+  direction: row
+  width: full
+  height: full
+  overflow: hidden
+  background: surface.sunken
+children:
+  - $include: components/core-focus

package/local/sample-template/chat/layouts/standard.yaml

@@ -0,0 +1,9 @@
+type: Box
+style:
+  direction: row
+  width: full
+  height: full
+  overflow: hidden
+  background: surface.sunken
+children:
+  - $include: components/core

package/local/sample-template/chat/manifest.yaml

@@ -0,0 +1,41 @@
+# A GENERIC CHAT — a worked example template, shipped with Studio so templates/ is
+# never an empty folder. It is yours: rename it, restyle it (it uses only foundation
+# tokens, so your project's theme restyles it whole), or delete it.
+# Guide: https://docs.unoverse.ai/design/templates.md
+name: chat
+description: A conversational assistant surface with a welcome hero, suggestions, and a focus overlay.
+whenToUse: Talk to the assistant — ask a question, get help, or start any task in conversation. The conversational home and fallback surface.
+category: Assistant
+version: 1.0.0
+defaultState: template
+inputSchema:
+  type: object
+  properties:
+    message:
+      type: string
+      description: The user's request
+
+# THE TEMPLATE TREE (State Model v2): one declaration, everything follows.
+# Top-level order IS the priority ladder (base first, then reaction states). NESTING
+# is containment: welcome exists only inside standard — the compiler strips it from
+# every other arrangement — and it is the landing default. No stateOrder, no
+# hand-written guards.
+# NOTE: the conversation timeline is NOT declared as a substate — it is standard's own
+# shell content (states/conversation), included by the shared chrome (components/core)
+# and legitimately drawn under the focus overlay too. Declaring it would contain it to
+# standard and empty the chat column in every reaction state.
+states:
+  standard:
+    states:
+      welcome: {}
+  focused: {}
+
+preview:
+  conversation: [ markdown-renderer ]
+  focused: [ card ]
+
+autoTrigger: false
+# BIND YOUR WORKFLOW to bring this to life: build one on the Canvas, then set
+#   binding: { workflow: <workflow-id>, trigger: <trigger-node-id> }
+# The app owns its workflow; until it is bound, this template previews but cannot run.
+layout: standard

package/local/sample-template/chat/states/conversation.yaml

@@ -0,0 +1,21 @@
+type: Box
+visibleWhen: hasMessages
+autoScroll: true
+style:
+  flex: 1
+  minHeight: "0"
+  direction: column
+  overflow: auto
+  padding: [ "6", "8" ]
+children:
+  - type: Timeline
+    style:
+      direction: column
+      gap: "4"
+      margin: [ auto, "0", "0", "0" ]
+    assistantData:
+      thinkingText: Thinking…
+    user:
+      $include: components/user-turn
+    assistant:
+      $include: components/assistant-turn

package/local/sample-template/chat/states/welcome.yaml

@@ -0,0 +1,119 @@
+type: Box
+visibleWhen: isEmpty
+style:
+  direction: column
+  flex: 1
+  minHeight: "0"
+  overflow: hidden
+  justify: end
+  gap: "6"
+  padding: [ "8", "8", "4", "8" ]
+children:
+  - type: Box
+    style:
+      direction: column
+      align: start
+      gap: "2"
+      maxWidth: reading
+      padding: [ "0", "8", "0", "0" ]
+    children:
+      - type: Text
+        style:
+          font: display
+          color: text.primary
+          lineHeight: none
+          align: start
+        value: How can I help?
+      - type: Text
+        style:
+          font: body.lg
+          color: text.secondary
+          align: start
+        value: Ask a question, or pick a place to start.
+  - type: Each
+    style:
+      direction: row
+      align: start
+      gap: "4"
+      width: full
+      padding: [ "2", "0", "2", "0" ]
+    template:
+      type: Button
+      action: sendMessage
+      style:
+        position: relative
+        flex: 1 1 0
+        minWidth: 0
+        height: "90"
+        padding: "0"
+        radius: 2xl
+        border: none
+        overflow: hidden
+        cursor: pointer
+        transition: all 200ms ease
+        shadow: lg
+        hover:
+          shadow: xl
+          transform: scale(1.02)
+      children:
+        - type: Image
+          bind:
+            src: image
+            alt: title
+          style:
+            position: absolute
+            inset: "0"
+            width: full
+            height: full
+            fit: cover
+        - type: Box
+          style:
+            position: absolute
+            inset: "0"
+            direction: column
+            align: start
+            justify: end
+            gap: "2"
+            padding: "4"
+            background: overlay.scrim
+            textAlign: start
+          children:
+            - type: Text
+              bind:
+                value: tag
+              style:
+                font: caption
+                color: white
+                lineHeight: tight
+            - type: Text
+              bind:
+                value: title
+              style:
+                font: title
+                color: white
+                lineHeight: tight
+                align: start
+            - type: Text
+              bind:
+                value: subtitle
+              style:
+                font: body.sm
+                color: white
+                lineHeight: snug
+                align: start
+    items:
+      - image: https://picsum.photos/seed/explore/840/1160
+        tag: Explore
+        title: What can you do?
+        subtitle: See what this assistant can help with.
+        text: What can you help me with?
+      - image: https://picsum.photos/seed/learn/840/1160
+        tag: Learn
+        title: Show me around
+        subtitle: A quick tour of how this works.
+        text: Give me a quick tour of what I can do here
+      - image: https://picsum.photos/seed/start/840/1160
+        tag: Start
+        title: Jump right in
+        subtitle: Describe what you need in your own words.
+        text: I would like some help getting started

package/local/scaffold.mjs

@@ -43,7 +43,11 @@ export function checkProjectName(name) {
 const WELCOME = [
   "unoverse: '1.0'",
   "kind: component",
-  "name: Welcome",
+  // name === filename (the item-key rule the publish lint enforces), and the closed
+  // style vocabulary has `font`, not `fontSize` — both caught by linting the scaffold
+  // output itself, which is the guard: the first component a developer ever sees must
+  // lint clean, or every rule the platform states is undermined by its own starter.
+  "name: welcome",
   "category: Content",
   "description: A first component. Edit this file and Studio updates as you save.",
   "root:",
@@ -52,7 +56,7 @@ const WELCOME = [
   "  children:",
   "    - type: Text",
   "      value: Hello from your first component",
-  "      style: { fontSize: 'lg', color: 'text.primary' }",
+  "      style: { font: 'body.lg', color: 'text.primary' }",
   "",
 ].join("\n");
 
@@ -81,6 +85,15 @@ export function createProject(home, name) {
   if (existsSync(sampleStyles) && readdirSync(join(root, "styles")).length === 0) {
     cpSync(sampleStyles, join(root, "styles"), { recursive: true });
   }
+
+  // A worked example TEMPLATE (a generic chat: welcome hero, suggestions, focus
+  // overlay — the bpp-chat-layout shape, neutralized to foundation tokens), so
+  // templates/ is never an empty folder and the first app is a rename away. Same
+  // rule as the styles: copied only into an empty folder, then the developer's.
+  const sampleTemplate = join(dirname(fileURLToPath(import.meta.url)), "sample-template/chat");
+  if (existsSync(sampleTemplate) && readdirSync(join(root, "templates")).length === 0) {
+    cpSync(sampleTemplate, join(root, "templates/chat"), { recursive: true });
+  }
   return root;
 }
 

package/package.json

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

package/screens/AtomsView.tsx

@@ -10,6 +10,7 @@ import { useEffect, useMemo, useState, type MouseEvent as ReactMouseEvent } from
 import { UnoverseComponent, type ResolvedTheme } from "@unoverse/sdk";
 import { client, authedFetch } from "studio-host";
 import { usePersistentState } from "studio-host";
+import { NAV, SCREEN, navItem } from "./chrome";
 
 interface PropDef {
   type?: string;
@@ -127,9 +128,9 @@ export function AtomsView({ theme }: { theme: ResolvedTheme }) {
   const uri = useMemo(() => (selected ? `unoverse://atoms/${slug(selected)}` : ""), [selected]);
 
   return (
-    <div className="grid min-h-0 flex-1 grid-cols-[240px_1fr] overflow-hidden">
+    <div className={SCREEN}>
       {/* NAVIGATOR */}
-      <nav className="flex min-h-0 min-w-0 flex-col overflow-auto border-r border-gray-700 bg-[#1b2129] p-2">
+      <nav className={NAV}>
         {atoms.length === 0 && (
           <div className="p-2 text-xs text-gray-400">No atoms — restart the Unoverse server so /dev/atoms is available.</div>
         )}
@@ -153,9 +154,7 @@ export function AtomsView({ theme }: { theme: ResolvedTheme }) {
               <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"
-                }`}
+                className={`block w-full rounded px-2 py-1 text-left text-sm transition ${navItem(selected === a.name)}`}
               >
                 {a.name}
               </button>

package/screens/ComponentsView.tsx

@@ -10,6 +10,7 @@ import { client, authedFetch, hasSourceAccess } from "studio-host";
 import { SourceView } from "./SourceView";
 import { stateActivation, faceOf, faceAxisOf, switchLayers } from "./states";
 import { usePersistentState, useRegistryToggles, ToggleSwitch } from "studio-host";
+import { NAV, SCREEN, navItem, navSubItem } from "./chrome";
 
 const CHAT_ID = "demo";
 
@@ -382,9 +383,9 @@ export function ComponentsView({ theme, org = "all" }: { theme: ResolvedTheme; o
   for (const [, items] of byCategory) items.sort((a, b) => (a.org ? 0 : 1) - (b.org ? 0 : 1));
 
   return (
-    <div className="grid min-h-0 flex-1 grid-cols-[240px_1fr] overflow-hidden">
+    <div className={SCREEN}>
       {/* NAVIGATOR */}
-      <nav className="flex min-h-0 min-w-0 flex-col overflow-auto border-r border-gray-700 bg-[#2c2c2e] p-2">
+      <nav className={NAV}>
         {components.length === 0 && (
           <div className="p-2 text-xs text-gray-400">No components — restart the Unoverse server so /dev/components is available.</div>
         )}
@@ -400,9 +401,7 @@ export function ComponentsView({ theme, org = "all" }: { theme: ResolvedTheme; o
               <div key={refOf(c)}>
                 <button
                   onClick={() => choose(c)}
-                  className={`block w-full rounded px-2 py-1 text-left text-sm transition ${
-                    selected === refOf(c) ? "bg-emerald-500/15 text-emerald-300" : "text-gray-300 hover:bg-white/5"
-                  }`}
+                  className={`block w-full rounded px-2 py-1 text-left text-sm transition ${navItem(selected === refOf(c))}`}
                 >
                   {c.name}
                   {/* Ownership mark: tagged = the developer's own (editable); untagged =
@@ -442,9 +441,7 @@ export function ComponentsView({ theme, org = "all" }: { theme: ResolvedTheme; o
                               store.apply({ type: "COMPONENT_DATA", chatId: CHAT_ID, nodeId: refOf(c), data: { [st.on!]: e.step } });
                               setStoreTick((v) => v + 1);
                             }}
-                            className={`block w-full truncate rounded px-2 py-0.5 text-left text-xs capitalize transition ${
-                              cur === e.step ? "bg-emerald-500/10 text-emerald-300" : "text-gray-400 hover:bg-white/5 hover:text-gray-200"
-                            }`}
+                            className={`block w-full truncate rounded px-2 py-0.5 text-left text-xs capitalize transition ${navSubItem(cur === e.step)}`}
                           >
                             {e.label}
                           </button>
@@ -469,9 +466,7 @@ export function ComponentsView({ theme, org = "all" }: { theme: ResolvedTheme; o
                             store.apply({ type: "COMPONENT_DATA", chatId: CHAT_ID, nodeId: refOf(c), data });
                             setStoreTick((v) => v + 1);
                           }}
-                          className={`block w-full truncate rounded px-2 py-0.5 text-left text-xs capitalize transition ${
-                            isActive ? "bg-emerald-500/10 text-emerald-300" : "text-gray-400 hover:bg-white/5 hover:text-gray-200"
-                          }`}
+                          className={`block w-full truncate rounded px-2 py-0.5 text-left text-xs capitalize transition ${navSubItem(isActive)}`}
                         >
                           {s.name}
                         </button>
@@ -494,9 +489,7 @@ export function ComponentsView({ theme, org = "all" }: { theme: ResolvedTheme; o
                             store.apply({ type: "COMPONENT_DATA", chatId: CHAT_ID, nodeId: refOf(c), data: { [s.on]: s.name } });
                             setStoreTick((v) => v + 1);
                           }}
-                          className={`block w-full truncate rounded px-2 py-0.5 text-left text-xs capitalize transition ${
-                            on ? "bg-emerald-500/10 text-emerald-300" : "text-gray-400 hover:bg-white/5 hover:text-gray-200"
-                          }`}
+                          className={`block w-full truncate rounded px-2 py-0.5 text-left text-xs capitalize transition ${navSubItem(on)}`}
                         >
                           {s.name}
                         </button>

package/screens/DesignSystemView.tsx

@@ -7,6 +7,7 @@
  */
 import { useState } from "react";
 import type { ResolvedTheme } from "@unoverse/sdk";
+import { GALLERY, NAV, NAV_SECTION, PANE, SCREEN, navItem } from "./chrome";
 
 const COLOR_GROUP_ORDER = [
   "brand", "primary", "secondary", "success", "action", "text", "surface", "border", "status",
@@ -65,7 +66,12 @@ export function DesignSystemView({
   // loud brand (e.g. an all-red project) doesn't turn the whole page its brand colour. The
   // real token swatches still render their true values; only the chrome is neutralised.
   const accent = "#6366f1";
-  const onAction = "#ffffff";
+  // THE NAVIGATOR IS STUDIO CHROME, NOT THE PREVIEW (2026-08-21). It used to paint itself
+  // from the viewed theme's `surface.base` and size itself by hand, which is the same
+  // mistake the accent above was already fixed for: a project with a white surface gave
+  // Studio a white sub-nav, in the one section where every other section's is dark. It now
+  // takes the shared shell from `./chrome` like every other screen. Reading a project's
+  // tokens is what the CONTENT pane is for, and that pane still does.
   const bodyFont = (theme.text["body.md"]?.fontFamily as string) ?? "system-ui";
 
   // A token is THIS PROJECT'S OVERRIDE when its resolved value differs from the
@@ -276,55 +282,45 @@ export function DesignSystemView({
   const current = SECTIONS.find((s) => s.id === active) ?? SECTIONS[0];
 
   return (
-    <div className="flex h-full" style={{ background: theme.color["surface.sunken"] ?? "#f9fafb", color: ink }}>
-      {/* LEFT NAV — jump between token groups; badge = how many tokens THIS project overrides */}
-      <nav className="w-56 shrink-0 overflow-auto border-r p-5" style={{ borderColor: borderC, background: surface, fontFamily: bodyFont }}>
-        <h1 className="mb-1 text-lg font-bold">Styles</h1>
-        <p className="mb-5 text-[11px] leading-snug" style={{ color: sub }}>
-          {foundation ? (
-            <>Viewing <b style={{ color: ink }}>{org}</b></>
-          ) : (
-            <>The base foundation</>
-          )}
-        </p>
-        <ul className="space-y-1">
-          {SECTIONS.map((s) => {
-            const n = foundation && s.bucket ? overrideCount(s.bucket) : 0;
-            const on = active === s.id;
-            return (
-              <li key={s.id}>
-                <button
-                  onClick={() => setActive(s.id)}
-                  className="flex w-full items-center justify-between rounded px-3 py-2 text-left text-sm font-medium transition-colors"
-                  style={on ? { background: accent, color: onAction } : { color: ink }}
-                >
-                  <span>{s.title}</span>
-                  {n > 0 && (
-                    <span
-                      className="rounded-full px-1.5 py-0.5 text-[10px] font-semibold"
-                      style={{ background: on ? "rgba(255,255,255,0.25)" : accent, color: onAction }}
-                    >
-                      {n}
-                    </span>
-                  )}
-                </button>
-              </li>
-            );
-          })}
-        </ul>
+    <div className={SCREEN}>
+      {/* NAVIGATOR — jump between token groups; badge = how many tokens THIS project overrides */}
+      <nav className={NAV}>
+        <div className={NAV_SECTION}>{foundation ? org : "foundation"}</div>
+        {SECTIONS.map((s) => {
+          const n = foundation && s.bucket ? overrideCount(s.bucket) : 0;
+          const on = active === s.id;
+          return (
+            <button
+              key={s.id}
+              onClick={() => setActive(s.id)}
+              className={`flex w-full items-center justify-between rounded px-2 py-1 text-left text-sm transition ${navItem(on)}`}
+            >
+              <span>{s.title}</span>
+              {n > 0 && (
+                <span className="rounded-full bg-emerald-500/15 px-1.5 py-0.5 text-[10px] font-semibold text-emerald-300">
+                  {n}
+                </span>
+              )}
+            </button>
+          );
+        })}
       </nav>
 
-      {/* CONTENT — the selected group only */}
-      <div className="flex-1 overflow-auto p-10" style={{ fontFamily: bodyFont }}>
-        <h2 className="mb-1 text-2xl font-bold">{current.title}</h2>
-        <p className="mb-8 text-xs" style={{ color: sub }}>
-          {foundation ? (
-            <>Tokens with an <OverrideMark /> are <b style={{ color: ink }}>{org}</b>&rsquo;s own; the rest are inherited from the design-system foundation.</>
-          ) : (
-            <>Live tokens from the design-system foundation (<code>design/marketplace/styles</code>). Toggle the theme to restyle everything.</>
-          )}
-        </p>
-        {current.body}
+      {/* CONTENT — the selected group only. The one pane that IS allowed to look like the
+          project, because looking at the project is its whole job; `bodyFont` renders the
+          typography specimens in the theme's own face. */}
+      <div className={PANE}>
+        <div className={GALLERY} style={{ fontFamily: bodyFont }}>
+          <h1 className="text-xl font-bold leading-tight tracking-tight text-gray-900">{current.title}</h1>
+          <p className="mb-8 mt-1 max-w-3xl text-sm leading-relaxed text-gray-600">
+            {foundation ? (
+              <>Tokens with an <OverrideMark /> are <b className="text-gray-900">{org}</b>&rsquo;s own; the rest are inherited from the design-system foundation.</>
+            ) : (
+              <>Live tokens from the design-system foundation (<code>design/marketplace/styles</code>). Toggle the theme to restyle everything.</>
+            )}
+          </p>
+          {current.body}
+        </div>
       </div>
     </div>
   );

package/screens/PromptBlocksView.tsx

@@ -15,6 +15,7 @@ import { useEffect, useMemo, useState } from "react";
 import { fetchUnoverse } from "studio-host";
 import { usePersistentState, useRegistryToggles, ToggleSwitch } from "studio-host";
 import { IdentityHeader } from "./IdentityHeader";
+import { DOC, EMPTY, NAV, NAV_SECTION, PANE, SCREEN, navItem } from "./chrome";
 
 interface PromptBlock {
   id: string;
@@ -61,9 +62,9 @@ export function PromptBlocksView() {
   ).sort(([a], [b]) => a.localeCompare(b));
 
   return (
-    <div className="grid min-h-0 flex-1 grid-cols-[220px_1fr] overflow-hidden">
+    <div className={SCREEN}>
       {/* NAVIGATOR */}
-      <nav className="flex min-h-0 min-w-0 flex-col overflow-auto border-r border-gray-700 bg-[#2c2c2e] p-2">
+      <nav className={NAV}>
         {blocks.length === 0 && (
           <div className="p-2 text-xs text-gray-400">
             {error
@@ -73,14 +74,12 @@ export function PromptBlocksView() {
         )}
         {byCategory.map(([cat, items]) => (
           <div key={cat} className="mb-3">
-            <div className="px-2 py-1 text-[10px] font-semibold uppercase tracking-wider text-gray-400">{cat}</div>
+            <div className={NAV_SECTION}>{cat}</div>
             {items.map((b) => (
               <button
                 key={b.id}
                 onClick={() => setSelected(b.id)}
-                className={`block w-full rounded px-2 py-1.5 text-left transition ${
-                  selected === b.id ? "bg-emerald-500/15 text-emerald-300" : "text-gray-300 hover:bg-white/5"
-                }`}
+                className={`block w-full rounded px-2 py-1.5 text-left transition ${navItem(selected === b.id)}`}
               >
                 <div className="flex items-center gap-1.5 text-sm font-medium">
                   {toggles.isEnabled(b.id) && <span className="h-1.5 w-1.5 rounded-full bg-emerald-400" title="Enabled" />}
@@ -94,11 +93,11 @@ export function PromptBlocksView() {
       </nav>
 
       {/* DETAIL */}
-      <div className="min-h-0 min-w-0 overflow-auto bg-white">
+      <div className={PANE}>
         {!detail ? (
-          <div className="flex h-full items-center justify-center text-sm text-gray-500">Select a prompt block</div>
+          <div className={EMPTY}>Select a prompt block</div>
         ) : (
-          <div className="mx-auto max-w-3xl p-8">
+          <div className={DOC}>
             <IdentityHeader
               name={detail.name}
               category={detail.category}

package/screens/SkillsView.tsx

@@ -13,6 +13,7 @@ import { useEffect, useState } from "react";
 import { fetchUnoverse } from "studio-host";
 import { usePersistentState, useRegistryToggles, ToggleSwitch } from "studio-host";
 import { IdentityHeader } from "./IdentityHeader";
+import { DOC, EMPTY, NAV, NAV_SECTION, PANE, SCREEN, navItem } from "./chrome";
 
 interface SkillSummary {
   name: string;
@@ -86,9 +87,9 @@ export function SkillsView() {
   ).sort(([a], [b]) => a.localeCompare(b));
 
   return (
-    <div className="grid min-h-0 flex-1 grid-cols-[220px_1fr] overflow-hidden">
+    <div className={SCREEN}>
       {/* NAVIGATOR */}
-      <nav className="flex min-h-0 min-w-0 flex-col overflow-auto border-r border-gray-700 bg-[#2c2c2e] p-2">
+      <nav className={NAV}>
         {skills.length === 0 && (
           <div className="p-2 text-xs text-gray-400">
             {error
@@ -98,14 +99,12 @@ export function SkillsView() {
         )}
         {byCategory.map(([cat, items]) => (
           <div key={cat} className="mb-3">
-            <div className="px-2 py-1 text-[10px] font-semibold uppercase tracking-wider text-gray-400">{cat}</div>
+            <div className={NAV_SECTION}>{cat}</div>
             {items.map((s) => (
               <button
                 key={s.name}
                 onClick={() => setSelected(s.name)}
-                className={`block w-full rounded px-2 py-1.5 text-left transition ${
-                  selected === s.name ? "bg-emerald-500/15 text-emerald-300" : "text-gray-300 hover:bg-white/5"
-                }`}
+                className={`block w-full rounded px-2 py-1.5 text-left transition ${navItem(selected === s.name)}`}
               >
                 <div className="flex items-center gap-1.5 text-sm font-medium">
                   {s.name}
@@ -118,11 +117,11 @@ export function SkillsView() {
       </nav>
 
       {/* DETAIL */}
-      <div className="min-h-0 min-w-0 overflow-auto bg-white">
+      <div className={PANE}>
         {!selected ? (
-          <div className="flex h-full items-center justify-center text-sm text-gray-500">Select a skill</div>
+          <div className={EMPTY}>Select a skill</div>
         ) : (
-          <div className="mx-auto max-w-3xl p-8">
+          <div className={DOC}>
             {/* AVAILABLE — the master switch. Which workflows actually carry this skill is
                 installed per workflow, in Canvas's Content Library. */}
             <IdentityHeader

package/screens/TemplatesView.tsx

@@ -27,6 +27,7 @@ import { StreamedUnoverseTemplate, useUnoverseConnection, computeAppWidth, resol
 import { NativeAppHost } from "./NativeAppHost";
 import { inArrangement, viewOfSlice } from "./states";
 import { client, authedFetch, hasAuth, UNOVERSE_BASE, liveUniverseUrl } from "studio-host";
+import { NAV, NAV_SECTION, SCREEN, navItem, navSubItem } from "./chrome";
 
 // Per-APP test conversation: each app chats in its own conversation id, so testing
 // one client's app never inherits another's agent history/memory (the "BPP answers
@@ -518,6 +519,11 @@ export function TemplatesView({
         nodeId: `${c.name}-${i}`,
         component: {
           type: c.name,
+          // The ADDRESS, exactly as a real server arrival carries it: the type alone
+          // 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}`,
           props: { ...defaultsOf(c), ...restState, defaultState: "inline" },
         },
       });
@@ -544,9 +550,12 @@ export function TemplatesView({
     Promise.all([
       // The header's org scope filters the list ("all" → every org's apps, each
       // tagged); the selected app's org still picks its own preview theme.
-      // Components are universal — one catalog.
+      // Components are SCOPED like the templates: an org sees "universal + its own".
+      // Fetched unscoped, a cloned org's same-named component (design/lyceum cloned
+      // from design/bpp → two bare `journey-finder`s) sat beside the original and
+      // Mock seeding picked whichever listed first.
       authedFetch(`/dev/templates${org !== "all" ? `?org=${encodeURIComponent(org)}` : ""}`).then((r) => (r.ok ? r.json() : { templates: [] })),
-      authedFetch("/dev/components").then((r) => (r.ok ? r.json() : { components: [] })),
+      authedFetch(`/dev/components${org !== "all" ? `?org=${encodeURIComponent(org)}` : ""}`).then((r) => (r.ok ? r.json() : { components: [] })),
     ])
       .then(([t, c]) => {
         const tl: Def[] = t.templates ?? [];
@@ -598,7 +607,14 @@ export function TemplatesView({
     const wantComponent = Boolean(layoutSel) || Boolean((activeState?.where as { field?: string } | undefined)?.field);
     let seededSet: Def[] = [];
     if (!wantEmpty) {
-      const byName = (name: string) => components.find((c) => c.name.toLowerCase() === name.toLowerCase());
+      // ORG-AWARE: names are unique only within a tier, so a bare preview ref must
+      // resolve to the SELECTED APP's own org first, then the universal tier — never
+      // to another org's same-named clone (which the "all" scope still lists).
+      const appOrg = (selectedDef?.org ?? "").toLowerCase();
+      const byName = (name: string) => {
+        const hits = components.filter((c) => c.name.toLowerCase() === name.toLowerCase());
+        return hits.find((c) => (c.org ?? "").toLowerCase() === appOrg) ?? hits.find((c) => !c.org) ?? hits[0];
+      };
       const set = entry
         ? entry.map(byName).filter((c): c is Def => Boolean(c))
         : wantComponent
@@ -652,10 +668,10 @@ export function TemplatesView({
   }, [store, selected, components, templates, live, activeState, activeLayout]);
 
   return (
-    <div className="grid min-h-0 flex-1 grid-cols-[190px_1fr] overflow-hidden">
+    <div className={SCREEN}>
       {/* NAVIGATOR */}
-      <nav className="flex min-h-0 min-w-0 flex-col overflow-auto border-r border-gray-700 bg-[#2c2c2e] p-2">
-        <div className="px-2 py-1 text-[10px] font-semibold uppercase tracking-wider text-gray-400">Apps</div>
+      <nav className={NAV}>
+        <div className={NAV_SECTION}>Apps</div>
         {templates.length === 0 && (
           <div className="p-2 text-xs text-gray-400">No apps yet — add one under design/&lt;project&gt;/templates/.</div>
         )}
@@ -663,9 +679,7 @@ export function TemplatesView({
           <div key={`${t.org ?? ""}/${t.name}`}>
             <button
               onClick={() => setSelected(t.name)}
-              className={`flex w-full items-center gap-2 rounded px-2 py-1 text-left text-sm transition ${
-                selected === t.name ? "bg-emerald-500/15 text-emerald-300" : "text-gray-300 hover:bg-white/5"
-              }`}
+              className={`flex w-full items-center gap-2 rounded px-2 py-1 text-left text-sm transition ${navItem(selected === t.name)}`}
             >
               <span className="min-w-0 flex-1 truncate">{t.name}</span>
               {/* Org badge only in the cross-org ("all") view — scoped, it's redundant */}
@@ -691,9 +705,7 @@ export function TemplatesView({
                       setSeedKey((k) => k + 1); // picking = jump + reseed that scenario
                     }}
                     title={`state: ${s.name}`}
-                    className={`block w-full truncate rounded px-2 py-0.5 text-left text-xs capitalize transition ${
-                      (liveStateName ?? activeState?.name) === s.name ? "bg-emerald-500/10 text-emerald-300" : "text-gray-400 hover:bg-white/5 hover:text-gray-200"
-                    }`}
+                    className={`block w-full truncate rounded px-2 py-0.5 text-left text-xs capitalize transition ${navSubItem((liveStateName ?? activeState?.name) === s.name)}`}
                   >
                     {s.name}
                   </button>

package/screens/chrome.ts

@@ -0,0 +1,83 @@
+/**
+ * The Studio screen shell, in one place.
+ *
+ * Every section (Apps, Components, Atoms, Styles, Skills, Prompt Blocks, Nodes) is the
+ * same anatomy: a dark navigator on the left, a white working pane on the right. That
+ * was true in spirit and false in the details — the navigators had drifted to four
+ * widths (190/220/240/330), three paddings and two completely different active states,
+ * and Styles had drifted furthest of all, painting its navigator from the THEME IT WAS
+ * PREVIEWING so a project with a white surface got a white sub-nav.
+ *
+ * These constants are the agreement. Import them; do not retype the class strings,
+ * because a retyped string is how the drift happened the first time.
+ *
+ * The reference screen is Skills: it is the one that read as finished, so its
+ * proportions (220px navigator, p-2, a readable measure on white) are the standard
+ * rather than an average of what everything else happened to be doing.
+ *
+ * This is CHROME ONLY. It says how a section frames its content, never what the content
+ * is. The dark ramp it uses (#0f141a shell → #1b2129 navigator → #232a34 panel) is
+ * Studio's own and is never derived from a project's tokens; see DesignSystemView for
+ * the one screen where that distinction actually bites.
+ */
+
+/** The section itself: navigator + working pane, neither scrolling the page. */
+export const SCREEN = "grid min-h-0 flex-1 grid-cols-[220px_1fr] overflow-hidden";
+
+/**
+ * WIDER NAVIGATOR, for a navigator that is a palette rather than a list. Nodes searches
+ * and renders two-line cards, which 220px genuinely cannot hold. An exception with a
+ * reason, spelled out here so the next person does not "fix" it back to SCREEN or, worse,
+ * invent a fifth width.
+ */
+export const SCREEN_WIDE_NAV = "grid min-h-0 flex-1 grid-cols-[330px_1fr] overflow-hidden";
+
+/** The dark navigator column. */
+export const NAV = "flex min-h-0 min-w-0 flex-col overflow-auto border-r border-gray-700 bg-[#1b2129] p-2";
+
+/** A group heading inside the navigator ("PROMPTS", "PRIMARY", a category). */
+export const NAV_SECTION = "px-2 py-1 text-[10px] font-semibold uppercase tracking-wider text-gray-400";
+
+/**
+ * SELECTION STATE ONLY, never layout.
+ *
+ * The navigators legitimately differ in row geometry — a Skills row is two lines, a
+ * Templates row is a flex row with a chip, a Components row opens a state tree — and
+ * flattening that into one class string would change row heights across five screens to
+ * buy nothing. What must NOT differ is what "selected" looks like, and that is what these
+ * return. Call sites keep their own layout classes and append one of these.
+ *
+ * Emerald is Studio's selection colour and is deliberately NOT any project's action
+ * colour, so a loud brand cannot restyle the chrome around its own preview.
+ */
+export const navItem = (active: boolean) =>
+  active ? "bg-emerald-500/15 text-emerald-300" : "text-gray-300 hover:bg-white/5";
+
+/** A nested navigator entry (a state under a component, a token group under a section). */
+export const navSubItem = (active: boolean) =>
+  active ? "bg-emerald-500/10 text-emerald-300" : "text-gray-400 hover:bg-white/5 hover:text-gray-200";
+
+/** The common one-line row. Compose with `navItem`; two-line rows add their own padding. */
+export const NAV_ITEM = "block w-full rounded px-2 py-1 text-left text-sm transition";
+
+/** The common nested row. Compose with `navSubItem`. */
+export const NAV_SUBITEM = "block w-full truncate rounded px-2 py-0.5 text-left text-xs transition";
+
+/** The working pane. White, and the only thing that scrolls. */
+export const PANE = "min-h-0 min-w-0 overflow-auto bg-white";
+
+/**
+ * Reading content inside the pane — a skill's instructions, a prompt block, anything
+ * whose job is to be READ. Capped at a readable measure and centred.
+ */
+export const DOC = "mx-auto max-w-3xl p-8";
+
+/**
+ * Browsing content inside the pane — swatch grids, galleries, anything laid out across
+ * the full width. Same padding as DOC so the two feel like one application; no measure
+ * cap, because capping a gallery just wastes the screen.
+ */
+export const GALLERY = "p-8";
+
+/** The empty state, before anything is selected. Same words shape everywhere: "Select a …". */
+export const EMPTY = "flex h-full items-center justify-center text-sm text-gray-500";

package/screens/index.ts

@@ -12,6 +12,10 @@
  * Consumed as SOURCE via a bundler alias, the same convention `@unoverse/sdk`
  * already uses. No build step, no publish cycle, no stale dist.
  */
+// The screen shell (navigator + working pane) every section is built from. Exported so a
+// host's own screens can sit beside these without re-deriving the chrome by eye, which is
+// exactly how the navigators drifted to four widths and two selection colours.
+export * from "./chrome";
 export { ComponentsView } from "./ComponentsView";
 export { AtomsView } from "./AtomsView";
 export { TemplatesView } from "./TemplatesView";

package/src/NodesView.tsx

@@ -11,6 +11,7 @@ import { useCallback, useEffect, useMemo, useState } from "react";
 import { authedFetch, usePersistentState, useRegistryToggles, ToggleSwitch } from "./host";
 import { ConfigForm, defaultsFromSchema } from "@unoverse/studio";
 import { NodeKeys, type CredentialType } from "./NodeKeys";
+import { NAV, SCREEN_WIDE_NAV } from "../screens/chrome";
 
 interface NodeInput {
   name: string;
@@ -294,9 +295,9 @@ export function NodesView() {
   }
 
   return (
-    <div className="grid min-h-0 flex-1 grid-cols-[330px_1fr] overflow-hidden">
+    <div className={SCREEN_WIDE_NAV}>
       {/* PALETTE — Canvas-style searchable node cards */}
-      <nav className="flex min-h-0 min-w-0 flex-col overflow-auto border-r border-gray-700 bg-[#1b2129] p-3">
+      <nav className={NAV}>
         <div className="relative mb-3">
           <input
             value={query}

package/vendor/skills/unoverse-create/references/component.md

@@ -30,8 +30,21 @@ manifest, no folders. Structure is EARNED; start flat.
 ## The state model (v2): data + a state tree
 
 A component is **data plus a state tree**; each state owns the layout(s) that draw it.
-The root's `state:` block IS the design, readable top to bottom. The canonical shape
-(a product-card component: a grid state and a detail page with nested steps):
+The root's `state:` block IS the design, readable top to bottom.
+
+> **THE GATE — answer this before adding ANY state to `view`:**
+> *"Would a hosting template rearrange the page to show this?"*
+> **No → it's a private step**: nest it under `on:` inside an existing public state.
+> **Yes → public.**
+> ⚠ "The user asked for N states" never means N public states. In-place swaps
+> (confirmation, success, empty, error, loading, a form's next step) are almost always
+> PRIVATE. Privacy is the default; promotion to `view` is a deliberate act with a
+> template consequence.
+
+The canonical shape (a product-card component). Note where each state landed and why:
+`products` and `detail` are PUBLIC because a template genuinely rearranges for each (a
+grid rail vs a full page); `detail`'s inner `detail`/`apply` are PRIVATE steps because
+applying swaps content in place — the page does not move:
 
 ```yaml
 state:
@@ -65,9 +78,13 @@ The rules, in the order they bite:
 - **Public states are the top level of the `view` axis** and they are the template's
   WHOLE vocabulary: everything templates can react to, nothing more. Steps nest
   privately (`on: <key>` + `initial` + `states`), invisible outside the component.
-  The placement rule: **if the template must rearrange to show it, make it public;
-  if the template wouldn't move, nest it privately.** Privacy is the default;
-  promotion is deliberate.
+  The placement rule is THE GATE above: **if the template must rearrange to show it,
+  make it public; if the template wouldn't move, nest it privately.** Privacy is the
+  default; promotion is deliberate.
+  **The tell in Studio:** non-initial public states preview FULL-BLEED (no stage
+  padding), precisely because they are template-liftable surfaces. If a state you
+  meant as an in-place swap suddenly renders edge-to-edge, you promoted a private
+  step to `view` — move it into the nest.
 - **Each state owns its layout(s).** `layout:` is OPTIONAL: a state with no declaration
   draws the layout of its own name, and `{}` is a complete state. Write `layout:` only
   when the filename differs. A layout is never addressable on its own; only its owning
@@ -280,5 +297,7 @@ component. Its key nouns/verbs must appear in `whenToUse`'s first sentence.
 4. Publish from Studio; its lint must report 0 errors (the rules are v2-aware and cite
    the doc for every rule).
 5. Restart unoverse → Studio: mock (prop defaults + the state switcher reads the tree:
-   public states on top, steps beneath by state name), then live. Debug: stream log →
-   state inspector → definition; never guess.
+   public states on top, steps beneath by state name), then live. Sanity-check the
+   switcher against THE GATE: every entry in its top row is a promise that a template
+   will rearrange for it, and a non-initial public state previews full-bleed. Debug:
+   stream log → state inspector → definition; never guess.