@ape-egg/vibe 1.1.2 → 1.3.0

package/runtime/affected.js

@@ -1,19 +1,25 @@
 import { resolvePath, deepEqual } from './iteration-utils.js';
 import { extractDependencies } from './conditionals.js';
 import { BINDING_REGEX } from './constants.js';
-import { evalInScope } from './utils.js';
+import { evalInScope, resolveThisPath } from './utils.js';
 
 // Evaluate conditional expression
-const evaluateCondition = (expression, state) => !!evalInScope(expression, state);
+const evaluateCondition = (expression, state, element = null) => !!evalInScope(expression, state, element);
 
 // Helper function to check if a match references a specific key
-const matchesKey = (matchStr, key) => matchStr === key || matchStr.startsWith(key + '.');
+const matchesKey = (matchStr, key) =>
+  matchStr === key ||
+  matchStr.startsWith(key + '.') ||
+  matchStr.startsWith(key + '[');
 
-const recursive = (tree, state, newState, affected, scopedStateForHydration = null) => {
+const recursive = (tree, state, newState, affected, scopedStateForHydration = null, depth = 0) => {
   // Handle iteration nodes specially
   if (tree.type === 'iteration') {
-    const oldArray = resolvePath(state, tree.meta.arrayPath);
-    const newArray = resolvePath(newState, tree.meta.arrayPath);
+    // Handle this.property for component-scoped arrays
+    const arrayPath = resolveThisPath(tree.meta.arrayPath, tree.meta.startComment?.parentElement);
+
+    const oldArray = resolvePath(state, arrayPath);
+    const newArray = resolvePath(newState, arrayPath);
 
     // Fast path: reference comparison (arrays are typically replaced, not mutated)
     // This avoids expensive O(n) deepEqual for large arrays
@@ -34,7 +40,8 @@ const recursive = (tree, state, newState, affected, scopedStateForHydration = nu
           // 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);
+          // Pass the Proxy as scopedState so evalInScope can access iteration variables
+          recursive(instance.tree, instance.scopedState, mergedNewState, affected, instance.scopedState, depth + 1);
         }
       }
     }
@@ -44,8 +51,8 @@ const recursive = (tree, state, newState, affected, scopedStateForHydration = nu
 
   // Handle conditional nodes specially
   if (tree.type === 'conditional') {
-    const oldValue = evaluateCondition(tree.meta.expression, state);
-    const newValue = evaluateCondition(tree.meta.expression, newState);
+    const oldValue = evaluateCondition(tree.meta.expression, state, tree.meta.startComment?.parentElement);
+    const newValue = evaluateCondition(tree.meta.expression, newState, tree.meta.startComment?.parentElement);
 
     // Check if condition result changed
     if (oldValue !== newValue) {
@@ -59,7 +66,7 @@ const recursive = (tree, state, newState, affected, scopedStateForHydration = nu
 
     // 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, scopedStateForHydration);
+      return recursive(tree.runtime.activeInstance.parsedTree, state, newState, affected, scopedStateForHydration, depth + 1);
     }
 
     return affected;
@@ -83,21 +90,24 @@ const recursive = (tree, state, newState, affected, scopedStateForHydration = nu
     const checkedMatches = [];
 
     for (const m of matches) {
-      const noMatch = !shallowState.some((key) => matchesKey(m.inner, key));
+      // Resolve this.property to componentId.property
+      const resolvedInner = resolveThisPath(m.inner, tree.element);
+
+      const noMatch = !shallowState.some((key) => matchesKey(resolvedInner, key));
 
       let shouldAffect = false;
       let relevantKeys = [];
 
       if (isInitialHydration) {
         // Initial hydration: affect all matched keys
-        relevantKeys = shallowNewState.filter((key) => matchesKey(m.inner, key));
+        relevantKeys = shallowNewState.filter((key) => matchesKey(resolvedInner, key));
         shouldAffect = noMatch || relevantKeys.length > 0;
       } else {
         // Update: only affect if value changed
         const changedKeys = shallowNewState.filter((key) =>
-          matchesKey(m.inner, key) && state[key] !== newState[key]
+          matchesKey(resolvedInner, key) && state[key] !== newState[key]
         );
-        relevantKeys = changedKeys.length > 0 ? changedKeys : shallowState.filter((key) => matchesKey(m.inner, key));
+        relevantKeys = changedKeys.length > 0 ? changedKeys : shallowState.filter((key) => matchesKey(resolvedInner, key));
         shouldAffect = noMatch || changedKeys.length > 0;
       }
 
@@ -119,6 +129,7 @@ const recursive = (tree, state, newState, affected, scopedStateForHydration = nu
           input: m.input,
           matches: m.matches,
           element: tree.element,
+          textNode: tree.textNode, // Reference to specific text node (prevents wiping children)
           scopedState: scopedStateForHydration, // Pass scoped state from iteration context
         });
       }
@@ -140,18 +151,21 @@ const recursive = (tree, state, newState, affected, scopedStateForHydration = nu
       }
 
       for (const m of attrMatches) {
-        const noMatch = !shallowState.some((key) => matchesKey(m.inner, key));
+        // Resolve this.property to componentId.property
+        const resolvedInner = resolveThisPath(m.inner, tree.element);
+
+        const noMatch = !shallowState.some((key) => matchesKey(resolvedInner, key));
 
         let shouldAffect = false;
 
         if (isInitialHydration) {
           // Initial hydration: affect all matched keys
-          const newMatches = shallowNewState.filter((key) => matchesKey(m.inner, key));
+          const newMatches = shallowNewState.filter((key) => matchesKey(resolvedInner, key));
           shouldAffect = noMatch || newMatches.length > 0;
         } else {
           // Update: only affect if value changed
           const changedKeys = shallowNewState.filter((key) =>
-            matchesKey(m.inner, key) && state[key] !== newState[key]
+            matchesKey(resolvedInner, key) && state[key] !== newState[key]
           );
           shouldAffect = noMatch || changedKeys.length > 0;
         }
@@ -162,7 +176,7 @@ const recursive = (tree, state, newState, affected, scopedStateForHydration = nu
             attrName,
             attrValue,
             matchOuter: m.outer,
-            matchInner: m.inner,
+            matchInner: m.inner, // Keep original, evalInScope will resolve this.
             element: tree.element,
             scopedState: scopedStateForHydration, // Pass scoped state from iteration context
           });
@@ -186,16 +200,19 @@ const recursive = (tree, state, newState, affected, scopedStateForHydration = nu
       }
 
       for (const m of nameMatches) {
-        const noMatch = !shallowState.some((key) => matchesKey(m.inner, key));
+        // Resolve this.property to componentId.property
+        const resolvedInner = resolveThisPath(m.inner, tree.element);
+
+        const noMatch = !shallowState.some((key) => matchesKey(resolvedInner, key));
 
         let shouldAffect = false;
 
         if (isInitialHydration) {
-          const newMatches = shallowNewState.filter((key) => matchesKey(m.inner, key));
+          const newMatches = shallowNewState.filter((key) => matchesKey(resolvedInner, key));
           shouldAffect = noMatch || newMatches.length > 0;
         } else {
           const changedKeys = shallowNewState.filter((key) =>
-            matchesKey(m.inner, key) && state[key] !== newState[key]
+            matchesKey(resolvedInner, key) && state[key] !== newState[key]
           );
           shouldAffect = noMatch || changedKeys.length > 0;
         }
@@ -205,7 +222,7 @@ const recursive = (tree, state, newState, affected, scopedStateForHydration = nu
             type: 'nameBinding',
             nameBinding,
             matchOuter: m.outer,
-            matchInner: m.inner,
+            matchInner: m.inner, // Keep original, evalInScope will resolve this.
             element: tree.element,
             scopedState: scopedStateForHydration,
           });
@@ -220,7 +237,7 @@ const recursive = (tree, state, newState, affected, scopedStateForHydration = nu
     for (const key in children) {
       const child = children[key];
       if (child && typeof child === 'object') {
-        recursive(child, state, newState, affected, scopedStateForHydration);
+        recursive(child, state, newState, affected, scopedStateForHydration, depth + 1);
       }
     }
   }
@@ -228,4 +245,7 @@ const recursive = (tree, state, newState, affected, scopedStateForHydration = nu
   return affected;
 };
 
-export default (tree, state, newState) => recursive(tree, state, newState, [], null);
+export default (tree, state, newState) => {
+  const affected = recursive(tree, state, newState, [], null, 0);
+  return affected;
+};

package/runtime/cleanup.js

@@ -1,5 +1,5 @@
 import { debugLog } from './debug.js';
-import { PHASE_COMPLETE } from './constants.js';
+import { PHASE_READY, FOUC_CLASS_OR_ATTR } from './constants.js';
 
 /**
  * Check if all Vibe processing is complete and cleanup can run
@@ -7,30 +7,27 @@ import { PHASE_COMPLETE } from './constants.js';
  * @returns {Boolean} - true if cleanup should run
  */
 export const shouldCleanup = (rootElement) => {
-  // 1. Check for pending <component> elements
-  const componentElements = rootElement.querySelectorAll('component');
+  // 1. Check for pending <component> elements (only those with src - fetched components)
+  // Inline component wrappers (<component> without src) are fine to remain
+  const componentElements = rootElement.querySelectorAll('component[src], div.component[src]');
   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;
+  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
         }
-        return NodeFilter.FILTER_ACCEPT;
+        parent = parent.parentElement;
       }
-    }
-  );
+      return NodeFilter.FILTER_ACCEPT;
+    },
+  });
 
   let node;
   while ((node = walker.nextNode())) {
@@ -44,16 +41,40 @@ export const shouldCleanup = (rootElement) => {
 };
 
 /**
- * Perform cleanup - remove vibe attribute to reveal content
+ * Perform cleanup - remove attribute or class from all matching elements
  * @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) => {
+export const cleanup = (rootElement, debug = false) => {
   // Force reflow
   rootElement.offsetHeight;
 
-  // Remove vibe attribute
-  debugLog(PHASE_COMPLETE, `removing [${attrName}] attribute`, debug);
-  rootElement.removeAttribute(attrName);
+  // Determine if selector is a class (starts with .) or attribute (default)
+  const isClass = FOUC_CLASS_OR_ATTR.startsWith('.');
+  const cleanName = FOUC_CLASS_OR_ATTR.replace(/^\./, '').replace(/^\[/, '').replace(/\]$/, '');
+
+  if (isClass) {
+    // Remove class from all elements in document that have it
+    const elements = document.querySelectorAll(`.${cleanName}`);
+    elements.forEach((el) => el.classList.remove(cleanName));
+    debugLog(PHASE_READY, `removing .${cleanName} class from ${elements.length} elements`, debug);
+  } else {
+    // Remove attribute from all elements in document that have it
+    const elements = document.querySelectorAll(`[${cleanName}]`);
+    elements.forEach((el) => el.removeAttribute(cleanName));
+    debugLog(
+      PHASE_READY,
+      `removing [${cleanName}] attribute from ${elements.length} elements`,
+      debug,
+    );
+  }
+
+  // Dispatch ready event to signal that Vibe has completed all initial processing
+  if (typeof document !== 'undefined') {
+    document.dispatchEvent(
+      new CustomEvent('vibe:ready', {
+        detail: { rootElement, cleanName, isClass },
+      }),
+    );
+  }
 };

package/runtime/component-state.js

@@ -0,0 +1,63 @@
+// Shared utility for processing component state
+
+/**
+ * Generate unique component ID
+ */
+export const generateComponentId = () => {
+  return `_c${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+};
+
+/**
+ * Transform variable declarations to property assignments
+ * let count = 0; → this.count = 0;
+ */
+const transformDeclarations = (code) => {
+  return code
+    // Transform: let varName = value;
+    .replace(/\b(let|const|var)\s+(\w+)\s*=\s*([^;]+);/g, 'this.$2 = $3;')
+    // Transform: let varName;
+    .replace(/\b(let|const|var)\s+(\w+)\s*;/g, 'this.$2 = undefined;');
+};
+
+/**
+ * Execute component script and return state object
+ * @param {string} scriptContent - JavaScript code to execute
+ * @returns {object} - Component state object
+ */
+export const executeComponentScript = (scriptContent) => {
+  const componentState = {};
+
+  if (!scriptContent || !scriptContent.trim()) {
+    return componentState;
+  }
+
+  try {
+    // Transform declarations to property assignments
+    const transformed = transformDeclarations(scriptContent);
+
+    // Execute script with 'this' = componentState
+    const fn = new Function(transformed);
+    fn.call(componentState);
+
+  } catch (error) {
+    console.error('[vibe] Error executing component script:', error);
+    console.error('[vibe] Script content:', scriptContent);
+  }
+
+  return componentState;
+};
+
+/**
+ * Register component state in global store
+ * @param {string} componentId - Unique component identifier
+ * @param {object} state - Component state object
+ * @param {object} globalState - Global $ object
+ */
+export const registerComponentState = (componentId, state, globalState) => {
+  if (!globalState[componentId]) {
+    globalState[componentId] = state;
+  } else {
+    // Component already registered, merge new state
+    Object.assign(globalState[componentId], state);
+  }
+};

package/runtime/component.js

@@ -1,6 +1,7 @@
 import { debugLog } from './debug.js';
 import { PHASE_FETCH } from './constants.js';
 import { evalInScope } from './utils.js';
+import { generateComponentId, executeComponentScript } from './component-state.js';
 
 // Helper to escape regex special characters
 const escapeRegex = (str) => str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
@@ -19,7 +20,10 @@ export const abortComponentFetch = (element) => {
 
 export const processComponent = (rootElement, onComplete, config = {}) => {
   const debug = !!config?.debug;
-  const componentElements = rootElement.querySelectorAll('component');
+  // Only process component elements with src attribute (fetched components)
+  // Supports: <component src="..."> and <div class="component" src="...">
+  // Ignores: <component> and <div class="component"> (inline component wrappers)
+  const componentElements = rootElement.querySelectorAll('component[src], div.component[src]');
 
   if (componentElements.length === 0) {
     if (onComplete) onComplete();
@@ -30,12 +34,6 @@ export const processComponent = (rootElement, onComplete, config = {}) => {
   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 = {};
@@ -52,18 +50,54 @@ export const processComponent = (rootElement, onComplete, config = {}) => {
   fetch(src, { signal: controller.signal })
     .then((r) => r.text())
     .then((html) => {
-      // Transform the fetched HTML
-      let transformedHtml = html;
+      // Parse HTML in temporary container to process component scripts
+      const temp = document.createElement('div');
+      temp.innerHTML = html;
+
+      // Process any <script type="component"> elements
+      const componentScripts = temp.querySelectorAll('script[type="component"]');
+      componentScripts.forEach((script) => {
+        const scriptContent = script.textContent?.trim() || '';
+        if (!scriptContent) return;
+
+        // Generate component ID
+        const componentId = generateComponentId();
+
+        // Tag script element
+        script.setAttribute('data-vibe-component-id', componentId);
+
+        // Tag following siblings with this component ID
+        let sibling = script.nextElementSibling;
+        while (sibling) {
+          // Stop if we hit another component script
+          if (sibling.tagName === 'SCRIPT' && sibling.getAttribute('type') === 'component') {
+            break;
+          }
+          sibling.setAttribute('data-vibe-component-id', componentId);
+          sibling = sibling.nextElementSibling;
+        }
+
+        // Execute component script to get state
+        const componentState = executeComponentScript(scriptContent);
+
+        // Register in global state
+        if (window.$) {
+          window.$[componentId] = componentState;
+        }
+      });
+
+      // Get transformed HTML from temp container
+      let transformedHtml = temp.innerHTML;
 
       // Replace props
       Object.entries(props).forEach(([propName, propValue]) => {
         const bindingMatch = propValue.match(/^@\[(.+)\]$/);
 
         if (bindingMatch) {
-          // Reactive prop: replace propName as word boundary
+          // Reactive prop: replace @[propName] with @[path]
           const path = bindingMatch[1];
-          const propPattern = new RegExp(`\\b${escapeRegex(propName)}\\b`, 'g');
-          transformedHtml = transformedHtml.replace(propPattern, path);
+          const propPattern = new RegExp(`@\\[${escapeRegex(propName)}\\]`, 'g');
+          transformedHtml = transformedHtml.replace(propPattern, `@[${path}]`);
         } else {
           // Static prop: replace @[propName] with literal value
           const propPattern = new RegExp(`@\\[${escapeRegex(propName)}\\]`, 'g');
@@ -80,14 +114,24 @@ export const processComponent = (rootElement, onComplete, config = {}) => {
       // Clean up pending fetch tracker
       pendingFetches.delete(el);
 
-      // Set outerHTML - this triggers MutationObserver
+      // Replace with clean component wrapper (no src, no props)
       // Check if element still has a parent (might have been removed during fetch)
       if (el.parentNode) {
-        el.outerHTML = transformedHtml;
+        // Create clean wrapper element (preserve tag type: component or div.component)
+        const newWrapper = el.tagName === 'DIV'
+          ? document.createElement('div')
+          : document.createElement('component');
+
+        if (el.tagName === 'DIV') {
+          newWrapper.className = 'component';
+        }
+
+        newWrapper.innerHTML = transformedHtml;
+        el.replaceWith(newWrapper);
         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
+        // Use microtask to process right after replaceWith completes
         if (config._forceSync && config._processMutations && config._observer) {
           Promise.resolve().then(() => {
             const pending = config._observer.takeRecords();

package/runtime/conditionals.js

@@ -5,7 +5,7 @@ import { createScopedState, renderAllIterations, initializeBlock } from './itera
 import { evalInScope } from './utils.js';
 
 // Evaluate conditional expression in state context
-const evaluateCondition = (expression, state) => !!evalInScope(expression, state);
+const evaluateCondition = (expression, state, element = null) => !!evalInScope(expression, state, element);
 
 // Extract state dependencies from an expression
 // e.g., "count > 5" → ["count"]
@@ -78,7 +78,7 @@ export const renderConditional = (node, state, manifest, parentScope = {}) => {
   startComment.__vibeRendered = true;
 
   // Evaluate condition with current state
-  const conditionResult = evaluateCondition(expression, state);
+  const conditionResult = evaluateCondition(expression, state, startComment.parentElement);
 
   // Determine which branch to mount
   const branchToMount = conditionResult ? branches.if : branches.else;
@@ -154,7 +154,7 @@ const unmountBranch = (node) => {
 
 // Update conditional when dependencies change
 export const updateConditional = (node, newState, oldState, manifest, parentScope = {}) => {
-  const { expression, branches } = node.meta;
+  const { expression, branches, startComment } = node.meta;
 
   // If not yet rendered, skip (renderConditional handles initial render)
   if (!node.runtime.templateRemoved) {
@@ -162,7 +162,7 @@ export const updateConditional = (node, newState, oldState, manifest, parentScop
   }
 
   // Evaluate expression with new state
-  const newConditionResult = evaluateCondition(expression, newState);
+  const newConditionResult = evaluateCondition(expression, newState, startComment?.parentElement);
   const newBranchData = newConditionResult ? branches.if : branches.else;
 
   // Check if branch changed (compare references)

package/runtime/constants.js

@@ -1,12 +1,13 @@
 // Debug logger name
 export const DEBUGGER_NAME = '[vibe-debug]:';
+export const FOUC_CLASS_OR_ATTR = 'vibe-fouc'; // Class or attribute used to prevent FOUC (default: [vibe])
 
 // 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)
+export const PHASE_READY = 'Ready'; // Removes [vibe-fouc] attribute (or .vibe-fouc class) and dispatches vibe:ready event (cleanup.js)
 
 // REPEATED operations (run during init + can repeat during runtime)
 export const PHASE_PARSE = 'Parsed'; // Reads DOM structure (parse.js)
@@ -16,9 +17,12 @@ export const PHASE_CONDITION = 'Evaluated'; // Renders <!-- if --> blocks (condi
 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)
+export const PHASE_HYPERSPEED = 'Hyperspeed'; // Restores @[...] markers from pre-compiled manifest (hyperspeed.js)
 
 // Elements that should not have reactive bindings
-export const NON_REACTIVE_ELEMENTS = ['SCRIPT', 'HEAD', 'PRE', 'COMPONENT'];
+// Note: COMPONENT is NOT in this list - inline component wrappers need to be parsed
+// Fetched components (<component src="">) are handled separately by processComponent()
+export const NON_REACTIVE_ELEMENTS = ['SCRIPT', 'HEAD', 'PRE'];
 
 // 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)
@@ -156,6 +160,46 @@ export const VALUE_ATTRS = [
 // Properties that should be set directly on the DOM element (not as attributes)
 export const DOM_PROPERTIES = ['value', 'checked', 'selected'];
 
+// DOM element properties that should NOT be rewritten in event handlers
+// When parsing onclick="this.value = this.inputValue", preserve this.value (DOM) but rewrite this.inputValue (component state)
+export const DOM_ELEMENT_PROPERTIES = new Set([
+  'value',
+  'checked',
+  'selected',
+  'disabled',
+  'readOnly',
+  'files',
+  'tagName',
+  'nodeName',
+  'nodeType',
+  'classList',
+  'className',
+  'id',
+  'innerHTML',
+  'outerHTML',
+  'textContent',
+  'innerText',
+  'parentElement',
+  'parentNode',
+  'nextSibling',
+  'previousSibling',
+  'firstChild',
+  'lastChild',
+  'children',
+  'childNodes',
+  'offsetWidth',
+  'offsetHeight',
+  'clientWidth',
+  'clientHeight',
+  'scrollTop',
+  'scrollLeft',
+  'scrollWidth',
+  'scrollHeight',
+  'style',
+  'dataset',
+  'attributes',
+]);
+
 // Regex for matching reactive bindings (@[expression])
 // Supports one level of nested brackets: @[items[0]] or @[obj[key]]
 export const BINDING_REGEX = /\@\[((?:[^\[\]]|\[[^\]]*\])+)\]/g;

package/runtime/debug.js

@@ -14,6 +14,7 @@ const PHASE_COLORS = {
   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
+  Hyperspeed: 'oklch(0.60 0.11 180)', // muted cyan
 };
 
 // Special colors for styled segments (Tailwind 500)