@panphora/clayjs 0.1.0

package/src/core/snapshot.js

@@ -0,0 +1,282 @@
+/**
+ * snapshot.js — The source of truth for page state
+ *
+ * THE SAVE/SYNC PIPELINE:
+ *
+ *   ┌─────────────────────────────────────────────────────────┐
+ *   │  1. CLONE         document.documentElement.cloneNode()  │
+ *   └─────────────────────────────────────────────────────────┘
+ *                              │
+ *                              ▼
+ *   ┌─────────────────────────────────────────────────────────┐
+ *   │  2. SNAPSHOT HOOKS       onSnapshot callbacks           │
+ *   │                          (form value sync)              │
+ *   │                                                         │
+ *   │     ✓ Used by: SAVE and LIVE-SYNC                       │
+ *   └─────────────────────────────────────────────────────────┘
+ *                              │
+ *              ┌───────────────┴───────────────┐
+ *              ▼                               ▼
+ *   ┌─────────────────────────┐     ┌─────────────────────────┐
+ *   │  3a. PREPARE HOOKS      │     │  3b. DONE               │
+ *   │  onPrepareForSave       │     │  (live-sync stops here) │
+ *   │  [onbeforesave]         │     │                         │
+ *   │  [save-remove]          │     │  → emits snapshot-ready │
+ *   │                         │     └─────────────────────────┘
+ *   │  ✓ Used by: SAVE only   │
+ *   └─────────────────────────┘
+ *              │
+ *              ▼
+ *   ┌─────────────────────────┐
+ *   │  4. SERIALIZE           │
+ *   │  "<!DOCTYPE html>"      │
+ *   │  + outerHTML            │
+ *   │                         │
+ *   │  → sent to server       │
+ *   └─────────────────────────┘
+ */
+
+import { stripExtensionNoise } from '../lib/extension-noise.js';
+import { STRIP_FROM_SAVE, STRIP_FROM_COMPARISON, SNAPSHOT_REMOVE_SELECTOR } from '../lib/region-policy.js';
+
+// =============================================================================
+// HOOK REGISTRIES
+// =============================================================================
+
+const snapshotHooks = [];       // Phase 2: Always run (form sync)
+const prepareForSaveHooks = []; // Phase 3a: Save only (strip admin)
+
+/**
+ * Register a hook that runs on EVERY snapshot (save AND sync).
+ * Use for: syncing form values to the clone.
+ *
+ * @param {Function} callback - Receives the cloned document element
+ */
+export function onSnapshot(callback) {
+  snapshotHooks.push(callback);
+}
+
+/**
+ * Register a hook that runs ONLY when preparing for save.
+ * Use for: stripping admin elements, cleanup.
+ *
+ * @param {Function} callback - Receives the cloned document element
+ */
+export function onPrepareForSave(callback) {
+  prepareForSaveHooks.push(callback);
+}
+
+// Backwards compat alias
+export const beforeSave = onPrepareForSave;
+
+// =============================================================================
+// CAPTURE FUNCTIONS
+// =============================================================================
+
+/**
+ * PHASE 1-2: Clone the DOM and run snapshot hooks.
+ *
+ * This is the "canonical" state — form values synced, nothing stripped.
+ * Used as the base for both saving and syncing.
+ *
+ * @returns {HTMLElement} Cloned document element with snapshot hooks applied
+ */
+function clonePreventingOnclone(node) {
+  const prev = window.__preventOnclone;
+  window.__preventOnclone = true;
+  try { return node.cloneNode(true); }
+  finally { window.__preventOnclone = prev; }
+}
+
+export function captureSnapshot() {
+  // Force-close any pending undo idle batch BEFORE cloning the DOM, so the
+  // snapshot reflects a clean undo boundary. Without this, a save that fires
+  // mid-typing would leave the idle batch open across the save boundary, and
+  // Cmd+Z after save would restore to a state earlier than the last save.
+  // No-op when undo isn't loaded or no batch is pending.
+  if (typeof window !== 'undefined' && window.hyperclay && window.hyperclay.undo && window.hyperclay.undo.flush) {
+    window.hyperclay.undo.flush();
+  }
+
+  const clone = clonePreventingOnclone(document.documentElement);
+
+  for (const hook of snapshotHooks) {
+    hook(clone);
+  }
+
+  for (const el of clone.querySelectorAll('[onbeforesnapshot]')) {
+    new Function(el.getAttribute('onbeforesnapshot')).call(el);
+  }
+
+  for (const el of clone.querySelectorAll(SNAPSHOT_REMOVE_SELECTOR)) {
+    el.remove();
+  }
+
+  // Browser-extension noise (password-manager menus, Grammarly overlays, and
+  // marker attributes on real inputs) is not page content. Drop it from every
+  // snapshot so it never reaches a save, a comparison, or a live-sync broadcast.
+  stripExtensionNoise(clone);
+
+  return clone;
+}
+
+/**
+ * Prepare an already-captured snapshot for saving.
+ * Mutates the clone — only call once per snapshot.
+ *
+ * @param {HTMLElement} clone - A snapshot from captureSnapshot()
+ * @returns {string} Full HTML string ready for server
+ */
+function prepareCloneForSave(clone) {
+  // Run inline [onbeforesave] handlers
+  for (const el of clone.querySelectorAll('[onbeforesave]')) {
+    new Function(el.getAttribute('onbeforesave')).call(el);
+  }
+
+  // Remove elements that shouldn't be saved ([no-save] / legacy [save-remove])
+  for (const el of clone.querySelectorAll(STRIP_FROM_SAVE)) {
+    el.remove();
+  }
+
+  // Run registered prepare hooks ([freeze]/[save-freeze] innerHTML restore lives here)
+  for (const hook of prepareForSaveHooks) {
+    hook(clone);
+  }
+
+  return "<!DOCTYPE html>" + clone.outerHTML;
+}
+
+/**
+ * Capture snapshot prepared for dirty/change comparison.
+ *
+ * Like captureForSave but also strips every region whose autosave-trigger is off
+ * (no-trigger-autosave, freeze, no-watch, plus the legacy equivalents), so their
+ * churn never marks the page dirty.
+ *
+ * @returns {string} HTML string with all autosave-off regions stripped
+ */
+export function captureForComparison() {
+  const clone = captureSnapshot();
+
+  // Run inline [onbeforesave] handlers
+  for (const el of clone.querySelectorAll('[onbeforesave]')) {
+    new Function(el.getAttribute('onbeforesave')).call(el);
+  }
+
+  // Strip before hooks (hooks see the "final" state)
+  for (const el of clone.querySelectorAll(STRIP_FROM_COMPARISON)) {
+    el.remove();
+  }
+
+  // Run registered prepare hooks
+  for (const hook of prepareForSaveHooks) {
+    hook(clone);
+  }
+
+  return "<!DOCTYPE html>" + clone.outerHTML;
+}
+
+/**
+ * Single-capture function for both saving and comparison.
+ *
+ * Clones the DOM once, then clones that clone for comparison.
+ * More efficient than calling captureForSave() and captureForComparison() separately.
+ *
+ * @param {Object} options
+ * @param {boolean} options.emitForSync - Whether to emit snapshot-ready event (default: true)
+ * @returns {{ forSave: string, forComparison: string }}
+ */
+export function captureForSaveAndComparison({ emitForSync = true } = {}) {
+  const clone = captureSnapshot();
+
+  // Emit for live-sync before any stripping
+  if (emitForSync) {
+    document.dispatchEvent(new CustomEvent('clay:snapshot-ready', {
+      detail: { documentElement: clone }
+    }));
+
+    // Store snapshot HTML for Hyperclay Local platform sync
+    // This allows the save system to send both stripped and full versions
+    const isHyperclayLocal = window.location.hostname === 'localhost' ||
+                             window.location.hostname === '127.0.0.1';
+    if (isHyperclayLocal) {
+      window.__hyperclaySnapshotHtml = '<!DOCTYPE html>' + clone.outerHTML;
+    }
+  }
+
+  // Run inline [onbeforesave] handlers
+  for (const el of clone.querySelectorAll('[onbeforesave]')) {
+    new Function(el.getAttribute('onbeforesave')).call(el);
+  }
+
+  // Clone for comparison before stripping (cheaper than cloning live DOM)
+  const compareClone = clonePreventingOnclone(clone);
+
+  // Save clone: strip [no-save]/[save-remove], then run hooks (freeze restore in hooks)
+  for (const el of clone.querySelectorAll(STRIP_FROM_SAVE)) {
+    el.remove();
+  }
+  for (const hook of prepareForSaveHooks) {
+    hook(clone);
+  }
+  const forSave = "<!DOCTYPE html>" + clone.outerHTML;
+
+  // Compare clone: strip every autosave-off region, then run hooks
+  for (const el of compareClone.querySelectorAll(STRIP_FROM_COMPARISON)) {
+    el.remove();
+  }
+  for (const hook of prepareForSaveHooks) {
+    hook(compareClone);
+  }
+  const forComparison = "<!DOCTYPE html>" + compareClone.outerHTML;
+
+  return { forSave, forComparison };
+}
+
+/**
+ * PHASE 1-4: Full pipeline for saving to server.
+ *
+ * Captures snapshot, emits for live-sync, then prepares for save.
+ * This is the main entry point for the save process.
+ *
+ * @param {Object} options
+ * @param {boolean} options.emitForSync - Whether to emit snapshot-ready event (default: true)
+ * @returns {string} Full HTML string ready for server
+ */
+export function captureForSave({ emitForSync = true } = {}) {
+  const clone = captureSnapshot();
+
+  // Emit for live-sync before stripping admin elements
+  // Sends full cloned documentElement so live-sync can extract head and body
+  if (emitForSync) {
+    document.dispatchEvent(new CustomEvent('clay:snapshot-ready', {
+      detail: { documentElement: clone }
+    }));
+  }
+
+  return prepareCloneForSave(clone);
+}
+
+/**
+ * PHASE 1-2 (body only): For live-sync between admin users.
+ *
+ * Includes admin elements — no stripping.
+ * Note: Prefer listening to 'clay:snapshot-ready' event instead,
+ * which reuses the save's clone.
+ *
+ * @returns {string} Body innerHTML with form values synced
+ */
+export function captureBodyForSync() {
+  const clone = captureSnapshot();
+  return clone.querySelector('body').innerHTML;
+}
+
+/**
+ * Get page contents for change detection.
+ * Does NOT emit snapshot-ready event (safe for comparison).
+ *
+ * Returns full HTML via snapshot pipeline.
+ */
+export function getPageContents() {
+  return captureForSave({ emitForSync: false });
+}

