@json-render/devtools 0.18.0

package/dist/index.js

@@ -0,0 +1,3311 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  DEVTOOLS_KEY_ATTR: () => DEVTOOLS_KEY_ATTR,
+  actionsTab: () => actionsTab,
+  buildCatalogDisplayData: () => buildCatalogDisplayData,
+  catalogTab: () => catalogTab,
+  createEventStore: () => createEventStore,
+  createPanel: () => createPanel,
+  createSelectionBus: () => createSelectionBus,
+  createStubTab: () => createStubTab,
+  extractSpecFromParts: () => extractSpecFromParts,
+  findAllElementsByKey: () => findAllElementsByKey,
+  findElementByKey: () => findElementByKey,
+  formatTime: () => formatTime,
+  h: () => h,
+  highlightElement: () => highlightElement,
+  isProduction: () => isProduction,
+  jsonPreview: () => jsonPreview,
+  pickerTab: () => pickerTab,
+  recordEvent: () => recordEvent,
+  recordUsage: () => recordUsage,
+  replaceChildren: () => replaceChildren,
+  scanMessageParts: () => scanMessageParts,
+  setHoverHighlight: () => setHoverHighlight,
+  specTab: () => specTab,
+  startPicker: () => startPicker,
+  stateTab: () => stateTab,
+  streamTab: () => streamTab,
+  tapJsonRenderStream: () => tapJsonRenderStream,
+  tapYamlStream: () => tapYamlStream
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/event-store.ts
+function createEventStore(options = {}) {
+  const bufferSize = Math.max(1, options.bufferSize ?? 500);
+  const events = [];
+  const listeners = /* @__PURE__ */ new Set();
+  function notify() {
+    for (const listener of listeners) {
+      try {
+        listener();
+      } catch (err) {
+        if (process.env.NODE_ENV !== "production") {
+          console.error("[json-render devtools] listener threw:", err);
+        }
+      }
+    }
+  }
+  return {
+    push(event) {
+      events.push(event);
+      if (events.length > bufferSize) {
+        events.splice(0, events.length - bufferSize);
+      }
+      notify();
+    },
+    snapshot() {
+      return events.slice();
+    },
+    subscribe(listener) {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    },
+    clear() {
+      if (events.length === 0) return;
+      events.length = 0;
+      notify();
+    },
+    size() {
+      return events.length;
+    }
+  };
+}
+
+// src/prod-guard.ts
+function isProduction() {
+  if (typeof process !== "undefined" && process.env) {
+    return process.env.NODE_ENV === "production";
+  }
+  return false;
+}
+
+// src/panel/dom.ts
+function appendChild(parent, child) {
+  if (child === null || child === void 0 || child === false) return;
+  if (Array.isArray(child)) {
+    for (const c of child) appendChild(parent, c);
+    return;
+  }
+  if (child instanceof Node) {
+    parent.appendChild(child);
+    return;
+  }
+  parent.appendChild(document.createTextNode(String(child)));
+}
+function h(tag, attrs, ...children) {
+  const el = document.createElement(tag);
+  if (attrs) {
+    for (const [key, value] of Object.entries(attrs)) {
+      if (value === null || value === void 0 || value === false) continue;
+      if (key === "className") {
+        el.className = String(value);
+      } else if (key === "style" && typeof value === "object") {
+        Object.assign(el.style, value);
+      } else if (key.startsWith("on") && typeof value === "function") {
+        el.addEventListener(key.slice(2).toLowerCase(), value);
+      } else if (key === "dataset" && typeof value === "object") {
+        for (const [dk, dv] of Object.entries(
+          value
+        )) {
+          el.dataset[dk] = String(dv);
+        }
+      } else if (typeof value === "boolean") {
+        if (value) el.setAttribute(key, "");
+      } else {
+        el.setAttribute(key, String(value));
+      }
+    }
+  }
+  for (const child of children) appendChild(el, child);
+  return el;
+}
+function replaceChildren(parent, ...next) {
+  while (parent.firstChild) parent.removeChild(parent.firstChild);
+  for (const n of next) appendChild(parent, n);
+}
+function jsonPreview(value, max = 140) {
+  let text;
+  try {
+    text = JSON.stringify(value);
+  } catch {
+    text = String(value);
+  }
+  if (text === void 0) return "undefined";
+  if (text.length > max) return text.slice(0, max - 1) + "\u2026";
+  return text;
+}
+function formatTime(at) {
+  const d = new Date(at);
+  const hh = String(d.getHours()).padStart(2, "0");
+  const mm = String(d.getMinutes()).padStart(2, "0");
+  const ss = String(d.getSeconds()).padStart(2, "0");
+  const ms = String(d.getMilliseconds()).padStart(3, "0");
+  return `${hh}:${mm}:${ss}.${ms}`;
+}
+
+// src/picker.ts
+var DEVTOOLS_KEY_ATTR = "data-jr-key";
+var PICKER_OVERLAY_ID = "__jr_devtools_picker_overlay";
+var PICKER_LABEL_ID = "__jr_devtools_picker_label";
+var HOVER_OVERLAY_ID = "__jr_devtools_hover_overlay";
+var HOVER_LABEL_ID = "__jr_devtools_hover_label";
+function computeBounds(el) {
+  const own = el.getBoundingClientRect();
+  if (own.width > 0 && own.height > 0) return own;
+  let left = Infinity;
+  let top = Infinity;
+  let right = -Infinity;
+  let bottom = -Infinity;
+  const walker = document.createTreeWalker(el, NodeFilter.SHOW_ELEMENT);
+  let node = walker.nextNode();
+  while (node) {
+    const r = node.getBoundingClientRect();
+    if (r.width > 0 && r.height > 0) {
+      if (r.left < left) left = r.left;
+      if (r.top < top) top = r.top;
+      if (r.right > right) right = r.right;
+      if (r.bottom > bottom) bottom = r.bottom;
+    }
+    node = walker.nextNode();
+  }
+  if (!Number.isFinite(left) || !Number.isFinite(top)) return null;
+  return new DOMRect(left, top, right - left, bottom - top);
+}
+function paintOverlay(rect, label, ids) {
+  let ov = document.getElementById(ids.overlay);
+  if (!ov) {
+    ov = document.createElement("div");
+    ov.id = ids.overlay;
+    document.body.appendChild(ov);
+  }
+  ov.style.display = "block";
+  ov.style.left = `${rect.left}px`;
+  ov.style.top = `${rect.top}px`;
+  ov.style.width = `${rect.width}px`;
+  ov.style.height = `${rect.height}px`;
+  let lb = document.getElementById(ids.label);
+  if (!lb) {
+    lb = document.createElement("div");
+    lb.id = ids.label;
+    document.body.appendChild(lb);
+  }
+  lb.textContent = label;
+  lb.style.display = "block";
+  const labelLeft = Math.max(4, rect.left);
+  const labelTop = rect.top >= 24 ? rect.top - 22 : rect.top + rect.height + 4;
+  lb.style.left = `${labelLeft}px`;
+  lb.style.top = `${labelTop}px`;
+  return { overlay: ov, label: lb };
+}
+function hideOverlayPair(ids) {
+  const ov = document.getElementById(ids.overlay);
+  const lb = document.getElementById(ids.label);
+  if (ov) ov.style.display = "none";
+  if (lb) lb.style.display = "none";
+}
+function removeOverlayPair(ids) {
+  const ov = document.getElementById(ids.overlay);
+  const lb = document.getElementById(ids.label);
+  if (ov) ov.remove();
+  if (lb) lb.remove();
+}
+function startPicker(options) {
+  if (typeof document === "undefined") return null;
+  const IDS = { overlay: PICKER_OVERLAY_ID, label: PICKER_LABEL_ID };
+  let currentHover = null;
+  function paint(el) {
+    const rect = computeBounds(el);
+    if (!rect) {
+      hideOverlayPair(IDS);
+      return;
+    }
+    const key = el.getAttribute(DEVTOOLS_KEY_ATTR) ?? "";
+    paintOverlay(
+      rect,
+      `${key}  ${Math.round(rect.width)} \xD7 ${Math.round(rect.height)}`,
+      IDS
+    );
+  }
+  const onMove = (ev) => {
+    const target = ev.target;
+    if (!target || !target.closest) return;
+    const host = target.closest(`[${DEVTOOLS_KEY_ATTR}]`);
+    if (host !== currentHover) currentHover = host;
+    if (host) paint(host);
+    else hideOverlayPair(IDS);
+  };
+  const onClick = (ev) => {
+    ev.preventDefault();
+    ev.stopPropagation();
+    const target = ev.target;
+    const host = target?.closest?.(`[${DEVTOOLS_KEY_ATTR}]`);
+    if (host) {
+      const key = host.getAttribute(DEVTOOLS_KEY_ATTR) ?? "";
+      stop();
+      options.onPick(key);
+    }
+  };
+  const onKey = (ev) => {
+    if (ev.key === "Escape") {
+      ev.preventDefault();
+      stop();
+      options.onCancel?.();
+    }
+  };
+  const onReposition = () => {
+    if (currentHover && currentHover.isConnected) {
+      paint(currentHover);
+    } else if (currentHover) {
+      currentHover = null;
+      hideOverlayPair(IDS);
+    }
+  };
+  function stop() {
+    removeOverlayPair(IDS);
+    currentHover = null;
+    document.documentElement.removeAttribute("data-jr-devtools-picking");
+    document.removeEventListener("mousemove", onMove, true);
+    document.removeEventListener("click", onClick, true);
+    document.removeEventListener("keydown", onKey, true);
+    window.removeEventListener("scroll", onReposition, true);
+    window.removeEventListener("resize", onReposition);
+  }
+  document.documentElement.setAttribute("data-jr-devtools-picking", "true");
+  document.addEventListener("mousemove", onMove, true);
+  document.addEventListener("click", onClick, true);
+  document.addEventListener("keydown", onKey, true);
+  window.addEventListener("scroll", onReposition, true);
+  window.addEventListener("resize", onReposition);
+  return { stop };
+}
+var HOVER_IDS = { overlay: HOVER_OVERLAY_ID, label: HOVER_LABEL_ID };
+var HOVER_EXTRA_CLASS = "__jr_devtools_hover_extra";
+var hoverKey = null;
+var hoverListenersAttached = false;
+var hoverExtraOverlays = [];
+function ensureExtraOverlay(index) {
+  let ov = hoverExtraOverlays[index];
+  if (!ov) {
+    ov = document.createElement("div");
+    ov.className = HOVER_EXTRA_CLASS;
+    document.body.appendChild(ov);
+    hoverExtraOverlays[index] = ov;
+  }
+  return ov;
+}
+function hideExtrasFrom(index) {
+  for (let i = index; i < hoverExtraOverlays.length; i++) {
+    const ov = hoverExtraOverlays[i];
+    if (ov) ov.style.display = "none";
+  }
+}
+function removeAllExtras() {
+  for (const ov of hoverExtraOverlays) ov.remove();
+  hoverExtraOverlays = [];
+}
+function repositionHover() {
+  if (!hoverKey) return;
+  const matches = findAllElementsByKey(hoverKey);
+  const first = matches[0];
+  if (!first) {
+    hideOverlayPair(HOVER_IDS);
+    hideExtrasFrom(0);
+    return;
+  }
+  const firstRect = computeBounds(first);
+  if (!firstRect) {
+    hideOverlayPair(HOVER_IDS);
+    hideExtrasFrom(0);
+    return;
+  }
+  const labelSuffix = matches.length > 1 ? `  (${matches.length} instances)` : "";
+  paintOverlay(
+    firstRect,
+    `${hoverKey}  ${Math.round(firstRect.width)} \xD7 ${Math.round(firstRect.height)}${labelSuffix}`,
+    HOVER_IDS
+  );
+  for (let i = 1; i < matches.length; i++) {
+    const el = matches[i];
+    if (!el) continue;
+    const rect = computeBounds(el);
+    const ov = ensureExtraOverlay(i - 1);
+    if (!rect) {
+      ov.style.display = "none";
+      continue;
+    }
+    ov.style.display = "block";
+    ov.style.left = `${rect.left}px`;
+    ov.style.top = `${rect.top}px`;
+    ov.style.width = `${rect.width}px`;
+    ov.style.height = `${rect.height}px`;
+  }
+  hideExtrasFrom(Math.max(0, matches.length - 1));
+}
+function attachHoverListeners() {
+  if (hoverListenersAttached || typeof window === "undefined") return;
+  hoverListenersAttached = true;
+  window.addEventListener("scroll", repositionHover, true);
+  window.addEventListener("resize", repositionHover);
+}
+function detachHoverListeners() {
+  if (!hoverListenersAttached || typeof window === "undefined") return;
+  hoverListenersAttached = false;
+  window.removeEventListener("scroll", repositionHover, true);
+  window.removeEventListener("resize", repositionHover);
+}
+function setHoverHighlight(key) {
+  if (typeof document === "undefined") return;
+  if (!key) {
+    hoverKey = null;
+    removeOverlayPair(HOVER_IDS);
+    removeAllExtras();
+    detachHoverListeners();
+    return;
+  }
+  hoverKey = key;
+  repositionHover();
+  attachHoverListeners();
+}
+function findElementByKey(key) {
+  if (typeof document === "undefined") return null;
+  return document.querySelector(`[${DEVTOOLS_KEY_ATTR}="${cssEscape(key)}"]`);
+}
+function findAllElementsByKey(key) {
+  if (typeof document === "undefined") return [];
+  const selector = `[${DEVTOOLS_KEY_ATTR}="${cssEscape(key)}"]`;
+  return Array.from(document.querySelectorAll(selector));
+}
+function highlightElement(key, durationMs = 1200) {
+  if (typeof document === "undefined") return;
+  const el = findElementByKey(key);
+  if (!el) return;
+  const rect = computeBounds(el);
+  if (!rect) return;
+  const overlay = document.createElement("div");
+  overlay.className = "__jr_devtools_highlight";
+  overlay.style.cssText = `
+    position: fixed;
+    left: ${rect.left}px;
+    top: ${rect.top}px;
+    width: ${rect.width}px;
+    height: ${rect.height}px;
+    outline: 2px solid #60a5fa;
+    outline-offset: 2px;
+    pointer-events: none;
+    z-index: 2147483645;
+    transition: opacity 0.25s ease-out;
+    opacity: 1;
+  `;
+  document.body.appendChild(overlay);
+  setTimeout(
+    () => {
+      overlay.style.opacity = "0";
+    },
+    Math.max(0, durationMs - 250)
+  );
+  setTimeout(() => {
+    overlay.remove();
+  }, durationMs);
+}
+function cssEscape(value) {
+  if (typeof CSS !== "undefined" && typeof CSS.escape === "function") {
+    return CSS.escape(value);
+  }
+  return value.replace(/["\\]/g, "\\$&");
+}
+
+// src/panel/styles.ts
+var PANEL_CSS = `
+:host {
+  /* Light theme \u2014 default. Overridden by the dark-mode media query below
+     so the panel follows the host OS's \`prefers-color-scheme\`. */
+  --jr-bg: #ffffff;
+  --jr-bg-muted: #f4f4f5;
+  --jr-bg-soft: #fafafa;
+  --jr-fg: #18181b;
+  --jr-fg-muted: #52525b;
+  --jr-fg-dim: #71717a;
+  --jr-border: #e4e4e7;
+  --jr-border-strong: #a1a1aa;
+  --jr-accent: #2563eb;
+  --jr-green: #16a34a;
+  --jr-red: #dc2626;
+  --jr-amber: #d97706;
+  --jr-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  --jr-font-ui: system-ui, -apple-system, "Segoe UI", sans-serif;
+  all: initial;
+  color-scheme: light dark;
+  font-family: var(--jr-font-ui);
+  color: var(--jr-fg);
+  position: fixed;
+  z-index: 2147483647;
+}
+
+@media (prefers-color-scheme: dark) {
+  :host {
+    --jr-bg: #09090b;
+    --jr-bg-muted: #111113;
+    --jr-bg-soft: #17171a;
+    --jr-fg: #fafafa;
+    --jr-fg-muted: #a1a1aa;
+    --jr-fg-dim: #71717a;
+    --jr-border: #27272a;
+    --jr-border-strong: #3f3f46;
+    --jr-accent: #60a5fa;
+    --jr-green: #4ade80;
+    --jr-red: #f87171;
+    --jr-amber: #fbbf24;
+  }
+}
+
+* {
+  box-sizing: border-box;
+}
+
+button {
+  font: inherit;
+  color: inherit;
+  background: transparent;
+  border: 0;
+  cursor: pointer;
+  padding: 0;
+}
+
+/* Floating toggle \u2014 frosted dark-glass badge inspired by Next.js Dev Tools.
+   Always dark regardless of OS \`prefers-color-scheme\` so the affordance
+   reads the same on both light and dark hosts. */
+.jr-toggle {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  border: 0;
+  padding: 0;
+  background: rgba(0, 0, 0, 0.8);
+  -webkit-backdrop-filter: blur(48px);
+  backdrop-filter: blur(48px);
+  color: #ffffff;
+  /* Triple layer: outer hard ring, inner subtle highlight, drop shadow. */
+  box-shadow:
+    0 0 0 1px #171717,
+    inset 0 0 0 1px hsla(0, 0%, 100%, 0.14),
+    0 16px 32px -8px rgba(0, 0, 0, 0.24);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  will-change: scale, background;
+  transition:
+    scale 150ms cubic-bezier(0.23, 0.88, 0.26, 0.92),
+    background 150ms ease;
+}
+.jr-toggle[data-position="bottom-left"] { right: auto; left: 20px; }
+.jr-toggle[data-position="right"] { bottom: auto; top: 20px; }
+.jr-toggle:hover {
+  background: rgba(20, 20, 20, 0.88);
+}
+.jr-toggle:active {
+  scale: 0.95;
+}
+.jr-toggle[data-open="true"] {
+  box-shadow:
+    0 0 0 1px var(--jr-accent),
+    inset 0 0 0 1px hsla(0, 0%, 100%, 0.14),
+    0 16px 32px -8px rgba(0, 0, 0, 0.24);
+}
+
+.jr-panel {
+  position: fixed;
+  background: var(--jr-bg);
+  color: var(--jr-fg);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  font-family: var(--jr-font-ui);
+  font-size: 12px;
+}
+
+.jr-panel[data-dock="bottom"] {
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: var(--jr-panel-height, 380px);
+  min-height: 180px;
+  max-height: 90vh;
+  border-top: 1px solid var(--jr-border);
+}
+
+.jr-panel[data-dock="right"] {
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: var(--jr-panel-width, 440px);
+  min-width: 260px;
+  max-width: 90vw;
+  border-left: 1px solid var(--jr-border);
+}
+
+.jr-panel[data-hidden="true"] {
+  display: none;
+}
+
+.jr-resize {
+  position: absolute;
+  z-index: 1;
+}
+.jr-panel[data-dock="bottom"] .jr-resize {
+  top: -3px;
+  left: 0;
+  right: 0;
+  height: 6px;
+  cursor: ns-resize;
+}
+.jr-panel[data-dock="right"] .jr-resize {
+  left: -3px;
+  top: 0;
+  bottom: 0;
+  width: 6px;
+  cursor: ew-resize;
+}
+
+.jr-header {
+  display: flex;
+  align-items: stretch;
+  height: 36px;
+  border-bottom: 1px solid var(--jr-border);
+  flex-shrink: 0;
+  background: var(--jr-bg);
+}
+
+.jr-title {
+  display: flex;
+  align-items: center;
+  padding: 0 12px;
+  font-family: var(--jr-font-mono);
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--jr-fg);
+  border-right: 1px solid var(--jr-border);
+  letter-spacing: 0.02em;
+}
+.jr-tabs {
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  overflow-x: auto;
+}
+.jr-tab {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 0 12px;
+  font-family: var(--jr-font-mono);
+  font-size: 11px;
+  color: var(--jr-fg-muted);
+  background: transparent;
+  border-right: 1px solid var(--jr-border);
+  white-space: nowrap;
+  transition: color 0.1s ease, background 0.1s ease;
+}
+.jr-tab:hover {
+  color: var(--jr-fg);
+  background: var(--jr-bg-muted);
+}
+.jr-tab[data-active="true"] {
+  color: var(--jr-fg);
+  background: var(--jr-bg-muted);
+  box-shadow: inset 0 -2px 0 var(--jr-accent);
+}
+.jr-tab-count {
+  font-size: 10px;
+  color: var(--jr-fg-dim);
+  background: var(--jr-bg-soft);
+  border-radius: 999px;
+  padding: 1px 6px;
+}
+
+.jr-actions {
+  display: flex;
+  align-items: center;
+  padding: 0 8px;
+  gap: 4px;
+  border-left: 1px solid var(--jr-border);
+}
+.jr-icon-btn {
+  width: 26px;
+  height: 26px;
+  border-radius: 6px;
+  color: var(--jr-fg-muted);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+}
+.jr-icon-btn:hover {
+  color: var(--jr-fg);
+  background: var(--jr-bg-muted);
+}
+.jr-icon-btn[data-active="true"] {
+  color: var(--jr-accent);
+  background: var(--jr-bg-muted);
+}
+
+.jr-body {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  overflow: hidden;
+}
+.jr-body > .jr-tab-panel {
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  overflow: auto;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.jr-empty {
+  flex: 1;
+  min-height: 80px;
+  padding: 24px;
+  color: var(--jr-fg-dim);
+  font-size: 12px;
+  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* --- Rows / list primitives used by tabs --- */
+
+.jr-row {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  gap: 8px;
+  align-items: center;
+  padding: 4px 12px;
+  border-bottom: 1px solid var(--jr-border);
+  font-family: var(--jr-font-mono);
+  font-size: 11px;
+  cursor: pointer;
+}
+.jr-row:hover {
+  background: var(--jr-bg-muted);
+}
+.jr-row-time {
+  color: var(--jr-fg-dim);
+  font-size: 10px;
+  white-space: nowrap;
+}
+.jr-row-main {
+  color: var(--jr-fg);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.jr-row-meta {
+  color: var(--jr-fg-muted);
+  font-size: 10px;
+  white-space: nowrap;
+}
+.jr-row-expanded {
+  grid-column: 1 / -1;
+  padding: 8px 12px 10px 12px;
+  color: var(--jr-fg-muted);
+  white-space: pre-wrap;
+  word-break: break-all;
+  background: var(--jr-bg-soft);
+  border-top: 1px solid var(--jr-border);
+}
+
+.jr-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 1px 6px;
+  border-radius: 4px;
+  font-family: var(--jr-font-mono);
+  font-size: 10px;
+  color: var(--jr-fg-muted);
+  background: var(--jr-bg-soft);
+  border: 1px solid var(--jr-border);
+}
+.jr-badge[data-tone="green"] { color: var(--jr-green); border-color: rgba(74, 222, 128, 0.25); }
+.jr-badge[data-tone="red"] { color: var(--jr-red); border-color: rgba(248, 113, 113, 0.25); }
+.jr-badge[data-tone="amber"] { color: var(--jr-amber); border-color: rgba(251, 191, 36, 0.25); }
+.jr-badge[data-tone="accent"] { color: var(--jr-accent); border-color: rgba(96, 165, 250, 0.25); }
+
+.jr-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 12px;
+  border-bottom: 1px solid var(--jr-border);
+  background: var(--jr-bg);
+  font-family: var(--jr-font-mono);
+  font-size: 10px;
+  color: var(--jr-fg-muted);
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+.jr-toolbar .jr-icon-btn { width: auto; padding: 0 6px; font-size: 10px; }
+.jr-search {
+  flex: 1;
+  background: var(--jr-bg-soft);
+  border: 1px solid var(--jr-border);
+  border-radius: 4px;
+  padding: 3px 6px;
+  color: var(--jr-fg);
+  font-family: var(--jr-font-mono);
+  font-size: 10px;
+  outline: none;
+}
+.jr-search:focus {
+  border-color: var(--jr-accent);
+}
+
+/* --- Spec tree --- */
+
+.jr-tree-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 2px 12px;
+  font-family: var(--jr-font-mono);
+  font-size: 11px;
+  cursor: pointer;
+  white-space: nowrap;
+  color: var(--jr-fg);
+}
+.jr-tree-row:hover {
+  background: var(--jr-bg-muted);
+}
+.jr-tree-row[data-selected="true"] {
+  background: var(--jr-bg-muted);
+  box-shadow: inset 2px 0 0 var(--jr-accent);
+}
+.jr-tree-toggle {
+  width: 12px;
+  color: var(--jr-fg-dim);
+  display: inline-block;
+  text-align: center;
+}
+.jr-tree-type {
+  color: var(--jr-accent);
+  font-weight: 500;
+}
+.jr-tree-key {
+  color: var(--jr-fg-dim);
+  font-size: 10px;
+}
+.jr-tree-summary {
+  color: var(--jr-fg-muted);
+  font-size: 10px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.jr-tree-hidden {
+  opacity: 0.45;
+}
+
+.jr-split {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  width: 100%;
+}
+.jr-split-left {
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  /* Pane itself no longer scrolls; the inner .jr-tree-rows container does,
+     so the breadcrumb bar above stays pinned. */
+  overflow: hidden;
+  border-right: 1px solid var(--jr-border);
+  display: flex;
+  flex-direction: column;
+  /* Selected row already has its own accent indicator, so no focus ring
+     on the container itself. */
+  outline: none;
+}
+.jr-tree-rows {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  /* Flex-column so .jr-empty inside can stretch + center vertically. */
+  display: flex;
+  flex-direction: column;
+}
+
+/* Generation switcher \u2014 only rendered when >1 specs (e.g. AI chat with
+   multiple assistant replies). Sits above the breadcrumbs. */
+.jr-generations {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 8px;
+  min-height: 28px;
+  border-bottom: 1px solid var(--jr-border);
+  background: var(--jr-bg);
+  font-family: var(--jr-font-mono);
+  font-size: 11px;
+}
+.jr-generations:empty {
+  display: none;
+}
+.jr-generation-select {
+  background: var(--jr-bg-soft);
+  color: var(--jr-fg);
+  border: 1px solid var(--jr-border);
+  border-radius: 4px;
+  padding: 2px 6px;
+  font-family: inherit;
+  font-size: 11px;
+  outline: none;
+  cursor: pointer;
+}
+.jr-generation-select:focus-visible {
+  border-color: var(--jr-accent);
+}
+.jr-generations-count {
+  color: var(--jr-fg-dim);
+  font-size: 10px;
+}
+.jr-breadcrumbs {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 8px;
+  min-height: 28px;
+  border-bottom: 1px solid var(--jr-border);
+  background: var(--jr-bg);
+  white-space: nowrap;
+  font-family: var(--jr-font-mono);
+  font-size: 11px;
+}
+.jr-breadcrumbs-trail {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  overflow-x: auto;
+  scrollbar-width: thin;
+}
+.jr-breadcrumbs-tools {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  padding-left: 4px;
+  border-left: 1px solid var(--jr-border);
+  margin-left: 4px;
+}
+.jr-view-btn {
+  width: 24px;
+  height: 22px;
+  border-radius: 4px;
+  border: 0;
+  background: transparent;
+  color: var(--jr-fg-muted);
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.jr-view-btn:hover {
+  color: var(--jr-fg);
+  background: var(--jr-bg-muted);
+}
+.jr-view-btn[data-active="true"] {
+  color: var(--jr-accent);
+  background: var(--jr-bg-muted);
+}
+.jr-breadcrumb {
+  padding: 2px 6px;
+  border-radius: 4px;
+  color: var(--jr-fg-muted);
+  cursor: pointer;
+  background: transparent;
+  border: 0;
+  font: inherit;
+  white-space: nowrap;
+}
+.jr-breadcrumb:hover {
+  color: var(--jr-fg);
+  background: var(--jr-bg-muted);
+}
+.jr-breadcrumb[data-current="true"] {
+  color: var(--jr-accent);
+  background: var(--jr-bg-muted);
+}
+.jr-breadcrumb-sep {
+  color: var(--jr-fg-dim);
+  font-size: 10px;
+  padding: 0 1px;
+  user-select: none;
+}
+.jr-breadcrumbs-empty {
+  color: var(--jr-fg-dim);
+  padding: 2px 6px;
+  font-style: italic;
+}
+
+/* Raw JSON view \u2014 spec pretty-printed, selectable for copy/paste. */
+.jr-raw {
+  margin: 0;
+  padding: 10px 12px;
+  flex: 1;
+  min-height: 0;
+  font-family: var(--jr-font-mono);
+  font-size: 11px;
+  line-height: 1.5;
+  color: var(--jr-fg);
+  white-space: pre;
+  overflow: auto;
+  -moz-tab-size: 2;
+  tab-size: 2;
+}
+.jr-split-right {
+  width: 40%;
+  min-width: 240px;
+  max-width: 60%;
+  min-height: 0;
+  overflow: auto;
+  background: var(--jr-bg);
+  display: flex;
+  flex-direction: column;
+}
+
+.jr-detail {
+  padding: 10px 12px;
+  font-family: var(--jr-font-mono);
+  font-size: 11px;
+  color: var(--jr-fg);
+}
+.jr-detail h4 {
+  margin: 0 0 6px 0;
+  font-family: var(--jr-font-mono);
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--jr-fg-dim);
+}
+.jr-detail pre {
+  margin: 0 0 14px 0;
+  padding: 8px;
+  background: var(--jr-bg-soft);
+  border: 1px solid var(--jr-border);
+  border-radius: 4px;
+  white-space: pre-wrap;
+  word-break: break-all;
+  color: var(--jr-fg);
+}
+
+/* --- State editor --- */
+.jr-state-row {
+  display: grid;
+  grid-template-columns: 1fr 2fr;
+  gap: 8px;
+  padding: 3px 12px;
+  border-bottom: 1px solid var(--jr-border);
+  font-family: var(--jr-font-mono);
+  font-size: 11px;
+  align-items: center;
+}
+.jr-state-path {
+  color: var(--jr-fg-muted);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.jr-state-value {
+  background: transparent;
+  color: var(--jr-fg);
+  border: 1px solid transparent;
+  border-radius: 3px;
+  padding: 2px 4px;
+  font-family: var(--jr-font-mono);
+  font-size: 11px;
+  outline: none;
+  width: 100%;
+  min-width: 0;
+}
+.jr-state-value:hover {
+  border-color: var(--jr-border);
+}
+.jr-state-value:focus {
+  border-color: var(--jr-accent);
+  background: var(--jr-bg-soft);
+}
+.jr-state-value[data-dirty="true"] {
+  border-color: var(--jr-amber);
+}
+
+/* --- Catalog chips --- */
+.jr-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  margin-top: 4px;
+}
+.jr-chip {
+  padding: 1px 5px;
+  border-radius: 3px;
+  font-family: var(--jr-font-mono);
+  font-size: 10px;
+  background: var(--jr-bg-soft);
+  color: var(--jr-fg-muted);
+  border: 1px solid var(--jr-border);
+}
+.jr-chip[data-tone="prop"] { color: var(--jr-green); border-color: rgba(74, 222, 128, 0.25); }
+.jr-chip[data-tone="event"] { color: var(--jr-accent); border-color: rgba(96, 165, 250, 0.25); }
+.jr-chip[data-tone="param"] { color: var(--jr-amber); border-color: rgba(251, 191, 36, 0.25); }
+
+.jr-catalog-item {
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--jr-border);
+}
+.jr-catalog-name {
+  font-family: var(--jr-font-mono);
+  font-size: 11px;
+  color: var(--jr-fg);
+  font-weight: 600;
+}
+.jr-catalog-desc {
+  font-size: 11px;
+  color: var(--jr-fg-muted);
+  margin-top: 2px;
+}
+`;
+var HOST_CSS = `
+:root {
+  --jr-devtools-offset-bottom: 0px;
+  --jr-devtools-offset-right: 0px;
+}
+
+html[data-jr-devtools-reserve="true"] body {
+  box-sizing: border-box;
+  padding-bottom: var(--jr-devtools-offset-bottom, 0);
+  padding-right: var(--jr-devtools-offset-right, 0);
+  transition: padding-bottom 0.12s ease-out, padding-right 0.12s ease-out;
+}
+
+html[data-jr-devtools-picking="true"],
+html[data-jr-devtools-picking="true"] * {
+  cursor: crosshair !important;
+}
+
+/* Floating overlays + labels used by two features:
+   1. Picker \u2014 while the toolbar button is active and the user hovers the page
+   2. Tree hover \u2014 while the user hovers a row in the Spec tab tree
+   Both use the same visual language. Not rendered with a CSS \`outline\` on the
+   target because the json-render element wrappers use \`display: contents\`
+   (no box, no outline). */
+#__jr_devtools_picker_overlay,
+#__jr_devtools_hover_overlay {
+  position: fixed;
+  z-index: 2147483646;
+  pointer-events: none;
+  background: rgba(96, 165, 250, 0.15);
+  outline: 2px solid #60a5fa;
+  outline-offset: 0;
+  border-radius: 2px;
+  box-shadow: 0 0 0 1px rgba(9, 9, 11, 0.4);
+  display: none;
+}
+#__jr_devtools_picker_label,
+#__jr_devtools_hover_label {
+  position: fixed;
+  z-index: 2147483646;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 11px;
+  padding: 3px 7px;
+  border-radius: 4px;
+  background: #60a5fa;
+  color: #09090b;
+  pointer-events: none;
+  white-space: nowrap;
+  display: none;
+}
+/* Secondary overlays painted for the *other* instances of a repeated spec
+   element \u2014 amber + dashed so they read as "siblings of the hovered one". */
+.__jr_devtools_hover_extra {
+  position: fixed;
+  z-index: 2147483646;
+  pointer-events: none;
+  background: rgba(251, 191, 36, 0.08);
+  outline: 2px dashed #fbbf24;
+  outline-offset: 0;
+  border-radius: 2px;
+  box-shadow: 0 0 0 1px rgba(9, 9, 11, 0.4);
+  display: none;
+}
+`;
+
+// src/panel/shell.ts
+var HOST_ATTR = "data-jr-devtools-host";
+var HOST_STYLE_ID = "__jr_devtools_host_styles";
+var RESERVE_ATTR = "data-jr-devtools-reserve";
+var OFFSET_VAR_BOTTOM = "--jr-devtools-offset-bottom";
+var OFFSET_VAR_RIGHT = "--jr-devtools-offset-right";
+var OFFSET_VAR_ALIAS = "--jr-devtools-offset";
+function ensureHostStyles() {
+  if (document.getElementById(HOST_STYLE_ID)) return;
+  const style = document.createElement("style");
+  style.id = HOST_STYLE_ID;
+  style.textContent = HOST_CSS;
+  document.head.appendChild(style);
+}
+function setOffset(dock, px) {
+  const root = document.documentElement;
+  const bottom = dock === "bottom" ? px : 0;
+  const right = dock === "right" ? px : 0;
+  if (bottom > 0) root.style.setProperty(OFFSET_VAR_BOTTOM, `${bottom}px`);
+  else root.style.removeProperty(OFFSET_VAR_BOTTOM);
+  if (right > 0) root.style.setProperty(OFFSET_VAR_RIGHT, `${right}px`);
+  else root.style.removeProperty(OFFSET_VAR_RIGHT);
+  if (px > 0) root.style.setProperty(OFFSET_VAR_ALIAS, `${px}px`);
+  else root.style.removeProperty(OFFSET_VAR_ALIAS);
+}
+function dockFromPosition(position) {
+  return position === "right" ? "right" : "bottom";
+}
+var STORAGE_DOCK = "__jr_devtools_dock";
+var STORAGE_HEIGHT = "__jr_devtools_height";
+var STORAGE_WIDTH = "__jr_devtools_width";
+function readStoredDock() {
+  if (typeof window === "undefined") return null;
+  try {
+    const raw = window.localStorage?.getItem(STORAGE_DOCK);
+    return raw === "bottom" || raw === "right" ? raw : null;
+  } catch {
+    return null;
+  }
+}
+function writeStoredDock(dock) {
+  if (typeof window === "undefined") return;
+  try {
+    window.localStorage?.setItem(STORAGE_DOCK, dock);
+  } catch {
+  }
+}
+function dockSpec(dock) {
+  return dock === "right" ? {
+    key: STORAGE_WIDTH,
+    defaultSize: 440,
+    minSize: 260,
+    cssVar: "--jr-panel-width"
+  } : {
+    key: STORAGE_HEIGHT,
+    defaultSize: 380,
+    minSize: 180,
+    cssVar: "--jr-panel-height"
+  };
+}
+var PICK_ICON_SVG = `
+<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+  <path d="M12.034 12.681a.498.498 0 0 1 .647-.647l9 3.5a.5.5 0 0 1-.033.944l-3.444 1.068a1 1 0 0 0-.66.66l-1.067 3.443a.5.5 0 0 1-.944.033z"/>
+  <path d="M21 11V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h6"/>
+</svg>`;
+var TOGGLE_BRACES_SVG = `
+<svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor" aria-hidden="true">
+  <rect x="2" y="0" width="4" height="2"/>
+  <rect x="2" y="2" width="2" height="4"/>
+  <rect x="0" y="6" width="2" height="2"/>
+  <rect x="2" y="8" width="2" height="4"/>
+  <rect x="2" y="12" width="4" height="2"/>
+  <rect x="8" y="0" width="4" height="2"/>
+  <rect x="10" y="2" width="2" height="4"/>
+  <rect x="12" y="6" width="2" height="2"/>
+  <rect x="10" y="8" width="2" height="4"/>
+  <rect x="8" y="12" width="4" height="2"/>
+</svg>`;
+var PANEL_BOTTOM_SVG = `
+<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+  <rect width="18" height="18" x="3" y="3" rx="2"/>
+  <path d="M3 15h18"/>
+</svg>`;
+var PANEL_RIGHT_SVG = `
+<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+  <rect width="18" height="18" x="3" y="3" rx="2"/>
+  <path d="M15 3v18"/>
+</svg>`;
+function matchHotkey(event, hotkey) {
+  const parts = hotkey.toLowerCase().split("+").map((p) => p.trim());
+  const isMac = typeof navigator !== "undefined" && /mac|iphone|ipad/i.test(navigator.platform || navigator.userAgent);
+  let needsMod = false;
+  let needsShift = false;
+  let needsAlt = false;
+  let key = "";
+  for (const p of parts) {
+    if (p === "mod") needsMod = true;
+    else if (p === "ctrl") needsMod = true;
+    else if (p === "meta" || p === "cmd") needsMod = true;
+    else if (p === "shift") needsShift = true;
+    else if (p === "alt" || p === "option") needsAlt = true;
+    else key = p;
+  }
+  const modOk = needsMod ? isMac ? event.metaKey : event.ctrlKey : true;
+  const shiftOk = needsShift ? event.shiftKey : true;
+  const altOk = needsAlt ? event.altKey : true;
+  const keyOk = key ? event.key.toLowerCase() === key : true;
+  return modOk && shiftOk && altOk && keyOk;
+}
+function createPanel(options) {
+  const host = options.host ?? (typeof document !== "undefined" ? document.body : null);
+  if (!host) {
+    return {
+      open() {
+      },
+      close() {
+      },
+      toggle() {
+      },
+      isOpen: () => false,
+      refresh() {
+      },
+      destroy() {
+      }
+    };
+  }
+  const existing = host.querySelector(`[${HOST_ATTR}]`);
+  if (existing && existing.__jrHandle) {
+    return existing.__jrHandle;
+  }
+  ensureHostStyles();
+  const rootHost = document.createElement("div");
+  rootHost.setAttribute(HOST_ATTR, "");
+  host.appendChild(rootHost);
+  const shadow = rootHost.attachShadow({ mode: "open" });
+  const styleEl = document.createElement("style");
+  styleEl.textContent = PANEL_CSS;
+  shadow.appendChild(styleEl);
+  const position = options.position ?? "bottom-right";
+  const allowDockToggle = options.allowDockToggle ?? true;
+  const initialDock = (allowDockToggle ? readStoredDock() : null) ?? dockFromPosition(position);
+  let dock = initialDock;
+  const reserveSpace = options.reserveSpace ?? true;
+  if (reserveSpace) {
+    document.documentElement.setAttribute(RESERVE_ATTR, "true");
+  }
+  let open = options.initialOpen ?? false;
+  let activeTabId = options.tabs[0]?.id ?? "";
+  const ctx = options.context;
+  const tabs = options.tabs;
+  const tabInstances = /* @__PURE__ */ new Map();
+  const toggleBtn = h("button", {
+    className: "jr-toggle",
+    "data-position": position,
+    "data-open": String(open),
+    title: "json-render devtools",
+    "aria-label": "Toggle json-render devtools",
+    onClick: () => toggle()
+  });
+  toggleBtn.innerHTML = TOGGLE_BRACES_SVG;
+  shadow.appendChild(toggleBtn);
+  const tabsStrip = h("div", { className: "jr-tabs" });
+  const body = h("div", { className: "jr-body" });
+  const pickBtn = h("button", {
+    className: "jr-icon-btn jr-pick-btn",
+    title: "Select an element in the page (Esc to cancel)",
+    "aria-label": "Select an element in the page",
+    onClick: () => togglePicker()
+  });
+  pickBtn.innerHTML = PICK_ICON_SVG;
+  const dockBtn = h("button", {
+    className: "jr-icon-btn jr-dock-btn",
+    "aria-label": "Toggle devtools dock",
+    onClick: () => toggleDock()
+  });
+  function updateDockButton() {
+    if (dock === "bottom") {
+      dockBtn.innerHTML = PANEL_RIGHT_SVG;
+      dockBtn.title = "Dock to right";
+    } else {
+      dockBtn.innerHTML = PANEL_BOTTOM_SVG;
+      dockBtn.title = "Dock to bottom";
+    }
+  }
+  updateDockButton();
+  const closeBtn = h(
+    "button",
+    {
+      className: "jr-icon-btn",
+      title: "Close devtools",
+      "aria-label": "Close",
+      onClick: () => close()
+    },
+    "\xD7"
+  );
+  const header = h(
+    "header",
+    { className: "jr-header" },
+    h("div", { className: "jr-title" }, "json-render devtools"),
+    tabsStrip,
+    h(
+      "div",
+      { className: "jr-actions" },
+      pickBtn,
+      allowDockToggle ? dockBtn : null,
+      closeBtn
+    )
+  );
+  const resizeHandle = h("div", {
+    className: "jr-resize",
+    "aria-label": "Resize devtools"
+  });
+  const panel = h(
+    "section",
+    {
+      className: "jr-panel",
+      "data-hidden": String(!open),
+      "data-dock": dock,
+      role: "complementary"
+    },
+    resizeHandle,
+    header,
+    body
+  );
+  shadow.appendChild(panel);
+  let panelSize = loadSizeFor(dock);
+  applyPanelSize(dock, panelSize);
+  function loadSizeFor(d) {
+    const spec = dockSpec(d);
+    const stored = typeof window !== "undefined" ? window.localStorage?.getItem(spec.key) : null;
+    let size = stored ? parseInt(stored, 10) : spec.defaultSize;
+    if (!Number.isFinite(size) || size < spec.minSize) {
+      size = spec.defaultSize;
+    }
+    return size;
+  }
+  function applyPanelSize(d, size) {
+    const spec = dockSpec(d);
+    const other = d === "bottom" ? "--jr-panel-width" : "--jr-panel-height";
+    panel.style.removeProperty(other);
+    panel.style.setProperty(spec.cssVar, `${size}px`);
+  }
+  resizeHandle.addEventListener("mousedown", (ev) => {
+    ev.preventDefault();
+    const d = dock;
+    const startCoord = d === "right" ? ev.clientX : ev.clientY;
+    const startSize = panelSize;
+    const spec = dockSpec(d);
+    const onMove = (e) => {
+      const current = d === "right" ? e.clientX : e.clientY;
+      const delta = startCoord - current;
+      const viewport = d === "right" ? window.innerWidth : window.innerHeight;
+      panelSize = Math.max(
+        spec.minSize,
+        Math.min(viewport * 0.9, startSize + delta)
+      );
+      applyPanelSize(d, panelSize);
+      if (open && reserveSpace) setOffset(d, panelSize);
+    };
+    const onUp = () => {
+      document.removeEventListener("mousemove", onMove);
+      document.removeEventListener("mouseup", onUp);
+      try {
+        window.localStorage?.setItem(spec.key, String(panelSize));
+      } catch {
+      }
+    };
+    document.addEventListener("mousemove", onMove);
+    document.addEventListener("mouseup", onUp);
+  });
+  function setDock(next, persist) {
+    if (next === dock) return;
+    setOffset(dock, 0);
+    dock = next;
+    panel.dataset.dock = next;
+    panelSize = loadSizeFor(next);
+    applyPanelSize(next, panelSize);
+    if (open && reserveSpace) setOffset(next, panelSize);
+    if (persist) writeStoredDock(next);
+    updateDockButton();
+  }
+  function toggleDock() {
+    if (!allowDockToggle) return;
+    setDock(dock === "bottom" ? "right" : "bottom", true);
+  }
+  let pickerStop = null;
+  function updatePickButton() {
+    const active = !!pickerStop;
+    pickBtn.dataset.active = String(active);
+    pickBtn.title = active ? "Stop picking (Esc)" : "Select an element in the page";
+    pickBtn.disabled = typeof document === "undefined" || !ctx.startPicker;
+  }
+  function stopPicker() {
+    if (pickerStop) pickerStop();
+    pickerStop = null;
+    updatePickButton();
+  }
+  function startPickerSession() {
+    if (pickerStop || !ctx.startPicker) return;
+    const session = ctx.startPicker({
+      onPick: (key) => {
+        pickerStop = null;
+        updatePickButton();
+        ctx.selection.set(key);
+        if (tabs.some((t) => t.id === "spec")) {
+          ctx.activateTab("spec");
+        } else {
+          openPanel();
+        }
+      },
+      onCancel: () => {
+        pickerStop = null;
+        updatePickButton();
+      }
+    });
+    if (!session) return;
+    pickerStop = session.stop;
+    updatePickButton();
+  }
+  function togglePicker() {
+    if (pickerStop) stopPicker();
+    else startPickerSession();
+  }
+  updatePickButton();
+  const tabButtons = /* @__PURE__ */ new Map();
+  function renderTabs() {
+    replaceChildren(
+      tabsStrip,
+      tabs.map((tab) => {
+        const badgeValue = tab.badge?.(ctx);
+        const btn = h(
+          "button",
+          {
+            className: "jr-tab",
+            "data-active": String(tab.id === activeTabId),
+            "data-tab": tab.id,
+            onClick: () => setActiveTab(tab.id)
+          },
+          tab.label,
+          badgeValue !== void 0 && badgeValue !== "" && badgeValue !== 0 ? h("span", { className: "jr-tab-count" }, String(badgeValue)) : null
+        );
+        tabButtons.set(tab.id, btn);
+        return btn;
+      })
+    );
+  }
+  function activateTab(id) {
+    const tab = tabs.find((t) => t.id === id);
+    if (!tab) return;
+    body.textContent = "";
+    const panelEl = h("div", { className: "jr-tab-panel", "data-tab": id });
+    body.appendChild(panelEl);
+    for (const [prevId, inst] of tabInstances) {
+      if (prevId !== id) {
+        try {
+          inst.destroy?.();
+        } catch (err) {
+          if (process.env.NODE_ENV !== "production") {
+            console.error("[json-render devtools] tab destroy threw:", err);
+          }
+        }
+        tabInstances.delete(prevId);
+      }
+    }
+    const instance = tab.mount(panelEl, ctx);
+    tabInstances.set(id, instance);
+  }
+  function setActiveTab(id) {
+    if (activeTabId === id) return;
+    activeTabId = id;
+    renderTabs();
+    activateTab(id);
+  }
+  ctx.activateTab = (id) => {
+    setActiveTab(id);
+    openPanel();
+  };
+  renderTabs();
+  if (activeTabId) activateTab(activeTabId);
+  let scheduled = false;
+  const runRefresh = () => {
+    scheduled = false;
+    renderTabs();
+    const inst = tabInstances.get(activeTabId);
+    inst?.update();
+  };
+  const scheduleRefresh = () => {
+    if (scheduled) return;
+    scheduled = true;
+    if (typeof window !== "undefined" && typeof window.requestAnimationFrame === "function") {
+      window.requestAnimationFrame(runRefresh);
+    } else {
+      setTimeout(runRefresh, 16);
+    }
+  };
+  const unsubEvents = ctx.events.subscribe(scheduleRefresh);
+  const hotkey = options.hotkey === void 0 ? "mod+shift+j" : options.hotkey;
+  const onKey = hotkey ? (e) => {
+    if (matchHotkey(e, hotkey)) {
+      e.preventDefault();
+      toggle();
+    }
+  } : null;
+  if (onKey) document.addEventListener("keydown", onKey);
+  function setOpen(next) {
+    open = next;
+    toggleBtn.dataset.open = String(open);
+    panel.dataset.hidden = String(!open);
+    setOffset(dock, open ? panelSize : 0);
+    if (open) {
+      const inst = tabInstances.get(activeTabId);
+      inst?.update();
+    } else {
+      stopPicker();
+      setHoverHighlight(null);
+    }
+  }
+  function openPanel() {
+    setOpen(true);
+  }
+  function close() {
+    setOpen(false);
+  }
+  function toggle() {
+    setOpen(!open);
+  }
+  setOffset(dock, open ? panelSize : 0);
+  const handle = {
+    open: openPanel,
+    close,
+    toggle,
+    isOpen: () => open,
+    refresh: scheduleRefresh,
+    destroy() {
+      unsubEvents();
+      if (onKey) document.removeEventListener("keydown", onKey);
+      stopPicker();
+      setHoverHighlight(null);
+      setOffset(dock, 0);
+      for (const inst of tabInstances.values()) {
+        try {
+          inst.destroy?.();
+        } catch {
+        }
+      }
+      tabInstances.clear();
+      rootHost.remove();
+      if (!document.querySelector(`[${HOST_ATTR}]`)) {
+        document.documentElement.removeAttribute(RESERVE_ATTR);
+      }
+    }
+  };
+  rootHost.__jrHandle = handle;
+  return handle;
+}
+function createStubTab(id, label) {
+  return {
+    id,
+    label,
+    mount(root) {
+      const empty = h("div", { className: "jr-empty" }, `${label} (stub)`);
+      root.appendChild(empty);
+      return { update() {
+      } };
+    }
+  };
+}
+
+// src/panel/types.ts
+function createSelectionBus() {
+  let value = null;
+  const listeners = /* @__PURE__ */ new Set();
+  return {
+    get: () => value,
+    set(next) {
+      if (value === next) return;
+      value = next;
+      for (const l of listeners) l(next);
+    },
+    subscribe(listener) {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    }
+  };
+}
+
+// src/panel/tabs/spec.ts
+var import_core = require("@json-render/core");
+var TAB_ID = "spec";
+var VIEW_TREE_SVG = `
+<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+  <path d="M21 12h-8"/>
+  <path d="M21 6H8"/>
+  <path d="M21 18h-8"/>
+  <path d="M3 6v4c0 1.1.9 2 2 2h3"/>
+  <path d="M3 10v6c0 1.1.9 2 2 2h3"/>
+</svg>`;
+var VIEW_RAW_SVG = `
+<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+  <path d="M8 3H7a2 2 0 0 0-2 2v5a2 2 0 0 1-2 2 2 2 0 0 1 2 2v5a2 2 0 0 0 2 2h1"/>
+  <path d="M16 21h1a2 2 0 0 0 2-2v-5a2 2 0 0 1 2-2 2 2 0 0 1-2-2V5a2 2 0 0 0-2-2h-1"/>
+</svg>`;
+function specTab() {
+  return {
+    id: TAB_ID,
+    label: "Spec",
+    badge(ctx) {
+      const spec = ctx.getSpec();
+      if (!spec) return void 0;
+      return Object.keys(spec.elements).length || void 0;
+    },
+    mount(root, ctx) {
+      return mountSpecTab(root, ctx);
+    }
+  };
+}
+function mountSpecTab(root, ctx) {
+  const expanded = /* @__PURE__ */ new Set();
+  const treePane = h("div", {
+    className: "jr-split-left",
+    role: "tree",
+    tabindex: "0"
+  });
+  const generationBar = h("div", {
+    className: "jr-generations",
+    "aria-label": "Spec generation"
+  });
+  let selectedSpecId = null;
+  let lastSeenLatestId = null;
+  const breadcrumbs = h("nav", {
+    className: "jr-breadcrumbs",
+    "aria-label": "Selected element ancestors"
+  });
+  const crumbTrail = h("div", { className: "jr-breadcrumbs-trail" });
+  const viewTools = h("div", {
+    className: "jr-breadcrumbs-tools",
+    role: "group",
+    "aria-label": "Spec view"
+  });
+  const treeViewBtn = h("button", {
+    className: "jr-view-btn",
+    type: "button",
+    title: "Tree view",
+    "aria-label": "Tree view",
+    "data-active": "true",
+    onClick: () => setView("tree")
+  });
+  treeViewBtn.innerHTML = VIEW_TREE_SVG;
+  const rawViewBtn = h("button", {
+    className: "jr-view-btn",
+    type: "button",
+    title: "Raw JSON view",
+    "aria-label": "Raw JSON view",
+    "data-active": "false",
+    onClick: () => setView("raw")
+  });
+  rawViewBtn.innerHTML = VIEW_RAW_SVG;
+  viewTools.append(treeViewBtn, rawViewBtn);
+  breadcrumbs.append(crumbTrail, viewTools);
+  const treeRows = h("div", { className: "jr-tree-rows" });
+  treePane.append(generationBar, breadcrumbs, treeRows);
+  const detailPane = h("div", { className: "jr-split-right" });
+  root.appendChild(h("div", { className: "jr-split" }, treePane, detailPane));
+  let view = "tree";
+  function setView(next) {
+    if (view === next) return;
+    view = next;
+    treeViewBtn.dataset.active = String(view === "tree");
+    rawViewBtn.dataset.active = String(view === "raw");
+    render();
+  }
+  const unsubSelection = ctx.selection.subscribe(() => {
+    const key = ctx.selection.get();
+    if (key) {
+      const { spec, generations } = resolveCurrentSpec();
+      if (spec && !spec.elements[key] && generations.length > 1) {
+        const match = generations.find((g) => g.spec.elements[key]);
+        if (match) selectedSpecId = match.id;
+      }
+    }
+    render();
+  });
+  const onTreeLeave = () => setHoverHighlight(null);
+  treePane.addEventListener("mouseleave", onTreeLeave);
+  let visibleKeys = [];
+  function toggleExpanded(key) {
+    if (expanded.has(key)) expanded.delete(key);
+    else expanded.add(key);
+    render();
+  }
+  function scrollSelectedIntoView() {
+    const el = treePane.querySelector(
+      '.jr-tree-row[data-selected="true"]'
+    );
+    el?.scrollIntoView({ block: "nearest" });
+  }
+  function moveSelection(nextKey) {
+    if (!nextKey) return;
+    ctx.selection.set(nextKey);
+    setHoverHighlight(nextKey);
+    scrollSelectedIntoView();
+  }
+  function onKeyDown(ev) {
+    if (view === "raw") return;
+    if (ev.metaKey || ev.ctrlKey || ev.altKey) return;
+    const key = ev.key;
+    if (key !== "ArrowUp" && key !== "ArrowDown" && key !== "ArrowLeft" && key !== "ArrowRight" && key !== "Enter" && key !== " " && key !== "Home" && key !== "End") {
+      return;
+    }
+    const { spec } = resolveCurrentSpec();
+    if (!spec || visibleKeys.length === 0) return;
+    const current = ctx.selection.get();
+    const idx = current ? visibleKeys.indexOf(current) : -1;
+    ev.preventDefault();
+    if (key === "ArrowDown") {
+      if (idx < 0) moveSelection(visibleKeys[0]);
+      else
+        moveSelection(visibleKeys[Math.min(idx + 1, visibleKeys.length - 1)]);
+      return;
+    }
+    if (key === "ArrowUp") {
+      if (idx < 0) moveSelection(visibleKeys[0]);
+      else moveSelection(visibleKeys[Math.max(idx - 1, 0)]);
+      return;
+    }
+    if (key === "Home") {
+      moveSelection(visibleKeys[0]);
+      return;
+    }
+    if (key === "End") {
+      moveSelection(visibleKeys[visibleKeys.length - 1]);
+      return;
+    }
+    if (key === "ArrowRight") {
+      if (!current) {
+        moveSelection(visibleKeys[0]);
+        return;
+      }
+      const el2 = spec.elements[current];
+      const hasChildren = !!el2?.children?.length;
+      if (!hasChildren) return;
+      if (!expanded.has(current)) {
+        expanded.add(current);
+        render();
+        scrollSelectedIntoView();
+      } else {
+        moveSelection(el2.children[0]);
+      }
+      return;
+    }
+    if (key === "ArrowLeft") {
+      if (!current) return;
+      const el2 = spec.elements[current];
+      const hasChildren = !!el2?.children?.length;
+      if (hasChildren && expanded.has(current)) {
+        expanded.delete(current);
+        render();
+        scrollSelectedIntoView();
+      } else {
+        const parent = findParent(spec, current);
+        if (parent) moveSelection(parent);
+      }
+      return;
+    }
+    if (!current) {
+      moveSelection(visibleKeys[0]);
+      return;
+    }
+    const el = spec.elements[current];
+    if (el?.children?.length) {
+      toggleExpanded(current);
+      scrollSelectedIntoView();
+    }
+  }
+  const onFocusIn = () => {
+    const current = ctx.selection.get();
+    if (current) setHoverHighlight(current);
+  };
+  const onFocusOut = (ev) => {
+    const next = ev.relatedTarget;
+    if (!next || !treePane.contains(next)) {
+      setHoverHighlight(null);
+    }
+  };
+  const onMouseDown = () => {
+    try {
+      treePane.focus({ preventScroll: true });
+    } catch {
+    }
+  };
+  treePane.addEventListener("mousedown", onMouseDown);
+  treePane.addEventListener("keydown", onKeyDown);
+  treePane.addEventListener("focusin", onFocusIn);
+  treePane.addEventListener("focusout", onFocusOut);
+  function resolveCurrentSpec() {
+    const generations = ctx.getSpecs?.() ?? [];
+    if (generations.length === 0) {
+      return { spec: ctx.getSpec(), generations };
+    }
+    const latest = generations[generations.length - 1];
+    if (selectedSpecId == null || !generations.some((g) => g.id === selectedSpecId)) {
+      selectedSpecId = latest.id;
+    } else if (lastSeenLatestId != null && selectedSpecId === lastSeenLatestId && lastSeenLatestId !== latest.id) {
+      selectedSpecId = latest.id;
+    }
+    lastSeenLatestId = latest.id;
+    const picked = generations.find((g) => g.id === selectedSpecId);
+    return { spec: picked.spec, generations };
+  }
+  function renderGenerationBar(generations) {
+    if (generations.length < 2) {
+      replaceChildren(generationBar, null);
+      return;
+    }
+    const latestId = generations[generations.length - 1].id;
+    const select = h(
+      "select",
+      {
+        className: "jr-generation-select",
+        "aria-label": "Inspect generation",
+        onChange: (ev) => {
+          selectedSpecId = ev.target.value;
+          render();
+        }
+      },
+      ...generations.map(
+        (g, i) => h(
+          "option",
+          {
+            value: g.id,
+            selected: g.id === selectedSpecId ? "true" : void 0
+          },
+          g.id === latestId ? `Gen ${i + 1} (latest)` : `Gen ${i + 1}`
+        )
+      )
+    );
+    const count = h(
+      "span",
+      { className: "jr-generations-count" },
+      `${generations.length} generation${generations.length === 1 ? "" : "s"}`
+    );
+    replaceChildren(generationBar, select, count);
+  }
+  function render() {
+    const { spec, generations } = resolveCurrentSpec();
+    renderGenerationBar(generations);
+    if (!spec || !spec.root || Object.keys(spec.elements).length === 0) {
+      visibleKeys = [];
+      renderBreadcrumbs(null, null);
+      replaceChildren(
+        treeRows,
+        h("div", { className: "jr-empty" }, "No spec attached.")
+      );
+      replaceChildren(detailPane, null);
+      return;
+    }
+    const issues = collectIssues(spec);
+    const selected = ctx.selection.get();
+    const pathLeafFirst = selected ? findPath(spec, selected) : [];
+    for (const k of pathLeafFirst) expanded.add(k);
+    visibleKeys = collectVisibleKeys(spec, expanded);
+    renderBreadcrumbs(spec, pathLeafFirst);
+    if (view === "raw") {
+      renderRaw(spec);
+    } else {
+      replaceChildren(
+        treeRows,
+        renderNode(
+          spec,
+          spec.root,
+          0,
+          expanded,
+          selected,
+          issues,
+          ctx,
+          toggleExpanded,
+          null
+        )
+      );
+    }
+    if (selected && spec.elements[selected]) {
+      renderDetail(detailPane, spec, selected, issues);
+    } else {
+      replaceChildren(
+        detailPane,
+        h("div", { className: "jr-empty" }, "Select an element to inspect.")
+      );
+    }
+  }
+  function renderRaw(spec) {
+    let text;
+    try {
+      text = JSON.stringify(spec, null, 2);
+    } catch {
+      text = String(spec);
+    }
+    replaceChildren(treeRows, h("pre", { className: "jr-raw" }, text));
+  }
+  function renderBreadcrumbs(spec, pathLeafFirst) {
+    if (!spec || !pathLeafFirst || pathLeafFirst.length === 0) {
+      replaceChildren(
+        crumbTrail,
+        h("span", { className: "jr-breadcrumbs-empty" }, "No element selected")
+      );
+      return;
+    }
+    const path = [...pathLeafFirst].reverse();
+    const parts = [];
+    path.forEach((key, i) => {
+      const el = spec.elements[key];
+      const label = el?.type ?? "<missing>";
+      const isCurrent = i === path.length - 1;
+      const crumb = h(
+        "button",
+        {
+          className: "jr-breadcrumb",
+          type: "button",
+          "data-current": String(isCurrent),
+          title: `#${key}`,
+          onClick: (ev) => {
+            ev.stopPropagation();
+            ctx.selection.set(key);
+            setHoverHighlight(key);
+          },
+          onMouseEnter: () => setHoverHighlight(key),
+          onMouseLeave: () => setHoverHighlight(null)
+        },
+        label
+      );
+      parts.push(crumb);
+      if (!isCurrent) {
+        parts.push(h("span", { className: "jr-breadcrumb-sep" }, "\u25B8"));
+      }
+    });
+    replaceChildren(crumbTrail, parts);
+  }
+  render();
+  return {
+    update: render,
+    destroy() {
+      unsubSelection();
+      treePane.removeEventListener("mouseleave", onTreeLeave);
+      treePane.removeEventListener("mousedown", onMouseDown);
+      treePane.removeEventListener("keydown", onKeyDown);
+      treePane.removeEventListener("focusin", onFocusIn);
+      treePane.removeEventListener("focusout", onFocusOut);
+      setHoverHighlight(null);
+    }
+  };
+}
+function collectVisibleKeys(spec, expanded) {
+  const list = [];
+  function walk(key) {
+    list.push(key);
+    const el = spec.elements[key];
+    if (!el?.children || el.children.length === 0) return;
+    if (!expanded.has(key)) return;
+    for (const child of el.children) walk(child);
+  }
+  walk(spec.root);
+  return list;
+}
+function findParent(spec, key) {
+  for (const [parentKey, el] of Object.entries(spec.elements)) {
+    if (el.children?.includes(key)) return parentKey;
+  }
+  return null;
+}
+function collectIssues(spec) {
+  const result = (0, import_core.validateSpec)(spec, { checkOrphans: true });
+  const byKey = /* @__PURE__ */ new Map();
+  for (const issue of result.issues) {
+    const k = issue.elementKey ?? "__spec__";
+    const arr = byKey.get(k) ?? [];
+    arr.push(issue);
+    byKey.set(k, arr);
+  }
+  return { all: result.issues, byKey };
+}
+function findPath(spec, key) {
+  const path = [];
+  function walk(current) {
+    if (current === key) {
+      path.push(current);
+      return true;
+    }
+    const el = spec.elements[current];
+    if (!el?.children) return false;
+    for (const child of el.children) {
+      if (walk(child)) {
+        path.push(current);
+        return true;
+      }
+    }
+    return false;
+  }
+  walk(spec.root);
+  return path;
+}
+function renderNode(spec, key, depth, expanded, selected, issues, ctx, onToggle, parentHidden) {
+  const el = spec.elements[key];
+  if (!el) {
+    return h(
+      "div",
+      {
+        className: "jr-tree-row",
+        style: { paddingLeft: `${12 + depth * 14}px` }
+      },
+      h("span", { className: "jr-tree-toggle" }, " "),
+      h("span", { className: "jr-tree-type" }, "<missing>"),
+      h("span", { className: "jr-tree-key" }, key)
+    );
+  }
+  const hasChildren = Array.isArray(el.children) && el.children.length > 0;
+  const isExpanded = hasChildren && expanded.has(key);
+  const isSelected = selected === key;
+  const elementIssues = issues.byKey.get(key) ?? [];
+  const hasErrors = elementIssues.some((i) => i.severity === "error");
+  const summary = makeSummary(el);
+  const hiddenHere = el.visible !== void 0 ? null : parentHidden;
+  const row = h(
+    "div",
+    {
+      className: `jr-tree-row${hiddenHere === true ? " jr-tree-hidden" : ""}`,
+      "data-selected": String(isSelected),
+      style: { paddingLeft: `${8 + depth * 14}px` },
+      onClick: (ev) => {
+        ev.stopPropagation();
+        ctx.selection.set(key);
+      },
+      // Paint a persistent bounding-box overlay over the matching DOM
+      // element while the tree row is hovered — gives the same visual
+      // affordance as Chrome DevTools' element picker without needing to
+      // enter pick mode.
+      onMouseEnter: () => {
+        setHoverHighlight(key);
+      },
+      onMouseLeave: () => {
+        setHoverHighlight(null);
+      }
+    },
+    h(
+      "span",
+      {
+        className: "jr-tree-toggle",
+        onClick: (ev) => {
+          ev.stopPropagation();
+          if (hasChildren) onToggle(key);
+        }
+      },
+      hasChildren ? isExpanded ? "\u25BE" : "\u25B8" : " "
+    ),
+    h("span", { className: "jr-tree-type" }, el.type),
+    h("span", { className: "jr-tree-key" }, `#${key}`),
+    summary ? h("span", { className: "jr-tree-summary" }, summary) : null,
+    el.visible !== void 0 ? h("span", { className: "jr-badge", "data-tone": "amber" }, "visible") : null,
+    el.repeat ? h("span", { className: "jr-badge", "data-tone": "accent" }, "repeat") : null,
+    hasErrors ? h(
+      "span",
+      {
+        className: "jr-badge",
+        "data-tone": "red",
+        title: elementIssues.map((i) => i.message).join("\n")
+      },
+      `${elementIssues.length}`
+    ) : null
+  );
+  const container = h("div", null, row);
+  if (isExpanded && hasChildren) {
+    for (const childKey of el.children) {
+      const childNode = renderNode(
+        spec,
+        childKey,
+        depth + 1,
+        expanded,
+        selected,
+        issues,
+        ctx,
+        onToggle,
+        hiddenHere
+      );
+      if (childNode) container.appendChild(childNode);
+    }
+  }
+  return container;
+}
+function makeSummary(el) {
+  const props = el.props;
+  if (!props) return null;
+  const prefer = ["title", "label", "text", "name", "value", "status"];
+  for (const p of prefer) {
+    const v = props[p];
+    if (typeof v === "string" && v.length > 0) return shorten(v, 60);
+    if (typeof v === "number" || typeof v === "boolean") return String(v);
+  }
+  for (const [, v] of Object.entries(props)) {
+    if (typeof v === "string" && v.length > 0) return shorten(v, 60);
+    if (typeof v === "number" || typeof v === "boolean") return String(v);
+  }
+  return null;
+}
+function shorten(text, max) {
+  if (text.length <= max) return text;
+  return text.slice(0, max - 1) + "\u2026";
+}
+function renderDetail(container, spec, key, issues) {
+  const el = spec.elements[key];
+  if (!el) {
+    replaceChildren(
+      container,
+      h("div", { className: "jr-empty" }, `Element '${key}' not found.`)
+    );
+    return;
+  }
+  const elIssues = issues.byKey.get(key) ?? [];
+  const children = el.children?.length ?? 0;
+  replaceChildren(
+    container,
+    h(
+      "div",
+      { className: "jr-detail" },
+      h("h4", null, "Element"),
+      h(
+        "div",
+        { style: { marginBottom: "10px" } },
+        h("span", { className: "jr-tree-type" }, el.type),
+        " ",
+        h("span", { className: "jr-tree-key" }, `#${key}`),
+        "  ",
+        h(
+          "span",
+          { className: "jr-tree-summary" },
+          `${children} child${children === 1 ? "" : "ren"}`
+        )
+      ),
+      elIssues.length > 0 ? [
+        h("h4", null, "Issues"),
+        ...elIssues.map(
+          (issue) => h(
+            "div",
+            {
+              className: "jr-badge",
+              "data-tone": issue.severity === "error" ? "red" : "amber",
+              style: {
+                marginBottom: "6px",
+                display: "block",
+                padding: "4px 8px"
+              }
+            },
+            `${issue.severity.toUpperCase()}: ${issue.message}`
+          )
+        )
+      ] : null,
+      el.visible !== void 0 ? [
+        h("h4", null, "Visibility"),
+        h("pre", null, jsonPreview(el.visible, 2e3))
+      ] : null,
+      el.on && Object.keys(el.on).length > 0 ? [h("h4", null, "Events"), h("pre", null, jsonPreview(el.on, 2e3))] : null,
+      el.watch && Object.keys(el.watch).length > 0 ? [
+        h("h4", null, "Watchers"),
+        h("pre", null, jsonPreview(el.watch, 2e3))
+      ] : null,
+      el.repeat ? [
+        h("h4", null, "Repeat"),
+        h("pre", null, jsonPreview(el.repeat, 2e3))
+      ] : null,
+      h("h4", null, "Props"),
+      h("pre", null, JSON.stringify(el.props, null, 2))
+    )
+  );
+}
+
+// src/panel/tabs/state.ts
+var import_store_utils = require("@json-render/core/store-utils");
+var TAB_ID2 = "state";
+function stateTab() {
+  return {
+    id: TAB_ID2,
+    label: "State",
+    badge(ctx) {
+      const store = ctx.getStateStore();
+      if (!store) return void 0;
+      try {
+        const flat = (0, import_store_utils.flattenToPointers)(store.getSnapshot());
+        const count = Object.keys(flat).length;
+        return count || void 0;
+      } catch {
+        return void 0;
+      }
+    },
+    mount(root, ctx) {
+      return mountStateTab(root, ctx);
+    }
+  };
+}
+function mountStateTab(root, ctx) {
+  const container = h("div", {
+    style: { height: "100%", display: "flex", flexDirection: "column" }
+  });
+  const toolbar = h("div", { className: "jr-toolbar" });
+  const body = h("div", {
+    style: { overflow: "auto", flex: "1", minHeight: "0" }
+  });
+  container.appendChild(toolbar);
+  container.appendChild(body);
+  root.appendChild(container);
+  let filter = "";
+  const editing = /* @__PURE__ */ new Set();
+  const searchInput = h("input", {
+    className: "jr-search",
+    type: "text",
+    placeholder: "Filter paths\u2026",
+    onInput: (ev) => {
+      filter = (ev.target.value || "").toLowerCase();
+      renderBody();
+    }
+  });
+  function renderToolbar() {
+    replaceChildren(
+      toolbar,
+      searchInput,
+      h(
+        "button",
+        {
+          className: "jr-icon-btn",
+          title: "Refresh state listing",
+          onClick: () => renderBody()
+        },
+        "refresh"
+      )
+    );
+  }
+  function renderBody() {
+    const store = ctx.getStateStore();
+    if (!store) {
+      replaceChildren(
+        body,
+        h(
+          "div",
+          { className: "jr-empty" },
+          "No StateStore attached. Devtools sees state once a provider mounts."
+        )
+      );
+      return;
+    }
+    let flat = {};
+    try {
+      flat = (0, import_store_utils.flattenToPointers)(store.getSnapshot());
+    } catch (err) {
+      replaceChildren(
+        body,
+        h(
+          "div",
+          { className: "jr-empty" },
+          `State read failed: ${String(err)}`
+        )
+      );
+      return;
+    }
+    const entries = Object.entries(flat).filter(([path]) => !filter || path.toLowerCase().includes(filter)).sort(([a], [b]) => a.localeCompare(b));
+    if (entries.length === 0) {
+      replaceChildren(
+        body,
+        h(
+          "div",
+          { className: "jr-empty" },
+          filter ? "No paths match the filter." : "State is empty."
+        )
+      );
+      return;
+    }
+    replaceChildren(
+      body,
+      entries.map(
+        ([path, value]) => renderStateRow(path, value, store.set, editing)
+      )
+    );
+  }
+  renderToolbar();
+  renderBody();
+  return {
+    update() {
+      if (editing.size === 0) renderBody();
+    }
+  };
+}
+function renderStateRow(path, value, setValue, editing) {
+  const input = h("input", {
+    className: "jr-state-value",
+    type: "text",
+    value: stringifyValue(value),
+    spellcheck: "false",
+    onFocus: () => {
+      editing.add(path);
+    },
+    onBlur: (ev) => {
+      editing.delete(path);
+      const raw = ev.target.value;
+      try {
+        const parsed = raw === "" ? "" : JSON.parse(raw);
+        setValue(path, parsed);
+        input.dataset.dirty = "false";
+      } catch {
+        setValue(path, raw);
+        input.dataset.dirty = "false";
+      }
+    },
+    onInput: () => {
+      input.dataset.dirty = "true";
+    },
+    onKeyDown: (ev) => {
+      if (ev.key === "Enter") {
+        ev.preventDefault();
+        ev.target.blur();
+      }
+      if (ev.key === "Escape") {
+        input.value = stringifyValue(value);
+        input.dataset.dirty = "false";
+        ev.target.blur();
+      }
+    }
+  });
+  return h(
+    "div",
+    {
+      className: "jr-state-row",
+      title: `${path}
+${jsonPreview(value, 1e3)}`
+    },
+    h("span", { className: "jr-state-path" }, path),
+    input
+  );
+}
+function stringifyValue(value) {
+  if (typeof value === "string") return JSON.stringify(value);
+  if (value === null) return "null";
+  if (value === void 0) return "";
+  if (typeof value === "number" || typeof value === "boolean")
+    return String(value);
+  try {
+    return JSON.stringify(value);
+  } catch {
+    return String(value);
+  }
+}
+
+// src/panel/tabs/actions.ts
+var TAB_ID3 = "actions";
+function actionsTab() {
+  return {
+    id: TAB_ID3,
+    label: "Actions",
+    badge(ctx) {
+      const rows = foldActions(ctx.events.snapshot()).length;
+      return rows || void 0;
+    },
+    mount(root, ctx) {
+      return mountActionsTab(root, ctx);
+    }
+  };
+}
+function mountActionsTab(root, ctx) {
+  const container = h("div", {
+    style: { height: "100%", display: "flex", flexDirection: "column" }
+  });
+  const toolbar = h("div", { className: "jr-toolbar" });
+  const body = h("div", {
+    style: { overflow: "auto", flex: "1", minHeight: "0" }
+  });
+  container.appendChild(toolbar);
+  container.appendChild(body);
+  root.appendChild(container);
+  let filter = "";
+  const expanded = /* @__PURE__ */ new Set();
+  const searchInput = h("input", {
+    className: "jr-search",
+    type: "text",
+    placeholder: "Filter by action name\u2026",
+    onInput: (ev) => {
+      filter = (ev.target.value || "").toLowerCase();
+      renderBody();
+    }
+  });
+  const countBadge = h("span", { className: "jr-badge" }, "0 actions");
+  const clearBtn = h(
+    "button",
+    {
+      className: "jr-icon-btn",
+      title: "Clear action log",
+      onClick: () => {
+        const keep = ctx.events.snapshot().filter(
+          (e) => e.kind !== "action-dispatched" && e.kind !== "action-settled"
+        );
+        ctx.events.clear();
+        for (const e of keep) ctx.events.push(e);
+      }
+    },
+    "clear"
+  );
+  toolbar.append(searchInput, countBadge, clearBtn);
+  function renderBody() {
+    const rows = foldActions(ctx.events.snapshot()).filter((r) => !filter || r.name.toLowerCase().includes(filter)).reverse();
+    countBadge.textContent = `${rows.length} action${rows.length === 1 ? "" : "s"}`;
+    if (rows.length === 0) {
+      replaceChildren(
+        body,
+        h(
+          "div",
+          { className: "jr-empty" },
+          filter ? "No actions match the filter." : "No actions dispatched yet."
+        )
+      );
+      return;
+    }
+    replaceChildren(
+      body,
+      rows.map((r) => renderRow(r, expanded, renderBody))
+    );
+  }
+  renderBody();
+  return { update: renderBody };
+}
+function foldActions(events) {
+  const byId = /* @__PURE__ */ new Map();
+  const order = [];
+  for (const evt of events) {
+    if (evt.kind === "action-dispatched") {
+      if (byId.has(evt.id)) continue;
+      byId.set(evt.id, {
+        id: evt.id,
+        name: evt.name,
+        params: evt.params,
+        dispatchedAt: evt.at
+      });
+      order.push(evt.id);
+    } else if (evt.kind === "action-settled") {
+      const row = byId.get(evt.id);
+      if (!row) continue;
+      row.settledAt = evt.at;
+      row.durationMs = evt.durationMs;
+      row.ok = evt.ok;
+      row.result = evt.result;
+      row.error = evt.error;
+    }
+  }
+  return order.map((id) => byId.get(id)).filter(Boolean);
+}
+function renderRow(row, expanded, refresh) {
+  const isExpanded = expanded.has(row.id);
+  const pending = row.settledAt === void 0;
+  const tone = pending ? "amber" : row.ok ? "green" : "red";
+  const status = pending ? "pending" : row.ok ? "ok" : "error";
+  const duration = row.durationMs !== void 0 ? `${row.durationMs.toFixed(0)}ms` : "";
+  const rowEl = h(
+    "div",
+    {
+      className: "jr-row",
+      onClick: () => {
+        if (isExpanded) expanded.delete(row.id);
+        else expanded.add(row.id);
+        refresh();
+      }
+    },
+    h("span", { className: "jr-row-time" }, formatTime(row.dispatchedAt)),
+    h(
+      "span",
+      { className: "jr-row-main" },
+      h("strong", null, row.name),
+      row.params !== void 0 ? h(
+        "span",
+        { className: "jr-tree-summary", style: { marginLeft: "8px" } },
+        jsonPreview(row.params, 80)
+      ) : null
+    ),
+    h(
+      "span",
+      { className: "jr-row-meta" },
+      h("span", { className: "jr-badge", "data-tone": tone }, status),
+      duration ? h("span", { style: { marginLeft: "6px" } }, duration) : null
+    )
+  );
+  if (!isExpanded) return rowEl;
+  const container = h("div", null, rowEl);
+  container.appendChild(
+    h(
+      "div",
+      { className: "jr-row-expanded" },
+      h("h4", null, "Params"),
+      h("pre", null, JSON.stringify(row.params ?? null, null, 2)),
+      row.ok === false ? [
+        h("h4", null, "Error"),
+        h("pre", null, row.error ?? "(unknown error)")
+      ] : null,
+      row.result !== void 0 && row.ok !== false ? [
+        h("h4", null, "Result"),
+        h("pre", null, JSON.stringify(row.result, null, 2))
+      ] : null
+    )
+  );
+  return container;
+}
+
+// src/panel/tabs/stream.ts
+var TAB_ID4 = "stream";
+function streamTab() {
+  return {
+    id: TAB_ID4,
+    label: "Stream",
+    badge(ctx) {
+      const gens = groupGenerations(ctx.events.snapshot());
+      return gens.length || void 0;
+    },
+    mount(root, ctx) {
+      return mountStreamTab(root, ctx);
+    }
+  };
+}
+function mountStreamTab(root, ctx) {
+  const container = h("div", {
+    style: { height: "100%", display: "flex", flexDirection: "column" }
+  });
+  const toolbar = h("div", { className: "jr-toolbar" });
+  const body = h("div", {
+    style: { overflow: "auto", flex: "1", minHeight: "0" }
+  });
+  container.appendChild(toolbar);
+  container.appendChild(body);
+  root.appendChild(container);
+  function render() {
+    const all = ctx.events.snapshot();
+    const gens = groupGenerations(all);
+    const orphan = collectOrphanEvents(all);
+    replaceChildren(
+      toolbar,
+      h(
+        "span",
+        { className: "jr-badge" },
+        `${gens.length} generation${gens.length === 1 ? "" : "s"}`
+      )
+    );
+    if (gens.length === 0 && orphan.length === 0) {
+      replaceChildren(
+        body,
+        h(
+          "div",
+          { className: "jr-empty" },
+          "No stream events yet. Tap a stream or pass messages to capture patches."
+        )
+      );
+      return;
+    }
+    const content = [];
+    if (orphan.length > 0) {
+      content.push(
+        renderGeneration(
+          { startedAt: orphan[0]?.at ?? Date.now(), events: orphan },
+          "live",
+          true
+        )
+      );
+    }
+    for (let i = gens.length - 1; i >= 0; i--) {
+      const gen = gens[i];
+      content.push(renderGeneration(gen, `gen-${i}`, i === gens.length - 1));
+    }
+    replaceChildren(body, content);
+  }
+  render();
+  return { update: render };
+}
+function groupGenerations(events) {
+  const gens = [];
+  let current = null;
+  for (const evt of events) {
+    if (evt.kind === "stream-lifecycle") {
+      if (evt.phase === "start") {
+        if (current) gens.push(current);
+        current = { startedAt: evt.at, events: [] };
+      } else {
+        if (!current) {
+          current = { startedAt: evt.at, events: [] };
+        }
+        current.endedAt = evt.at;
+        current.ok = evt.ok;
+        gens.push(current);
+        current = null;
+      }
+      continue;
+    }
+    if (evt.kind === "stream-patch" || evt.kind === "stream-text" || evt.kind === "stream-usage") {
+      if (!current) current = { startedAt: evt.at, events: [] };
+      current.events.push(evt);
+      if (evt.kind === "stream-usage") current.usage = evt.usage;
+    }
+  }
+  if (current) gens.push(current);
+  return gens;
+}
+function collectOrphanEvents(events) {
+  const hasAnyLifecycle = events.some((e) => e.kind === "stream-lifecycle");
+  if (hasAnyLifecycle) return [];
+  return events.filter(
+    (e) => e.kind === "stream-patch" || e.kind === "stream-text" || e.kind === "stream-usage"
+  );
+}
+function renderGeneration(gen, key, expandedByDefault) {
+  const patchCount = gen.events.filter((e) => e.kind === "stream-patch").length;
+  const textCount = gen.events.filter((e) => e.kind === "stream-text").length;
+  const duration = gen.endedAt !== void 0 ? gen.endedAt - gen.startedAt : void 0;
+  const tone = gen.endedAt === void 0 ? "amber" : gen.ok === false ? "red" : "green";
+  const status = gen.endedAt === void 0 ? "live" : gen.ok === false ? "error" : "done";
+  const body = h(
+    "div",
+    {
+      style: {
+        borderTop: "1px solid var(--jr-border)",
+        background: "var(--jr-bg-soft)",
+        display: expandedByDefault ? "block" : "none"
+      }
+    },
+    ...gen.events.map(renderStreamEvent)
+  );
+  const header = h(
+    "div",
+    {
+      className: "jr-row",
+      style: { cursor: "pointer" },
+      onClick: () => {
+        body.style.display = body.style.display === "none" ? "block" : "none";
+      }
+    },
+    h("span", { className: "jr-row-time" }, formatTime(gen.startedAt)),
+    h(
+      "span",
+      { className: "jr-row-main" },
+      h("strong", null, `generation #${key}`),
+      h(
+        "span",
+        { className: "jr-tree-summary", style: { marginLeft: "8px" } },
+        `${patchCount} patch${patchCount === 1 ? "" : "es"}`,
+        textCount > 0 ? `, ${textCount} text chunk${textCount === 1 ? "" : "s"}` : ""
+      )
+    ),
+    h(
+      "span",
+      { className: "jr-row-meta" },
+      h("span", { className: "jr-badge", "data-tone": tone }, status),
+      duration !== void 0 ? h("span", { style: { marginLeft: "6px" } }, `${duration}ms`) : null,
+      gen.usage ? h(
+        "span",
+        { style: { marginLeft: "6px" } },
+        `${formatTokens(gen.usage.totalTokens)} tok`
+      ) : null
+    )
+  );
+  return h("div", null, header, body);
+}
+function renderStreamEvent(evt) {
+  if (evt.kind === "stream-patch") {
+    return h(
+      "div",
+      { className: "jr-row" },
+      h("span", { className: "jr-row-time" }, formatTime(evt.at)),
+      h(
+        "span",
+        { className: "jr-row-main" },
+        h(
+          "span",
+          { className: "jr-badge", "data-tone": "accent" },
+          evt.patch.op
+        ),
+        h(
+          "span",
+          { className: "jr-tree-summary", style: { marginLeft: "8px" } },
+          evt.patch.path,
+          evt.patch.value !== void 0 ? ` = ${jsonPreview(evt.patch.value, 80)}` : ""
+        )
+      ),
+      h("span", { className: "jr-row-meta" }, evt.source)
+    );
+  }
+  if (evt.kind === "stream-text") {
+    return h(
+      "div",
+      { className: "jr-row" },
+      h("span", { className: "jr-row-time" }, formatTime(evt.at)),
+      h(
+        "span",
+        { className: "jr-row-main", style: { whiteSpace: "pre-wrap" } },
+        evt.text
+      ),
+      h(
+        "span",
+        { className: "jr-row-meta" },
+        h("span", { className: "jr-badge" }, "text")
+      )
+    );
+  }
+  if (evt.kind === "stream-usage") {
+    return h(
+      "div",
+      { className: "jr-row" },
+      h("span", { className: "jr-row-time" }, formatTime(evt.at)),
+      h(
+        "span",
+        { className: "jr-row-main" },
+        `prompt ${formatTokens(evt.usage.promptTokens)} / completion ${formatTokens(
+          evt.usage.completionTokens
+        )} / total ${formatTokens(evt.usage.totalTokens)}`
+      ),
+      h(
+        "span",
+        { className: "jr-row-meta" },
+        h("span", { className: "jr-badge", "data-tone": "accent" }, "usage")
+      )
+    );
+  }
+  return h("div");
+}
+function formatTokens(n) {
+  if (n >= 1e3) return `${(n / 1e3).toFixed(1).replace(/\.0$/, "")}k`;
+  return String(n);
+}
+
+// src/panel/tabs/catalog.ts
+var TAB_ID5 = "catalog";
+function catalogTab() {
+  return {
+    id: TAB_ID5,
+    label: "Catalog",
+    badge(ctx) {
+      const cat = ctx.getCatalog();
+      if (!cat) return void 0;
+      const n = cat.componentNames.length + cat.actionNames.length;
+      return n || void 0;
+    },
+    mount(root, ctx) {
+      return mountCatalogTab(root, ctx);
+    }
+  };
+}
+function mountCatalogTab(root, ctx) {
+  const container = h("div", {
+    style: { height: "100%", display: "flex", flexDirection: "column" }
+  });
+  const toolbar = h("div", { className: "jr-toolbar" });
+  const body = h("div", {
+    style: { overflow: "auto", flex: "1", minHeight: "0" }
+  });
+  container.appendChild(toolbar);
+  container.appendChild(body);
+  root.appendChild(container);
+  let view = "components";
+  let filter = "";
+  const componentsBtn = h(
+    "button",
+    {
+      className: "jr-icon-btn",
+      "data-active": "true",
+      onClick: () => {
+        if (view === "components") return;
+        view = "components";
+        updateToolbarChrome();
+        renderBody();
+      }
+    },
+    "components"
+  );
+  const actionsBtn = h(
+    "button",
+    {
+      className: "jr-icon-btn",
+      "data-active": "false",
+      onClick: () => {
+        if (view === "actions") return;
+        view = "actions";
+        updateToolbarChrome();
+        renderBody();
+      }
+    },
+    "actions"
+  );
+  const searchInput = h("input", {
+    className: "jr-search",
+    type: "text",
+    placeholder: "Filter by name\u2026",
+    onInput: (ev) => {
+      filter = (ev.target.value || "").toLowerCase();
+      renderBody();
+    }
+  });
+  toolbar.append(componentsBtn, actionsBtn, searchInput);
+  function updateToolbarChrome() {
+    const catalog = ctx.getCatalog();
+    const display = catalog ? buildCatalogDisplayData(catalog.data) : null;
+    const cCount = display?.components.length ?? 0;
+    const aCount = display?.actions.length ?? 0;
+    componentsBtn.textContent = `components (${cCount})`;
+    actionsBtn.textContent = `actions (${aCount})`;
+    componentsBtn.dataset.active = String(view === "components");
+    actionsBtn.dataset.active = String(view === "actions");
+  }
+  function renderBody() {
+    const catalog = ctx.getCatalog();
+    if (!catalog) {
+      replaceChildren(
+        body,
+        h(
+          "div",
+          { className: "jr-empty" },
+          "No catalog attached. Pass `catalog` to `<JsonRenderDevtools>` to browse it here."
+        )
+      );
+      return;
+    }
+    const display = buildCatalogDisplayData(catalog.data);
+    if (view === "components") {
+      const items = display.components.filter(
+        (c) => !filter || c.name.toLowerCase().includes(filter)
+      );
+      if (items.length === 0) {
+        replaceChildren(
+          body,
+          h("div", { className: "jr-empty" }, "No components match.")
+        );
+        return;
+      }
+      replaceChildren(body, items.map(renderComponent));
+    } else {
+      const items = display.actions.filter(
+        (a) => !filter || a.name.toLowerCase().includes(filter)
+      );
+      if (items.length === 0) {
+        replaceChildren(
+          body,
+          h("div", { className: "jr-empty" }, "No actions match.")
+        );
+        return;
+      }
+      replaceChildren(body, items.map(renderAction));
+    }
+  }
+  function render() {
+    updateToolbarChrome();
+    renderBody();
+  }
+  render();
+  return { update: render };
+}
+function renderComponent(c) {
+  return h(
+    "div",
+    { className: "jr-catalog-item" },
+    h("div", { className: "jr-catalog-name" }, c.name),
+    c.description ? h("div", { className: "jr-catalog-desc" }, c.description) : null,
+    c.props.length > 0 || c.events.length > 0 ? h(
+      "div",
+      { className: "jr-chips" },
+      ...c.props.map(
+        (p) => h(
+          "span",
+          { className: "jr-chip", "data-tone": "prop" },
+          `${p.name}: ${p.type}`
+        )
+      ),
+      ...c.events.map(
+        (e) => h(
+          "span",
+          { className: "jr-chip", "data-tone": "event" },
+          `on.${e}`
+        )
+      )
+    ) : null
+  );
+}
+function renderAction(a) {
+  return h(
+    "div",
+    { className: "jr-catalog-item" },
+    h("div", { className: "jr-catalog-name" }, a.name),
+    a.description ? h("div", { className: "jr-catalog-desc" }, a.description) : null,
+    a.params.length > 0 ? h(
+      "div",
+      { className: "jr-chips" },
+      ...a.params.map(
+        (p) => h(
+          "span",
+          { className: "jr-chip", "data-tone": "param" },
+          `${p.name}: ${p.type}`
+        )
+      )
+    ) : null
+  );
+}
+function buildCatalogDisplayData(rawCatalogData) {
+  const raw = rawCatalogData ?? {};
+  const componentsRaw = raw.components ?? {};
+  const actionsRaw = raw.actions ?? {};
+  const components = Object.entries(componentsRaw).map(([name, def]) => {
+    const d = def ?? {};
+    return {
+      name,
+      description: d.description ?? "",
+      props: extractFields(d.props),
+      slots: Array.isArray(d.slots) ? d.slots : [],
+      events: Array.isArray(d.events) ? d.events : []
+    };
+  }).sort((a, b) => a.name.localeCompare(b.name));
+  const actions = Object.entries(actionsRaw).map(([name, def]) => {
+    const d = def ?? {};
+    return {
+      name,
+      description: d.description ?? "",
+      params: extractFields(d.params)
+    };
+  }).sort((a, b) => a.name.localeCompare(b.name));
+  return { components, actions };
+}
+function extractFields(zodObj) {
+  if (!zodObj) return [];
+  try {
+    const obj = zodObj;
+    const shape = typeof obj.shape === "object" && obj.shape !== null ? obj.shape : typeof obj._def?.shape === "function" ? obj._def.shape() : typeof obj._def?.shape === "object" ? obj._def.shape : null;
+    if (!shape) return [];
+    return Object.entries(shape).map(([name, schema]) => {
+      let type = "unknown";
+      try {
+        const s = schema;
+        const typeName = s?._zod?.def?.type ?? s?._def?.typeName ?? "";
+        if (typeName.includes("string")) type = "string";
+        else if (typeName.includes("number")) type = "number";
+        else if (typeName.includes("boolean")) type = "boolean";
+        else if (typeName.includes("array")) type = "array";
+        else if (typeName.includes("enum")) {
+          const values = s?._zod?.def?.values ?? s?._def?.values;
+          type = Array.isArray(values) ? values.join(" | ") : "enum";
+        } else if (typeName.includes("union")) type = "union";
+        else if (typeName.includes("nullable")) {
+          const inner = s?._zod?.def?.innerType ?? s?._def?.innerType;
+          const innerName = inner?._zod?.def?.type ?? inner?._def?.typeName ?? "";
+          if (innerName.includes("string")) type = "string?";
+          else if (innerName.includes("number")) type = "number?";
+          else if (innerName.includes("boolean")) type = "boolean?";
+          else if (innerName.includes("array")) type = "array?";
+          else if (innerName.includes("enum")) {
+            const values = inner?._zod?.def?.values ?? inner?._def?.values;
+            type = Array.isArray(values) ? `(${values.join(" | ")})?` : "enum?";
+          } else type = "optional";
+        }
+      } catch {
+      }
+      return { name, type };
+    });
+  } catch {
+    return [];
+  }
+}
+
+// src/panel/tabs/picker.ts
+var TAB_ID6 = "pick";
+function pickerTab() {
+  return {
+    id: TAB_ID6,
+    label: "Pick",
+    mount(root, ctx) {
+      return mountPickerTab(root, ctx);
+    }
+  };
+}
+function mountPickerTab(root, ctx) {
+  let active = false;
+  let stopFn = null;
+  const body = h("div", { style: { padding: "16px 12px" } });
+  root.appendChild(body);
+  const unsubSelection = ctx.selection.subscribe(() => render());
+  function start() {
+    if (active) return;
+    const session = ctx.startPicker?.({
+      onPick: (key) => {
+        active = false;
+        stopFn = null;
+        ctx.selection.set(key);
+        ctx.activateTab("spec");
+      },
+      onCancel: () => {
+        active = false;
+        stopFn = null;
+        render();
+      }
+    });
+    if (!session) {
+      render();
+      return;
+    }
+    stopFn = session.stop;
+    active = true;
+    render();
+  }
+  function stop() {
+    if (stopFn) stopFn();
+    stopFn = null;
+    active = false;
+    render();
+  }
+  function render() {
+    const selected = ctx.selection.get();
+    const canPick = typeof document !== "undefined";
+    const selectedMounted = selected ? !!findElementByKey(selected) : false;
+    replaceChildren(
+      body,
+      h(
+        "div",
+        { style: { marginBottom: "12px", color: "var(--jr-fg-muted)" } },
+        "Click in the page to pick an element. Hovering paints an outline."
+      ),
+      h(
+        "button",
+        {
+          className: "jr-icon-btn",
+          style: {
+            padding: "6px 12px",
+            width: "auto",
+            border: "1px solid var(--jr-border)",
+            borderRadius: "6px"
+          },
+          disabled: !canPick,
+          "data-active": String(active),
+          onClick: () => active ? stop() : start()
+        },
+        active ? "Stop picking (Esc)" : "Start picking"
+      ),
+      h(
+        "div",
+        { style: { marginTop: "18px" } },
+        h(
+          "h4",
+          {
+            style: {
+              margin: "0 0 6px 0",
+              fontSize: "10px",
+              color: "var(--jr-fg-dim)",
+              textTransform: "uppercase",
+              letterSpacing: "0.06em"
+            }
+          },
+          "Current selection"
+        ),
+        selected ? h(
+          "div",
+          {
+            className: "jr-badge",
+            style: { padding: "4px 8px", fontSize: "11px" }
+          },
+          `#${selected}`
+        ) : h(
+          "div",
+          { style: { color: "var(--jr-fg-dim)", fontSize: "11px" } },
+          "No selection"
+        ),
+        selected && !selectedMounted ? h(
+          "div",
+          {
+            style: {
+              marginTop: "6px",
+              color: "var(--jr-amber)",
+              fontSize: "10px"
+            }
+          },
+          "This element has no DOM node right now (hidden by visibility, or renderer not wrapping for picker)."
+        ) : null
+      ),
+      !canPick ? h(
+        "div",
+        {
+          style: {
+            marginTop: "18px",
+            color: "var(--jr-fg-dim)",
+            fontSize: "11px"
+          }
+        },
+        "Picker requires a DOM environment."
+      ) : null
+    );
+  }
+  render();
+  return {
+    update: render,
+    destroy() {
+      stop();
+      unsubSelection();
+    }
+  };
+}
+
+// src/stream-tap.ts
+var import_core2 = require("@json-render/core");
+function tapJsonRenderStream(stream, events) {
+  const [a, b] = stream.tee();
+  void consumeToEvents(b, events, "json");
+  return a;
+}
+function tapYamlStream(stream, events) {
+  const [a, b] = stream.tee();
+  void consumeToEvents(b, events, "yaml");
+  return a;
+}
+async function consumeToEvents(stream, events, source) {
+  events.push({ kind: "stream-lifecycle", at: Date.now(), phase: "start" });
+  let ok = true;
+  try {
+    const reader = stream.getReader();
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) break;
+      if (!value) continue;
+      forwardChunk(value, events, source);
+    }
+  } catch (err) {
+    ok = false;
+    events.push({
+      kind: "stream-text",
+      at: Date.now(),
+      text: `[stream error: ${String(err)}]`
+    });
+  } finally {
+    events.push({
+      kind: "stream-lifecycle",
+      at: Date.now(),
+      phase: "end",
+      ok
+    });
+  }
+}
+function forwardChunk(chunk, events, source) {
+  if (chunk.type === import_core2.SPEC_DATA_PART_TYPE) {
+    const data = chunk.data;
+    if (!data) return;
+    if (data.type === "patch") {
+      events.push({
+        kind: "stream-patch",
+        at: Date.now(),
+        patch: data.patch,
+        source
+      });
+    }
+    return;
+  }
+  if (chunk.type === "text-delta") {
+    const delta = chunk.delta ?? "";
+    if (delta) {
+      events.push({ kind: "stream-text", at: Date.now(), text: delta });
+    }
+  }
+}
+function scanMessageParts(parts, events, seen) {
+  if (!parts) return;
+  for (const part of parts) {
+    if (!part || typeof part !== "object") continue;
+    if (seen.has(part)) continue;
+    seen.add(part);
+    if (part.type === import_core2.SPEC_DATA_PART_TYPE) {
+      const data = part.data;
+      if (!data) continue;
+      if (data.type === "patch") {
+        events.push({
+          kind: "stream-patch",
+          at: Date.now(),
+          patch: data.patch,
+          source: "json"
+        });
+      }
+    }
+  }
+}
+function recordUsage(events, usage) {
+  events.push({ kind: "stream-usage", at: Date.now(), usage });
+}
+function extractSpecFromParts(parts) {
+  if (!parts) return null;
+  const spec = { root: "", elements: {} };
+  let hasSpec = false;
+  for (const part of parts) {
+    if (!part || typeof part !== "object") continue;
+    if (part.type !== import_core2.SPEC_DATA_PART_TYPE) continue;
+    const data = part.data;
+    if (!data) continue;
+    if (data.type === "patch") {
+      hasSpec = true;
+      (0, import_core2.applySpecPatch)(spec, data.patch);
+    } else if (data.type === "flat") {
+      hasSpec = true;
+      Object.assign(spec, data.spec);
+    } else if (data.type === "nested") {
+      hasSpec = true;
+      Object.assign(spec, (0, import_core2.nestedToFlat)(data.spec));
+    }
+  }
+  return hasSpec ? spec : null;
+}
+function recordEvent(events, event) {
+  events.push(event);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DEVTOOLS_KEY_ATTR,
+  actionsTab,
+  buildCatalogDisplayData,
+  catalogTab,
+  createEventStore,
+  createPanel,
+  createSelectionBus,
+  createStubTab,
+  extractSpecFromParts,
+  findAllElementsByKey,
+  findElementByKey,
+  formatTime,
+  h,
+  highlightElement,
+  isProduction,
+  jsonPreview,
+  pickerTab,
+  recordEvent,
+  recordUsage,
+  replaceChildren,
+  scanMessageParts,
+  setHoverHighlight,
+  specTab,
+  startPicker,
+  stateTab,
+  streamTab,
+  tapJsonRenderStream,
+  tapYamlStream
+});
+//# sourceMappingURL=index.js.map