@unoverse-platform/studio 0.1.24 → 0.1.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unoverse-platform/studio",
-  "version": "0.1.24",
+  "version": "0.1.26",
   "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/SourceView.tsx

@@ -432,7 +432,7 @@ export function SourceView({
         /**
          * TWO FILE SHAPES, TWO WAYS IN.
          *
-         * An ENVELOPE (`coursecard.yaml`) holds its tree under `root:`, and that tree IS
+         * An ENVELOPE (`course-card.yaml`) holds its tree under `root:`, and that tree IS
          * the composed root, so the file path maps by dropping one level. A PARTIAL (a
          * layout) is a bare node included somewhere inside the composed tree, so it has to
          * be found first. Treating everything as a partial meant an envelope never matched

package/screens/TemplatesView.tsx

@@ -112,7 +112,7 @@ interface Def {
     autoTrigger?: boolean;
     default?: boolean;
     inputSchema?: Record<string, unknown>;
-    // Per-STATE mock seeding: `{ "<state>": ["coursecard", "coursecard"] }` — the
+    // Per-STATE mock seeding: `{ "<state>": ["course-card", "course-card"] }` — the
     // author decides what each state's preview shows (a repeated name = several
     // instances). Supersedes the legacy flat `previewComponents`.
     // Per-state mock: an ARRAY seeds components; an OBJECT is authored template-state
@@ -468,7 +468,7 @@ export function TemplatesView({
   // what a real arrival-in-focus or a component's own expand button would do.
   function seed(comps: Def[]) {
     // nodeId is per-INSTANCE (`name-i`), so previewComponents may repeat a name to
-    // seed several instances — e.g. ["coursecard", "coursecard"] previews a rail of cards.
+    // seed several instances — e.g. ["course-card", "course-card"] previews a rail of cards.
     comps.forEach((c, i) =>
       store.apply({
         type: "COMPONENT_INIT",

package/src/PublishDialog.tsx

@@ -122,7 +122,7 @@ export function PublishDialog({
    * own status, and the statuses sort so the ones that will move sit at the top.
    *
    * The kind is singular here, because a row is one thing. `bpp` is a style set and
-   * `bppchatlayout` is an app; without that word they read as five apps, which is how a
+   * `bpp-chat-layout` is an app; without that word they read as five apps, which is how a
    * developer concludes their components were never collected when they were.
    */
   const KIND_LABEL: Record<string, string> = {

package/vendor/sdk/appEngine.tsx

@@ -17,6 +17,9 @@ import {
   useUnoverseTheme,
   computeAppWidth,
   resolveActiveLayout,
+  setAnalyticsSink,
+  setAnalyticsContext,
+  setAnalyticsDebug,
   type UseVoiceServiceConfig,
 } from "./lib";
 
@@ -27,10 +30,17 @@ export interface AppConfig {
   getAccessToken?: () => Promise<string | null> | string | null;
   userId?: string;
   conversationId: string;
+  /** Where this app is running, reported on every analytics event
+   *  (UNOVERSE_ANALYTICS.md §surfaces). Host-supplied: the app cannot know which frame
+   *  it was placed in. */
+  surface?: string;
+  /** Log each analytics event as it fires. Server-delivered with the rest of the tenant
+   *  config, never a client-side flag someone can turn on against a live site. */
+  analyticsDebug?: boolean;
 }
 
 export function AppEngine(cfg: AppConfig) {
-  const { serverUrl, apiUrl, templateId, getAccessToken, userId, conversationId } = cfg;
+  const { serverUrl, apiUrl, templateId, getAccessToken, userId, conversationId, surface, analyticsDebug } = cfg;
 
   const store = useMemo(() => new ComponentStore(), []);
   const client = useMemo(
@@ -80,6 +90,21 @@ export function AppEngine(cfg: AppConfig) {
   // inbound `unoverse:config` channel), re-reporting whenever a panel surface opens or
   // closes: the app grows by the panel's declared width, then shrinks back. The host
   // animates the resize. Only posts on an ACTUAL width change (guard).
+  // ANALYTICS (UNOVERSE_ANALYTICS.md). The SDK produces events and knows no destination;
+  // this is the pipe out. Events cross to the HOST REALM, where the page's own analytics
+  // tag lives with the visitor's cookie and consent state already resolved — which is the
+  // whole reason measurement runs client-side rather than from a server that cannot read
+  // either. With no parent (a first-party page, an MCP app host) the post is a silent
+  // no-op, so a surface with nothing to report to costs nothing.
+  useEffect(() => {
+    setAnalyticsDebug(!!analyticsDebug);
+    setAnalyticsContext({ surface, conversation_id: conversationId, user_id: userId });
+    setAnalyticsSink((event) => {
+      window.parent?.postMessage({ type: "unoverse:event", ...event }, "*");
+    });
+    return () => setAnalyticsSink(null);
+  }, [surface, conversationId, userId, analyticsDebug]);
+
   useEffect(() => {
     const report = () => {
       // NAME-SYNC: width is computed off the ACTIVE layout (multi-layout templates

package/vendor/sdk/lib/UnoverseComponent.tsx

@@ -38,7 +38,7 @@ export function useUnoverseInstance(store?: ComponentStore, chatId = "", nodeId
 
 export interface UnoverseComponentProps {
   client: UnoverseClient;
-  /** STATIC source: the definition to render, e.g. "unoverse://components/Card". */
+  /** STATIC source: the definition to render, e.g. "unoverse://components/card". */
   uri?: string;
   /** STATIC source: instance data bound into the definition. */
   data?: Record<string, unknown>;

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

@@ -9,6 +9,7 @@
  * `{{binding}}` resolution, an optional chained `then`, and a hard split between
  * LOCAL `setValue` and a server route for anything computed/transactional.
  */
+import { emitAnalytics, resolveAnalyticsParams } from "./analytics";
 import type { ComponentStore } from "./store";
 import type { ActionSpec } from "./types";
 
@@ -44,6 +45,15 @@ export function dispatchAction(
   if (action == null) return;
   const spec: ActionSpec = typeof action === "string" ? { type: action } : action;
 
+  // ANALYTICS FIRST, and unconditionally. Reporting must not depend on what the action
+  // then does, nor on it succeeding: an interaction that happened is news whether or not
+  // the write, the route or the chained `then` works out. This is also why it is here and
+  // not in a leaf — one interpreter sees every interaction, so an event cannot be missed
+  // by an author writing an unusual definition.
+  if (spec.analytics?.event) {
+    emitAnalytics(spec.analytics.event, resolveAnalyticsParams(spec.analytics, scope, resolveValue));
+  }
+
   if (spec.type === "setValue") {
     // Write the dev's chosen keys into THIS COMPONENT's OWN slice (chatId:nodeId) — its own
     // view state: tab / edit / wizard-step / displayState / anything. Read back via

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

@@ -0,0 +1,89 @@
+/**
+ * Experience analytics — the emit side (docs/unoverse/UNOVERSE_ANALYTICS.md).
+ *
+ * The SDK produces events and knows NOTHING about where they go. No GA, no gtag, no
+ * dataLayer, no vendor of any kind appears here. A host registers a sink; without one
+ * every emit is a no-op, which is what makes a preview, a test, or an MCP app host with
+ * no page to report to cost nothing.
+ *
+ * Events are NEWS, never instruction: nothing downstream may branch on one. The trigger
+ * originates in a browser the visitor controls, so a path that could act on an event
+ * would be a path a visitor could drive.
+ */
+
+import type { AnalyticsSpec } from "./types";
+
+/** What a sink receives. `context` is the platform's own vocabulary, kept separate from
+ *  the author's `params` so the two can never collide on a key. */
+export interface AnalyticsEvent {
+  event: string;
+  params: Record<string, unknown>;
+  context: AnalyticsContext;
+}
+
+export interface AnalyticsContext {
+  /** Where this is running: `unoverse_assistant` | `unoverse_client` | `mcp_app_host`. */
+  surface?: string;
+  /** The journey key. The SAME id the chat, the session and agent memory use. */
+  conversation_id?: string;
+  user_id?: string;
+}
+
+export type AnalyticsSink = (event: AnalyticsEvent) => void;
+
+let sink: AnalyticsSink | null = null;
+let context: AnalyticsContext = {};
+let debug = false;
+
+/** Registered by the host (the channel), which owns identity and the destination.
+ *  Passing null removes it, so a torn-down host stops receiving. */
+export function setAnalyticsSink(next: AnalyticsSink | null): void {
+  sink = next;
+}
+
+/** Session facts, supplied once by the channel. The SDK never invents them. */
+export function setAnalyticsContext(next: AnalyticsContext): void {
+  context = { ...context, ...next };
+}
+
+/** Server-delivered, never a client-side flag: log each event as it fires. */
+export function setAnalyticsDebug(next: boolean): void {
+  debug = next;
+}
+
+/**
+ * Emit one event. Failure is SILENT and CLOSED: a throwing sink never breaks a render
+ * and never blocks the interaction that produced it.
+ */
+export function emitAnalytics(event: string, params?: Record<string, unknown>): void {
+  if (!event) return;
+  const payload: AnalyticsEvent = { event, params: params ?? {}, context: { ...context } };
+  // Matches the platform's existing log convention (`[unoverse:lifecycle] …`), so one
+  // console filter catches it among a host page's own noise.
+  if (debug) console.log(`[unoverse:analytics] ${event}`, payload.params, payload.context);
+  if (!sink) return;
+  try {
+    sink(payload);
+  } catch (err) {
+    console.warn(`[unoverse:analytics] sink failed for ${event}: ${(err as Error)?.message ?? err}`);
+  }
+}
+
+/**
+ * Resolve a declared `params` block against the data scope at the interaction site,
+ * using the SAME `{{path}}` binding an action's values already use. Keys resolving to
+ * `undefined` are dropped rather than sent as empty, so an absent field is absent in the
+ * report instead of arriving as a misleading blank.
+ */
+export function resolveAnalyticsParams(
+  spec: AnalyticsSpec | undefined,
+  scope: Record<string, unknown>,
+  resolve: (value: unknown, scope: Record<string, unknown>) => unknown,
+): Record<string, unknown> {
+  const out: Record<string, unknown> = {};
+  for (const [key, value] of Object.entries(spec?.params ?? {})) {
+    const v = resolve(value, scope);
+    if (v !== undefined && v !== null && v !== "") out[key] = v;
+  }
+  return out;
+}

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

@@ -114,7 +114,7 @@ export class UnoverseClient {
     return this.withSession(() => this.client.callTool({ name, arguments: args }));
   }
 
-  /** resources/read a definition by URI (e.g. unoverse://components/Card). Cached. */
+  /** resources/read a definition by URI (e.g. unoverse://components/card). Cached. */
   async readDefinition(uri: string): Promise<UnoverseDefinition> {
     const cached = this.cache.get(uri);
     if (cached) return cached;

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

@@ -28,5 +28,17 @@ export {
 // The action interpreter (§2e-3) — local `setValue` store write + server route.
 export { dispatchAction, resolveValue, type ActionContext } from "./actions";
 
+// Experience analytics (UNOVERSE_ANALYTICS.md) — the SDK emits; the host decides where to.
+export {
+  emitAnalytics,
+  setAnalyticsSink,
+  setAnalyticsContext,
+  setAnalyticsDebug,
+  resolveAnalyticsParams,
+  type AnalyticsEvent,
+  type AnalyticsContext,
+  type AnalyticsSink,
+} from "./analytics";
+
 // The shared "react to state" predicate (visibleWhen / Switch / style.when).
 export { matches, visible, selectCase } from "./conditions";

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

@@ -5,6 +5,17 @@
  * SHAPE (values live on the server). Pure types — no runtime, no imports.
  */
 
+/** Report an interaction to the host's analytics (UNOVERSE_ANALYTICS.md). Declared on a
+ *  node beside its `action`. The SDK produces the event and knows nothing about where it
+ *  goes: no vendor, no destination, no identity appears in this shape. */
+export interface AnalyticsSpec {
+  /** The event name. A GA4 standard name where one fits, else `unoverse_`-prefixed. */
+  event: string;
+  /** Sent with it. `{{path}}` resolves against the data scope at the interaction site,
+   *  the same binding an action's `values` already use. */
+  params?: Record<string, unknown>;
+}
+
 // ---- The neutral definition shape (mirrors apps/unoverse/definitions/*.json) ----
 
 export interface UnoverseNode {
@@ -13,6 +24,11 @@ export interface UnoverseNode {
   bind?: Record<string, string>; // target prop -> data field
   visibleWhen?: VisibleWhen; // render only when the condition holds (truthy field, or {field,eq/ne})
   action?: string | ActionSpec; // dispatched on interaction (bare string → server, or a setValue envelope)
+  /** Report this interaction to the host's analytics (UNOVERSE_ANALYTICS.md). Opt-in per
+   *  node: no block, no event. Sits beside `action` because each interaction carries its
+   *  own params, drawn from the data already in scope right here. The SDK only produces
+   *  the event; where it goes is the channel's business. */
+  analytics?: AnalyticsSpec;
   placeholder?: string; // Input: empty-field copy (content, not style)
   /** Box: keep the scroll pinned to the newest content — smooth-scroll to the end when
    *  content grows (new turn or streaming text), unless the user has scrolled up. Generic
@@ -136,6 +152,10 @@ export interface ActionSpec {
   values?: ActionValue[]; // setValue / setTemplateValue patches (the dev's chosen keys)
   send?: string[]; // server route: which scope fields to include (default: all)
   then?: ActionSpec | string; // optional chained follow-up
+  /** Carried here by the renderer, NOT authored on the action: a node declares
+   *  `analytics:` beside `action:`, and the leaf attaches it so the ONE interpreter
+   *  (`dispatchAction`) stays the only place an interaction is understood. */
+  analytics?: AnalyticsSpec;
 }
 
 /** A data condition, evaluated against the render data scope. Pick ONE test:
@@ -175,6 +195,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 +208,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/index.ts

@@ -30,6 +30,11 @@ export {
   matches,
   visible,
   selectCase,
+  emitAnalytics,
+  setAnalyticsSink,
+  setAnalyticsContext,
+  setAnalyticsDebug,
+  resolveAnalyticsParams,
 } from "./core";
 export type {
   ResolvedTheme,
@@ -56,4 +61,8 @@ export type {
   ServerWorkflowState,
   ServerTemplateData,
   ServerSessionReady,
+  AnalyticsSpec,
+  AnalyticsEvent,
+  AnalyticsContext,
+  AnalyticsSink,
 } from "./core";

package/vendor/sdk/lib/primitives.tsx

@@ -23,7 +23,7 @@ import { createElement, useEffect, useMemo, useRef, useState, type CSSProperties
 import Markdown from "markdown-to-jsx";
 import type { ResolvedTheme, UnoverseNode } from "./core";
 import { styleToCss, cssDecls } from "./style";
-import type { ActionHandler } from "./render";
+import { nodeAction, type ActionHandler } from "./render";
 
 /** Read a bound data field as a string (for Text/Image/Button content). */
 function bound(field: string | undefined, data: Record<string, unknown>): string | undefined {
@@ -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>);
@@ -312,7 +332,7 @@ export function ImageView({ node, data, theme }: { node: UnoverseNode; data: Rec
 export function ButtonView({ node, data, theme, onAction, children }: { node: UnoverseNode; data: Record<string, unknown>; theme: ResolvedTheme; onAction?: ActionHandler; children?: ReactNode }): ReactNode {
   const { className, styleEls, style, disabled } = nodeChrome(node, data, theme);
   return (
-    <button className={className} style={style} disabled={disabled} data-unoverse-id={inspectId(node)} onClick={() => onAction?.(node.action ?? "click", data)}>
+    <button className={className} style={style} disabled={disabled} data-unoverse-id={inspectId(node)} onClick={() => onAction?.(nodeAction(node, "click"), data)}>
       {styleEls}
       {node.children?.length ? children : bound(node.bind?.label, data)}
     </button>
@@ -430,15 +450,64 @@ 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;
-    onAction?.(node.action ?? "submit", { text: t });
+    onAction?.(nodeAction(node, "submit"), { text: t });
     if (field == null) setLocal("");
   };
   const { style, disabled } = nodeChrome(node, data, theme);
@@ -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/render.tsx

@@ -57,6 +57,22 @@ export interface ActionMeta {
 
 export type ActionHandler = (action: string | ActionSpec, data: Record<string, unknown>, meta?: ActionMeta) => void;
 
+/**
+ * A leaf's action, with the node's declared `analytics` attached (UNOVERSE_ANALYTICS.md).
+ *
+ * Authors write `analytics:` beside `action:` on the node, where the data it reports is
+ * already in scope. The two travel together from here so `dispatchAction` remains the ONE
+ * place an interaction is understood: leaves stay dumb, and no leaf can forget to report.
+ * A node with no `analytics` block passes its action through untouched, unallocated.
+ */
+export function nodeAction(node: UnoverseNode, fallback: string): string | ActionSpec {
+  const action = node.action ?? fallback;
+  if (!node.analytics?.event) return action;
+  return typeof action === "string"
+    ? { type: action, analytics: node.analytics }
+    : { ...action, analytics: node.analytics };
+}
+
 /**
  * Resolves a `ComponentSlot` node against the store (provided by the template
  * renderer). Returns the rendered leaves (or the slot's fallback). Components

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

@@ -29,6 +29,13 @@ function render() {
       templateId={current.templateId}
       userId={current.userId}
       conversationId={current.conversationId}
+      // ANALYTICS (UNOVERSE_ANALYTICS.md). Host-supplied: the same bundle boots inside a
+      // customer's page, our own client, and an MCP app host, and it cannot tell which
+      // from in here. A host that says nothing gets `mcp_app_host`, the one surface with
+      // no parent page to report to, so an unconfigured boot reports as the surface where
+      // events go nowhere rather than mislabelling itself as a customer embed.
+      surface={current.surface ?? "mcp_app_host"}
+      analyticsDebug={current.analyticsDebug}
       // 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.