mutts 1.0.12 → 1.0.14

package/dist/debug.cjs

@@ -1,25 +1,23 @@
 'use strict';
 
-var proxy = require('./chunks/proxy-BvM4yewA.cjs');
+var proxy = require('./chunks/proxy-HA_QQnd5.cjs');
 
 var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
 const lineageObjects = new WeakSet();
-/**
- * Checks if an object is a lineage object
- */
+const lineageSegmentObjects = new WeakSet();
+const lineageFrameObjects = new WeakSet();
 function isLineage(obj) {
-    return obj && typeof obj === 'object' && lineageObjects.has(obj);
+    return !!obj && typeof obj === 'object' && lineageObjects.has(obj);
 }
-/**
- * Parses a single stack line into a structured frame.
- * @param line - A line from Error.stack
- */
+function isLineageSegmentView(obj) {
+    return !!obj && typeof obj === 'object' && lineageSegmentObjects.has(obj);
+}
+function isLineageFrameView(obj) {
+    return !!obj && typeof obj === 'object' && lineageFrameObjects.has(obj);
+}
+let internalFile;
 function parseStackLine(line) {
-    // Node.js format: "    at functionName (file:line:column)"
-    // or "    at file:line:column"
     const nodeMatch = line.match(/^\s*at\s+(?:(.+?)\s+\()?(?:(.+?):(\d+):(\d+))\)?$/);
-    // Browser format (Firefox/Safari): "functionName@file:line:column" or "file:line:column"
-    // Chrome/Edge use Node-like format but without "at" sometimes or with different prefixes
     const browserMatch = line.match(/(?:(.+?)(?:\@|\(?))?(?:(.+?):(\d+):(\d+))(?:\@|\)?)$/);
     const match = nodeMatch || browserMatch;
     if (!match)
@@ -33,16 +31,23 @@ function parseStackLine(line) {
         raw: line.trim(),
     };
 }
