@ag2/weave 0.1.0 → 0.2.0

package/dist/index.js

@@ -1,4 +1,4 @@
-import { forwardRef, createContext, useContext, useRef, useCallback, useEffect, useLayoutEffect, useState } from "react";
+import { forwardRef, createContext, useContext, useRef, useCallback, useEffect, useLayoutEffect, useState, useMemo } from "react";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import classNames from "classnames";
 import { createPortal } from "react-dom";
@@ -3452,7 +3452,7 @@ const Switch = forwardRef(
     );
   }
 );
-const Text_css_ts_vanilla = "";
+const Text_css_ts_vanilla$1 = "";
 var Text$1 = createRuntimeFn({ defaultClassName: "r9vqik0 _8nex5a1 _8nex5a0", variantClassNames: { size: { Inherit: "r9vqik1", D400: "r9vqik2", H1: "r9vqik3", H2: "r9vqik4", H3: "r9vqik5", H4: "r9vqik6", H5: "r9vqik7", H6: "r9vqik8", T500: "r9vqik9", T400: "r9vqika", T300: "r9vqikb", T200: "r9vqikc", B500: "r9vqikd", B400: "r9vqike", B300: "r9vqikf", L400: "r9vqikg", O400: "r9vqikh", C400: "r9vqiki" }, align: { Left: "r9vqikj", Center: "r9vqikk", Right: "r9vqikl", Justify: "r9vqikm" }, truncate: { true: "r9vqikn" }, priority: { "300": "r9vqiko", "400": "r9vqikp", "500": "r9vqikq", Inherit: "r9vqikr", Initial: "r9vqiks" } }, defaultVariants: { size: "T400", priority: "Inherit" }, compoundVariants: [] });
 const Text = as(
   ({ as: AsText = "p", className, size, truncate, align, priority, ...props }, ref) => /* @__PURE__ */ jsx(
@@ -3625,7 +3625,1207 @@ const TooltipProvider = as(
     ] });
   }
 );
