npm - @ozsarman/clarityjs - Versions diffs - 0.6.0 - Mend

@ozsarman/clarityjs 0.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (42) hide show

package/src/devtools.js ADDED Viewed

@@ -0,0 +1,765 @@
+/**
+ * Clarity.js — In-Page Developer Tools
+ *
+ * An overlay panel that visualises the live signal graph, component tree,
+ * and render statistics.  Zero-dependency; self-contained in a Shadow DOM
+ * so it never clashes with the host page's CSS.
+ *
+ * Usage:
+ *
+ *   import { initDevtools } from '@ozsarman/clarityjs/devtools';
+ *   initDevtools();                 // auto-attaches to <body>
+ *   initDevtools({ open: true });   // start with panel open
+ *
+ * Environment guard: the module is a no-op in production builds so you
+ * can leave the import in source and gate on NODE_ENV/import.meta.env.
+ *
+ *   if (import.meta.env.DEV) initDevtools();
+ *
+ * Keyboard shortcut:  Ctrl+Shift+D / ⌘⇧D  — toggle panel visibility
+ *
+ * Author: Claude (Anthropic) + Özdemir Sarman
+ */
+import { signal, effect, batch } from './runtime.js';
+// ─── DevTools Protocol (postMessage bridge) ───────────────────────────────────
+//
+// The in-page devtools communicates with the browser extension panel via
+// window.postMessage so there's no need for a background service worker.
+//
+// Message shapes:
+//   Page → Extension:  { source: 'clarity-devtools', type, payload }
+//   Extension → Page:  { source: 'clarity-devtools-ext', type, payload }
+//
+// Types (page → ext):
+//   'init'             — devtools panel opened; send full snapshot
+//   'component:add'    — new component mounted
+//   'component:remove' — component unmounted
+//   'signal:update'    — signal value changed
+//   'render:tick'      — component re-rendered
+//
+// Types (ext → page):
+//   'inspect'          — highlight a component in the page
+//   'get:snapshot'     — request full state snapshot
+const _ORIGIN = '*'; // set to your app origin for production
+const _SOURCE_PAGE = 'clarity-devtools';
+const _SOURCE_EXT  = 'clarity-devtools-ext';
+function _postToExtension(type, payload) {
+  try {
+    window.postMessage({ source: _SOURCE_PAGE, type, payload }, _ORIGIN);
+  } catch {}
+}
+function _listenFromExtension() {
+  if (typeof window === 'undefined') return () => {};
+  function handler(evt) {
+    if (evt.data?.source !== _SOURCE_EXT) return;
+    const { type, payload } = evt.data;
+    if (type === 'get:snapshot') _sendFullSnapshot();
+    if (type === 'inspect')      _highlightComponent(payload?.id);
+    if (type === 'set:signal')   _setSignalValue(payload?.id, payload?.value);
+  }
+  window.addEventListener('message', handler);
+  return () => window.removeEventListener('message', handler);
+}
+function _sendFullSnapshot() {
+  _postToExtension('snapshot', {
+    components: [..._components.values()].map(c => ({
+      id:          c.id,
+      name:        c.name,
+      renderCount: c.renderCount,
+      signals:     [...c.signals].map(id => {
+        const s = _signals.get(id);
+        return s ? { id, label: s.label, value: _safeStringify(s.sig) } : null;
+      }).filter(Boolean),
+    })),
+    signals: [..._signals.values()].map(s => ({
+      id:    s.id,
+      label: s.label,
+      value: _safeStringify(s.sig),
+    })),
+  });
+}
+function _highlightComponent(id) {
+  const c = _components.get(id);
+  if (!c?.element) return;
+  const el = c.element;
+  const prev = el.style.outline;
+  el.style.outline = '2px solid #7c3aed';
+  setTimeout(() => { el.style.outline = prev; }, 2000);
+}
+function _setSignalValue(signalId, rawValue) {
+  const s = _signals.get(signalId);
+  if (!s?.sig?.set) return;
+  try {
+    const parsed = JSON.parse(rawValue);
+    s.sig.set(parsed);
+  } catch {
+    s.sig.set(rawValue);
+  }
+}
+function _safeStringify(sig) {
+  try { return JSON.stringify(sig?.peek?.() ?? sig?.get?.()); } catch { return 'null'; }
+}
+// ─── Internal registry ────────────────────────────────────────────────────────
+// These are populated by runtime.js patches below.
+/** Map<id, { name, signals, renderCount, renderTimes, element }> */
+const _components = new Map();
+/** Map<id, { label, sig, updateCount }> */
+const _signals    = new Map();
+/** Rolling performance timeline: [{ componentId, name, duration, ts }] */
+const _perfTimeline = [];
+const _MAX_TIMELINE = 200;
+let _nextId = 1;
+// ─── Public instrumentation API (called by runtime stubs) ─────────────────────
+export function _devRegisterComponent(name, element) {
+  const id = _nextId++;
+  const entry = { id, name, signals: new Set(), renderCount: 0, renderTimes: [], element };
+  _components.set(id, entry);
+  element.__devtools_id = id;
+  _notifyPanel();
+  _postToExtension('component:add', { id, name });
+  return id;
+}
+export function _devUnregisterComponent(id) {
+  _components.delete(id);
+  _notifyPanel();
+  _postToExtension('component:remove', { id });
+}
+export function _devRegisterSignal(label, sig) {
+  const id = _nextId++;
+  const entry = { id, label, sig, updateCount: 0 };
+  _signals.set(id, entry);
+  sig.__devtools_id = id;
+  // Watch for value changes and broadcast; skip initial subscription fire
+  if (typeof effect === 'function') {
+    let _first = true;
+    try {
+      effect(() => {
+        const val = sig.get?.();
+        if (_first) { _first = false; return; }
+        entry.updateCount++;
+        _postToExtension('signal:update', { id, label, value: JSON.stringify(val) });
+        _notifyPanel();
+      });
+    } catch {}
+  }
+  _notifyPanel();
+  return id;
+}
+/**
+ * Called by runtime when a signal is updated externally (without effect tracking).
+ * Optional — enriches update frequency counts shown in the Perf tab.
+ */
+export function _devRecordSignalUpdate(signalId) {
+  const s = _signals.get(signalId);
+  if (s) {
+    s.updateCount++;
+    _notifyPanel();
+  }
+}
+/**
+ * Record a component render.
+ *
+ * @param {number} componentId
+ * @param {number} [durationMs] - render duration from performance.now() delta (optional)
+ */
+export function _devRecordRender(componentId, durationMs) {
+  const c = _components.get(componentId);
+  if (c) {
+    c.renderCount++;
+    if (typeof durationMs === 'number' && isFinite(durationMs)) {
+      c.renderTimes.push(durationMs);
+      // Keep only the last 50 measurements per component
+      if (c.renderTimes.length > 50) c.renderTimes.shift();
+      // Add to rolling timeline
+      _perfTimeline.push({ componentId, name: c.name, duration: durationMs, ts: Date.now() });
+      if (_perfTimeline.length > _MAX_TIMELINE) _perfTimeline.shift();
+    }
+    _notifyPanel();
+    _postToExtension('render:tick', { id: componentId, count: c.renderCount, durationMs });
+  }
+}
+/**
+ * Convenience helpers for wrapping a render call with performance timing.
+ * Usage in runtime.js:
+ *   const t0 = _devRenderStart();
+ *   // ...render...
+ *   _devRenderEnd(componentId, t0);
+ */
+export function _devRenderStart() {
+  return typeof performance !== 'undefined' ? performance.now() : Date.now();
+}
+export function _devRenderEnd(componentId, t0) {
+  const duration = (typeof performance !== 'undefined' ? performance.now() : Date.now()) - t0;
+  _devRecordRender(componentId, duration);
+}
+/**
+ * Clear all performance timing data (does not reset render counts).
+ */
+export function _devClearPerfData() {
+  _perfTimeline.length = 0;
+  for (const c of _components.values()) c.renderTimes = [];
+  for (const s of _signals.values()) s.updateCount = 0;
+  _notifyPanel();
+}
+// ─── Notification ─────────────────────────────────────────────────────────────
+let _panel = null; // reference to the live DevPanel instance
+function _notifyPanel() {
+  _panel?.refresh();
+}
+// ─── initDevtools ─────────────────────────────────────────────────────────────
+/**
+ * Mount the devtools overlay into the current page.
+ *
+ * @param {object} [options]
+ * @param {boolean} [options.open=false]      - Whether the panel starts visible
+ * @param {string}  [options.position='br']   - Corner: 'tl'|'tr'|'bl'|'br'
+ * @param {HTMLElement} [options.container]   - Mount target (default: document.body)
+ * @returns {{ dispose: () => void }}
+ */
+export function initDevtools({ open = false, position = 'br', container } = {}) {
+  if (typeof document === 'undefined') {
+    // SSR / Node.js — no-op
+    return { dispose: () => {} };
+  }
+  if (_panel) {
+    console.warn('[Clarity DevTools] Already initialised. Call dispose() first to re-init.');
+    return { dispose: () => _panel?.dispose() };
+  }
+  const root = container ?? document.body;
+  _panel = new DevPanel({ open, position });
+  root.appendChild(_panel.el);
+  _panel.refresh();
+  // Keyboard shortcut: Ctrl+Shift+D / Cmd+Shift+D
+  function _onKey(e) {
+    if ((e.ctrlKey || e.metaKey) && e.shiftKey && e.key === 'D') {
+      e.preventDefault();
+      _panel?.toggle();
+    }
+  }
+  window.addEventListener('keydown', _onKey);
+  // Start listening for extension messages
+  const _stopExtListener = _listenFromExtension();
+  // Announce to extension that devtools are available
+  _postToExtension('init', { version: '0.2.0' });
+  _sendFullSnapshot();
+  function dispose() {
+    window.removeEventListener('keydown', _onKey);
+    _stopExtListener();
+    _panel?.dispose();
+    _panel = null;
+  }
+  return { dispose };
+}
+// ─── DevPanel class ───────────────────────────────────────────────────────────
+class DevPanel {
+  constructor({ open, position }) {
+    this._open     = signal(open);
+    this._tab      = signal('components'); // 'components' | 'signals' | 'perf'
+    this._disposed = false;
+    // Host element (outside Shadow DOM so it can be positioned)
+    this.el = document.createElement('div');
+    this.el.setAttribute('data-clarity-devtools', '');
+    Object.assign(this.el.style, _positionStyle(position));
+    // Shadow root for style isolation
+    const shadow = this.el.attachShadow({ mode: 'open' });
+    // Style injection
+    const style = document.createElement('style');
+    style.textContent = _CSS;
+    shadow.appendChild(style);
+    // Panel wrapper
+    this._wrapper = document.createElement('div');
+    this._wrapper.className = 'panel';
+    shadow.appendChild(this._wrapper);
+    // Render initial structure
+    this._buildShell();
+    // Reactive open/close
+    this._stopEffect = effect(() => {
+      this._wrapper.dataset.open = String(this._open.get());
+    });
+  }
+  // ── Public ────────────────────────────────────────────────────────────────
+  toggle() {
+    this._open.update(v => !v);
+  }
+  refresh() {
+    if (this._disposed) return;
+    this._renderBody();
+  }
+  dispose() {
+    this._disposed = true;
+    this._stopEffect?.();
+    this.el.remove();
+  }
+  // ── Private ───────────────────────────────────────────────────────────────
+  _buildShell() {
+    // Toggle button (always visible)
+    const btn = document.createElement('button');
+    btn.className = 'toggle-btn';
+    btn.title     = 'Clarity DevTools (Ctrl+Shift+D)';
+    btn.textContent = '⚡';
+    btn.addEventListener('click', () => this.toggle());
+    this._wrapper.appendChild(btn);
+    // Panel body (hidden when closed)
+    this._body = document.createElement('div');
+    this._body.className = 'body';
+    this._wrapper.appendChild(this._body);
+    // Header
+    const header = document.createElement('div');
+    header.className = 'header';
+    header.innerHTML = `
+      <span class="title">Clarity DevTools</span>
+      <span class="tabs">
+        <button data-tab="components">Components</button>
+        <button data-tab="signals">Signals</button>
+        <button data-tab="perf">Perf</button>
+      </span>
+      <button class="close-btn" title="Close">✕</button>
+    `;
+    header.querySelector('.close-btn').addEventListener('click', () => this.toggle());
+    header.querySelectorAll('[data-tab]').forEach(b => {
+      b.addEventListener('click', () => {
+        this._tab.set(b.dataset.tab);
+        this._renderBody();
+      });
+    });
+    this._body.appendChild(header);
+    this._content = document.createElement('div');
+    this._content.className = 'content';
+    this._body.appendChild(this._content);
+  }
+  _renderBody() {
+    if (!this._content) return;
+    const tab = this._tab.get();
+    this._content.innerHTML = '';
+    // Highlight active tab button
+    this._body.querySelectorAll('[data-tab]').forEach(b => {
+      b.classList.toggle('active', b.dataset.tab === tab);
+    });
+    if (tab === 'components') this._renderComponents();
+    else if (tab === 'signals')    this._renderSignals();
+    else if (tab === 'perf')       this._renderPerf();
+  }
+  _renderComponents() {
+    if (_components.size === 0) {
+      this._content.innerHTML = '<p class="empty">No components registered.<br>Import <code>clarity-js/devtools</code> and call <code>initDevtools()</code>.</p>';
+      return;
+    }
+    const ul = document.createElement('ul');
+    ul.className = 'list';
+    for (const [, c] of _components) {
+      const li = document.createElement('li');
+      li.className = 'item';
+      li.innerHTML = `
+        <span class="item-icon">🧩</span>
+        <span class="item-label">${_esc(c.name)}</span>
+        <span class="item-meta">${c.signals.size} signals · ${c.renderCount} renders</span>
+      `;
+      ul.appendChild(li);
+    }
+    this._content.appendChild(ul);
+  }
+  _renderSignals() {
+    if (_signals.size === 0) {
+      this._content.innerHTML = '<p class="empty">No signals tracked yet.</p>';
+      return;
+    }
+    const ul = document.createElement('ul');
+    ul.className = 'list';
+    for (const [, s] of _signals) {
+      let displayVal;
+      try {
+        const raw = s.sig.peek();
+        displayVal = _stringify(raw);
+      } catch {
+        displayVal = '<error>';
+      }
+      const li = document.createElement('li');
+      li.className = 'item';
+      li.innerHTML = `
+        <span class="item-icon">⚡</span>
+        <span class="item-label">${_esc(s.label)}</span>
+        <span class="item-value">${_esc(displayVal)}</span>
+      `;
+      ul.appendChild(li);
+    }
+    this._content.appendChild(ul);
+  }
+  _renderPerf() {
+    const totalRenders    = [..._components.values()].reduce((s, c) => s + c.renderCount, 0);
+    const totalSigUpdates = [..._signals.values()].reduce((s, sig) => s + sig.updateCount, 0);
+    const hasTiming       = [..._components.values()].some(c => c.renderTimes.length > 0);
+    const div = document.createElement('div');
+    // ── Summary stats ────────────────────────────────────────────────────────
+    div.innerHTML = `
+      <div class="perf-stat">
+        <span class="stat-label">Total renders</span>
+        <span class="stat-value">${totalRenders}</span>
+      </div>
+      <div class="perf-stat">
+        <span class="stat-label">Signal updates</span>
+        <span class="stat-value">${totalSigUpdates}</span>
+      </div>
+      <div class="perf-stat">
+        <span class="stat-label">Components tracked</span>
+        <span class="stat-value">${_components.size}</span>
+      </div>
+    `;
+    // ── Clear button ─────────────────────────────────────────────────────────
+    const clearBtn = document.createElement('button');
+    clearBtn.className  = 'perf-clear-btn';
+    clearBtn.textContent = '🗑 Clear perf data';
+    clearBtn.addEventListener('click', () => {
+      _devClearPerfData();
+      this._renderBody();
+    });
+    div.appendChild(clearBtn);
+    // ── Render timing section ─────────────────────────────────────────────────
+    const topByRenders = [..._components.values()]
+      .sort((a, b) => b.renderCount - a.renderCount)
+      .slice(0, 10);
+    if (topByRenders.length > 0) {
+      const label1 = document.createElement('p');
+      label1.className = 'section-label';
+      label1.textContent = hasTiming ? 'Render counts + avg time (ms)' : 'Most-rendered components';
+      div.appendChild(label1);
+      const ul = document.createElement('ul');
+      ul.className = 'list';
+      const maxCount = topByRenders[0].renderCount || 1;
+      for (const c of topByRenders) {
+        const pct = Math.round((c.renderCount / maxCount) * 100);
+        const avgMs = c.renderTimes.length > 0
+          ? (c.renderTimes.reduce((a, b) => a + b, 0) / c.renderTimes.length).toFixed(2)
+          : null;
+        const maxMs = c.renderTimes.length > 0
+          ? Math.max(...c.renderTimes).toFixed(2)
+          : null;
+        // Colour-code avg time: green < 4ms, yellow < 16ms, red >= 16ms
+        let timeColour = '#a6e3a1';
+        if (avgMs !== null) {
+          if (avgMs >= 16) timeColour = '#f38ba8';
+          else if (avgMs >= 4)  timeColour = '#f9e2af';
+        }
+        const li = document.createElement('li');
+        li.className = 'item';
+        li.innerHTML = `
+          <span class="item-icon">🔁</span>
+          <span class="item-label">${_esc(c.name)}</span>
+          <span class="bar-wrap"><span class="bar" style="width:${pct}%"></span></span>
+          <span class="item-meta">${c.renderCount}×</span>
+          ${avgMs !== null
+            ? `<span class="item-ms" style="color:${timeColour}" title="max: ${maxMs}ms">⏱${avgMs}ms</span>`
+            : ''}
+        `;
+        ul.appendChild(li);
+      }
+      div.appendChild(ul);
+    }
+    // ── Signal update frequency ───────────────────────────────────────────────
+    const activeSignals = [..._signals.values()]
+      .filter(s => s.updateCount > 0)
+      .sort((a, b) => b.updateCount - a.updateCount)
+      .slice(0, 8);
+    if (activeSignals.length > 0) {
+      const label2 = document.createElement('p');
+      label2.className = 'section-label';
+      label2.textContent = 'Most-updated signals';
+      div.appendChild(label2);
+      const ul2 = document.createElement('ul');
+      ul2.className = 'list';
+      const maxSig = activeSignals[0].updateCount || 1;
+      for (const s of activeSignals) {
+        const pct = Math.round((s.updateCount / maxSig) * 100);
+        const li = document.createElement('li');
+        li.className = 'item';
+        li.innerHTML = `
+          <span class="item-icon">⚡</span>
+          <span class="item-label">${_esc(s.label)}</span>
+          <span class="bar-wrap"><span class="bar bar--signal" style="width:${pct}%"></span></span>
+          <span class="item-meta">${s.updateCount}×</span>
+        `;
+        ul2.appendChild(li);
+      }
+      div.appendChild(ul2);
+    }
+    // ── Rolling timeline sparkline ────────────────────────────────────────────
+    if (_perfTimeline.length > 1) {
+      const label3 = document.createElement('p');
+      label3.className = 'section-label';
+      label3.textContent = `Render timeline (last ${_perfTimeline.length})`;
+      div.appendChild(label3);
+      // Mini SVG sparkline — last 60 ticks
+      const recent = _perfTimeline.slice(-60);
+      const maxDur = Math.max(...recent.map(t => t.duration), 1);
+      const W = 328, H = 40, pad = 2;
+      const pts = recent.map((t, i) => {
+        const x = pad + (i / (recent.length - 1)) * (W - pad * 2);
+        const y = H - pad - ((t.duration / maxDur) * (H - pad * 2));
+        return `${x.toFixed(1)},${y.toFixed(1)}`;
+      }).join(' ');
+      const sparkDiv = document.createElement('div');
+      sparkDiv.className = 'sparkline-wrap';
+      sparkDiv.innerHTML = `
+        <svg viewBox="0 0 ${W} ${H}" xmlns="http://www.w3.org/2000/svg" style="width:100%;height:${H}px">
+          <polyline points="${_esc(pts)}" fill="none" stroke="#7c3aed" stroke-width="1.5" stroke-linejoin="round"/>
+          <line x1="${pad}" y1="${H - pad}" x2="${W - pad}" y2="${H - pad}" stroke="#313244" stroke-width="1"/>
+        </svg>
+        <div class="spark-labels">
+          <span>0ms</span>
+          <span>${maxDur.toFixed(1)}ms peak</span>
+        </div>
+      `;
+      div.appendChild(sparkDiv);
+    } else if (_components.size > 0 && !hasTiming) {
+      const hint = document.createElement('p');
+      hint.className = 'perf-hint';
+      hint.innerHTML = `Timing data appears once <code>_devRenderStart/End</code><br>is wired in the runtime.`;
+      div.appendChild(hint);
+    }
+    this._content.appendChild(div);
+  }
+}
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+function _positionStyle(pos) {
+  const base = { position: 'fixed', zIndex: '2147483647', fontFamily: 'monospace' };
+  switch (pos) {
+    case 'tl': return { ...base, top:    '16px', left:   '16px' };
+    case 'tr': return { ...base, top:    '16px', right:  '16px' };
+    case 'bl': return { ...base, bottom: '16px', left:   '16px' };
+    case 'br':
+    default:   return { ...base, bottom: '16px', right:  '16px' };
+  }
+}
+function _esc(str) {
+  return String(str)
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;');
+}
+function _stringify(val) {
+  if (val === undefined) return 'undefined';
+  if (val === null)      return 'null';
+  try {
+    const str = JSON.stringify(val);
+    return str.length > 80 ? str.slice(0, 77) + '…' : str;
+  } catch {
+    return String(val);
+  }
+}
+// ─── Embedded CSS ─────────────────────────────────────────────────────────────
+const _CSS = `
+  :host { all: initial; }
+  .panel {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+  }
+  .toggle-btn {
+    width: 36px; height: 36px;
+    border-radius: 50%;
+    border: none;
+    background: #7c3aed;
+    color: #fff;
+    font-size: 18px;
+    cursor: pointer;
+    box-shadow: 0 2px 8px rgba(0,0,0,.4);
+    transition: transform .15s;
+  }
+  .toggle-btn:hover { transform: scale(1.1); }
+  .body {
+    display: none;
+    flex-direction: column;
+    width: 360px;
+    max-height: 520px;
+    background: #1e1e2e;
+    color: #cdd6f4;
+    border-radius: 10px;
+    box-shadow: 0 8px 32px rgba(0,0,0,.5);
+    margin-bottom: 8px;
+    overflow: hidden;
+    font-size: 12px;
+    line-height: 1.5;
+  }
+  .panel[data-open="true"] .body { display: flex; }
+  .header {
+    display: flex;
+    align-items: center;
+    padding: 8px 10px;
+    background: #181825;
+    gap: 8px;
+    flex-shrink: 0;
+  }
+  .title { font-weight: 700; color: #a6e3a1; flex: 0 0 auto; }
+  .tabs { display: flex; gap: 4px; flex: 1; }
+  .tabs button {
+    background: none; border: none; color: #6c7086;
+    cursor: pointer; padding: 2px 8px; border-radius: 4px;
+    font-size: 11px;
+  }
+  .tabs button.active { background: #313244; color: #cdd6f4; }
+  .tabs button:hover:not(.active) { color: #cdd6f4; }
+  .close-btn {
+    background: none; border: none; color: #6c7086;
+    cursor: pointer; font-size: 14px; padding: 2px 4px;
+  }
+  .close-btn:hover { color: #f38ba8; }
+  .content { overflow-y: auto; flex: 1; padding: 8px; }
+  .content::-webkit-scrollbar { width: 4px; }
+  .content::-webkit-scrollbar-thumb { background: #45475a; border-radius: 2px; }
+  .empty {
+    color: #6c7086; text-align: center;
+    padding: 24px 16px; margin: 0;
+    font-size: 12px; line-height: 1.8;
+  }
+  .empty code { background: #313244; padding: 1px 5px; border-radius: 3px; }
+  .list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
+  .item {
+    display: flex; align-items: center; gap: 6px;
+    padding: 5px 8px; border-radius: 6px;
+    background: #181825;
+  }
+  .item-icon  { flex: 0 0 auto; }
+  .item-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .item-meta  { color: #6c7086; flex: 0 0 auto; font-size: 10px; }
+  .item-value {
+    color: #fab387; flex: 0 0 auto; max-width: 120px;
+    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px;
+  }
+  .perf-stat {
+    display: flex; justify-content: space-between;
+    padding: 6px 8px; background: #181825;
+    border-radius: 6px; margin-bottom: 4px;
+  }
+  .stat-label { color: #a6adc8; }
+  .stat-value { font-weight: 700; color: #89b4fa; }
+  .section-label { margin: 12px 0 6px; color: #a6adc8; font-size: 10px; text-transform: uppercase; }
+  .bar-wrap { flex: 1; height: 6px; background: #313244; border-radius: 3px; overflow: hidden; margin: 0 6px; }
+  .bar           { display: block; height: 100%; background: #7c3aed; border-radius: 3px; }
+  .bar--signal   { background: #89b4fa; }
+  .item-ms {
+    flex: 0 0 auto; font-size: 10px; font-weight: 600;
+    white-space: nowrap; padding-left: 2px;
+  }
+  .perf-clear-btn {
+    display: block; width: 100%;
+    background: #313244; border: none; color: #a6adc8;
+    border-radius: 6px; padding: 5px 10px; margin: 8px 0;
+    cursor: pointer; font-size: 11px; text-align: left;
+  }
+  .perf-clear-btn:hover { background: #45475a; color: #cdd6f4; }
+  .sparkline-wrap { margin-top: 6px; }
+  .spark-labels {
+    display: flex; justify-content: space-between;
+    color: #585b70; font-size: 9px; margin-top: 2px;
+  }
+  .perf-hint {
+    color: #585b70; font-size: 11px; text-align: center;
+    padding: 12px 8px; margin: 8px 0;
+    background: #181825; border-radius: 6px; line-height: 1.7;
+  }
+  .perf-hint code { background: #313244; padding: 1px 4px; border-radius: 3px; }
+`;