@unoverse-platform/studio 0.1.41 → 0.1.42

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unoverse-platform/studio",
-  "version": "0.1.41",
+  "version": "0.1.42",
   "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/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>`.