viberoom 0.6.0 → 0.7.0

package/ui/avatars.js

@@ -2,7 +2,7 @@
 (() => {
   "use strict";
 
-  const tokens = () => globalThis.VIBEROOM_TOKENS.current.elements.participant;
+  const tokens = () => globalThis.VIBEROOM_TOKENS.active().elements.face;
 
   function hash(text) {
     let h = 2166136261;
@@ -52,25 +52,18 @@
 
   function avatarHtml(participant, size, options) {
     const opts = options || {};
+    const UI = globalThis.UI;
     const color = participant.color || tokens().avatarDefault;
     const s = size || 40;
     const emoji = participant.avatar;
-    const label = emoji ? emoji : initials(participant.name);
-    const fontSize = Math.round(emoji ? s * 0.56 : s * 0.38);
-    const radius = Math.round(s * 0.32);
-    const svg = `<span class="av-tile" role="img" aria-label="${escapeAttr(participant.name)}" style="background:color-mix(in srgb, ${escapeAttr(color)} 16%, ${tokens().avatarBlend});color:${escapeAttr(color)};font-size:${fontSize}px;border-radius:${radius}px">${escapeText(label)}</span>`;
-    const status = opts.status ? `<span class="avatar-status status-${escapeAttr(participant.status || "idle")}"></span>` : "";
-    let badge = "";
+    let badge = null;
     if (opts.vendor && participant.kind === "agent") {
       const recipe = opts.recipes ? opts.recipes.find((r) => r.id === participant.agentType) : null;
-      const letter = escapeText((participant.agentVendor || participant.agentType || "?").slice(0, 1).toUpperCase());
-      const title = escapeAttr(participant.agentLabel || participant.agentType || "");
-      badge = recipe && recipe.icon
-        ? `<span class="avatar-badge" title="${title}"><img src="${escapeAttr(recipe.icon)}" alt="" onerror="this.replaceWith(document.createTextNode('${letter}'))"></span>`
-        : `<span class="avatar-badge" title="${title}">${letter}</span>`;
+      badge = UI.raw(UI.html("logo-tile", { icon: recipe && recipe.icon ? recipe.icon : "", letter: (participant.agentVendor || participant.agentType || "?").slice(0, 1), size: "badge", title: participant.agentLabel || participant.agentType || "" }));
     }
-    if (opts.muted && participant.kind === "agent" && window.Icons) badge = `<span class="avatar-badge muted" title="muted: receives no prompts">${window.Icons.svg("mute")}</span>`;
-    return `<span class="avatar" style="width:${size}px;height:${size}px">${svg}${badge}${status}</span>`;
+    if (opts.muted && participant.kind === "agent") badge = UI.raw(UI.html("logo-tile", { glyph: "mute", size: "badge", tone: "muted", title: "muted: receives no prompts" }));
+    const status = opts.status === true ? participant.status || "idle" : typeof opts.status === "string" ? opts.status : undefined;
+    return UI.html("face", { name: participant.name, label: emoji ? emoji : initials(participant.name), emoji: !!emoji, color, size: s, badge, status, me: !!opts.me, kind: opts.kind || "tile", ring: !!opts.ring, dim: opts.dim, title: opts.title });
   }
 
   const GALLERY = [

package/ui/components.css

@@ -28,41 +28,41 @@
 [data-ui="button"][data-kind="danger"]:is(:hover, [data-state="hover"]):not(:disabled) { background: var(--btn-danger-hover-bg); color: var(--btn-danger-ink); }
 [data-ui="button"][data-kind="danger-solid"] { background: var(--btn-danger-ink); color: var(--btn-danger-solid-ink); box-shadow: var(--btn-danger-solid-shadow); }
 [data-ui="button"][data-kind="danger-solid"]:is(:hover, [data-state="hover"]):not(:disabled) { background: var(--btn-danger-solid-hover-bg); color: var(--btn-danger-solid-ink); }
-[data-ui="button"][data-kind="dark"] { background: var(--btn-dark-bg); color: var(--btn-dark-ink); border-radius: 7px; }
+[data-ui="button"][data-kind="dark"] { background: var(--btn-dark-bg); color: var(--btn-dark-ink); border-radius: calc(7px * var(--r-scale)); }
 [data-ui="button"][data-kind="dark"]:is(:hover, [data-state="hover"]):not(:disabled) { background: var(--btn-dark-hover-bg); color: var(--btn-dark-ink); }
 [data-ui="button"][data-kind="warn"] { background: transparent; color: var(--btn-warn-ink); letter-spacing: 0.02em; border-radius: var(--r-pill); }
 [data-ui="button"][data-kind="warn"]:is(:hover, [data-state="hover"]):not(:disabled) { background: var(--btn-warn-hover-bg); color: var(--btn-warn-ink); }
-[data-ui="button"][data-kind="inverse"] { background: var(--btn-inverse-bg); color: var(--btn-inverse-ink); border-radius: 10px; }
+[data-ui="button"][data-kind="inverse"] { background: var(--btn-inverse-bg); color: var(--btn-inverse-ink); border-radius: calc(10px * var(--r-scale)); }
 [data-ui="button"][data-kind="inverse"]:is(:hover, [data-state="hover"]):not(:disabled) { background: var(--btn-inverse-hover-bg); color: var(--btn-inverse-ink); }
 [data-ui="button"][data-kind="link"] { background: none; color: var(--btn-link-ink); height: auto; padding: 2px 0; border-radius: 0; }
 [data-ui="button"][data-kind="link"]:is(:hover, [data-state="hover"]):not(:disabled) { background: none; color: var(--btn-link-ink); text-decoration: underline; }
-[data-ui="button"][data-kind="ok"] { background: var(--btn-ok-bg); color: var(--btn-ok-ink); border-radius: 10px; }
+[data-ui="button"][data-kind="ok"] { background: var(--btn-ok-bg); color: var(--btn-ok-ink); border-radius: calc(10px * var(--r-scale)); }
 [data-ui="button"][data-kind="ok"]:is(:hover, [data-state="hover"]):not(:disabled) { background: var(--btn-ok-hover-bg); color: var(--btn-ok-ink); transform: translateY(-1px); }
-[data-ui="button"][data-kind="paper"] { background: var(--btn-paper-bg); color: var(--btn-paper-ink); border-radius: 10px; }
+[data-ui="button"][data-kind="paper"] { background: var(--btn-paper-bg); color: var(--btn-paper-ink); border-radius: calc(10px * var(--r-scale)); }
 [data-ui="button"][data-kind="paper"]:is(:hover, [data-state="hover"]):not(:disabled) { background: var(--btn-paper-hover-bg); color: var(--btn-paper-ink); transform: translateY(-1px); }
-[data-ui="button"][data-size="sm"] { height: var(--btn-h-sm); padding: 0 12px; font-size: var(--btn-fs-sm); border-radius: 10px; }
+[data-ui="button"][data-size="sm"] { height: var(--btn-h-sm); padding: 0 12px; font-size: var(--btn-fs-sm); border-radius: calc(10px * var(--r-scale)); }
 [data-ui="button"][data-size="sm"] .i { width: 15px; height: 15px; }
-[data-ui="button"][data-size="xs"] { height: var(--btn-h-xs); padding: 0 9px; font-size: var(--fs-xs); border-radius: 7px; }
+[data-ui="button"][data-size="xs"] { height: var(--btn-h-xs); padding: 0 9px; font-size: var(--fs-xs); border-radius: calc(7px * var(--r-scale)); }
 [data-ui="button"][data-size="xs"] .i { width: 13px; height: 13px; }
-[data-ui="button"][data-size="lg"] { height: var(--btn-h-lg); padding: 0 22px; font-size: var(--btn-fs-lg); border-radius: 14px; }
+[data-ui="button"][data-size="lg"] { height: var(--btn-h-lg); padding: 0 22px; font-size: var(--btn-fs-lg); border-radius: calc(14px * var(--r-scale)); }
 [data-ui="button"][data-size="cta"] { height: var(--btn-h-cta); border-radius: var(--r-md); font-size: var(--btn-fs-cta); padding: 0 18px; }
 [data-ui="button"][data-full] { width: 100%; }
 [data-ui="button"][data-pill] { border-radius: var(--r-pill); }
 [data-ui="button"][data-state="loading"] { position: relative; color: transparent !important; pointer-events: none; }
-[data-ui="button"][data-state="loading"]::after { content: ""; position: absolute; width: 15px; height: 15px; border-radius: 50%; border: 2px solid var(--btn-spinner-track); border-top-color: var(--btn-spinner-head); animation: spin 0.8s linear infinite; }
+[data-ui="button"][data-state="loading"]::after { content: ""; position: absolute; width: 15px; height: 15px; border-radius: calc(50% * var(--r-scale)); border: 2px solid var(--btn-spinner-track); border-top-color: var(--btn-spinner-head); animation: spin 0.8s linear infinite; }
 [data-ui="button"][data-state="loading"]:not([data-kind="primary"]):not([data-kind="danger-solid"])::after { border-color: var(--btn-spinner-track-quiet); border-top-color: var(--btn-spinner-head-quiet); }
-[data-ui="icon-button"] { width: var(--icon-button-size); height: var(--icon-button-size); border-radius: 12px; border: 0; background: transparent; color: var(--icon-button-ink); display: inline-flex; align-items: center; justify-content: center; padding: 0; flex: none; cursor: pointer; transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast) var(--ease-out); }
+[data-ui="icon-button"] { width: var(--icon-button-size); height: var(--icon-button-size); border-radius: calc(12px * var(--r-scale)); border: 0; background: transparent; color: var(--icon-button-ink); display: inline-flex; align-items: center; justify-content: center; padding: 0; flex: none; cursor: pointer; transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast) var(--ease-out); }
 [data-ui="icon-button"] .i { width: var(--icon-button-icon); height: var(--icon-button-icon); }
 [data-ui="icon-button"]:is(:hover, [data-state="hover"]):not(:disabled) { background: var(--icon-button-hover-bg); color: var(--icon-button-hover-ink); }
 [data-ui="icon-button"]:is(:active, [data-state="active"]):not(:disabled) { transform: translateY(1px); }
 [data-ui="icon-button"]:is(:disabled, [data-state="disabled"]) { opacity: var(--icon-button-disabled-opacity); cursor: default; }
-[data-ui="icon-button"][data-size="sm"] { width: var(--icon-button-size-sm); height: var(--icon-button-size-sm); border-radius: 10px; }
+[data-ui="icon-button"][data-size="sm"] { width: var(--icon-button-size-sm); height: var(--icon-button-size-sm); border-radius: calc(10px * var(--r-scale)); }
 [data-ui="icon-button"][data-size="sm"] .i { width: var(--icon-button-icon-sm); height: var(--icon-button-icon-sm); }
-[data-ui="icon-button"][data-kind="primary"] { width: var(--icon-button-size-primary); height: var(--icon-button-size-primary); border-radius: 14px; background: var(--grad-primary); color: var(--btn-on-primary); box-shadow: var(--shadow-primary); }
+[data-ui="icon-button"][data-kind="primary"] { width: var(--icon-button-size-primary); height: var(--icon-button-size-primary); border-radius: calc(14px * var(--r-scale)); background: var(--grad-primary); color: var(--btn-on-primary); box-shadow: var(--shadow-primary); }
 [data-ui="icon-button"][data-kind="primary"]:is(:hover, [data-state="hover"]):not(:disabled) { color: var(--btn-on-primary); background: var(--grad-primary); filter: brightness(1.05); }
 [data-ui="icon-button"][data-kind="danger"] { color: var(--btn-danger-ink); }
 [data-ui="icon-button"][data-kind="danger"]:is(:hover, [data-state="hover"]):not(:disabled) { background: var(--btn-danger-bg); color: var(--btn-danger-ink); }
-[data-ui="icon-button"][data-size="xs"] { width: var(--icon-button-size-xs); height: var(--icon-button-size-xs); border-radius: 6px; }
+[data-ui="icon-button"][data-size="xs"] { width: var(--icon-button-size-xs); height: var(--icon-button-size-xs); border-radius: calc(6px * var(--r-scale)); }
 [data-ui="icon-button"][data-size="xs"] .i { width: var(--icon-button-icon-xs); height: var(--icon-button-icon-xs); }
 [data-ui="icon-button"][data-kind="ghost"] { background: transparent; color: var(--icon-button-ghost-ink); }
 [data-ui="icon-button"][data-kind="inline"] { background: var(--icon-button-inline-bg); color: var(--icon-button-inline-ink); vertical-align: middle; position: relative; top: -1px; margin-left: 5px; }
@@ -73,7 +73,7 @@
 [data-ui="choice"][data-state="on"] { background: var(--choice-hover-bg); color: var(--choice-on-ink); border-color: var(--choice-on-border); }
 [data-ui="choice"][data-quiet] { color: var(--choice-quiet-ink); font-weight: 700; }
 [data-ui="badge"] { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); padding: 3px 10px; border-radius: var(--r-pill); background: var(--badge-bg); color: var(--badge-ink); font-weight: 800; white-space: nowrap; vertical-align: middle; }
-[data-ui="badge"] .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
+[data-ui="badge"] .dot { width: 6px; height: 6px; border-radius: calc(50% * var(--r-scale)); background: currentColor; }
 [data-ui="badge"][data-tone="ready"] { background: var(--st-ready); color: var(--st-ready-ink); }
 [data-ui="badge"][data-tone="waiting"] { background: var(--st-waiting); color: var(--st-waiting-ink); }
 [data-ui="badge"][data-tone="thinking"] { background: var(--st-thinking); color: var(--st-thinking-ink); }
@@ -93,7 +93,7 @@
 [data-ui="chip"][data-tone="waiting"] { background: var(--st-waiting); color: var(--st-waiting-ink); }
 [data-ui="chip"][data-button] { cursor: pointer; transition: background var(--t-fast); }
 [data-ui="chip"][data-button]:not([data-tone]):is(:hover, [data-state="hover"]) { background: var(--chip-hover-bg); }
-[data-ui="file-card"] { border-radius: 12px; overflow: hidden; background: var(--file-card-bg); box-shadow: var(--edge); }
+[data-ui="file-card"] { border-radius: calc(12px * var(--r-scale)); overflow: hidden; background: var(--file-card-bg); box-shadow: var(--edge); }
 [data-ui="file-card"] > .head { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--file-card-head-bg); color: var(--file-card-head-ink); font-size: var(--fs-xs); font-weight: 800; }
 [data-ui="file-card"] > .head .name { display: inline-flex; align-items: center; gap: 5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 [data-ui="file-card"] > .head .name .i { width: 13px; height: 13px; flex: none; }
@@ -103,13 +103,13 @@
 [data-ui="file-card"] > .body .code-view { border-radius: 0; max-height: 320px; }
 [data-ui="file-card"] > .body .note { margin: 8px 10px; color: var(--file-card-note-ink); font-size: var(--fs-sm); font-weight: 700; line-height: 1.45; }
 [data-ui="file-card"][data-kind="image"] > .body { padding: 8px 10px 10px; background: var(--file-card-image-body-bg); }
-[data-ui="file-card"][data-kind="image"] > .body img { display: block; margin: 0 auto; max-width: 100%; max-height: 420px; border-radius: 8px; cursor: zoom-in; background: var(--file-card-image-bg); }
+[data-ui="file-card"][data-kind="image"] > .body img { display: block; margin: 0 auto; max-width: 100%; max-height: 420px; border-radius: calc(8px * var(--r-scale)); cursor: zoom-in; background: var(--file-card-image-bg); }
 [data-ui="tool-call"] { display: inline-flex; flex-direction: column; max-width: 100%; min-width: 0; }
 [data-ui="tool-call"] > [data-ui="chip"]::after { content: "▾"; margin-left: auto; padding-left: 8px; opacity: 0.55; transition: transform var(--t-fast); }
 [data-ui="tool-call"][data-state="open"] { flex-basis: 100%; }
-[data-ui="tool-call"][data-state="open"] > [data-ui="chip"] { width: 100%; border-radius: 12px 12px 0 0; padding: 6px 12px; white-space: normal; }
+[data-ui="tool-call"][data-state="open"] > [data-ui="chip"] { width: 100%; border-radius: calc(12px * var(--r-scale)) calc(12px * var(--r-scale)) 0 0; padding: 6px 12px; white-space: normal; }
 [data-ui="tool-call"][data-state="open"] > [data-ui="chip"]::after { transform: rotate(180deg); }
-[data-ui="tool-call"] > .body { margin: 0; padding: 8px 10px 10px; background: var(--tool-call-body-bg); border: 2px solid var(--tool-call-pending-bg); border-top: 0; border-radius: 0 0 12px 12px; font-size: var(--tool-call-fs); max-height: 340px; overflow: auto; }
+[data-ui="tool-call"] > .body { margin: 0; padding: 8px 10px 10px; background: var(--tool-call-body-bg); border: 2px solid var(--tool-call-pending-bg); border-top: 0; border-radius: 0 0 calc(12px * var(--r-scale)) calc(12px * var(--r-scale)); font-size: var(--tool-call-fs); max-height: 340px; overflow: auto; }
 [data-ui="tool-call"][data-status="completed"] > .body { border-color: var(--tool-call-ready-bg); }
 [data-ui="tool-call"][data-status="failed"] > .body { border-color: var(--tool-call-error-bg); }
 [data-ui="tool-call"][data-status="in_progress"] > .body { border-color: var(--tool-call-thinking-bg); }
@@ -119,7 +119,7 @@
 [data-ui="tool-call"][data-status="failed"] .sec b { color: var(--tool-call-error-ink); }
 [data-ui="tool-call"][data-status="in_progress"] .sec b { color: var(--tool-call-thinking-ink); }
 [data-ui="tool-call"] .sec.quiet { color: var(--tool-call-quiet-ink); font-style: italic; }
-[data-ui="tool-call"] .sec pre { margin: 3px 0 0; padding: 6px 8px; border-radius: 8px; background: var(--tool-call-pre-bg); color: var(--tool-call-pre-ink); white-space: pre-wrap; word-break: break-word; font-size: var(--tool-call-pre-fs); line-height: 1.45; }
+[data-ui="tool-call"] .sec pre { margin: 3px 0 0; padding: 6px 8px; border-radius: calc(8px * var(--r-scale)); background: var(--tool-call-pre-bg); color: var(--tool-call-pre-ink); white-space: pre-wrap; word-break: break-word; font-size: var(--tool-call-pre-fs); line-height: 1.45; }
 [data-ui="tool-fold"] { flex-basis: 100%; min-width: 0; }
 [data-ui="tool-fold"] > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; font-size: var(--tool-fold-fs); font-weight: 800; color: var(--tool-fold-ink); background: var(--tool-fold-bg); border-radius: var(--r-pill); padding: 4px 12px; transition: background var(--t-fast), color var(--t-fast); }
 [data-ui="tool-fold"] > summary::-webkit-details-marker { display: none; }
