@ape-egg/vibe 4.1.4 → 4.2.0

package/README.md

@@ -1,6 +1,6 @@
 # Vibe
 
-**Version 4.1.4** — Runtime-first reactivity for plain HTML. Drop a script tag into any page and get reactive bindings, control flow, and URL-loaded components — no build step required. Compile later if you want; the compiler is a separate, optional package (`@ape-egg/vibe-compiler`).
+**Version 4.2.0** — Runtime-first reactivity for plain HTML. Drop a script tag into any page and get reactive bindings, control flow, and URL-loaded components — no build step required. Compile later if you want; the compiler is a separate, optional package (`@ape-egg/vibe-compiler`).
 
 ## Security model & CSP
 
@@ -197,7 +197,7 @@ For state scoped to a single component, import `component` from `@ape-egg/vibe/c
 How it works:
 
 1. `component({...})` generates a unique id (e.g. `_c0`, `_c1`) and registers the state at `$[id]`
-2. The `<script>` and every following sibling is tagged with `data-vibe-component-id="<id>"`
+2. The `<script>` and every following sibling is tagged with `data-vibe-internal-component-id="<id>"`
 3. Inside that subtree, `@[this.X.Y]` is rewritten to `@[_c0.X.Y]`, and `this.` in event handlers resolves at fire time by declared keys: names registered in `component({...})` address `$[id]` (`onclick="this.method()"`, `this.count++`), every other name reaches the native element (`this.value`, `this.closest(...)`, `this.focus()`). `$.this.X = ...` is always an explicit state write
 4. When the component leaves the DOM, its state entry is freed automatically
 
@@ -221,7 +221,7 @@ Multi-segment paths (`@[this.user.profile.name]`), conditionals (`<!-- if this.e
 
 How it works:
 
-1. `component({...})` claims the nearest unprocessed `<component>` (or `<div class="component">`) wrapper, registers state at `$[id]`, and tags the wrapper with `data-vibe-component-id`
+1. `component({...})` claims the nearest unprocessed `<component>` (or `<div class="component">`) wrapper, registers state at `$[id]`, and tags the wrapper with `data-vibe-internal-component-id`
 2. Internally it triggers the boot pipeline, which initializes `window.$`, parses the DOM, hydrates bindings, and starts the MutationObserver — exactly once, even if multiple `<component>` blocks call `component()`
 3. From there, `@[this.X]`, `onclick="this.fn()"`, and `<!-- if this.X -->` work as documented
 
@@ -340,7 +340,7 @@ Skip reactive processing for an element:
 These are used by the runtime — don't repurpose them in your code:
 
 - `window.__vibeManifest`, `window.__vibeCompiling`, `window.__vibeComponents`, `window.__vibeIterProps` — internal registries
-- `data-vibe-component-id`, `data-vibe-iter-prop` — element-level bookkeeping attributes (set automatically)
+- `data-vibe-internal-component-id`, `data-vibe-internal-iter-prop` — element-level bookkeeping attributes (set automatically)
 
 ### Deep Reactivity
 

package/component.js

@@ -1,4 +1,5 @@
 import { generateComponentId } from './runtime/component.js';
+import { componentIdOf, assignComponentId } from './runtime/component-registry.js';
 import { ensureBoot } from './boot.js';
 
 const component = (state = {}, config) => {
@@ -11,7 +12,7 @@ const component = (state = {}, config) => {
       (child) => child.matches?.('script[type="module"]') && /component\s*\(/.test(child.textContent),
     );
     if (!ownsCall) return false;
-    const existingId = el.getAttribute('data-vibe-component-id');
+    const existingId = componentIdOf(el);
     return !existingId || !ns.components[existingId];
   });
 
@@ -20,10 +21,10 @@ const component = (state = {}, config) => {
     return;
   }
 
-  let componentId = wrapper.getAttribute('data-vibe-component-id');
+  let componentId = componentIdOf(wrapper);
   if (!componentId) {
     componentId = generateComponentId();
-    wrapper.setAttribute('data-vibe-component-id', componentId);
+    assignComponentId(wrapper, componentId);
   }
 
   ns.components[componentId] = state;

package/llms.txt