package/src/core/unsaved-warning.js

@@ -0,0 +1,38 @@
+/**
+ * Unsaved Warning Module
+ *
+ * Warns users before leaving the page if there are unsaved changes.
+ * Self-contained: compares current page content to last saved content on beforeunload.
+ *
+ * Works independently of autosave - no mutation observer needed during editing,
+ * just a single comparison when the user tries to leave.
+ *
+ * Both current and stored content have [save-remove] and [save-ignore] stripped,
+ * so comparison is direct with no parsing needed.
+ *
+ * Requires the 'save-system' module (automatically included as dependency).
+ */
+
+import { isOwner, isEditMode } from "./is-edit-mode.js";
+import { captureForComparison } from "./snapshot.js";
+import { getLastSavedContents } from "./save.js";
+import { logUnloadDiffSync, preloadIfEnabled } from "../lib/autosave-debug.js";
+
+// Pre-load diff library if debug mode is on (so it's ready for unload)
+preloadIfEnabled();
+
+window.addEventListener('beforeunload', (event) => {
+  if (!isOwner || !isEditMode) return;
+
+  // Compare directly - both are already stripped
+  const currentForCompare = captureForComparison();
+  const lastSaved = getLastSavedContents();
+
+  if (currentForCompare !== lastSaved) {
+    // Debug: log what's different before showing the warning
+    logUnloadDiffSync(currentForCompare, lastSaved);
+
+    event.preventDefault();
+    event.returnValue = '';
+  }
+});

