what-devtools 0.6.0 → 0.6.2

package/src/DevPanel.jsx

@@ -1,402 +1,175 @@
 /**
  * What Framework DevPanel
  *
- * A drop-in floating UI panel that shows live signal values,
- * active effects, and mounted components during development.
- *
- * Features:
- * - Signal count, effect count, component count
- * - Recent errors with structured output
- * - Real-time signal watcher
- * - Health indicator (green/yellow/red)
- * - Toggle via Ctrl+Shift+D / Cmd+Shift+D
- *
- * Usage:
- *   import { DevPanel } from 'what-devtools/panel';
- *   // Add to your app:
- *   <DevPanel />
- *
- * Works WITHOUT MCP devtools connected.
+ * A small floating UI panel for browser-based devtools tests and local debugging.
+ * It is intentionally implemented without JSX so the devtools package does not
+ * depend on compiler fragment behavior to render its own diagnostics UI.
  */
 
-import { signal, effect, onCleanup } from 'what-core';
+import { onCleanup } from 'what-core';
 import { subscribe, getSnapshot, getErrors, installDevTools } from './index.js';
 
+const MONO = 'ui-monospace,SFMono-Regular,Menlo,monospace';
+
 export function DevPanel() {
-  // Auto-install devtools if not already done
   installDevTools();
 
-  const isOpen = signal(false);
-  const activeTab = signal('overview');
-  const snapshot = signal(getSnapshot());
-  const recentErrors = signal(getErrors());
+  if (typeof document === 'undefined') return null;
+
+  let activeTab = 'signals';
+  let isOpen = false;
+
+  const root = document.createDocumentFragment();
+  const toggle = document.createElement('button');
+  toggle.type = 'button';
+  toggle.textContent = 'W';
+  toggle.title = 'What Framework DevTools (Ctrl+Shift+D)';
+  toggle.setAttribute('style',
+    'position:fixed;bottom:12px;right:12px;z-index:99999;width:36px;height:36px;' +
+    'border-radius:8px;border:1px solid #2a2a4a;background:linear-gradient(135deg,#2563eb,#1d4ed8);' +
+    `color:#fff;font-weight:800;font-size:14px;cursor:pointer;font-family:${MONO};` +
+    'box-shadow:0 4px 12px rgba(37,99,235,0.3);'
+  );
 
-  // Subscribe to devtools events and refresh
-  const unsub = subscribe((event) => {
-    snapshot(getSnapshot());
-    if (event === 'error:captured') {
-      recentErrors(getErrors());
-    }
-  });
+  const panel = document.createElement('div');
+  panel.setAttribute('style',
+    'position:fixed;bottom:0;right:0;width:380px;max-height:55vh;z-index:99998;' +
+    `font-family:${MONO};font-size:12px;background:#1a1a2e;color:#e0e0e0;` +
+    'border:1px solid #2a2a4a;border-radius:12px 0 0 0;box-shadow:0 -4px 24px rgba(0,0,0,0.3);' +
+    'display:none;flex-direction:column;overflow:hidden;'
+  );
 
-  // Poll every 500ms for signal value changes (cheap -- just reads .peek())
-  const interval = setInterval(() => {
-    snapshot(getSnapshot());
-    recentErrors(getErrors());
-  }, 500);
+  root.append(toggle, panel);
+
+  function setOpen(next) {
+    isOpen = next;
+    panel.style.display = isOpen ? 'flex' : 'none';
+    if (isOpen) renderPanel();
+  }
+
+  toggle.addEventListener('click', () => setOpen(!isOpen));
 
-  // Keyboard shortcut: Ctrl+Shift+D / Cmd+Shift+D
   const onKeyDown = (e) => {
     if ((e.ctrlKey || e.metaKey) && e.shiftKey && e.key === 'D') {
       e.preventDefault();
-      isOpen((v) => !v);
+      setOpen(!isOpen);
     }
   };
-  if (typeof document !== 'undefined') {
-    document.addEventListener('keydown', onKeyDown);
-  }
+  document.addEventListener('keydown', onKeyDown);
+
+  const unsub = subscribe(() => {
+    if (isOpen) renderPanel();
+  });
+  const interval = setInterval(() => {
+    if (isOpen) renderPanel();
+  }, 500);
 
   onCleanup(() => {
     unsub();
     clearInterval(interval);
-    if (typeof document !== 'undefined') {
-      document.removeEventListener('keydown', onKeyDown);
-    }
+    document.removeEventListener('keydown', onKeyDown);
   });
 
-  // --- Health indicator ---
-  const getHealth = () => {
-    const data = snapshot();
-    const errs = recentErrors();
-    const recentErrCount = errs.filter(
-      (e) => Date.now() - e.timestamp < 30000
-    ).length;
-
-    if (recentErrCount > 0) return { color: '#ef4444', label: 'Errors detected' };
-    if (data.effects.length > 100) return { color: '#eab308', label: 'Many effects' };
-    if (data.signals.length > 200) return { color: '#eab308', label: 'Many signals' };
-    return { color: '#22c55e', label: 'Healthy' };
-  };
+  function renderPanel() {
+    panel.replaceChildren(renderHeader(), renderTabs(), renderContent());
+  }
 
-  const PANEL_STYLE =
-    'position:fixed;bottom:0;right:0;width:380px;max-height:55vh;z-index:99998;' +
-    'font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;' +
-    'background:#1a1a2e;color:#e0e0e0;border:1px solid #2a2a4a;' +
-    'border-radius:12px 0 0 0;box-shadow:0 -4px 24px rgba(0,0,0,0.3);' +
-    'display:flex;flex-direction:column;overflow:hidden;';
+  function renderHeader() {
+    const header = document.createElement('div');
+    header.setAttribute('style', 'display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-bottom:1px solid #2a2a4a;background:#16163a;');
 
-  const tabStyle = (tab) => () => {
-    const isActive = activeTab() === tab;
-    return (
-      'padding:6px 10px;border:none;background:' +
-      (isActive ? '#2a2a4a' : 'transparent') +
-      ';color:' +
-      (isActive ? '#fff' : '#6a6a8a') +
-      ';cursor:pointer;font-family:inherit;font-size:11px;font-weight:600;border-radius:4px;'
-    );
-  };
+    const title = document.createElement('span');
+    title.textContent = 'What DevTools';
+    title.setAttribute('style', 'font-weight:700;font-size:12px;color:#818cf8;');
 
-  // --- Tab: Overview ---
-  const renderOverview = () => {
-    const data = snapshot();
-    const health = getHealth();
-    const errs = recentErrors();
-    const recentErrs = errs.slice(-3).reverse();
+    const close = document.createElement('button');
+    close.type = 'button';
+    close.textContent = 'x';
+    close.setAttribute('style', 'background:none;border:none;color:#6a6a8a;cursor:pointer;font-size:14px;');
+    close.addEventListener('click', () => setOpen(false));
 
-    return (
-      <div style="padding:12px;">
-        {/* Health indicator */}
-        <div style="display:flex;align-items:center;gap:8px;margin-bottom:12px;padding:8px;background:#0d0d1a;border-radius:6px;">
-          <div
-            style={() =>
-              'width:10px;height:10px;border-radius:50%;background:' +
-              getHealth().color +
-              ';'
-            }
-          />
-          <span style={() => 'color:' + getHealth().color + ';font-weight:600;'}>
-            {() => getHealth().label}
-          </span>
-        </div>
+    header.append(title, close);
+    return header;
+  }
 
-        {/* Counts */}
-        <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:12px;">
-          <div style="text-align:center;padding:8px;background:#0d0d1a;border-radius:6px;">
-            <div style="font-size:18px;font-weight:700;color:#818cf8;">
-              {() => snapshot().signals.length}
-            </div>
-            <div style="font-size:10px;color:#6a6a8a;margin-top:2px;">
-              Signals
-            </div>
-          </div>
-          <div style="text-align:center;padding:8px;background:#0d0d1a;border-radius:6px;">
-            <div style="font-size:18px;font-weight:700;color:#fbbf24;">
-              {() => snapshot().effects.length}
-            </div>
-            <div style="font-size:10px;color:#6a6a8a;margin-top:2px;">
-              Effects
-            </div>
-          </div>
-          <div style="text-align:center;padding:8px;background:#0d0d1a;border-radius:6px;">
-            <div style="font-size:18px;font-weight:700;color:#34d399;">
-              {() => snapshot().components.length}
-            </div>
-            <div style="font-size:10px;color:#6a6a8a;margin-top:2px;">
-              Components
-            </div>
-          </div>
-        </div>
+  function renderTabs() {
+    const tabs = document.createElement('div');
+    tabs.setAttribute('style', 'display:flex;gap:2px;padding:6px 8px;border-bottom:1px solid #2a2a4a;flex-wrap:wrap;');
+    for (const tab of ['signals', 'effects', 'components', 'errors']) {
+      const button = document.createElement('button');
+      button.type = 'button';
+      button.textContent = tabLabel(tab);
+      button.setAttribute('style', tabStyle(tab));
+      button.addEventListener('click', () => {
+        activeTab = tab;
+        renderPanel();
+      });
+      tabs.append(button);
+    }
+    return tabs;
+  }
 
-        {/* Recent errors */}
-        {() => {
-          const errs = recentErrors();
-          if (errs.length === 0) return null;
-          const recent = errs.slice(-3).reverse();
-          return (
-            <div style="margin-top:8px;">
-              <div style="font-size:11px;font-weight:600;color:#f87171;margin-bottom:6px;">
-                Recent Errors ({errs.length})
-              </div>
-              {recent.map((e, i) => (
-                <div
-                  key={i}
-                  style="padding:6px 8px;background:#1c0a0a;border:1px solid #3b1219;border-radius:4px;margin-bottom:4px;font-size:11px;color:#fca5a5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"
-                  title={e.message}
-                >
-                  <span style="color:#6a6a8a;">
-                    [{e.type}]
-                  </span>{' '}
-                  {e.message}
-                </div>
-              ))}
-            </div>
-          );
-        }}
-      </div>
-    );
-  };
+  function tabLabel(tab) {
+    const snapshot = getSnapshot();
+    if (tab === 'signals') return `Signals (${snapshot.signals.length})`;
+    if (tab === 'effects') return `Effects (${snapshot.effects.length})`;
+    if (tab === 'components') return `Components (${snapshot.components.length})`;
+    return `Errors (${getErrors().length})`;
+  }
 
-  // --- Tab: Signals ---
-  const renderSignals = () => {
-    const data = snapshot();
-    if (!data.signals.length) {
-      return (
-        <div style="padding:12px;color:#4a4a6a;">No signals tracked</div>
-      );
-    }
-    return (
-      <div style="padding:8px;">
-        {data.signals.map((s) => (
-          <div
-            key={s.id}
-            style="display:flex;justify-content:space-between;align-items:center;padding:4px 8px;border-bottom:1px solid #2a2a4a;"
-          >
-            <span style="color:#818cf8;">{s.name}</span>
-            <span style="color:#a0a0c0;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
-              {formatValue(s.value)}
-            </span>
-          </div>
-        ))}
-      </div>
-    );
-  };
+  function tabStyle(tab) {
+    const selected = activeTab === tab;
+    return 'padding:6px 10px;border:none;background:' + (selected ? '#2a2a4a' : 'transparent') +
+      ';color:' + (selected ? '#fff' : '#6a6a8a') +
+      `;cursor:pointer;font-family:${MONO};font-size:11px;font-weight:600;border-radius:4px;`;
+  }
 
-  // --- Tab: Effects ---
-  const renderEffects = () => {
-    const data = snapshot();
-    if (!data.effects.length) {
-      return (
-        <div style="padding:12px;color:#4a4a6a;">No effects tracked</div>
-      );
+  function renderContent() {
+    const content = document.createElement('div');
+    content.setAttribute('style', 'overflow-y:auto;flex:1;padding:8px;');
+    const snapshot = getSnapshot();
+
+    if (activeTab === 'signals') {
+      renderRows(content, snapshot.signals, (signal) => [signal.name, formatValue(signal.value)], '#818cf8');
+    } else if (activeTab === 'effects') {
+      renderRows(content, snapshot.effects, (effect) => [effect.name, `runs: ${effect.runCount || 0}`], '#fbbf24');
+    } else if (activeTab === 'components') {
+      renderRows(content, snapshot.components, (component) => [`<${component.name} />`, ''], '#34d399');
+    } else {
+      renderRows(content, getErrors(), (error) => [`[${error.type}]`, error.message], '#f87171');
     }
-    return (
-      <div style="padding:8px;">
-        {data.effects.map((e) => (
-          <div
-            key={e.id}
-            style="display:flex;justify-content:space-between;align-items:center;padding:4px 8px;border-bottom:1px solid #2a2a4a;"
-          >
-            <span style="color:#fbbf24;">{e.name}</span>
-            <span style="color:#6a6a8a;font-size:10px;">
-              runs: {e.runCount || 0}
-            </span>
-          </div>
-        ))}
-      </div>
-    );
-  };
 
-  // --- Tab: Components ---
-  const renderComponents = () => {
-    const data = snapshot();
-    if (!data.components.length) {
-      return (
-        <div style="padding:12px;color:#4a4a6a;">No components tracked</div>
-      );
+    if (!content.childNodes.length) {
+      content.textContent = `No ${activeTab} tracked`;
+      content.style.color = '#4a4a6a';
+      content.style.padding = '12px';
     }
-    return (
-      <div style="padding:8px;">
-        {data.components.map((c) => (
-          <div
-            key={c.id}
-            style="padding:4px 8px;border-bottom:1px solid #2a2a4a;"
-          >
-            <span style="color:#34d399;">
-              &lt;{c.name} /&gt;
-            </span>
-          </div>
-        ))}
-      </div>
-    );
-  };
+    return content;
+  }
 
-  // --- Tab: Errors ---
-  const renderErrors = () => {
-    const errs = recentErrors();
-    if (!errs.length) {
-      return (
-        <div style="padding:12px;color:#4a4a6a;">No errors captured</div>
-      );
+  function renderRows(parent, rows, mapRow, color) {
+    for (const row of rows) {
+      const [leftText, rightText] = mapRow(row);
+      const item = document.createElement('div');
+      item.setAttribute('style', 'display:flex;justify-content:space-between;align-items:center;padding:4px 8px;border-bottom:1px solid #2a2a4a;gap:12px;');
+      const left = document.createElement('span');
+      left.textContent = leftText;
+      left.setAttribute('style', `color:${color};`);
+      const right = document.createElement('span');
+      right.textContent = rightText;
+      right.setAttribute('style', 'color:#a0a0c0;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;');
+      item.append(left, right);
+      parent.append(item);
     }
-    return (
-      <div style="padding:8px;">
-        {errs
-          .slice()
-          .reverse()
-          .map((e, i) => (
-            <div
-              key={i}
-              style="padding:8px;background:#0d0d1a;border:1px solid #2a2a4a;border-radius:6px;margin-bottom:6px;"
-            >
-              <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;">
-                <span style="color:#f87171;font-weight:600;font-size:11px;">
-                  [{e.type}]
-                </span>
-                <span style="color:#4a4a6a;font-size:10px;">
-                  {new Date(e.timestamp).toLocaleTimeString()}
-                </span>
-              </div>
-              <div style="color:#e0e0e0;font-size:11px;white-space:pre-wrap;word-break:break-all;">
-                {e.message}
-              </div>
-              {e.stack ? (
-                <div style="color:#4a4a6a;font-size:10px;margin-top:4px;white-space:pre-wrap;max-height:60px;overflow:hidden;">
-                  {e.stack.split('\n').slice(0, 3).join('\n')}
-                </div>
-              ) : null}
-            </div>
-          ))}
-      </div>
-    );
-  };
-
-  return (
-    <>
-      {/* Toggle button with health indicator */}
-      <button
-        onclick={() => isOpen((v) => !v)}
-        style={() => {
-          const health = getHealth();
-          return (
-            'position:fixed;bottom:12px;right:12px;z-index:99999;width:36px;height:36px;' +
-            'border-radius:8px;border:1px solid #2a2a4a;' +
-            'background:linear-gradient(135deg,#2563eb,#1d4ed8);color:#fff;' +
-            'font-weight:800;font-size:14px;cursor:pointer;' +
-            'font-family:ui-monospace,monospace;' +
-            'box-shadow:0 4px 12px rgba(37,99,235,0.3),' +
-            '0 0 0 2px ' + health.color + ';'
-          );
-        }}
-        title="What Framework DevTools (Ctrl+Shift+D)"
-      >
-        W
-      </button>
-
-      {/* Panel -- conditionally rendered */}
-      {() =>
-        isOpen() ? (
-          <div style={PANEL_STYLE}>
-            {/* Header */}
-            <div style="display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-bottom:1px solid #2a2a4a;background:#16163a;">
-              <div style="display:flex;align-items:center;gap:8px;">
-                <span style="font-weight:700;font-size:12px;color:#818cf8;">
-                  What DevTools
-                </span>
-                <div
-                  style={() =>
-                    'width:8px;height:8px;border-radius:50%;background:' +
-                    getHealth().color +
-                    ';'
-                  }
-                  title={() => getHealth().label}
-                />
-              </div>
-              <button
-                onclick={() => isOpen(false)}
-                style="background:none;border:none;color:#6a6a8a;cursor:pointer;font-size:14px;"
-              >
-                x
-              </button>
-            </div>
-
-            {/* Tabs */}
-            <div style="display:flex;gap:2px;padding:6px 8px;border-bottom:1px solid #2a2a4a;flex-wrap:wrap;">
-              <button
-                style={tabStyle('overview')}
-                onclick={() => activeTab('overview')}
-              >
-                Overview
-              </button>
-              <button
-                style={tabStyle('signals')}
-                onclick={() => activeTab('signals')}
-              >
-                Signals ({() => snapshot().signals.length})
-              </button>
-              <button
-                style={tabStyle('effects')}
-                onclick={() => activeTab('effects')}
-              >
-                Effects ({() => snapshot().effects.length})
-              </button>
-              <button
-                style={tabStyle('components')}
-                onclick={() => activeTab('components')}
-              >
-                Components ({() => snapshot().components.length})
-              </button>
-              <button
-                style={tabStyle('errors')}
-                onclick={() => activeTab('errors')}
-              >
-                Errors ({() => recentErrors().length})
-              </button>
-            </div>
+  }
 
-            {/* Content */}
-            <div style="overflow-y:auto;flex:1;">
-              {() => {
-                const tab = activeTab();
-                if (tab === 'overview') return renderOverview();
-                if (tab === 'signals') return renderSignals();
-                if (tab === 'effects') return renderEffects();
-                if (tab === 'components') return renderComponents();
-                if (tab === 'errors') return renderErrors();
-                return renderOverview();
-              }}
-            </div>
-          </div>
-        ) : null
-      }
-    </>
-  );
+  return root;
 }
 
 function formatValue(value) {
   if (value === null) return 'null';
   if (value === undefined) return 'undefined';
-  if (typeof value === 'string')
-    return `"${value.length > 30 ? value.slice(0, 30) + '...' : value}"`;
+  if (typeof value === 'string') return `"${value.length > 30 ? value.slice(0, 30) + '...' : value}"`;
   if (typeof value === 'object') {
     try {
       const str = JSON.stringify(value);

package/src/index.js

@@ -31,6 +31,10 @@ const subsToSignalId = new WeakMap();
 const errors = [];
 const MAX_ERRORS = 100;
 
+// Hydration mismatch log (capped at 50)
+const hydrationMismatches = [];
+const MAX_HYDRATION_MISMATCHES = 50;
+
 // Event listeners for the DevPanel
 const listeners = new Set();
 
@@ -226,12 +230,15 @@ export function unregisterEffect(e) {
 /**
  * Capture a runtime error.
  */
-function captureError(err, context) {
+export function captureError(err, typeOrContext, context) {
+  const resolvedContext = typeof typeOrContext === 'string'
+    ? { ...(context || {}), type: typeOrContext }
+    : (typeOrContext || context || {});
   const entry = {
     message: err?.message || String(err),
     stack: err?.stack || null,
-    type: context?.type || 'unknown',
-    effectId: context?.effect?._devId || null,
+    type: resolvedContext?.type || 'unknown',
+    effectId: resolvedContext?.effect?._devId || null,
     timestamp: Date.now(),
   };
   errors.push(entry);
@@ -314,6 +321,7 @@ export function getSnapshot(opts = {}) {
     effects: effectList,
     components: componentList,
     errors: errors.slice(),
+    hydrationMismatches: hydrationMismatches.slice(),
   };
 }
 
@@ -328,6 +336,32 @@ export function getErrors(opts = {}) {
   return errors.slice();
 }
 
+/**
+ * Get captured hydration mismatches.
+ * @param {object} [opts]
+ * @param {number} [opts.since] - Only mismatches after this timestamp
+ */
+export function getHydrationMismatches(opts = {}) {
+  const { since } = opts;
+  if (since) return hydrationMismatches.filter(m => m.timestamp > since);
+  return hydrationMismatches.slice();
+}
+
+/**
+ * Reset devtools registries and captured logs.
+ */
+export function resetDevTools() {
+  signals.clear();
+  effects.clear();
+  components.clear();
+  errors.length = 0;
+  hydrationMismatches.length = 0;
+  listeners.clear();
+  signalId = 0;
+  effectId = 0;
+  componentId = 0;
+}
+
 /**
  * Install devtools. Call once at app startup.
  * Wires into what-core's __DEV__ hooks and exposes `window.__WHAT_DEVTOOLS__`.
@@ -341,10 +375,24 @@ export function installDevTools(core) {
   const hooks = {
     onSignalCreate: (sig) => registerSignal(sig),
     onSignalUpdate: (sig) => notifySignalUpdate(sig),
+    onSignalDispose: (sig) => unregisterSignal(sig),
     onEffectCreate: (e) => registerEffect(e),
     onEffectDispose: (e) => unregisterEffect(e),
     onEffectRun: (e) => trackEffectRun(e),
     onError: (err, context) => captureError(err, context),
+    onHydrationMismatch: (info) => {
+      const entry = {
+        type: 'hydration_mismatch',
+        component: info.component,
+        expected: info.expected,
+        actual: info.actual,
+        mismatchCount: info.mismatchCount,
+        timestamp: Date.now(),
+      };
+      hydrationMismatches.push(entry);
+      if (hydrationMismatches.length > MAX_HYDRATION_MISMATCHES) hydrationMismatches.shift();
+      emit('hydration:mismatch', entry);
+    },
     onComponentMount: (ctx) => {
       const name = ctx.Component?.displayName || ctx.Component?.name || 'Anonymous';
       const parentDevId = ctx._parentCtx?._devId || null;
@@ -362,11 +410,13 @@ export function installDevTools(core) {
     if (typeof window !== 'undefined') window.__WHAT_CORE__ = core;
   } else {
     try {
-      import('what-core').then(mod => {
+      import('what-core/devtools').then(mod => {
         if (mod.__setDevToolsHooks) mod.__setDevToolsHooks(hooks);
-        if (typeof window !== 'undefined') window.__WHAT_CORE__ = mod;
-      }).catch(() => {});
-    } catch {}
+        if (typeof window !== 'undefined') window.__WHAT_CORE_DEVTOOLS__ = mod;
+      }).catch((error) => warnDevToolsImportFailure(error));
+    } catch (error) {
+      warnDevToolsImportFailure(error);
+    }
   }
 
   if (typeof window !== 'undefined') {
@@ -375,13 +425,26 @@ export function installDevTools(core) {
       get effects() { return getSnapshot().effects; },
       get components() { return getSnapshot().components; },
       get errors() { return getErrors(); },
+      get hydrationMismatches() { return getHydrationMismatches(); },
       getSnapshot,
       getErrors,
+      getHydrationMismatches,
       subscribe,
       safeSerialize,
-      _registries: { signals, effects, components, errors },
+      captureError,
+      resetDevTools,
+      _registries: { signals, effects, components, errors, hydrationMismatches },
     };
   }
 }
 
-export { signals, effects, components, errors };
+export { signals, effects, components, errors, hydrationMismatches };
+
+function warnDevToolsImportFailure(error) {
+  const isDev = typeof process === 'undefined' || process.env?.NODE_ENV !== 'production';
+  if (!isDev || typeof console === 'undefined') return;
+  console.warn(
+    '[what-devtools] Could not import what-core/devtools. Pass installDevTools({ __setDevToolsHooks }) or verify package subpath exports.',
+    error
+  );
+}