@@ -179,7 +179,7 @@ For state scoped to a single component (form drafts, toggles, derived view-state
 How it works:
 
 1. `component({...})` generates a unique id (e.g. `_c0`) and stores state at `$[id]`
-2. The `<script>` and every following sibling get `data-vibe-component-id="<id>"`
+2. The `<script>` and every following sibling get `data-vibe-internal-component-id="<id>"`
 3. Inside that subtree, `@[this.X.Y]` is rewritten to `@[_c0.X.Y]`; `onclick="this.fn()"` becomes `onclick="$['_c0'].fn()"`; `$.this.x = v` (in event handlers) becomes `$['_c0'].x = v`
 4. When the component leaves the DOM, its bucket is freed automatically
 

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@ape-egg/vibe",
-  "version": "4.1.4",
+  "version": "4.2.0",
   "type": "module",
-  "description": "Runtime-first reactivity for plain HTML — no build step, no virtual DOM, no new syntax to learn",
+  "description": "Runtime-first reactivity for plain HTML \u2014 no build step, no virtual DOM, no new syntax to learn",
   "main": "index.js",
   "homepage": "https://vibe.korte.kim",
   "repository": {
@@ -14,7 +14,8 @@
     "./component": "./component.js",
     "./spa": "./spa.js",
     "./hot-module-refresh": "./hot-module-refresh.js",
-    "./vibe.css": "./vibe.css"
+    "./vibe.css": "./vibe.css",
+    "./constants": "./runtime/constants.js"
   },
   "files": [
     "index.js",

package/runtime/affected.js

@@ -55,7 +55,7 @@ const attrBindingsOf = (tree) => {
       const resolvedInner = resolveThisPath(m[1], tree.element);
       ms.push({ outer: m[0], inner: m[1], resolvedInner, tokens: tokensOf(resolvedInner) });
     }
-    if (ms.length) out.push({ attrName, matches: ms });
+    out.push({ attrName, matches: ms });
   }
   tree._ab = out;
   tree._abSrc = tree.attributes;
@@ -407,6 +407,22 @@ const recursive = (
 
     for (const { attrName, matches: attrMatches } of attrBindingsOf(tree)) {
       const attrValue = tree.attributes[attrName];
+      if (!attrMatches.length) {
+        if (isInitialHydration) {
+          affected.push({
+            type: "attribute",
+            attrName,
+            attrValue,
+            matchOuter: null,
+            matchInner: null,
+            element: tree.element,
+            scopedState: scopedStateForHydration,
+            binding: null,
+            wasConnected: !!tree.element?.isConnected,
+          });
+        }
+        continue;
+      }
       for (const m of attrMatches) {
         const shouldAffect =
           isInitialHydration || bindingAffected(m.tokens, keySet, state, newState);

package/runtime/cleanup.js

@@ -1,6 +1,12 @@
+import { componentIdOf } from './component-registry.js';
 import { debugLog } from './debug.js';
 import { isInert } from './inert.js';
-import { PHASE_READY, FOUC_CLASS_OR_ATTR } from './constants.js';
+import {
+  PHASE_READY,
+  FOUC_CLASS_OR_ATTR,
+  COMPONENT_ID_ATTR,
+  DEFER_ATTR_PREFIX,
+} from './constants.js';
 
 const skipInert = (root) => ({
   acceptNode: (node) => (isInert(node, root) ? NodeFilter.FILTER_REJECT : NodeFilter.FILTER_ACCEPT),
@@ -42,7 +48,7 @@ export const shouldCleanup = (rootElement) => {
       continue;
     }
     for (const attr of el.attributes) {
-      if (attr.name.startsWith('data-vibe-')) continue;
+      if (attr.name.startsWith(DEFER_ATTR_PREFIX)) continue;
       if (el._vibeBoundAttrs?.has(attr.name)) continue;
       if (/@\[.+?\]/.test(attr.value)) {
         return false;
@@ -56,6 +62,10 @@ export const shouldCleanup = (rootElement) => {
 export const cleanup = (rootElement, debug = false) => {
   rootElement.offsetHeight;
 
+  document.querySelectorAll(`[${COMPONENT_ID_ATTR}]`).forEach((el) => {
+    if (!isInert(el, document.body)) componentIdOf(el);
+  });
+
   const isClass = FOUC_CLASS_OR_ATTR.startsWith('.');
   const cleanName = FOUC_CLASS_OR_ATTR.replace(/^\./, '').replace(/^\[/, '').replace(/\]$/, '');
 

package/runtime/component-registry.js

@@ -0,0 +1,113 @@
+import {
+  COMPONENT_ID_ATTR,
+  CONDITIONAL_START_REGEX,
+  ITERATION_START_REGEX,
+} from './constants.js';
+const ids = new WeakMap();
+const refs = new Map();
+
+const ATTR = COMPONENT_ID_ATTR;
+
+const remember = (element, id) => {
+  ids.set(element, id);
+  let bucket = refs.get(id);
+  if (!bucket) refs.set(id, (bucket = new Set()));
+  bucket.add(new WeakRef(element));
+};
+
+export const componentIdOf = (element) => {
+  const known = ids.get(element);
+  if (known) return known;
+  const carried = element.getAttribute?.(ATTR);
+  if (!carried) return null;
+  remember(element, carried);
+  if (element.isConnected) element.removeAttribute(ATTR);
+  return carried;
+};
+
+export const assignComponentId = (element, id) => remember(element, id);
+
+export const componentIdTaken = (id) => {
+  const bucket = refs.get(id);
+  if (!bucket) return false;
+  for (const ref of bucket) {
+    const element = ref.deref();
+    if (!element) {
+      bucket.delete(ref);
+      continue;
+    }
+    if (element.isConnected) return true;
+  }
+  if (!bucket.size) refs.delete(id);
+  return false;
+};
+
+export const closestComponentWrapper = (element) => {
+  for (let current = element; current; current = current.parentElement) {
+    if (componentIdOf(current)) return current;
+  }
+  return null;
+};
+
+export const closestComponentId = (element) => {
+  const wrapper = element ? closestComponentWrapper(element) : null;
+  return wrapper ? componentIdOf(wrapper) : null;
+};
+
+export const eachComponentIn = (root, visit) => {
+  if (!root || (root.nodeType !== 1 && root.nodeType !== 11)) return;
+  if (root.nodeType === 1) {
+    const id = componentIdOf(root);
+    if (id) visit(root, id);
+  }
+  const walker = (root.ownerDocument ?? document).createTreeWalker(root, NodeFilter.SHOW_ELEMENT);
+  let element;
+  while ((element = walker.nextNode())) {
+    const id = componentIdOf(element);
+    if (id) visit(element, id);
+  }
+};
+
+const insideDirectiveBlock = (element, root) => {
+  for (let node = element; node && node !== root; node = node.parentNode) {
+    let depth = 0;
+    for (let sibling = node.previousSibling; sibling; sibling = sibling.previousSibling) {
+      if (sibling.nodeType !== 8) continue;
+      const text = sibling.textContent.trim();
+      if (text === '/if' || text === '/each') depth++;
+      else if (CONDITIONAL_START_REGEX.test(text) || ITERATION_START_REGEX.test(text)) {
+        if (!depth) return true;
+        depth--;
+      }
+    }
+  }
+  return false;
+};
+
+export const ingestComponentIds = (root) => {
+  if (!root || (root.nodeType !== 1 && root.nodeType !== 11)) return;
+  const claim = (element) => {
+    const carried = element.getAttribute(ATTR);
+    if (!carried) return;
+    if (insideDirectiveBlock(element, root)) return;
+    remember(element, carried);
+    element.removeAttribute(ATTR);
+  };
+  if (root.nodeType === 1) claim(root);
+  root.querySelectorAll(`[${ATTR}]`).forEach(claim);
+};
+
+const iterProps = new WeakSet();
+
+export const markIterProp = (element) => iterProps.add(element);
+
+export const hasIterProp = (element) => iterProps.has(element);
+
+export const eachIterPropIn = (root, visit) => {
+  if (!root || (root.nodeType !== 1 && root.nodeType !== 11)) return;
+  const walker = (root.ownerDocument ?? document).createTreeWalker(root, NodeFilter.SHOW_ELEMENT);
+  let element;
+  while ((element = walker.nextNode())) {
+    if (iterProps.has(element)) visit(element);
+  }
+};

package/runtime/component.js

@@ -1,3 +1,12 @@
+import {
+  componentIdOf,
+  componentIdTaken,
+  closestComponentWrapper,
+  eachComponentIn,
+  ingestComponentIds,
+  markIterProp,
+  hasIterProp,
+} from './component-registry.js';
 import { debugLog } from './debug.js';
 import { shouldCleanup } from './cleanup.js';
 import { isInert } from './inert.js';
@@ -10,6 +19,14 @@ import {
   STATE_THIS_PROP_REGEX,
   CONDITIONAL_START_REGEX,
   ITERATION_START_REGEX,
+  COMPONENT_ID_PREFIX,
+  MODULE_SCRIPT_SELECTOR,
+  COMPONENT_ID_ATTR,
+  DEFER_ATTR_PREFIX,
+  DEFERRED_SRC_ATTR,
+  KEY_ATTR,
+  COMPONENT_SRC_SELECTOR,
+  FOUC_CLASS_OR_ATTR,
 } from './constants.js';
 import { evalInScope } from './utils.js';
 import { bumpIterPropGeneration, parkFetchableSrc } from './iteration-utils.js';
@@ -31,7 +48,7 @@ export { activeOutgoingRoots, isComponentWrapper };
 let componentCounter = 1000000;
 
 export const generateComponentId = () => {
-  return `_c${componentCounter++}`;
+  return `${COMPONENT_ID_PREFIX}${componentCounter++}`;
 };
 
 const escapeRegex = (str) => str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
@@ -41,7 +58,7 @@ export const trackComponentOwnership = () => {};
 export const releaseOrphanedComponentState = (collectedIds) => {
   if (!collectedIds || collectedIds.size === 0) return;
   for (const id of collectedIds) {
-    if (document.querySelector(`[data-vibe-component-id="${id}"]`)) continue;
+    if (componentIdTaken(id)) continue;
     delete window.__vibe?.components?.[id];
     delete window.$[id];
     runComponentCleanups(id);
@@ -94,13 +111,7 @@ const createScopedDollar = (componentId) => {
 
 export const collectComponentIds = (node, into = new Set()) => {
   if (!node) return into;
-  if (node.nodeType === 1) {
-    const id = node.getAttribute('data-vibe-component-id');
-    if (id) into.add(id);
-    node.querySelectorAll?.('[data-vibe-component-id]').forEach((el) => {
-      into.add(el.getAttribute('data-vibe-component-id'));
-    });
-  }
+  eachComponentIn(node, (el, id) => into.add(id));
   return into;
 };
 
@@ -164,14 +175,14 @@ const collectMountedModuleScripts = (nodes, out) => {
       continue;
     }
     if (depth > 0 || node.nodeType !== 1) continue;
-    if (node.matches?.('script[type="vibe-module"]')) out.push(node);
+    if (node.matches?.(MODULE_SCRIPT_SELECTOR)) out.push(node);
     else collectMountedModuleScripts(node.childNodes, out);
   }
 };
 
 const advanceComponentCounterPastIds = (root) => {
-  root.querySelectorAll('[data-vibe-component-id]').forEach((el) => {
-    const m = el.getAttribute('data-vibe-component-id')?.match(/^_c(\d+)$/);
+  eachComponentIn(root, (el, id) => {
+    const m = id.match(new RegExp(`^${COMPONENT_ID_PREFIX}(\\d+)$`));
     if (m) componentCounter = Math.max(componentCounter, Number(m[1]) + 1);
   });
 };
@@ -220,8 +231,8 @@ const executeScriptUnit = (componentId, content, hasImports, scopedDollar, compo
 };
 
 const wrapperSetupScript = (wrapper) => {
-  for (const s of wrapper.querySelectorAll('script[type="vibe-module"]')) {
-    if (s.closest('[data-vibe-component-id]') === wrapper) return s;
+  for (const s of wrapper.querySelectorAll(MODULE_SCRIPT_SELECTOR)) {
+    if (closestComponentWrapper(s) === wrapper) return s;
   }
   return null;
 };
@@ -239,10 +250,10 @@ const runVibeModuleScripts = (scripts, silent = false) => {
     if (!rawContent) continue;
     script.__vibeExecuted = true;
 
-    const wrapper = script.closest('[data-vibe-component-id]');
+    const wrapper = closestComponentWrapper(script);
     const componentId =
       wrapper && wrapperSetupScript(wrapper) === script
-        ? wrapper.getAttribute('data-vibe-component-id')
+        ? componentIdOf(wrapper)
         : generateComponentId();
 
     const { content, hasImports } = transformScriptContent(rawContent);
@@ -359,8 +370,8 @@ const tagScriptSiblings = (script, componentId) => {
     if (sibling.tagName === 'SCRIPT' && sibling.getAttribute('type') === 'module') {
       break;
     }
-    if (!sibling.hasAttribute('data-vibe-component-id')) {
-      sibling.setAttribute('data-vibe-component-id', componentId);
+    if (!sibling.hasAttribute(COMPONENT_ID_ATTR)) {
+      sibling.setAttribute(COMPONENT_ID_ATTR, componentId);
       rewriteThisBindings(sibling, componentId);
     }
     sibling = sibling.nextElementSibling;
@@ -488,7 +499,7 @@ const processSingle = (el, debug) => {
   if (!props) {
     props = {};
     Array.from(el.attributes).forEach((attr) => {
-      if (attr.name !== 'src' && attr.name !== 'key' && !attr.name.startsWith('data-vibe-')) {
+      if (attr.name !== 'src' && attr.name !== 'key' && !attr.name.startsWith(DEFER_ATTR_PREFIX)) {
         props[attr.name] = attr.value;
       }
     });
@@ -572,37 +583,37 @@ const processSingle = (el, debug) => {
           newWrapper.innerHTML = transformedHtml;
           parkFetchableSrc(newWrapper);
           if (firstComponentId !== null) {
-            newWrapper.setAttribute('data-vibe-component-id', firstComponentId);
+            newWrapper.setAttribute(COMPONENT_ID_ATTR, firstComponentId);
           }
           newWrapper._vibeRawSource = html;
           newWrapper._vibeMountedSrc = src;
           newWrapper._vibeRemountProps = props;
           newWrapper._vibeSlotContent = children;
-          const srcBinding = el._vibeSrcBinding ?? el.getAttribute('data-vibe-src');
-          if (srcBinding) newWrapper.setAttribute('data-vibe-src', srcBinding);
-          const keyBinding = el._vibeKeyBinding ?? el.getAttribute('data-vibe-key');
-          if (keyBinding) newWrapper.setAttribute('data-vibe-key', keyBinding);
+          const srcBinding = el._vibeSrcBinding ?? el.getAttribute(DEFERRED_SRC_ATTR);
+          if (srcBinding) newWrapper.setAttribute(DEFERRED_SRC_ATTR, srcBinding);
+          const keyBinding = el._vibeKeyBinding ?? el.getAttribute(KEY_ATTR);
+          if (keyBinding) newWrapper.setAttribute(KEY_ATTR, keyBinding);
           if (el._vibeMountedKey !== undefined) newWrapper._vibeMountedKey = el._vibeMountedKey;
           if (el._vibeIterPropIds) {
             newWrapper._vibeIterPropIds = el._vibeIterPropIds;
             el._vibeIterPropIds = null;
           }
-          if (el.hasAttribute('data-vibe-iter-prop')) {
-            newWrapper.setAttribute('data-vibe-iter-prop', '');
-            el.removeAttribute('data-vibe-iter-prop');
+          if (hasIterProp(el)) {
+            markIterProp(newWrapper);
             bumpIterPropGeneration();
           }
           if (el._vibeIterPropExprs) {
             newWrapper._vibeIterPropExprs = el._vibeIterPropExprs;
             el._vibeIterPropExprs = null;
           }
-          newWrapper.setAttribute('vibe-fouc', '');
+          newWrapper.setAttribute(FOUC_CLASS_OR_ATTR, '');
           el._vibeReplacedBy = newWrapper;
           if (el._vibeOutgoing) {
             stageIncoming(el, newWrapper);
           } else {
             el.replaceWith(newWrapper);
           }
+          ingestComponentIds(newWrapper);
           debugLog(fromCache ? PHASE_FETCH_CACHED : PHASE_FETCH, src, debug);
 
           notifyChanged(registeredComponentIds);
@@ -615,13 +626,13 @@ const processSingle = (el, debug) => {
           const tryReveal = () => {
             if (!newWrapper.isConnected) {
               abandonStaged(newWrapper);
-              newWrapper.removeAttribute('vibe-fouc');
+              newWrapper.removeAttribute(FOUC_CLASS_OR_ATTR);
               unfouc();
               return;
             }
             if (!scriptsDone || !shouldCleanup(newWrapper)) return;
             commitStaged(newWrapper);
-            newWrapper.removeAttribute('vibe-fouc');
+            newWrapper.removeAttribute(FOUC_CLASS_OR_ATTR);
             unfouc();
           };
           const unfouc = window.$.on('afterDomMutation', tryReveal);
@@ -658,7 +669,7 @@ const processSingle = (el, debug) => {
 
 export const processComponent = (rootElement, onComplete, config = {}) => {
   const debug = !!config?.debug;
-  const allComponents = rootElement.querySelectorAll('component[src], div.component[src]');
+  const allComponents = rootElement.querySelectorAll(COMPONENT_SRC_SELECTOR);
 
   if (allComponents.length === 0) {
     if (onComplete) queueMicrotask(() => onComplete());

package/runtime/constants.js

@@ -1,8 +1,32 @@
-export const VERSION = '4.1.4';
+export const VERSION = '4.2.0';
 
 export const DEBUGGER_NAME = '[vibe-debug]:';
 export const FOUC_CLASS_OR_ATTR = 'vibe-fouc';
 export const DEHYDRATE_CLASS_OR_ATTR = 'vibe-dehydrate';
+export const STAGED_ATTR = 'vibe-staged';
+
+export const DEFER_ATTR_PREFIX = 'data-vibe-';
+export const INTERNAL_ATTR_PREFIX = `${DEFER_ATTR_PREFIX}internal-`;
+export const COMPONENT_ID_ATTR = `${INTERNAL_ATTR_PREFIX}component-id`;
+export const KEY_ATTR = `${INTERNAL_ATTR_PREFIX}key`;
+export const BATCH_ATTR = `${INTERNAL_ATTR_PREFIX}batch`;
+export const NAMEBIND_ATTR = `${INTERNAL_ATTR_PREFIX}namebind`;
+export const CSS_COVER_ATTR = `${INTERNAL_ATTR_PREFIX}cover`;
+export const CSS_LAYOUT_ATTR = `${INTERNAL_ATTR_PREFIX}css`;
+export const DEFERRED_SRC_ATTR = `${DEFER_ATTR_PREFIX}src`;
+
+export const MODULE_SCRIPT_TYPE = 'vibe-module';
+export const MODULE_SCRIPT_SELECTOR = `script[type="${MODULE_SCRIPT_TYPE}"]`;
+
+export const HYPERSPEED_DIR = 'vibe-hyperspeed';
+export const MANIFEST_SUFFIX = '.manifest.js';
+
+export const COMPONENT_ID_PREFIX = '_c';
+export const COMPONENT_ID_REGEX = new RegExp(`^${COMPONENT_ID_PREFIX}\\d+$`);
+export const ITER_PROP_PREFIX = '_p';
+export const ITER_PROP_PATH = '__vibe.iterProps';
+
+export const COMPONENT_SRC_SELECTOR = 'component[src], div.component[src]';
 
 export const PHASE_ATTACH = 'Attached';
 export const PHASE_MANIFEST = 'Manifested';

package/runtime/hydrate.js

@@ -2,7 +2,15 @@ import { updateIteration } from './iterate.js';
 import { updateConditional, managedNodes } from './conditionals.js';
 import { liveComponentWrapper, remountComponent, forceRemount } from './component.js';
 import { isComponentWrapper, isRemountTrigger, parkRootFor, parkBinding } from './staging.js';
-import { VALUE_ATTRS, DOM_PROPERTIES, BINDING_REGEX, PURE_BINDING_REGEX } from './constants.js';
+import {
+  VALUE_ATTRS,
+  DOM_PROPERTIES,
+  BINDING_REGEX,
+  PURE_BINDING_REGEX,
+  NAMEBIND_ATTR,
+  DEFER_ATTR_PREFIX,
+  DEFERRED_SRC_ATTR,
+} from './constants.js';
 import {
   evalInScope,
   resolveCaseInsensitivePath,
@@ -60,8 +68,8 @@ const applyNameBinding = (aff, effectiveState) => {
       element._vibeNameBindings.delete(nameBinding);
     }
 
-    if (element.hasAttribute('data-vibe-namebind')) {
-      element.removeAttribute('data-vibe-namebind');
+    if (element.hasAttribute(NAMEBIND_ATTR)) {
+      element.removeAttribute(NAMEBIND_ATTR);
     }
   } catch (e) {
     console.error('Error hydrating name binding:', e);
@@ -71,6 +79,8 @@ const applyNameBinding = (aff, effectiveState) => {
 const applyAttributeBinding = (aff, effectiveState) => {
   const { attrName, attrValue, element } = aff;
   try {
+    const deferredName = `${DEFER_ATTR_PREFIX}${attrName}`;
+    if (element.hasAttribute(deferredName)) element.removeAttribute(deferredName);
     const isPureBinding = attrValue.match(PURE_BINDING_REGEX);
     const isDomProperty = DOM_PROPERTIES.includes(attrName);
     const isValueAttr =
@@ -209,7 +219,7 @@ export default (affected, state, manifest = {}, oldState = {}) => {
             remountComponent(live, newSrc);
             if (live._vibeOutgoing) (outgoingRoots ??= []).push(live);
           } else if (live.hasAttribute('src')) {
-            live.setAttribute('data-vibe-src', attrValue);
+            live.setAttribute(DEFERRED_SRC_ATTR, attrValue);
             live.removeAttribute('src');
           }
           return;

package/runtime/index.js

@@ -22,6 +22,8 @@ import {
   PHASE_MUTATE,
   PHASE_HYPERSPEED,
   PHASE_READY,
+  STAGED_ATTR,
+  FOUC_CLASS_OR_ATTR,
 } from './constants.js';
 import { processComponent, abortComponentFetch, collectComponentIds, releaseOrphanedComponentState, renderComponentTemplate, executeCompiledComponentScripts } from './component.js';
 import { configureComponentCache, clearComponentCache } from './component-cache.js';
@@ -545,7 +547,7 @@ const main = (s, config = {}, stringSelector = '') => {
   const lateReady = [];
   let lateReadyWatch = null;
   const mountsSettled = () =>
-    !document.querySelector('[vibe-staged], [vibe-fouc]') && shouldCleanup(rootElement);
+    !document.querySelector(`[${STAGED_ATTR}], [${FOUC_CLASS_OR_ATTR}]`) && shouldCleanup(rootElement);
   const flushLateReady = () => {
     if (lateReady.length === 0 || !mountsSettled()) return;
     if (lateReadyWatch) {

package/runtime/iterate.js

@@ -1,3 +1,4 @@
+import { ingestComponentIds, markIterProp, eachIterPropIn } from './component-registry.js';
 import parse from './parse.js';
 import affected, { nodeSubscriberOf } from './affected.js';
 import hydrate from './hydrate.js';
@@ -13,6 +14,15 @@ import {
   VALUE_ATTRS,
   DOM_PROPERTIES,
   THIS_PROP_REGEX,
+  MODULE_SCRIPT_SELECTOR,
+  COMPONENT_ID_PREFIX,
+  COMPONENT_ID_REGEX,
+  BATCH_ATTR,
+  NAMEBIND_ATTR,
+  ITER_PROP_PREFIX,
+  ITER_PROP_PATH,
+  COMPONENT_ID_ATTR,
+  COMPONENT_SRC_SELECTOR,
 } from './constants.js';
 
 import * as compiled from './pre-compiled-iterations.js';
@@ -40,10 +50,10 @@ const hasNestedStructures = (tree) => {
 };
 
 const hasComponentSrc = (templateEl) =>
-  !!templateEl.querySelector?.('component[src], div.component[src]');
+  !!templateEl.querySelector?.(COMPONENT_SRC_SELECTOR);
 
 const hasInlinedComponentScript = (templateEl) =>
-  !!templateEl.querySelector?.('script[type="vibe-module"]');
+  !!templateEl.querySelector?.(MODULE_SCRIPT_SELECTOR);
 
 const canUseBatchRender = (template) =>
   !globalThis.__vibe?.forceClonePath &&
@@ -98,11 +108,13 @@ const isValueStyleAttr = (attrName) =>
   attrName.startsWith('aria-') ||
   attrName.startsWith('on');
 
-const CID_ROOT_REGEX =
-  /('(?:[^'\\]|\\.)*'|"(?:[^"\\]|\\.)*")|(?<![\w$.])_c(\d+)\b/g;
+const CID_ROOT_REGEX = new RegExp(
+  String.raw`('(?:[^'\\]|\\.)*'|"(?:[^"\\]|\\.)*")|(?<![\w$.])${COMPONENT_ID_PREFIX}(\d+)\b`,
+  'g',
+);
 
 export const canonicalizeComponentIds = (expr) =>
-  expr.replace(CID_ROOT_REGEX, (m, literal, id) => (literal !== undefined ? literal : `$['_c${id}']`));
+  expr.replace(CID_ROOT_REGEX, (m, literal, id) => (literal !== undefined ? literal : `$['${COMPONENT_ID_PREFIX}${id}']`));
 
 const nameBindingEmit = (exprSrc) =>
   '${(()=>{const _v=_e(()=>(' + exprSrc + '));return _v?\' \'+_v+\'=""\':\'\';})()}';
@@ -128,14 +140,14 @@ export const compileBatchFn = (template, itemAlias, indexAlias, stateKeys, ancho
       domPropertyWrites.push({ prop: attr.name, expr });
     }
     if (indexes.length > 0) {
-      el.setAttribute('data-vibe-batch', indexes.join(','));
+      el.setAttribute(BATCH_ATTR, indexes.join(','));
     }
   }
 
   let templateHtml = tplClone.innerHTML.trim();
 
   templateHtml = templateHtml.replace(
-    /\sdata-vibe-namebind="((?:@\[(?:[^[\]'"]|\[[^\]]*\]|'[^']*'|"[^"]*")+\])+)"/g,
+    new RegExp(String.raw`\s${NAMEBIND_ATTR}="((?:@\[(?:[^[\]'"]|\[[^\]]*\]|'[^']*'|"[^"]*")+\])+)"`, 'g'),
     (_, bindings) =>
       bindings.replace(/@\[(?:[^[\]'"]|\[[^\]]*\]|'[^']*'|"[^"]*")+\]/g, (b) => ' ' + b + '=""'),
   );
@@ -241,7 +253,7 @@ export const releaseOrphanedIterationProps = (nodes) => {
       el._vibeIterPropIds = null;
     };
     free(node);
-    node.querySelectorAll?.('[data-vibe-iter-prop]').forEach(free);
+    eachIterPropIn(node, free);
   }
 };
 
@@ -275,7 +287,7 @@ const resolveSlotContentBindings = (el, scopedState, aliases) => {
         return undefined;
       }
       if (value === undefined) return undefined;
-      id = `_p${__vibeIterPropCounter++}`;
+      id = `${ITER_PROP_PREFIX}${__vibeIterPropCounter++}`;
       registry[id] = value;
       idByExpr.set(expr, id);
       (el._vibeIterPropExprs = el._vibeIterPropExprs || []).push({ id, attrName: null, expr });
@@ -309,7 +321,7 @@ const resolveSlotContentBindings = (el, scopedState, aliases) => {
   }
   if (idByExpr.size) {
     el._vibeSlotContent = rewritten;
-    el.setAttribute('data-vibe-iter-prop', '');
+    markIterProp(el);
     bumpIterPropGeneration();
   }
 };
@@ -330,9 +342,9 @@ export const resolveIterationComponentProps = (nodes, scopedState, aliases) => {
   for (let n = 0; n < nodes.length; n++) {
     const node = nodes[n];
     if (node.nodeType !== 1) continue;
-    const components = node.matches?.('component[src], div.component[src]')
-      ? [node, ...node.querySelectorAll('component[src], div.component[src]')]
-      : [...node.querySelectorAll('component[src], div.component[src]')];
+    const components = node.matches?.(COMPONENT_SRC_SELECTOR)
+      ? [node, ...node.querySelectorAll(COMPONENT_SRC_SELECTOR)]
+      : [...node.querySelectorAll(COMPONENT_SRC_SELECTOR)];
     for (let i = 0; i < components.length; i++) {
       const el = components[i];
       const attrs = el.attributes;
@@ -346,7 +358,7 @@ export const resolveIterationComponentProps = (nodes, scopedState, aliases) => {
           /\bthis\b/.test(expr) ||
           (aliases && extractDependencies(expr).some((d) => aliases.has(d)));
         if (!usesLocalScope) {
-          el.setAttribute('data-vibe-iter-prop', '');
+          markIterProp(el);
           bumpIterPropGeneration();
           el._vibeIterPropExprs = el._vibeIterPropExprs || [];
           continue;
@@ -355,10 +367,10 @@ export const resolveIterationComponentProps = (nodes, scopedState, aliases) => {
           const value = evalInScope(expr, scopedState, el);
           if (value === undefined) continue;
           const registry = ensureIterPropsRegistry();
-          const id = `_p${__vibeIterPropCounter++}`;
+          const id = `${ITER_PROP_PREFIX}${__vibeIterPropCounter++}`;
           registry[id] = value;
-          el.setAttribute(attr.name, `@[window.__vibe.iterProps.${id}]`);
-          el.setAttribute('data-vibe-iter-prop', '');
+          el.setAttribute(attr.name, `@[window.${ITER_PROP_PATH}.${id}]`);
+          markIterProp(el);
           bumpIterPropGeneration();
           (el._vibeIterPropIds = el._vibeIterPropIds || []).push(id);
           (el._vibeIterPropExprs = el._vibeIterPropExprs || []).push({ id, attrName: attr.name, expr });
@@ -401,7 +413,7 @@ const refreshIterationComponentProps = (clonedNodes, scopedState) => {
   return changed;
 };
 
-const REGISTRY_SLOT_REGEX = /__vibe\.iterProps\.(_p\d+)/;
+const REGISTRY_SLOT_REGEX = new RegExp(`${ITER_PROP_PATH.replace('.', String.raw`\.`)}\\.(${ITER_PROP_PREFIX}\\d+)`);
 const forceRegistryBackedIterationUpdates = (tree, state, manifest, parentScope, changedSlots) => {
   if (!tree) return;
   if (tree.type === 'iteration') {
@@ -435,12 +447,12 @@ const applyDomPropertyWrites = (instances, array, state, itemAlias, indexAlias,
     if (!root || root.nodeType !== 1) continue;
     const localState = { ...state, [itemAlias]: array[i], [indexAlias]: i };
     const tagged = [];
-    if (root.matches?.('[data-vibe-batch]')) tagged.push(root);
-    const found = root.querySelectorAll?.('[data-vibe-batch]');
+    if (root.matches?.(`[${BATCH_ATTR}]`)) tagged.push(root);
+    const found = root.querySelectorAll?.(`[${BATCH_ATTR}]`);
     if (found) for (let f = 0; f < found.length; f++) tagged.push(found[f]);
     for (let t = 0; t < tagged.length; t++) {
       const el = tagged[t];
-      const indexes = el.getAttribute('data-vibe-batch').split(',');
+      const indexes = el.getAttribute(BATCH_ATTR).split(',');
       for (let k = 0; k < indexes.length; k++) {
         const { prop, expr } = domPropertyWrites[indexes[k] | 0];
         const value = evalInScope(expr, localState, el);
@@ -458,7 +470,7 @@ const applyDomPropertyWrites = (instances, array, state, itemAlias, indexAlias,
           el.removeAttribute(prop);
         }
       }
-      el.removeAttribute('data-vibe-batch');
+      el.removeAttribute(BATCH_ATTR);
     }
   }
 };
@@ -520,6 +532,7 @@ const renderBatch = (iterationNode, array, state, parent, endComment, parentScop
     instances[i] = { element: kids[i], item: array[i], index: i };
   }
 
+  ingestComponentIds(frag);
   parent.insertBefore(frag, endComment);
   iterationNode.runtime.instances = instances;
 
@@ -628,15 +641,15 @@ const cloneTreeWithElements = (originalTree, clonedRoot) => {
   return cloned;
 };
 
-const COMPONENT_ID = /^_c\d+$/;
+const COMPONENT_ID = COMPONENT_ID_REGEX;
 
 const isolateInlinedComponentIds = (container) => {
   const remap = new Map();
-  for (const el of container.querySelectorAll('[data-vibe-component-id]')) {
-    const oldId = el.getAttribute('data-vibe-component-id');
+  for (const el of container.querySelectorAll(`[${COMPONENT_ID_ATTR}]`)) {
+    const oldId = el.getAttribute(COMPONENT_ID_ATTR);
     if (!COMPONENT_ID.test(oldId)) continue;
     if (!remap.has(oldId)) remap.set(oldId, generateComponentId());
-    el.setAttribute('data-vibe-component-id', remap.get(oldId));
+    el.setAttribute(COMPONENT_ID_ATTR, remap.get(oldId));
   }
   if (!remap.size) return false;
 
@@ -652,13 +665,13 @@ const isolateInlinedComponentIds = (container) => {
   const walk = (node) => {
     if (node.nodeType === 1) {
       for (const attr of node.attributes) {
-        if (attr.value.includes('_c')) {
+        if (attr.value.includes(COMPONENT_ID_PREFIX)) {
           const next = rewrite(attr.value);
           if (next !== attr.value) attr.value = next;
         }
       }
       for (const child of node.childNodes) walk(child);
-    } else if (node.nodeType === 3 && node.textContent.includes('_c')) {
+    } else if (node.nodeType === 3 && node.textContent.includes(COMPONENT_ID_PREFIX)) {
       node.textContent = rewrite(node.textContent);
     }
   };
@@ -684,7 +697,7 @@ export const initializeBlock = (templateNodes, scopedState, cachedTree = null, c
     }
   }
 
-  const components = parseContainer.querySelectorAll('component[src], div.component[src]');
+  const components = parseContainer.querySelectorAll(COMPONENT_SRC_SELECTOR);
   const scopeKeys = overlayKeysOf(scopedState);
   for (let i = 0; i < components.length; i++) {
     const el = components[i];
@@ -717,6 +730,8 @@ export const initializeBlock = (templateNodes, scopedState, cachedTree = null, c
     hydrate(affectedElements, scopedState);
   }
 
+  ingestComponentIds(parseContainer);
+
   return {
     element: firstElement,
     tree,
@@ -1179,6 +1194,7 @@ const renderInstances = (iterationNode, array, state, manifest, parentScope) =>
       clonedNodes: built.clonedNodes, scopedState: built.scopedState,
     });
   }
+  ingestComponentIds(frag);
   parent.insertBefore(frag, endComment);
   iterationNode.runtime.instances = instances;
   stampScopes(iterationNode, manifest, parentScope);

package/runtime/iteration-utils.js

@@ -1,3 +1,4 @@
+import { eachIterPropIn } from './component-registry.js';
 import {
   ITERATION_REGEX,
   ITERATION_START_REGEX,
@@ -5,6 +6,7 @@ import {
   BINDING_REGEX,
   FETCH_SRC_ATTRS,
   FETCH_SRC_SELECTOR,
+  DEFER_ATTR_PREFIX,
 } from './constants.js';
 
 export const parkFetchableSrc = (root) => {
@@ -14,7 +16,7 @@ export const parkFetchableSrc = (root) => {
       const value = elements[i].getAttribute(attr);
       BINDING_REGEX.lastIndex = 0;
       if (value && BINDING_REGEX.test(value)) {
-        elements[i].setAttribute(`data-vibe-${attr}`, value);
+        elements[i].setAttribute(`${DEFER_ATTR_PREFIX}${attr}`, value);
         elements[i].removeAttribute(attr);
       }
     }
@@ -55,7 +57,7 @@ export const markBoundValues = (root, html) => {
       continue;
     }
     for (const attr of node.attributes) {
-      if (!attr.name.startsWith('data-vibe-') && attr.value.includes('@[')) {
+      if (!attr.name.startsWith(DEFER_ATTR_PREFIX) && attr.value.includes('@[')) {
         (node._vibeBoundAttrs ??= new Set()).add(attr.name);
       }
     }
@@ -236,8 +238,7 @@ export const iterPropWrappersOf = (node) => {
     return list;
   }
   const list = [];
-  const found = node.querySelectorAll?.('[data-vibe-iter-prop]');
-  if (found) for (let i = 0; i < found.length; i++) list.push(found[i]);
+  eachIterPropIn(node, (el) => list.push(el));
   node._vibeIterPropWrappers = { gen: iterPropGeneration, list };
   return list;
 };

package/runtime/parse.js

@@ -1,3 +1,4 @@
+import { closestComponentId } from './component-registry.js';
 import {
   findEndComment,
   findEndCommentIndex,
@@ -14,15 +15,16 @@ import {
   STATE_THIS_PROP_REGEX,
   FETCH_SRC_ATTRS,
   FETCH_SRC_ELEMENTS,
+  DEFERRED_SRC_ATTR,
+  KEY_ATTR,
+  NAMEBIND_ATTR,
+  DEFER_ATTR_PREFIX,
+  INTERNAL_ATTR_PREFIX,
 } from './constants.js';
 import { rewriteHandlerAliases } from './loop-scope.js';
 import './this-scope.js';
 
-const findComponentIdForElement = (element) => {
-  if (!element?.closest) return null;
-  const wrapper = element.closest('[data-vibe-component-id]');
-  return wrapper ? wrapper.getAttribute('data-vibe-component-id') : null;
-};
+const findComponentIdForElement = (element) => closestComponentId(element);
 
 const warnedStaticKeys = new Set();
 const warnStaticKey = (key) => {
@@ -37,11 +39,11 @@ const captureAttributeBindings = (element, aliasSet) => {
   const nodeName = element.nodeName;
   const isFetchedComponent =
     (nodeName === 'COMPONENT' || (nodeName === 'DIV' && element.classList?.contains('component'))) &&
-    (element.hasAttribute?.('src') || element.hasAttribute?.('data-vibe-src'));
+    (element.hasAttribute?.('src') || element.hasAttribute?.(DEFERRED_SRC_ATTR));
 
   if (isFetchedComponent) {
-    const src = element.getAttribute?.('data-vibe-src') ?? element.getAttribute?.('src');
-    const key = element.getAttribute?.('data-vibe-key') ?? element.getAttribute?.('key');
+    const src = element.getAttribute?.(DEFERRED_SRC_ATTR) ?? element.getAttribute?.('src');
+    const key = element.getAttribute?.(KEY_ATTR) ?? element.getAttribute?.('key');
     const attributes = {};
     BINDING_REGEX.lastIndex = 0;
     if (BINDING_REGEX.test(src)) attributes.src = src;
@@ -61,30 +63,30 @@ const captureAttributeBindings = (element, aliasSet) => {
   const attributes = {};
   const nameBindings = [];
   const isFetchableElement = FETCH_SRC_ELEMENTS.includes(nodeName);
-  let srcToPark = null;
+  let toPark = null;
+  let deferredNames = null;
 
   for (let j = 0; j < element.attributes.length; j++) {
     const attr = element.attributes[j];
     BINDING_REGEX.lastIndex = 0;
 
-    if (attr.name === 'data-vibe-namebind') {
+    if (attr.name === NAMEBIND_ATTR) {
       nameBindings.push(attr.value);
       continue;
     }
 
-    if (isFetchableElement && attr.name.startsWith('data-vibe-')) {
-      const realName = attr.name.slice(10);
-      if (FETCH_SRC_ATTRS.includes(realName)) {
-        attributes[realName] = attr.value;
-        continue;
-      }
+    if (attr.name.startsWith(DEFER_ATTR_PREFIX) && !attr.name.startsWith(INTERNAL_ATTR_PREFIX)) {
+      const realName = attr.name.slice(DEFER_ATTR_PREFIX.length);
+      attributes[realName] = attr.value;
+      (deferredNames ??= new Set()).add(realName);
+      continue;
     }
 
     if (isFetchableElement && FETCH_SRC_ATTRS.includes(attr.name)) {
       BINDING_REGEX.lastIndex = 0;
       if (BINDING_REGEX.test(attr.value)) {
-        attributes[attr.name] = attr.value;
-        (srcToPark ??= []).push([attr.name, attr.value]);
+        if (!deferredNames?.has(attr.name)) attributes[attr.name] = attr.value;
+        (toPark ??= []).push([attr.name, attr.value]);
         continue;
       }
     }
@@ -110,14 +112,14 @@ const captureAttributeBindings = (element, aliasSet) => {
     }
 
     BINDING_REGEX.lastIndex = 0;
-    if (BINDING_REGEX.test(attr.value)) {
+    if (BINDING_REGEX.test(attr.value) && !deferredNames?.has(attr.name)) {
       attributes[attr.name] = attr.value;
     }
   }
 
-  if (srcToPark) {
-    for (const [name, value] of srcToPark) {
-      element.setAttribute(`data-vibe-${name}`, value);
+  if (toPark) {
+    for (const [name, value] of toPark) {
+      element.setAttribute(`${DEFER_ATTR_PREFIX}${name}`, value);
       element.removeAttribute(name);
     }
   }

package/runtime/pre-compiled-manifest.js

@@ -1,3 +1,7 @@
+import { parkFetchableSrc } from './iteration-utils.js';
+import { HYPERSPEED_DIR, MANIFEST_SUFFIX, COMPONENT_ID_PREFIX } from './constants.js';
+
+const CID_SCOPE_BINDING_REGEX = new RegExp(String.raw`@\[${COMPONENT_ID_PREFIX}\d+\.`, 'g');
 export const buildHyperspeedManifest = (parsedTree) => {
   const splitByMarkers = (text) => {
     const regex = /@\[[^\]]+\]/g;
@@ -137,30 +141,30 @@ export const buildManifestCandidatePaths = (pathname, route) => {
     const prefix = rawSegments
       .slice(0, routeSegments.length - 1)
       .map((seg, i) => (routeSegments[i].startsWith(":") ? "$" : seg));
-    possiblePaths.push(`/vibe-hyperspeed/${[...prefix, "$"].join("/")}.html.manifest.js`);
+    possiblePaths.push(`/${HYPERSPEED_DIR}/${[...prefix, "$"].join("/")}.html${MANIFEST_SUFFIX}`);
   } else if (routeSegments && routeSegments.some((s) => s.startsWith(":"))) {
     const tokenized = pathSegments.map((seg, i) => {
       if (!routeSegments[i]?.startsWith(":")) return seg;
       const dot = seg.indexOf(".");
       return dot >= 0 ? "$" + seg.slice(dot) : "$";
     });
-    possiblePaths.push(`/vibe-hyperspeed/${tokenized.join("/")}.manifest.js`);
+    possiblePaths.push(`/${HYPERSPEED_DIR}/${tokenized.join("/")}${MANIFEST_SUFFIX}`);
   }
 
   if (dirSegments.length >= 1) {
     const subPath = dirSegments.slice(1).join("/");
     const baseDir = "/" + dirSegments[0];
     possiblePaths.push(
-      `${baseDir}/vibe-hyperspeed/${subPath ? subPath + "/" : ""}${fileName}.manifest.js`,
+      `${baseDir}/${HYPERSPEED_DIR}/${subPath ? subPath + "/" : ""}${fileName}${MANIFEST_SUFFIX}`,
     );
   }
 
-  possiblePaths.push(`/vibe-hyperspeed${pagePath}.manifest.js`);
+  possiblePaths.push(`/${HYPERSPEED_DIR}${pagePath}${MANIFEST_SUFFIX}`);
 
   if (dirSegments.length > 0) {
     const relativePath = dirSegments.join("/");
     possiblePaths.push(
-      `/vibe-hyperspeed/${relativePath}/${fileName}.manifest.js`,
+      `/${HYPERSPEED_DIR}/${relativePath}/${fileName}${MANIFEST_SUFFIX}`,
     );
   }
 
@@ -168,7 +172,7 @@ export const buildManifestCandidatePaths = (pathname, route) => {
   const tokenized = dot >= 0 ? "$" + fileName.slice(dot) : "$";
   if (tokenized !== fileName) {
     const dirPrefix = dirSegments.length ? `/${dirSegments.join("/")}` : "";
-    possiblePaths.push(`/vibe-hyperspeed${dirPrefix}/${tokenized}.manifest.js`);
+    possiblePaths.push(`/${HYPERSPEED_DIR}${dirPrefix}/${tokenized}${MANIFEST_SUFFIX}`);
   }
 
   return [...new Set(possiblePaths)];
@@ -236,7 +240,7 @@ export const restoreMarkersFromManifest = (
         if (hasBindings) {
           let originalContent = restoration.parsed.join("");
 
-          originalContent = originalContent.replace(/@\[_c\d+\./g, "@[this.");
+          originalContent = originalContent.replace(CID_SCOPE_BINDING_REGEX, "@[this.");
 
           if (
             element.childNodes.length === 1 &&
@@ -253,7 +257,7 @@ export const restoreMarkersFromManifest = (
         for (let [attrName, attrValue] of Object.entries(
           restoration.attributes,
         )) {
-          attrValue = attrValue.replace(/@\[_c\d+\./g, "@[this.");
+          attrValue = attrValue.replace(CID_SCOPE_BINDING_REGEX, "@[this.");
 
           element.setAttribute(attrName, attrValue);
         }
@@ -298,7 +302,7 @@ export const restoreMarkersFromManifest = (
           if (hasBindings) {
             const originalContent = restoration.parsed
               .join("")
-              .replace(/@\[_c\d+\./g, "@[this.");
+              .replace(CID_SCOPE_BINDING_REGEX, "@[this.");
 
             const node = element.childNodes[index];
             if (index === 0 && Object.keys(tree.children).length === 1) {
@@ -372,6 +376,7 @@ export const restoreMarkersFromManifest = (
 
         const tpl = document.createElement("template");
         tpl.innerHTML = restoration.template;
+        parkFetchableSrc(tpl.content);
         endComment.parentNode.insertBefore(tpl.content, endComment);
       }
     }

package/runtime/reconcile.js

@@ -1,4 +1,10 @@
-import { ITERATION_START_REGEX, CONDITIONAL_START_REGEX } from './constants.js';
+import { parkFetchableSrc } from './iteration-utils.js';
+import {
+  ITERATION_START_REGEX,
+  CONDITIONAL_START_REGEX,
+  DEFER_ATTR_PREFIX,
+  FOUC_CLASS_OR_ATTR,
+} from './constants.js';
 
 const COMMENT = 8;
 const ELEMENT = 1;
@@ -146,9 +152,9 @@ const findElseMarker = (nodes, startIdx, endIdx) => {
   return -1;
 };
 
-const PRESERVED_ATTRS = new Set(['vibe-fouc']);
-const PRESERVED_CLASSES = new Set(['vibe-fouc']);
-const isPreservedAttr = (name) => name.startsWith('data-vibe-') || PRESERVED_ATTRS.has(name);
+const PRESERVED_ATTRS = new Set([FOUC_CLASS_OR_ATTR]);
+const PRESERVED_CLASSES = new Set([FOUC_CLASS_OR_ATTR]);
+const isPreservedAttr = (name) => name.startsWith(DEFER_ATTR_PREFIX) || PRESERVED_ATTRS.has(name);
 
 const mergeClass = (srcValue, live) => {
   const tokens = new Set(srcValue.split(/\s+/).filter(Boolean));
@@ -269,9 +275,9 @@ const reconcileRange = (liveParent, liveNodes, liStart, liEnd, srcNodes, siStart
       if (live._vibeProps && src.hasAttribute('src')) {
         const srcProps = {};
         for (const a of src.attributes) {
-          if (a.name === 'vibe-fouc') continue;
+          if (a.name === FOUC_CLASS_OR_ATTR) continue;
           if (a.name === 'class') {
-            const kept = a.value.split(/\s+/).filter((t) => t && t !== 'vibe-fouc');
+            const kept = a.value.split(/\s+/).filter((t) => t && t !== FOUC_CLASS_OR_ATTR);
             if (kept.length) srcProps.class = kept.join(' ');
             continue;
           }
@@ -291,7 +297,7 @@ const reconcileRange = (liveParent, liveNodes, liStart, liEnd, srcNodes, siStart
           for (const [name, value] of Object.entries(srcProps)) {
             fresh.setAttribute(name, value);
           }
-          fresh.setAttribute('vibe-fouc', '');
+          fresh.setAttribute(FOUC_CLASS_OR_ATTR, '');
           const slotHtml = src.innerHTML.trim();
           fresh._vibeSlotContent = slotHtml;
           fresh._vibePluginSlot = slotHtml;
@@ -458,6 +464,7 @@ export const reconcile = (target, source) => {
   const log = { text: 0, attr: 0, insert: 0, remove: 0, replace: 0, changes: [] };
   const tpl = document.createElement('template');
   tpl.innerHTML = typeof source === 'string' ? source : source.outerHTML;
+  parkFetchableSrc(tpl.content);
   reconcileChildren(live, [...tpl.content.childNodes], log);
 
   return new Promise((resolve) => {

package/runtime/staging.js

@@ -1,3 +1,4 @@
+import { STAGED_ATTR } from './constants.js';
 export const liveNode = (node) => {
   let live = node;
   while (live && live._vibeReplacedBy) live = live._vibeReplacedBy;
@@ -62,14 +63,14 @@ export const isRemountTrigger = (entry) =>
   isComponentWrapper(entry.element);
 
 export const stageIncoming = (el, newWrapper) => {
-  if (el.hasAttribute('vibe-staged')) {
+  if (el.hasAttribute(STAGED_ATTR)) {
     newWrapper._vibeCommitOld = el._vibeCommitOld;
     activeOutgoingRoots.delete(el);
-    newWrapper.setAttribute('vibe-staged', '');
+    newWrapper.setAttribute(STAGED_ATTR, '');
     el.replaceWith(newWrapper);
   } else {
     newWrapper._vibeCommitOld = el;
-    newWrapper.setAttribute('vibe-staged', '');
+    newWrapper.setAttribute(STAGED_ATTR, '');
     el.removeAttribute('src');
     el.after(newWrapper);
   }
@@ -83,7 +84,7 @@ export const commitStaged = (newWrapper) => {
     replayParked(old);
     newWrapper._vibeCommitOld = null;
   }
-  newWrapper.removeAttribute('vibe-staged');
+  newWrapper.removeAttribute(STAGED_ATTR);
 };
 
 export const abandonStaged = (newWrapper) => {

package/runtime/utils.js

@@ -1,4 +1,5 @@
-import { THIS_PROP_REGEX } from './constants.js';
+import { closestComponentId } from './component-registry.js';
+import { THIS_PROP_REGEX, COMPONENT_ID_PREFIX, COMPONENT_ID_REGEX } from './constants.js';
 import { recordRead, recordAbsentRead } from './tracking.js';
 import { reportEvalError } from './debug.js';
 
@@ -89,11 +90,14 @@ const compileExpression = (normalized) => {
   };
 
   const canonical = normalized.replace(
-    /('(?:[^'\\]|\\.)*'|"(?:[^"\\]|\\.)*")|\$\['(_c\d+)'\]|((?<=[{,]\s*)[a-zA-Z_$][\w$]*(?=\s*:))|(?<![.\w$'"])[a-zA-Z_$][\w$]*/g,
+    new RegExp(
+      String.raw`('(?:[^'\\]|\\.)*'|"(?:[^"\\]|\\.)*")|\$\['(${COMPONENT_ID_PREFIX}\d+)'\]|((?<=[{,]\s*)[a-zA-Z_$][\w$]*(?=\s*:))|(?<![.\w$'"])[a-zA-Z_$][\w$]*`,
+      'g',
+    ),
     (match, strLit, bracketCid, objKey) => {
       if (strLit !== undefined || objKey !== undefined) return match;
       if (bracketCid !== undefined) return `$[${cidParamFor(bracketCid)}]`;
-      if (/^_c\d+$/.test(match)) return `$[${cidParamFor(match)}]`;
+      if (COMPONENT_ID_REGEX.test(match)) return `$[${cidParamFor(match)}]`;
       if (match === '$' || locals.has(match) || EVAL_IDENT_EXCLUDE.has(match)) return match;
       if (!paramSet.has(match)) {
         paramSet.add(match);
@@ -226,10 +230,10 @@ export const resolveCaseInsensitivePath = (state, path) => {
 };
 
 export const findComponentIdForElement = (element) => {
-  if (!element || !element.closest) return null;
+  if (!element) return null;
 
-  const wrapper = element.closest('[data-vibe-component-id]');
-  if (wrapper) return wrapper.getAttribute('data-vibe-component-id');
+  const id = closestComponentId(element);
+  if (id) return id;
   let root = element;
   while (root.parentNode) root = root.parentNode;
   if (root._vibeComponentId) return root._vibeComponentId;

package/runtime/vibe-css.js

@@ -1,6 +1,8 @@
-export const COVER_CSS = `[vibe-fouc], .vibe-fouc { visibility: hidden }
-[vibe-staged] { display: none }
-[vibe-fouc], .vibe-fouc, [vibe-fouc] *, .vibe-fouc * { transition: none !important; animation: none !important }`;
+import { FOUC_CLASS_OR_ATTR, STAGED_ATTR, CSS_COVER_ATTR, CSS_LAYOUT_ATTR } from './constants.js';
+
+export const COVER_CSS = `[${FOUC_CLASS_OR_ATTR}], .${FOUC_CLASS_OR_ATTR} { visibility: hidden }
+[${STAGED_ATTR}] { display: none }
+[${FOUC_CLASS_OR_ATTR}], .${FOUC_CLASS_OR_ATTR}, [${FOUC_CLASS_OR_ATTR}] *, .${FOUC_CLASS_OR_ATTR} * { transition: none !important; animation: none !important }`;
 
 export const OPTIONAL_MARKER = '/* vibe:optional — everything below is skipped by disableVibeCss */';
 
@@ -8,21 +10,43 @@ export const LAYOUT_CSS = `${OPTIONAL_MARKER}
 
 component, div.component, slot, div.slot { display: contents }`;
 
-const inject = (doc, marker, css) => {
-  if (doc.querySelector(`style[${marker}]`)) return;
+const sheets = new WeakMap();
+
+const sheetRefs = (doc) => {
+  let refs = sheets.get(doc);
+  if (!refs) {
+    refs = {};
+    sheets.set(doc, refs);
+  }
+  return refs;
+};
+
+const claim = (doc, key, marker) => {
+  const refs = sheetRefs(doc);
+  if (refs[key]) return refs[key];
+  const served = doc.querySelector(`style[${marker}]`);
+  if (served) {
+    served.removeAttribute(marker);
+    refs[key] = served;
+  }
+  return refs[key];
+};
+
+const inject = (doc, key, marker, css) => {
+  if (claim(doc, key, marker)) return;
   const style = doc.createElement('style');
-  style.setAttribute(marker, '');
   style.textContent = css;
   doc.head.appendChild(style);
+  sheetRefs(doc)[key] = style;
 };
 
 export const injectVibeCss = (doc) => {
-  inject(doc, 'data-vibe-cover', COVER_CSS);
-  inject(doc, 'data-vibe-css', LAYOUT_CSS);
+  inject(doc, 'cover', CSS_COVER_ATTR, COVER_CSS);
+  inject(doc, 'layout', CSS_LAYOUT_ATTR, LAYOUT_CSS);
 };
 
 export const removeLayoutCss = (doc) => {
-  doc.querySelector('style[data-vibe-css]')?.remove();
+  claim(doc, 'layout', CSS_LAYOUT_ATTR)?.remove();
 };
 
 export const warnIfCoverDefeated = (doc) => {