refactor: scope frontend utilities

CHANGELOG.md

@@ -8,6 +8,8 @@ Follows [Keep a Changelog](https://keepachangelog.com/en/1.0.0/) · versioned wi
 ## [Unreleased]
 
 ### Changed
+- **Utility namespace migration.** Shared DOM, status, accessibility, language, tab, and low-memory helpers now use a
+  private scope with explicit compatibility exports and a `window.TTVC.utils` API.
 - **Voice-inspector namespace migration.** The three-pane voice inspector now keeps its selection state in a private
   scope while preserving `selectVoice` and exposing `window.TTVC.voiceInspector.select`.
 - **Character-library namespace migration.** Character rendering, detail views, avatar handling, and generation actions

TODO.md

@@ -127,8 +127,8 @@ architecture change: the larger Audiobook/Rehearser/style split.
 - [ ] Replace broad globals with namespaces such as `window.TTVC.audiobook`; pure leaves, Audiobook/Reader/Rehearser
   feature modules, Studio, and character-library persistence now use private scopes with explicit compatibility exports.
   Voice-library loading, rendering, benchmarking, import workflows, character-sheet extraction, and character-library
-  rendering/actions, and voice-inspector selection are now scoped;
+  rendering/actions, voice-inspector selection, and shared utility helpers are now scoped; remaining legacy library UI
-  remaining utility and legacy library UI modules still require the same responsibility-by-responsibility migration.
+  modules still require the same responsibility-by-responsibility migration.
 - [x] Generate the feature-module list for `loader.js` and `scripts/minify.mjs` from one shared manifest;
   larger responsibility splits remain.
 - [x] Add a dependency-free frontend syntax and top-level declaration collision gate (`npm run check:frontend`);

VERSION

@@ -1 +1 @@
-1.24.88
+1.24.89

docs/ARCHITECTURE.md

@@ -78,6 +78,7 @@ Done incrementally as global-scope ordered files (no ES-module change needed)
 - ✅ Character-sheet extraction and prompt helpers use a private scope with explicit compatibility exports and a namespace API.
 - ✅ Character-library rendering, detail, avatar, and generation actions use a private scope with compatibility exports and a namespace API.
 - ✅ Voice-inspector selection state uses a private scope with a compatibility export and namespace API.
+- ✅ Shared utility helpers use a private scope with explicit compatibility exports and a `window.TTVC.utils` API.
 - ✅ `static/css/resource-diagnostics.css` — isolated Performance/resource diagnostic panel styles.
 - ✅ `static/css/background-jobs.css` — isolated background-job history and retry-panel styles.
 - ✅ `static/css/voice-design.css` — isolated Voice Design form, samples, and preview-match styles.

static/index.html

@@ -10,7 +10,7 @@
   <meta name="format-detection" content="telephone=no">
   <meta name="color-scheme" content="light dark">
   <meta name="theme-color" content="#2563EB">
-  <meta name="app-version" content="1.24.88">
+  <meta name="app-version" content="1.24.89">
   <link rel="manifest" href="/manifest.webmanifest">
   <link rel="icon" href="/static/icon.svg" type="image/svg+xml">
   <link rel="apple-touch-icon" href="/static/icon.svg">
@@ -27,12 +27,12 @@
 
   <!-- ── Core styles (local — no CDN dependency for first paint) ────────── -->
   <link rel="stylesheet" href="/static/vendor/mdi/materialdesignicons.min.css">
-  <link rel="stylesheet" href="/static/style.css?v=1.24.88">
+  <link rel="stylesheet" href="/static/style.css?v=1.24.89">
-  <link rel="stylesheet" href="/static/css/resource-diagnostics.css?v=1.24.88">
+  <link rel="stylesheet" href="/static/css/resource-diagnostics.css?v=1.24.89">
-  <link rel="stylesheet" href="/static/css/background-jobs.css?v=1.24.88">
+  <link rel="stylesheet" href="/static/css/background-jobs.css?v=1.24.89">
-  <link rel="stylesheet" href="/static/css/voice-design.css?v=1.24.88">
+  <link rel="stylesheet" href="/static/css/voice-design.css?v=1.24.89">
-  <link rel="stylesheet" href="/static/css/rehearser.css?v=1.24.88">
+  <link rel="stylesheet" href="/static/css/rehearser.css?v=1.24.89">
-  <link rel="stylesheet" href="/static/css/audiobook.css?v=1.24.88">
+  <link rel="stylesheet" href="/static/css/audiobook.css?v=1.24.89">
 
 
   <!-- ── Flag icons — non-blocking (loaded async, icons appear after JS) ── -->
@@ -397,7 +397,7 @@ window.toggleNavTree = function(treeId, chevronId) {
 </script>
 
 <!-- loader.js: fetches sections → loads JS modules → removes skeleton -->
-<script src="/static/loader.js?v=1.24.88"></script>
+<script src="/static/loader.js?v=1.24.89"></script>
 
 </body>
 </html>

static/js/utils.js

@@ -1,5 +1,7 @@
 // ── Utility ───────────────────────────────────────────────────────────────
 
+(function (root) {
+
 const $ = id => document.getElementById(id);
 
 // ── Voice avatar colors ───────────────────────────────────────────────────
@@ -1382,3 +1384,28 @@ if (typeof MutationObserver !== 'undefined') {
 }
 if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', () => initLangSelects(document));
 else initLangSelects(document);
+
+Object.assign(root, {
+  $, avatarColor, toast, confirmDialog, status, ensureStatusBar, updateStatusBar,
+  escHtml, debounce, logErr, ttvcIsLowMemoryDevice, fmtDuration, loadingMarkup,
+  setBusyButton, enhanceAccessibility, applyTheme, cc2flag, ccDisplay,
+  setPreviewLang, openPreviewLangPicker, createSearchablePicker, getStoredTags,
+  addStoredTag, scheduleVoiceLibraryLoad, disabledBackendTabMessage, switchTab,
+  detectLang, workflowCrumbGo, refreshWorkflowCrumbs, ensureLangDatalist,
+  normalizeLangCodeInput, langFlag, enhanceLangSelect, initLangSelects,
+  FLAG_OPTIONS, ALL_FLAGS, LANG_FLAG_DEFAULT, VL_SAMPLE_TEXTS, _VL_LANG_FLAG,
+  LANG_CODE_OPTIONS,
+});
+// `window.status` is a replaceable legacy browser property; assignment via
+// Object.assign can be ignored or coerce the function to a string.
+try { Object.defineProperty(root, 'status', { configurable: true, writable: true, value: status }); } catch (_) {}
+root.TTVC = root.TTVC || {};
+root.TTVC.utils = root.TTVC.utils || {};
+Object.assign(root.TTVC.utils, {
+  dom: { $, escHtml },
+  ui: { toast, confirmDialog, status, setBusyButton, loadingMarkup },
+  accessibility: { enhance: enhanceAccessibility },
+  language: { detect: detectLang, flag: langFlag, enhanceSelect: enhanceLangSelect },
+  memory: { isLow: ttvcIsLowMemoryDevice },
+});
+})(window);