package/src/lib/autosave-debug.js

@@ -0,0 +1,223 @@
+/**
+ * Autosave Debug Utility
+ *
+ * Provides conditional logging for the autosave system.
+ * Enable by setting localStorage.setItem('clay:debug:autosave', 'true')
+ *
+ * When enabled, dynamically imports a diff library to show exactly
+ * what changed between DOM states.
+ */
+
+const DEBUG_KEY = 'clay:debug:autosave';
+
+let diffModule = null;
+let diffLoadPromise = null;
+
+/**
+ * Check if autosave debug mode is enabled
+ */
+export function isDebugEnabled() {
+  try {
+    return localStorage.getItem(DEBUG_KEY) === 'true';
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Lazily load the diff library only when needed
+ * Uses esm.sh for zero-install dynamic import
+ */
+async function loadDiff() {
+  if (diffModule) return diffModule;
+  if (diffLoadPromise) return diffLoadPromise;
+
+  diffLoadPromise = import('https://esm.sh/diff@5.2.0')
+    .then(mod => {
+      diffModule = mod;
+      return mod;
+    })
+    .catch(err => {
+      console.warn('[autosave-debug] Failed to load diff library:', err);
+      return null;
+    });
+
+  return diffLoadPromise;
+}
+
+/**
+ * Log a brief one-liner for save operations
+ */
+export function logSaveCheck(label, matches) {
+  if (!isDebugEnabled()) return;
+
+  const status = matches ? '✓ matches' : '✗ differs';
+  console.log(`[autosave] ${label}: ${status}`);
+}
+
+/**
+ * Log when baseline is captured/updated
+ */
+export function logBaseline(event, details = '') {
+  if (!isDebugEnabled()) return;
+
+  console.log(`[autosave] baseline ${event}${details ? `: ${details}` : ''}`);
+}
+
+/**
+ * Log and diff two HTML strings (async, for unload warning)
+ * Returns a promise that resolves when logging is complete
+ */
+export async function logUnloadDiff(currentContents, lastSaved) {
+  if (!isDebugEnabled()) return;
+
+  console.group('[autosave] Unload warning triggered - content differs from last save');
+  console.log('Current length:', currentContents.length);
+  console.log('Last saved length:', lastSaved.length);
+  console.log('Difference:', currentContents.length - lastSaved.length, 'characters');
+
+  const diff = await loadDiff();
+
+  if (diff) {
+    const changes = diff.diffLines(lastSaved, currentContents);
+
+    console.log('\n--- DIFF (last saved → current) ---');
+
+    let hasChanges = false;
+    changes.forEach(part => {
+      if (part.added || part.removed) {
+        hasChanges = true;
+        const prefix = part.added ? '+++ ' : '--- ';
+        const lines = part.value.split('\n').filter(l => l.length > 0);
+
+        // Truncate very long diffs
+        const maxLines = 20;
+        const displayLines = lines.slice(0, maxLines);
+
+        displayLines.forEach(line => {
+          // Truncate very long lines
+          const displayLine = line.length > 200
+            ? line.substring(0, 200) + '...[truncated]'
+            : line;
+          console.log(prefix + displayLine);
+        });
+
+        if (lines.length > maxLines) {
+          console.log(`... and ${lines.length - maxLines} more lines`);
+        }
+      }
+    });
+
+    if (!hasChanges) {
+      console.log('(No line-level differences found - may be whitespace or inline changes)');
+      // Fall back to character diff for small differences
+      if (Math.abs(currentContents.length - lastSaved.length) < 500) {
+        const charChanges = diff.diffChars(lastSaved, currentContents);
+        console.log('\n--- CHARACTER DIFF ---');
+        charChanges.forEach(part => {
+          if (part.added || part.removed) {
+            const prefix = part.added ? '+++ ' : '--- ';
+            const value = part.value.length > 100
+              ? part.value.substring(0, 100) + '...[truncated]'
+              : part.value;
+            console.log(prefix + JSON.stringify(value));
+          }
+        });
+      }
+    }
+  } else {
+    console.log('(diff library not available - showing raw comparison)');
+    console.log('First 500 chars of current:', currentContents.substring(0, 500));
+    console.log('First 500 chars of last saved:', lastSaved.substring(0, 500));
+  }
+
+  console.groupEnd();
+}
+
+/**
+ * Synchronous version for beforeunload (can't await in event handler)
+ * Logs what it can immediately, diff loads async but may not complete before unload
+ */
+export function logUnloadDiffSync(currentContents, lastSaved) {
+  if (!isDebugEnabled()) return;
+
+  console.group('[autosave] Unload warning triggered - content differs from last save');
+  console.log('Current length:', currentContents.length);
+  console.log('Last saved length:', lastSaved.length);
+  console.log('Difference:', currentContents.length - lastSaved.length, 'characters');
+
+  // If diff is already loaded, use it synchronously
+  if (diffModule) {
+    const changes = diffModule.diffLines(lastSaved, currentContents);
+
+    console.log('\n--- DIFF (last saved → current) ---');
+
+    let hasChanges = false;
+    changes.forEach(part => {
+      if (part.added || part.removed) {
+        hasChanges = true;
+        const prefix = part.added ? '+++ ' : '--- ';
+        const lines = part.value.split('\n').filter(l => l.length > 0);
+
+        const maxLines = 20;
+        const displayLines = lines.slice(0, maxLines);
+
+        displayLines.forEach(line => {
+          const displayLine = line.length > 200
+            ? line.substring(0, 200) + '...[truncated]'
+            : line;
+          console.log(prefix + displayLine);
+        });
+
+        if (lines.length > maxLines) {
+          console.log(`... and ${lines.length - maxLines} more lines`);
+        }
+      }
+    });
+
+    if (!hasChanges) {
+      console.log('(No line-level differences - checking character diff)');
+      if (Math.abs(currentContents.length - lastSaved.length) < 500) {
+        const charChanges = diffModule.diffChars(lastSaved, currentContents);
+        charChanges.forEach(part => {
+          if (part.added || part.removed) {
+            const prefix = part.added ? '+++ ' : '--- ';
+            const value = part.value.length > 100
+              ? part.value.substring(0, 100) + '...[truncated]'
+              : part.value;
+            console.log(prefix + JSON.stringify(value));
+          }
+        });
+      }
+    }
+  } else {
+    // Kick off async load for next time, show basic info now
+    loadDiff();
+    console.log('(diff library loading - run localStorage.setItem("clay:debug:autosave", "true") and reload for full diff)');
+
+    // Find first difference position
+    let diffPos = 0;
+    const minLen = Math.min(currentContents.length, lastSaved.length);
+    while (diffPos < minLen && currentContents[diffPos] === lastSaved[diffPos]) {
+      diffPos++;
+    }
+
+    console.log('First difference at position:', diffPos);
+    console.log('Context around difference:');
+    console.log('  Last saved:', JSON.stringify(lastSaved.substring(Math.max(0, diffPos - 50), diffPos + 100)));
+    console.log('  Current:', JSON.stringify(currentContents.substring(Math.max(0, diffPos - 50), diffPos + 100)));
+  }
+
+  console.groupEnd();
+}
+
+/**
+ * Pre-load the diff library if debug is enabled
+ * Call this early to ensure diff is ready for unload events
+ */
+export function preloadIfEnabled() {
+  if (isDebugEnabled()) {
+    loadDiff();
+    console.log('[autosave-debug] Debug mode enabled - diff library loading');
+  }
+}

package/src/lib/cache-bust.js

@@ -0,0 +1,12 @@
+// cacheBust.js
+// Cache-bust an element's href or src attribute by adding/updating a version query param
+
+function cacheBust(el) {
+  const attr = el.hasAttribute('href') ? 'href' : 'src';
+  const currentValue = el.getAttribute(attr);
+  const url = new URL(currentValue, location.href);
+  url.searchParams.set('v', Date.now());
+  el.setAttribute(attr, url.href);
+}
+
+export default cacheBust;

package/src/lib/cookie.js

@@ -0,0 +1,37 @@
+// e.g. Cookie.get("isAdminOfCurrentResource")
+function get (cookieName) {
+  const cookies = document.cookie.split('; ');
+  const cookie = cookies.find(row => row.startsWith(`${cookieName}=`));
+  if (!cookie) return null;
+  const cookieValue = cookie.slice(cookieName.length + 1);
+  try {
+    return JSON.parse(decodeURIComponent(cookieValue));
+  } catch (err) {
+    return decodeURIComponent(cookieValue);
+  }
+}
+
+// e.g. Cookie.remove("isAdminOfCurrentResource")
+function remove(name) {
+  // Clear from current path
+  document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/;`
+
+  // Clear from current domain
+  document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/; domain=${window.location.hostname};`
+
+  // Clear from apex domain (e.g., .hyperclay.com or .localhyperclay.com)
+  const hostname = window.location.hostname;
+  if (hostname.includes('.')) {
+    // Get the last two parts for the apex domain (handles .com, .co.uk, etc)
+    const parts = hostname.split('.');
+    const apexDomain = '.' + parts.slice(-2).join('.');
+    document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/; domain=${apexDomain};`
+  }
+}
+
+const cookie = {
+  get,
+  remove
+};
+
+export default cookie;

package/src/lib/dom-ready.js

@@ -0,0 +1,9 @@
+function onDomReady (callback) {
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', callback);
+  } else {
+    callback();
+  }
+}
+
+export default onDomReady;

package/src/lib/extension-noise.js

@@ -0,0 +1,63 @@
+/**
+ * extension-noise.js — browser-extension DOM noise the page should never own.
+ *
+ * Extensions touch the live page in two distinct ways, handled differently so a
+ * save never loses real content:
+ *   1. Standalone elements they own (password-manager menus, Grammarly overlays,
+ *      translate banners, extension iframes/scripts) — remove them entirely.
+ *   2. Marker attributes they stamp onto YOUR real inputs/forms — strip just the
+ *      attribute and keep the element.
+ *
+ * The selectors are not stable public APIs; extend both lists from real captures.
+ * Keep this file byte-identical to the copy in the other package (hyperclayjs and
+ * hyper-undo each carry one) — their save/undo observers must agree, or one will
+ * record/save what the other ignores.
+ */
+
+// Standalone elements browser extensions inject into the page — remove them entirely.
+export const EXTENSION_NODE_SELECTORS = [
+  '[src^="chrome-extension://"]', '[href^="chrome-extension://"]',
+  '[src^="moz-extension://"]', '[href^="moz-extension://"]',
+  '[src^="safari-web-extension://"]', '[href^="safari-web-extension://"]',
+  '[id="1p-menu-live-region"]',
+  'com-1password-button', 'com-1password-menu', 'com-1password-notification',
+  'grammarly-extension', 'grammarly-desktop-integration',
+  'lt-div', 'lt-card', 'lt-toolbar', 'lt-highlighter',
+  '[data-lastpass-root]', '[data-lastpass-icon-root]', '[data-dashlane-shadowhost]',
+  '[data-klarna-extension]', '[class*="klarna-extension"]',
+  '.skiptranslate', '#goog-gt-tt', '.goog-te-banner-frame', '.goog-te-balloon-frame',
+  'style.darkreader', 'style[data-darkreader-mode]', 'style[data-darkreader-scheme]',
+  '#loom-companion-mv3', 'loom-container',
+  '[ext-id]',
+]
+
+// Attribute-name prefixes extensions stamp onto YOUR real elements — strip the attribute, keep the element.
+export const EXTENSION_ATTR_PREFIXES = [
+  'data-grammarly', 'data-lt', 'data-1p', 'data-com-onepassword', 'data-lastpass', 'data-lp', 'data-kwimpala',
+  'data-bitwarden', 'data-bw', 'data-dashlane', 'data-np', 'data-protonpass', 'data-proton-pass',
+  'data-keeper', 'data-rf', 'data-roboform', 'data-honey', 'data-rakuten', 'data-capital-one',
+  'data-wikibuy', 'data-klarna', 'data-darkreader', 'data-evernote', 'data-pocket', 'data-pin',
+]
+
+// Pre-joined once so hot paths call matches()/closest()/querySelectorAll() without re-joining.
+export const EXTENSION_NODE_SELECTOR = EXTENSION_NODE_SELECTORS.join(',')
+
+// One compiled test for "is this an extension marker attribute". The (?:-|$) boundary means a
+// prefix like `data-lt` matches `data-lt` / `data-lt-foo` but never an app attribute like `data-ltr`.
+export const EXTENSION_ATTR_PATTERN = new RegExp('^(?:' + EXTENSION_ATTR_PREFIXES.join('|') + ')(?:-|$)')
+
+// Remove extension-injected elements and strip extension marker attributes from a (cloned) subtree, in place.
+// Guarded so a malformed denylist entry degrades to "noise not stripped" rather than breaking the save.
+export function stripExtensionNoise(root) {
+  if (!root || !root.querySelectorAll) return
+  try {
+    for (const el of root.querySelectorAll(EXTENSION_NODE_SELECTOR)) el.remove()
+    for (const el of root.querySelectorAll('*')) {
+      for (const attr of [...el.attributes]) {
+        if (EXTENSION_ATTR_PATTERN.test(attr.name.toLowerCase())) el.removeAttribute(attr.name)
+      }
+    }
+  } catch (e) {
+    if (typeof console !== 'undefined') console.warn('[clay] stripExtensionNoise skipped:', e)
+  }
+}