@ag2/weave 0.11.0 → 0.13.0

package/dist/index.js

@@ -4947,7 +4947,7 @@ const e$x = /* @__PURE__ */ new Map([
 const e$w = a$T.forwardRef((r2, t2) => /* @__PURE__ */ a$T.createElement(p$5, { ref: t2, ...r2, weights: e$x }));
 e$w.displayName = "SunIcon";
 const s$4 = e$w;
-const H = /* @__PURE__ */ new Map([
+const H$1 = /* @__PURE__ */ new Map([
   [
     "bold",
     /* @__PURE__ */ a$T.createElement(a$T.Fragment, null, /* @__PURE__ */ a$T.createElement("path", { d: "M224,44H32A12,12,0,0,0,20,56V192a20,20,0,0,0,20,20H216a20,20,0,0,0,20-20V56A12,12,0,0,0,224,44ZM44,116H76v24H44Zm56,0H212v24H100ZM212,68V92H44V68ZM44,164H76v24H44Zm56,24V164H212v24Z" }))
@@ -4973,7 +4973,7 @@ const H = /* @__PURE__ */ new Map([
     /* @__PURE__ */ a$T.createElement(a$T.Fragment, null, /* @__PURE__ */ a$T.createElement("path", { d: "M224,52H32a4,4,0,0,0-4,4V192a12,12,0,0,0,12,12H216a12,12,0,0,0,12-12V56A4,4,0,0,0,224,52ZM36,108H84v40H36Zm56,0H220v40H92ZM220,60v40H36V60ZM36,192V156H84v40H40A4,4,0,0,1,36,192Zm180,4H92V156H220v36A4,4,0,0,1,216,196Z" }))
   ]
 ]);
-const o$a = a$T.forwardRef((a2, r2) => /* @__PURE__ */ a$T.createElement(p$5, { ref: r2, ...a2, weights: H }));
+const o$a = a$T.forwardRef((a2, r2) => /* @__PURE__ */ a$T.createElement(p$5, { ref: r2, ...a2, weights: H$1 }));
 o$a.displayName = "TableIcon";
 const n$e = o$a;
 const e$v = /* @__PURE__ */ new Map([
@@ -6124,7 +6124,7 @@ const Input = forwardRef(
   }
 );
 const Form_css_ts_vanilla = "";
-var Body$1 = "_1699xxt1";
+var Body$2 = "_1699xxt1";
 var Card = "_1699xxt8";
 var CardTone = createRuntimeFn({ defaultClassName: "", variantClassNames: { variant: { Surface: "_1699xxt9", SurfaceVariant: "_1699xxta", Background: "_1699xxtb", Primary: "_1699xxtc", Secondary: "_1699xxtd", Success: "_1699xxte", Warning: "_1699xxtf", Critical: "_1699xxtg" } }, defaultVariants: {}, compoundVariants: [] });
 var Children = "_1699xxt4";
@@ -6147,7 +6147,7 @@ const FormRow = forwardRef(
     }) : after;
     return /* @__PURE__ */ jsx(FormContext.Provider, { value: context, children: /* @__PURE__ */ jsxs("div", { ref, ...props, "data-weave-form-row": true, className: classNames(Row$1, className), children: [
       before && /* @__PURE__ */ jsx("div", { "data-weave-form-before": true, children: before }),
-      /* @__PURE__ */ jsxs("div", { className: Body$1, "data-weave-form-body": true, children: [
+      /* @__PURE__ */ jsxs("div", { className: Body$2, "data-weave-form-body": true, children: [
         title && /* @__PURE__ */ jsx("div", { className: Label$4, id: labelId, children: title }),
         description && /* @__PURE__ */ jsx("div", { className: Description$1, id: descriptionId, children: description }),
         children && /* @__PURE__ */ jsx("div", { className: Children, "data-weave-form-children": true, children })
@@ -8251,8 +8251,8 @@ const containRe = /paint|layout|strict|content/;
 const isNotNone = (value) => !!value && value !== "none";
 let isWebKitValue;
 function isContainingBlock(elementOrCss) {
-  const css = isElement(elementOrCss) ? getComputedStyle$1(elementOrCss) : elementOrCss;
-  return isNotNone(css.transform) || isNotNone(css.translate) || isNotNone(css.scale) || isNotNone(css.rotate) || isNotNone(css.perspective) || !isWebKit() && (isNotNone(css.backdropFilter) || isNotNone(css.filter)) || willChangeRe.test(css.willChange || "") || containRe.test(css.contain || "");
+  const css2 = isElement(elementOrCss) ? getComputedStyle$1(elementOrCss) : elementOrCss;
+  return isNotNone(css2.transform) || isNotNone(css2.translate) || isNotNone(css2.scale) || isNotNone(css2.rotate) || isNotNone(css2.perspective) || !isWebKit() && (isNotNone(css2.backdropFilter) || isNotNone(css2.filter)) || willChangeRe.test(css2.willChange || "") || containRe.test(css2.contain || "");
 }
 function getContainingBlock(element) {
   let currentNode = getParentNode(element);
@@ -8335,9 +8335,9 @@ function getFrameElement(win) {
   return win.parent && Object.getPrototypeOf(win.parent) ? win.frameElement : null;
 }
 function getCssDimensions(element) {
-  const css = getComputedStyle$1(element);
-  let width = parseFloat(css.width) || 0;
-  let height = parseFloat(css.height) || 0;
+  const css2 = getComputedStyle$1(element);
+  let width = parseFloat(css2.width) || 0;
+  let height = parseFloat(css2.height) || 0;
   const hasOffset = isHTMLElement(element);
   const offsetWidth = hasOffset ? element.offsetWidth : width;
   const offsetHeight = hasOffset ? element.offsetHeight : height;
@@ -8428,9 +8428,9 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetPar
     while (currentIFrame && offsetWin !== currentWin) {
       const iframeScale = getScale(currentIFrame);
       const iframeRect = currentIFrame.getBoundingClientRect();
-      const css = getComputedStyle$1(currentIFrame);
-      const left = iframeRect.left + (currentIFrame.clientLeft + parseFloat(css.paddingLeft)) * iframeScale.x;
-      const top = iframeRect.top + (currentIFrame.clientTop + parseFloat(css.paddingTop)) * iframeScale.y;
+      const css2 = getComputedStyle$1(currentIFrame);
+      const left = iframeRect.left + (currentIFrame.clientLeft + parseFloat(css2.paddingLeft)) * iframeScale.x;
+      const top = iframeRect.top + (currentIFrame.clientTop + parseFloat(css2.paddingTop)) * iframeScale.y;
       x *= iframeScale.x;
       y *= iframeScale.y;
       width *= iframeScale.x;
@@ -10834,11 +10834,11 @@ function makeStyleTag() {
   }
   return tag;
 }
-function injectStyles(tag, css) {
+function injectStyles(tag, css2) {
   if (tag.styleSheet) {
-    tag.styleSheet.cssText = css;
+    tag.styleSheet.cssText = css2;
   } else {
-    tag.appendChild(document.createTextNode(css));
+    tag.appendChild(document.createTextNode(css2));
   }
 }
 function insertStyleTag(tag) {
@@ -15493,7 +15493,7 @@ function mountAliveMark(container, opts) {
   function now() {
     return window.performance && performance.now ? performance.now() : Date.now();
   }
-  function rnd(a2, b) {
+  function rnd2(a2, b) {
     return a2 + Math.random() * (b - a2);
   }
   function setA(el, name, val) {
@@ -15527,7 +15527,7 @@ function mountAliveMark(container, opts) {
       if (!sleeping)
         doBlink(Math.random() < o2.doubleBlinkChance);
       scheduleBlink();
-    }, rnd(o2.blinkMin, o2.blinkMax) * 1e3 * mult);
+    }, rnd2(o2.blinkMin, o2.blinkMax) * 1e3 * mult);
   }
   function doBlink(dbl) {
     var t2 = now();
@@ -15561,18 +15561,18 @@ function mountAliveMark(container, opts) {
     clearTimeout(driftT);
     driftT = setTimeout(function() {
       if (!reduced && !sleeping && !gazing) {
-        tgtX = rnd(-o2.driftX, o2.driftX);
-        tgtY = rnd(-o2.driftY, o2.driftY);
+        tgtX = rnd2(-o2.driftX, o2.driftX);
+        tgtY = rnd2(-o2.driftY, o2.driftY);
       }
       scheduleDrift();
-    }, rnd(o2.driftMin, o2.driftMax) * 1e3);
+    }, rnd2(o2.driftMin, o2.driftMax) * 1e3);
   }
   function frame(t2) {
     if (!running)
       return;
     var dt = last ? Math.min(0.05, (t2 - last) / 1e3) : 0.016;
     last = t2;
-    var ease = function(tau) {
+    var ease2 = function(tau) {
       return reduced ? 1 : 1 - Math.exp(-dt / tau);
     };
     if (t2 - rectAt > 250) {
@@ -15589,7 +15589,7 @@ function mountAliveMark(container, opts) {
         tgtY = 0;
       }
     }
-    dreamAmt += ((sleeping ? 1 : 0) - dreamAmt) * ease(0.12);
+    dreamAmt += ((sleeping ? 1 : 0) - dreamAmt) * ease2(0.12);
     if (dreamAmt < 1e-3)
       dreamAmt = 0;
     if (dreamAmt > 0.999)
@@ -15632,8 +15632,8 @@ function mountAliveMark(container, opts) {
       tgtX = 0;
       tgtY = 0;
     }
-    curX += (tgtX - curX) * ease(0.18);
-    curY += (tgtY - curY) * ease(0.18);
+    curX += (tgtX - curX) * ease2(0.18);
+    curY += (tgtY - curY) * ease2(0.18);
     setA(look, "transform", "translate(" + curX.toFixed(3) + " " + curY.toFixed(3) + ")");
     var sl = lidAt(animL, t2), sr = lidAt(animR, t2);
     if (animL && t2 - animL.t0 >= animL.dur)
@@ -15650,7 +15650,7 @@ function mountAliveMark(container, opts) {
       "transform",
       "translate(" + rx + " " + y + ") scale(1 " + sr.toFixed(3) + ") translate(" + -rx + " " + -y + ")"
     );
-    tiltCur += (c2.tilt - tiltCur) * ease(0.22);
+    tiltCur += (c2.tilt - tiltCur) * ease2(0.22);
     var tstr = pillT(tiltCur.toFixed(3));
     setA(swipe, "transform", tstr);
     setA(clip, "transform", tstr);
@@ -15781,6 +15781,353 @@ const StackedAvatar = as(
   )
 );
 const ComposeIcon = Icons.Compose;
+const PAL = {
+  ember: { c: [249, 163, 88], r: [242, 102, 30] },
+  pink: { c: [248, 206, 254], r: [229, 138, 240] },
+  sky: { c: [173, 219, 255], r: [74, 95, 208] },
+  mint: { c: [160, 226, 191], r: [46, 143, 94] },
+  lemon: { c: [240, 227, 69], r: [141, 191, 58] },
+  lilac: { c: [242, 212, 255], r: [154, 166, 255] },
+  forest: { c: [10, 138, 68], r: [4, 90, 44] },
+  cream: { c: [244, 246, 186], r: [201, 161, 74] }
+};
+const W = 1200;
+const H = 800;
+const TILT = -46.7 * Math.PI / 180;
+const RATIO = 0.5;
+const MAXR = 300;
+const rnd = (a2, b) => a2 + Math.random() * (b - a2);
+const lerp = (a2, b, t2) => a2 + (b - a2) * t2;
+const mix = (a2, b, t2) => a2.map((v, i2) => lerp(v, b[i2], t2));
+const css = (a2) => `rgb(${a2.map(Math.round).join(",")})`;
+const ease = (t2) => t2 < 0.5 ? 2 * t2 * t2 : 1 - (-2 * t2 + 2) ** 2 / 2;
+const make = (x, y, vx, vy, r2, name, from) => ({
+  x,
+  y,
+  vx,
+  vy,
+  r: r2,
+  rd: from ? from.rd : r2,
+  name,
+  c0: from ? from.c : PAL[name].c.slice(),
+  r0: from ? from.rr : PAL[name].r.slice(),
+  c: PAL[name].c.slice(),
+  rr: PAL[name].r.slice(),
+  ct: from ? 0 : 1,
+  age: 0,
+  wob: from ? 1 : 0
+});
+const cur = (o2) => ({ c: mix(o2.c0, o2.c, ease(o2.ct)), r: mix(o2.r0, o2.rr, ease(o2.ct)) });
+function startOrbField(element) {
+  const canvas = element;
+  const ctx = canvas.getContext("2d");
+  if (!ctx)
+    return () => void 0;
+  let orbs = [];
+  let target = 3;
+  let targetTime = 0;
+  let spawnTime = 0;
+  let last = performance.now();
+  let raf = 0;
+  const motion2 = window.matchMedia("(prefers-reduced-motion: reduce)");
+  const pickName = (exclude = []) => {
+    const taken = /* @__PURE__ */ new Set([...exclude, ...orbs.filter((o2) => !o2.leaving).map((o2) => o2.name)]);
+    let pool = Object.keys(PAL).filter((n2) => !taken.has(n2) && n2 !== "ember");
+    if (!pool.length)
+      pool = Object.keys(PAL).filter((n2) => !exclude.includes(n2) && n2 !== "ember");
+    return pool[Math.floor(Math.random() * pool.length)];
+  };
+  [
+    [0.2, 0.25],
+    [0.82, 0.78],
+    [0.85, 0.2]
+  ].forEach(([px, py]) => {
+    const o2 = make(
+      W * px + rnd(-60, 60),
+      H * py + rnd(-50, 50),
+      rnd(-0.6, 0.6),
+      rnd(-0.6, 0.6),
+      rnd(150, 210),
+      pickName()
+    );
+    o2.age = 2;
+    orbs.push(o2);
+  });
+  const spawn = () => {
+    const side = Math.floor(Math.random() * 4);
+    const r2 = rnd(120, 180);
+    const speed = rnd(0.9, 1.7);
+    let x = rnd(80, W - 80);
+    let y = rnd(80, H - 80);
+    if (side === 0)
+      x = -r2;
+    else if (side === 1)
+      x = W + r2;
+    else if (side === 2)
+      y = -r2;
+    else
+      y = H + r2;
+    const tx = rnd(W * 0.25, W * 0.75);
+    const ty = rnd(H * 0.25, H * 0.75);
+    const d = Math.hypot(tx - x, ty - y);
+    orbs.push(make(x, y, (tx - x) / d * speed, (ty - y) / d * speed, r2, pickName()));
+  };
+  const collide = (dt) => {
+    for (let i2 = 0; i2 < orbs.length; i2 += 1) {
+      for (let j = i2 + 1; j < orbs.length; j += 1) {
+        const a2 = orbs[i2];
+        const b = orbs[j];
+        if (a2.age >= 0.8 && b.age >= 0.8) {
+          const dx = b.x - a2.x;
+          const dy = b.y - a2.y;
+          const u = dx * Math.cos(TILT) + dy * Math.sin(TILT);
+          const v = -dx * Math.sin(TILT) + dy * Math.cos(TILT);
+          const R = (a2.rd + b.rd) * 0.92;
+          if (u * u / (R * R) + v * v / (R * R * RATIO * RATIO) < 1) {
+            const big = a2.r >= b.r ? a2 : b;
+            const small = big === a2 ? b : a2;
+            const da = Math.min(small.r * small.r, 14e3 * dt);
+            small.r = Math.sqrt(Math.max(0, small.r * small.r - da));
+            small.rd = Math.min(small.rd, small.r + 6);
+            big.r = Math.sqrt(big.r * big.r + da);
+            const cs = cur(small);
+            const cb = cur(big);
+            const k = Math.min(0.08, da / (big.r * big.r));
+            big.c0 = mix(cb.c, cs.c, k * 3);
+            big.r0 = mix(cb.r, cs.r, k * 3);
+            big.c = mix(big.c, cs.c, k * 3);
+            big.rr = mix(big.rr, cs.r, k * 3);
+            small.x += (big.x - small.x) * 0.05;
+            small.y += (big.y - small.y) * 0.05;
+            if (small.r < 10) {
+              orbs.splice(orbs.indexOf(small), 1);
+              big.wob = 1;
+              const c2 = cur(big);
+              big.name = pickName([big.name]);
+              big.c0 = c2.c;
+              big.r0 = c2.r;
+              big.c = PAL[big.name].c.slice();
+              big.rr = PAL[big.name].r.slice();
+              big.ct = 0;
+              if (big.r > MAXR) {
+                const from = cur(big);
+                orbs.splice(orbs.indexOf(big), 1);
+                for (let n2 = 0; n2 < 2; n2 += 1) {
+                  const angle = n2 * Math.PI + rnd(-0.4, 0.4);
+                  const speed = rnd(1.4, 2.2);
+                  orbs.push(
+                    make(
+                      big.x,
+                      big.y,
+                      Math.cos(angle) * speed + big.vx,
+                      Math.sin(angle) * speed + big.vy,
+                      big.r * 0.42,
+                      pickName(),
+                      { rd: big.r * 0.5, c: from.c, rr: from.r }
+                    )
+                  );
+                }
+              }
+              return;
+            }
+          }
+        }
+      }
+    }
+  };
+  const step = (dt) => {
+    spawnTime += dt;
+    targetTime += dt;
+    if (targetTime > (target === 3 ? 8 : 11)) {
+      targetTime = 0;
+      target = target === 3 ? 2 : 3;
+      if (target === 2 && orbs.length > 2) {
+        const oldest = orbs.filter((o2) => !o2.leaving).sort((a2, b) => b.age - a2.age)[0];
+        if (oldest) {
+          oldest.leaving = true;
+          const d = Math.hypot(oldest.x - W / 2, oldest.y - H / 2) || 1;
+          oldest.lx = (oldest.x - W / 2) / d;
+          oldest.ly = (oldest.y - H / 2) / d;
+        }
+      }
+    }
+    if (spawnTime > 2.4 && orbs.filter((o2) => !o2.leaving).length < target) {
+      spawnTime = 0;
+      spawn();
+    }
+    orbs.forEach((orb) => {
+      const o2 = orb;
+      o2.age += dt;
+      o2.x += o2.vx * dt * 60;
+      o2.y += o2.vy * dt * 60;
+      o2.vx *= 0.999;
+      o2.vy *= 0.999;
+      const k = 0.03 * dt * 60;
+      if (o2.leaving) {
+        o2.vx += (o2.lx ?? 0) * k;
+        o2.vy += (o2.ly ?? 0) * k;
+      } else if (o2.age > 3) {
+        if (o2.x < W * 0.08)
+          o2.vx += k;
+        if (o2.x > W * 0.92)
+          o2.vx -= k;
+        if (o2.y < H * 0.1)
+          o2.vy += k;
+        if (o2.y > H * 0.9)
+          o2.vy -= k;
+        orbs.forEach((q) => {
+          if (q !== o2 && !q.leaving) {
+            const dx = o2.x - q.x;
+            const dy = o2.y - q.y;
+            const d = Math.hypot(dx, dy) || 1;
+            if (d < 420) {
+              o2.vx += dx / d * 6e-3 * dt * 60;
+              o2.vy += dy / d * 6e-3 * dt * 60;
+            }
+          }
+        });
+      }
+      const speed = Math.hypot(o2.vx, o2.vy);
+      const cap = o2.leaving ? 4 : 2.2;
+      if (speed > cap) {
+        o2.vx *= cap / speed;
+        o2.vy *= cap / speed;
+      }
+      o2.rd = lerp(o2.rd, o2.r, 1 - Math.exp(-dt * 5));
+      o2.ct = Math.min(1, o2.ct + dt * 1.4);
+      o2.wob = Math.max(0, o2.wob - dt * 1.1);
+    });
+    collide(dt);
+    orbs = orbs.filter((o2) => {
+      const m2 = o2.leaving ? o2.rd * 1.6 : 400;
+      return o2.x > -m2 && o2.x < W + m2 && o2.y > -m2 && o2.y < H + m2;
+    });
+  };
+  const draw = () => {
+    ctx.clearRect(0, 0, W, H);
+    orbs.forEach((o2) => {
+      const c2 = cur(o2);
+      const w2 = o2.rd * 1.35;
+      const wob = o2.wob > 0 ? Math.sin((1 - o2.wob) * 20) * 0.16 * o2.wob : 0;
+      ctx.save();
+      ctx.translate(o2.x, o2.y);
+      ctx.rotate(TILT);
+      ctx.scale(1 + wob, (1 - wob) * RATIO);
+      const gradient = ctx.createRadialGradient(0, 0, 0, 0, 0, w2);
+      gradient.addColorStop(0, css(c2.c));
+      gradient.addColorStop(0.62, css(c2.c));
+      gradient.addColorStop(1, css(c2.r));
+      ctx.fillStyle = gradient;
+      ctx.beginPath();
+      ctx.arc(0, 0, w2, 0, Math.PI * 2);
+      ctx.fill();
+      ctx.restore();
+    });
+  };
+  const resize = () => {
+    const dpr = Math.min(window.devicePixelRatio || 1, 2);
+    const width = Math.max(1, canvas.clientWidth);
+    const height = Math.max(1, canvas.clientHeight);
+    canvas.width = Math.round(width * dpr);
+    canvas.height = Math.round(height * dpr);
+    const scale = Math.max(width / W, height / H);
+    ctx.setTransform(
+      dpr * scale,
+      0,
+      0,
+      dpr * scale,
+      dpr * (width - W * scale) / 2,
+      dpr * (height - H * scale) / 2
+    );
+    draw();
+  };
+  const tick = (now) => {
+    step(Math.min(0.05, (now - last) / 1e3));
+    last = now;
+    draw();
+    raf = window.requestAnimationFrame(tick);
+  };
+  const syncMotion = () => {
+    window.cancelAnimationFrame(raf);
+    last = performance.now();
+    if (!motion2.matches && !document.hidden)
+      raf = window.requestAnimationFrame(tick);
+  };
+  resize();
+  syncMotion();
+  const observer = new ResizeObserver(resize);
+  observer.observe(canvas);
+  motion2.addEventListener("change", syncMotion);
+  document.addEventListener("visibilitychange", syncMotion);
+  return () => {
+    window.cancelAnimationFrame(raf);
+    observer.disconnect();
+    motion2.removeEventListener("change", syncMotion);
+    document.removeEventListener("visibilitychange", syncMotion);
+  };
+}
+const orbOpacityForSurface = (surface, prefersDark) => {
+  const perceptual = surface.match(/^okl(?:ab|ch)\(\s*([\d.]+)(%?)/);
+  if (perceptual) {
+    const lightness = Number(perceptual[1]) / (perceptual[2] ? 100 : 1);
+    return lightness < 0.6 ? 0.35 : 0.85;
+  }
+  const srgb = surface.match(/^color\(srgb\s+([\d.]+)\s+([\d.]+)\s+([\d.]+)/);
+  if (srgb) {
+    const brightness2 = Number(srgb[1]) * 0.2126 + Number(srgb[2]) * 0.7152 + Number(srgb[3]) * 0.0722;
+    return brightness2 < 0.5 ? 0.35 : 0.85;
+  }
+  const channels = surface.match(/^rgba?\(\s*([\d.]+)[,\s]+([\d.]+)[,\s]+([\d.]+)/);
+  if (!channels)
+    return prefersDark ? 0.35 : 0.85;
+  const brightness = Number(channels[1]) * 0.2126 + Number(channels[2]) * 0.7152 + Number(channels[3]) * 0.0722;
+  return brightness < 128 ? 0.35 : 0.85;
+};
+const OrbBackground_css_ts_vanilla = "";
+var OrbBackground$1 = "gde17n1";
+var OrbBackgroundHost = "gde17n0";
+const OrbBackground = ({ className, appearance }) => {
+  const ref = useRef(null);
+  useEffect(() => {
+    if (!ref.current)
+      return void 0;
+    return startOrbField(ref.current);
+  }, []);
+  useEffect(() => {
+    var _a;
+    const canvas = ref.current;
+    if (!canvas)
+      return void 0;
+    const scheme = (_a = window.matchMedia) == null ? void 0 : _a.call(window, "(prefers-color-scheme: dark)");
+    const sync = () => {
+      let opacity = orbOpacityForSurface(getComputedStyle(canvas).color, (scheme == null ? void 0 : scheme.matches) ?? false);
+      if (appearance)
+        opacity = appearance === "dark" ? 0.35 : 0.85;
+      canvas.style.opacity = String(opacity);
+    };
+    sync();
+    const observer = new MutationObserver(sync);
+    let ancestor = canvas.parentElement;
+    while (ancestor) {
+      observer.observe(ancestor, { attributes: true, attributeFilter: ["class", "style"] });
+      ancestor = ancestor.parentElement;
+    }
+    scheme == null ? void 0 : scheme.addEventListener("change", sync);
+    return () => {
+      observer.disconnect();
+      scheme == null ? void 0 : scheme.removeEventListener("change", sync);
+    };
+  }, [appearance]);
+  return /* @__PURE__ */ jsx("canvas", { ref, className: classNames(OrbBackground$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, OrbBackgroundHost), direction: "Column", children: [
+  /* @__PURE__ */ jsx(OrbBackground, {}),
+  children,
+  /* @__PURE__ */ jsx(Box, { className: SplashScreenFooter, shrink: "No", alignItems: "Center", justifyContent: "Center", children: /* @__PURE__ */ jsx(Text, { size: "H2", align: "Center", children: "AG2 Space" }) })
+] });
 const Starfield_css_ts_vanilla = "";
 var Starfield$1 = "_4j0z2c1";
 var StarfieldHost = "_4j0z2c0";
@@ -15888,14 +16235,6 @@ const Starfield = ({ className }) => {
   }, []);
   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 PageCanvas$1 = "_18hg0vg1";
 var PageContent$1 = "_18hg0vge _8nex5a1 _8nex5a0";
@@ -16893,14 +17232,14 @@ const UnreadBadge = as(
 const ActivityRow_css_ts_vanilla = "";
 var ActivityRow$1 = createRuntimeFn({ defaultClassName: "_3hdcuo0 _8nex5a1 _8nex5a0 x4g6300 x4g6301", variantClassNames: { layout: { panel: "_3hdcuo1", card: "_3hdcuo2" }, unread: { true: "_3hdcuo3" }, read: { true: "_3hdcuo4" }, selected: { true: "_3hdcuo5" } }, defaultVariants: { layout: "panel" }, compoundVariants: [] });
 var Avatar = "_3hdcuo6";
-var Body = "_3hdcuo7";
+var Body$1 = "_3hdcuo7";
 var Footer$1 = "_3hdcuoh";
 var Header = "_3hdcuo8";
 var Meta = "_3hdcuoi";
 var Preview = "_3hdcuog";
 var Reason = createRuntimeFn({ defaultClassName: "_3hdcuo9", variantClassNames: { tone: { you: "_3hdcuoa", agent: "_3hdcuob", participant: "_3hdcuoc" } }, defaultVariants: {}, compoundVariants: [] });
-var Time = "_3hdcuoe";
-var Title = "_3hdcuof";
+var Time$1 = "_3hdcuoe";
+var Title$1 = "_3hdcuof";
 var Where = "_3hdcuod";
 const ActivityRow = as(
   ({
@@ -16934,7 +17273,7 @@ const ActivityRow = as(
       ref,
       children: [
         /* @__PURE__ */ jsx("span", { className: Avatar, children: avatar }),
-        /* @__PURE__ */ jsxs("span", { className: Body, children: [
+        /* @__PURE__ */ jsxs("span", { className: Body$1, children: [
           /* @__PURE__ */ jsxs("span", { className: Header, children: [
             /* @__PURE__ */ jsx("span", { className: Reason({ tone: read ? "participant" : reasonTone }), children: reason2 }),
             /* @__PURE__ */ jsxs("span", { className: Where, children: [
@@ -16942,7 +17281,7 @@ const ActivityRow = as(
               where
             ] })
           ] }),
-          layout === "card" && title && /* @__PURE__ */ jsx("span", { className: Title, children: title }),
+          layout === "card" && title && /* @__PURE__ */ jsx("span", { className: Title$1, children: title }),
           /* @__PURE__ */ jsx("span", { className: Preview, children: preview }),
           /* @__PURE__ */ jsxs("span", { className: Footer$1, children: [
             !read && (count2 > 0 || unread > 0) && /* @__PURE__ */ jsx(UnreadBadgeCenter, { children: /* @__PURE__ */ jsx(
@@ -16956,7 +17295,7 @@ const ActivityRow = as(
             unreadLabel && /* @__PURE__ */ jsx("span", { children: unreadLabel }),
             meta2 && /* @__PURE__ */ jsx("span", { className: Meta, children: meta2 })
           ] }),
-          /* @__PURE__ */ jsx("span", { className: Time, children: time })
+          /* @__PURE__ */ jsx("span", { className: Time$1, children: time })
         ] })
       ]
     }
@@ -17169,7 +17508,7 @@ const EmptyState = as(
   }, ref) => /* @__PURE__ */ jsx(Component, { className: classNames(EmptyState$1, className), ...props, ref, children: /* @__PURE__ */ jsx(PageHeroEmpty, { compact, children: /* @__PURE__ */ jsx(PageHero, { icon: icon2, title, subTitle: description ?? subTitle, children: action2 ?? children }) }) })
 );
 const PanelSwitch_css_ts_vanilla = "";
-var Attention = "e7d7gk4";
+var Attention$1 = "e7d7gk4";
 var Count = "e7d7gk5";
 var CountPill = "e7d7gk6";
 var Folds = "e7d7gk9";
@@ -17195,12 +17534,13 @@ const PanelSwitch = as(
     count: count2,
     countStyle = "Plain",
     labelled = false,
+    iconOnly = false,
     attention = false,
     className,
     ...props
   }, ref) => {
     const hasCount = count2 !== void 0 && count2 > 0;
-    const showLabel = selected || labelled;
+    const showLabel = (selected || labelled) && !iconOnly;
     const showCount = showLabel && hasCount;
     const countPill = showCount && selected && countStyle === "Pill";
     const name = [
@@ -17216,7 +17556,8 @@ const PanelSwitch = as(
         "aria-label": name,
         title: label,
         "data-selected": selected || void 0,
-        "data-labelled": labelled || void 0,
+        "data-labelled": labelled && !iconOnly || void 0,
+        "data-icon-only": iconOnly || void 0,
         "data-count-pill": countPill || void 0,
         className: classNames(PanelSwitch$1, className),
         ...props,
@@ -17224,7 +17565,7 @@ const PanelSwitch = as(
         children: [
           /* @__PURE__ */ jsxs("span", { className: Glyph, children: [
             /* @__PURE__ */ jsx(Icon$2, { src: icon2, size: "compact" }),
-            attention && !selected && /* @__PURE__ */ jsx("span", { className: Attention })
+            attention && !selected && /* @__PURE__ */ jsx("span", { className: Attention$1 })
           ] }),
           showLabel && /* @__PURE__ */ jsx(Text, { as: "span", size: "H6", className: classNames(Label, Folds), "aria-hidden": true, children: label }),
           showCount && /* @__PURE__ */ jsx(
@@ -17243,14 +17584,14 @@ const PanelSwitch = as(
   }
 );
 const PeopleLine_css_ts_vanilla = "";
-var Face = "kev8vj2";
+var Face$1 = "kev8vj2";
 var Faces = "kev8vj1";
 var Live = "kev8vj3";
 var PeopleLine$1 = "kev8vj0 _8nex5a1 _8nex5a0";
 var Summary = "kev8vj4";
 var Working = "kev8vj6";
 const PeopleLineFace = as(
-  ({ as: Component = "span", size: size2 = "small", className, ...props }, ref) => /* @__PURE__ */ jsx(Component, { "data-size": size2, className: classNames(Face, className), ...props, ref })
+  ({ as: Component = "span", size: size2 = "small", className, ...props }, ref) => /* @__PURE__ */ jsx(Component, { "data-size": size2, className: classNames(Face$1, className), ...props, ref })
 );
 const PeopleLine = as(
   ({ as: Component = "div", faces, status = "Default", className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
@@ -17269,14 +17610,14 @@ const PeopleLine = as(
   )
 );
 const RoomHeader_css_ts_vanilla = "";
-var Controls = "cv0ofl6";
+var Controls$1 = "cv0ofl6";
 var Divider = "cv0ofl7";
 var Identity = "cv0ofl3";
 var Mark = "cv0ofl2";
-var Name = "cv0ofl4";
+var Name$1 = "cv0ofl4";
 var RoomHeader$1 = "cv0ofl0 _8nex5a1 _8nex5a0";
 var Row = "cv0ofl1";
-var Spacer = "cv0ofl5";
+var Spacer$1 = "cv0ofl5";
 const RoomHeaderMark = as(
   ({ as: Component = "span", faces, className, ...props }, ref) => /* @__PURE__ */ jsx(
     Component,
@@ -17302,17 +17643,17 @@ const RoomHeader = as(
   }, ref) => /* @__PURE__ */ jsx(Component, { className: classNames(RoomHeader$1, className), ...props, ref, children: /* @__PURE__ */ jsxs("div", { className: Row, children: [
     mark,
     /* @__PURE__ */ jsxs("div", { className: Identity, children: [
-      /* @__PURE__ */ jsx(Text, { as: nameAs, size: "H5", truncate: true, className: Name, children: name }),
+      /* @__PURE__ */ jsx(Text, { as: nameAs, size: "H5", truncate: true, className: Name$1, children: name }),
       people
     ] }),
-    /* @__PURE__ */ jsx("div", { className: Spacer }),
-    controls && /* @__PURE__ */ jsx("div", { className: Controls, children: controls }),
+    /* @__PURE__ */ jsx("div", { className: Spacer$1 }),
+    controls && /* @__PURE__ */ jsx("div", { className: Controls$1, children: controls }),
     controls && panels && /* @__PURE__ */ jsx("div", { className: Divider, "aria-hidden": true }),
     panels
   ] }) })
 );
 const Composer_css_ts_vanilla = "";
-var Actions = "_1ejw1qz3";
+var Actions$1 = "_1ejw1qz3";
 var ActionsAfter = "_1ejw1qz5";
 var ActionsBefore = "_1ejw1qz4";
 var Composer$1 = "_1ejw1qz0";
@@ -17334,7 +17675,7 @@ const Composer = as(
     /* @__PURE__ */ jsxs("div", { className: Surface, children: [
       context,
       /* @__PURE__ */ jsx("div", { className: Content, children }),
-      (actionsBefore || actionsAfter) && /* @__PURE__ */ jsxs("div", { className: Actions, children: [
+      (actionsBefore || actionsAfter) && /* @__PURE__ */ jsxs("div", { className: Actions$1, children: [
         /* @__PURE__ */ jsx("div", { className: ActionsBefore, children: actionsBefore }),
         /* @__PURE__ */ jsx("div", { className: ActionsAfter, children: actionsAfter })
       ] }),
@@ -17689,6 +18030,133 @@ const InspectorTab = as(
     }
   )
 );
+const ActivityItem_css_ts_vanilla = "";
+var Action = "_1wyqgiii _8nex5a1 _8nex5a0 x4g6300";
+var Actions = "_1wyqgiie _1wyqgii9";
+var ActivityItem$1 = "_1wyqgii0 _8nex5a1 _8nex5a0";
+var Attention = "_1wyqgiif";
+var AttentionBreathing = "_1wyqgiih";
+var Body = "_1wyqgiia _1wyqgii9";
+var Face = "_1wyqgii4";
+var Head = "_1wyqgii3";
+var Main = "_1wyqgii2 _8nex5a1 _8nex5a0 x4g6300";
+var Name = "_1wyqgii5";
+var ObjectRow = "_1wyqgiid _1wyqgii9";
+var Replies = "_1wyqgiib _8nex5a1 _8nex5a0 x4g6300 _1wyqgii9";
+var RepliesUnread = "_1wyqgiic";
+var SelectedBar = "_1wyqgii1";
+var Time = "_1wyqgii7";
+var UnreadDot = "_1wyqgii8";
+var What = "_1wyqgii6";
+const ActivityItem = as(
+  ({
+    as: Component = "div",
+    avatar,
+    name,
+    what,
+    time,
+    body,
+    unread = false,
+    read = false,
+    attention,
+    selected = false,
+    replies,
+    object,
+    actions,
+    actionsShown = false,
+    onOpen,
+    label,
+    className,
+    ...props
+  }, ref) => /* @__PURE__ */ jsxs(
+    Component,
+    {
+      "data-read": read || void 0,
+      "data-selected": selected || void 0,
+      className: classNames(ActivityItem$1, className),
+      ...props,
+      ref,
+      children: [
+        selected && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: SelectedBar }),
+        attention && /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": true,
+            className: classNames(Attention, attention === "breathing" && AttentionBreathing)
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            className: Main,
+            "aria-label": [
+              label ?? `${name} ${what}, ${time}`,
+              unread && "unread",
+              attention && "needs you"
+            ].filter(Boolean).join(", "),
+            "aria-current": selected ? "true" : void 0,
+            onClick: onOpen,
+            children: [
+              /* @__PURE__ */ jsxs("span", { className: Head, children: [
+                /* @__PURE__ */ jsx("span", { className: Face, children: avatar }),
+                /* @__PURE__ */ jsx(Text, { as: "span", size: "H6", className: Name, children: name }),
+                /* @__PURE__ */ jsx(Text, { as: "span", size: "T300", className: What, children: what }),
+                /* @__PURE__ */ jsx(Text, { as: "span", size: "T200", className: Time, children: time }),
+                unread && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: UnreadDot })
+              ] }),
+              body && /* @__PURE__ */ jsx(Text, { as: "span", size: "T300", className: Body, children: body })
+            ]
+          }
+        ),
+        object && /* @__PURE__ */ jsx("div", { className: ObjectRow, children: object }),
+        replies && /* @__PURE__ */ jsxs("button", { type: "button", className: Replies, onClick: replies.onOpen, children: [
+          /* @__PURE__ */ jsx(Text, { as: "span", size: "L400", children: replies.total }),
+          replies.unread && /* @__PURE__ */ jsxs(Text, { as: "span", size: "L400", className: RepliesUnread, children: [
+            "· ",
+            replies.unread
+          ] })
+        ] }),
+        actions && /* @__PURE__ */ jsx("div", { className: Actions, "data-pinned": actionsShown || void 0, children: actions })
+      ]
+    }
+  )
+);
+const ActivityItemAction = as(
+  ({ as: Component = "button", label, icon: icon2, primary = false, className, ...props }, ref) => /* @__PURE__ */ jsx(
+    Component,
+    {
+      type: Component === "button" ? "button" : void 0,
+      "aria-label": label,
+      title: label,
+      "data-labelled": !icon2 || void 0,
+      "data-primary": primary || void 0,
+      className: classNames(Action, className),
+      ...props,
+      ref,
+      children: icon2 ? /* @__PURE__ */ jsx(Icon$2, { src: icon2, size: "standard" }) : /* @__PURE__ */ jsx(Text, { as: "span", size: "B400", children: label })
+    }
+  )
+);
+const ActivityHeader_css_ts_vanilla = "";
+var ActivityHeader$1 = "_1yfy4k20 _8nex5a1 _8nex5a0";
+var Controls = "_1yfy4k23";
+var Spacer = "_1yfy4k24";
+var Title = "_1yfy4k22";
+var TitleRow = "_1yfy4k21";
+const ActivityHeader = as(
+  ({ as: Component = "div", title, actions, filters, after, className, ...props }, ref) => /* @__PURE__ */ jsxs(Component, { className: classNames(ActivityHeader$1, className), ...props, ref, children: [
+    /* @__PURE__ */ jsxs("div", { className: TitleRow, children: [
+      /* @__PURE__ */ jsx(Text, { as: "h2", size: "H6", className: Title, children: title }),
+      actions
+    ] }),
+    (filters || after) && /* @__PURE__ */ jsxs("div", { className: Controls, children: [
+      filters,
+      /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: Spacer }),
+      after
+    ] })
+  ] })
+);
 function ActionGroup({ actions, hint: hint$1 }) {
   return /* @__PURE__ */ jsxs("div", { className: actionSection, children: [
     /* @__PURE__ */ jsx("div", { className: actionGroup, role: "group", "aria-label": "Draft a PR request", children: actions.map((action$1) => /* @__PURE__ */ jsxs(
@@ -17714,6 +18182,9 @@ export {
   AGENT_STATE_MARKS,
   ActionGroup,
   ActivityGroup,
+  ActivityHeader,
+  ActivityItem,
+  ActivityItemAction,
   ActivityRow,
   AgentGlyph,
   AgentMark,
@@ -17767,6 +18238,8 @@ export {
   MenuItem,
   Modal,
   NavCollapseRow,
+  OrbBackground,
+  OrbBackgroundHost,
   Overlay,
   OverlayBackdrop,
   OverlayCenter,