@ape-egg/vibe 1.0.3 → 1.1.1

package/{affected.js → runtime/affected.js}

@@ -1,23 +1,15 @@
 import { resolvePath, deepEqual } from './iteration-utils.js';
 import { extractDependencies } from './conditionals.js';
 import { BINDING_REGEX } from './constants.js';
+import { evalInScope } from './utils.js';
 
 // Evaluate conditional expression
-const evaluateCondition = (expression, state) => {
-  try {
-    const keys = Object.keys(state);
-    const values = Object.values(state);
-    const result = new Function(...keys, `'use strict'; return !!(${expression})`)(...values);
-    return !!result;
-  } catch (e) {
-    return false;
-  }
-};
+const evaluateCondition = (expression, state) => !!evalInScope(expression, state);
 
 // Helper function to check if a match references a specific key
 const matchesKey = (matchStr, key) => matchStr === key || matchStr.startsWith(key + '.');
 
-const recursive = (tree, state, newState, affected) => {
+const recursive = (tree, state, newState, affected, scopedStateForHydration = null) => {
   // Handle iteration nodes specially
   if (tree.type === 'iteration') {
     const oldArray = resolvePath(state, tree.meta.arrayPath);
@@ -31,7 +23,22 @@ const recursive = (tree, state, newState, affected) => {
         node: tree,
         changeType: 'array',
       });
+      return affected;
+    }
+
+    // Array didn't change, but check for affected elements inside iteration instances
+    // (e.g., when tutorialProgress changes, need to update checkmarks in menu items)
+    if (tree.runtime.instances) {
+      for (const instance of tree.runtime.instances) {
+        if (instance.tree && instance.scopedState) {
+          // Use the instance's scoped state (includes item, index, etc.)
+          // Merge newState into scopedState to get updated global values
+          const mergedNewState = { ...instance.scopedState, ...newState };
+          recursive(instance.tree, instance.scopedState, mergedNewState, affected, mergedNewState);
+        }
+      }
     }
+
     return affected;
   }
 
@@ -52,7 +59,7 @@ const recursive = (tree, state, newState, affected) => {
 
     // Condition didn't change, check for affected elements inside active branch
     if (tree.runtime.activeInstance && tree.runtime.activeInstance.parsedTree) {
-      return recursive(tree.runtime.activeInstance.parsedTree, state, newState, affected);
+      return recursive(tree.runtime.activeInstance.parsedTree, state, newState, affected, scopedStateForHydration);
     }
 
     return affected;
@@ -112,6 +119,7 @@ const recursive = (tree, state, newState, affected) => {
           input: m.input,
           matches: m.matches,
           element: tree.element,
+          scopedState: scopedStateForHydration, // Pass scoped state from iteration context
         });
       }
     }