@@ -129,12 +129,107 @@
 [data-ui="tool-fold"][open] > summary::after { transform: rotate(180deg); }
 [data-ui="tool-fold"] > summary .failed { color: var(--tool-fold-failed-ink); }
 [data-ui="tool-fold"] > .list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
-[data-ui="ask-card"] { background: var(--ask-card-bg); color: var(--ask-card-ink); border-radius: 12px; padding: 10px 12px; font-size: var(--ask-card-fs); font-weight: 600; }
+[data-ui="ask-card"] { background: var(--ask-card-bg); color: var(--ask-card-ink); border-radius: calc(12px * var(--r-scale)); padding: 10px 12px; font-size: var(--ask-card-fs); font-weight: 600; }
 [data-ui="ask-card"][data-state="resolved"] { opacity: var(--ask-card-resolved-opacity); }
 [data-ui="ask-card"] > .title .kind { font-size: var(--ask-card-kind-fs); color: var(--ask-card-quiet-ink); }
 [data-ui="ask-card"] > .input { margin: 6px 0; max-height: 160px; overflow: auto; font-size: var(--ask-card-input-fs); }
 [data-ui="ask-card"] > .choices { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
 [data-ui="ask-card"] > .choices .outcome { color: var(--ask-card-quiet-ink); font-size: var(--ask-card-outcome-fs); }
-[data-ui="reply-note"] { display: flex; align-items: flex-start; gap: 6px; font-size: var(--reply-note-fs); font-weight: 700; color: var(--reply-note-ink); background: var(--reply-note-bg); border-radius: 10px; padding: 5px 10px; }
-[data-ui="reply-note"] .i { width: 14px; height: 14px; flex: none; margin-top: 1px; }
+[data-ui="logo-tile"] { position: relative; display: inline-grid; place-items: center; width: var(--logo-tile-md); height: var(--logo-tile-md); flex: none; border-radius: calc(12px * var(--r-scale)); background: var(--logo-tile-bg); color: var(--logo-tile-ink); box-shadow: var(--shadow-tile); font-weight: 800; font-size: 14px; overflow: hidden; user-select: none; }
+[data-ui="logo-tile"] .mark { width: 60%; height: 60%; background: currentColor; -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat; }
+[data-ui="logo-tile"] .i { width: 66%; height: 66%; }
+[data-ui="logo-tile"][data-size="sm"] { width: var(--logo-tile-sm); height: var(--logo-tile-sm); border-radius: calc(10px * var(--r-scale)); font-size: 12px; }
+[data-ui="logo-tile"][data-size="lg"] { width: var(--logo-tile-lg); height: var(--logo-tile-lg); border-radius: calc(13px * var(--r-scale)); font-size: 16px; }
+[data-ui="logo-tile"][data-size="badge"] { width: 18px; height: 18px; min-width: 15px; min-height: 15px; box-sizing: border-box; border-radius: calc(6px * var(--r-scale)); background: var(--logo-tile-badge-bg); border: 2px solid var(--logo-tile-badge-border); color: var(--logo-tile-badge-ink); font-size: 9px; }
+[data-ui="logo-tile"][data-size="badge"] .mark { width: 72%; height: 72%; }
+[data-ui="logo-tile"][data-size="badge"] .i { width: 78%; height: 78%; }
+[data-ui="logo-tile"][data-tone="muted"] { background: var(--logo-tile-muted-bg); color: var(--logo-tile-muted-ink); border-color: var(--logo-tile-badge-border); }
+[data-ui="face"] { position: relative; display: inline-block; flex: none; }
+[data-ui="face"] .tile { display: grid; place-items: center; width: 100%; height: 100%; font-weight: 800; line-height: 1; font-family: var(--font); user-select: none; color: var(--face-color); background: color-mix(in srgb, var(--face-color) var(--face-tint), var(--face-paper)); border-radius: calc(var(--face-size) * var(--face-corner) * var(--r-scale)); }
+[data-ui="face"] > [data-ui="logo-tile"] { position: absolute; right: -4px; bottom: -4px; width: 44%; height: 44%; z-index: 2; }
+[data-ui="face"] .status { position: absolute; left: -3px; bottom: -3px; width: 12px; height: 12px; z-index: 2; border-radius: calc(50% * var(--r-scale)); border: 2px solid var(--face-ring); background: var(--face-dot-bg); }
+[data-ui="face"] .status[data-status="idle"] { background: var(--st-ready-dot); }
+[data-ui="face"] .status[data-status="thinking"] { background: var(--st-thinking-dot); animation: pulse 1.2s ease-in-out infinite; }
+[data-ui="face"] .status[data-status="writing"] { background: var(--st-writing-dot); animation: pulse 1.2s ease-in-out infinite; }
+[data-ui="face"] .status:is([data-status="offline"], [data-status="left"]) { background: var(--st-asleep-dot); }
+[data-ui="face"] .status[data-status="error"] { background: var(--st-error-dot); }
+[data-ui="face"] .status:is([data-status="starting"], [data-status="queued"]) { background: var(--st-waiting-dot); }
+[data-ui="face"] .status[data-status="unstaffed"] { background: var(--attention); }
+[data-ui="face"][data-me] .tile { box-shadow: 0 0 0 2px var(--face-ring), 0 0 0 4px var(--face-me-ring); }
+[data-ui="face"][data-ring] .tile { box-shadow: 0 0 0 2px var(--face-ring); }
+[data-ui="face"][data-dim="asleep"] .tile { filter: grayscale(0.6); opacity: 0.8; }
+[data-ui="face"][data-dim="unstaffed"] .tile { filter: grayscale(0.8); opacity: 0.55; }
+[data-ui="face"][data-kind="card"] .tile { background: var(--face-card-bg); border-radius: calc(26px * var(--r-scale)); box-shadow: var(--shadow-pop); }
+[data-ui="face"][data-kind="bare"] .tile { background: transparent; }
+[data-ui="room-mark"] { width: 44px; height: 44px; border-radius: calc(14px * var(--r-scale)); display: grid; place-content: center; color: var(--room-mark-ink); background: linear-gradient(var(--room-mark-grad-angle), hsl(var(--room-hue) var(--room-mark-grad-from)), hsl(var(--room-hue-2) var(--room-mark-grad-to))); font-weight: 800; font-size: 18px; flex: none; text-transform: uppercase; user-select: none; }
+[data-ui="room-mark"][data-size="lg"] { width: 52px; height: 52px; border-radius: calc(16px * var(--r-scale)); font-size: 22px; }
+[data-ui="room-mark"][data-kind="emoji"] { background: hsl(var(--room-hue) var(--room-mark-emoji)); font-size: 24px; text-transform: none; }
+[data-ui="room-mark"][data-kind="emoji"][data-size="lg"] { font-size: 28px; }
+[data-ui="room-mark"][data-kind="accent"] { background: var(--grad-primary); }
+[data-ui="room-mark"] .i { width: 22px; height: 22px; }
+[data-ui="unseen-line"] { display: flex; align-items: center; gap: 10px; margin: 4px 0; }
+[data-ui="unseen-line"] .line { flex: 1; height: var(--unseen-line-line-h); background: var(--unseen-line-line); opacity: var(--unseen-line-line-opacity); }
+[data-ui="unseen-line"] .label { color: var(--unseen-line-ink); background: var(--unseen-line-bg); border-radius: var(--r-pill); padding: 4px 12px; font-size: var(--fs-xs); font-weight: 800; white-space: nowrap; max-width: 70%; overflow: hidden; text-overflow: ellipsis; }
+[data-ui="number-field"] { position: relative; display: inline-flex; width: 100%; min-width: 0; vertical-align: middle; }
+[data-ui="number-field"] > input { flex: 1; min-width: 0; padding-right: calc(var(--number-field-step-w) + 10px) !important; appearance: textfield; -moz-appearance: textfield; }
+[data-ui="number-field"] > input::-webkit-inner-spin-button, [data-ui="number-field"] > input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
+[data-ui="number-field"] > .steps { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 1px; width: var(--number-field-step-w); }
+[data-ui="number-field"] > .steps > button { height: 14px; padding: 0; border: 0; background: transparent; color: var(--number-field-step-ink); cursor: pointer; border-radius: calc(5px * var(--r-scale)); display: grid; place-items: center; transition: background var(--t-fast), color var(--t-fast); }
+[data-ui="number-field"] > .steps > button::before { content: ""; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; }
+[data-ui="number-field"] > .steps > button[data-act="up"]::before { border-bottom: 5px solid currentColor; }
+[data-ui="number-field"] > .steps > button[data-act="down"]::before { border-top: 5px solid currentColor; }
+[data-ui="number-field"] > .steps > button:hover { background: var(--number-field-step-hover-bg); color: var(--number-field-step-hover-ink); }
+[data-ui="number-field"]:is([data-state="disabled"], :has(> input:disabled)) > .steps { opacity: 0.4; pointer-events: none; }
+[data-ui="adjust-row"] { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0; }
+[data-ui="adjust-row"] .what { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
+[data-ui="adjust-row"] .what .label { font-size: var(--fs-sm); font-weight: 800; color: var(--ink); }
+[data-ui="adjust-row"] .what .hint { font-size: var(--fs-xs); font-weight: 600; color: var(--adjust-row-hint-ink); margin: 0; }
+[data-ui="adjust-row"] .ctl { display: inline-flex; align-items: center; gap: 8px; flex: none; }
+[data-ui="adjust-row"][data-kind="colour"] .ctl > input[type="color"] { appearance: none; -webkit-appearance: none; width: 30px; height: 30px; min-width: 0; padding: 0; border: 2px solid var(--adjust-row-swatch-border); border-radius: calc(9px * var(--r-scale)); background: none; cursor: pointer; }
+[data-ui="adjust-row"][data-kind="colour"] .ctl > input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
+[data-ui="adjust-row"][data-kind="colour"] .ctl > input[type="color"]::-webkit-color-swatch { border: 0; border-radius: calc(6px * var(--r-scale)); }
+[data-ui="adjust-row"][data-kind="scale"] .ctl > input[type="range"] { width: 120px; height: auto; min-width: 0; padding: 0; border: 0; background: none; accent-color: var(--primary); cursor: pointer; }
+[data-ui="adjust-row"] .ctl .value { font-family: var(--mono); font-size: var(--fs-xs); font-weight: 700; color: var(--adjust-row-value-ink); min-width: 58px; text-align: right; white-space: nowrap; padding: 0; background: none; overflow-wrap: normal; }
+[data-ui="adjust-row"] .ctl .back { display: inline-grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: calc(8px * var(--r-scale)); background: transparent; color: var(--adjust-row-back-ink); cursor: pointer; visibility: hidden; }
+[data-ui="adjust-row"] .ctl .back .i { width: 14px; height: 14px; }
+[data-ui="adjust-row"] .ctl .back:hover { background: var(--adjust-row-back-hover-bg); color: var(--ink); }
+[data-ui="adjust-row"][data-state="changed"] .ctl .back { visibility: visible; }
+[data-ui="adjust-row"][data-state="changed"] .ctl .value { color: var(--adjust-row-changed-ink); }
+[data-look="terminal"] [data-ui="button"] { border: 1px solid currentColor; text-transform: uppercase; letter-spacing: 0.06em; }
+[data-look="terminal"] [data-ui="button"][data-kind="link"] { border: 0; text-transform: none; letter-spacing: 0; text-decoration: underline; }
+[data-look="terminal"] [data-ui="badge"] { background: transparent; border: 1px solid currentColor; text-transform: uppercase; letter-spacing: 0.04em; }
+[data-look="terminal"] [data-ui="chip"] { background: transparent; border: 1px solid currentColor; }
+[data-look="terminal"] [data-ui="choice"] { border-color: currentColor; }
+[data-look="terminal"] [data-ui="hub-row"]::before { content: ">"; margin-right: 6px; opacity: 0.6; }
+[data-look="terminal"] [data-ui="unseen-line"] .label { background: transparent; border: 1px solid currentColor; text-transform: uppercase; letter-spacing: 0.04em; }
+[data-look="plush"] :is([data-ui="button"], [data-ui="icon-button"], [data-ui="row-button"], [data-ui="logo-tile"], [data-ui="look-card"], [data-ui="file-card"], [data-ui="ask-card"], [data-ui="tool-fold"] > summary) { box-shadow: var(--shadow-tile); background-image: var(--bevel); }
+[data-look="plush"] :is([data-ui="chip"], [data-ui="badge"], [data-ui="choice"], [data-ui="hub-row"][data-ref], [data-ui="unseen-line"] .label) { box-shadow: var(--shadow-soft); background-image: var(--bevel); }
+[data-look="plush"] [data-ui="room-mark"] { box-shadow: var(--shadow-soft); }
+[data-look="plush"] :is([data-ui="button"], [data-ui="icon-button"], [data-ui="chip"], [data-ui="badge"], [data-ui="choice"]) { border-radius: var(--r-pill); }
+[data-look="plush"] [data-ui="button"]:is([data-kind="primary"], [data-kind="ok"], [data-kind="danger-solid"], [data-kind="warn"]) { box-shadow: var(--shadow-primary); }
+[data-look="plush"] [data-ui="button"][data-kind="primary"] { background-image: var(--bevel), var(--grad-primary); }
+[data-look="plush"] [data-ui="icon-button"]:is([data-kind="ghost"], [data-kind="plain"]), [data-look="plush"] [data-ui="button"]:is([data-kind="ghost"], [data-kind="plain"], [data-kind="soft"], [data-kind="secondary"], [data-kind="paper"]) { background-color: var(--btn-bg); }
+[data-look="plush"] :is([data-ui="button"], [data-ui="icon-button"], [data-ui="chip"], [data-ui="choice"]):is(:hover, [data-state="hover"]):not(:disabled) { box-shadow: var(--shadow-ctl-hover); background-image: var(--bevel); transform: translateY(-1px); }
+[data-look="plush"] [data-ui="button"][data-kind="primary"]:is(:hover, [data-state="hover"]):not(:disabled) { box-shadow: var(--shadow-primary); background-image: var(--bevel), var(--grad-primary); transform: translateY(-1px); filter: none; }
+[data-look="plush"] :is([data-ui="button"], [data-ui="icon-button"], [data-ui="row-button"], [data-ui="choice"], [data-ui="chip"]):is(:active, [data-state="active"]):not(:disabled) { box-shadow: var(--shadow-inset); background-image: none; transform: translateY(1px); }
+[data-look="plush"] [data-ui="choice"]:is([data-state="on"], [aria-pressed="true"]) { box-shadow: var(--shadow-inset); background-image: none; }
+[data-look="plush"] :is([data-ui="number-field"] > input, [data-ui="adjust-row"] .ctl > input[type="color"]) { box-shadow: var(--input-shadow); }
+[data-look="plush"] [data-ui="face"] .tile { box-shadow: var(--shadow-soft); background-image: var(--bevel); }
+[data-look="plush"] [data-ui="room-mark"][data-kind] { border-radius: calc(10px * var(--r-scale)); }
+[data-look="plush"] [data-ui="room-mark"][data-kind][data-size="lg"] { border-radius: calc(12px * var(--r-scale)); }
+[data-look="plush"] [data-ui="logo-tile"] { border-radius: calc(8px * var(--r-scale)); }
+[data-look="plush"] [data-ui="logo-tile"][data-size="sm"] { border-radius: calc(7px * var(--r-scale)); }
+[data-look="plush"] [data-ui="logo-tile"][data-size="lg"] { border-radius: calc(9px * var(--r-scale)); }
+[data-look="plush"] [data-ui="face"][data-me] .tile { box-shadow: 0 0 0 2px var(--face-ring), 0 0 0 4px var(--face-me-ring), var(--shadow-soft); }
+[data-look="terminal"] :is([data-ui="button"], [data-ui="icon-button"], [data-ui="row-button"], [data-ui="choice"], [data-ui="badge"], [data-ui="chip"], [data-ui="hub-row"], [data-ui="file-card"], [data-ui="ask-card"], [data-ui="reply-note"], [data-ui="tool-fold"] > summary, [data-ui="tool-call"] > [data-ui="chip"], [data-ui="tool-call"] > .body) { border-radius: 0; }
+[data-ui="look-card"] { display: inline-flex; flex-direction: column; align-items: stretch; gap: 6px; width: var(--look-card-w); padding: 6px; border: 2px solid var(--look-card-border); border-radius: var(--r-md); background: var(--look-card-bg); color: var(--look-card-ink); cursor: pointer; font: inherit; text-align: center; transition: border-color var(--t-fast), transform var(--t-fast) var(--ease-out); }
+[data-ui="look-card"] .paper { position: relative; display: block; height: var(--look-card-paper-h); overflow: hidden; }
+[data-ui="look-card"] .reply { position: absolute; left: 10px; top: 10px; width: 50%; height: 24px; display: flex; align-items: center; padding: 0 8px; font-size: 11px; font-weight: 800; }
+[data-ui="look-card"] .mine { position: absolute; right: 12px; top: 42px; width: 36%; height: 18px; }
+[data-ui="look-card"] .accent { position: absolute; left: 10px; bottom: 10px; width: 34px; height: 12px; }
+[data-ui="look-card"] .name { font-size: var(--fs-sm); font-weight: 800; }
+[data-ui="look-card"]:is(:hover, [data-state="hover"]) { border-color: var(--look-card-hover-border); transform: translateY(-1px); }
+[data-ui="look-card"]:is([data-state="on"], [aria-pressed="true"]) { border-color: var(--look-card-on-border); }
+[data-ui="reply-note"] { display: flex; align-items: flex-start; gap: 6px; font-size: var(--reply-note-fs); font-weight: 700; line-height: 1.5; color: var(--reply-note-ink); background: var(--reply-note-bg); border-radius: calc(10px * var(--r-scale)); padding: 5px 10px; }
+[data-ui="reply-note"] .i { width: 14px; height: 14px; flex: none; margin-top: calc((1.5em - 14px) / 2); }
 [data-ui="reply-note"][data-tone="attention"] { color: var(--reply-note-attention-ink); background: var(--reply-note-attention-bg); }

package/ui/components.js

@@ -3,7 +3,170 @@
   "use strict";
   const UI = globalThis.UI;
 
+  UI.define("logo-tile", {
+    group: "logoTile",
+    describe: "A vendor's mark on a tile: the vendor's own drawing laid over the look's ink through a mask, so it reads on any paper; a letter stands in where there is no drawing, a glyph from the icon set for the marks the room adds (muted). As a badge it sits in a face's corner.",
+    props: {
+      icon: { type: "string", note: "the drawing's url (a recipe's icon); empty for a letter" },
+      letter: { type: "string", note: "the letter shown without a drawing" },
+      glyph: { type: "icon", note: "an icon from the set instead of a drawing (the mute mark)" },
+      size: { type: "enum", values: ["sm", "md", "lg", "badge"], default: "md", note: "badge: the corner of a face, sized by the face" },
+      tone: { type: "enum", values: ["plain", "muted"], default: "plain" },
+      title: { type: "string" },
+    },
+    build: ({ icon, letter, glyph, size, tone, title }, ui) =>
+      ui.h("span", { "data-size": size, "data-tone": tone !== "plain" ? tone : null, title, style: icon ? `--logo:url("${icon}")` : null, role: title ? "img" : null, "aria-label": title || null },
+        icon ? ui.h("span", { class: "mark" }) : glyph ? ui.icon(glyph) : ui.h("span", { class: "letter" }, (letter || "?").slice(0, 1).toUpperCase())),
+    states: ["rest"],
+    samples: [
+      { label: "a drawing", props: { icon: "/vendor-icons/claude.svg", title: "Claude" } },
+      { label: "another", props: { icon: "/vendor-icons/codex.svg", size: "lg", title: "Codex" } },
+      { label: "a letter", props: { letter: "F", size: "sm", title: "Fake" } },
+      { label: "a badge", props: { icon: "/vendor-icons/gemini.svg", size: "badge", title: "Gemini" } },
+      { label: "muted", props: { glyph: "mute", size: "badge", tone: "muted", title: "muted: receives no prompts" } },
+    ],
+  });
+
+  const FACE_STATUSES = ["idle", "queued", "starting", "thinking", "writing", "error", "offline", "left", "unstaffed"];
+  UI.define("face", {
+    group: "face",
+    describe: "A participant's face: a tile in its colour's tint with the initials or the emoji in the colour itself; a vendor's mark in the corner (a logo-tile), a status dot at the foot (the roster patches its data-status on its own), the accent ring on the human's own. The size is the caller's (px); the colours are the look's. Composed through the .avatar hook: where it sits, how big, the life ring the roster lays over it.",
+    props: {
+      name: { type: "string", required: true },
+      label: { type: "string", required: true, note: "the initials or the emoji" },
+      color: { type: "string", required: true, note: "the participant's colour, #rrggbb" },
+      size: { type: "number", required: true, note: "px" },
+      emoji: { type: "boolean", default: false, note: "the label is an emoji: bigger" },
+      badge: { type: "node", note: "markup of the mark in the corner (a logo-tile), as ui.raw" },
+      status: { type: "enum", values: FACE_STATUSES, note: "the dot at the foot" },
+      me: { type: "boolean", default: false, note: "the human's own face: wears the accent ring" },
+      kind: { type: "enum", values: ["tile", "card", "bare"], default: "tile", note: "card: on the profile card, on paper with a shadow; bare: no tile (the rail)" },
+      ring: { type: "boolean", default: false, note: "a ring in the paper's colour, for faces that overlap in a stack" },
+      dim: { type: "enum", values: ["asleep", "unstaffed"], note: "greyed: asleep a little, unstaffed more" },
+      title: { type: "string" },
+    },
+    build: ({ name, label, color, size, emoji, badge, status, me, kind, ring, dim, title }, ui) =>
+      ui.h("span", { class: "avatar", role: "img", "aria-label": name, title, "data-kind": kind !== "tile" ? kind : null, "data-me": me || null, "data-ring": ring || null, "data-dim": dim || null, style: `--face-color:${color};--face-size:${size}px;width:${size}px;height:${size}px` },
+        ui.h("span", { class: "tile", "data-emoji": emoji || null, style: `font-size:${Math.round(emoji ? size * 0.56 : size * 0.38)}px` }, label),
+        badge,
+        status ? ui.h("span", { class: "status", "data-status": status }) : null),
+    states: ["rest"],
+    samples: (() => {
+      const p = globalThis.VIBEROOM_TOKENS.current.palette;
+      return [
+        { label: "initials", props: { name: "Maken", label: "MA", color: p.primary, size: 44 } },
+        { label: "an emoji, a vendor", props: { name: "Sam", label: "🦊", emoji: true, color: p.orange, size: 44, badge: UI.raw(UI.html("logo-tile", { icon: "/vendor-icons/claude.svg", size: "badge", title: "Claude" })), status: "thinking" } },
+        { label: "you", props: { name: "You", label: "🧑‍💻", emoji: true, color: p.indigo, size: 44, me: true } },
+        { label: "asleep", props: { name: "Rex", label: "🦖", emoji: true, color: p.green, size: 44, dim: "asleep", status: "offline", badge: UI.raw(UI.html("logo-tile", { glyph: "mute", size: "badge", tone: "muted", title: "muted" })) } },
+        { label: "on the card", props: { name: "You", label: "🧑‍💻", emoji: true, color: p.indigo, size: 64, kind: "card" } },
+      ];
+    })(),
+  });
+
+  UI.define("room-mark", {
+    group: "roomMark",
+    describe: "A room's mark: a square in the room's own hue with the first letter of its name, or its emoji on a paler square; the hue is the room's (from its id, set on the element), the recipe (how light, how saturated, the ink) is the look's. The accent kind is the mark of the whole, on the accent (all skills, no rooms yet).",
+    props: {
+      hue: { type: "number", note: "0–359, the room's own; not for the accent kind" },
+      letter: { type: "string", note: "the first letter of the room's name" },
+      emoji: { type: "string", note: "the room's emoji, instead of the letter" },
+      icon: { type: "icon", note: "the accent kind: an icon on the accent gradient" },
+      size: { type: "enum", values: ["md", "lg"], default: "md" },
+      title: { type: "string" },
+    },
+    build: ({ hue, letter, emoji, icon, size, title }, ui) => {
+      const kind = icon ? "accent" : emoji ? "emoji" : "letter";
+      const style = icon ? null : `--room-hue:${Number(hue) || 0};--room-hue-2:${((Number(hue) || 0) + 30) % 360}`;
+      return ui.h("span", { "data-kind": kind, "data-size": size !== "md" ? size : null, style, title }, icon ? ui.icon(icon) : emoji ? emoji : (letter || "?").slice(0, 1).toUpperCase());
+    },
+    states: ["rest"],
+    samples: [
+      { label: "a letter", props: { hue: 200, letter: "V", title: "Vibes" } },
+      { label: "an emoji", props: { hue: 40, emoji: "🎭", title: "Theatre" } },
+      { label: "large", props: { hue: 300, letter: "P", size: "lg" } },
+      { label: "the accent", props: { icon: "skills", title: "All skills" } },
+    ],
+  });
+
+  UI.define("unseen-line", {
+    group: "unseenLine",
+    describe: "The line across the room above which a vibemate (or several) has seen nothing: a rule on either side of a small label. The rule's drawing is the look's (a wave in VibeClassic, a dashed rule in Terminal); the label names who, and its tooltip says why.",
+    props: {
+      label: { type: "string", required: true, note: "who has not seen what is above" },
+      title: { type: "string", note: "the tooltip: where a vibemate's knowledge of the room starts" },
+    },
+    build: ({ label, title }, ui) => ui.h("div", { title }, ui.h("span", { class: "line" }), ui.h("span", { class: "label" }, `↑ ${label}`), ui.h("span", { class: "line" })),
+    states: ["rest"],
+    samples: [
+      { label: "one vibemate", props: { label: "Maken has not seen anything above this line" } },
+      { label: "two", props: { label: "Maken and Sam have not seen anything above this line" } },
+    ],
+  });
+
+  UI.define("number-field", {
+    group: "numberField",
+    describe: "A number to type or step: the field with two small steps at its right edge, drawn from the look instead of the browser's own spinner (U126). A step raises the same input and change events a typed value does, so a form saves on it. The id, the bounds and the step are the caller's.",
+    props: {
+      id: { type: "string" },
+      value: { type: "string", note: "the current value, as text; empty for none" },
+      min: { type: "number" },
+      max: { type: "number" },
+      step: { type: "number" },
+      placeholder: { type: "string" },
+      hook: { type: "string", note: "a class the page composes with (where it sits, how wide)" },
+      data: { type: "object", note: "data-* marks on the input, for the page's own handlers" },
+      disabled: { type: "boolean", default: false },
+    },
+    build: ({ id, value, min, max, step, placeholder, hook, data, disabled }, ui) =>
+      ui.h("span", { class: hook },
+        ui.h("input", { type: "number", id, value, min, max, step, placeholder, disabled, ...ui.dataAttrs(data) }),
+        ui.h("span", { class: "steps", "aria-hidden": "true" },
+          ui.h("button", { type: "button", "data-act": "up", tabindex: "-1", title: "More" }),
+          ui.h("button", { type: "button", "data-act": "down", tabindex: "-1", title: "Less" }))),
+    states: ["rest", "disabled"],
+    samples: [
+      { label: "seconds", props: { value: "4", min: 0, max: 120, step: 0.5 } },
+      { label: "empty, with a placeholder", props: { value: "", min: 1, max: 100, placeholder: "no limit" } },
+    ],
+  });
+
+  UI.define("adjust-row", {
+    group: "adjustRow",
+    describe: "One thing the human may adjust in a look (U125): its name and what it colours on the left, the control on the right — a swatch with its value for a colour, a slider with its value for a scale — and, once the value differs from the look's own, the way back. Settings → Appearance lists them by group from the adjustables in tokens.js; the page keeps data-state and the value in step as the human picks.",
+    props: {
+      key: { type: "string", required: true, note: "the adjustable's key (data-key), what the hub keeps it under" },
+      label: { type: "string", required: true },
+      hint: { type: "string", note: "what it colours" },
+      kind: { type: "enum", values: ["colour", "scale"], default: "colour" },
+      value: { type: "string", required: true, note: "#rrggbb, or the scale as a number" },
+      own: { type: "string", required: true, note: "the look's own value: the row shows the way back when value differs" },
+      min: { type: "number", note: "scale only" },
+      max: { type: "number", note: "scale only" },
+      step: { type: "number", note: "scale only" },
+    },
+    build: ({ key, label, hint, kind, value, own, min, max, step }, ui) => {
+      const changed = String(value).toLowerCase() !== String(own).toLowerCase();
+      const input = kind === "scale"
+        ? ui.h("input", { type: "range", value, min, max, step, "aria-label": label })
+        : ui.h("input", { type: "color", value, "aria-label": label });
+      return ui.h("div", { "data-key": key, "data-kind": kind, "data-state": changed ? "changed" : null },
+        ui.h("span", { class: "what" }, ui.h("span", { class: "label" }, label), hint ? ui.h("span", { class: "hint" }, hint) : null),
+        ui.h("span", { class: "ctl" }, input, ui.h("code", { class: "value" }, value),
+          ui.h("button", { type: "button", class: "back", "data-act": "reset", title: `Back to the look's own, ${own}`, "aria-label": "Back to the look's own" }, ui.icon("refresh"))));
+    },
+    states: ["rest", "changed"],
+    samples: (() => {
+      const p = globalThis.VIBEROOM_TOKENS.current.palette;
+      return [
+        { label: "a colour, as designed", props: { key: "canvas", label: "Chat paper", hint: "behind the messages", value: p.bg, own: p.bg } },
+        { label: "a colour, changed", props: { key: "accent", label: "Accent", hint: "buttons, links", value: p.orange, own: p.primary } },
+        { label: "a scale", props: { key: "corners", label: "Corners", hint: "0 is square", kind: "scale", value: "1", own: "1", min: 0, max: 1.5, step: 0.05 } },
+      ];
+    })(),
+  });
+
   UI.define("row-button", {
+    group: "rowButton",
     describe: "A small action on a vibemate's row: open its panel, go to its last reply, wake it up. The row reveals the buttons on hover; all three wear one pill.",
     props: {
       icon: { type: "icon", required: true },
@@ -21,6 +184,7 @@
   });
 
   UI.define("hub-row", {
+    group: "hubRow",
     describe: "A line the hub writes into the room (U114): news in muted words; a tone colours it (attention, error, hush); the one row that leads somewhere carries a ref and is a button with a backing, the only row that ever wears one.",
     props: {
       text: { type: "string", required: true },
@@ -39,13 +203,14 @@
       { label: "attention", props: { text: "Maken is at 84% of its context; it will leave notes with its next reply.", tone: "attention" } },
       { label: "error", props: { text: "Maken could not answer: no result", tone: "error" } },
       { label: "hush", props: { text: "Hush: everyone waits until you write again.", tone: "hush", face: UI.raw('<span class="hush-face">🤫</span>') } },
-      { label: "leads to a reply", props: { text: "Maken finished the reply started at 16:21 · 2m 30s", ref: "sample", title: "go to the reply", face: UI.raw('<span class="avatar" style="width:20px;height:20px"><span class="av-tile" role="img" aria-label="Maken" style="font-size:11px;border-radius:6px">🔨</span></span>') } },
+      { label: "leads to a reply", props: { text: "Maken finished the reply started at 16:21 · 2m 30s", ref: "sample", title: "go to the reply", face: UI.raw(UI.html("face", { name: "Maken", label: "🔨", emoji: true, color: globalThis.VIBEROOM_TOKENS.current.palette.primary, size: 20 })) } },
     ],
   });
 
   const BUTTON_KINDS = ["plain", "primary", "secondary", "soft", "ghost", "danger", "danger-solid", "dark", "warn", "inverse", "link", "ok", "paper"];
   const BUTTON_SIZES = ["md", "sm", "xs", "lg", "cta"];
   UI.define("button", {
+    group: "btn",
     describe: "A button with words on it: the one type behind every Cancel, Summon, Save and Erase. Its kind says how loud it is and where it can sit (primary is the one thing to do; ghost is the way out; danger warns; danger-solid is the point of no return; dark sits on a code card; warn is a quiet amber word such as Stop; inverse sits on the accent; link is a word that acts), its size where it stands.",
     props: {
       label: { type: "string", required: true, note: "the words on it (wrapped in .label, so the page may change them)" },
@@ -113,6 +278,7 @@
   });
 
   UI.define("icon-button", {
+    group: "iconButton",
     describe: "A button that is only a glyph: close, settings, back, fold. Its title is its whole meaning, so it is required and doubles as the accessible name.",
     props: {
       icon: { type: "icon", required: true },
@@ -140,6 +306,7 @@
   });
 
   UI.define("choice", {
+    group: "choice",
     describe: "One option of a few, as a pill: the chosen one is lit (on). What choosing does is the page's: a data mark says which option this is.",
     props: {
       label: { type: "string", required: true },
@@ -164,6 +331,7 @@
   });
 
   UI.define("badge", {
+    group: "badge",
     describe: "A small label that states a fact: a vibemate's state, its vendor, a mark on a skill or a template. Its tone is the room's state family (ready, waiting, thinking, writing, error, asleep) or a quiet look (plain, muted, outline) or attention; it never does anything by itself.",
     props: {
       label: { type: "string", required: true },
@@ -191,6 +359,7 @@
   });
 
   UI.define("chip", {
+    group: "chip",
     describe: "A small tag that names a thing: the room's folder, a tool call, a template's run. As a button it opens or unfolds what it names; its tone follows the state of the thing (a tool call that completed, failed, is still running).",
     props: {
       label: { type: "string", required: true },
@@ -217,6 +386,7 @@
   });
 
   UI.define("file-card", {
+    group: "fileCard",
     describe: "A fragment of a file, or a picture, under the message that names it: a dark card whose head says the file's name and the lines shown and offers to open the whole file; its body is the code or the drawing. What could not be shown says why in the body instead.",
     props: {
       name: { type: "string", required: true },
@@ -243,6 +413,7 @@
 
   const TOOL_TONE = { completed: "ready", failed: "error", in_progress: "thinking" };
   UI.define("tool-call", {
+    group: "toolCall",
     describe: "A tool call in a reply: a chip with the tool's title, its kind and its status. Open, the chip is the head of a card that shows the call, its input and its output, bordered in the colour of its status.",
     props: {
       id: { type: "string", required: true, note: "the call's id; the chip carries it as data-tool for the page's handler" },
@@ -273,6 +444,7 @@
   });
 
   UI.define("tool-fold", {
+    group: "toolFold",
     describe: "The tool calls of a finished reply, folded into one line: how many there were and how many failed. It opens to the calls, which the page puts in its list; the page remembers it open per message.",
     props: {
       count: { type: "number", required: true },
@@ -293,6 +465,7 @@
 
   const CHOICE_KIND = { ok: "ok", no: "danger" };
   UI.define("ask-card", {
+    group: "askCard",
     describe: "A card the room puts in front of you for a decision: a permission a vibemate asks for, a proposal it makes. It says who asks and what, shows the details, and offers the choices as buttons; decided, it dims and keeps the outcome in the choices' place.",
     props: {
       kind: { type: "enum", values: ["permission", "proposal"], required: true },
@@ -324,6 +497,7 @@
   });
 
   UI.define("reply-note", {
+    group: "replyNote",
     describe: "A line the hub attaches to a reply, inside its bubble: an adapter's notice before the words, or the fact that the reply was stopped, right after them. The words stay; the note says what happened to them.",
     props: {
       text: { type: "string", required: true },
@@ -339,4 +513,31 @@
       { label: "stopped", props: { text: "Stopped by Sam", tone: "attention", icon: "stop" } },
     ],
   });
+
+  UI.define("look-card", {
+    group: "lookCard",
+    describe: "A look, shown as a small picture of itself: its paper, a reply and your bubble on it, its accent, its corners, its name in its own font. The picker in Settings and the style guide's own switch are rows of these; the colours come from the look's tokens, so the card is right whatever look the page wears.",
+    props: {
+      look: { type: "object", required: true, note: "a look from VIBEROOM_TOKENS.looks: id, label, palette, shape, type, elements" },
+      on: { type: "boolean", default: false },
+      act: { type: "string" },
+      title: { type: "string" },
+      data: { type: "object" },
+    },
+    build: ({ look, on, act, title, data }, ui) => {
+      const p = look.palette;
+      const e = look.elements;
+      const r = (px) => `calc(${px}px * ${look.shape.rScale || 1})`;
+      const canvas = (look.canvas && look.canvas.gradCanvas) || p.bg;
+      const shadows = look.elevation || {};
+      return ui.h("button", { type: "button", "data-look": look.id, "data-state": on ? "on" : null, "aria-pressed": on ? "true" : "false", "data-act": act, title: title || look.label, ...ui.dataAttrs(data) },
+        ui.h("span", { class: "paper", style: `background:${canvas};border-radius:${r(10)}` },
+          ui.h("span", { class: "reply", style: `background:${e.bubble.bg};color:${e.bubble.ink};border-radius:${r(8)};font-family:${look.type.font};box-shadow:${e.bubble.shadow || "none"}` }, "Aa"),
+          ui.h("span", { class: "mine", style: `background:${e.bubble.mineBg};border-radius:${r(8)};box-shadow:${e.bubble.mineShadow || "none"}` }),
+          ui.h("span", { class: "accent", style: `background:${p.primary};border-radius:${r(6)};box-shadow:${shadows.shadowPrimary || "none"}` })),
+        ui.h("span", { class: "name", style: `font-family:${look.type.font}` }, look.label));
+    },
+    states: ["rest", "hover", "on"],
+    samples: Object.values(globalThis.VIBEROOM_TOKENS.looks).map((l) => ({ label: l.label, props: { look: l, on: l.id === globalThis.VIBEROOM_TOKENS.current.id } })),
+  });
 })();

package/ui/fonts/anonymous-pro.css

@@ -0,0 +1,7 @@
+/* viberoom - Copyright (c) 2026 Todor Rusev - AGPL-3.0-or-later; see LICENSE */
+@font-face { font-family: "Anonymous Pro"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/anonymous-pro-cyrillic-400.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
+@font-face { font-family: "Anonymous Pro"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/anonymous-pro-latin-ext-400.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
+@font-face { font-family: "Anonymous Pro"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/anonymous-pro-latin-400.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
+@font-face { font-family: "Anonymous Pro"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/anonymous-pro-cyrillic-700.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
+@font-face { font-family: "Anonymous Pro"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/anonymous-pro-latin-ext-700.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
+@font-face { font-family: "Anonymous Pro"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/anonymous-pro-latin-700.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }