@syntrologie/adapt-content 2.8.0-canary.62 → 2.8.0-canary.621

package/dist/runtime.js

@@ -1,372 +1,527 @@
-/**
- * Adaptive Content - Runtime Module
- *
- * DOM manipulation actions: insertHtml, setText, setAttr, addClass, removeClass, setStyle.
- * These follow the hostPatcher snapshot pattern for safe reversibility.
- */
-import { guardAgainstReconciliation } from './reconciliation-guard';
-import { sanitizeHtml } from './sanitizer';
-// ============================================================================
-// Executors
-// ============================================================================
-/**
- * Execute an insertHtml action
- */
-export const executeInsertHtml = async (action, context) => {
-    let anchorEl = context.resolveAnchor(action.anchorId);
-    if (!anchorEl && context.waitForAnchor) {
-        anchorEl = await context.waitForAnchor(action.anchorId, 3000);
-    }
-    if (!anchorEl) {
-        console.warn(`[adaptive-content] Anchor not found after waiting: ${action.anchorId.selector}`);
-        return { cleanup: () => { } };
+import "./chunk-PZ5AY32C.js";
+
+// src/reconciliation-guard.ts
+function guardAgainstReconciliation(container, anchor, reinsertFn, opts) {
+  const maxRetries = opts?.maxRetries ?? 3;
+  const debounceMs = opts?.debounceMs ?? 50;
+  const observeTarget = container.parentElement ?? anchor.parentElement;
+  if (!observeTarget) return () => {
+  };
+  let retries = 0;
+  let debounceTimer = null;
+  let disconnected = false;
+  const observer = new MutationObserver((mutations) => {
+    if (disconnected) return;
+    for (const mutation of mutations) {
+      for (const removed of mutation.removedNodes) {
+        if (removed !== container) continue;
+        if (retries >= maxRetries) {
+          observer.disconnect();
+          disconnected = true;
+          return;
+        }
+        if (debounceTimer) clearTimeout(debounceTimer);
+        debounceTimer = setTimeout(() => {
+          if (disconnected) return;
+          if (!anchor.isConnected) {
+            observer.disconnect();
+            disconnected = true;
+            return;
+          }
+          retries++;
+          try {
+            reinsertFn();
+          } catch {
+            observer.disconnect();
+            disconnected = true;
+          }
+        }, debounceMs);
+        return;
+      }
     }
-    // Sanitize HTML content using context utility
-    const sanitizedHtml = sanitizeHtml(action.html);
-    // Dedup: if a container for this action already exists, remove it first.
-    // Uses the action label as a stable identifier across re-applications.
-    // Check both inside the anchor (prepend/append) and in the parent (before/after).
-    const dedupAttr = 'data-syntro-insert-label';
-    const label = action.label;
-    if (label) {
-        const escapedLabel = CSS.escape(label);
-        const searchRoot = anchorEl.parentElement ?? anchorEl;
-        const existing = searchRoot.querySelector(`[${dedupAttr}="${escapedLabel}"]`);
-        if (existing)
-            existing.remove();
+  });
+  observer.observe(observeTarget, { childList: true, subtree: true });
+  return () => {
+    disconnected = true;
+    observer.disconnect();
+    if (debounceTimer) clearTimeout(debounceTimer);
+  };
+}
+
+// src/sanitizer.ts
+var ALLOWED_TAGS = /* @__PURE__ */ new Set([
+  "b",
+  "strong",
+  "i",
+  "em",
+  "u",
+  "span",
+  "div",
+  "p",
+  "br",
+  "ul",
+  "ol",
+  "li",
+  "code",
+  "pre",
+  "small",
+  "sup",
+  "sub",
+  "a",
+  "button",
+  // SVG elements (for inline Lucide icons in config HTML)
+  "svg",
+  "path",
+  "circle",
+  "line",
+  "polyline",
+  "polygon",
+  "rect",
+  "g"
+]);
+var SYNTRO_ELEMENT_RE = /^syntro-[a-z][a-z0-9-]*$/;
+var CONTAINS_SYNTRO_ELEMENT_RE = /<syntro-[a-z]/i;
+function isAllowedTag(tag) {
+  return ALLOWED_TAGS.has(tag) || SYNTRO_ELEMENT_RE.test(tag);
+}
+function normalizeUrlAttr(value) {
+  const withoutControlCharacters = Array.from(value, (character) => {
+    const codePoint = character.codePointAt(0) ?? 0;
+    return codePoint <= 31 || codePoint === 127 ? "" : character;
+  }).join("");
+  return withoutControlCharacters.trim().toLowerCase();
+}
+function isDangerousUrlAttr(name, value) {
+  if (name !== "href" && name !== "src" && name !== "formaction") return false;
+  const normalized = normalizeUrlAttr(value);
+  return normalized.startsWith("javascript:") || normalized.startsWith("vbscript:") || normalized.startsWith("data:");
+}
+function sanitizeHtml(html) {
+  const hasNative = typeof window.Sanitizer === "function" && !CONTAINS_SYNTRO_ELEMENT_RE.test(html);
+  if (hasNative) {
+    try {
+      const s = new window.Sanitizer({});
+      const frag = s.sanitizeToFragment(html);
+      const div = document.createElement("div");
+      div.append(frag);
+      return div.innerHTML;
+    } catch {
     }
-    // Create container for inserted content
-    const container = document.createElement('div');
-    container.setAttribute('data-syntro-action-id', context.generateId());
-    if (label)
-        container.setAttribute(dedupAttr, label);
-    container.innerHTML = sanitizedHtml;
-    // Keep track of original state for replace position
-    let originalContent = null;
-    switch (action.position) {
-        case 'before':
-            anchorEl.insertAdjacentElement('beforebegin', container);
-            break;
-        case 'after':
-            anchorEl.insertAdjacentElement('afterend', container);
-            break;
-        case 'prepend':
-            anchorEl.insertBefore(container, anchorEl.firstChild);
-            break;
-        case 'append':
-            anchorEl.appendChild(container);
-            break;
-        case 'replace':
-            originalContent = anchorEl.innerHTML;
-            anchorEl.replaceWith(container);
-            break;
+  }
+  const tpl = document.createElement("template");
+  tpl.innerHTML = html;
+  const root = tpl.content;
+  const walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT, null);
+  const toRemove = [];
+  while (walker.nextNode()) {
+    const el = walker.currentNode;
+    const tag = el.tagName.toLowerCase();
+    if (!isAllowedTag(tag)) {
+      toRemove.push(el);
+      continue;
     }
-    // Deep-link click handler — opens canvas + publishes deep-link event
-    let deepLinkHandler = null;
-    if (action.deepLink) {
-        const { tileId, itemId } = action.deepLink;
-        deepLinkHandler = () => {
-            const handle = window.SynOS?.handle;
-            if (handle) {
-                handle.open();
-                handle.runtime?.events?.publish('notification.deep_link', { tileId, itemId });
-            }
-        };
-        container.style.cursor = 'pointer';
-        container.addEventListener('click', deepLinkHandler);
+    for (const attr of Array.from(el.attributes)) {
+      const name = attr.name.toLowerCase();
+      const isEvent = name.startsWith("on");
+      if (isEvent || isDangerousUrlAttr(name, attr.value)) {
+        el.removeAttribute(attr.name);
+      }
     }
-    context.publishEvent('action.applied', {
-        id: context.generateId(),
-        kind: 'content:insertHtml',
-        anchorId: action.anchorId,
-        position: action.position,
-    });
-    // Guard against React reconciliation removing our container.
-    // The reinsert function re-applies the same insertion strategy.
-    const reinsertFn = () => {
-        switch (action.position) {
-            case 'before':
-                anchorEl.insertAdjacentElement('beforebegin', container);
-                break;
-            case 'after':
-                anchorEl.insertAdjacentElement('afterend', container);
-                break;
-            case 'prepend':
-                anchorEl.insertBefore(container, anchorEl.firstChild);
-                break;
-            case 'append':
-                anchorEl.appendChild(container);
-                break;
-            case 'replace':
-                // Cannot re-insert for replace — anchor was already replaced
-                break;
-        }
-    };
-    const guardCleanup = guardAgainstReconciliation(container, anchorEl, reinsertFn);
-    return {
-        cleanup: () => {
-            if (deepLinkHandler) {
-                container.removeEventListener('click', deepLinkHandler);
-            }
-            guardCleanup();
-            // Skip DOM mutations if nodes are already detached (SPA navigation)
-            if (!container.isConnected)
-                return;
-            try {
-                if (action.position === 'replace' && originalContent !== null) {
-                    // Restore original element
-                    const restoredEl = document.createElement(anchorEl.tagName);
-                    restoredEl.innerHTML = originalContent;
-                    // Copy attributes
-                    Array.from(anchorEl.attributes).forEach((attr) => {
-                        restoredEl.setAttribute(attr.name, attr.value);
-                    });
-                    container.replaceWith(restoredEl);
-                }
-                else {
-                    container.remove();
-                }
-            }
-            catch {
-                // DOM nodes already removed by host framework — safe to ignore
-            }
-        },
-        updateFn: (changes) => {
-            if ('html' in changes && typeof changes.html === 'string') {
-                container.innerHTML = sanitizeHtml(changes.html);
-            }
-        },
-    };
-};
-/**
- * Execute a setText action
- */
-export const executeSetText = async (action, context) => {
-    let anchorEl = context.resolveAnchor(action.anchorId);
-    if (!anchorEl && context.waitForAnchor) {
-        anchorEl = await context.waitForAnchor(action.anchorId, 3000);
+  }
+  const svgs = Array.from(root.querySelectorAll("svg"));
+  for (const svg of svgs) {
+    if (toRemove.some((el) => svg.contains(el) && el.tagName.toLowerCase() === "script")) {
+      toRemove.push(svg);
     }
-    if (!anchorEl) {
-        console.warn(`[adaptive-content] Anchor not found after waiting: ${action.anchorId.selector}`);
-        return { cleanup: () => { } };
+  }
+  for (const el of toRemove) {
+    while (el.firstChild) {
+      el.parentNode?.insertBefore(el.firstChild, el);
     }
-    // Snapshot original text
-    const originalText = anchorEl.textContent ?? '';
-    // Set new text
-    anchorEl.textContent = action.text;
-    context.publishEvent('action.applied', {
-        id: context.generateId(),
-        kind: 'content:setText',
-        anchorId: action.anchorId,
-    });
-    return {
-        cleanup: () => {
-            if (!anchorEl.isConnected)
-                return;
-            anchorEl.textContent = originalText;
-        },
-        updateFn: (changes) => {
-            if ('text' in changes && typeof changes.text === 'string') {
-                anchorEl.textContent = changes.text;
-            }
-        },
+    el.remove();
+  }
+  return tpl.innerHTML;
+}
+
+// src/runtime.ts
+var executeInsertHtml = async (action, context) => {
+  let anchorEl = context.resolveAnchor(action.anchorId);
+  if (!anchorEl && context.waitForAnchor) {
+    anchorEl = await context.waitForAnchor(action.anchorId, 3e3);
+  }
+  if (!anchorEl) {
+    console.warn(`[adaptive-content] Anchor not found after waiting: ${action.anchorId.selector}`);
+    return { cleanup: () => {
+    } };
+  }
+  const sanitizedHtml = sanitizeHtml(action.html);
+  const dedupAttr = "data-syntro-insert-label";
+  const label = action.label;
+  if (label) {
+    const searchRoot = anchorEl.parentElement ?? anchorEl;
+    const existing = Array.from(searchRoot.querySelectorAll(`[${dedupAttr}]`)).find(
+      (candidate) => candidate.getAttribute(dedupAttr) === label
+    );
+    if (existing) existing.remove();
+  }
+  const container = document.createElement("div");
+  container.setAttribute("data-syntro-action-id", context.generateId());
+  if (label) container.setAttribute(dedupAttr, label);
+  container.innerHTML = sanitizedHtml;
+  let originalContent = null;
+  switch (action.position) {
+    case "before":
+      anchorEl.insertAdjacentElement("beforebegin", container);
+      break;
+    case "after":
+      anchorEl.insertAdjacentElement("afterend", container);
+      break;
+    case "prepend":
+      anchorEl.insertBefore(container, anchorEl.firstChild);
+      break;
+    case "append":
+      anchorEl.appendChild(container);
+      break;
+    case "replace":
+      originalContent = anchorEl.innerHTML;
+      anchorEl.replaceWith(container);
+      break;
+  }
+  let deepLinkHandler = null;
+  if (action.deepLink) {
+    const { tileId, itemId } = action.deepLink;
+    deepLinkHandler = () => {
+      const handle = window.SynOS?.handle;
+      if (handle) {
+        handle.open();
+        handle.runtime?.events?.publish("notification.deep_link", { tileId, itemId });
+      }
     };
-};
-/**
- * Execute a setAttr action
- */
-export const executeSetAttr = async (action, context) => {
-    let anchorEl = context.resolveAnchor(action.anchorId);
-    if (!anchorEl && context.waitForAnchor) {
-        anchorEl = await context.waitForAnchor(action.anchorId, 3000);
-    }
-    if (!anchorEl) {
-        console.warn(`[adaptive-content] Anchor not found after waiting: ${action.anchorId.selector}`);
-        return { cleanup: () => { } };
-    }
-    // Block dangerous attributes (case-insensitive)
-    const lowerAttr = action.attr.toLowerCase();
-    if (lowerAttr.startsWith('on')) {
-        throw new Error(`Dangerous attribute not allowed: ${action.attr}`);
+    container.style.cursor = "pointer";
+    container.addEventListener("click", deepLinkHandler);
+  }
+  context.publishEvent("action.applied", {
+    id: context.generateId(),
+    kind: "content:insertHtml",
+    anchorId: action.anchorId,
+    position: action.position
+  });
+  const reinsertFn = () => {
+    switch (action.position) {
+      case "before":
+        anchorEl.insertAdjacentElement("beforebegin", container);
+        break;
+      case "after":
+        anchorEl.insertAdjacentElement("afterend", container);
+        break;
+      case "prepend":
+        anchorEl.insertBefore(container, anchorEl.firstChild);
+        break;
+      case "append":
+        anchorEl.appendChild(container);
+        break;
+      case "replace":
+        break;
     }
-    // Block dangerous URIs in URL-bearing attributes
-    const isUrlAttr = lowerAttr === 'href' || lowerAttr === 'src' || lowerAttr === 'formaction';
-    if (isUrlAttr) {
-        const lowerValue = action.value.trim().toLowerCase();
-        if (lowerValue.startsWith('javascript:') ||
-            lowerValue.startsWith('vbscript:') ||
-            lowerValue.startsWith('data:text/html')) {
-            throw new Error(`Dangerous URL not allowed in ${action.attr}: ${action.value}`);
+  };
+  const guardCleanup = guardAgainstReconciliation(container, anchorEl, reinsertFn);
+  return {
+    cleanup: () => {
+      if (deepLinkHandler) {
+        container.removeEventListener("click", deepLinkHandler);
+      }
+      guardCleanup();
+      if (!container.isConnected) return;
+      try {
+        if (action.position === "replace" && originalContent !== null) {
+          const restoredEl = document.createElement(anchorEl.tagName);
+          restoredEl.innerHTML = originalContent;
+          Array.from(anchorEl.attributes).forEach((attr) => {
+            restoredEl.setAttribute(attr.name, attr.value);
+          });
+          container.replaceWith(restoredEl);
+        } else {
+          container.remove();
         }
+      } catch {
+      }
+    },
+    updateFn: (changes) => {
+      if ("html" in changes && typeof changes.html === "string") {
+        container.innerHTML = sanitizeHtml(changes.html);
+      }
     }
-    // Snapshot original attribute value
-    const originalValue = anchorEl.getAttribute(action.attr);
-    const hadAttribute = anchorEl.hasAttribute(action.attr);
-    // Set new attribute
-    anchorEl.setAttribute(action.attr, action.value);
-    context.publishEvent('action.applied', {
-        id: context.generateId(),
-        kind: 'content:setAttr',
-        anchorId: action.anchorId,
-        attr: action.attr,
-    });
-    return {
-        cleanup: () => {
-            if (!anchorEl.isConnected)
-                return;
-            if (hadAttribute && originalValue !== null) {
-                anchorEl.setAttribute(action.attr, originalValue);
-            }
-            else {
-                anchorEl.removeAttribute(action.attr);
-            }
-        },
-        updateFn: (changes) => {
-            if ('value' in changes && typeof changes.value === 'string') {
-                anchorEl.setAttribute(action.attr, changes.value);
-            }
-        },
-    };
+  };
 };
-/**
- * Execute an addClass action
- */
-export const executeAddClass = async (action, context) => {
-    let anchorEl = context.resolveAnchor(action.anchorId);
-    if (!anchorEl && context.waitForAnchor) {
-        anchorEl = await context.waitForAnchor(action.anchorId, 3000);
+function findTextTarget(el) {
+  if (el.children.length === 0) return el;
+  const textChildren = Array.from(el.children).filter((child) => child.textContent?.trim());
+  if (textChildren.length === 1) {
+    const child = textChildren[0];
+    if (child.textContent?.trim() === el.textContent?.trim()) {
+      return findTextTarget(child);
     }
-    if (!anchorEl) {
-        console.warn(`[adaptive-content] Anchor not found after waiting: ${action.anchorId.selector}`);
-        return { cleanup: () => { } };
+  }
+  return el;
+}
+var executeSetText = async (action, context) => {
+  let anchorEl = context.resolveAnchor(action.anchorId);
+  if (!anchorEl && context.waitForAnchor) {
+    anchorEl = await context.waitForAnchor(action.anchorId, 3e3);
+  }
+  if (!anchorEl) {
+    console.warn(`[adaptive-content] Anchor not found after waiting: ${action.anchorId.selector}`);
+    return { cleanup: () => {
+    } };
+  }
+  const textTarget = findTextTarget(anchorEl);
+  const originalText = textTarget.textContent ?? "";
+  textTarget.textContent = action.text;
+  context.publishEvent("action.applied", {
+    id: context.generateId(),
+    kind: "content:setText",
+    anchorId: action.anchorId
+  });
+  return {
+    cleanup: () => {
+      if (!anchorEl.isConnected) return;
+      textTarget.textContent = originalText;
+    },
+    updateFn: (changes) => {
+      if ("text" in changes && typeof changes.text === "string") {
+        textTarget.textContent = changes.text;
+      }
     }
-    // Check if class was already present
-    const hadClass = anchorEl.classList.contains(action.className);
-    // Add class
-    anchorEl.classList.add(action.className);
-    context.publishEvent('action.applied', {
-        id: context.generateId(),
-        kind: 'content:addClass',
-        anchorId: action.anchorId,
-        className: action.className,
-    });
-    return {
-        cleanup: () => {
-            if (!anchorEl.isConnected)
-                return;
-            // Only remove if we added it
-            if (!hadClass) {
-                anchorEl.classList.remove(action.className);
-            }
-        },
-    };
+  };
 };
-/**
- * Execute a removeClass action
- */
-export const executeRemoveClass = async (action, context) => {
-    let anchorEl = context.resolveAnchor(action.anchorId);
-    if (!anchorEl && context.waitForAnchor) {
-        anchorEl = await context.waitForAnchor(action.anchorId, 3000);
+var executeSetAttr = async (action, context) => {
+  let anchorEl = context.resolveAnchor(action.anchorId);
+  if (!anchorEl && context.waitForAnchor) {
+    anchorEl = await context.waitForAnchor(action.anchorId, 3e3);
+  }
+  if (!anchorEl) {
+    console.warn(`[adaptive-content] Anchor not found after waiting: ${action.anchorId.selector}`);
+    return { cleanup: () => {
+    } };
+  }
+  const lowerAttr = action.attr.toLowerCase();
+  if (lowerAttr.startsWith("on")) {
+    throw new Error(`Dangerous attribute not allowed: ${action.attr}`);
+  }
+  const isUrlAttr = lowerAttr === "href" || lowerAttr === "src" || lowerAttr === "formaction";
+  if (isUrlAttr) {
+    const lowerValue = action.value.trim().toLowerCase();
+    if (lowerValue.startsWith("javascript:") || lowerValue.startsWith("vbscript:") || lowerValue.startsWith("data:text/html")) {
+      throw new Error(`Dangerous URL not allowed in ${action.attr}: ${action.value}`);
     }
-    if (!anchorEl) {
-        console.warn(`[adaptive-content] Anchor not found after waiting: ${action.anchorId.selector}`);
-        return { cleanup: () => { } };
+  }
+  const originalValue = anchorEl.getAttribute(action.attr);
+  const hadAttribute = anchorEl.hasAttribute(action.attr);
+  anchorEl.setAttribute(action.attr, action.value);
+  context.publishEvent("action.applied", {
+    id: context.generateId(),
+    kind: "content:setAttr",
+    anchorId: action.anchorId,
+    attr: action.attr
+  });
+  return {
+    cleanup: () => {
+      if (!anchorEl.isConnected) return;
+      if (hadAttribute && originalValue !== null) {
+        anchorEl.setAttribute(action.attr, originalValue);
+      } else {
+        anchorEl.removeAttribute(action.attr);
+      }
+    },
+    updateFn: (changes) => {
+      if ("value" in changes && typeof changes.value === "string") {
+        anchorEl.setAttribute(action.attr, changes.value);
+      }
     }
-    // Check if class was present
-    const hadClass = anchorEl.classList.contains(action.className);
-    // Remove class
-    anchorEl.classList.remove(action.className);
-    context.publishEvent('action.applied', {
-        id: context.generateId(),
-        kind: 'content:removeClass',
-        anchorId: action.anchorId,
-        className: action.className,
-    });
-    return {
-        cleanup: () => {
-            if (!anchorEl.isConnected)
-                return;
-            // Only re-add if we removed it
-            if (hadClass) {
-                anchorEl.classList.add(action.className);
-            }
-        },
-    };
+  };
 };
-/**
- * Execute a setStyle action
- */
-export const executeSetStyle = async (action, context) => {
-    let anchorEl = context.resolveAnchor(action.anchorId);
-    if (!anchorEl && context.waitForAnchor) {
-        anchorEl = await context.waitForAnchor(action.anchorId, 3000);
+var executeAddClass = async (action, context) => {
+  let anchorEl = context.resolveAnchor(action.anchorId);
+  if (!anchorEl && context.waitForAnchor) {
+    anchorEl = await context.waitForAnchor(action.anchorId, 3e3);
+  }
+  if (!anchorEl) {
+    console.warn(`[adaptive-content] Anchor not found after waiting: ${action.anchorId.selector}`);
+    return { cleanup: () => {
+    } };
+  }
+  const hadClass = anchorEl.classList.contains(action.className);
+  anchorEl.classList.add(action.className);
+  context.publishEvent("action.applied", {
+    id: context.generateId(),
+    kind: "content:addClass",
+    anchorId: action.anchorId,
+    className: action.className
+  });
+  return {
+    cleanup: () => {
+      if (!anchorEl.isConnected) return;
+      if (!hadClass) {
+        anchorEl.classList.remove(action.className);
+      }
     }
-    if (!anchorEl) {
-        console.warn(`[adaptive-content] Anchor not found after waiting: ${action.anchorId.selector}`);
-        return { cleanup: () => { } };
+  };
+};
+var executeRemoveClass = async (action, context) => {
+  let anchorEl = context.resolveAnchor(action.anchorId);
+  if (!anchorEl && context.waitForAnchor) {
+    anchorEl = await context.waitForAnchor(action.anchorId, 3e3);
+  }
+  if (!anchorEl) {
+    console.warn(`[adaptive-content] Anchor not found after waiting: ${action.anchorId.selector}`);
+    return { cleanup: () => {
+    } };
+  }
+  const hadClass = anchorEl.classList.contains(action.className);
+  anchorEl.classList.remove(action.className);
+  context.publishEvent("action.applied", {
+    id: context.generateId(),
+    kind: "content:removeClass",
+    anchorId: action.anchorId,
+    className: action.className
+  });
+  return {
+    cleanup: () => {
+      if (!anchorEl.isConnected) return;
+      if (hadClass) {
+        anchorEl.classList.add(action.className);
+      }
     }
-    // Snapshot original styles
-    const originalStyles = new Map();
-    for (const prop of Object.keys(action.styles)) {
-        const current = anchorEl.style.getPropertyValue(prop);
-        originalStyles.set(prop, current);
+  };
+};
+var executeSetStyle = async (action, context) => {
+  let anchorEl = context.resolveAnchor(action.anchorId);
+  if (!anchorEl && context.waitForAnchor) {
+    anchorEl = await context.waitForAnchor(action.anchorId, 3e3);
+  }
+  if (!anchorEl) {
+    console.warn(`[adaptive-content] Anchor not found after waiting: ${action.anchorId.selector}`);
+    return { cleanup: () => {
+    } };
+  }
+  const originalStyles = /* @__PURE__ */ new Map();
+  for (const prop of Object.keys(action.styles)) {
+    const current = anchorEl.style.getPropertyValue(prop);
+    originalStyles.set(prop, current);
+  }
+  for (const [prop, value] of Object.entries(action.styles)) {
+    const el = anchorEl;
+    el.style.setProperty(prop, value);
+    if (value !== "" && el.style.getPropertyValue(prop) === "") {
+      console.warn(
+        `[adaptive-content] setStyle: '${prop}: ${value}' was silently dropped \u2014 '${prop}' is not a recognized CSS property. Use kebab-case (e.g. 'justify-content' not 'justifyContent').`
+      );
     }
-    // Apply new styles
-    for (const [prop, value] of Object.entries(action.styles)) {
-        anchorEl.style.setProperty(prop, value);
+  }
+  context.publishEvent("action.applied", {
+    id: context.generateId(),
+    kind: "content:setStyle",
+    anchorId: action.anchorId,
+    styles: Object.keys(action.styles)
+  });
+  return {
+    cleanup: () => {
+      if (!anchorEl.isConnected) return;
+      for (const [prop, originalValue] of originalStyles) {
+        if (originalValue) {
+          anchorEl.style.setProperty(prop, originalValue);
+        } else {
+          anchorEl.style.removeProperty(prop);
+        }
+      }
+    },
+    updateFn: (changes) => {
+      if ("styles" in changes && typeof changes.styles === "object" && changes.styles) {
+        for (const [prop, value] of Object.entries(changes.styles)) {
+          anchorEl.style.setProperty(prop, value);
+        }
+      }
     }
-    context.publishEvent('action.applied', {
-        id: context.generateId(),
-        kind: 'content:setStyle',
-        anchorId: action.anchorId,
-        styles: Object.keys(action.styles),
-    });
-    return {
-        cleanup: () => {
-            if (!anchorEl.isConnected)
-                return;
-            // Restore original styles
-            for (const [prop, originalValue] of originalStyles) {
-                if (originalValue) {
-                    anchorEl.style.setProperty(prop, originalValue);
-                }
-                else {
-                    anchorEl.style.removeProperty(prop);
-                }
-            }
-        },
-        updateFn: (changes) => {
-            if ('styles' in changes && typeof changes.styles === 'object' && changes.styles) {
-                for (const [prop, value] of Object.entries(changes.styles)) {
-                    anchorEl.style.setProperty(prop, value);
-                }
-            }
-        },
-    };
+  };
 };
-// ============================================================================
-// Executor Definitions for Registration
-// ============================================================================
-/**
- * All executors provided by this app.
- * These are registered with the runtime's ExecutorRegistry.
- */
-export const executors = [
-    { kind: 'content:insertHtml', executor: executeInsertHtml },
-    { kind: 'content:setText', executor: executeSetText },
-    { kind: 'content:setAttr', executor: executeSetAttr },
-    { kind: 'content:addClass', executor: executeAddClass },
-    { kind: 'content:removeClass', executor: executeRemoveClass },
-    { kind: 'content:setStyle', executor: executeSetStyle },
+var CSS_BREAKOUT_CHARS = /[{}]|\/\*/;
+function hasCssBreakout(selector, styles) {
+  if (CSS_BREAKOUT_CHARS.test(selector)) return true;
+  return Object.values(styles).some((value) => CSS_BREAKOUT_CHARS.test(value));
+}
+var HIDE_BY_SELECTOR_RULE_ID = "syntro-hide-by-selector";
+function hideBySelectorRule(selector, styles) {
+  const declarations = Object.entries(styles).map(([prop, value]) => `${prop}: ${value} !important;`).join(" ");
+  return `:is(${selector}):not(#${HIDE_BY_SELECTOR_RULE_ID}) { ${declarations} }`;
+}
+var executeHideBySelector = async (action, context) => {
+  if (context.matchesAnchorRoute && !context.matchesAnchorRoute(action.anchorId)) {
+    return { cleanup: () => {
+    } };
+  }
+  if (hasCssBreakout(action.anchorId.selector, action.styles)) {
+    console.error(
+      '[adaptive-content] Refusing to inject content:hideBySelector rule \u2014 selector or style value contains "{", "}", or "/*" (CSS rule breakout). This should have been rejected by the authoring-time schema (HideBySelectorZ); refusing at the injection sink as a second guard.',
+      action.anchorId.selector,
+      action.styles
+    );
+    return { cleanup: () => {
+    } };
+  }
+  const styleEl = document.createElement("style");
+  styleEl.setAttribute("data-syntro-action-id", context.generateId());
+  styleEl.textContent = hideBySelectorRule(action.anchorId.selector, action.styles);
+  document.head.appendChild(styleEl);
+  context.publishEvent("action.applied", {
+    id: context.generateId(),
+    kind: "content:hideBySelector",
+    anchorId: action.anchorId,
+    styles: Object.keys(action.styles)
+  });
+  return {
+    cleanup: () => {
+      styleEl.remove();
+    },
+    updateFn: (changes) => {
+      if ("styles" in changes && typeof changes.styles === "object" && changes.styles) {
+        const newStyles = changes.styles;
+        if (hasCssBreakout(action.anchorId.selector, newStyles)) {
+          console.error(
+            '[adaptive-content] Refusing to update content:hideBySelector rule \u2014 updated style value contains "{", "}", or "/*" (CSS rule breakout).',
+            newStyles
+          );
+          return;
+        }
+        styleEl.textContent = hideBySelectorRule(action.anchorId.selector, newStyles);
+      }
+    }
+  };
+};
+var executors = [
+  { kind: "content:insertHtml", executor: executeInsertHtml },
+  { kind: "content:setText", executor: executeSetText },
+  { kind: "content:setAttr", executor: executeSetAttr },
+  { kind: "content:addClass", executor: executeAddClass },
+  { kind: "content:removeClass", executor: executeRemoveClass },
+  { kind: "content:setStyle", executor: executeSetStyle },
+  { kind: "content:hideBySelector", executor: executeHideBySelector }
 ];
-/**
- * App runtime manifest.
- */
-export const runtime = {
-    id: 'adaptive-content',
-    version: '1.0.0',
-    name: 'Content',
-    description: 'DOM manipulation for text, attributes, and styles',
-    executors,
+var runtime = {
+  id: "adaptive-content",
+  version: "1.0.0",
+  name: "Content",
+  description: "DOM manipulation for text, attributes, and styles",
+  executors
+};
+export {
+  executeAddClass,
+  executeHideBySelector,
+  executeInsertHtml,
+  executeRemoveClass,
+  executeSetAttr,
+  executeSetStyle,
+  executeSetText,
+  executors,
+  runtime
 };
+//# sourceMappingURL=runtime.js.map