-let internalFile;
-/**
- * Gets the current call stack
- * @param skipFrames - Number of frames to skip
- * @param error - Optional error to use as source of stack
- */
-function getStackFrame(error = new Error()) {
-    if (!error.stack)
+function extractRawStack(error = new Error()) {
+    if (typeof error === 'string')
+        return error;
+    if (error && typeof error === 'object' && 'stack' in error) {
+        const stack = error.stack;
+        return typeof stack === 'string' ? stack : undefined;
+    }
+    return undefined;
+}
+function getStackFrame(error) {
+    return extractRawStack(error);
+}
+function parseStackFrames(stack) {
+    const rawStack = extractRawStack(stack);
+    if (!rawStack)
         return [];
-    const lines = error.stack.split('\n');
+    const lines = rawStack.split('\n');
     const lastLine = lines.findIndex((line) => line.includes(proxy.effectMarker.enter));
     if (lastLine !== -1)
         lines.splice(lastLine);
@@ -50,150 +55,164 @@ function getStackFrame(error = new Error()) {
     if (firstLine !== -1)
         lines.splice(0, firstLine + 1);
     else {
-        // Dynamically identify the library's internal files if not already done
         if (!internalFile && lines[1]) {
             const selfFrame = parseStackLine(lines[1]);
-            if (selfFrame) {
+            if (selfFrame)
                 internalFile = selfFrame.fileName;
-            }
         }
-        // Determine the "base" directory of the library to skip other internal files
-        // We look for "src" or "dist" to be more specific than just the project root
-        const srcIndex = internalFile ? internalFile.lastIndexOf('/src/') : -1;
-        const distIndex = internalFile ? internalFile.lastIndexOf('/dist/') : -1;
-        internalFile ? (srcIndex !== -1 ? internalFile.substring(0, srcIndex + 5) :
-            (distIndex !== -1 ? internalFile.substring(0, distIndex + 6) :
-                internalFile.substring(0, internalFile.lastIndexOf('/') + 1))) : undefined;
-        let l;
-        for (l = 1; l < lines.length; l++) {
+        let l = 1;
+        for (; l < lines.length; l++) {
             const frame = parseStackLine(lines[l]);
             if (!frame)
                 continue;
-            // Robust skipping: if we are still in the internal area, skip it.
             const isInternal = /Lineage$/.test(frame.functionName) ||
                 frame.functionName === 'eval' ||
-                [`getStackFrame`, `captureLineage`].includes(frame.functionName);
+                [`getStackFrame`, `captureLineage`, `getLineage`, `digestLineage`, `formatLineage`].includes(frame.functionName);
             if (!isInternal)
                 break;
         }
         lines.splice(0, l);
     }
-    return lines.map(parseStackLine).filter(Boolean);
+    return filterNodeModules(lines.map(parseStackLine).filter((frame) => !!frame));
 }
-/**
- * Traces the lineage of the current execution through nested effects
- * @param effect - Starting effect (defaults to active effect)
- */
-function getLineage(effect, currentStack = getStackFrame()) {
-    const currentEffect = effect ?? proxy.getActiveEffect();
+function filterNodeModules(frames) {
+    const result = [];
+    let inNodeModules = false;
+    for (const frame of frames) {
+        const isNodeModule = frame.fileName.includes('/node_modules/');
+        if (isNodeModule && !inNodeModules) {
+            inNodeModules = true;
+            result.push({
+                functionName: '...node_modules...',
+                fileName: '[filtered]',
+                lineNumber: 0,
+                columnNumber: 0,
+                raw: 'at ...node_modules...',
+            });
+            continue;
+        }
+        if (!isNodeModule && inNodeModules)
+            inNodeModules = false;
+        if (!isNodeModule)
+            result.push(frame);
+    }
+    return result;
+}
+function formatEffectPreview(effect) {
+    if (!effect)
+        return 'root';
+    return `[effect ${effect.name || 'anonymous'}]`;
+}
+function formatSegmentTitle(segment, index, total) {
+    const isLast = index === total - 1;
+    const prefix = index === 0 ? '📍' : isLast ? '└─' : '├─';
+    return `${prefix} Effect: ${segment.effect?.name || 'root'}`;
+}
+function wrapLineageSegmentView(segment, index, total) {
+    const view = { index, total, segment };
+    lineageSegmentObjects.add(view);
+    return view;
+}
+function wrapLineageFrameView(frame) {
+    const view = { frame };
+    lineageFrameObjects.add(view);
+    return view;
+}
+function formatLocationHref(frame) {
+    return `${frame.fileName}:${frame.lineNumber}:${frame.columnNumber}`;
+}
+function ensureSignature(signature) {
+    if (!isLineage(signature)) {
+        Object.defineProperty(signature, 'toString', {
+            value: () => formatLineage(signature),
+            enumerable: false,
+            configurable: true,
+        });
+        lineageObjects.add(signature);
+    }
+    return signature;
+}
+function getLineage(effect, currentStack = new Error()) {
+    return ensureSignature({
+        effect: effect ?? proxy.getActiveEffect(),
+        stack: currentStack,
+        toString() {
+            return formatLineage(this);
+        },
+    });
+}
+function captureLineage(effect, currentStack) {
+    return getLineage(effect, currentStack ?? new Error());
+}
+function digestLineage(lineage) {
+    if (lineage.digested)
+        return lineage.digested;
+    const currentEffect = lineage.effect;
+    const currentStack = parseStackFrames(lineage.stack);
     const segments = [];
     if (!currentEffect) {
-        segments.push({
-            effect: undefined,
-            effectName: 'root',
-            stack: filterNodeModules(currentStack),
-        });
-        return segments;
+        lineage.digested = [
+            {
+                effect: undefined,
+                effectName: 'root',
+                stack: currentStack,
+            },
+        ];
+        return lineage.digested;
     }
     let current = currentEffect;
     let lastStack = currentStack;
     while (current) {
         const rootFn = proxy.getRoot(current);
-        // Too aggressive for now
-        //if(!rootFn.name) debugger
-        const filteredStack = filterNodeModules(lastStack);
         segments.push({
             effect: rootFn,
             effectName: rootFn.name || 'anonymous',
-            stack: filteredStack,
+            stack: lastStack,
         });
-        // Move to parent
         const node = proxy.getEffectNode(current);
         const parent = node.parent;
-        const creationStack = node.creationStack;
+        const creationStack = parseStackFrames(node.creationStack);
         if (parent) {
             current = parent;
-            lastStack = creationStack ?? [];
+            lastStack = creationStack;
         }
-        else if (creationStack) {
+        else if (node.creationStack) {
             segments.push({
                 effect: undefined,
                 effectName: 'root',
-                stack: filterNodeModules(creationStack),
+                stack: creationStack,
             });
             break;
         }
-        else {
+        else
             break;
-        }
     }
+    lineage.digested = segments;
     return segments;
 }
-/**
- * Filters out node_modules frames and groups them
- * @param frames - Array of stack frames
- */
-function filterNodeModules(frames) {
-    const result = [];
-    let inNodeModules = false;
-    for (const frame of frames) {
-        const isNodeModule = frame.fileName.includes('/node_modules/'); //|| frame.fileName.includes('/dist/')
-        if (isNodeModule && !inNodeModules) {
-            // Start of node_modules block
-            inNodeModules = true;
-            result.push({
-                functionName: '...node_modules...',
-                fileName: '[filtered]',
-                lineNumber: 0,
-                columnNumber: 0,
-                raw: '    at ...node_modules...'
-            });
-        }
-        else if (!isNodeModule && inNodeModules) {
-            // End of node_modules block
-            inNodeModules = false;
-            result.push(frame);
-        }
-        else if (!isNodeModule) {
-            // Regular frame
-            result.push(frame);
-        }
-        // Skip frames inside node_modules
-    }
-    return result;
-}
-/**
- * Formats lineage segments into a single stack-like string
- * @param segments - Lineage segments
- */
-function formatLineage(segments) {
+function formatLineage(lineage) {
+    const segments = Array.isArray(lineage) ? lineage : digestLineage(lineage);
     const result = [];
     for (let i = 0; i < segments.length; i++) {
         const segment = segments[i];
         if (i > 0) {
             const triggerEffect = segments[i - 1].effect;
-            const triggerName = triggerEffect ? (proxy.getRoot(triggerEffect).name || 'anonymous') : 'root';
+            const triggerName = triggerEffect ? proxy.getRoot(triggerEffect).name || 'anonymous' : 'root';
             result.push(` --- effect: ${triggerName} ---`);
         }
-        for (const frame of segment.stack) {
+        for (const frame of segment.stack)
             result.push(`    ${frame.raw}`);
-        }
     }
     return result.join('\n');
 }
-/**
- * Logs lineage segments to console with grouping
- * @param segments - Lineage segments
- */
-function logLineage(segments) {
+function logLineage(lineage) {
+    const segments = Array.isArray(lineage) ? lineage : digestLineage(lineage);
     console.groupCollapsed(`🦴 Effect Lineage Trace (${segments.length} segment${segments.length === 1 ? '' : 's'})`);
     for (let i = 0; i < segments.length; i++) {
         const segment = segments[i];
-        // Add segment header
         const isLast = i === segments.length - 1;
         const prefix = i === 0 ? '📍' : isLast ? '└─' : '├─';
         console.groupCollapsed(`${prefix} Effect:`, segment.effect ? segment.effect.name || 'anonymous' : 'root');
-        // Add stack frames
         for (let j = 0; j < segment.stack.length; j++) {
             const frame = segment.stack[j];
             const isLastFrame = j === segment.stack.length - 1;
@@ -211,76 +230,408 @@ function logLineage(segments) {
     }
     console.groupEnd();
 }
-/**
- * Captures and logs lineage to console
- */
 function captureNodeLineage() {
     logLineage(getLineage());
 }
-/**
- * Custom formatter for Chrome DevTools to render lineage data nicely.
- */
 const lineageFormatter = {
     header: (obj) => {
-        if (isLineage(obj)) {
-            // Try to detect DevTools theme - default to dark colors if uncertain
+        if (isLineageSegmentView(obj)) {
             const isDark = typeof window !== 'undefined' && window.matchMedia?.('(prefers-color-scheme: dark)').matches;
-            const headerColor = isDark ? '#cd9d5d' : '#704214';
+            const frameColor = isDark ? '#8b949e' : '#57606a';
             return [
                 'span',
-                { style: `color: ${headerColor}; font-weight: bold;` },
-                `🦴 Effect Lineage (${obj.segments.length} segments)`,
+                { style: 'font-weight: bold;' },
+                formatSegmentTitle(obj.segment, obj.index, obj.total),
+                ['span', { style: `color: ${frameColor}; margin-left: 6px; font-weight: normal;` }, formatEffectPreview(obj.segment.effect)],
+                [
+                    'span',
+                    { style: `color: ${frameColor}; margin-left: 6px; font-weight: normal;` },
+                    `${obj.segment.stack.length} frame${obj.segment.stack.length === 1 ? '' : 's'}`,
+                ],
             ];
         }
-        return null;
+        if (isLineageFrameView(obj)) {
+            const isDark = typeof window !== 'undefined' && window.matchMedia?.('(prefers-color-scheme: dark)').matches;
+            const fnColor = obj.frame.functionName === 'anonymous' ? '#8b949e' : isDark ? '#ffffff' : '#222';
+            const linkColor = isDark ? '#58a6ff' : '#005cc5';
+            return [
+                'div',
+                { style: 'display: block;' },
+                ['span', { style: `color: ${fnColor}; font-weight: bold;` }, obj.frame.functionName],
+                ['span', { style: 'color: #8b949e; margin: 0 6px;' }, '@'],
+                [
+                    'span',
+                    { style: `color: ${linkColor}; text-decoration: underline;` },
+                    formatLocationHref(obj.frame),
+                ],
+            ];
+        }
+        if (!isLineage(obj))
+            return null;
+        const isDark = typeof window !== 'undefined' && window.matchMedia?.('(prefers-color-scheme: dark)').matches;
+        const headerColor = isDark ? '#cd9d5d' : '#704214';
+        return [
+            'span',
+            { style: `color: ${headerColor}; font-weight: bold;` },
+            obj.digested
+                ? `🦴 Effect Lineage (${obj.digested.length} segments)`
+                : '🦴 Effect Lineage (lazy)',
+        ];
     },
-    hasBody: (obj) => isLineage(obj),
+    hasBody: (obj) => isLineage(obj) || isLineageSegmentView(obj),
     body: (obj) => {
+        if (isLineageSegmentView(obj)) {
+            return [
+                'div',
+                { style: 'padding: 4px 0;' },
+                ...obj.segment.stack.map((frame) => [
+                    'div',
+                    { style: 'display: block; margin-top: 2px;' },
+                    ['object', { object: wrapLineageFrameView(frame) }],
+                ]),
+            ];
+        }
         if (!isLineage(obj))
             return null;
-        const segments = obj.segments;
-        // Try to detect DevTools theme
+        const segments = digestLineage(obj);
+        return [
+            'div',
+            { style: 'padding: 5px; line-height: 1.4;' },
+            ...segments.map((segment, index) => [
+                'div',
+                { style: 'display: block; margin-top: 4px;' },
+                ['object', { object: wrapLineageSegmentView(segment, index, segments.length) }],
+            ]),
+        ];
+    },
+};
+function wrapLineageForDebug(lineage) {
+    return ensureSignature(lineage ?? getLineage());
+}
+
+const reasonTypes = new Set(['propChange', 'invalidate', 'external', 'stopped', 'gc', 'lineage', 'error', 'multiple']);
+const reasonCauseLists = new WeakSet();
+function hasOwn(value, key) {
+    return Object.prototype.hasOwnProperty.call(value, key);
+}
+function isCleanupReason(value) {
+    if (!value || typeof value !== 'object')
+        return false;
+    if (!hasOwn(value, 'type'))
+        return false;
+    const type = value.type;
+    if (typeof type !== 'string' || !reasonTypes.has(type))
+        return false;
+    switch (type) {
+        case 'propChange':
+            return Array.isArray(value.triggers);
+        case 'invalidate':
+            return hasOwn(value, 'cause');
+        case 'lineage':
+            return hasOwn(value, 'parent');
+        case 'error':
+            return hasOwn(value, 'error');
+        case 'multiple':
+            return Array.isArray(value.reasons);
+        default:
+            return true;
+    }
+}
+const reasonCauseEntries = new WeakSet();
+const reasonCauseDetails = new WeakSet();
+function isReasonCauseList(value) {
+    return !!value && typeof value === 'object' && reasonCauseLists.has(value);
+}
+function isReasonCauseEntry(value) {
+    return !!value && typeof value === 'object' && reasonCauseEntries.has(value);
+}
+function isReasonCauseDetail(value) {
+    return !!value && typeof value === 'object' && reasonCauseDetails.has(value);
+}
+function wrapReasonCauseEntry(entry) {
+    reasonCauseEntries.add(entry);
+    return entry;
+}
+function wrapReasonCauseDetail(detail) {
+    reasonCauseDetails.add(detail);
+    return detail;
+}
+function wrapReasonCauseList(list) {
+    reasonCauseLists.add(list);
+    return list;
+}
+function getCleanupReasonChain(reason) {
+    const chain = [];
+    let current = reason;
+    while (current) {
+        chain.push(current);
+        current = current.chain;
+    }
+    return chain;
+}
+function formatReasonSummary(reason) {
+    switch (reason.type) {
+        case 'propChange':
+            return `propChange: ${formatTriggerSummary(reason)}`;
+        case 'invalidate':
+            return `invalidate ← ${formatReasonSummary(reason.cause)}`;
+        case 'stopped':
+            return reason.detail ? `stopped (${reason.detail})` : 'stopped';
+        case 'external':
+            return `external: ${reason.detail}`;
+        case 'gc':
+            return 'gc';
+        case 'lineage':
+            return `lineage ← ${formatReasonSummary(reason.parent)}`;
+        case 'error':
+            return `error: ${formatUnknownSummary(reason.error)}`;
+        case 'multiple':
+            return `multiple: ${reason.reasons.map(formatReasonSummary).join(' | ')}`;
+    }
+}
+function formatTriggerSummary(reason) {
+    const groups = new Map();
+    const ordered = [];
+    for (const { obj, evolution } of reason.triggers) {
+        let group = groups.get(obj);
+        if (!group) {
+            group = { target: describeTarget(obj), parts: [] };
+            groups.set(obj, group);
+            ordered.push(group);
+        }
+        group.parts.push(evolution.type === 'bunch'
+            ? `${evolution.type} ${String(evolution.method)}`
+            : `${evolution.type} ${String(evolution.prop)}`);
+    }
+    return ordered.map(({ target, parts }) => `${target}: ${parts.join(', ')}`).join(' | ');
+}
+function formatUnknownSummary(value) {
+    if (typeof value === 'string')
+        return value;
+    if (typeof value === 'number' || typeof value === 'boolean' || value == null)
+        return String(value);
+    if (value instanceof Error)
+        return value.message;
+    if (typeof value === 'function')
+        return value.name || 'anonymous';
+    if (typeof value === 'object')
+        return value.constructor?.name || 'object';
+    return typeof value;
+}
+function describeTarget(value) {
+    if (!value || typeof value !== 'object')
+        return formatUnknownSummary(value);
+    const tag = value[Symbol.toStringTag];
+    if (typeof tag === 'string' && tag && tag !== 'Object' && tag !== 'Array')
+        return tag;
+    if (Array.isArray(value))
+        return 'Array';
+    if (value instanceof Map)
+        return 'Map';
+    if (value instanceof Set)
+        return 'Set';
+    return value.constructor?.name || 'object';
+}
+function formatPreview(value) {
+    if (typeof value === 'string')
+        return value;
+    if (typeof value === 'number' || typeof value === 'boolean' || value == null)
+        return String(value);
+    if (typeof value === 'function')
+        return `[function ${value.name || 'anonymous'}]`;
+    if (value instanceof Error)
+        return `[Error: ${value.message}]`;
+    if (value && typeof value === 'object' && 'stack' in value)
+        return '[lineage]';
+    if (typeof value === 'object')
+        return `[${value.constructor?.name || 'object'}]`;
+    return `[${typeof value}]`;
+}
+function renderDetailValue(value, color) {
+    if (value && typeof value === 'object' && 'stack' in value) {
+        return ['object', { object: value }];
+    }
+    return ['span', { style: `color: ${color}; white-space: pre-wrap;` }, formatPreview(value)];
+}
+function getReasonLineageDetails(reason) {
+    switch (reason.type) {
+        case 'propChange': {
+            const details = [];
+            for (const trigger of reason.triggers) {
+                const target = trigger.evolution.type === 'bunch'
+                    ? String(trigger.evolution.method)
+                    : String(trigger.evolution.prop);
+                const label = trigger.evolution.type === 'bunch'
+                    ? `${trigger.evolution.type} ${String(trigger.evolution.method)}`
+                    : `${trigger.evolution.type} ${String(trigger.evolution.prop)}`;
+                if (trigger.touch)
+                    details.push({ kind: 'touch', target, label, value: trigger.touch });
+                if (trigger.dependency)
+                    details.push({ kind: 'dependency', target, label, value: trigger.dependency });
+            }
+            return details;
+        }
+        case 'invalidate':
+            return getReasonLineageDetails(reason.cause);
+        case 'lineage':
+            return getReasonLineageDetails(reason.parent);
+        case 'multiple':
+            return reason.reasons.flatMap(getReasonLineageDetails);
+        case 'external':
+        default:
+            return [];
+    }
+}
+function renderLineageList(details, colors) {
+    const grouped = new Map();
+    for (const { kind, label, value } of details) {
+        let entry = grouped.get(label);
+        if (!entry) {
+            entry = { label };
+            grouped.set(label, entry);
+        }
+        if (kind === 'touch')
+            entry.touch = [...(entry.touch ?? []), value];
+        if (kind === 'dependency')
+            entry.dependency = [...(entry.dependency ?? []), value];
+    }
+    const listObject = wrapReasonCauseList({
+        count: grouped.size,
+        entries: Array.from(grouped.values(), wrapReasonCauseEntry),
+    });
+    return [
+        'div',
+        {
+            style: `margin-top: 4px; padding: 3px 5px; background: ${colors.block}; border-radius: 3px;`,
+        },
+        ['object', { object: listObject }],
+    ];
+}
+function formatReasonWithoutChain(reason) {
+    switch (reason.type) {
+        case 'propChange':
+            return proxy.formatCleanupReason({ type: 'propChange', triggers: reason.triggers });
+        case 'invalidate':
+            return proxy.formatCleanupReason({ type: 'invalidate', cause: reason.cause });
+        case 'stopped':
+            return proxy.formatCleanupReason(reason.detail ? { type: 'stopped', detail: reason.detail } : { type: 'stopped' });
+        case 'external':
+            return proxy.formatCleanupReason({ type: 'external', detail: reason.detail });
+        case 'gc':
+            return proxy.formatCleanupReason({ type: 'gc' });
+        case 'lineage':
+            return proxy.formatCleanupReason({ type: 'lineage', parent: reason.parent });
+        case 'error':
+            return proxy.formatCleanupReason({ type: 'error', error: reason.error });
+        case 'multiple':
+            return proxy.formatCleanupReason({ type: 'multiple', reasons: reason.reasons });
+    }
+}
+function logReason(reason, tag) {
+    const chain = getCleanupReasonChain(reason);
+    console.groupCollapsed(`🧹 Cleanup Reason${tag ? ` (${tag})` : ''}`);
+    for (let i = 0; i < chain.length; i++) {
+        console.groupCollapsed(`${i === 0 ? '📍' : '↖'} ${formatReasonSummary(chain[i])}`);
+        const details = getReasonLineageDetails(chain[i]);
+        if (details.length > 0) {
+            for (const { kind, label, value } of details)
+                console.log(`${kind} ${label}`, value);
+        }
+        else {
+            console.log(...formatReasonWithoutChain(chain[i]));
+        }
+        console.groupEnd();
+    }
+    console.groupEnd();
+    return `🧹 Cleanup Reason${tag ? ` (${tag})` : ''}`;
+}
+const reasonFormatter = {
+    header: (obj) => {
+        if (isReasonCauseList(obj)) {
+            return ['span', { style: 'font-weight: bold;' }, `causes: ${obj.count}`];
+        }
+        if (isReasonCauseEntry(obj)) {
+            return [
+                'span',
+                { style: 'font-weight: bold;' },
+                `${obj.label}:`,
+                ...(obj.touch?.length
+                    ? [
+                        ['span', { style: 'margin-left: 6px;' }, ['object', { object: wrapReasonCauseDetail({ kind: 'touch', values: obj.touch }) }]],
+                    ]
+                    : []),
+                ...(obj.dependency?.length
+                    ? [
+                        ['span', { style: 'margin-left: 6px;' }, ['object', { object: wrapReasonCauseDetail({ kind: 'dependency', values: obj.dependency }) }]],
+                    ]
+                    : []),
+            ];
+        }
+        if (isReasonCauseDetail(obj)) {
+            return [
+                'span',
+                { style: 'font-weight: normal;' },
+                obj.values.length === 1 ? obj.kind : `${obj.values.length} ${obj.kind}`,
+            ];
+        }
+        if (!isCleanupReason(obj))
+            return null;
+        const chain = getCleanupReasonChain(obj);
         const isDark = typeof window !== 'undefined' && window.matchMedia?.('(prefers-color-scheme: dark)').matches;
-        const colors = isDark ? {
-            frameText: '#ccc',
-            functionName: '#ffffff',
-            segmentBg: '#2d2d2d',
-        } : {
-            frameText: '#555',
-            functionName: '#222',
-            segmentBg: '#eee',
-        };
-        const children = segments.map((segment, i) => {
-            const frames = segment.stack.map((frame) => [
+        const color = isDark ? '#8fb3ff' : '#0b5fff';
+        return ['span', { style: `color: ${color}; font-weight: bold;` }, `🧹 ${formatReasonSummary(obj)}${chain.length > 1 ? ` ×${chain.length}` : ''}`];
+    },
+    hasBody: (obj) => isCleanupReason(obj) || isReasonCauseList(obj) || isReasonCauseDetail(obj),
+    body: (obj) => {
+        if (isReasonCauseList(obj)) {
+            return [
                 'div',
-                { style: `margin-left: 20px; color: ${colors.frameText}; font-family: monospace; font-size: 11px;` },
-                ['span', { style: `color: ${colors.functionName};` }, `at ${frame.functionName} `],
-                ['span', {}, `${frame.fileName}:${frame.lineNumber}:${frame.columnNumber}`],
-            ]);
-            segment.effect;
-            const segmentHeader = [
+                { style: 'padding: 4px 0;' },
+                ...obj.entries.map((entry) => [
+                    'div',
+                    { style: 'display: block; margin-top: 2px;' },
+                    ['object', { object: entry }],
+                ]),
+            ];
+        }
+        if (isReasonCauseDetail(obj)) {
+            const detailValue = obj.values.length === 1
+                ? obj.values[0]
+                : Object.fromEntries(obj.values.map((value, index) => [`${obj.kind} ${index + 1}`, value]));
+            return [
                 'div',
-                { style: `margin-top: 5px; padding: 2px 5px; background: ${colors.segmentBg}; border-radius: 3px; font-weight: bold;` },
-                i === 0 ? '📍 Current: ' : '↖ Effect: ',
-                segment.effect?.name || 'anonymous',
-                segment.effect ? ['object', { object: segment.effect }] : 'root',
+                { style: 'padding: 4px 0; line-height: 1.4;' },
+                [
+                    'div',
+                    { style: 'margin-top: 2px;' },
+                    renderDetailValue(detailValue, 'inherit'),
+                ],
+            ];
+        }
+        if (!isCleanupReason(obj))
+            return null;
+        const chain = getCleanupReasonChain(obj);
+        const isDark = typeof window !== 'undefined' && window.matchMedia?.('(prefers-color-scheme: dark)').matches;
+        const colors = isDark
+            ? { block: '#2d2d2d', title: '#ffffff', meta: '#8b949e' }
+            : { block: '#eee', title: '#222', meta: '#57606a' };
+        const children = chain.map((reason, index) => {
+            const lineageDetails = getReasonLineageDetails(reason);
+            const renderedDetails = lineageDetails.length > 0
+                ? [renderLineageList(lineageDetails, colors)]
+                : formatReasonWithoutChain(reason).map((part) => typeof part === 'string'
+                    ? ['span', { style: `color: ${colors.meta}; white-space: pre-wrap;` }, part]
+                    : renderDetailValue(part, colors.meta));
+            return [
+                'div',
+                { style: `margin-top: 5px; padding: 4px 6px; background: ${colors.block}; border-radius: 3px;` },
+                ['div', { style: `font-weight: bold; color: ${colors.title}; margin-bottom: 3px;` }, `${index === 0 ? '📍' : '↖'} ${formatReasonSummary(reason)}`],
+                ['div', { style: 'display: inline-block;' }, ...renderedDetails],
             ];
-            return ['div', {}, segmentHeader, ...frames];
         });
         return ['div', { style: 'padding: 5px; line-height: 1.4;' }, ...children];
     },
 };
-/**
- * Wraps lineage data in a way that the Chrome Formatter can recognize.
- */
-function wrapLineageForDebug(segments) {
-    const lineage = {
-        segments,
-        toString: () => formatLineage(segments ?? getLineage()),
-    };
-    lineageObjects.add(lineage);
-    return lineage;
-}
 
 /**
  * Displays a floating reactive panel in the browser showing the lineage of triggered effects.
@@ -380,13 +731,13 @@ function showLineagePanel() {
     panel.appendChild(content);
     document.body.appendChild(panel);
     // Reactivity: Update Visibility
-    proxy.effect(() => {
+    proxy.effect `lineage-panel:visibility`(() => {
         panel.style.opacity = state.isVisible ? '1' : '0';
         panel.style.pointerEvents = state.isVisible ? 'all' : 'none';
         panel.style.transform = state.isVisible ? 'translateY(0)' : 'translateY(20px)';
     });
     // Reactivity: Update Content
-    proxy.effect(() => {
+    proxy.effect `lineage-panel:content`(() => {
         if (state.activeLineage.length === 0) {
             content.innerHTML = `<div style="color: ${colors.placeholderText}; font-style: italic; text-align: center; margin-top: 20px;">No effect triggered yet...</div>`;
             return;
@@ -428,6 +779,35 @@ function showLineagePanel() {
     });
 }
 
+function getColors() {
+    const isDark = typeof window !== 'undefined' && window.matchMedia?.('(prefers-color-scheme: dark)').matches;
+    return {
+        accent: isDark ? '#b392f0' : '#6f42c1',
+        meta: isDark ? '#8b949e' : '#57606a',
+    };
+}
+function getReactiveTarget(obj) {
+    if (!obj || typeof obj !== 'object' || !proxy.isReactive(obj))
+        return undefined;
+    return proxy.unwrap(obj);
+}
+const reactiveFormatter = {
+    header: (obj) => {
+        const target = getReactiveTarget(obj);
+        if (!target)
+            return null;
+        const colors = getColors();
+        return [
+            'span',
+            {},
+            ['span', { style: `color: ${colors.accent}; font-weight: bold;` }, 'Reactive<'],
+            ['object', { object: target }],
+            ['span', { style: `color: ${colors.accent}; font-weight: bold;` }, '>'],
+        ];
+    },
+    hasBody: () => false,
+};
+
 /**
  * Debug utilities for the reactivity system
  * - Captures effect metadata (names, parent relationships)
@@ -758,7 +1138,6 @@ function buildReactivityGraph() {
         },
     };
 }
-const captureLineage = () => wrapLineageForDebug(getLineage());
 /**
  * Enables the DevTools bridge and exposes the debug API on window/global.
  * Call as early as possible in development builds.
@@ -785,25 +1164,38 @@ function enableDevTools() {
             logLineage(getLineage());
             return '🦴 Effect Lineage Trace' + (tag ? ` (${tag})` : '');
         },
-        get browserLineage() {
-            return captureLineage();
+        logReason(reason, tag) {
+            const reasonToLog = reason ?? globalScope.__MUTTS_DEBUG__.reason;
+            if (!reasonToLog)
+                return '🧹 Cleanup Reason';
+            return logReason(reasonToLog, tag);
+        },
+        get lineage() {
+            return getLineage();
         },
-        getLineage,
-        captureLineage: getStackFrame,
-        formatLineage,
         showLineagePanel,
         setEffectName,
         setObjectName,
         registerEffect: registerEffectForDebug,
         registerObject: registerObjectForDebug,
+        /**
+         * Returns the reason why the current effect is being executed.
+         * Returns undefined if not in an effect or if this is the first run.
+         * @type {() => import('../src/reactive/types').CleanupReason | undefined}
+         */
+        get reason() {
+            const activeEffect = proxy.getActiveEffect();
+            if (!activeEffect)
+                return undefined;
+            const node = proxy.getEffectNode(activeEffect);
+            return node?.currentReason;
+        },
     };
     // @ts-ignore - devtoolsFormatters is a Chrome-specific array
-    if (globalScope.devtoolsFormatters) {
-        globalScope.devtoolsFormatters.push(lineageFormatter);
-    }
-    else {
-        globalScope.devtoolsFormatters = [lineageFormatter];
-    }
+    if (globalScope.devtoolsFormatters)
+        globalScope.devtoolsFormatters.push(lineageFormatter, reasonFormatter, reactiveFormatter);
+    else
+        globalScope.devtoolsFormatters = [lineageFormatter, reasonFormatter, reactiveFormatter];
     proxy.setDebugHooks({
         isDevtoolsEnabled: () => devtoolsEnabled,
         registerEffect: registerEffectForDebug,
@@ -811,6 +1203,8 @@ function enableDevTools() {
         captureStack: getStackFrame,
         captureLineage,
         formatStack: (stack) => {
+            if (isCleanupReason(stack))
+                return [stack];
             if (typeof stack === 'string') {
                 return [
                     `\n    ${stack
@@ -832,8 +1226,7 @@ function enableDevTools() {
                 typeof error === 'object' &&
                 'stack' in error &&
                 !('lineage' in error)) {
-                const lineage = getLineage(trigger, getStackFrame(error));
-                error.lineage = wrapLineageForDebug(lineage);
+                error.lineage = wrapLineageForDebug(getLineage(trigger, error));
             }
         },
     });
@@ -955,6 +1348,7 @@ function isDevelopmentMode() {
 }
 // Auto-enable devtools when the module loads in development
 if (isDevelopmentMode() && !devtoolsEnabled) {
+    Object.assign(proxy.options, proxy.devPreset);
     enableDevTools();
     // Optional: Log that devtools were enabled (only in development)
     if (typeof console !== 'undefined' && console.info) {
@@ -966,9 +1360,11 @@ if (isDevelopmentMode() && !devtoolsEnabled) {
 exports.buildReactivityGraph = buildReactivityGraph;
 exports.captureLineage = captureLineage;
 exports.captureNodeLineage = captureNodeLineage;
+exports.digestLineage = digestLineage;
 exports.enableDevTools = enableDevTools;
 exports.forceEnableGraphTracking = forceEnableGraphTracking;
 exports.formatLineage = formatLineage;
+exports.getCleanupReasonChain = getCleanupReasonChain;
 exports.getDependencies = getDependencies;
 exports.getDependencyGraph = getDependencyGraph;
 exports.getDependents = getDependents;
@@ -976,12 +1372,14 @@ exports.getLineage = getLineage;
 exports.getMutationHistory = getMutationHistory;
 exports.getStackFrame = getStackFrame;
 exports.getTriggerChain = getTriggerChain;
+exports.isCleanupReason = isCleanupReason;
 exports.isDevtoolsEnabled = isDevtoolsEnabled;
 exports.isLineage = isLineage;
 exports.lineageFormatter = lineageFormatter;
 exports.logError = logError;
 exports.logLineage = logLineage;
-exports.parseStackLine = parseStackLine;
+exports.logReason = logReason;
+exports.reasonFormatter = reasonFormatter;
 exports.recordTriggerLink = recordTriggerLink;
 exports.registerEffectForDebug = registerEffectForDebug;
 exports.registerObjectForDebug = registerObjectForDebug;