meta-sovereign 0.49.12 → 0.49.13

package/js/src/web/app.css

@@ -12607,3 +12607,33 @@ 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;
+  transition-duration: 0.01ms !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);
+}

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "meta-sovereign",
-  "version": "0.49.12",
+  "version": "0.49.13",
   "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",