@@ -156,6 +164,50 @@ const recursive = (tree, state, newState, affected) => {
             matchOuter: m.outer,
             matchInner: m.inner,
             element: tree.element,
+            scopedState: scopedStateForHydration, // Pass scoped state from iteration context
+          });
+        }
+      }
+    }
+  }
+
+  // Check name bindings (bindings in attribute names)
+  if (tree.nameBindings) {
+    const shallowState = Object.keys(state);
+    const shallowNewState = Object.keys(newState);
+    const isInitialHydration = state === newState;
+
+    for (const nameBinding of tree.nameBindings) {
+      BINDING_REGEX.lastIndex = 0;
+      const nameMatches = [];
+      let nameMatch;
+      while ((nameMatch = BINDING_REGEX.exec(nameBinding))) {
+        nameMatches.push({ outer: nameMatch[0], inner: nameMatch[1] });
+      }
+
+      for (const m of nameMatches) {
+        const noMatch = !shallowState.some((key) => matchesKey(m.inner, key));
+
+        let shouldAffect = false;
+
+        if (isInitialHydration) {
+          const newMatches = shallowNewState.filter((key) => matchesKey(m.inner, key));
+          shouldAffect = noMatch || newMatches.length > 0;
+        } else {
+          const changedKeys = shallowNewState.filter((key) =>
+            matchesKey(m.inner, key) && state[key] !== newState[key]
+          );
+          shouldAffect = noMatch || changedKeys.length > 0;
+        }
+
+        if (shouldAffect) {
+          affected.push({
+            type: 'nameBinding',
+            nameBinding,
+            matchOuter: m.outer,
+            matchInner: m.inner,
+            element: tree.element,
+            scopedState: scopedStateForHydration,
           });
         }
       }
@@ -168,7 +220,7 @@ const recursive = (tree, state, newState, affected) => {
     for (const key in children) {
       const child = children[key];
       if (child && typeof child === 'object') {
-        recursive(child, state, newState, affected);
+        recursive(child, state, newState, affected, scopedStateForHydration);
       }
     }
   }
@@ -176,4 +228,4 @@ const recursive = (tree, state, newState, affected) => {
   return affected;
 };
 
-export default (tree, state, newState) => recursive(tree, state, newState, []);
+export default (tree, state, newState) => recursive(tree, state, newState, [], null);

package/runtime/cleanup.js

@@ -0,0 +1,59 @@
+import { debugLog } from './debug.js';
+import { PHASE_COMPLETE } from './constants.js';
+
+/**
+ * Check if all Vibe processing is complete and cleanup can run
+ * @param {Element} rootElement - Root element to check
+ * @returns {Boolean} - true if cleanup should run
+ */
+export const shouldCleanup = (rootElement) => {
+  // 1. Check for pending <component> elements
+  const componentElements = rootElement.querySelectorAll('component');
+  if (componentElements.length > 0) {
+    return false;
+  }
+
+  // 2. Check for unhydrated bindings (literal @[...] in DOM, excluding dehydrated elements)
+  const walker = document.createTreeWalker(
+    rootElement,
+    NodeFilter.SHOW_TEXT,
+    {
+      acceptNode(node) {
+        // Check if this text node is inside a dehydrated element
+        let parent = node.parentElement;
+        while (parent && parent !== rootElement) {
+          if (parent.hasAttribute('dehydrate')) {
+            return NodeFilter.FILTER_REJECT; // Skip dehydrated content
+          }
+          parent = parent.parentElement;
+        }
+        return NodeFilter.FILTER_ACCEPT;
+      }
+    }
+  );
+
+  let node;
+  while ((node = walker.nextNode())) {
+    if (/@\[.+?\]/.test(node.textContent)) {
+      return false; // Found literal binding (not in dehydrated element)
+    }
+  }
+
+  // 3. All processing appears complete
+  return true;
+};
+
+/**
+ * Perform cleanup - remove vibe attribute to reveal content
+ * @param {Element} rootElement - Root element
+ * @param {String} attrName - Attribute name to remove (default: 'vibe')
+ * @param {Boolean} debug - Debug mode
+ */
+export const cleanup = (rootElement, attrName = 'vibe', debug = false) => {
+  // Force reflow
+  rootElement.offsetHeight;
+
+  // Remove vibe attribute
+  debugLog(PHASE_COMPLETE, `removing [${attrName}] attribute`, debug);
+  rootElement.removeAttribute(attrName);
+};

package/runtime/component.js

@@ -0,0 +1,116 @@
+import { debugLog } from './debug.js';
+import { PHASE_FETCH } from './constants.js';
+import { evalInScope } from './utils.js';
+
+// Helper to escape regex special characters
+const escapeRegex = (str) => str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+
+// Track pending fetches to cancel them if element is removed
+const pendingFetches = new WeakMap(); // element → AbortController
+
+// Cancel a pending fetch for a component element
+export const abortComponentFetch = (element) => {
+  const controller = pendingFetches.get(element);
+  if (controller) {
+    controller.abort();
+    pendingFetches.delete(element);
+  }
+};
+
+export const processComponent = (rootElement, onComplete, config = {}) => {
+  const debug = !!config?.debug;
+  const componentElements = rootElement.querySelectorAll('component');
+
+  if (componentElements.length === 0) {
+    if (onComplete) onComplete();
+    return;
+  }
+
+  // Process just the first element - MutationObserver will trigger next call
+  const el = componentElements[0];
+  const src = el.getAttribute('src');
+
+  if (!src) {
+    el.remove();
+    // Don't recursively call - let MutationObserver handle it
+    return;
+  }
+
+  // Capture children and props before fetching
+  const children = el.innerHTML.trim();
+  const props = {};
+  Array.from(el.attributes).forEach((attr) => {
+    if (attr.name !== 'src') {
+      props[attr.name] = attr.value;
+    }
+  });
+
+  // Create AbortController to cancel fetch if element is removed
+  const controller = new AbortController();
+  pendingFetches.set(el, controller);
+
+  fetch(src, { signal: controller.signal })
+    .then((r) => r.text())
+    .then((html) => {
+      // Transform the fetched HTML
+      let transformedHtml = html;
+
+      // Replace props
+      Object.entries(props).forEach(([propName, propValue]) => {
+        const bindingMatch = propValue.match(/^@\[(.+)\]$/);
+
+        if (bindingMatch) {
+          // Reactive prop: replace propName as word boundary
+          const path = bindingMatch[1];
+          const propPattern = new RegExp(`\\b${escapeRegex(propName)}\\b`, 'g');
+          transformedHtml = transformedHtml.replace(propPattern, path);
+        } else {
+          // Static prop: replace @[propName] with literal value
+          const propPattern = new RegExp(`@\\[${escapeRegex(propName)}\\]`, 'g');
+          transformedHtml = transformedHtml.replace(propPattern, propValue);
+        }
+      });
+
+      // Replace <slot></slot> with children
+      if (children) {
+        transformedHtml = transformedHtml.replace(/<slot><\/slot>/g, children);
+        transformedHtml = transformedHtml.replace(/<slot\s*\/>/g, children);
+      }
+
+      // Clean up pending fetch tracker
+      pendingFetches.delete(el);
+
+      // Set outerHTML - this triggers MutationObserver
+      // Check if element still has a parent (might have been removed during fetch)
+      if (el.parentNode) {
+        el.outerHTML = transformedHtml;
+        debugLog(PHASE_FETCH, src, debug);
+
+        // Force immediate processing of the mutation (MutationObserver is async, but we need sync)
+        // Use microtask to process right after outerHTML completes
+        if (config._forceSync && config._processMutations && config._observer) {
+          Promise.resolve().then(() => {
+            const pending = config._observer.takeRecords();
+            if (pending.length > 0) {
+              config._processMutations(pending);
+            }
+          });
+        }
+      }
+    })
+    .catch((error) => {
+      // Clean up pending fetch tracker
+      pendingFetches.delete(el);
+
+      // If fetch was aborted (element removed), silently skip
+      if (error.name === 'AbortError') {
+        return;
+      }
+
+      console.error('[vibe] Failed to load:', src, error);
+      if (el.parentNode) {
+        el.remove();
+      }
+      // Don't recursively call - let MutationObserver handle it
+    });
+};

package/{conditionals.js → runtime/conditionals.js}

@@ -2,20 +2,10 @@ import parse from './parse.js';
 import affected from './affected.js';
 import hydrate from './hydrate.js';
 import { createScopedState, renderAllIterations, initializeBlock } from './iterate.js';
+import { evalInScope } from './utils.js';
 
 // Evaluate conditional expression in state context
-const evaluateCondition = (expression, state) => {
-  try {
-    const keys = Object.keys(state);
-    const values = Object.values(state);
-    // Create a function with state keys as parameters and evaluate the expression
-    const result = new Function(...keys, `'use strict'; return !!(${expression})`)(...values);
-    return !!result; // Coerce to boolean
-  } catch (e) {
-    console.warn(`Error evaluating condition "${expression}":`, e);
-    return false; // Default to false on error
-  }
-};
+const evaluateCondition = (expression, state) => !!evalInScope(expression, state);
 
 // Extract state dependencies from an expression
 // e.g., "count > 5" → ["count"]
@@ -35,11 +25,13 @@ export const extractDependencies = (expression) => {
 };
 
 // Render all conditionals in the parsed tree
-export const renderAllConditionals = (tree, state, linkList, parentScope = {}) => {
+export const renderAllConditionals = (tree, state, manifest, parentScope = {}) => {
+  let count = 0;
+
   // If this is a conditional node, render it
   if (tree.type === 'conditional') {
-    renderConditional(tree, state, linkList, parentScope);
-    return;
+    renderConditional(tree, state, manifest, parentScope);
+    return 1;
   }
 
   // Recursively render conditionals in child nodes
@@ -47,16 +39,24 @@ export const renderAllConditionals = (tree, state, linkList, parentScope = {}) =
     Object.keys(tree.children).forEach((key) => {
       const child = tree.children[key];
       if (typeof child === 'object' && child !== null) {
-        renderAllConditionals(child, state, linkList, parentScope);
+        count += renderAllConditionals(child, state, manifest, parentScope);
       }
     });
   }
+
+  return count;
 };
 
 // Initial render of a conditional block
-export const renderConditional = (node, state, linkList, parentScope = {}) => {
+export const renderConditional = (node, state, manifest, parentScope = {}) => {
   const { expression, startComment, endComment, branches } = node.meta;
 
+  // Check if already rendered (using marker on comment node)
+  // @ts-ignore - adding custom property to comment node
+  if (startComment.__vibeRendered) {
+    return;
+  }
+
   // Remove original template nodes from DOM (between start and end comments)
   // Only do this on first render (when activeBranch is undefined)
   if (node.runtime.activeBranch === undefined) {
@@ -73,6 +73,10 @@ export const renderConditional = (node, state, linkList, parentScope = {}) => {
     node.runtime.templateRemoved = true;
   }
 
+  // Mark comment as rendered (survives re-parsing)
+  // @ts-ignore - adding custom property to comment node
+  startComment.__vibeRendered = true;
+
   // Evaluate condition with current state
   const conditionResult = evaluateCondition(expression, state);
 
@@ -80,14 +84,14 @@ export const renderConditional = (node, state, linkList, parentScope = {}) => {
   const branchToMount = conditionResult ? branches.if : branches.else;
 
   // Mount the appropriate branch
-  mountBranch(node, branchToMount, state, linkList, parentScope);
+  mountBranch(node, branchToMount, state, manifest, parentScope);
 
   // Store active branch reference
   node.runtime.activeBranch = branchToMount;
 };
 
 // Mount a specific branch
-const mountBranch = (node, branchData, state, linkList, parentScope) => {
+const mountBranch = (node, branchData, state, manifest, parentScope) => {
   const { startComment, endComment } = node.meta;
 
   // If branch doesn't exist (no else clause), just unmount current
@@ -119,8 +123,8 @@ const mountBranch = (node, branchData, state, linkList, parentScope) => {
 
   // Recursively render any nested iterations and conditionals
   if (branchTree) {
-    renderAllIterations(branchTree, scopedState, linkList);
-    renderAllConditionals(branchTree, scopedState, linkList, parentScope);
+    renderAllIterations(branchTree, scopedState, manifest, parentScope);
+    renderAllConditionals(branchTree, scopedState, manifest, parentScope);
   }
 
   // Store active instance
@@ -149,7 +153,7 @@ const unmountBranch = (node) => {
 };
 
 // Update conditional when dependencies change
-export const updateConditional = (node, newState, oldState, linkList, parentScope = {}) => {
+export const updateConditional = (node, newState, oldState, manifest, parentScope = {}) => {
   const { expression, branches } = node.meta;
 
   // If not yet rendered, skip (renderConditional handles initial render)
@@ -166,7 +170,7 @@ export const updateConditional = (node, newState, oldState, linkList, parentScop
 
   if (branchChanged) {
     // Switch branches
-    mountBranch(node, newBranchData, newState, linkList, parentScope);
+    mountBranch(node, newBranchData, newState, manifest, parentScope);
     node.runtime.activeBranch = newBranchData;
   } else {
     // Same branch, but state might have changed - rehydrate

package/{constants.js → runtime/constants.js}

@@ -1,5 +1,24 @@
+// Debug logger name
+export const DEBUGGER_NAME = '[vibe-debug]:';
+
+// Lifecycle phase names for debug logging
+// ONE-OFF operations (run once during initialization)
+export const PHASE_ATTACH = 'Attached'; // Latches onto DOM element (index.js)
+export const PHASE_MANIFEST = 'Manifested'; // Creates DOM manifest (manifest.js)
+export const PHASE_OBSERVE = 'Observer'; // Starts MutationObserver (index.js)
+export const PHASE_COMPLETE = 'Cleanup'; // Removes [vibe] attribute (index.js)
+
+// REPEATED operations (run during init + can repeat during runtime)
+export const PHASE_PARSE = 'Parsed'; // Reads DOM structure (parse.js)
+export const PHASE_HYDRATE = 'Hydrated'; // Replaces @[...] with values (hydrate.js)
+export const PHASE_ITERATE = 'Iterated'; // Renders <!-- each --> blocks (iterate.js)
+export const PHASE_CONDITION = 'Evaluated'; // Renders <!-- if --> blocks (conditionals.js)
+export const PHASE_FETCH = 'Fetched'; // Loads <component> content (component.js)
+export const PHASE_UPDATE = 'Proxy'; // State changes trigger re-hydration (index.js)
+export const PHASE_MUTATE = 'Mutation'; // DOM mutations detected by observer (index.js)
+
 // Elements that should not have reactive bindings
-export const NON_REACTIVE_ELEMENTS = ['SCRIPT', 'HEAD', 'PRE'];
+export const NON_REACTIVE_ELEMENTS = ['SCRIPT', 'HEAD', 'PRE', 'COMPONENT'];
 
 // Attributes where the string value is meaningful (should NOT be removed when falsy)
 // All other attributes are treated as boolean-like (removed when falsy, present when truthy)
@@ -138,10 +157,11 @@ export const VALUE_ATTRS = [
 export const DOM_PROPERTIES = ['value', 'checked', 'selected'];
 
 // Regex for matching reactive bindings (@[expression])
-export const BINDING_REGEX = /\@\[([^\]]+)\]/g;
+// Supports one level of nested brackets: @[items[0]] or @[obj[key]]
+export const BINDING_REGEX = /\@\[((?:[^\[\]]|\[[^\]]*\])+)\]/g;
 
 // Regex for detecting a pure binding (entire value is just @[expression])
-export const PURE_BINDING_REGEX = /^\@\[([^\]]+)\]$/;
+export const PURE_BINDING_REGEX = /^\@\[((?:[^\[\]]|\[[^\]]*\])+)\]$/;
 
 // Regex for parsing iteration comment syntax (<!-- each items as item, index -->)
 // Supports nested paths like category.items

package/runtime/debug.js

@@ -0,0 +1,91 @@
+import { DEBUGGER_NAME } from './constants.js';
+
+// Phase colors - synced with index.css debug phase colors
+// Muted palette based on comment green (#6a9955)
+const PHASE_COLORS = {
+  Attached: 'oklch(0.55 0.02 250)', // slate (minimal saturation)
+  Manifested: 'oklch(0.55 0.02 250)', // slate (minimal saturation)
+  Observer: 'oklch(0.60 0.11 240)', // muted blue
+  Cleanup: 'oklch(0.55 0.02 250)', // slate (minimal saturation)
+  Parsed: 'oklch(0.62 0.12 50)', // muted orange
+  Hydrated: 'oklch(0.60 0.12 340)', // muted pink
+  Iterated: 'oklch(0.58 0.11 142)', // comment green (baseline)
+  Evaluated: 'oklch(0.58 0.11 142)', // comment green (baseline)
+  Fetched: 'oklch(0.59 0.12 307)', // muted purple
+  Mutation: 'oklch(0.60 0.11 240)', // muted blue
+  Proxy: 'oklch(0.60 0.11 240)', // muted blue
+};
+
+// Special colors for styled segments (Tailwind 500)
+const COLORS = {
+  green: 'oklch(0.769 0.227 141.41)', // green-500
+  red: 'oklch(0.637 0.237 27.33)', // red-500
+  yellow: 'oklch(0.809 0.177 94.36)', // yellow-500
+  pink: 'oklch(0.649 0.237 346.06)', // pink-500
+  slate: 'oklch(0.556 0.016 256.85)', // slate-500
+  commentGreen: 'oklch(0.58 0.11 142)', // muted green (same as Iterated/Evaluated)
+};
+
+/**
+ * Debug logging helper for Vibe
+ * Only logs when debug mode is enabled
+ * @param {string} phase - The lifecycle phase (Attach, Parse, Hydrate, etc.)
+ * @param {string|Array} message - The message to log (string or array of {text, colored: boolean, color: string})
+ * @param {boolean} debug - Whether debug mode is enabled
+ * @param {number} indent - Indentation level (0 = no indent, 1+ = nested operations)
+ * @param {HTMLElement} element - Optional DOM element to log (becomes clickable in console)
+ */
+export const debugLog = (phase, message, debug = false, indent = 0, element = null) => {
+  if (!debug) return;
+
+  const phaseBracket = `[${phase}] `.padEnd(13, ' '); // Pad to 13 chars (longest is "[Manifested] ")
+  const indentStr = indent > 0 ? '  '.repeat(indent) + '├─ ' : '';
+  const phaseColor = PHASE_COLORS[phase] || 'oklch(0.55 0.02 250)';
+
+  // Handle array of styled segments
+  if (Array.isArray(message)) {
+    let formatStr = `%c${phaseBracket}%c${DEBUGGER_NAME}%c ${indentStr}`;
+    const styles = [
+      `color: ${phaseColor}; font-weight: bold`,
+      'color: oklch(0.70 0.01 250)',
+      'color: inherit',
+    ];
+
+    message.forEach((segment) => {
+      formatStr += '%c' + segment.text;
+      // Support both 'colored' (uses phase color) and 'color' (uses specific color)
+      if (segment.color) {
+        styles.push(`color: ${COLORS[segment.color] || segment.color}; font-weight: bold`);
+      } else if (segment.colored) {
+        styles.push(`color: ${phaseColor}; font-weight: bold`);
+      } else {
+        styles.push('color: inherit');
+      }
+    });
+
+    // Add element if provided (makes it clickable in console)
+    if (element) {
+      console.info(formatStr, ...styles, element);
+    } else {
+      console.info(formatStr, ...styles);
+    }
+  } else {
+    // Simple string message
+    if (element) {
+      console.info(
+        `%c${phaseBracket}%c${DEBUGGER_NAME}%c ${indentStr}${message}`,
+        `color: ${phaseColor}; font-weight: bold`,
+        'color: oklch(0.70 0.01 250)', // light gray
+        'color: inherit',
+        element,
+      );
+    } else {
+      console.info(
+        `%c${phaseBracket}%c${DEBUGGER_NAME}%c ${indentStr}${message}`,
+        `color: ${phaseColor}; font-weight: bold`,
+        'color: oklch(0.70 0.01 250)', // light gray
+        'color: inherit',
+      );
+    }
+  }
+};

package/{hydrate.js → runtime/hydrate.js}

@@ -1,6 +1,7 @@
 import { updateIteration } from './iterate.js';
 import { updateConditional } from './conditionals.js';
 import { VALUE_ATTRS, DOM_PROPERTIES, BINDING_REGEX, PURE_BINDING_REGEX } from './constants.js';
+import { evalInScope } from './utils.js';
 
 // Keep track of old state for diffing
 let previousState = {};
@@ -9,30 +10,67 @@ export const setPreviousState = (state) => {
   previousState = { ...state };
 };
 
-// Evaluate expression in the context of state
-const evalInScope = (expr, state) => {
-  try {
-    const keys = Object.keys(state);
-    const values = Object.values(state);
-    // Create a function with state keys as parameters and evaluate the expression
-    return new Function(...keys, `'use strict'; return (${expr})`)(...values);
-  } catch (e) {
-    // Fallback to undefined if evaluation fails
-    return undefined;
-  }
-};
-
-export default (affected, state, linkList = {}) => {
+export default (affected, state, manifest = {}) => {
   affected.forEach((aff) => {
+    // Use scoped state if provided (from iteration instances)
+    const effectiveState = aff.scopedState || state;
+
     // Handle iteration updates
     if (aff.type === 'iteration') {
-      updateIteration(aff.node, state, previousState, linkList);
+      updateIteration(aff.node, state, previousState, manifest);
       return;
     }
 
     // Handle conditional updates
     if (aff.type === 'conditional') {
-      updateConditional(aff.node, state, previousState, linkList);
+      updateConditional(aff.node, state, previousState, manifest);
+      return;
+    }
+
+    // Handle name bindings (e.g., <icon @[section.icon]>)
+    if (aff.type === 'nameBinding') {
+      const { nameBinding, matchInner, element } = aff;
+      try {
+        // HTML lowercases attribute names, so we need case-insensitive lookup
+        // Try exact match first, then try finding a case-insensitive match
+        let attrName = evalInScope(matchInner, effectiveState);
+
+        // If exact match failed and expression is a simple property (no dots/brackets)
+        if (!attrName && !matchInner.includes('.') && !matchInner.includes('[')) {
+          // Find the property with case-insensitive match
+          const keys = Object.keys(effectiveState);
+          const matchingKey = keys.find(k => k.toLowerCase() === matchInner.toLowerCase());
+          if (matchingKey) {
+            attrName = effectiveState[matchingKey];
+          }
+        }
+
+        // Track multiple name bindings per element (need a map of binding -> evaluated attr)
+        if (!element._vibeNameBindings) {
+          element._vibeNameBindings = new Map();
+        }
+
+        // Remove the old evaluated attribute for this specific binding
+        const oldAttrName = element._vibeNameBindings.get(nameBinding);
+        if (oldAttrName) {
+          element.removeAttribute(oldAttrName);
+        }
+
+        // Remove the binding attribute itself
+        if (element.hasAttribute(nameBinding)) {
+          element.removeAttribute(nameBinding);
+        }
+
+        // Set the new attribute (empty value for boolean-like attributes)
+        if (attrName) {
+          element.setAttribute(attrName, '');
+          element._vibeNameBindings.set(nameBinding, attrName);
+        } else {
+          element._vibeNameBindings.delete(nameBinding);
+        }
+      } catch (e) {
+        console.error('Error hydrating name binding:', e);
+      }
       return;
     }
 
@@ -53,12 +91,12 @@ export default (affected, state, linkList = {}) => {
         if (isDomProperty && isPureBinding) {
           // For DOM properties like value, set the property directly
           const expr = isPureBinding[1];
-          const value = evalInScope(expr, state);
+          const value = evalInScope(expr, effectiveState);
           element[attrName] = value;
         } else if (!isValueAttr && isPureBinding) {
           // Boolean-like attributes: add or remove based on truthiness
           const expr = isPureBinding[1];
-          const value = evalInScope(expr, state);
+          const value = evalInScope(expr, effectiveState);
           if (value) {
             element.setAttribute(attrName, '');
           } else {
@@ -67,7 +105,7 @@ export default (affected, state, linkList = {}) => {
         } else {
           // Value attribute - replace bindings with values
           const newValue = attrValue.replace(BINDING_REGEX, (_, expr) => {
-            return evalInScope(expr, state);
+            return evalInScope(expr, effectiveState);
           });
           element.setAttribute(attrName, newValue);
         }
@@ -81,7 +119,7 @@ export default (affected, state, linkList = {}) => {
     // This prevents undefined store properties to throw an error
     try {
       // Evaluate the expression with state as context
-      const evaluated = evalInScope(matchInner, state);
+      const evaluated = evalInScope(matchInner, effectiveState);
 
       const toReplace = input.replaceAll(matchOuter, evaluated).trim();