@unoverse-platform/studio 0.1.23 → 0.1.25

package/package.json

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

package/screens/DesignSystemView.tsx

@@ -186,16 +186,23 @@ export function DesignSystemView({
       bucket: "space",
       body: (
         <div className="space-y-2 rounded-xl p-6" style={{ background: raised, border: `1px solid ${borderC}` }}>
-          {Object.entries(theme.space).map(([name, val]) => (
-            <div key={name} className="flex items-center gap-4">
-              <div className="w-20 shrink-0 text-[11px]" style={{ color: sub }}>
-                {name}
-                {isOverride("space", name) && <OverrideMark />}
+          {/* BY SIZE, not by load order. The scale is assembled from several token files
+              (the foundation's, then the org's), so `Object.entries` listed 1.5 after 200
+              and every later addition below that: a scale that reads as an unordered pile
+              rather than a scale. Sorting here is a DISPLAY concern; the token files stay
+              as they are. */}
+          {Object.entries(theme.space)
+            .sort(([, a], [, b]) => parseFloat(String(a)) - parseFloat(String(b)))
+            .map(([name, val]) => (
+              <div key={name} className="flex items-center gap-4">
+                <div className="w-20 shrink-0 text-[11px]" style={{ color: sub }}>
+                  {name}
+                  {isOverride("space", name) && <OverrideMark />}
+                </div>
+                <div className="h-3 rounded" style={{ width: val, background: accent }} />
+                <div className="text-[10px]" style={{ color: sub }}>{val}</div>
               </div>
-              <div className="h-3 rounded" style={{ width: val, background: accent }} />
-              <div className="text-[10px]" style={{ color: sub }}>{val}</div>
-            </div>
-          ))}
+            ))}
         </div>
       ),
     },

package/screens/TemplatesView.tsx

@@ -41,16 +41,18 @@ const chatIdFor = (app: string) => `demo-${app.toLowerCase()}-${SESSION_NONCE}`;
 // it opens the Gravity data plane (WS component stream + REST execute) against the
 // configured server/workflow/node; in MOCK mode it seeds a fake conversation.
 // These are editable in the toolbar (LIVE mode) and persisted across refreshes.
-// Dev workbench serves /api + /ws/gravity + /stream on the merged uWS at :4205
-// (the retired gateway was :4100). Prod uses the page origin.
-const CONN_DEFAULTS = { server: "localhost:4205", workflowId: "wf-r4jzo7", triggerNode: "inputtrigger1", token: "" };
+// The dev universe serves /mcp + /api + /ws/gravity + /stream on the merged uWS at
+// :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";
 
 function loadConn(): typeof CONN_DEFAULTS {
   try {
     const saved = JSON.parse(localStorage.getItem(CONN_KEY) ?? "{}");
-    // Migration: drop the retired gateway port so the new default applies.
-    if (saved.server === "localhost:4100") delete saved.server;
+    // 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 };
   } catch {
     return { ...CONN_DEFAULTS };

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

@@ -175,6 +175,10 @@ export interface ResolvedTheme {
   radius: Record<string, string>;
   shadow: Record<string, string>;
   borderWidth: Record<string, string>;
+  /** Font weights (theme.weight ← font.weight.*) — SERVED, like every other token. The
+   *  SDK held these as a literal four-name map, so a weight an org defined in its own
+   *  tokens was unreachable and rendered as nothing at all. */
+  weight: Record<string, string | number>;
   /** Line-height tokens (theme.lineHeight ← font.lineHeight) — tight/snug/normal/relaxed. */
   lineHeight: Record<string, string | number>;
   text: Record<string, Record<string, string | number>>;
@@ -184,6 +188,12 @@ export interface ResolvedTheme {
    *  width blocks `appWidth` references ("chat"/"rail"/"panel" → raw host-facing CSS).
    *  Resolved by the SDK like every other token — one pipeline. */
   appSize?: Record<string, string>;
+  /** Grid behaviour (theme.grid ← rx/styles/semantic/grid) — `stackBelow`, the width
+   *  at which a columns grid stacks. Served: the SDK holds no threshold of its own. */
+  grid?: Record<string, string>;
+  /** PAGE WIDTHS by name (theme.layout ← rx/styles/semantic/layout) — resolved by `dim()`
+   *  alongside the space scale, so `maxWidth: "reading"` works like any dimension. */
+  layout?: Record<string, string>;
   /** Named keyframes (theme.keyframes ← rx/styles/semantic/keyframes.json), injected
    *  once per render root. Lets any definition animate via `style.animation` — no SDK edit. */
   keyframes: Record<string, Record<string, Record<string, string>>>;

package/vendor/sdk/lib/primitives.tsx

@@ -92,17 +92,37 @@ function nodeChrome(node: UnoverseNode, data: Record<string, unknown>, theme: Re
   // the COMPONENT (not the viewport) is mobile-width. Correct for SDUI: a component reacts to
   // its slot, not the page. Generic vocab, value served; the SDK authors none.
   if (s?.hideBelow) {
-    const w = theme.space[s.hideBelow as string] ?? (s.hideBelow as string);
+    const w = theme.space[s.hideBelow as string] ?? theme.layout?.[s.hideBelow as string] ?? (s.hideBelow as string);
     const cls = `uno-hidebelow-${hashStr(String(w))}`;
     classes.push(cls);
     styleEls.push(<style key="hideBelow">{`@container (max-width:${w}){.${cls}{display:none !important}}`}</style>);
   }
+  // `span` STACKS. A child covering several of its grid's columns must give that up when
+  // the grid runs out of room, or four quarter-width cards keep being quarters in a 300px
+  // rail and the content is crushed. Below the threshold every spanning child takes the
+  // whole row (`1 / -1`), which IS the stack: one per row, full width, in source order.
+  //
+  // The query targets the GRID (style.ts marks it `container-type: inline-size`), so this
+  // reacts to the space the grid actually has, not the viewport. A component in a narrow
+  // panel on a wide screen stacks correctly, which a viewport breakpoint cannot do.
+  //
+  // The threshold is SERVED (`theme.grid.stackBelow`), overridable per grid with
+  // `style.stackBelow`. The SDK holds no width of its own.
+  if (s?.span) {
+    const raw = (s.stackBelow as string) ?? theme.grid?.stackBelow ?? "";
+    const w = theme.space[raw] ?? theme.layout?.[raw] ?? raw;
+    if (w) {
+      const cls = `uno-stack-${hashStr(String(w))}`;
+      classes.push(cls);
+      styleEls.push(<style key="span-stack">{`@container (max-width:${w}){.${cls}{grid-column:1 / -1 !important}}`}</style>);
+    }
+  }
   // `hideAbove` — the mirror: hide when the container is WIDER than the width. Together
   // these are the whole layout-switch mechanism for space-responsive components: the
   // compact layout carries hideAbove, the full layout hideBelow, and the container's
   // width (granted by the template's surface) picks the rendering — never a state key.
   if (s?.hideAbove) {
-    const w = theme.space[s.hideAbove as string] ?? (s.hideAbove as string);
+    const w = theme.space[s.hideAbove as string] ?? theme.layout?.[s.hideAbove as string] ?? (s.hideAbove as string);
     const cls = `uno-hideabove-${hashStr(String(w))}`;
     classes.push(cls);
     styleEls.push(<style key="hideAbove">{`@container (min-width:${w}){.${cls}{display:none !important}}`}</style>);
@@ -430,11 +450,60 @@ export function InputView({ node, data, theme, onAction }: { node: UnoverseNode;
   const field = node.bind?.value;
   const [local, setLocal] = useState("");
   const value = field != null ? String(data[field] ?? "") : local;
+  // GENERIC constraints on what the field ACCEPTS — the same class of fact as
+  // `multiline`/`rows`, never a layout and never a named UX. `maxLength` caps the
+  // length; `inputMode: "numeric"` asks the platform for a digit keypad AND limits
+  // the value to 0-9. An OTP box is `maxLength: 1` + `inputMode: "numeric"` in a
+  // DEFINITION — the SDK knows nothing about OTP, verification, or six boxes.
+  const maxLength = (node as { maxLength?: number }).maxLength;
+  const numeric = (node as { inputMode?: string }).inputMode === "numeric";
+  // `autoComplete` — the browser's autofill hint, passed straight through. Without one,
+  // Chrome GUESSES from shape: a row of short numeric boxes reads as a card/ID number and
+  // it offers to save the digits. The definition says what the field IS (a one-time code,
+  // a postal code, "off") and the guess never happens. Generic pass-through: the SDK holds
+  // no list of values and no idea what a one-time code is.
+  const autoComplete = (node as { autoComplete?: string }).autoComplete;
+  // `maxLength` is enforced by the element itself, but `inputMode` is only a HINT —
+  // a desktop keyboard types straight past it — so the digit rule is applied here.
+  const accept = (t: string) => {
+    const kept = numeric ? t.replace(/[^0-9]/g, "") : t;
+    return maxLength != null ? kept.slice(0, maxLength) : kept;
+  };
+  // CONTROLLED: report the change as an "input" event carrying WHICH field changed.
+  // The component dispatcher writes that field into this instance's slice (local two-way
+  // binding, §2e-3); the template composer's channel reads `text` and ignores `field`
+  // (its bound field is the shared `draft`). The SDK authors no UX — just the fact.
+  // `advanceOnFill` — when this field is FULL, focus moves to the next field that opted
+  // in; Backspace in an empty one moves back. A generic fact about a field that is one
+  // of a SEQUENCE, opted into per field so an ordinary `maxLength` text box never yanks
+  // focus away the moment it fills. The SDK still knows nothing about codes or six boxes:
+  // it walks the marked peers in document order and moves focus one step.
+  const advanceOnFill = (node as { advanceOnFill?: boolean }).advanceOnFill === true;
+  const el = useRef<HTMLInputElement>(null);
+  const stepFocus = (dir: 1 | -1) => {
+    const self = el.current;
+    if (!self) return;
+    // Scope the walk to this render's ROOT — the SDK renders inside a shadow root, so
+    // `document` would miss the peers entirely (and, on a page with two instances,
+    // could reach the wrong ones).
+    const root = self.getRootNode() as Document | ShadowRoot;
+    const peers = Array.from(root.querySelectorAll<HTMLInputElement>("input[data-uno-advance]"));
+    const next = peers[peers.indexOf(self) + dir];
+    if (!next) return;
+    next.focus();
+    next.select();
+  };
   // CONTROLLED: report the change as an "input" event carrying WHICH field changed.
   // The component dispatcher writes that field into this instance's slice (local two-way
   // binding, §2e-3); the template composer's channel reads `text` and ignores `field`
   // (its bound field is the shared `draft`). The SDK authors no UX — just the fact.
-  const setValue = (t: string) => (field != null ? onAction?.("input", { text: t, field }) : setLocal(t));
+  const setValue = (raw: string) => {
+    const t = accept(raw);
+    // Move BEFORE the store round-trip: focus is DOM state, independent of the re-render,
+    // so a fast typist's next keystroke lands in the next field rather than this one.
+    if (advanceOnFill && maxLength != null && t.length >= maxLength) stepFocus(1);
+    return field != null ? onAction?.("input", { text: t, field }) : setLocal(t);
+  };
   const submit = () => {
     const t = value.trim();
     if (!t) return;
@@ -452,6 +521,7 @@ export function InputView({ node, data, theme, onAction }: { node: UnoverseNode;
         disabled={disabled}
         value={value}
         placeholder={node.placeholder}
+        maxLength={maxLength}
         rows={(node as { rows?: number }).rows ?? 3}
         onChange={(e) => setValue(e.target.value)}
         onKeyDown={(e) => {
@@ -465,12 +535,24 @@ export function InputView({ node, data, theme, onAction }: { node: UnoverseNode;
   }
   return (
     <input
+      ref={el}
       style={style}
       disabled={disabled}
       value={value}
       placeholder={node.placeholder}
+      maxLength={maxLength}
+      inputMode={numeric ? "numeric" : undefined}
+      autoComplete={autoComplete}
+      data-uno-advance={advanceOnFill ? "" : undefined}
       onChange={(e) => setValue(e.target.value)}
       onKeyDown={(e) => {
+        // Backspace in an ALREADY-empty field steps back, so correcting a sequence never
+        // needs the mouse. A field with content just deletes it (the default).
+        if (advanceOnFill && e.key === "Backspace" && value === "") {
+          e.preventDefault();
+          stepFocus(-1);
+          return;
+        }
         if (e.key === "Enter" && !e.shiftKey) {
           e.preventDefault();
           submit();

package/vendor/sdk/lib/style.ts

@@ -7,7 +7,6 @@
 import type { CSSProperties } from "react";
 import { resolveValue, matches, type ResolvedTheme, type StyleVariant } from "./core";
 
-const WEIGHTS: Record<string, number> = { normal: 400, medium: 500, semibold: 600, bold: 700 };
 
 // Resolution cache: style objects come from CACHED definitions, so they are
 // referentially stable across renders — resolving the same (style, theme) pair per
@@ -76,7 +75,10 @@ function computeCss(s: Record<string, unknown>, theme: ResolvedTheme, data?: Rec
   const space = (v: string) => theme.space[v] ?? v;
   // Resolve a dimension: a `space.*` scale step (e.g. "8" → 2rem) → its value; `full` → 100%;
   // else pass through. ONE scale for spacing AND element sizes (Tailwind-style w-5/p-5).
-  const dim = (v: unknown) => theme.space[v as string] ?? (v === "full" ? "100%" : (v as CSSProperties["width"]));
+  // A dimension is a scale step ("8") OR a named PAGE WIDTH ("reading"). Both live on
+  // the same scale — `layout.*` are aliases onto it — so one lookup order covers both.
+  const dim = (v: unknown) =>
+    theme.space[v as string] ?? theme.layout?.[v as string] ?? (v === "full" ? "100%" : (v as CSSProperties["width"]));
 
   if (s.width != null) css.width = dim(s.width);
   if (s.height != null) css.height = dim(s.height);
@@ -114,12 +116,23 @@ function computeCss(s: Record<string, unknown>, theme: ResolvedTheme, data?: Rec
   if (s.columns) {
     css.display = "grid";
     css.gridTemplateColumns = `repeat(${s.columns}, minmax(0, 1fr))`;
+    // THE GRID IS ITS OWN CONTAINER, so a child's `span` can collapse against the grid's
+    // width rather than the page's. A grid cannot query itself, but its children can query
+    // it — which is exactly the direction the stacking rule runs (primitives.tsx). Without
+    // this a grid would need a `container` ancestor to stack, and would silently not stack
+    // wherever one was missing.
+    (css as Record<string, unknown>).containerType = "inline-size";
     // Pack rows at the top. Without this, a columns-grid inside a flex:1 panel
     // inherits CSS's default align-content:stretch and distributes the panel's
     // leftover height BETWEEN rows — the phantom vertical gap between card rows.
     css.alignContent = "start";
   }
   if (s.cursor) css.cursor = s.cursor as CSSProperties["cursor"];
+  // `span` — how many of the parent grid's columns this child covers: on a 12-column
+  // grid, 6 is a half and 3 is a quarter. The grid owns the gaps, so spans never overflow
+  // the way percentage widths in a flex row do. Below the stacking width the child takes
+  // the full row instead (the rule injected in primitives.tsx).
+  if (s.span) css.gridColumn = `span ${s.span}`;
   if (s.align) css.alignItems = s.align === "start" ? "flex-start" : (s.align as CSSProperties["alignItems"]);
   if (s.justify) css.justifyContent = s.justify as CSSProperties["justifyContent"];
   // Explicit text alignment (inherited by children) — needed because a Button's
@@ -168,7 +181,12 @@ function computeCss(s: Record<string, unknown>, theme: ResolvedTheme, data?: Rec
   if (s.overflow) css.overflow = s.overflow as CSSProperties["overflow"];
   if (s.fit) css.objectFit = s.fit as CSSProperties["objectFit"];
   if (s.font && theme.text[s.font as string]) Object.assign(css, theme.text[s.font as string]);
-  if (s.weight) css.fontWeight = WEIGHTS[s.weight as string] ?? (s.weight as CSSProperties["fontWeight"]);
+  // `weight` — a SERVED token like every other value here. This was the one scale the
+  // SDK owned outright: a literal four-name map, which meant the foundation's own
+  // `light`/`black` were unreachable and an org that added a weight to its tokens got
+  // nothing at all (the unknown word reached CSS, CSS dropped the declaration, and the
+  // text kept whatever it inherited — silently). A raw number still passes through.
+  if (s.weight) css.fontWeight = (theme.weight[s.weight as string] ?? s.weight) as CSSProperties["fontWeight"];
   // `lineHeight` — override the text style's line-height (e.g. tighten a single-line
   // card title). Applied AFTER `font` so it wins. Resolves a lineHeight token (tight/…).
   if (s.lineHeight != null) css.lineHeight = (theme.lineHeight[s.lineHeight as string] ?? s.lineHeight) as CSSProperties["lineHeight"];

package/vendor/sdk/main.tsx

@@ -12,6 +12,12 @@ type HostConfig = Omit<AppConfig, "getAccessToken"> & { token?: string };
 let root: Root | null = null;
 let current: HostConfig | null = null;
 
+// Stable identity, module-level: the connection hook keys its lifecycle on the
+// `getAccessToken` reference (connection.tsx effect deps), and the host re-posts
+// config on every iframe load — an inline closure here would recycle the live
+// /stream session on each repost.
+const readToken = () => current?.token ?? null;
+
 function render() {
   if (!current) return;
   const el = document.getElementById("root")!;
@@ -23,15 +29,21 @@ function render() {
       templateId={current.templateId}
       userId={current.userId}
       conversationId={current.conversationId}
-      getAccessToken={() => current?.token ?? null}
+      // Only claim auth when the host actually sent a token. A fabricated accessor on a
+      // tokenless boot made the SDK skip its guest-id substitution (connection.tsx), so
+      // the session registered a non-guest id and the public-entry gate refused it.
+      // No token ⇒ no accessor ⇒ the SDK mints/persists `guest-<uuid>` per the contract
+      // (UNOVERSE_MCP_TEMPLATE_PROTOCOL §5, AUTH_TOKEN_FLOW Run Authorization).
+      getAccessToken={current.token ? readToken : undefined}
     />,
   );
 }
 
 function apply(cfg: HostConfig) {
-  const first = !current;
   current = { ...current, ...cfg };
-  if (first) render(); // mount once; token refresh just updates `current` (getAccessToken reads it)
+  // Re-render on every apply so a token appearing/disappearing takes effect; a same-token
+  // refresh changes nothing (readToken is stable, values equal), so no connection churn.
+  render();
 }
 
 declare global {