@unoverse-platform/studio 0.1.41 → 0.1.43

package/package.json

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

package/screens/ComponentsView.tsx

@@ -27,6 +27,8 @@ interface PropDef {
 }
 interface ComponentDef {
   name: string;
+  /** The owning org for an org component (server-tagged); marketplace tier has none. */
+  org?: string;
   /** Display name from the manifest ("Card Finder"); falls back to `name`. */
   title?: string;
   description?: string;
@@ -119,17 +121,22 @@ export function ComponentsView({ theme, org = "all" }: { theme: ResolvedTheme; o
   // SDK's `Each` saw a string instead of a list and rendered nothing. Editor display
   // strings are derived separately into `text`.
   const toText = (v: unknown) => (typeof v === "string" ? v : v == null ? "" : JSON.stringify(v, null, 2));
+  // The component's IDENTITY everywhere identity matters (selection, store slices,
+  // Copy for Canvas, URIs): the qualified ref for an org component, bare for the
+  // marketplace tier. Names are unique only within a tier, so keying on the bare name
+  // would collide two orgs' same-named components. Display keeps the bare name.
+  const refOf = (c: ComponentDef): string => (c.org ? `${c.org}/${c.name}` : c.name);
   const defaultsOf = (c: ComponentDef): Record<string, unknown> =>
     Object.fromEntries(
       Object.entries(c.props ?? {}).map(([k, v]) => [k, v.preview ?? v.default ?? (v.type === "array" ? [] : v.type === "object" ? {} : "")]),
     );
 
   function choose(c: ComponentDef) {
-    setSelected(c.name);
+    setSelected(refOf(c));
     const defaults = defaultsOf(c);
     setValues(defaults);
     setText(Object.fromEntries(Object.entries(defaults).map(([k, v]) => [k, toText(v)])));
-    store.apply({ type: "COMPONENT_INIT", chatId: CHAT_ID, nodeId: c.name, component: { type: c.name, props: defaults } });
+    store.apply({ type: "COMPONENT_INIT", chatId: CHAT_ID, nodeId: refOf(c), component: { type: refOf(c), props: defaults } });
     // SEED THE ARRIVAL FACE, from the one place it lives. `manifest.defaultState` is the
     // render contract, and the server merges it into the composed `state` block
     // (definitions.ts — "so the SDK, which merges def.state beneath live data, renders
@@ -142,9 +149,9 @@ 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: c.name, data: { view: st.view } });
+    if (typeof st?.view === "string") store.apply({ type: "COMPONENT_DATA", chatId: CHAT_ID, nodeId: refOf(c), data: { view: st.view } });
     else if (typeof st?.defaultState === "string")
-      store.apply({ type: "COMPONENT_DATA", chatId: CHAT_ID, nodeId: c.name, data: { defaultState: st.defaultState } });
+      store.apply({ type: "COMPONENT_DATA", chatId: CHAT_ID, nodeId: refOf(c), data: { defaultState: st.defaultState } });
   }
 
   useEffect(() => {
@@ -156,7 +163,7 @@ export function ComponentsView({ theme, org = "all" }: { theme: ResolvedTheme; o
         const list: ComponentDef[] = d.components ?? [];
         setComponents(list);
         // Restore the persisted selection across reloads; fall back to the first.
-        const restore = list.find((c) => c.name === selected) ?? list[0];
+        const restore = list.find((c) => refOf(c) === selected) ?? list[0];
         if (restore) choose(restore);
       })
       .catch(() => setComponents([]));
@@ -167,7 +174,7 @@ export function ComponentsView({ theme, org = "all" }: { theme: ResolvedTheme; o
   // toggle highlight + grow container, not just the rendered component).
   useEffect(() => store.subscribe(() => setStoreTick((t) => t + 1)), [store]);
 
-  const current = components.find((c) => c.name === selected);
+  const current = components.find((c) => refOf(c) === selected);
   // The TWO MASTER STATES (inline / focused) are universal — every component's root
   // switches its face on `defaultState` (STATE_MODEL §5b). The toolbar control writes
   // that key into the slice — the same generic setValue/COMPONENT_DATA path a real
@@ -329,7 +336,9 @@ export function ComponentsView({ theme, org = "all" }: { theme: ResolvedTheme; o
         // data. UIComponentNode layers props [schema defaults] < [executed] < [config], so
         // anything written here outranks the live definition permanently: spreading the
         // previews in froze them into the workflow at copy time.
-        config: { component: current.name },
+        // Qualified ref for an org component (`<org>/<name>`): the selector identity in
+        // the generic Component node's oneOf, and unambiguous once two orgs share a name.
+        config: { component: refOf(current) },
       },
       style: { width: size.width },
       draggable: true,
@@ -377,14 +386,15 @@ export function ComponentsView({ theme, org = "all" }: { theme: ResolvedTheme; o
           <div key={cat} className="mb-3">
             <div className="px-2 py-1 text-[10px] font-semibold uppercase tracking-wider text-gray-400">{cat}</div>
             {items.map((c) => (
-              <div key={c.name}>
+              <div key={refOf(c)}>
                 <button
                   onClick={() => choose(c)}
                   className={`block w-full rounded px-2 py-1 text-left text-sm transition ${
-                    selected === c.name ? "bg-emerald-500/15 text-emerald-300" : "text-gray-300 hover:bg-white/5"
+                    selected === refOf(c) ? "bg-emerald-500/15 text-emerald-300" : "text-gray-300 hover:bg-white/5"
                   }`}
                 >
                   {c.name}
+                  {c.org ? <span className="ml-1.5 text-[10px] text-gray-500">{c.org}</span> : null}
                 </button>
                 {/* The component's OWN states (its states/ folder) live HERE in the rail.
                     The two MASTER states (inline/focused — the `defaultState` face switch,
@@ -399,7 +409,7 @@ export function ComponentsView({ theme, org = "all" }: { theme: ResolvedTheme; o
                     Clicking a step's layout puts the preview into that step. The
                     states themselves live in the toolbar pills above — one control
                     per axis, no duplication. */}
-                {selected === c.name && !sourceOpen && stateTree?.length ? (
+                {selected === refOf(c) && !sourceOpen && stateTree?.length ? (
                   (() => {
                     const st = stateTree.find((s) => s.name === masterState);
                     if (!st) return null;
@@ -409,14 +419,14 @@ export function ComponentsView({ theme, org = "all" }: { theme: ResolvedTheme; o
                     // choice either: nothing lists.
                     const entries = (st.states ?? []).map((sub) => ({ label: sub.name, step: sub.name }));
                     if (entries.length < 2 || !st.on) return null;
-                    const cur = (store.get(CHAT_ID, c.name) as Record<string, unknown>)[st.on] ?? st.initial;
+                    const cur = (store.get(CHAT_ID, refOf(c)) as Record<string, unknown>)[st.on] ?? st.initial;
                     return (
                       <div className="my-0.5 ml-2 flex flex-col gap-px border-l border-gray-700 pl-2">
                         {entries.map((e) => (
                           <button
                             key={e.label}
                             onClick={() => {
-                              store.apply({ type: "COMPONENT_DATA", chatId: CHAT_ID, nodeId: c.name, data: { [st.on!]: e.step } });
+                              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 ${
@@ -430,20 +440,20 @@ export function ComponentsView({ theme, org = "all" }: { theme: ResolvedTheme; o
                     );
                   })()
                 ) : null}
-                {selected === c.name && !sourceOpen && !stateTree?.length && (c.states?.length ?? 0) > 0 && (
+                {selected === refOf(c) && !sourceOpen && !stateTree?.length && (c.states?.length ?? 0) > 0 && (
                   <div className="my-0.5 ml-2 flex flex-col gap-px border-l border-gray-700 pl-2">
                     {(c.states ?? []).map((s) => {
                       const data = stateActivation(c.root, s);
                       const activeKey = data ? Object.keys(data)[0] : null;
                       const isActive =
                         Boolean(activeKey) &&
-                        (store.get(CHAT_ID, c.name) as Record<string, unknown>)[activeKey!] === (data as Record<string, unknown>)[activeKey!];
+                        (store.get(CHAT_ID, refOf(c)) as Record<string, unknown>)[activeKey!] === (data as Record<string, unknown>)[activeKey!];
                       return (
                         <button
                           key={s.name}
                           onClick={() => {
                             if (!data) return;
-                            store.apply({ type: "COMPONENT_DATA", chatId: CHAT_ID, nodeId: c.name, data });
+                            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 ${
@@ -459,16 +469,16 @@ export function ComponentsView({ theme, org = "all" }: { theme: ResolvedTheme; o
                 {/* CONTEXTUAL SUB-STATES (LEGACY Switch-scan only — a v2 tree renders
                     its steps nested above): the ACTIVE face's internal steps (its
                     private Switch). Listed only while their face is active. */}
-                {selected === c.name && !sourceOpen && !stateTree?.length && subStates.length > 0 && (
+                {selected === refOf(c) && !sourceOpen && !stateTree?.length && subStates.length > 0 && (
                   <div className="my-0.5 ml-2 flex flex-col gap-px border-l border-gray-700 pl-2">
                     {subStates.map((s, i) => {
-                      const cur = (store.get(CHAT_ID, c.name) as Record<string, unknown>)[s.on];
+                      const cur = (store.get(CHAT_ID, refOf(c)) as Record<string, unknown>)[s.on];
                       const on = cur === s.name || (i === 0 && (cur === undefined || cur === ""));
                       return (
                         <button
                           key={s.name}
                           onClick={() => {
-                            store.apply({ type: "COMPONENT_DATA", chatId: CHAT_ID, nodeId: c.name, data: { [s.on]: s.name } });
+                            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 ${
@@ -582,8 +592,8 @@ export function ComponentsView({ theme, org = "all" }: { theme: ResolvedTheme; o
                 nothing. This one is honoured — off means no canvas can install it. */}
             {current?.spatial && (
               <ToggleSwitch
-                on={available.isEnabled(current.name)}
-                onClick={() => available.toggle(current.name)}
+                on={available.isEnabled(refOf(current))}
+                onClick={() => available.toggle(refOf(current))}
                 label="Available"
               />
             )}

package/screens/TemplatesView.tsx

@@ -26,7 +26,7 @@ import { ComponentStore } from "@unoverse/sdk";
 import { StreamedUnoverseTemplate, useUnoverseConnection, computeAppWidth, resolveActiveLayout, visible, type ResolvedTheme, type UseVoiceServiceConfig } from "@unoverse/sdk";
 import { NativeAppHost } from "./NativeAppHost";
 import { inArrangement, viewOfSlice } from "./states";
-import { client, authedFetch, hasAuth, UNOVERSE_BASE } from "studio-host";
+import { client, authedFetch, hasAuth, UNOVERSE_BASE, liveUniverseUrl } from "studio-host";
 
 // 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
@@ -45,15 +45,23 @@ const chatIdFor = (app: string) => `demo-${app.toLowerCase()}-${SESSION_NONCE}`;
 // :4105 — since the workbench retired, uWS binds the public port DIRECTLY in dev, same
 // as prod (the retired workbench was :4205, the retired gateway :4100). Prod uses the
 // page origin.
-const CONN_DEFAULTS = { server: "localhost:4105", workflowId: "wf-r4jzo7", triggerNode: "inputtrigger1", token: "" };
-const CONN_KEY = "unoverse.workbench.conn";
+// THE LIVE SERVER IS NOT CONFIGURED HERE. The universe Studio is signed into (the
+// header connection, via studio-host's liveUniverseUrl) IS the live environment, so
+// being signed into one universe while previewing against another is impossible by
+// construction. Only with NO universe connected does the preview fall back to the
+// local dev platform. The old hardcoded default (`localhost:4105` + a sample
+// workflow id, persisted under "unoverse.workbench.conn") is retired: it kept green
+// "Connected" sessions against stale localhost stacks while the header showed a
+// production universe. Workflow + trigger come from the app's manifest binding; the
+// only thing persisted now is a hand-pasted JWT for auth-off dev servers.
+const LOCAL_DEV_SERVER = "localhost:4105";
+const CONN_DEFAULTS = { token: "" };
+const CONN_KEY = "unoverse.workbench.conn.v2";
 
 function loadConn(): typeof CONN_DEFAULTS {
   try {
     const saved = JSON.parse(localStorage.getItem(CONN_KEY) ?? "{}");
-    // Migration: drop retired ports (gateway :4100, workbench :4205) so the new default applies.
-    if (saved.server === "localhost:4100" || saved.server === "localhost:4205") delete saved.server;
-    return { ...CONN_DEFAULTS, ...saved };
+    return { token: typeof saved.token === "string" ? saved.token : "" };
   } catch {
     return { ...CONN_DEFAULTS };
   }
@@ -238,23 +246,30 @@ export function TemplatesView({
   const authToken = auth?.user?.access_token;
   const token = authToken || connCfg.token;
 
+  // The live server: the signed-in universe, else the local dev platform (see the
+  // CONN_DEFAULTS note). A universe URL is already an https origin; the bare local
+  // fallback gets http.
+  const universeUrl = liveUniverseUrl();
+  const liveServer = universeUrl ?? LOCAL_DEV_SERVER;
+  const liveBase = liveServer.includes("://") ? liveServer : `http://${liveServer}`;
+
   const config = useMemo(
     () => ({
-      apiUrl: `http://${connCfg.server}`,
+      apiUrl: liveBase,
       // Component stream rides the Unoverse `/stream` MCP endpoint (§5b). In the canvas
       // the path that reaches Unoverse is UNOVERSE_BASE (/unoverse-mcp proxy in dev, the
       // explicit gated URL in prod) — always absolute there. In local Studio UNOVERSE_BASE
       // is "" (a folder, not a universe; its origin serves no /stream), so the stream goes
       // to the CONNECTED universe — same base the apiUrl above uses. An empty string here
       // threw `Invalid URL` inside the SDK and killed the stream silently.
-      streamUrl: UNOVERSE_BASE || `http://${connCfg.server}`,
+      streamUrl: UNOVERSE_BASE || liveBase,
       // A real JWT makes the workbench a proper authenticated channel: it rides the
       // MCP stream's `Authorization` header and the REST `Authorization` header, so the
       // workflow gets full user context (incl. the email claim → CRM join). See
       // docs/AUTH_TOKEN_FLOW.md. Blank → no token (server must run with DISABLE_AUTH=true).
       getAccessToken: token ? async () => token : undefined,
     }),
-    [connCfg.server, token],
+    [liveBase, token],
   );
   // The APP decides which workflow runs: the selected template's manifest binding
   // (workflow + trigger) drives the connection. No manual entry — MCP decides.
@@ -395,7 +410,7 @@ export function TemplatesView({
             // START_CALL REST triggers the workflow on the gateway. The audio WS lane is
             // derived by the SDK from the client's server origin (see the renderer) — the
             // host passes NO wsUrl, so every host (incl. srcdoc iframes) is identical.
-            apiUrl: `http://${connCfg.server}`,
+            apiUrl: liveBase,
             getAccessToken: token ? async () => token : undefined,
             session: {
               userId: session.userId,
@@ -409,7 +424,7 @@ export function TemplatesView({
             store,
           }
         : undefined,
-    [isVoice, connCfg.server, token, session, store],
+    [isVoice, liveBase, token, session, store],
   );
 
   // "Load the app → it calls its workflow" — but ONLY for apps with autoTrigger (Mode B).
@@ -808,7 +823,7 @@ export function TemplatesView({
                         come from the selected app's manifest binding (no manual entry). */}
                     {(
                       [
-                        { label: "Server", value: connCfg.server, note: "environment" },
+                        { label: "Server", value: liveServer, note: universeUrl ? "signed-in universe" : "local dev (no universe connected)" },
                         { label: "Workflow", value: binding?.workflow ?? "— no app binding", note: "from app" },
                         { label: "Trigger node", value: binding?.trigger ?? "—", note: "from app" },
                       ]
@@ -1017,7 +1032,7 @@ export function TemplatesView({
                 /* NATIVE: the universe serves the app; Studio just hosts it. Same
                    ui:// shell ChatGPT loads, same boot contract, its own connections. */
                 <NativeAppHost
-                  server={UNOVERSE_BASE || `http://${connCfg.server}`}
+                  server={UNOVERSE_BASE || liveBase}
                   token={token}
                   templateId={`${selectedDef?.org ? `${selectedDef.org}/` : ""}${selected ?? ""}`}
                   userId={session.userId}

package/src/host.ts

@@ -21,6 +21,24 @@ export const UNOVERSE_BASE = "";
 /** No login offline. Kept so the shared screens can ask without branching on host. */
 export const hasAuth = false;
 
+/**
+ * The universe Studio is signed into (the header connection), or null when offline.
+ * THE LIVE PREVIEW'S SERVER. One source of truth: the same selection App.tsx keeps
+ * (`studio:universe` is its usePersistentState pointer into the saved universe list),
+ * so it is impossible to be signed into one universe and silently previewing against
+ * another. The shared screens fall back to the local dev platform only when no
+ * universe is connected.
+ */
+export function liveUniverseUrl(): string | null {
+  try {
+    const raw = localStorage.getItem("studio:universe");
+    const url = raw === null ? null : (JSON.parse(raw) as string | null);
+    return url || null;
+  } catch {
+    return null;
+  }
+}
+
 /**
  * SOURCE ACCESS: this host serves the files behind a definition, so the screens may show
  * the source view. Local Studio reads the developer's own folder, so it can.

package/vendor/sdk/lib/UnoverseComponent.tsx

@@ -33,7 +33,11 @@ export function useUnoverseInstance(store?: ComponentStore, chatId = "", nodeId
     subscribe,
     useCallback(() => (store ? store.getType(chatId, nodeId) : undefined), [store, chatId, nodeId]),
   );
-  return { type, data };
+  const componentUrl = useSyncExternalStore(
+    subscribe,
+    useCallback(() => (store ? store.getComponentUrl(chatId, nodeId) : undefined), [store, chatId, nodeId]),
+  );
+  return { type, data, componentUrl };
 }
 
 export interface UnoverseComponentProps {
@@ -83,11 +87,14 @@ export function UnoverseComponent({ client, uri, data, store, chatId, nodeId, ex
   // LIVE SOURCE. The hook runs either way (hooks cannot be conditional) and no-ops without a
   // store, so one component serves both paths without a wrapper deciding for it.
   const live = useUnoverseInstance(store, chatId, nodeId);
-  // The BARE URI, deliberately. This asked for the referenced form (`@refs`) while that
-  // form existed; it is withdrawn (server resources.ts refForm), so asking for it now only
-  // spreads a suffix that every door has to know how to strip. Studio's own local
-  // definition route did not, and answered "definition not found" for every component.
-  const resolvedUri = store ? (live.type ? `unoverse://components/${live.type}` : null) : (uri ?? null);
+  // The SERVER-SENT address first: an org component's URI is org-qualified
+  // (`unoverse://components/<org>/<name>`) and the bare type cannot rebuild it once two
+  // orgs share a name. The rebuild-from-type stays as the fallback for events that
+  // carry no componentUrl. (Still the plain URI, never the withdrawn `@refs` form —
+  // that suffix broke Studio's local definition route.)
+  const resolvedUri = store
+    ? (live.componentUrl ?? (live.type ? `unoverse://components/${live.type}` : null))
+    : (uri ?? null);
   const sourceData = store ? (extraData ? { ...(live.data ?? {}), ...extraData } : live.data) : data;
   // No theme passed → fetch it from the server (the SDK owns zero token values). The
   // theme REF comes from the definition itself: a template's `org` names its client's

package/vendor/sdk/lib/core/store.ts

@@ -71,6 +71,10 @@ export class ComponentStore {
   // --- data plane ---
   private data = new Map<string, Record<string, unknown>>();
   private types = new Map<string, string>();
+  // The server-sent render address (`unoverse://components/<org>/<name>` for an org
+  // component). Kept because the TYPE alone cannot rebuild it: names are unique only
+  // within a tier, so a bare type two orgs share is ambiguous without this.
+  private urls = new Map<string, string>();
   // --- timeline plane (pointers only) ---
   private timeline: Turn[] = [];
   // --- write recency per slice (monotonic seq stamped on every merge) — powers
@@ -275,6 +279,7 @@ export class ComponentStore {
     const key = `${event.chatId}:${event.nodeId}`;
     if (event.type === "COMPONENT_INIT") {
       this.types.set(key, event.component.type);
+      if (event.component.componentUrl) this.urls.set(key, event.component.componentUrl);
       this.placeInTimeline(event.chatId, key); // structure: place the pointer ONCE
       this.merge(key, event.component.props ?? {}); // data: seed
       // Rule 5 — an arrival carrying a public state refreshes that state.
@@ -376,6 +381,7 @@ export class ComponentStore {
         for (const ptr of dropped.components) {
           this.data.delete(ptr);
           this.types.delete(ptr);
+          this.urls.delete(ptr);
           this.touches.delete(ptr);
           this.interactionTouches.delete(ptr);
         }
@@ -460,6 +466,10 @@ export class ComponentStore {
   getType(chatId: string, nodeId: string): string | undefined {
     return this.types.get(`${chatId}:${nodeId}`);
   }
+  /** The server-sent render address for a slice, when the INIT carried one. */
+  getComponentUrl(chatId: string, nodeId: string): string | undefined {
+    return this.urls.get(`${chatId}:${nodeId}`);
+  }
   getVersion(): number {
     return this.version;
   }

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

@@ -132,8 +132,11 @@ place. Work through them in order.
 2. **Rename the templates.** Folder AND the id inside the manifest. `bpp-chat-layout`
    becomes `lyceum-chat-layout` in both places. Template ids are org-qualified and they
    are referenced by string.
-3. **Update every manifest `name`** in the copied components and templates. A duplicate
-   name across packs is a collision: names are unique across all tiers, not per org.
+3. **Component names stay as copied.** Names are unique per org, not across orgs, so a
+   cloned pack carrying the same component names as its source is legal: each org's copy
+   is addressed `unoverse://components/<org>/<name>`. The one forbidden case is a name
+   that shadows a design-system (marketplace) component; the publish lint catches it.
+   Update template manifest `name`s only where the id itself is org-branded.
 4. **Register the client surface** if the demo client serves it
    (`packages/demo/src/demo/clients.js`).
 5. **Point the app at the new theme.** Templates reference `unoverse://theme/<org>/<name>`.

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

@@ -154,9 +154,11 @@ template states by name exactly as in chat. Audio is never wired in a definition
 
 ## New project?
 
-`rx/<project>/` = `templates/` + optional `components/` (project-private microapps,
-names unique across tiers) + a **complete self-contained** `styles/` (copy an existing
-project's `styles/` and re-value the base scales). Addresses: apps
+`rx/<project>/` = `templates/` + optional `components/` (project-private microapps;
+names unique within the project and never shadowing a marketplace name; two projects
+may share a name, each addressed `<org>/<name>`) + `styles/` holding ONLY the org's
+overrides (the foundation cascades per token; the theme file is the one you copy
+whole, see brand.md). Addresses: apps
 `unoverse://apps/<project>/<name>`, project components
 `unoverse://components/<project>/<name>`, themes `unoverse://theme/<project>/<theme>`.