@materialwebunofficial/antigravity-themes 1.0.4 → 1.0.13

package/src/theme-host.js

@@ -11,7 +11,10 @@ function agyThemeHost(bundle) {
   // Bump when this file's code changes. A same-version host only takes the
   // new bundle; an older one would keep running its old code through
   // update(), so it is disposed and replaced (same task: no flash).
-  const HOST_VERSION = 20;   // also bump when a module it starts (context-card, turn-tokens, loading-/progress-indicator, code-tools) changes: the host starts them once
+  const HOST_VERSION = 31;   // also bump when a module it starts (context-card, turn-tokens, loading-/progress-indicator, quota rings, code-tools) changes: the host starts them once
+  // Sidecar frames (plugin://) have their own host, frame-host.js: this one
+  // is the window's
+  if (location.protocol === 'plugin:') return null;
   const existing = window.__agyThemeHost;
   if (existing?.version === HOST_VERSION) return existing.update(bundle);
   existing?.dispose();
@@ -36,14 +39,22 @@ function agyThemeHost(bundle) {
   // Fonts come as bytes and are registered with the FontFace API: no
   // network fetch, no CSP font-src, and no 300 KB data URI in the CSS text.
   const loadedFonts = new Set();
+  const fontBytes = new Map();   // base64 -> ArrayBuffer, decoded once (the frames ask for copies)
+  function fontBuffer(f) {
+    let buffer = fontBytes.get(f.data);
+    if (!buffer) {
+      buffer = Uint8Array.from(atob(f.data), (c) => c.charCodeAt(0)).buffer;
+      fontBytes.set(f.data, buffer);
+    }
+    return buffer;
+  }
   function ensureFonts() {
     for (const f of bundle.fonts?.[current.theme] ?? []) {
       const key = `${f.family}|${f.weight}|${f.stretch}`;
       if (loadedFonts.has(key) || !document.fonts) continue;
       loadedFonts.add(key);
       try {
-        const bytes = Uint8Array.from(atob(f.data), (c) => c.charCodeAt(0));
-        const face = new FontFace(f.family, bytes.buffer, { weight: f.weight, stretch: f.stretch, style: 'normal', display: 'swap' });
+        const face = new FontFace(f.family, fontBuffer(f), { weight: f.weight, stretch: f.stretch, style: 'normal', display: 'swap' });
         document.fonts.add(face);
         face.load().catch(() => {});
       } catch {
@@ -74,6 +85,7 @@ function agyThemeHost(bundle) {
     watchMode();
     if (!syncMode()) return;
     announceTheme();
+    syncFrames();
     // The app re-sends its own (mis-parsed) overlay color on theme changes
     requestAnimationFrame(() => syncTitleBarOverlay());
     setTimeout(syncTitleBarOverlay, 300);
@@ -81,6 +93,57 @@ function agyThemeHost(bundle) {
   // The vendored md3e-web components cache their colors; the package's own
   // window event makes them read the tokens again (the app uses no such event)
   const announceTheme = () => window.dispatchEvent(new Event('theme-change'));
+
+  // ---- Sidecar frames --------------------------------------------------------
+  // A sidecar pane (Swarm) is a cross-origin plugin:// iframe with its own
+  // host, frame-host.js. This side tells it the theme, seed and mode: when a
+  // frame asks (it does on load) and to every frame when they change. It also
+  // repeats the app's own "theme-change" message, the tokens the app computes
+  // from this document and gives a sidecar once, on load: after a theme switch
+  // they would be the previous theme's.
+  const APP_TOKENS = '--background --foreground --primary --primary-foreground --secondary --secondary-foreground --muted --muted-foreground --placeholder --sidebar --sidebar-secondary --sidebar-muted --content --card --card-border --border --accent --code-foreground --error --editor-font-family'.split(' ');
+  const currentMode = () => document.documentElement?.getAttribute('data-agy-mode') || 'dark';
+  const themeMessage = () => ({ type: 'agy-theme-change', theme: current.theme, seed: current.seed ?? null, key: current.key, mode: currentMode() });
+  function tokensMessage() {
+    const cs = getComputedStyle(document.documentElement);
+    const cssVariables = {};
+    for (const name of APP_TOKENS) {
+      const value = cs.getPropertyValue(name).trim();
+      if (value) cssVariables[name] = value;
+    }
+    if (!cssVariables['--accent'] && cssVariables['--primary']) cssVariables['--accent'] = cssVariables['--primary'];
+    return { type: 'theme-change', payload: { themeType: currentMode(), cssVariables } };
+  }
+  function syncFrames() {
+    if (!document.documentElement || !current) return;
+    const frames = document.querySelectorAll('iframe[src^="plugin:"]');
+    if (!frames.length) return;
+    const theme = themeMessage(), tokens = tokensMessage();
+    for (const frame of frames) {
+      try {
+        frame.contentWindow?.postMessage(theme, '*');
+        frame.contentWindow?.postMessage(tokens, '*');
+      } catch {
+        // a frame between documents: it asks again when it loads
+      }
+    }
+  }
+  function onFrameMessage(e) {
+    if (e.data?.type !== 'agy-theme-query' || !current) return;
+    const frame = e.source;
+    try {
+      if (!frame || frame === window || frame.parent !== window) return;
+      frame.postMessage(themeMessage(), '*');
+      const fonts = e.data.fonts === true ? bundle.fonts?.[current.theme] : null;
+      if (fonts?.length) {
+        const copies = fonts.map((f) => ({ family: f.family, weight: f.weight, stretch: f.stretch, buffer: fontBuffer(f).slice(0) }));
+        frame.postMessage({ type: 'agy-theme-fonts', theme: current.theme, fonts: copies }, '*', copies.map((f) => f.buffer));
+      }
+    } catch {
+      // the frame went away
+    }
+  }
+
   let modeTarget = null;
   function watchMode() {
     const target = document.body ?? document.documentElement;
@@ -118,6 +181,7 @@ function agyThemeHost(bundle) {
       if (style.parentNode !== parent || style !== parent.lastElementChild) parent.appendChild(style);
     }
     announceTheme();
+    syncFrames();
     renderMenu();
     if (appMenuBuilt) buildAppMenu(false);
     if (current.theme !== 'md3e') closeAppMenu();
@@ -195,7 +259,9 @@ function agyThemeHost(bundle) {
           display: flex; align-items: center; padding: 0 8px; border: 0; border-radius: 6px;
           background: transparent; color: var(--muted-foreground, #999); font: inherit; cursor: default;
         }
-        .trigger:hover, .trigger[aria-expanded="true"] { background: var(--secondary, #333); color: var(--foreground, #eee); }
+        /* hover and open: a state layer of the text color, so it shows on any
+           theme's surface (Nordic's --secondary is its card color) */
+        .trigger:hover, .trigger[aria-expanded="true"] { background: color-mix(in srgb, var(--foreground, #eee) 10%, transparent); color: var(--foreground, #eee); }
         .menu {
           position: absolute; top: calc(100% + 6px); left: 0; min-width: 230px; padding: 6px;
           border: 1px solid var(--border, #333); border-radius: 12px;
@@ -208,7 +274,7 @@ function agyThemeHost(bundle) {
           border-radius: 8px; font: inherit; color: inherit; cursor: default; outline: none;
         }
         [role="menuitemradio"]:hover, [role="menuitemradio"]:focus-visible,
-        .menu-sub-trigger:hover, .menu-sub-wrapper:hover .menu-sub-trigger { background: var(--secondary, #333); }
+        .menu-sub-trigger:hover, .menu-sub-wrapper:hover .menu-sub-trigger { background: color-mix(in srgb, var(--foreground, #eee) 10%, transparent); }
         .swatch { width: 12px; height: 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.2); }
         .name { flex: 1; }
         .check { visibility: hidden; }
@@ -503,15 +569,12 @@ function agyThemeHost(bundle) {
     const forced = force === true;
     if (!appMenu || (!forced && appMenu.open)) return;
     if (appMenuBuilt && !forced) {
-      window.__buildAppMenuHitCache = (window.__buildAppMenuHitCache || 0) + 1;
       for (const item of appMenu.querySelectorAll('md-menu-item[value^="theme:"]')) {
         const val = item.getAttribute('value') || '';
         item.selected = (val === `theme:${current?.key}`);
       }
-      fixMenuStyle(appMenu);
       return;
     }
-    window.__buildAppMenuFullBuild = (window.__buildAppMenuFullBuild || 0) + 1;
     appMenus = readAppMenus();
     if (!appMenus.length && !forced) return;
     const items = appMenus.map((m, i) => {
@@ -655,7 +718,7 @@ function agyThemeHost(bundle) {
     if (!(bundle.ripple ?? []).includes(current?.theme) || e.button !== 0 || reducedMotion?.matches) return;
     if (hostEl && e.composedPath().includes(hostEl)) return;
     const target = e.target instanceof Element ? e.target.closest(RIPPLE_TARGETS) : null;
-    if (!target || target.isContentEditable) return;
+    if (!target || target.isContentEditable || target.matches('[role="menu"] [role^="menuitem"]') || target.closest('[role="menu"]')) return;
     const x = e.clientX, y = e.clientY, start = performance.now();
     let released = false, onRelease = null;
     const release = () => {
@@ -667,14 +730,12 @@ function agyThemeHost(bundle) {
     window.addEventListener('pointerup', release, true);
     window.addEventListener('pointercancel', release, true);
     requestAnimationFrame(() => {
+      if (!target.isConnected) return;
       const box = target.getBoundingClientRect();
       if (box.width < 8 || box.height < 8) return;
       const cs = getComputedStyle(target);
-      // md-menu items draw their shape 4px inside the row (::before): ripple there
-      const shape = target.matches('[role="menu"] [role^="menuitem"]') ? getComputedStyle(target, '::before') : null;
-      const inset = shape?.content && shape.content !== 'none' ? parseFloat(shape.left) || 0 : 0;
-      const r = { left: box.left + inset, top: box.top, width: box.width - inset * 2, height: box.height };
-      const radius = inset ? shape.borderRadius : cs.borderRadius;
+      const r = { left: box.left, top: box.top, width: box.width, height: box.height };
+      const radius = cs.borderRadius;
       if (!rippleLayer?.isConnected) {
         rippleLayer = document.createElement('div');
         rippleLayer.id = 'agy-ripple-layer';
@@ -683,7 +744,7 @@ function agyThemeHost(bundle) {
       }
       const clip = document.createElement('div');
       clip.style.cssText = `position:absolute;left:${r.left}px;top:${r.top}px;width:${r.width}px;height:${r.height}px;border-radius:${radius};overflow:hidden;`;
-      const endR = Math.hypot(r.width, r.height) / 2 + 10;
+      const endR = Math.hypot(r.width, r.height) / 2 + 16;
       const startScale = (Math.max(r.width, r.height) * 0.3) / endR;
       const cx = r.width / 2, cy = r.height / 2;
       const ink = document.createElement('div');
@@ -705,6 +766,21 @@ function agyThemeHost(bundle) {
       };
       if (released) fadeOut();
       else onRelease = fadeOut;
+      // The target may morph while the ripple plays (corners closing on
+      // press, a selection springing round): the clip follows its box and
+      // corners each frame until the ripple is gone, so the ink never shows
+      // outside the shape.
+      const follow = () => {
+        if (!clip.isConnected || !target.isConnected) return;
+        const b = target.getBoundingClientRect();
+        clip.style.left = b.left + 'px';
+        clip.style.top = b.top + 'px';
+        clip.style.width = b.width + 'px';
+        clip.style.height = b.height + 'px';
+        clip.style.borderRadius = getComputedStyle(target).borderRadius;
+        requestAnimationFrame(follow);
+      };
+      requestAnimationFrame(follow);
     });
   }
 
@@ -769,8 +845,6 @@ function agyThemeHost(bundle) {
   function onPointerDown(e) {
     startRipple(e);
     if (hostEl && !e.composedPath().includes(hostEl)) closeMenu();
-    const transcript = document.querySelector('[data-testid="autoscroll-viewport"]');
-    if (transcript && !transcript.classList.contains('no-focus-agent-input')) transcript.classList.add('no-focus-agent-input');
   }
   function cycleTheme() {
     const keys = [...options.keys()];
@@ -789,47 +863,7 @@ function agyThemeHost(bundle) {
   window.addEventListener('focus', syncTitleBarOverlay);
   document.fonts?.addEventListener('loadingdone', position);
 
-  // ---- Virtual list layout guard --------------------------------------------
-  // Antigravity virtualizes the sidebar and auxiliary panels with TanStack
-  // Virtual. On mounting long lists (e.g. 299 diffs in Review or 95 sidebar
-  // items), TanStack Virtual synchronously reads offsetHeight on every
-  // [data-index] element while dirtying container styles between each item.
-  // In a large conversation, each forced reflow costs 80-100ms, causing a 2s+
-  // freeze upon entry. This guard serves known fixed heights or cached values
-  // for virtual rows, preventing layout thrashing while letting ResizeObserver
-  // handle real dynamic size changes asynchronously on idle frames.
-  const origOffsetHeight = Object.getOwnPropertyDescriptor(HTMLElement.prototype, 'offsetHeight')?.get;
-  const virtualHeightCache = new WeakMap();
-  if (origOffsetHeight) {
-    Object.defineProperty(HTMLElement.prototype, 'offsetHeight', {
-      get() {
-        if (this.hasAttribute('data-index')) {
-          const cached = virtualHeightCache.get(this);
-          if (cached !== undefined) return cached;
-          if (this.firstElementChild?.classList.contains('sticky')) {
-            virtualHeightCache.set(this, 33);
-            return 33;
-          }
-          if (this.classList.contains('bg-sidebar') || this.querySelector('h2')) {
-            virtualHeightCache.set(this, 24);
-            return 24;
-          }
-          if (this.querySelector('.agy-sidebar-row') || this.classList.contains('pb-[1px]')) {
-            virtualHeightCache.set(this, 33);
-            return 33;
-          }
-          if (!this.textContent.trim()) {
-            virtualHeightCache.set(this, 16);
-            return 16;
-          }
-        }
-        const val = origOffsetHeight.call(this);
-        if (this.hasAttribute('data-index')) virtualHeightCache.set(this, val);
-        return val;
-      },
-      configurable: true,
-    });
-  }
+  window.addEventListener('message', onFrameMessage);
 
   // Start the Overview panel's Context card; every theme gets it
   const contextCard = typeof agyContextCard === 'function' ? agyContextCard() : null;
@@ -839,6 +873,8 @@ function agyThemeHost(bundle) {
   const loadingIndicator = typeof agyLoadingIndicator === 'function' ? agyLoadingIndicator() : null;
   // ...and wavy progress bars on running background work
   const progressIndicators = typeof agyProgressIndicators === 'function' ? agyProgressIndicators() : null;
+  // ...and the M3 Expressive gap in the usage rings
+  const quotaRings = typeof agyQuotaRings === 'function' ? agyQuotaRings() : null;
   // ...and Wrap lines / Line numbers in every code block's header
   const codeTools = typeof agyCodeTools === 'function' ? agyCodeTools() : null;
 
@@ -848,6 +884,7 @@ function agyThemeHost(bundle) {
     window.removeEventListener('keydown', onKeyDown, true);
     window.removeEventListener('resize', position);
     window.removeEventListener('focus', syncTitleBarOverlay);
+    window.removeEventListener('message', onFrameMessage);
     document.fonts?.removeEventListener('loadingdone', position);
     hostEl?.remove();
     document.documentElement?.removeAttribute('data-agy-appmenu');
@@ -856,24 +893,18 @@ function agyThemeHost(bundle) {
     turnTokens?.dispose();
     loadingIndicator?.dispose();
     progressIndicators?.dispose();
+    quotaRings?.dispose();
     codeTools?.dispose();
-    if (origOffsetHeight) {
-      Object.defineProperty(HTMLElement.prototype, 'offsetHeight', {
-        get: origOffsetHeight,
-        configurable: true,
-      });
-    }
     document.querySelectorAll('[data-agy-ghost]').forEach((g) => g.remove());
     document.getElementById('agy-theme-css')?.remove();
     document.documentElement?.removeAttribute('data-agy-theme');
     document.documentElement?.removeAttribute('data-agy-seed');
     modeObserver.disconnect();
     document.documentElement?.removeAttribute('data-agy-mode');
-    document.querySelectorAll('[data-testid="autoscroll-viewport"].no-focus-agent-input')
-      .forEach((el) => el.classList.remove('no-focus-agent-input'));
     syncTitleBarOverlay();
     delete window.__agyThemeHost;
     delete window.agyTheme;
+    delete window.__agyPageScript;   // the page script may run here again
   }
 
   const api = {

package/src/turn-tokens.js

@@ -102,7 +102,7 @@ function agyTurnTokens() {
     }
   }
 
-  const timer = setInterval(scan, 2000);
+  const timer = setInterval(scan, 10000);
   scan();
 
   return {

package/themes/frames/matte.css

@@ -0,0 +1,211 @@
+/* ==========================================================================
+   AGY "Matte" — sidecar frames (the Swarm pane)
+
+   Loaded by frame-host.js inside the plugin:// frame, after matte-tokens.css.
+   Swarm's own design is already Matte's: monochrome, quiet, no outlines on
+   the rows. So this is mostly the token map; the few rules below bring it in
+   line with the window: raised things carry the 1px hairline, radii follow
+   the panel's, and nothing loops.
+   ========================================================================== */
+
+:root[data-agy-theme="matte"] {
+  color-scheme: dark;
+
+  /* The app's tokens. It sends the window's values (--background there is
+     the window, not this panel), and the sidecar SDK writes them inline on
+     <html>: hence !important. This frame sits in the panel. */
+  --background: var(--m-panel) !important;
+  --foreground: var(--m-text) !important;
+  --primary: var(--m-primary) !important;
+  --primary-foreground: var(--m-primary-ink) !important;
+  --secondary: var(--m-high) !important;
+  --secondary-foreground: var(--m-text-2) !important;
+  --muted: var(--m-raised) !important;
+  --muted-foreground: var(--m-text-3) !important;
+  --placeholder: var(--m-text-3) !important;
+  --card: var(--m-raised) !important;
+  --card-border: var(--m-line-2) !important;
+  --border: var(--m-line) !important;
+  --accent: var(--m-primary) !important;
+  --error: var(--m-error) !important;
+
+  /* Swarm's own tokens */
+  --sw-bg: var(--m-panel);
+  --sw-card: var(--m-raised);
+  --sw-secondary: var(--m-high);
+  --sw-muted: var(--m-inset);
+  --sw-fg: var(--m-text);
+  --sw-fg-2: var(--m-text-2);
+  --sw-fg-muted: var(--m-text-3);
+  --sw-fg-faint: var(--m-text-3);
+  --sw-border: var(--m-line-2);
+  --sw-card-border: var(--m-line);
+  --sw-primary: var(--m-primary);
+  --sw-primary-fg: var(--m-primary-ink);
+  --sw-error: var(--m-error);
+  --sw-success: var(--m-success);
+  --sw-warning: var(--m-warning);
+  --sw-hover: var(--m-hover);
+  --sw-press: var(--m-select);
+  --sw-ring: var(--m-line-3);
+  --sw-line: var(--m-line);
+  --sw-fill: var(--m-select);
+  --sw-field: var(--m-raised);
+  --r-sm: 5px;
+  --r-md: 8px;
+  --r-lg: 10px;
+}
+:root[data-agy-theme="matte"][data-agy-mode="light"] {
+  color-scheme: light;
+}
+
+:root[data-agy-theme="matte"] {
+  /* Type stays Swarm's own (Google Sans Flex, the app's face): Matte leaves
+     the window's UI font alone too */
+  /* Scrollbars: Swarm styles a slim thumb (::-webkit-scrollbar), but its
+     scrollbar-width: thin on every element switches Chromium to the native
+     bar, arrow buttons and all, and those rules never apply */
+  &,
+  * {
+    scrollbar-width: auto;
+    scrollbar-color: auto;
+  }
+  body {
+    background: var(--sw-bg) !important;   /* the SDK's inline body background is the window's */
+  }
+  .swarm-title {
+    color: var(--m-text-max);
+  }
+
+  /* Nothing loops: a status dot is a dot, the skeleton a still placeholder */
+  .live-dot::after {
+    content: none;
+  }
+  .skel {
+    animation: none;
+    background: var(--m-select);
+  }
+
+  /* Raised things carry the hairline: the fields and the floating button */
+  .search,
+  .pane .o2-msearch {
+    border-color: var(--m-line);
+    background: var(--m-raised);
+  }
+  .search:focus-within,
+  .pane .o2-msearch:focus-within {
+    border-color: var(--m-line-3);
+    background: var(--m-raised);
+  }
+  .jump {
+    border-color: var(--m-line-2);
+    background: var(--m-raised);
+    box-shadow: 0 6px 18px -8px var(--m-shadow);
+  }
+  .jump:hover {
+    background: var(--m-high);
+  }
+  .toast {
+    border: 1px solid var(--m-line-2);
+    background: var(--m-high);
+    box-shadow: 0 10px 28px -12px var(--m-shadow-menu);
+    color: var(--m-text);
+  }
+  /* The list: Chromium's customizable select (appearance: base-select)
+     draws the picker in the page, so it follows the theme (a raised panel with a hairline, rows 30px) */
+  .select select,
+  .select select::picker(select) {
+    appearance: base-select;
+  }
+  .select select::picker-icon {
+    display: none;   /* the wrapper draws the arrow */
+  }
+  .select select {
+    align-items: center;   /* a base-select is a flex box: its label would sit at the top */
+  }
+  .select select::picker(select) {
+    margin-block: 4px;
+    padding: 4px;
+    border: 1px solid var(--m-line-2);
+    border-radius: 10px;
+    background: var(--m-raised);
+    box-shadow: 0 16px 40px -12px var(--m-shadow-menu);
+    color: var(--m-text);
+  }
+  .select select option {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    min-height: 30px;
+    padding: 0 10px;
+    border-radius: 6px;
+    background: transparent;
+    color: var(--m-text);
+    font-size: 13px;
+  }
+  .select select option:is(:hover, :focus-visible) {
+    background: var(--m-hover);
+    outline: none;
+  }
+  .select select option:checked {
+    background: var(--m-select);
+    color: var(--m-text-max);
+  }
+  .select select option::checkmark {
+    order: 1;
+    margin-inline-start: auto;
+    font-size: 12px;
+  }
+  .select select option:not(:checked)::checkmark {
+    display: none;
+  }
+
+  /* The one bright thing stays the window's send button: the unread tint
+     and the "new" divider are neutral here */
+  .feed .msg.unread-by-me {
+    background: var(--m-select);
+  }
+  .divider {
+    color: var(--m-text-2);
+  }
+  .divider::after {
+    background: var(--m-line-2);
+  }
+  .msg-channel {
+    background: var(--m-select);
+  }
+  .msg-channel:hover {
+    background: var(--m-high);
+  }
+
+  /* hive.css cards: raised, hairline, the window's 12px */
+  .pane .o2 {
+    --o2-card: var(--m-raised);
+    --o2-border: var(--m-line);
+    --o2-info: var(--m-blue);
+  }
+  .pane .o2-lead,
+  .pane .o2-card,
+  .pane .o2-goal,
+  .pane .o2-run,
+  .pane .o2-prog,
+  .pane .o2-th,
+  .pane .o2-reel {
+    border-radius: 12px;
+  }
+  .pane .o2-rundot {
+    box-shadow: none;
+  }
+  .pane .o2-mrow.bees {
+    border-radius: 10px;
+  }
+
+  /* Graph: nodes are raised chips on the panel */
+  .graph .node-box {
+    fill: var(--m-raised);
+    stroke: var(--m-line-2);
+  }
+  .graph .node:hover .node-box {
+    stroke: var(--m-line-3);
+  }
+}