meta-sovereign 0.49.12 → 0.49.14

package/js/src/web/app.css

@@ -12607,3 +12607,45 @@ audio.remote-player {
   flex: 1 1 12rem;
   overflow-wrap: anywhere;
 }
+
+/* Reduced visual effects (R-Z21). <html data-effects="reduced"> is set by
+   effects.js when the browser renders slowly (a frame probe), or by the
+   Settings choice / ?effects=reduced: no backdrop blur (the same solid
+   surfaces as `prefers-reduced-transparency`), no page-sized dim around
+   the tutorial's ring, and no non-essential animation or transition. */
+:root[data-effects='reduced'] * {
+  -webkit-backdrop-filter: none !important;
+  backdrop-filter: none !important;
+}
+:root[data-effects='reduced'] *,
+:root[data-effects='reduced'] *::before,
+:root[data-effects='reduced'] *::after {
+  animation-duration: 0.01ms !important;
+  animation-iteration-count: 1 !important;
+  /* 0s, not 0.01ms: the default transition-property is `all`, so any
+     non-zero duration turns every colour change (the theme switch at
+     load) into a transition, and axe read light text on a dark fill
+     (R-Z22). */
+  transition-duration: 0s !important;
+  transition-delay: 0s !important;
+}
+:root[data-effects='reduced'] {
+  --surface-glass-bg: var(--bg-elev);
+}
+:root[data-effects='reduced'] .chat-composer {
+  background: var(--bg-elev);
+}
+:root[data-effects='reduced']
+  .tutorial-overlay-spotlight
+  .tutorial-spotlight-frame {
+  box-shadow:
+    0 0 0 4px rgba(0, 0, 0, 0.5),
+    0 0 0 3px rgba(102, 178, 255, 1);
+}
+
+/* The card collapses to its title and buttons when its target cannot be
+   scrolled clear of it (R-Z22). */
+.tutorial-overlay .tutorial-step[data-compact='true'] .tutorial-body,
+.tutorial-overlay .tutorial-step[data-compact='true'] .tutorial-examples {
+  display: none;
+}

package/js/src/web/app.js

@@ -23,6 +23,7 @@ import { LocaleContext, useLocale } from './i18n.js';
 import { LanguageSwitcher } from './language-switcher.js';
 import { AppShell } from './shell/app-shell.js';
 import { useAppearance, useApplyAppearance } from './appearance.js';
+import { useApplyEffects } from './effects.js';
 import { WebModeBanner } from './web-mode-banner.js';
 import { DiskBanner } from './disk-banner.js';
 import { SchemaBanner } from './schema-banner.js';