+const ContainerColor_css_ts_vanilla = "";
+var ContainerColor = createRuntimeFn({ defaultClassName: "_8nex5a1 _8nex5a0", variantClassNames: { variant: { Background: "_1f7zc2n1", Surface: "_1f7zc2n2", SurfaceVariant: "_1f7zc2n3", Primary: "_1f7zc2n4", Secondary: "_1f7zc2n5", Success: "_1f7zc2n6", Warning: "_1f7zc2n7", Critical: "_1f7zc2n8" } }, defaultVariants: { variant: "Surface" }, compoundVariants: [] });
+const style_css_ts_vanilla$1 = "";
+var SequenceCard$1 = createRuntimeFn({ defaultClassName: "nwqdf42", variantClassNames: { radii: { "0": "nwqdf43", "300": "nwqdf44", "400": "nwqdf45", "500": "nwqdf46" }, outlined: { true: "nwqdf47" }, mergeBorder: { true: "nwqdf48" } }, defaultVariants: { radii: "400" }, compoundVariants: [] });
+const SequenceCard = as(
+  ({
+    as: AsSequenceCard = "div",
+    className,
+    variant,
+    radii,
+    firstChild,
+    lastChild,
+    outlined,
+    mergeBorder,
+    ...props
+  }, ref) => /* @__PURE__ */ jsx(
+    Box,
+    {
+      as: AsSequenceCard,
+      className: classNames(
+        SequenceCard$1({ radii, outlined, mergeBorder }),
+        ContainerColor({ variant }),
+        className
+      ),
+      "data-first-child": firstChild,
+      "data-last-child": lastChild,
+      ...props,
+      ref
+    }
+  )
+);
+const Text_css_ts_vanilla = "";
+var BreakWord = "_1o5czkz0";
+const SettingTile = ({ title, description, before, after, children }) => /* @__PURE__ */ jsxs(Box, { alignItems: "Center", gap: "300", children: [
+  before && /* @__PURE__ */ jsx(Box, { shrink: "No", children: before }),
+  /* @__PURE__ */ jsxs(Box, { grow: "Yes", direction: "Column", gap: "100", children: [
+    title && /* @__PURE__ */ jsx(Text, { className: BreakWord, size: "T300", children: title }),
+    description && /* @__PURE__ */ jsx(Text, { className: BreakWord, size: "T200", priority: "300", children: description }),
+    children
+  ] }),
+  after && /* @__PURE__ */ jsx(Box, { shrink: "No", children: after })
+] });
+const CutoutCard_css_ts_vanilla = "";
+var CutoutCard$1 = "_550r4h0";
+const CutoutCard = as(
+  ({ as: AsCutoutCard = "div", className, variant = "Surface", ...props }, ref) => /* @__PURE__ */ jsx(
+    AsCutoutCard,
+    {
+      className: classNames(ContainerColor({ variant }), CutoutCard$1, className),
+      ...props,
+      ref
+    }
+  )
+);
+const styles_css_ts_vanilla$1 = "";
+var InfoCard$1 = "t54ly40";
+const InfoCard = ({
+  variant = "Primary",
+  title,
+  description,
+  before,
+  after,
+  children
+}) => /* @__PURE__ */ jsxs(Box, { direction: "Column", className: classNames(InfoCard$1, ContainerColor({ variant })), gap: "300", children: [
+  /* @__PURE__ */ jsxs(Box, { gap: "200", alignItems: "Center", children: [
+    before && /* @__PURE__ */ jsx(Box, { shrink: "No", alignSelf: "Start", children: before }),
+    /* @__PURE__ */ jsxs(Box, { grow: "Yes", direction: "Column", gap: "100", children: [
+      title && /* @__PURE__ */ jsx(Text, { size: "L400", className: BreakWord, children: title }),
+      description && /* @__PURE__ */ jsx(Text, { size: "T200", className: BreakWord, children: description })
+    ] }),
+    after && /* @__PURE__ */ jsx(Box, { shrink: "No", children: after })
+  ] }),
+  children
+] });
+const Sidebar_css_ts_vanilla = "";
+var Sidebar$1 = "jbpukc0 _8nex5a1 _8nex5a0";
+var SidebarAvatar$1 = createRuntimeFn({ defaultClassName: "jbpukc9", variantClassNames: { size: { "200": "jbpukca", "300": "jbpukcb", "400": "jbpukcc" }, outlined: { true: "jbpukcd" } }, defaultVariants: { size: "400" }, compoundVariants: [] });
+var SidebarFolder$1 = createRuntimeFn({ defaultClassName: "jbpukce _8nex5a1 _8nex5a0 _1f7zc2n1 x4g6300 jbpukc3", variantClassNames: { state: { Close: "jbpukcf", Open: "jbpukcg" } }, defaultVariants: { state: "Close" }, compoundVariants: [] });
+var SidebarFolderDropTarget$1 = createRuntimeFn({ defaultClassName: "jbpukch", variantClassNames: { position: { Top: "jbpukci", Bottom: "jbpukcj" } }, defaultVariants: {}, compoundVariants: [] });
+var SidebarItem$1 = createRuntimeFn({ defaultClassName: "jbpukc4 _8nex5a1 _8nex5a0 x4g6301 jbpukc3", variantClassNames: { active: { true: "jbpukc5" } }, defaultVariants: {}, compoundVariants: [] });
+var SidebarItemBadge$1 = createRuntimeFn({ defaultClassName: "jbpukc6 _8nex5a1 _8nex5a0", variantClassNames: { hasCount: { true: "jbpukc7", false: "jbpukc8" } }, defaultVariants: { hasCount: false }, compoundVariants: [] });
+var SidebarStack$1 = "jbpukc1 _8nex5a1 _8nex5a0";
+const Sidebar = as(({ as: AsSidebar = "div", className, ...props }, ref) => /* @__PURE__ */ jsx(AsSidebar, { className: classNames(Sidebar$1, className), ...props, ref }));
+const SidebarItem = as(
+  ({ as: AsSidebarAvatarBox = "div", className, active, ...props }, ref) => /* @__PURE__ */ jsx(
+    AsSidebarAvatarBox,
+    {
+      className: classNames(SidebarItem$1({ active }), className),
+      ...props,
+      ref
+    }
+  )
+);
+const SidebarItemBadge = as(
+  ({ as: AsSidebarBadgeBox = "div", className, hasCount, ...props }, ref) => /* @__PURE__ */ jsx(
+    AsSidebarBadgeBox,
+    {
+      className: classNames(SidebarItemBadge$1({ hasCount }), className),
+      ...props,
+      ref
+    }
+  )
+);
+const SidebarItemTooltip = ({
+  tooltip,
+  children
+}) => {
+  if (!tooltip) {
+    return children(() => void 0);
+  }
+  return /* @__PURE__ */ jsx(
+    TooltipProvider,
+    {
+      delay: 400,
+      position: "Right",
+      tooltip: /* @__PURE__ */ jsx(Tooltip, { style: { maxWidth: toRem(280) }, children: /* @__PURE__ */ jsx(Text, { size: "H5", children: tooltip }) }),
+      children
+    }
+  );
+};
+const SidebarAvatar = as(
+  ({ className, size, outlined, radii, ...props }, ref) => /* @__PURE__ */ jsx(
+    Avatar,
+    {
+      className: classNames(SidebarAvatar$1({ size, outlined }), className),
+      radii,
+      ...props,
+      ref
+    }
+  )
+);
+const SidebarFolder = as(
+  ({ as: AsSidebarFolder = "div", className, state, ...props }, ref) => /* @__PURE__ */ jsx(
+    AsSidebarFolder,
+    {
+      className: classNames(SidebarFolder$1({ state }), className),
+      ...props,
+      ref
+    }
+  )
+);
+const SidebarFolderDropTarget = as(
+  ({ as: AsSidebarFolderDropTarget = "div", className, position, ...props }, ref) => /* @__PURE__ */ jsx(
+    AsSidebarFolderDropTarget,
+    {
+      className: classNames(SidebarFolderDropTarget$1({ position }), className),
+      ...props,
+      ref
+    }
+  )
+);
+const SidebarContent = ({ scrollable, sticky }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+  /* @__PURE__ */ jsx(Box, { direction: "Column", grow: "Yes", children: scrollable }),
+  /* @__PURE__ */ jsx(Box, { direction: "Column", shrink: "No", children: sticky })
+] });
+const SidebarStack = as(
+  ({ as: AsSidebarStack = "div", className, ...props }, ref) => /* @__PURE__ */ jsx(AsSidebarStack, { className: classNames(SidebarStack$1, className), ...props, ref })
+);
+const SidebarStackSeparator = () => /* @__PURE__ */ jsx(
+  Line,
+  {
+    role: "separator",
+    style: { width: toRem(24), margin: "0 auto" },
+    variant: "Background",
+    size: "300"
+  }
+);
+const AgentGlyph = ({
+  size = 22,
+  strokeWidth = 2
+}) => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": true,
+    children: [
+      /* @__PURE__ */ jsx("path", { d: "M12 8V4H8" }),
+      /* @__PURE__ */ jsx("rect", { width: "16", height: "12", x: "4", y: "8", rx: "2" }),
+      /* @__PURE__ */ jsx("path", { d: "M2 14h2" }),
+      /* @__PURE__ */ jsx("path", { d: "M20 14h2" }),
+      /* @__PURE__ */ jsx("path", { d: "M15 13v2" }),
+      /* @__PURE__ */ jsx("path", { d: "M9 13v2" })
+    ]
+  }
+);
+const AgentMark = ({ size = 10 }) => /* @__PURE__ */ jsx(
+  "span",
+  {
+    "aria-hidden": true,
+    style: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      color: "currentColor"
+    },
+    children: /* @__PURE__ */ jsx(AgentGlyph, { size, strokeWidth: 2.8 })
+  }
+);
+const AgentNameTag = () => /* @__PURE__ */ jsx(
+  Badge,
+  {
+    as: "span",
+    variant: "Secondary",
+    fill: "Soft",
+    radii: "300",
+    style: {
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      padding: `0 ${toRem(5)}`,
+      opacity: 0.85
+    },
+    title: "Agent",
+    "aria-label": "Agent",
+    children: /* @__PURE__ */ jsx(Text, { as: "span", size: "L400", style: { fontWeight: 500, letterSpacing: "0.01em" }, children: "Agent" })
+  }
+);
+const PeopleGlyph = ({
+  size = 22,
+  strokeWidth = 2
+}) => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": true,
+    children: [
+      /* @__PURE__ */ jsx("path", { d: "M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" }),
+      /* @__PURE__ */ jsx("circle", { cx: "9", cy: "7", r: "4" }),
+      /* @__PURE__ */ jsx("path", { d: "M22 21v-2a4 4 0 0 0-3-3.87" }),
+      /* @__PURE__ */ jsx("path", { d: "M16 3.13a4 4 0 0 1 0 7.75" })
+    ]
+  }
+);
+const SkillGlyph = ({
+  size = 22,
+  strokeWidth = 2
+}) => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": true,
+    children: [
+      /* @__PURE__ */ jsx("path", { d: "M15 12h-5" }),
+      /* @__PURE__ */ jsx("path", { d: "M15 8h-5" }),
+      /* @__PURE__ */ jsx("path", { d: "M19 17V5a2 2 0 0 0-2-2H4" }),
+      /* @__PURE__ */ jsx("path", { d: "M8 21h12a2 2 0 0 0 2-2v-1a1 1 0 0 0-1-1H11a1 1 0 0 0-1 1v1a2 2 0 1 1-4 0V5a2 2 0 1 0-4 0v2a1 1 0 0 0 1 1h3" })
+    ]
+  }
+);
+const TypingIndicator_css_ts_vanilla = "";
+var TypingDot = createRuntimeFn({ defaultClassName: "_1xj9jyp1 _8nex5a1 _8nex5a0", variantClassNames: { animated: { true: "_1xj9jyp2" }, size: { "300": "_1xj9jyp3", "400": "_1xj9jyp4" }, index: { "0": "_1xj9jyp5", "1": "_1xj9jyp6", "2": "_1xj9jyp7" } }, defaultVariants: { size: "400", animated: true }, compoundVariants: [] });
+const TypingIndicator = as(
+  ({ size, disableAnimation, style, ...props }, ref) => /* @__PURE__ */ jsxs(
+    Box,
+    {
+      as: "span",
+      alignItems: "Center",
+      shrink: "No",
+      style: { gap: toRem(size === "300" ? 1 : 2), ...style },
+      ...props,
+      ref,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: TypingDot({ size, index: "0", animated: !disableAnimation }) }),
+        /* @__PURE__ */ jsx("span", { className: TypingDot({ size, index: "1", animated: !disableAnimation }) }),
+        /* @__PURE__ */ jsx("span", { className: TypingDot({ size, index: "2", animated: !disableAnimation }) })
+      ]
+    }
+  )
+);
+const RobotIcon = ({ filled = false }) => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    width: "1rem",
+    height: "1rem",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: filled ? 2.2 : 1.8,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    style: { display: "block" },
+    "aria-hidden": true,
+    children: [
+      /* @__PURE__ */ jsx("rect", { x: "5", y: "8", width: "14", height: "11", rx: "3" }),
+      /* @__PURE__ */ jsx("line", { x1: "12", y1: "5", x2: "12", y2: "8" }),
+      /* @__PURE__ */ jsx("circle", { cx: "12", cy: "4", r: "1.1", fill: "currentColor", stroke: "none" }),
+      /* @__PURE__ */ jsx("circle", { cx: "9.5", cy: "13.5", r: "1.3", fill: "currentColor", stroke: "none" }),
+      /* @__PURE__ */ jsx("circle", { cx: "14.5", cy: "13.5", r: "1.3", fill: "currentColor", stroke: "none" }),
+      /* @__PURE__ */ jsx("line", { x1: "3", y1: "12", x2: "3", y2: "15" }),
+      /* @__PURE__ */ jsx("line", { x1: "21", y1: "12", x2: "21", y2: "15" })
+    ]
+  }
+);
+function mountAliveMark(container, opts) {
+  var BRAND = "#6C4BE8";
+  var INK = "#16324F";
+  var WHITE = "#FFFFFF";
+  var GCX = 34.52;
+  var GCY = 33.2;
+  var FIT = 1.36;
+  var FIT_SMALL = 1.42;
+  var SMALL_AT = 24;
+  var FACE_CX = 34.75;
+  var DEFAULT_C = { y: 31, gap: 12, r: 3.4, tilt: -4, hex: "#FFCE3A" };
+  var FACE_PATH = "M17 22.5h30a6.5 6.5 0 0 1 6.5 6.5v7a6.5 6.5 0 0 1 -6.5 6.5H29l-8.5 6.5 1.5-6.6A6.6 6.6 0 0 1 16 36v-7a6.5 6.5 0 0 1 1-6.5z";
+  function fitFor(px) {
+    return px < SMALL_AT ? FIT_SMALL : FIT;
+  }
+  function eyeBoost(c2, px) {
+    if (px >= SMALL_AT)
+      return { r: c2.r, gap: c2.gap };
+    var r2 = Math.min(c2.r * 1.18, 4.4);
+    return { r: r2, gap: Math.min(c2.gap * 1.06, 2 * (13 - r2)) };
+  }
+  var DEFAULTS = {
+    size: 160,
+    character: DEFAULT_C,
+    // { y, gap, r, tilt, hex } — any generator character works
+    label: "AG2 Space",
+    blinkMin: 5,
+    // seconds
+    blinkMax: 10,
+    // seconds
+    blinkMs: 120,
+    // one blink, close + open
+    doubleBlinkChance: 0.2,
+    // ~1 in 5 blinks is a double
+    driftMin: 2,
+    // seconds between look-around targets
+    driftMax: 5,
+    driftX: 4,
+    // viewBox units, ± — the pill clip is the hard bound
+    driftY: 1.2,
+    winkMs: 350,
+    squintMs: 420,
+    squintTo: 0.4,
+    lidClosed: 0.08,
+    // The mark does NOT track the pointer continuously by default: a face that follows you
+    // everywhere reads as needy, and in a sidebar it would never sit still. It glances.
+    pointerMode: "glance",
+    // 'off' | 'glance' | 'follow'
+    followRadius: 60,
+    // px from the mark's centre — the radius a glance triggers inside.
+    // Tuned deliberately tight: at sidebar sizes the pointer has to be
+    // basically on the mark before it looks up. No slider — the Pointer
+    // select took that slot; change it here or via setOptions().
+    glanceMs: 1e3,
+    // one glance, before it eases back to idle drift
+    glanceCooldown: 8,
+    // seconds; at most one glance per cooldown, however you wave at it
+    clickLookMs: 1500,
+    // after a click it looks at you for this long, then lets go
+    sleepAfter: 60,
+    // seconds of no pointer activity
+    tiltNudge: 3,
+    // degrees the swipe is knocked on a click
+    doubleClickMs: 600
+  };
+  var o = {}, key;
+  for (key in DEFAULTS)
+    o[key] = DEFAULTS[key];
+  if (opts) {
+    for (key in opts)
+      if (opts[key] !== void 0)
+        o[key] = opts[key];
+  }
+  var c = o.character;
+  var size = o.size;
+  var uid = "am" + Math.random().toString(36).slice(2, 9);
+  var k = fitFor(size);
+  var eb = eyeBoost(c, size);
+  var gap = eb.gap, y = c.y, r = eb.r;
+  var lx = FACE_CX - gap / 2, rx = FACE_CX + gap / 2;
+  var pillY = y - 5;
+  var arcL = "M" + (FACE_CX - gap / 2 - r) + " " + y + "q" + r + " " + r * 1.1 + " " + r * 2 + " 0";
+  var arcR = "M" + (FACE_CX + gap / 2 - r) + " " + y + "q" + r + " " + r * 1.1 + " " + r * 2 + " 0";
+  var tx = (32 - GCX * k).toFixed(2), ty = (32 - GCY * k).toFixed(2);
+  function pillT(tilt) {
+    return "rotate(" + tilt + " " + FACE_CX + " " + y + ")";
+  }
+  container.innerHTML = '<svg class="alive-mark" xmlns="http://www.w3.org/2000/svg" width="' + size + '" height="' + size + '" viewBox="0 0 64 64" fill="none" role="img" aria-label="' + o.label + '"><defs><clipPath id="' + uid + '-pill"><rect class="am-clip" x="20.75" y="' + pillY + '" width="28" height="10" rx="5" transform="' + pillT(c.tilt) + '"/></clipPath></defs><rect x="2" y="2" width="60" height="60" rx="17" fill="' + BRAND + '"/><g transform="translate(' + tx + " " + ty + ") scale(" + k + ')"><g stroke="' + WHITE + '" stroke-width="3.1" stroke-linecap="round" stroke-linejoin="round"><path d="' + FACE_PATH + '"/></g><rect class="am-swipe" x="20.75" y="' + pillY + '" width="28" height="10" rx="5" fill="' + c.hex + '" transform="' + pillT(c.tilt) + '"/><g clip-path="url(#' + uid + '-pill)"><g class="am-look"><g class="am-eye-l"><circle cx="' + lx + '" cy="' + y + '" r="' + r + '" fill="' + INK + '"/></g><g class="am-eye-r"><circle cx="' + rx + '" cy="' + y + '" r="' + r + '" fill="' + INK + '"/></g></g></g><g class="am-dream" opacity="0"><g stroke="' + INK + '" stroke-width="2.6" stroke-linecap="round" fill="none"><path d="' + arcL + '"/><path d="' + arcR + '"/></g><g fill="' + c.hex + '"><circle cx="46" cy="17" r="2.6"/><circle cx="52" cy="12" r="1.8"/></g></g></g></svg>';
+  var svg = container.querySelector("svg");
+  var look = container.querySelector(".am-look");
+  var eyeL = container.querySelector(".am-eye-l");
+  var eyeR = container.querySelector(".am-eye-r");
+  var swipe = container.querySelector(".am-swipe");
+  var clip = container.querySelector(".am-clip");
+  var dream = container.querySelector(".am-dream");
+  var eyes = look.parentNode;
+  var reduced = false;
+  try {
+    reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+  } catch (e) {
+  }
+  var running = true, raf = 0, last = 0;
+  var curX = 0, curY = 0, tgtX = 0, tgtY = 0;
+  var animL = null, animR = null;
+  var tiltCur = c.tilt;
+  var dreamAmt = 0, sleeping = false;
+  var lastActivity = now();
+  var lastClick = -1e9;
+  var pointer = null;
+  var rect = null, rectAt = -1e9;
+  var blinkT = 0, driftT = 0;
+  var glanceUntil = 0, glanceReadyAt = 0, clickLookUntil = 0, gazing = false;
+  function now() {
+    return window.performance && performance.now ? performance.now() : Date.now();
+  }
+  function rnd(a, b) {
+    return a + Math.random() * (b - a);
+  }
+  function setA(el, name, val) {
+    var m = el.__am || (el.__am = {});
+    if (m[name] === val)
+      return;
+    m[name] = val;
+    el.setAttribute(name, val);
+  }
+  function lidAt(a, t) {
+    if (!a)
+      return 1;
+    var e = t - a.t0;
+    if (e >= a.dur)
+      return 1;
+    var edge = reduced ? 0 : Math.min(a.edge, a.dur / 2);
+    var p = 1;
+    if (edge > 0) {
+      if (e < edge)
+        p = e / edge;
+      else if (e > a.dur - edge)
+        p = (a.dur - e) / edge;
+      p = p * p * (3 - 2 * p);
+    }
+    return 1 + (a.to - 1) * p;
+  }
+  function scheduleBlink() {
+    clearTimeout(blinkT);
+    var mult = reduced ? 2 : 1;
+    blinkT = setTimeout(function() {
+      if (!sleeping)
+        doBlink(Math.random() < o.doubleBlinkChance);
+      scheduleBlink();
+    }, rnd(o.blinkMin, o.blinkMax) * 1e3 * mult);
+  }
+  function doBlink(dbl) {
+    var t = now();
+    animL = animR = { t0: t, dur: o.blinkMs, edge: o.blinkMs / 2, to: o.lidClosed };
+    if (dbl)
+      setTimeout(function() {
+        if (!running)
+          return;
+        var t2 = now();
+        animL = animR = { t0: t2, dur: o.blinkMs, edge: o.blinkMs / 2, to: o.lidClosed };
+      }, o.blinkMs + 90);
+  }
+  function doWink() {
+    var t = now(), a = { t0: t, dur: o.winkMs, edge: Math.min(70, o.winkMs / 2), to: o.lidClosed };
+    if (Math.random() < 0.5)
+      animL = a;
+    else
+      animR = a;
+    tiltCur = c.tilt + (Math.random() < 0.5 ? -o.tiltNudge : o.tiltNudge);
+  }
+  function doSquint() {
+    var t = now();
+    animL = animR = { t0: t, dur: o.squintMs, edge: Math.min(110, o.squintMs / 2), to: o.squintTo };
+    tiltCur = c.tilt + o.tiltNudge;
+    if (!reduced) {
+      tgtX = 0;
+      tgtY = -o.driftY;
+    }
+  }
+  function scheduleDrift() {
+    clearTimeout(driftT);
+    driftT = setTimeout(function() {
+      if (!reduced && !sleeping && !gazing) {
+        tgtX = rnd(-o.driftX, o.driftX);
+        tgtY = rnd(-o.driftY, o.driftY);
+      }
+      scheduleDrift();
+    }, rnd(o.driftMin, o.driftMax) * 1e3);
+  }
+  function frame(t) {
+    if (!running)
+      return;
+    var dt = last ? Math.min(0.05, (t - last) / 1e3) : 0.016;
+    last = t;
+    var ease = function(tau) {
+      return reduced ? 1 : 1 - Math.exp(-dt / tau);
+    };
+    if (t - rectAt > 250) {
+      rect = svg.getBoundingClientRect();
+      rectAt = t;
+    }
+    var want = (t - lastActivity) / 1e3 >= o.sleepAfter;
+    if (want !== sleeping) {
+      sleeping = want;
+      if (!sleeping)
+        doBlink(false);
+      else {
+        tgtX = 0;
+        tgtY = 0;
+      }
+    }
+    dreamAmt += ((sleeping ? 1 : 0) - dreamAmt) * ease(0.12);
+    if (dreamAmt < 1e-3)
+      dreamAmt = 0;
+    if (dreamAmt > 0.999)
+      dreamAmt = 1;
+    var gx = null, gy = null;
+    if (!reduced && !sleeping && pointer && rect && o.pointerMode !== "off") {
+      var cxp = rect.left + rect.width / 2, cyp = rect.top + rect.height / 2;
+      var dx = pointer.x - cxp, dy = pointer.y - cyp;
+      var d = Math.max(1e-3, Math.sqrt(dx * dx + dy * dy));
+      var inside = d <= o.followRadius;
+      var aim = function(soft) {
+        var m = Math.min(1, d / soft);
+        gx = dx / d * o.driftX * m;
+        gy = dy / d * o.driftY * m;
+      };
+      if (o.pointerMode === "follow") {
+        if (inside)
+          aim(80);
+      } else {
+        if (!glanceUntil && inside && t >= glanceReadyAt)
+          glanceUntil = t + o.glanceMs;
+        if (glanceUntil) {
+          if (t < glanceUntil)
+            aim(80);
+          else {
+            glanceUntil = 0;
+            glanceReadyAt = t + o.glanceCooldown * 1e3;
+          }
+        }
+      }
+      if (t < clickLookUntil)
+        aim(25);
+    }
+    var wasGazing = gazing;
+    gazing = gx !== null;
+    if (gazing) {
+      tgtX = gx;
+      tgtY = gy;
+    } else if (wasGazing || reduced || sleeping) {
+      tgtX = 0;
+      tgtY = 0;
+    }
+    curX += (tgtX - curX) * ease(0.18);
+    curY += (tgtY - curY) * ease(0.18);
+    setA(look, "transform", "translate(" + curX.toFixed(3) + " " + curY.toFixed(3) + ")");
+    var sl = lidAt(animL, t), sr = lidAt(animR, t);
+    if (animL && t - animL.t0 >= animL.dur)
+      animL = null;
+    if (animR && t - animR.t0 >= animR.dur)
+      animR = null;
+    setA(
+      eyeL,
+      "transform",
+      "translate(" + lx + " " + y + ") scale(1 " + sl.toFixed(3) + ") translate(" + -lx + " " + -y + ")"
+    );
+    setA(
+      eyeR,
+      "transform",
+      "translate(" + rx + " " + y + ") scale(1 " + sr.toFixed(3) + ") translate(" + -rx + " " + -y + ")"
+    );
+    tiltCur += (c.tilt - tiltCur) * ease(0.22);
+    var tstr = pillT(tiltCur.toFixed(3));
+    setA(swipe, "transform", tstr);
+    setA(clip, "transform", tstr);
+    setA(swipe, "opacity", (1 - 0.2 * dreamAmt).toFixed(3));
+    setA(dream, "opacity", dreamAmt.toFixed(3));
+    setA(eyes, "opacity", (1 - dreamAmt).toFixed(3));
+    raf = requestAnimationFrame(frame);
+  }
+  function activity() {
+    lastActivity = now();
+  }
+  function onMove(e) {
+    pointer = { x: e.clientX, y: e.clientY };
+    activity();
+  }
+  function onDown() {
+    activity();
+  }
+  function onKey() {
+    activity();
+  }
+  function onClick() {
+    activity();
+    var t = now();
+    if (t - lastClick < o.doubleClickMs)
+      doSquint();
+    else
+      doWink();
+    lastClick = t;
+    clickLookUntil = t + o.clickLookMs;
+    glanceReadyAt = clickLookUntil + o.glanceCooldown * 1e3;
+  }
+  window.addEventListener("pointermove", onMove, { passive: true });
+  window.addEventListener("pointerdown", onDown, { passive: true });
+  window.addEventListener("keydown", onKey, { passive: true });
+  container.addEventListener("click", onClick);
+  scheduleBlink();
+  scheduleDrift();
+  raf = requestAnimationFrame(frame);
+  return {
+    blink: function() {
+      doBlink(false);
+    },
+    wink: function() {
+      doWink();
+    },
+    sleep: function() {
+      lastActivity = now() - o.sleepAfter * 1e3 - 1;
+    },
+    wake: function() {
+      lastActivity = now();
+    },
+    setOptions: function(partial) {
+      for (var p in partial)
+        if (partial[p] !== void 0)
+          o[p] = partial[p];
+      if (o.blinkMax < o.blinkMin)
+        o.blinkMax = o.blinkMin;
+      scheduleBlink();
+      scheduleDrift();
+    },
+    destroy: function() {
+      running = false;
+      cancelAnimationFrame(raf);
+      clearTimeout(blinkT);
+      clearTimeout(driftT);
+      window.removeEventListener("pointermove", onMove);
+      window.removeEventListener("pointerdown", onDown);
+      window.removeEventListener("keydown", onKey);
+      container.removeEventListener("click", onClick);
+      container.innerHTML = "";
+    }
+  };
+}
+const MARK_ALT = "AG2 Space";
+const AliveMark = ({
+  size = 40,
+  label = "AG2 Space",
+  onClick,
+  character
+}) => {
+  const ref = useRef(null);
+  useEffect(() => {
+    const container = ref.current;
+    if (!container)
+      return void 0;
+    const handle = mountAliveMark(container, {
+      size,
+      label: MARK_ALT,
+      ...character ? { character } : {}
+    });
+    return () => handle.destroy();
+  }, [size, character]);
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      ref,
+      "aria-label": label,
+      onClick,
+      style: {
+        // Fixed box so the header's flex rules cannot reflow the SVG off 40x40.
+        width: size,
+        height: size,
+        flexShrink: 0,
+        display: "block",
+        padding: 0,
+        border: "none",
+        background: "none",
+        lineHeight: 0,
+        cursor: "pointer"
+      }
+    }
+  );
+};
+const ServerBadge = as(({ as: AsServerBadge = "div", fill, server, ...props }, ref) => /* @__PURE__ */ jsx(Badge, { as: AsServerBadge, variant: "Secondary", fill, radii: "300", ...props, ref, children: /* @__PURE__ */ jsx(Text, { as: "span", size: "L400", truncate: true, children: server }) }));
+const styles_css_ts_vanilla = "";
+var StackedAvatar$1 = createRuntimeFn({ defaultClassName: "_7lp3ua0", variantClassNames: { size: { "200": "_7lp3ua1", "300": "_7lp3ua2", "400": "_7lp3ua3", "500": "_7lp3ua4" }, variant: { Background: "_7lp3ua5", Surface: "_7lp3ua6", SurfaceVariant: "_7lp3ua7", Primary: "_7lp3ua8", Secondary: "_7lp3ua9", Success: "_7lp3uaa", Warning: "_7lp3uab", Critical: "_7lp3uac" } }, defaultVariants: { size: "400", variant: "Surface" }, compoundVariants: [] });
+const StackedAvatar = as(
+  ({ size, variant, className, ...props }, ref) => /* @__PURE__ */ jsx(
+    Avatar,
+    {
+      size,
+      className: classNames(StackedAvatar$1({ size, variant }), className),
+      ...props,
+      ref
+    }
+  )
+);
+const ComposeIcon = () => /* @__PURE__ */ jsxs(Fragment, { children: [
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M12 4H6a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-6",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M17.5 3.5a2.12 2.12 0 0 1 3 3L12 15l-4 1 1-4 8.5-8.5Z",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  )
+] });
+const Starfield_css_ts_vanilla = "";
+var Starfield$1 = "_4j0z2c1";
+var StarfieldHost = "_4j0z2c0";
+const STAR_DENSITY = 1 / 9e3;
+const LINK_DIST = 120;
+const INK_RESAMPLE_FRAMES = 90;
+const Starfield = ({ className }) => {
+  const canvasRef = useRef(null);
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas)
+      return void 0;
+    const ctx = canvas.getContext("2d");
+    if (!ctx)
+      return void 0;
+    const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    let stars = [];
+    let raf = 0;
+    let frame = 0;
+    let width = 0;
+    let height = 0;
+    let ink = "128, 128, 128";
+    const sampleInk = () => {
+      const rgb = getComputedStyle(canvas).color.match(/\d+/g);
+      if (rgb && rgb.length >= 3)
+        ink = `${rgb[0]}, ${rgb[1]}, ${rgb[2]}`;
+    };
+    const seed = () => {
+      width = canvas.clientWidth;
+      height = canvas.clientHeight;
+      const dpr = Math.min(window.devicePixelRatio || 1, 2);
+      canvas.width = Math.max(1, Math.round(width * dpr));
+      canvas.height = Math.max(1, Math.round(height * dpr));
+      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+      const count = Math.round(width * height * STAR_DENSITY);
+      stars = Array.from({ length: count }, () => ({
+        x: Math.random() * width,
+        y: Math.random() * height,
+        r: 0.6 + Math.random() * 1.1,
+        phase: Math.random() * Math.PI * 2,
+        twinkle: 0.01 + Math.random() * 0.02,
+        drift: 0.02 + Math.random() * 0.05
+      }));
+      sampleInk();
+    };
+    const draw = () => {
+      ctx.clearRect(0, 0, width, height);
+      ctx.lineWidth = 1;
+      for (let i = 0; i < stars.length; i += 1) {
+        for (let j = i + 1; j < stars.length; j += 1) {
+          const dx = stars[i].x - stars[j].x;
+          const dy = stars[i].y - stars[j].y;
+          const dist = Math.sqrt(dx * dx + dy * dy);
+          if (dist < LINK_DIST) {
+            ctx.strokeStyle = `rgba(${ink}, ${(1 - dist / LINK_DIST) * 0.1})`;
+            ctx.beginPath();
+            ctx.moveTo(stars[i].x, stars[i].y);
+            ctx.lineTo(stars[j].x, stars[j].y);
+            ctx.stroke();
+          }
+        }
+      }
+      for (let i = 0; i < stars.length; i += 1) {
+        const star = stars[i];
+        const alpha = reduceMotion ? 0.5 : 0.35 + 0.3 * (1 + Math.sin(star.phase + frame * star.twinkle)) * 0.5;
+        ctx.fillStyle = `rgba(${ink}, ${alpha})`;
+        ctx.beginPath();
+        ctx.arc(star.x, star.y, star.r, 0, Math.PI * 2);
+        ctx.fill();
+      }
+    };
+    const tick = () => {
+      frame += 1;
+      for (let i = 0; i < stars.length; i += 1) {
+        const star = stars[i];
+        star.x += star.drift;
+        star.y -= star.drift * 0.4;
+        if (star.x > width + 2)
+          star.x = -2;
+        if (star.y < -2)
+          star.y = height + 2;
+      }
+      if (frame % INK_RESAMPLE_FRAMES === 0)
+        sampleInk();
+      draw();
+      raf = window.requestAnimationFrame(tick);
+    };
+    seed();
+    if (reduceMotion) {
+      draw();
+    } else {
+      raf = window.requestAnimationFrame(tick);
+    }
+    const resizeObserver = new ResizeObserver(() => {
+      seed();
+      draw();
+    });
+    resizeObserver.observe(canvas);
+    return () => {
+      window.cancelAnimationFrame(raf);
+      resizeObserver.disconnect();
+    };
+  }, []);
+  return /* @__PURE__ */ jsx("canvas", { ref: canvasRef, className: classNames(Starfield$1, className), "aria-hidden": true });
+};
+const SplashScreen_css_ts_vanilla = "";
+var SplashScreen$1 = "wf38060";
+var SplashScreenFooter = "wf38061";
+const SplashScreen = ({ children }) => /* @__PURE__ */ jsxs(Box, { className: classNames(SplashScreen$1, StarfieldHost), direction: "Column", children: [
+  /* @__PURE__ */ jsx(Starfield, {}),
+  children,
+  /* @__PURE__ */ jsx(Box, { className: SplashScreenFooter, shrink: "No", alignItems: "Center", justifyContent: "Center", children: /* @__PURE__ */ jsx(Text, { size: "H2", align: "Center", children: "AG2 Space" }) })
+] });
+const style_css_ts_vanilla = "";
+var PageContent$1 = "_18hg0vgb _8nex5a1 _8nex5a0";
+var PageContentCenter$1 = "_18hg0vgf _8nex5a1 _8nex5a0";
+var PageHeader$1 = createRuntimeFn({ defaultClassName: "_18hg0vg7", variantClassNames: { compact: { true: "_18hg0vg8" }, balance: { true: "_18hg0vg9" }, outlined: { true: "_18hg0vga" } }, defaultVariants: { outlined: false }, compoundVariants: [] });
+var PageHeroEmpty$1 = "_18hg0vgc _8nex5a1 _8nex5a0";
+var PageHeroEmptyCompact = "_18hg0vgd _8nex5a1 _8nex5a0";
+var PageHeroSection$1 = "_18hg0vge _8nex5a1 _8nex5a0";
+var PageNav$1 = createRuntimeFn({ defaultClassName: "", variantClassNames: { size: { "200": "_18hg0vg0", "300": "_18hg0vg1", "400": "_18hg0vg2" } }, defaultVariants: { size: "400" }, compoundVariants: [] });
+var PageNavContent$1 = "_18hg0vg6";
+var PageNavHeader$1 = createRuntimeFn({ defaultClassName: "_18hg0vg4", variantClassNames: { outlined: { true: "_18hg0vg5" } }, defaultVariants: { outlined: false }, compoundVariants: [] });
+var PageNavResizeHandle = "_18hg0vg3";
+const getResizeObserverEntry = (target, entries) => entries.find((entry) => entry.target === target);
+const useResizeObserver = (onResizeCallback, observeElement) => {
+  const resizeObserver = useMemo(() => new ResizeObserver(onResizeCallback), [onResizeCallback]);
+  useEffect(() => () => resizeObserver == null ? void 0 : resizeObserver.disconnect(), [resizeObserver]);
+  useEffect(() => {
+    const element = typeof observeElement === "function" ? observeElement() : observeElement;
+    if (element)
+      resizeObserver.observe(element);
+    return () => {
+      if (element)
+        resizeObserver.unobserve(element);
+    };
+  }, [resizeObserver, observeElement]);
+  return resizeObserver;
+};
+const useElementSizeObserver = (element, onResize) => {
+  useResizeObserver(
+    useCallback(
+      (entries) => {
+        const target = element();
+        if (!target)
+          return;
+        const targetEntry = getResizeObserverEntry(target, entries);
+        if (targetEntry) {
+          const { clientWidth, clientHeight } = targetEntry.target;
+          onResize(clientWidth, clientHeight, target);
+        }
+      },
+      [element, onResize]
+    ),
+    element
+  );
+};
+const TABLET_BREAKPOINT = 1124;
+const MOBILE_BREAKPOINT = 750;
+var ScreenSize = /* @__PURE__ */ ((ScreenSize2) => {
+  ScreenSize2["Desktop"] = "Desktop";
+  ScreenSize2["Tablet"] = "Tablet";
+  ScreenSize2["Mobile"] = "Mobile";
+  return ScreenSize2;
+})(ScreenSize || {});
+const getScreenSize = (width) => {
+  if (width > TABLET_BREAKPOINT)
+    return "Desktop";
+  if (width > MOBILE_BREAKPOINT)
+    return "Tablet";
+  return "Mobile";
+};
+const useScreenSize = () => {
+  const [size, setSize] = useState(getScreenSize(document.body.clientWidth));
+  useElementSizeObserver(
+    useCallback(() => document.body, []),
+    useCallback((width) => setSize(getScreenSize(width)), [])
+  );
+  return size;
+};
+const ScreenSizeContext = createContext(null);
+const ScreenSizeProvider = ScreenSizeContext.Provider;
+const useScreenSizeContext = () => {
+  const screenSize = useContext(ScreenSizeContext);
+  if (screenSize === null) {
+    throw new Error("Screen size not provided!");
+  }
+  return screenSize;
+};
+function beginDragOverlay(cursor) {
+  const overlay = document.createElement("div");
+  overlay.style.cssText = `position:fixed;inset:0;z-index:2147483647;cursor:${cursor};background:transparent`;
+  document.body.appendChild(overlay);
+  return () => overlay.remove();
+}
+const PageRoot = ({ nav, children }) => (
+  // No divider between nav and content — the seam reads by the panel/content
+  // tone step alone, so the line doesn't clutter the boundary (owner, 2026-07-11).
+  /* @__PURE__ */ jsxs(Box, { grow: "Yes", className: ContainerColor({ variant: "Background" }), children: [
+    nav,
+    children
+  ] })
+);
+const ROOM_NAV_COLLAPSED_KEY = "roomNavCollapsed";
+const navCollapseListeners = /* @__PURE__ */ new Set();
+const readNavCollapsed = () => {
+  try {
+    return localStorage.getItem(ROOM_NAV_COLLAPSED_KEY) === "1";
+  } catch {
+    return false;
+  }
+};
+function useRoomNavCollapsed() {
+  const [collapsed, set] = useState(readNavCollapsed);
+  useEffect(() => {
+    const cb = () => set(readNavCollapsed());
+    navCollapseListeners.add(cb);
+    return () => {
+      navCollapseListeners.delete(cb);
+    };
+  }, []);
+  const toggle = useCallback(() => {
+    try {
+      localStorage.setItem(ROOM_NAV_COLLAPSED_KEY, readNavCollapsed() ? "0" : "1");
+    } catch {
+    }
+    navCollapseListeners.forEach((cb) => cb());
+  }, []);
+  return [collapsed, toggle];
+}
+const ROOM_NAV_WIDTH_KEY = "roomNavWidth";
+const NAV_MIN_WIDTH = 180;
+const NAV_MAX_WIDTH = 480;
+const navBtnStyle = {
+  cursor: "pointer",
+  background: "transparent",
+  border: "none",
+  color: "inherit",
+  lineHeight: 1,
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center"
+};
+const PageNav = ({ size, children }) => {
+  const screenSize = useScreenSizeContext();
+  const isMobile = screenSize === ScreenSize.Mobile;
+  const [collapsed, toggle] = useRoomNavCollapsed();
+  const defaultWidth = size === "300" ? 222 : 256;
+  const [width, setWidth] = useState(() => {
+    try {
+      const raw = localStorage.getItem(ROOM_NAV_WIDTH_KEY);
+      const n = raw ? parseInt(raw, 10) : NaN;
+      if (!Number.isNaN(n))
+        return Math.min(NAV_MAX_WIDTH, Math.max(NAV_MIN_WIDTH, n));
+    } catch {
+    }
+    return defaultWidth;
+  });
+  const [resizing, setResizing] = useState(false);
+  const startResize = (e) => {
+    e.preventDefault();
+    const startX = e.clientX;
+    const startWidth = width;
+    setResizing(true);
+    const releaseOverlay = beginDragOverlay("col-resize");
+    const onMove = (me) => {
+      const next = Math.min(
+        NAV_MAX_WIDTH,
+        Math.max(NAV_MIN_WIDTH, startWidth + (me.clientX - startX))
+      );
+      setWidth(next);
+    };
+    const onUp = () => {
+      document.removeEventListener("mousemove", onMove);
+      document.removeEventListener("mouseup", onUp);
+      releaseOverlay();
+      setResizing(false);
+      setWidth((w) => {
+        try {
+          localStorage.setItem(ROOM_NAV_WIDTH_KEY, String(w));
+        } catch {
+        }
+        return w;
+      });
+    };
+    document.addEventListener("mousemove", onMove);
+    document.addEventListener("mouseup", onUp);
+  };
+  if (collapsed && !isMobile) {
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
+        shrink: "No",
+        direction: "Column",
+        alignItems: "Center",
+        className: ContainerColor({ variant: "Background" }),
+        style: { width: toRem(30), paddingTop: toRem(8) },
+        children: /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            title: "Show room list",
+            onClick: toggle,
+            style: { ...navBtnStyle, fontSize: 18, padding: toRem(4) },
+            children: "›"
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      grow: isMobile ? "Yes" : void 0,
+      className: PageNav$1({ size }),
+      shrink: isMobile ? "Yes" : "No",
+      style: isMobile ? { position: "relative" } : { width: `${width}px`, position: "relative" },
+      children: [
+        /* @__PURE__ */ jsx(Box, { grow: "Yes", direction: "Column", children }),
+        !isMobile && // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- drag-to-resize handle; mouse-only by design, ported as-is
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            role: "separator",
+            "aria-orientation": "vertical",
+            title: "Drag to resize",
+            onMouseDown: startResize,
+            "data-resizing": resizing,
+            className: PageNavResizeHandle
+          }
+        )
+      ]
+    }
+  );
+};
+const PageNavHeader = as(
+  ({ className, outlined, ...props }, ref) => /* @__PURE__ */ jsx(
+    Header,
+    {
+      className: classNames(PageNavHeader$1({ outlined }), className),
+      variant: "Background",
+      size: "500",
+      ...props,
+      ref
+    }
+  )
+);
+const PageNavContent = ({
+  scrollRef,
+  children
+}) => /* @__PURE__ */ jsx(Box, { grow: "Yes", direction: "Column", children: /* @__PURE__ */ jsx(
+  Scroll,
+  {
+    ref: scrollRef,
+    variant: "Background",
+    direction: "Vertical",
+    size: "300",
+    hideTrack: true,
+    visibility: "Hover",
+    children: /* @__PURE__ */ jsx("div", { className: PageNavContent$1, children })
+  }
+) });
+const Page = as(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Box,
+  {
+    grow: "Yes",
+    direction: "Column",
+    className: classNames(ContainerColor({ variant: "Surface" }), className),
+    ...props,
+    ref
+  }
+));
+const PageHeader = as(
+  ({ className, outlined, balance, ...props }, ref) => /* @__PURE__ */ jsx(
+    Header,
+    {
+      as: "header",
+      size: "500",
+      className: classNames(PageHeader$1({ balance, outlined }), className),
+      ...props,
+      ref
+    }
+  )
+);
+const PageContent = as(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { className: classNames(PageContent$1, className), ...props, ref }));
+const PageHeroEmpty = ({
+  children,
+  compact
+}) => /* @__PURE__ */ jsx(
+  Box,
+  {
+    className: classNames(
+      ContainerColor({ variant: "SurfaceVariant" }),
+      compact ? PageHeroEmptyCompact : PageHeroEmpty$1
+    ),
+    direction: "Column",
+    alignItems: "Center",
+    justifyContent: "Center",
+    gap: "200",
+    children
+  }
+);
+const PageHeroSection = as(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    Box,
+    {
+      direction: "Column",
+      className: classNames(PageHeroSection$1, className),
+      ...props,
+      ref
+    }
+  )
+);
+const PageHero = ({
+  icon,
+  title,
+  subTitle,
+  children
+}) => /* @__PURE__ */ jsxs(Box, { direction: "Column", gap: "400", children: [
+  /* @__PURE__ */ jsx(Box, { direction: "Column", alignItems: "Center", gap: "200", children: icon }),
+  /* @__PURE__ */ jsxs(Box, { as: "h2", direction: "Column", gap: "200", alignItems: "Center", children: [
+    /* @__PURE__ */ jsx(Text, { align: "Center", size: "H2", children: title }),
+    /* @__PURE__ */ jsx(Text, { align: "Center", priority: "400", children: subTitle })
+  ] }),
+  children
+] });
+const PageContentCenter = as(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { className: classNames(PageContentCenter$1, className), ...props, ref }));
+const NavCollapseRow = () => {
+  const [, toggle] = useRoomNavCollapsed();
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      shrink: "No",
+      alignItems: "Center",
+      justifyContent: "End",
+      style: { height: toRem(22), paddingRight: config.space.S200 },
+      children: /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          title: "Hide room list",
+          onClick: toggle,
+          style: {
+            background: "none",
+            border: "none",
+            cursor: "pointer",
+            fontSize: 15,
+            lineHeight: 1,
+            padding: toRem(2),
+            opacity: 0.65,
+            color: "inherit"
+          },
+          children: "‹"
+        }
+      )
+    }
+  );
+};
 export {
+  AgentGlyph,
+  AgentMark,
+  AgentNameTag,
+  AliveMark,
   Avatar,
   AvatarFallback,
   AvatarImage,
@@ -3634,7 +4834,9 @@ export {
   Button,
   Checkbox,
   Chip,
+  ComposeIcon,
   CrossSizeVariant,
+  CutoutCard,
   DefaultReset,
   Dialog,
   Disabled,
@@ -3643,41 +4845,86 @@ export {
   Icon,
   IconButton,
   Icons,
+  InfoCard,
   Input,
   Line,
+  MOBILE_BREAKPOINT,
   Menu,
   MenuItem,
   Modal,
+  NavCollapseRow,
   Overlay,
   OverlayBackdrop,
   OverlayCenter,
   OverlayContainerProvider,
+  Page,
+  PageContent,
+  PageContentCenter,
+  PageHeader,
+  PageHero,
+  PageHeroEmpty,
+  PageHeroSection,
+  PageNav,
+  PageNavContent,
+  PageNavHeader,
+  PageRoot,
+  PeopleGlyph,
   PopOut,
   PopOutContainerProvider,
   Portal,
   ProgressBar,
   RadiiVariant,
   RadioButton,
+  RobotIcon,
+  ScreenSize,
+  ScreenSizeProvider,
   Scroll,
+  SequenceCard,
+  ServerBadge,
+  SettingTile,
+  Sidebar,
+  SidebarAvatar,
+  SidebarContent,
+  SidebarFolder,
+  SidebarFolderDropTarget,
+  SidebarItem,
+  SidebarItemBadge,
+  SidebarItemTooltip,
+  SidebarStack,
+  SidebarStackSeparator,
+  SkillGlyph,
   Spinner,
+  SplashScreen,
+  StackedAvatar,
+  Starfield,
   Switch,
+  TABLET_BREAKPOINT,
   Text,
   TextArea,
   TextReset,
   Tooltip,
   TooltipContainerProvider,
   TooltipProvider,
+  TypingIndicator,
   as,
   color,
   config,
   configClass,
   getRelativeFixedPosition,
+  getResizeObserverEntry,
+  getScreenSize,
   lightTheme,
+  mountAliveMark,
   percent,
   pxToRem,
   toRem,
+  useElementSizeObserver,
   useOverlayContainer,
   usePopOutContainer,
+  useResizeObserver,
+  useRoomNavCollapsed,
+  useScreenSize,
+  useScreenSizeContext,
   useTooltipContainer,
   vars,
   varsClass