@ag2/weave 0.12.0 → 0.13.0

package/README.md

@@ -4,6 +4,21 @@
 
 The AG2 Space design system. Forked from [folds](https://github.com/cinnyapp/folds) 2.6.2 (Apache-2.0); `@ag2/weave@0.1.0` is folds@2.6.2 under the new name.
 
+## Ambient orb background
+
+`OrbBackground` renders the Absorb / Calm / Aura field and is the default background
+of `SplashScreen`. Place it inside an element with the exported `OrbBackgroundHost`
+class so its decorative canvas sits behind content and is clipped at the surface edge.
+The parent supplies its background colour through the normal theme tokens.
+
+It follows the resolved `color.Background.Container` token, including nested and custom
+themes. An optional `appearance="light" | "dark"` prop lets a framing host override the
+colour intensity. Reduced motion renders a static field; hidden documents pause animation.
+All animation frames, resize observers, and theme listeners are removed on unmount.
+`Starfield` and `StarfieldHost` remain exported for existing consumers.
+
+The field is adapted from [matty-morgs/octo-space](https://github.com/matty-morgs/octo-space/blob/7f5536888eaf0068200e1d339318ba2bc57a5e40/onboarding-aura/index.html).
+
 <!-- original folds README follows -->
 
 # Folds

package/dist/components/index.d.ts

@@ -66,3 +66,4 @@ export * from "./surface-toolbar";
 export * from "./dock";
 export * from "./inspector-tabs";
 export * from "./activity-item";
+export * from "./orb-background";

package/dist/components/orb-background/OrbBackground.css.d.ts

@@ -0,0 +1,3 @@
+/** Isolate the decorative layer behind content and clip the blur at the surface edge. */
+export declare const OrbBackgroundHost: string;
+export declare const OrbBackground: string;

package/dist/components/orb-background/OrbBackground.d.ts

@@ -0,0 +1,7 @@
+export declare type OrbBackgroundProps = {
+    className?: string;
+    /** Optional framing-host override; otherwise follows the active surface token. */
+    appearance?: "light" | "dark";
+};
+/** Calm, blurred orbs with absorb collisions. Place inside an OrbBackgroundHost surface. */
+export declare const OrbBackground: ({ className, appearance }: OrbBackgroundProps) => JSX.Element;

package/dist/components/orb-background/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./OrbBackground";
+export { OrbBackgroundHost } from "./OrbBackground.css";

package/dist/components/orb-background/orbAppearance.d.ts

@@ -0,0 +1,2 @@
+/** Infer brightness from the resolved surface token, independent of consumer class names. */
+export declare const orbOpacityForSurface: (surface: string, prefersDark: boolean) => number;

package/dist/components/orb-background/orbField.d.ts

@@ -0,0 +1 @@
+export declare function startOrbField(element: HTMLCanvasElement): () => void;

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([
@@ -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";
@@ -17899,6 +18238,8 @@ export {
   MenuItem,
   Modal,
   NavCollapseRow,
+  OrbBackground,
+  OrbBackgroundHost,
   Overlay,
   OverlayBackdrop,
   OverlayCenter,