@@ -103,6 +104,8 @@ const App = () => {
   // the header button (R-M12) — see ./tutorial-start.js.
   const connected = useAnyConnection(api);
   const [tutorialOpen, setTutorialOpen] = useState(false);
+  // Frosted glass and dims off on a slow-rendering browser (R-Z21).
+  useApplyEffects(tutorialOpen);
   const decided = useRef(false);
   useEffect(() => {
     if (connected === null || decided.current) {

package/js/src/web/effects.js

@@ -0,0 +1,263 @@
+// Reduced visual effects (R-Z21): on a machine that renders slowly (a
+// browser without a GPU, software compositing) the frosted-glass blur
+// and the tutorial's page-sized dim can make every frame take seconds,
+// so clicks never settle. A bounded frame-time probe measures it, and
+// `<html data-effects="reduced">` then switches the blur, the page-wide
+// dim and the non-essential animations off (app.css, same solid look as
+// `prefers-reduced-transparency`).
+//
+// Setting "Reduce visual effects": auto (default: the probe decides),
+// on or off, kept in localStorage like the theme (a UI preference, not
+// store data). `?effects=reduced|full` in the URL overrides it for the
+// visit, `prefers-reduced-transparency` / `prefers-reduced-motion`
+// count as "on" in auto.
+
+import { useEffect, useSyncExternalStore } from 'react';
+
+export const EFFECTS_MODES = ['auto', 'on', 'off'];
+export const EFFECTS_KEY = 'metaSovereignEffects';
+
+const SAMPLES = 10;
+const MIN_SAMPLES = 5;
+const SLOW_FRAME_MS = 50;
+const SLOW_FRAME_FEW_CORES_MS = 34;
+const PROBE_BUDGET_MS = 4000;
+const SETTLE_TIMEOUT_MS = 2000;
+
+const median = (values) => {
+  const sorted = [...values].sort((a, b) => a - b);
+  const mid = sorted.length >> 1;
+  return sorted.length % 2 ? sorted[mid] : (sorted[mid - 1] + sorted[mid]) / 2;
+};
+
+/** Gaps between consecutive frame timestamps. */
+export const frameIntervals = (stamps) =>
+  stamps.slice(1).map((stamp, index) => stamp - stamps[index]);
+
+/**
+ * Whether measured frame gaps (ms) mean "render less": the median above
+ * 50 ms, or above ~34 ms (under 30 fps) on a machine with two cores or
+ * fewer. Too few samples decide nothing.
+ */
+export const isSlowRendering = (intervals, { cores = 4 } = {}) => {
+  if (!Array.isArray(intervals) || intervals.length < MIN_SAMPLES) {
+    return false;
+  }
+  const typical = median(intervals);
+  return (
+    typical > SLOW_FRAME_MS || (cores <= 2 && typical > SLOW_FRAME_FEW_CORES_MS)
+  );
+};
+
+/**
+ * Samples up to `samples` animation frames, then stops (it never keeps a
+ * loop running): resolves with the frame gaps, or with what it has when
+ * the budget passes or the page is hidden (no frames are drawn then).
+ */
+export const probeFrames = ({
+  raf = globalThis.requestAnimationFrame?.bind(globalThis),
+  cancel = globalThis.cancelAnimationFrame?.bind(globalThis),
+  samples = SAMPLES + 1,
+  budgetMs = PROBE_BUDGET_MS,
+  setTimer = globalThis.setTimeout,
+  clearTimer = globalThis.clearTimeout,
+} = {}) =>
+  new Promise((resolve) => {
+    if (!raf) {
+      resolve([]);
+      return;
+    }
+    const stamps = [];
+    let handle = 0;
+    let done = false;
+    const finish = () => {
+      if (!done) {
+        done = true;
+        cancel?.(handle);
+        clearTimer(timer);
+        resolve(frameIntervals(stamps));
+      }
+    };
+    const timer = setTimer(finish, budgetMs);
+    const step = (stamp) => {
+      stamps.push(stamp);
+      if (stamps.length >= samples) {
+        finish();
+      } else {
+        handle = raf(step);
+      }
+    };
+    handle = raf(step);
+  });
+
+const read = (key) => {
+  try {
+    return globalThis.localStorage?.getItem(key) ?? null;
+  } catch {
+    // Storage can be disabled in restricted browser contexts.
+    return null;
+  }
+};
+
+const write = (key, value) => {
+  try {
+    globalThis.localStorage?.setItem(key, value);
+  } catch {
+    // See read().
+  }
+};
+
+let mode = null;
+let measured = false;
+const listeners = new Set();
+const current = () => {
+  if (mode === null) {
+    const stored = read(EFFECTS_KEY);
+    mode = EFFECTS_MODES.includes(stored) ? stored : 'auto';
+  }
+  return mode;
+};
+const subscribe = (listener) => {
+  listeners.add(listener);
+  return () => listeners.delete(listener);
+};
+const notify = () => listeners.forEach((listener) => listener());
+
+export const setEffectsMode = (next) => {
+  if (!EFFECTS_MODES.includes(next)) {
+    return false;
+  }
+  mode = next;
+  write(EFFECTS_KEY, next);
+  notify();
+  return true;
+};
+
+const matches = (query) => Boolean(globalThis.matchMedia?.(query)?.matches);
+
+/** `reduced` or `full` from the choice, the URL, the OS and the probe. */
+export const resolveEffects = ({
+  choice = 'auto',
+  query = '',
+  slow = false,
+  osReduced = false,
+} = {}) => {
+  const forced = new URLSearchParams(query).get('effects');
+  if (forced === 'reduced' || forced === 'full') {
+    return forced;
+  }
+  if (choice === 'on') {
+    return 'reduced';
+  }
+  if (choice === 'off') {
+    return 'full';
+  }
+  return slow || osReduced ? 'reduced' : 'full';
+};
+
+/**
+ * True only when `needed` consecutive probe samples are all slow, so one
+ * janky stretch (boot, a big list rendering) never decides. A fast, empty
+ * (hidden page) or missing sample ends it at once; at most `needed`
+ * samples are ever taken.
+ */
+export const detectSlowRendering = async ({
+  sample = probeFrames,
+  cores = 4,
+  needed = 2,
+} = {}) => {
+  for (let taken = 0; taken < needed; taken += 1) {
+    if (!isSlowRendering(await sample(), { cores })) {
+      return false;
+    }
+  }
+  return true;
+};
+
+/**
+ * Resolves once the app has settled after startup: the page is loaded,
+ * then the browser is idle (or `timeoutMs` passes).
+ */
+export const whenSettled = ({
+  ready = () => globalThis.document?.readyState === 'complete',
+  onLoad = (cb) => globalThis.addEventListener?.('load', cb, { once: true }),
+  idle = globalThis.requestIdleCallback?.bind(globalThis),
+  setTimer = globalThis.setTimeout,
+  timeoutMs = SETTLE_TIMEOUT_MS,
+} = {}) =>
+  new Promise((resolve) => {
+    const afterLoad = () =>
+      idle
+        ? idle(resolve, { timeout: timeoutMs })
+        : setTimer(resolve, timeoutMs);
+    if (ready()) {
+      afterLoad();
+    } else {
+      onLoad(afterLoad);
+      setTimer(resolve, timeoutMs);
+    }
+  });
+
+// The decision lives in session memory only; just the user's explicit
+// choice is stored.
+let probing = false;
+const probe = async (settle) => {
+  if (measured || probing || current() !== 'auto') {
+    return;
+  }
+  probing = true;
+  try {
+    if (settle) {
+      await whenSettled();
+    }
+    if (
+      current() === 'auto' &&
+      (await detectSlowRendering({
+        cores: globalThis.navigator?.hardwareConcurrency ?? 4,
+      }))
+    ) {
+      measured = true;
+      notify();
+    }
+  } finally {
+    probing = false;
+  }
+};
+
+const apply = (choice) => {
+  const root = globalThis.document?.documentElement;
+  if (root) {
+    root.dataset.effects = resolveEffects({
+      choice,
+      query: globalThis.location?.search ?? '',
+      slow: measured,
+      osReduced:
+        matches('(prefers-reduced-transparency: reduce)') ||
+        matches('(prefers-reduced-motion: reduce)'),
+    });
+  }
+};
+
+/** `{ effects, setEffects }` for the Settings control. */
+export const useEffectsSetting = () => ({
+  effects: useSyncExternalStore(subscribe, current, current),
+  setEffects: setEffectsMode,
+});
+
+/**
+ * Keeps <html data-effects> in step with the choice and probes the frame
+ * time once the app has settled and when the tutorial opens (two slow
+ * samples in a row; a slow page is noticed once and stays reduced for
+ * the visit, in memory only).
+ */
+export const useApplyEffects = (tutorialOpen = false) => {
+  const choice = useSyncExternalStore(subscribe, current, current);
+  useEffect(() => {
+    apply(choice);
+    return subscribe(() => apply(current()));
+  }, [choice]);
+  useEffect(() => {
+    // Startup waits for the app to settle; opening the tutorial probes now.
+    probe(!tutorialOpen);
+  }, [choice, tutorialOpen]);
+};

package/js/src/web/locales/en.js

@@ -1000,6 +1000,10 @@ export const en = {
     'The theme and skin apply to every screen and are kept in this browser. The Theme button in the header switches between light and dark.',
   'settings.appearance.theme': 'Theme',
   'settings.appearance.skin': 'Skin',
+  'settings.appearance.effects': 'Reduce visual effects',
+  'settings.effects.auto': 'Automatic: when this browser renders slowly',
+  'settings.effects.on': 'Always reduced (no blur)',
+  'settings.effects.off': 'Full effects',
   'settings.theme.system': 'Follow the system',
   'settings.theme.light': 'Light',
   'settings.theme.dark': 'Dark',

package/js/src/web/locales/hi.js

@@ -997,6 +997,10 @@ export const hi = {
     'थीम और स्किन हर स्क्रीन पर लागू होती हैं और इसी ब्राउज़र में सहेजी जाती हैं। हेडर का थीम बटन हल्की और गहरी थीम के बीच बदलता है।',
   'settings.appearance.theme': 'थीम',
   'settings.appearance.skin': 'स्किन',
+  'settings.appearance.effects': 'दृश्य प्रभाव घटाएँ',
+  'settings.effects.auto': 'स्वचालित: जब ब्राउज़र धीमा रेंडर करे',
+  'settings.effects.on': 'हमेशा घटे हुए (बिना ब्लर)',
+  'settings.effects.off': 'पूरे प्रभाव',
   'settings.theme.system': 'सिस्टम के अनुसार',
   'settings.theme.light': 'हल्की',
   'settings.theme.dark': 'गहरी',

package/js/src/web/locales/ru.js

@@ -1012,6 +1012,10 @@ export const ru = {
     'Тема и оформление действуют на всех экранах и сохраняются в этом браузере. Кнопка «Тема» в шапке переключает светлую и тёмную.',
   'settings.appearance.theme': 'Тема',
   'settings.appearance.skin': 'Оформление',
+  'settings.appearance.effects': 'Упростить оформление',
+  'settings.effects.auto': 'Автоматически: если браузер медленно рисует',
+  'settings.effects.on': 'Всегда упрощённо (без размытия)',
+  'settings.effects.off': 'Все эффекты',
   'settings.theme.system': 'Как в системе',
   'settings.theme.light': 'Светлая',
   'settings.theme.dark': 'Тёмная',

package/js/src/web/locales/zh.js

@@ -963,6 +963,10 @@ export const zh = {
     '主题和皮肤作用于所有界面，并保存在此浏览器中。页眉中的“主题”按钮可在浅色和深色之间切换。',
   'settings.appearance.theme': '主题',
   'settings.appearance.skin': '皮肤',
+  'settings.appearance.effects': '减少视觉效果',
+  'settings.effects.auto': '自动：浏览器渲染缓慢时',
+  'settings.effects.on': '始终减少（无模糊）',
+  'settings.effects.off': '完整效果',
   'settings.theme.system': '跟随系统',
   'settings.theme.light': '浅色',
   'settings.theme.dark': '深色',

package/js/src/web/settings-view.js

@@ -13,6 +13,7 @@ import { MediaSettings } from './settings-media.js';
 import { ScaleSettings } from './settings-scale.js';
 import { ProxySettings } from './settings-proxy.js';
 import { SKINS, THEME_MODES, useAppearance } from './appearance.js';
+import { EFFECTS_MODES, useEffectsSetting } from './effects.js';
 import { api } from './dom.js';
 import { ChatBackgroundSettings } from './chat-wallpaper.js';
 import { CloudThemeSettings } from './cloud-themes.js';
@@ -49,6 +50,7 @@ const Choices = ({ name, legend, options, value, onChange, label }) =>
 /** Theme mode (system, light, dark, auto) and skin (t3, Telegram, …). */
 export const AppearanceSettings = ({ appearance }) => {
   const t = useT();
+  const { effects, setEffects } = useEffectsSetting();
   return el(
     'section',
     { className: 'card appearance', 'aria-labelledby': 'appearance-title' },
@@ -79,6 +81,16 @@ export const AppearanceSettings = ({ appearance }) => {
           value: appearance.skin,
           onChange: appearance.setSkin,
           label: (skin) => t(`settings.skin.${skin}`),
+        }),
+        // Blur and dims off on a slow browser (R-Z21).
+        el(Choices, {
+          key: 'effects',
+          name: 'effects-mode',
+          legend: t('settings.appearance.effects'),
+          options: EFFECTS_MODES,
+          value: effects,
+          onChange: setEffects,
+          label: (mode) => t(`settings.effects.${mode}`),
         })
       ),
     ]

package/js/src/web/tutorial-clear.js

@@ -0,0 +1,151 @@
+// The card never covers the control it asks the user to click (R-Z22).
+//
+// A card docked to the screen edge (a section too big for a side, a
+// short or narrow screen, taller fonts than the developer's) can end
+// up over its own target: the target was scrolled "into view" before
+// the card's size was known. Once the card is placed, this checks the
+// two boxes and, if they meet, scrolls the target into the band the
+// card leaves free (`scroll-margin` on the target, so every clipping
+// container — the page, a drawer — takes part). If the target cannot
+// be moved clear (the band is smaller than the target and the page
+// cannot scroll further) the card collapses to its title and buttons,
+// which is the smaller dock.
+
+import { useEffect, useState } from 'react';
+import { GAP, intersects } from './tutorial-placement.js';
+
+const ATTEMPT_DELAYS_MS = [0, 250, 700];
+const RESIZE_DEBOUNCE_MS = 60;
+
+const boxOf = (node) => {
+  const r = node.getBoundingClientRect();
+  return { top: r.top, left: r.left, width: r.width, height: r.height };
+};
+
+/**
+ * Where the card leaves room: `{top, bottom, below}` in screen
+ * coordinates. A card in the lower half leaves the space above it.
+ */
+export const freeBand = (card, viewport, chromeBottom = 0) => {
+  const below = card.top + card.height / 2 > viewport.height / 2;
+  return below
+    ? { top: chromeBottom, bottom: card.top - GAP, below }
+    : { top: card.top + card.height + GAP, bottom: viewport.height, below };
+};
+
+/**
+ * Is the target where the card leaves it? A target that fits the free
+ * band must not meet the card at all. One taller than the band (the
+ * services grid) runs under the card by nature: it is read from its
+ * top, so that top must sit in the upper part of the band, with the
+ * first controls (sign-ins, the first services) in the clear.
+ */
+export const placedClear = (target, card, band, viewport) => {
+  if (!intersects(card, target)) {
+    return true;
+  }
+  // Too tall for the screen even without a card: read from the top.
+  if (target.height <= viewport.height - band.top - GAP) {
+    return false;
+  }
+  const size = band.bottom - band.top;
+  return target.top >= band.top - 2 && target.top <= band.top + size / 4;
+};
+
+const scrollInto = (element, band, viewport, block) => {
+  const style = element.style;
+  const saved = [style.scrollMarginTop, style.scrollMarginBottom];
+  style.scrollMarginTop = `${Math.max(0, band.top)}px`;
+  style.scrollMarginBottom = `${Math.max(0, viewport.height - band.bottom)}px`;
+  try {
+    element.scrollIntoView?.({ block, inline: 'nearest', behavior: 'auto' });
+  } finally {
+    [style.scrollMarginTop, style.scrollMarginBottom] = saved;
+  }
+};
+
+/**
+ * One check: 'clear' when the target (and the control the step names
+ * inside it, `mustShow`) is where the card leaves it, else it scrolls
+ * and reports 'scrolled', or 'stuck' (nothing more to scroll).
+ */
+export const clearOnce = (element, cardNode, viewport, mustShow = '') => {
+  const chrome = document.querySelector('.topbar')?.getBoundingClientRect();
+  const band = freeBand(boxOf(cardNode), viewport, chrome?.bottom ?? 0);
+  const control = mustShow ? element.querySelector(mustShow) : null;
+  const ok = () => {
+    const card = boxOf(cardNode);
+    const covered = control && intersects(card, boxOf(control));
+    return placedClear(boxOf(element), card, band, viewport) && !covered;
+  };
+  if (ok()) {
+    return 'clear';
+  }
+  const target = boxOf(element);
+  const fits = target.height <= band.bottom - band.top;
+  scrollInto(element, band, viewport, fits ? 'nearest' : 'start');
+  if (control && !ok()) {
+    scrollInto(control, band, viewport, 'nearest');
+  }
+  return ok() ? 'scrolled' : 'stuck';
+};
+
+/**
+ * Keeps the target clear of the card after every placement. Returns
+ * true when the card had to collapse (title and buttons only).
+ */
+export const useClearOfCard = ({
+  cardRef,
+  element,
+  stepId,
+  placed,
+  cardSize,
+  viewportOf,
+  mustShow = '',
+}) => {
+  const [collapsed, setCollapsed] = useState(null);
+  const compact = collapsed === stepId;
+  const key = `${placed?.side}|${placed?.style?.top}|${placed?.style?.left}`;
+  useEffect(() => {
+    const node = cardRef.current;
+    if (
+      !element?.isConnected ||
+      !node ||
+      !placed ||
+      placed.side === 'pending'
+    ) {
+      return undefined;
+    }
+    const check = (final) => {
+      const result =
+        element.isConnected && node.isConnected
+          ? clearOnce(element, node, viewportOf(), mustShow)
+          : 'clear';
+      if (result === 'stuck' && final) {
+        setCollapsed(stepId);
+      }
+    };
+    const timers = ATTEMPT_DELAYS_MS.map((delay, i) =>
+      globalThis.setTimeout(() => {
+        check(i === ATTEMPT_DELAYS_MS.length - 1);
+      }, delay)
+    );
+    // The target can change size after the card is placed (a panel
+    // that finishes loading, a tab with less in it): check again.
+    let late = 0;
+    const Observer = globalThis.ResizeObserver;
+    const observer = Observer
+      ? new Observer(() => {
+          globalThis.clearTimeout(late);
+          late = globalThis.setTimeout(() => check(true), RESIZE_DEBOUNCE_MS);
+        })
+      : null;
+    observer?.observe(element);
+    return () => {
+      timers.forEach((timer) => globalThis.clearTimeout(timer));
+      globalThis.clearTimeout(late);
+      observer?.disconnect();
+    };
+  }, [stepId, element, key, cardSize?.height, compact]);
+  return compact;
+};

package/js/src/web/tutorial.js

@@ -38,6 +38,7 @@ import {
 } from './tutorial-follow.js';
 import { parseConnectionHash } from './connections/hash.js';
 import { startIndex } from './tutorial-start.js';
+import { useClearOfCard } from './tutorial-clear.js';
 
 const el = React.createElement;
 
@@ -114,6 +115,8 @@ export const defaultSteps = [
     id: 'pick',
     connecting: true,
     tutorialId: 'connections:list',
+    // The first service stays clear of the card (R-Z22).
+    mustShow: '[data-tutorial-id="connections:email"]',
     route: { view: 'connections', detail: false },
     completeAt: { view: 'connections', detail: true },
     titleKey: 'tutorial.connections.title',
@@ -720,13 +723,19 @@ const prefersReducedMotion = () =>
 // of the screen — the card goes in that room, above it, never over it.
 const tooTall = (r, room) => r.height > (globalThis.innerHeight ?? 0) - room;
 
+// The sticky header's bottom edge: a tall target's top goes just below
+// it; useClearOfCard then makes room for the card (R-Z22).
+const chromeBottom = () =>
+  globalThis.document?.querySelector('.topbar')?.getBoundingClientRect()
+    .bottom ?? 0;
+
 const inView = (element, room) => {
   const r = element.getBoundingClientRect();
   const height = globalThis.innerHeight ?? 0;
   const width = globalThis.innerWidth ?? 0;
   const across = r.left >= 0 && r.right <= width;
   return tooTall(r, room)
-    ? across && r.top >= room - 1 && r.top <= Math.max(room, height / 2)
+    ? across && r.top >= chromeBottom() - 1 && r.top <= height / 2
     : across && r.top >= 0 && r.bottom <= height;
 };
 
@@ -766,7 +775,7 @@ const useRevealTarget = (stepId, element, room = 0) => {
         tries === 0 && !prefersReducedMotion() ? 'smooth' : 'auto';
       const r = element.getBoundingClientRect();
       if (tooTall(r, room)) {
-        globalThis.scrollBy?.({ top: r.top - room, behavior });
+        globalThis.scrollBy?.({ top: r.top - chromeBottom(), behavior });
       } else {
         element.scrollIntoView?.({
           block: 'nearest',
@@ -791,6 +800,8 @@ const useRevealTarget = (stepId, element, room = 0) => {
 // Focus follows the tour once the user is in it. When the tour opens
 // by itself on page load (nothing focused yet), the first step leaves
 // focus alone so the skip link stays the first Tab stop.
+const FOCUS_RETRY_MS = [120, 350, 800];
+
 const useDialogFocus = (cardRef, stepId, visible) => {
   const doc = globalThis.document;
   const opened = useRef(null);
@@ -807,10 +818,31 @@ const useDialogFocus = (cardRef, stepId, visible) => {
   );
   useEffect(() => {
     if (!visible || stepId === opened.current.quietStep) {
-      return;
+      return undefined;
     }
     opened.current.quietStep = null;
-    cardRef.current?.focus?.({ preventScroll: true });
+    const grab = () => cardRef.current?.focus?.({ preventScroll: true });
+    grab();
+    // The page may take focus back a moment later (a view that focuses
+    // its composer as it mounts, a renderer that was still painting):
+    // grab it again, for a short while, until the user acts (R-Z22).
+    let acted = false;
+    const onAct = () => {
+      acted = true;
+    };
+    const events = ['keydown', 'pointerdown', 'mousedown', 'touchstart'];
+    events.forEach((name) => doc?.addEventListener(name, onAct, true));
+    const timers = FOCUS_RETRY_MS.map((delay) =>
+      globalThis.setTimeout(() => {
+        if (!acted && doc?.activeElement !== cardRef.current) {
+          grab();
+        }
+      }, delay)
+    );
+    return () => {
+      timers.forEach((timer) => globalThis.clearTimeout(timer));
+      events.forEach((name) => doc?.removeEventListener(name, onAct, true));
+    };
   }, [stepId, visible]);
 };
 
@@ -871,6 +903,7 @@ const Step = ({
   side,
   follow,
   arrowStyle,
+  compact = false,
 }) => {
   const t = useT();
   const titleId = `tutorial-step-${step.id}`;
@@ -886,6 +919,7 @@ const Step = ({
       'data-tutorial-step': step.id,
       'data-side': side,
       'data-follow': follow,
+      'data-compact': compact ? 'true' : undefined,
       tabIndex: -1,
       style,
     },
@@ -1182,6 +1216,15 @@ const TutorialLayer = ({
   const layout = cardLayout({ placed, cardSize, waiting });
   useDialogFocus(cardRef, step.id, layout.side !== 'pending');
   useDockSpace(dockSpace(layout, cardSize));
+  const compact = useClearOfCard({
+    cardRef,
+    element,
+    stepId: step.id,
+    placed: layout,
+    cardSize,
+    viewportOf: viewportSize,
+    mustShow: step.mustShow,
+  });
   return el(
     'div',
     {
@@ -1212,6 +1255,7 @@ const TutorialLayer = ({
         side: layout.side,
         follow: layout.mode,
         arrowStyle: layout.arrowStyle,
+        compact,
       }),
     ]
   );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "meta-sovereign",
-  "version": "0.49.12",
+  "version": "0.49.14",
   "description": "Personal meta profile sovereign system - fully local, privacy-respecting personal CRM and unified messenger across services",
   "type": "module",
   "main": "js/src/index.js",
@@ -275,6 +275,8 @@
     "test:e2e:scale-proxy": "node js/tests/e2e-scale-proxy-browser.mjs",
     "test:e2e:scale-proxy:webkit": "E2E_BROWSER=webkit node js/tests/e2e-scale-proxy-browser.mjs",
     "test:e2e:peer-bar": "node js/tests/e2e-peer-bar-browser.mjs",
+    "test:e2e:visual-effects": "node js/tests/e2e-visual-effects-browser.mjs",
+    "test:e2e:visual-effects:webkit": "E2E_BROWSER=webkit node js/tests/e2e-visual-effects-browser.mjs",
     "test:e2e:voice-chat": "node js/tests/e2e-voice-chat-browser.mjs",
     "test:e2e:voice-chat:webkit": "E2E_BROWSER=webkit node js/tests/e2e-voice-chat-browser.mjs",
     "test:e2e:sounds": "node js/tests/e2e-sounds-browser.mjs",