feat: extend module platform with UI slots, runtime components, CLI tooling and {{userId}} search support

Completes the generic module platform that enables modules to contribute
UI elements, runtime JS components, and search resources without any
core hardcoding.

New generic UI slot types:
- topbar.right_item: module-contributed topbar buttons
- layout.body_end_template: module-contributed dialog/overlay templates
- layout.head_style: module-contributed global CSS
- runtime.component: declarative JS component registration with phase ordering

New infrastructure:
- ModuleAutoloader: PSR-4 autoloading for module-local PHP classes
- ModuleRuntimePageBuilder: symlinks module pages into runtime directory
- ModuleRuntimeAssetPublisher: publishes module CSS/JS to web/modules/
- ModulePermissionSynchronizer: syncs module permissions to DB
- CLI scripts: module-runtime-sync, module-build, module-migrate,
  module-permissions-sync, module-assets-sync
- {{userId}} placeholder in SearchDataService for user-scoped search queries
- Component runtime with phased initialization (early/default/late)
- AppContainer.protectExistingBindings() to prevent module→core overwrites
- Architecture tests: ModuleStructureContractTest, CoreTemplateIsolationTest,
  FrontendComponentRuntimeContractTest, AppContainerIsolationContractTest

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

web/js/components/app-color-default-toggle.js

@@ -1,18 +1,16 @@
 /**
  * Toggles color input between custom value and default/inherited color.
  */
-import { warnOnce } from '../core/app-dom.js';
+import { warnOnce, resolveHost } from '../core/app-dom.js';
 
-const toggles = document.querySelectorAll('[data-color-default-toggle]');
-
-const syncToggle = (toggle) => {
+const syncToggle = (toggle, scope) => {
   const targetSelector = toggle.dataset.colorTarget || '';
   if (!targetSelector) {
     warnOnce('UI_EL_MISSING', 'Missing data-color-target', { module: 'color-default-toggle' });
     return;
   }
-  const target = document.querySelector(targetSelector);
-  if (!target) {
+  const target = scope.querySelector(targetSelector);
+  if (!(target instanceof HTMLInputElement)) {
     warnOnce('UI_EL_MISSING', `Missing color target: ${targetSelector}`, { module: 'color-default-toggle' });
     return;
   }
@@ -31,23 +29,54 @@ const syncToggle = (toggle) => {
   }
 };
 
-toggles.forEach((toggle) => {
-  const targetSelector = toggle.dataset.colorTarget || '';
-  const target = targetSelector ? document.querySelector(targetSelector) : null;
-  if (targetSelector && !target) {
-    warnOnce('UI_EL_MISSING', `Missing color target: ${targetSelector}`, { module: 'color-default-toggle' });
+export function initColorDefaultToggle(root = document, options = {}) {
+  const host = resolveHost(root);
+  const selector = String(options.selector || '[data-color-default-toggle]').trim() || '[data-color-default-toggle]';
+  const toggles = Array.from(host.querySelectorAll(selector)).filter(
+    (toggle) => toggle instanceof HTMLInputElement
+  );
+  if (!toggles.length) {
+    return { destroy: () => {} };
   }
 
-  toggle.addEventListener('change', () => syncToggle(toggle));
+  const cleanupFns = [];
+  toggles.forEach((toggle) => {
+    if (toggle.dataset.colorDefaultToggleBound === '1') {
+      return;
+    }
+    toggle.dataset.colorDefaultToggleBound = '1';
 
-  if (target) {
-    target.addEventListener('input', () => {
-      if (toggle.checked) {
-        toggle.checked = false;
-        target.removeAttribute('disabled');
-      }
+    const scope = document;
+    const targetSelector = toggle.dataset.colorTarget || '';
+    const target = targetSelector ? scope.querySelector(targetSelector) : null;
+    if (targetSelector && !target) {
+      warnOnce('UI_EL_MISSING', `Missing color target: ${targetSelector}`, { module: 'color-default-toggle' });
+    }
+
+    const onToggleChange = () => syncToggle(toggle, scope);
+    toggle.addEventListener('change', onToggleChange);
+    cleanupFns.push(() => toggle.removeEventListener('change', onToggleChange));
+
+    if (target instanceof HTMLInputElement) {
+      const onTargetInput = () => {
+        if (toggle.checked) {
+          toggle.checked = false;
+          target.removeAttribute('disabled');
+        }
+      };
+      target.addEventListener('input', onTargetInput);
+      cleanupFns.push(() => target.removeEventListener('input', onTargetInput));
+    }
+
+    syncToggle(toggle, scope);
+    cleanupFns.push(() => {
+      delete toggle.dataset.colorDefaultToggleBound;
     });
-  }
+  });
 
-  syncToggle(toggle);
-});
+  const destroy = () => {
+    cleanupFns.forEach((cleanup) => cleanup());
+  };
+
+  return { destroy };
+}