@nice-code/state 0.7.0 → 0.8.0

package/build/devtools/browser/index.js

@@ -161,56 +161,61 @@ class StateDevtoolsCore {
   }
 }
 // src/devtools/browser/NiceStateDevtools.tsx
-import { useEffect as useEffect2, useId, useMemo, useReducer, useState as useState3 } from "react";
+import {
+  DevtoolsLauncher,
+  FollowLatestToggles,
+  getDevtoolsDockCoordinator,
+  getDockSide,
+  PanelHeader,
+  ResizeHandle,
+  SegmentedControl as SegmentedControl2,
+  SplitHandle
+} from "nice-devtools-shared";
+import { useEffect as useEffect2, useId, useMemo, useReducer, useState as useState2 } from "react";
 
 // src/devtools/core/devtools_colors.ts
-var DEVTOOL_COLOR_SEMANTIC_ERROR = "#FF5C5C";
-var DEVTOOL_COLOR_SEMANTIC_SUCCESS = "#A3E635";
-var DEVTOOL_COLOR_SEMANTIC_SYSTEM = "#38BDF8";
-var DEVTOOL_COLOR_SEMANTIC_WARNING = "#FB923C";
-var DEVTOOL_COLOR_SEMANTIC_METADATA = "#A1A1AA";
-var DEVTOOL_COLOR_TEXT_EMPHASIS = "#f1f5f9";
-var DEVTOOL_COLOR_TEXT_SECONDARY = "#cbd5e1";
-var DEVTOOL_COLOR_TEXT_MUTED = "#64748b";
-var DEVTOOL_COLOR_TEXT_FAINT = "#334155";
-var DEVTOOL_LIST_BASE_BACKGROUND = "#0f172a";
-var DEVTOOL_LIST_SELECTED_BACKGROUND = "#1d2942";
-var DEVTOOL_DETAIL_BASE_BACKGROUND = "#0d1729";
-var DEVTOOL_DETAIL_HEADER_BACKGROUND = "#131f35";
-var DEVTOOL_SECTION_BACKGROUND = "#1e293b";
-var DEVTOOL_SECTION_STRING_BACKGROUND = "#0d131f";
-var DEVTOOL_PANEL_BORDER = "#1e293b";
-var DEVTOOL_PANEL_DIVIDER_BORDER = "#1d3352";
+import {
+  DEVTOOL_COLOR_SEMANTIC_ERROR,
+  DEVTOOL_COLOR_SEMANTIC_METADATA,
+  DEVTOOL_COLOR_SEMANTIC_SUCCESS,
+  DEVTOOL_COLOR_SEMANTIC_SYSTEM,
+  DEVTOOL_COLOR_SEMANTIC_WARNING,
+  DEVTOOL_COLOR_TEXT_EMPHASIS,
+  DEVTOOL_COLOR_TEXT_FAINT,
+  DEVTOOL_COLOR_TEXT_MUTED,
+  DEVTOOL_COLOR_TEXT_SECONDARY,
+  DEVTOOL_DETAIL_BASE_BACKGROUND,
+  DEVTOOL_DETAIL_HEADER_BACKGROUND,
+  DEVTOOL_ERROR_BACKGROUND,
+  DEVTOOL_JSON_KEY,
+  DEVTOOL_JSON_KEYWORD,
+  DEVTOOL_JSON_NUMBER,
+  DEVTOOL_JSON_PUNCTUATION,
+  DEVTOOL_JSON_STRING,
+  DEVTOOL_LIST_BASE_BACKGROUND,
+  DEVTOOL_LIST_SELECTED_BACKGROUND,
+  DEVTOOL_PANEL_BORDER,
+  DEVTOOL_PANEL_DIVIDER_BORDER,
+  DEVTOOL_SECTION_BACKGROUND,
+  DEVTOOL_SECTION_STRING_BACKGROUND,
+  DEVTOOL_TOOLTIP_BACKGROUND,
+  DEVTOOL_TOOLTIP_BORDER,
+  DEVTOOL_TOOLTIP_TITLE_BACKGROUND,
+  DEVTOOL_TOOLTIP_TITLE_BOTTOM_BORDER,
+  MONO_FONT,
+  SANS_FONT
+} from "nice-devtools-shared";
 var DEVTOOL_EDITOR_BACKGROUND = "#08101f";
-var DEVTOOL_ERROR_BACKGROUND = "#1e0a0a";
-var DEVTOOL_JSON_KEY = "#a5b4fc";
-var DEVTOOL_JSON_STRING = "#fbbf24";
-var DEVTOOL_JSON_NUMBER = "#34d399";
-var DEVTOOL_JSON_KEYWORD = "#a78bfa";
-var DEVTOOL_JSON_PUNCTUATION = "#475569";
-var MONO_FONT = "ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace";
-var SANS_FONT = "ui-sans-serif, system-ui, sans-serif";
+
+// src/devtools/browser/components/ChangeDetailPanel.tsx
+import { SegmentedControl } from "nice-devtools-shared";
+
+// src/devtools/browser/components/JsonView.tsx
+import { JsonView, renderColoredJson } from "nice-devtools-shared";
 
 // src/devtools/browser/components/utils.ts
-function safeStringify(value, indent = 2) {
-  if (value === undefined)
-    return "undefined";
-  if (value === null)
-    return "null";
-  try {
-    return JSON.stringify(value, null, indent);
-  } catch {
-    return String(value);
-  }
-}
-function formatTimestamp(ms) {
-  return new Date(ms).toLocaleTimeString([], {
-    hour: "2-digit",
-    minute: "2-digit",
-    second: "2-digit",
-    hour12: false
-  });
-}
+import { safeStringify } from "nice-devtools-shared";
+import { formatRelativeAge, formatTimestamp, safeStringify as safeStringify2 } from "nice-devtools-shared";
 var SOURCE_LABEL = {
   update: "UPDATE",
   replace: "REPLACE",
@@ -489,82 +494,8 @@ function formatScalar(value) {
   return String(value);
 }
 
-// src/devtools/browser/components/JsonView.tsx
-import { jsx } from "react/jsx-runtime";
-var JSON_TOKEN_RE = /("(?:\\.|[^"\\])*")(\s*:)?|(-?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?)|(\btrue\b|\bfalse\b|\bnull\b|\bundefined\b)|([{}[\],])/g;
-function renderColoredJson(text) {
-  const nodes = [];
-  let last = 0;
-  let i = 0;
-  JSON_TOKEN_RE.lastIndex = 0;
-  for (let m = JSON_TOKEN_RE.exec(text);m !== null; m = JSON_TOKEN_RE.exec(text)) {
-    if (m.index > last)
-      nodes.push(text.slice(last, m.index));
-    const [, str, colon, num, kw, punct] = m;
-    if (str != null) {
-      if (colon != null) {
-        nodes.push(/* @__PURE__ */ jsx("span", {
-          style: { color: DEVTOOL_JSON_KEY },
-          children: str
-        }, i++));
-        nodes.push(/* @__PURE__ */ jsx("span", {
-          style: { color: DEVTOOL_JSON_PUNCTUATION },
-          children: colon
-        }, i++));
-      } else {
-        nodes.push(/* @__PURE__ */ jsx("span", {
-          style: { color: DEVTOOL_JSON_STRING },
-          children: str
-        }, i++));
-      }
-    } else if (num != null) {
-      nodes.push(/* @__PURE__ */ jsx("span", {
-        style: { color: DEVTOOL_JSON_NUMBER },
-        children: num
-      }, i++));
-    } else if (kw != null) {
-      nodes.push(/* @__PURE__ */ jsx("span", {
-        style: { color: DEVTOOL_JSON_KEYWORD },
-        children: kw
-      }, i++));
-    } else if (punct != null) {
-      nodes.push(/* @__PURE__ */ jsx("span", {
-        style: { color: DEVTOOL_JSON_PUNCTUATION },
-        children: punct
-      }, i++));
-    }
-    last = JSON_TOKEN_RE.lastIndex;
-  }
-  if (last < text.length)
-    nodes.push(text.slice(last));
-  return nodes;
-}
-function JsonView({
-  value,
-  indent = 2,
-  style
-}) {
-  const text = safeStringify(value, indent);
-  return /* @__PURE__ */ jsx("pre", {
-    style: {
-      margin: 0,
-      padding: "8px 10px",
-      borderRadius: "4px",
-      fontSize: "11px",
-      lineHeight: 1.5,
-      fontFamily: MONO_FONT,
-      background: DEVTOOL_SECTION_STRING_BACKGROUND,
-      overflowX: "auto",
-      whiteSpace: "pre-wrap",
-      wordBreak: "break-word",
-      ...style
-    },
-    children: renderColoredJson(text)
-  });
-}
-
 // src/devtools/browser/components/DiffView.tsx
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 var ADDED_BG = "rgba(163, 230, 53, 0.08)";
 var REMOVED_BG = "rgba(255, 92, 92, 0.08)";
 var INLINE_MAX = 40;
@@ -575,7 +506,7 @@ function DiffView({
 }) {
   const entries = computeDiff(before, after);
   if (entries.length === 0) {
-    return /* @__PURE__ */ jsx2("div", {
+    return /* @__PURE__ */ jsx("div", {
       style: {
         padding: "10px",
         borderRadius: "4px",
@@ -588,9 +519,9 @@ function DiffView({
     });
   }
   const roots = [...buildTree(entries).children.values()].map(collapseChains);
-  return /* @__PURE__ */ jsx2("div", {
+  return /* @__PURE__ */ jsx("div", {
     style: { display: "flex", flexDirection: "column", gap: "6px" },
-    children: roots.map((node) => /* @__PURE__ */ jsx2(DiffNode, {
+    children: roots.map((node) => /* @__PURE__ */ jsx(DiffNode, {
       node,
       latestFirst
     }, node.key))
@@ -629,7 +560,7 @@ function collapseChains(node) {
 }
 function DiffNode({ node, latestFirst }) {
   if (node.entry != null && node.children.size === 0) {
-    return /* @__PURE__ */ jsx2(DiffLeaf, {
+    return /* @__PURE__ */ jsx(DiffLeaf, {
       label: node.key,
       entry: node.entry,
       latestFirst
@@ -637,11 +568,11 @@ function DiffNode({ node, latestFirst }) {
   }
   return /* @__PURE__ */ jsxs("div", {
     children: [
-      /* @__PURE__ */ jsx2("div", {
+      /* @__PURE__ */ jsx("div", {
         style: { color: DEVTOOL_JSON_KEY, fontFamily: MONO_FONT, fontSize: "10px", fontWeight: 600 },
         children: node.key
       }),
-      /* @__PURE__ */ jsx2("div", {
+      /* @__PURE__ */ jsx("div", {
         style: {
           marginTop: "4px",
           marginLeft: "5px",
@@ -651,7 +582,7 @@ function DiffNode({ node, latestFirst }) {
           flexDirection: "column",
           gap: "5px"
         },
-        children: [...node.children.values()].map((child) => /* @__PURE__ */ jsx2(DiffNode, {
+        children: [...node.children.values()].map((child) => /* @__PURE__ */ jsx(DiffNode, {
           node: child,
           latestFirst
         }, child.key))
@@ -666,25 +597,25 @@ function DiffLeaf({
 }) {
   const showRemoved = entry.kind === "removed" || entry.kind === "changed";
   const showAdded = entry.kind === "added" || entry.kind === "changed";
-  const removed = showRemoved && /* @__PURE__ */ jsx2(InlineValue, {
+  const removed = showRemoved && /* @__PURE__ */ jsx(InlineValue, {
     sign: "−",
     color: DEVTOOL_COLOR_SEMANTIC_ERROR,
     background: REMOVED_BG,
     value: entry.before
   });
-  const added = showAdded && /* @__PURE__ */ jsx2(InlineValue, {
+  const added = showAdded && /* @__PURE__ */ jsx(InlineValue, {
     sign: "+",
     color: DEVTOOL_COLOR_SEMANTIC_SUCCESS,
     background: ADDED_BG,
     value: entry.after
   });
-  const removedLine = showRemoved && /* @__PURE__ */ jsx2(DiffLine, {
+  const removedLine = showRemoved && /* @__PURE__ */ jsx(DiffLine, {
     sign: "−",
     color: DEVTOOL_COLOR_SEMANTIC_ERROR,
     background: REMOVED_BG,
     value: entry.before
   });
-  const addedLine = showAdded && /* @__PURE__ */ jsx2(DiffLine, {
+  const addedLine = showAdded && /* @__PURE__ */ jsx(DiffLine, {
     sign: "+",
     color: DEVTOOL_COLOR_SEMANTIC_SUCCESS,
     background: ADDED_BG,
@@ -702,7 +633,7 @@ function DiffLeaf({
           ]
         }),
         latestFirst ? added : removed,
-        entry.kind === "changed" && /* @__PURE__ */ jsx2("span", {
+        entry.kind === "changed" && /* @__PURE__ */ jsx("span", {
           style: { color: DEVTOOL_COLOR_TEXT_MUTED },
           children: latestFirst ? "←" : "→"
         }),
@@ -717,7 +648,7 @@ function DiffLeaf({
       border: `1px solid ${DEVTOOL_SECTION_STRING_BACKGROUND}`
     },
     children: [
-      /* @__PURE__ */ jsx2("div", {
+      /* @__PURE__ */ jsx("div", {
         style: {
           padding: "3px 8px",
           background: DEVTOOL_SECTION_STRING_BACKGROUND,
@@ -752,11 +683,11 @@ function InlineValue({
       wordBreak: "break-word"
     },
     children: [
-      /* @__PURE__ */ jsx2("span", {
+      /* @__PURE__ */ jsx("span", {
         style: { color, fontWeight: 700, userSelect: "none" },
         children: sign
       }),
-      /* @__PURE__ */ jsx2("span", {
+      /* @__PURE__ */ jsx("span", {
         children: renderColoredJson(compactStringify(value))
       })
     ]
@@ -771,11 +702,11 @@ function DiffLine({
   return /* @__PURE__ */ jsxs("div", {
     style: { display: "flex", gap: "6px", padding: "3px 8px", background },
     children: [
-      /* @__PURE__ */ jsx2("span", {
+      /* @__PURE__ */ jsx("span", {
         style: { color, fontWeight: 700, flexShrink: 0, userSelect: "none" },
         children: sign
       }),
-      /* @__PURE__ */ jsx2("span", {
+      /* @__PURE__ */ jsx("span", {
         style: {
           flex: 1,
           minWidth: 0,
@@ -785,7 +716,7 @@ function DiffLine({
           whiteSpace: "pre-wrap",
           wordBreak: "break-word"
         },
-        children: renderColoredJson(safeStringify(value, 2))
+        children: renderColoredJson(safeStringify2(value, 2))
       })
     ]
   });
@@ -810,7 +741,7 @@ function compactStringify(value) {
 }
 
 // src/devtools/browser/components/JsonDiffView.tsx
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var ADDED_BG2 = "rgba(163, 230, 53, 0.13)";
 var REMOVED_BG2 = "rgba(255, 92, 92, 0.13)";
 var SURFACE_STYLE = {
@@ -824,7 +755,7 @@ var SURFACE_STYLE = {
   overflowX: "auto"
 };
 function emptyNotice(text) {
-  return /* @__PURE__ */ jsx3("div", {
+  return /* @__PURE__ */ jsx2("div", {
     style: {
       padding: "10px",
       borderRadius: "4px",
@@ -840,11 +771,11 @@ function Line({ sign, color, background, text }) {
   return /* @__PURE__ */ jsxs2("div", {
     style: { display: "flex", background, padding: "0 10px", whiteSpace: "pre" },
     children: [
-      /* @__PURE__ */ jsx3("span", {
+      /* @__PURE__ */ jsx2("span", {
         style: { width: "12px", flexShrink: 0, color, fontWeight: 700, userSelect: "none" },
         children: sign
       }),
-      /* @__PURE__ */ jsx3("span", {
+      /* @__PURE__ */ jsx2("span", {
         style: { flex: 1, minWidth: 0 },
         children: renderColoredJson(text)
       })
@@ -858,20 +789,20 @@ function JsonDiffView({
   latestFirst = false
 }) {
   if (compress) {
-    return /* @__PURE__ */ jsx3(CompressedDiffView, {
+    return /* @__PURE__ */ jsx2(CompressedDiffView, {
       before,
       after,
       side: "unified",
       latestFirst
     });
   }
-  const ops = orderLineDiffOps(computeLineDiff(safeStringify(before, 2), safeStringify(after, 2)), latestFirst);
+  const ops = orderLineDiffOps(computeLineDiff(safeStringify2(before, 2), safeStringify2(after, 2)), latestFirst);
   if (!ops.some((op) => op.kind !== "common")) {
     return emptyNotice("No differences — before and after are structurally equal.");
   }
-  return /* @__PURE__ */ jsx3("pre", {
+  return /* @__PURE__ */ jsx2("pre", {
     style: SURFACE_STYLE,
-    children: ops.map((op, i) => /* @__PURE__ */ jsx3(Line, {
+    children: ops.map((op, i) => /* @__PURE__ */ jsx2(Line, {
       sign: op.kind === "removed" ? "−" : op.kind === "added" ? "+" : " ",
       color: op.kind === "removed" ? DEVTOOL_COLOR_SEMANTIC_ERROR : DEVTOOL_COLOR_SEMANTIC_SUCCESS,
       background: op.kind === "removed" ? REMOVED_BG2 : op.kind === "added" ? ADDED_BG2 : "transparent",
@@ -889,9 +820,9 @@ function CompressedDiffView({
   if (!lines.some((line) => line.tone === "added" || line.tone === "removed")) {
     return emptyNotice("No differences — before and after are structurally equal.");
   }
-  return /* @__PURE__ */ jsx3("pre", {
+  return /* @__PURE__ */ jsx2("pre", {
     style: SURFACE_STYLE,
-    children: lines.map((line, i) => /* @__PURE__ */ jsx3(CompressedLine, {
+    children: lines.map((line, i) => /* @__PURE__ */ jsx2(CompressedLine, {
       line
     }, i))
   });
@@ -902,7 +833,7 @@ function CompressedLine({ line }) {
     return /* @__PURE__ */ jsxs2("div", {
       style: { display: "flex", padding: "0 10px", whiteSpace: "pre" },
       children: [
-        /* @__PURE__ */ jsx3("span", {
+        /* @__PURE__ */ jsx2("span", {
           style: { width: "12px", flexShrink: 0 }
         }),
         /* @__PURE__ */ jsxs2("span", {
@@ -920,11 +851,11 @@ function CompressedLine({ line }) {
   return /* @__PURE__ */ jsxs2("div", {
     style: { display: "flex", background, padding: "0 10px", whiteSpace: "pre" },
     children: [
-      /* @__PURE__ */ jsx3("span", {
+      /* @__PURE__ */ jsx2("span", {
         style: { width: "12px", flexShrink: 0, color, fontWeight: 700, userSelect: "none" },
         children: line.sign
       }),
-      /* @__PURE__ */ jsx3("span", {
+      /* @__PURE__ */ jsx2("span", {
         style: { flex: 1, minWidth: 0 },
         children: renderColoredJson(`${indent}${line.text}`)
       })
@@ -938,22 +869,22 @@ function HighlightedJsonView({
   compress = false
 }) {
   if (compress)
-    return /* @__PURE__ */ jsx3(CompressedDiffView, {
+    return /* @__PURE__ */ jsx2(CompressedDiffView, {
       before,
       after,
       side
     });
-  const ops = computeLineDiff(safeStringify(before, 2), safeStringify(after, 2));
+  const ops = computeLineDiff(safeStringify2(before, 2), safeStringify2(after, 2));
   const dropKind = side === "before" ? "added" : "removed";
   const highlightKind = side === "before" ? "removed" : "added";
   const background = side === "before" ? REMOVED_BG2 : ADDED_BG2;
   const color = side === "before" ? DEVTOOL_COLOR_SEMANTIC_ERROR : DEVTOOL_COLOR_SEMANTIC_SUCCESS;
   const visible = ops.filter((op) => op.kind !== dropKind);
-  return /* @__PURE__ */ jsx3("pre", {
+  return /* @__PURE__ */ jsx2("pre", {
     style: SURFACE_STYLE,
     children: visible.map((op, i) => {
       const changed = op.kind === highlightKind;
-      return /* @__PURE__ */ jsx3(Line, {
+      return /* @__PURE__ */ jsx2(Line, {
         sign: changed ? side === "before" ? "−" : "+" : " ",
         color,
         background: changed ? background : "transparent",
@@ -963,336 +894,8 @@ function HighlightedJsonView({
   });
 }
 
-// src/devtools/browser/components/PanelChrome.tsx
-import {
-  useState
-} from "react";
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
-var DOCKED_SIZE_MIN = 160;
-var POSITION_GRID = [
-  { key: "tl", pos: null },
-  { key: "tc", pos: "dock-top" },
-  { key: "tr", pos: null },
-  { key: "ml", pos: "dock-left" },
-  { key: "mc", pos: null },
-  { key: "mr", pos: "dock-right" },
-  { key: "bl", pos: null },
-  { key: "bc", pos: "dock-bottom" },
-  { key: "br", pos: null }
-];
-function getDockSide(pos) {
-  switch (pos) {
-    case "dock-top":
-      return "top";
-    case "dock-left":
-      return "left";
-    case "dock-right":
-      return "right";
-    default:
-      return "bottom";
-  }
-}
-function PanelHeader({
-  position,
-  onPositionChange,
-  onClose,
-  onClear,
-  paused,
-  onTogglePause,
-  openOthers,
-  children
-}) {
-  return /* @__PURE__ */ jsxs3("div", {
-    style: {
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "space-between",
-      padding: "8px 12px",
-      gap: "10px",
-      background: DEVTOOL_SECTION_BACKGROUND,
-      borderBottom: `1px solid ${DEVTOOL_LIST_BASE_BACKGROUND}`,
-      flexShrink: 0
-    },
-    children: [
-      /* @__PURE__ */ jsxs3("div", {
-        style: { display: "flex", alignItems: "center", gap: "8px", minWidth: 0 },
-        children: [
-          /* @__PURE__ */ jsx4("span", {
-            style: {
-              color: DEVTOOL_COLOR_SEMANTIC_SYSTEM,
-              fontWeight: "bold",
-              fontSize: "11px",
-              whiteSpace: "nowrap"
-            },
-            children: "\uD83E\uDDE9 state"
-          }),
-          openOthers?.map((item) => /* @__PURE__ */ jsxs3("button", {
-            onClick: item.onOpen,
-            title: `Open ${item.label} devtools`,
-            style: {
-              display: "flex",
-              alignItems: "center",
-              gap: "4px",
-              background: DEVTOOL_LIST_BASE_BACKGROUND,
-              border: `1px solid ${DEVTOOL_COLOR_TEXT_FAINT}`,
-              borderRadius: "999px",
-              color: DEVTOOL_COLOR_TEXT_MUTED,
-              cursor: "pointer",
-              fontSize: "10px",
-              padding: "1px 7px 1px 6px",
-              fontFamily: SANS_FONT,
-              whiteSpace: "nowrap"
-            },
-            children: [
-              /* @__PURE__ */ jsx4("span", {
-                children: item.icon
-              }),
-              /* @__PURE__ */ jsx4("span", {
-                children: item.label
-              }),
-              item.badge != null && /* @__PURE__ */ jsx4("span", {
-                style: { color: DEVTOOL_COLOR_SEMANTIC_SYSTEM },
-                children: item.badge
-              })
-            ]
-          }, item.id))
-        ]
-      }),
-      /* @__PURE__ */ jsxs3("div", {
-        style: { display: "flex", gap: "10px", alignItems: "center" },
-        children: [
-          children,
-          /* @__PURE__ */ jsx4("button", {
-            onClick: onTogglePause,
-            title: paused ? "Resume recording" : "Pause recording",
-            style: chromeButtonStyle(paused ? DEVTOOL_COLOR_SEMANTIC_SYSTEM : DEVTOOL_COLOR_TEXT_MUTED),
-            children: paused ? "▶ resume" : "⏸ pause"
-          }),
-          onClear != null && /* @__PURE__ */ jsx4("button", {
-            onClick: onClear,
-            style: chromeButtonStyle(DEVTOOL_COLOR_TEXT_MUTED),
-            children: "clear"
-          }),
-          /* @__PURE__ */ jsx4(PositionPicker, {
-            position,
-            onChange: onPositionChange
-          }),
-          /* @__PURE__ */ jsx4("button", {
-            onClick: onClose,
-            style: {
-              ...chromeButtonStyle(DEVTOOL_COLOR_TEXT_MUTED),
-              fontSize: "16px",
-              lineHeight: "1"
-            },
-            children: "×"
-          })
-        ]
-      })
-    ]
-  });
-}
-function chromeButtonStyle(color) {
-  return {
-    background: "none",
-    border: "none",
-    color,
-    cursor: "pointer",
-    fontSize: "11px",
-    padding: 0,
-    fontFamily: SANS_FONT,
-    whiteSpace: "nowrap"
-  };
-}
-function PositionPicker({
-  position,
-  onChange
-}) {
-  return /* @__PURE__ */ jsx4("div", {
-    title: "Move / dock panel",
-    style: { display: "grid", gridTemplateColumns: "repeat(3, 9px)", gap: "2px", padding: "2px" },
-    children: POSITION_GRID.map(({ key, pos }) => {
-      if (pos == null)
-        return /* @__PURE__ */ jsx4("div", {
-          style: { width: "9px", height: "9px" }
-        }, key);
-      const isTopBottom = pos === "dock-top" || pos === "dock-bottom";
-      const isActive = pos === position;
-      return /* @__PURE__ */ jsx4("div", {
-        title: pos,
-        onClick: () => onChange(pos),
-        style: {
-          width: "9px",
-          height: "9px",
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          cursor: "pointer"
-        },
-        children: /* @__PURE__ */ jsx4("div", {
-          style: {
-            width: isTopBottom ? "9px" : "3px",
-            height: isTopBottom ? "3px" : "9px",
-            borderRadius: "1px",
-            background: isActive ? DEVTOOL_COLOR_SEMANTIC_SYSTEM : DEVTOOL_COLOR_TEXT_FAINT
-          }
-        })
-      }, key);
-    })
-  });
-}
-function ResizeHandle({
-  dockSide,
-  dockedSize,
-  onChange
-}) {
-  const isHoriz = dockSide === "left" || dockSide === "right";
-  const onMouseDown = (e) => {
-    e.preventDefault();
-    const startCoord = isHoriz ? e.clientX : e.clientY;
-    const startSize = dockedSize;
-    const maxSize = isHoriz ? window.innerWidth * 0.85 : window.innerHeight * 0.85;
-    const sign = dockSide === "bottom" || dockSide === "right" ? -1 : 1;
-    const onMove = (me) => {
-      const delta = (isHoriz ? me.clientX : me.clientY) - startCoord;
-      onChange(Math.max(DOCKED_SIZE_MIN, Math.min(maxSize, startSize + sign * delta)));
-    };
-    const onUp = () => {
-      window.removeEventListener("mousemove", onMove);
-      window.removeEventListener("mouseup", onUp);
-    };
-    window.addEventListener("mousemove", onMove);
-    window.addEventListener("mouseup", onUp);
-  };
-  const edgeStyle = dockSide === "bottom" ? { top: 0, left: 0, right: 0, height: "5px", cursor: "ns-resize" } : dockSide === "top" ? { bottom: 0, left: 0, right: 0, height: "5px", cursor: "ns-resize" } : dockSide === "right" ? { top: 0, bottom: 0, left: 0, width: "5px", cursor: "ew-resize" } : { top: 0, bottom: 0, right: 0, width: "5px", cursor: "ew-resize" };
-  return /* @__PURE__ */ jsx4("div", {
-    onMouseDown,
-    style: { position: "absolute", zIndex: 10, background: "transparent", ...edgeStyle }
-  });
-}
-var SPLIT_RATIO_MIN = 0.15;
-var SPLIT_RATIO_MAX = 0.85;
-function SplitHandle({
-  horizontal,
-  onRatioChange
-}) {
-  const [hovered, setHovered] = useState(false);
-  const onMouseDown = (e) => {
-    e.preventDefault();
-    const container = e.currentTarget.parentElement;
-    if (container == null)
-      return;
-    const onMove = (me) => {
-      const rect = container.getBoundingClientRect();
-      const ratio = horizontal ? (rect.right - me.clientX) / rect.width : (rect.bottom - me.clientY) / rect.height;
-      onRatioChange(Math.max(SPLIT_RATIO_MIN, Math.min(SPLIT_RATIO_MAX, ratio)));
-    };
-    const onUp = () => {
-      window.removeEventListener("mousemove", onMove);
-      window.removeEventListener("mouseup", onUp);
-    };
-    window.addEventListener("mousemove", onMove);
-    window.addEventListener("mouseup", onUp);
-  };
-  return /* @__PURE__ */ jsx4("div", {
-    onMouseDown,
-    onMouseEnter: () => setHovered(true),
-    onMouseLeave: () => setHovered(false),
-    style: {
-      flex: "0 0 5px",
-      alignSelf: "stretch",
-      cursor: horizontal ? "ew-resize" : "ns-resize",
-      background: hovered ? DEVTOOL_COLOR_SEMANTIC_SYSTEM : "transparent",
-      opacity: hovered ? 0.6 : 1,
-      zIndex: 5
-    }
-  });
-}
-function SegmentedControl({
-  options,
-  value,
-  onChange
-}) {
-  return /* @__PURE__ */ jsx4("div", {
-    style: {
-      display: "flex",
-      border: `1px solid ${DEVTOOL_COLOR_TEXT_FAINT}`,
-      borderRadius: "5px",
-      overflow: "hidden"
-    },
-    children: options.map((opt) => {
-      const active = opt.value === value;
-      return /* @__PURE__ */ jsx4("button", {
-        onClick: () => onChange(opt.value),
-        style: {
-          background: active ? DEVTOOL_COLOR_SEMANTIC_SYSTEM : "transparent",
-          color: active ? "#0f172a" : DEVTOOL_COLOR_TEXT_MUTED,
-          border: "none",
-          cursor: "pointer",
-          fontSize: "10px",
-          fontWeight: active ? 700 : 500,
-          padding: "3px 9px",
-          fontFamily: SANS_FONT
-        },
-        children: opt.label
-      }, opt.value);
-    })
-  });
-}
-function DevtoolsLauncher({ items }) {
-  return /* @__PURE__ */ jsx4("div", {
-    style: {
-      position: "fixed",
-      bottom: "16px",
-      right: "16px",
-      zIndex: 2147483646,
-      display: "flex",
-      fontFamily: MONO_FONT,
-      fontSize: "12px"
-    },
-    children: /* @__PURE__ */ jsx4("div", {
-      style: {
-        display: "flex",
-        background: DEVTOOL_SECTION_BACKGROUND,
-        border: `1px solid ${DEVTOOL_COLOR_TEXT_FAINT}`,
-        borderRadius: "6px",
-        overflow: "hidden",
-        boxShadow: "0 8px 24px rgba(0,0,0,0.35)"
-      },
-      children: items.map((item, i) => /* @__PURE__ */ jsxs3("button", {
-        onClick: item.onOpen,
-        style: {
-          display: "flex",
-          alignItems: "center",
-          gap: "5px",
-          background: "transparent",
-          color: DEVTOOL_COLOR_TEXT_SECONDARY,
-          border: "none",
-          borderLeft: i > 0 ? `1px solid ${DEVTOOL_COLOR_TEXT_FAINT}` : "none",
-          cursor: "pointer",
-          padding: "6px 11px",
-          fontFamily: MONO_FONT,
-          fontSize: "12px",
-          lineHeight: "1.5"
-        },
-        children: [
-          /* @__PURE__ */ jsx4("span", {
-            children: item.icon
-          }),
-          /* @__PURE__ */ jsx4("span", {
-            children: item.label
-          }),
-          item.badge != null && /* @__PURE__ */ jsx4("span", {
-            style: { color: DEVTOOL_COLOR_SEMANTIC_SYSTEM },
-            children: item.badge
-          })
-        ]
-      }, item.id))
-    })
-  });
-}
-
 // src/devtools/browser/components/ChangeDetailPanel.tsx
-import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 function ChangeDetailPanel({
   change,
   onRevert,
@@ -1306,7 +909,7 @@ function ChangeDetailPanel({
   const canRevert = change.inversePatches.length > 0;
   const showCompressToggle = view !== "props";
   const showOrderToggle = view === "props" || view === "diff";
-  return /* @__PURE__ */ jsxs4("div", {
+  return /* @__PURE__ */ jsxs3("div", {
     style: {
       flex: 1,
       display: "flex",
@@ -1316,7 +919,7 @@ function ChangeDetailPanel({
       background: DEVTOOL_DETAIL_BASE_BACKGROUND
     },
     children: [
-      /* @__PURE__ */ jsxs4("div", {
+      /* @__PURE__ */ jsxs3("div", {
         style: {
           padding: "8px 12px",
           background: DEVTOOL_DETAIL_HEADER_BACKGROUND,
@@ -1327,7 +930,7 @@ function ChangeDetailPanel({
           flexShrink: 0
         },
         children: [
-          /* @__PURE__ */ jsx5("span", {
+          /* @__PURE__ */ jsx3("span", {
             style: {
               color: DEVTOOL_COLOR_TEXT_EMPHASIS,
               fontWeight: 600,
@@ -1339,7 +942,7 @@ function ChangeDetailPanel({
             },
             children: change.storeLabel
           }),
-          /* @__PURE__ */ jsx5("span", {
+          /* @__PURE__ */ jsx3("span", {
             style: {
               padding: "1px 7px",
               borderRadius: "999px",
@@ -1352,14 +955,14 @@ function ChangeDetailPanel({
             },
             children: SOURCE_LABEL[change.source]
           }),
-          /* @__PURE__ */ jsx5("span", {
+          /* @__PURE__ */ jsx3("span", {
             style: { flex: 1 }
           }),
-          /* @__PURE__ */ jsx5("span", {
+          /* @__PURE__ */ jsx3("span", {
             style: { color: DEVTOOL_COLOR_TEXT_MUTED, fontSize: "10px", fontFamily: MONO_FONT },
             children: formatTimestamp(change.timestamp)
           }),
-          /* @__PURE__ */ jsx5("button", {
+          /* @__PURE__ */ jsx3("button", {
             onClick: () => onRevert(change),
             disabled: !canRevert,
             title: canRevert ? "Apply this change's inverse patches to undo it" : "No inverse patches available to revert",
@@ -1378,16 +981,16 @@ function ChangeDetailPanel({
           })
         ]
       }),
-      /* @__PURE__ */ jsx5("div", {
+      /* @__PURE__ */ jsx3("div", {
         style: {
           padding: "6px 12px",
           borderBottom: `1px solid ${DEVTOOL_LIST_BASE_BACKGROUND}`,
           flexShrink: 0
         },
-        children: /* @__PURE__ */ jsx5(SegmentedControl, {
+        children: /* @__PURE__ */ jsx3(SegmentedControl, {
           options: [
-            { value: "diff", label: "Diff View" },
             { value: "props", label: "Diff Props" },
+            { value: "diff", label: "Diff View" },
             { value: "before", label: "Before" },
             { value: "after", label: "After" }
           ],
@@ -1395,7 +998,7 @@ function ChangeDetailPanel({
           onChange: onViewChange
         })
       }),
-      /* @__PURE__ */ jsxs4("div", {
+      /* @__PURE__ */ jsxs3("div", {
         style: {
           flex: 1,
           overflowY: "auto",
@@ -1403,7 +1006,7 @@ function ChangeDetailPanel({
           padding: "10px 12px"
         },
         children: [
-          (showCompressToggle || showOrderToggle) && /* @__PURE__ */ jsxs4("div", {
+          (showCompressToggle || showOrderToggle) && /* @__PURE__ */ jsxs3("div", {
             style: {
               display: "flex",
               flexWrap: "wrap",
@@ -1412,13 +1015,13 @@ function ChangeDetailPanel({
               marginBottom: "8px"
             },
             children: [
-              showCompressToggle && /* @__PURE__ */ jsx5(ToggleCheckbox, {
+              showCompressToggle && /* @__PURE__ */ jsx3(ToggleCheckbox, {
                 checked: compress,
                 onChange: onCompressChange,
                 label: "Compress to changed paths only",
                 title: "Collapse unchanged branches, showing only the address of what changed"
               }),
-              showOrderToggle && /* @__PURE__ */ jsx5(ToggleCheckbox, {
+              showOrderToggle && /* @__PURE__ */ jsx3(ToggleCheckbox, {
                 checked: latestFirst,
                 onChange: onLatestFirstChange,
                 label: "Latest (+) change first",
@@ -1426,24 +1029,24 @@ function ChangeDetailPanel({
               })
             ]
           }),
-          view === "diff" && /* @__PURE__ */ jsx5(JsonDiffView, {
+          view === "props" && /* @__PURE__ */ jsx3(DiffView, {
             before: change.prevSnapshot,
             after: change.snapshot,
-            compress,
             latestFirst
           }),
-          view === "props" && /* @__PURE__ */ jsx5(DiffView, {
+          view === "diff" && /* @__PURE__ */ jsx3(JsonDiffView, {
             before: change.prevSnapshot,
             after: change.snapshot,
+            compress,
             latestFirst
           }),
-          view === "before" && /* @__PURE__ */ jsx5(HighlightedJsonView, {
+          view === "before" && /* @__PURE__ */ jsx3(HighlightedJsonView, {
             before: change.prevSnapshot,
             after: change.snapshot,
             side: "before",
             compress
           }),
-          view === "after" && /* @__PURE__ */ jsx5(HighlightedJsonView, {
+          view === "after" && /* @__PURE__ */ jsx3(HighlightedJsonView, {
             before: change.prevSnapshot,
             after: change.snapshot,
             side: "after",
@@ -1460,7 +1063,7 @@ function ToggleCheckbox({
   label,
   title
 }) {
-  return /* @__PURE__ */ jsxs4("label", {
+  return /* @__PURE__ */ jsxs3("label", {
     style: {
       display: "flex",
       alignItems: "center",
@@ -1473,7 +1076,7 @@ function ToggleCheckbox({
     },
     title,
     children: [
-      /* @__PURE__ */ jsx5("input", {
+      /* @__PURE__ */ jsx3("input", {
         type: "checkbox",
         checked,
         onChange: (e) => onChange(e.target.checked),
@@ -1485,7 +1088,9 @@ function ToggleCheckbox({
 }
 
 // src/devtools/browser/components/ChangeList.tsx
-import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+import { DevtoolsVirtualList } from "nice-devtools-shared";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var getGroupKey = (group) => group.oldest.cuid;
 function ChangeList({
   groups,
   selectedCuid,
@@ -1493,8 +1098,14 @@ function ChangeList({
   showStore,
   style
 }) {
-  if (groups.length === 0) {
-    return /* @__PURE__ */ jsx6("div", {
+  return /* @__PURE__ */ jsx4(DevtoolsVirtualList, {
+    items: groups,
+    getItemKey: getGroupKey,
+    selectedKey: selectedCuid,
+    estimateSize: 44,
+    overscan: 12,
+    style,
+    empty: /* @__PURE__ */ jsx4("div", {
       style: {
         padding: "24px",
         textAlign: "center",
@@ -1503,17 +1114,14 @@ function ChangeList({
         ...style
       },
       children: "No changes recorded yet. Mutate a store to see it here."
-    });
-  }
-  return /* @__PURE__ */ jsx6("div", {
-    style,
-    children: groups.map((group) => /* @__PURE__ */ jsx6(ChangeRow, {
+    }),
+    renderItem: (group) => /* @__PURE__ */ jsx4(ChangeRow, {
       change: group.representative,
       count: group.count,
       selected: group.oldest.cuid === selectedCuid,
       onClick: () => onSelect(group.oldest.cuid),
       showStore
-    }, group.oldest.cuid))
+    })
   });
 }
 function ChangeRow({
@@ -1524,7 +1132,7 @@ function ChangeRow({
   showStore
 }) {
   const sourceColor = SOURCE_COLOR[change.source];
-  return /* @__PURE__ */ jsxs5("div", {
+  return /* @__PURE__ */ jsxs4("div", {
     onClick,
     style: {
       display: "flex",
@@ -1537,10 +1145,10 @@ function ChangeRow({
       background: selected ? DEVTOOL_LIST_SELECTED_BACKGROUND : DEVTOOL_LIST_BASE_BACKGROUND
     },
     children: [
-      /* @__PURE__ */ jsxs5("div", {
+      /* @__PURE__ */ jsxs4("div", {
         style: { display: "flex", alignItems: "center", gap: "6px" },
         children: [
-          /* @__PURE__ */ jsx6("span", {
+          /* @__PURE__ */ jsx4("span", {
             style: {
               color: DEVTOOL_COLOR_TEXT_MUTED,
               fontSize: "10px",
@@ -1549,11 +1157,11 @@ function ChangeRow({
             },
             children: formatTimestamp(change.timestamp)
           }),
-          /* @__PURE__ */ jsx6(Badge, {
+          /* @__PURE__ */ jsx4(Badge, {
             color: sourceColor,
             children: SOURCE_LABEL[change.source]
           }),
-          count > 1 && /* @__PURE__ */ jsxs5("span", {
+          count > 1 && /* @__PURE__ */ jsxs4("span", {
             title: `${count} consecutive identical updates`,
             style: {
               flexShrink: 0,
@@ -1570,7 +1178,7 @@ function ChangeRow({
               count
             ]
           }),
-          showStore && /* @__PURE__ */ jsx6("span", {
+          showStore && /* @__PURE__ */ jsx4("span", {
             style: {
               color: DEVTOOL_COLOR_SEMANTIC_SYSTEM,
               fontSize: "10px",
@@ -1581,10 +1189,10 @@ function ChangeRow({
             },
             children: change.storeLabel
           }),
-          /* @__PURE__ */ jsx6("span", {
+          /* @__PURE__ */ jsx4("span", {
             style: { flex: 1 }
           }),
-          change.patches.length > 0 && /* @__PURE__ */ jsxs5("span", {
+          change.patches.length > 0 && /* @__PURE__ */ jsxs4("span", {
             style: { color: DEVTOOL_COLOR_TEXT_FAINT, fontSize: "10px", flexShrink: 0 },
             children: [
               change.patches.length,
@@ -1594,7 +1202,7 @@ function ChangeRow({
           })
         ]
       }),
-      /* @__PURE__ */ jsx6("div", {
+      /* @__PURE__ */ jsx4("div", {
         style: {
           color: DEVTOOL_COLOR_TEXT_SECONDARY,
           fontSize: "11px",
@@ -1609,7 +1217,7 @@ function ChangeRow({
   });
 }
 function Badge({ color, children }) {
-  return /* @__PURE__ */ jsx6("span", {
+  return /* @__PURE__ */ jsx4("span", {
     style: {
       flexShrink: 0,
       padding: "1px 6px",
@@ -1626,38 +1234,21 @@ function Badge({ color, children }) {
 }
 
 // src/devtools/browser/components/StateInspector.tsx
-import { useEffect, useState as useState2 } from "react";
+import { useEffect, useState } from "react";
 
 // src/devtools/browser/components/SectionLabel.tsx
-import { jsx as jsx7 } from "react/jsx-runtime";
-function SectionLabel({
-  label,
-  color = DEVTOOL_COLOR_SEMANTIC_SYSTEM
-}) {
-  return /* @__PURE__ */ jsx7("div", {
-    style: {
-      color,
-      fontSize: "0.85em",
-      marginBottom: "3px",
-      textTransform: "uppercase",
-      letterSpacing: "0.05em",
-      fontWeight: 500,
-      textAlign: "left"
-    },
-    children: label
-  });
-}
+import { SectionLabel } from "nice-devtools-shared";
 
 // src/devtools/browser/components/StateInspector.tsx
-import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 function StateInspector({
   store,
   onApply
 }) {
-  const liveText = safeStringify(store.currentState, 2);
-  const [draft, setDraft] = useState2(liveText);
-  const [dirty, setDirty] = useState2(false);
-  const [error, setError] = useState2(null);
+  const liveText = safeStringify2(store.currentState, 2);
+  const [draft, setDraft] = useState(liveText);
+  const [dirty, setDirty] = useState(false);
+  const [error, setError] = useState(null);
   useEffect(() => {
     setDraft(liveText);
     setDirty(false);
@@ -1689,7 +1280,7 @@ function StateInspector({
     setDirty(false);
     setError(null);
   };
-  return /* @__PURE__ */ jsxs6("div", {
+  return /* @__PURE__ */ jsxs5("div", {
     style: {
       flex: 1,
       display: "flex",
@@ -1699,7 +1290,7 @@ function StateInspector({
       background: DEVTOOL_DETAIL_BASE_BACKGROUND
     },
     children: [
-      /* @__PURE__ */ jsxs6("div", {
+      /* @__PURE__ */ jsxs5("div", {
         style: {
           flex: 1,
           minHeight: 0,
@@ -1708,19 +1299,19 @@ function StateInspector({
           padding: "10px 12px 8px"
         },
         children: [
-          /* @__PURE__ */ jsx8(SectionLabel, {
+          /* @__PURE__ */ jsx5(SectionLabel, {
             label: "Current state"
           }),
-          /* @__PURE__ */ jsx8("div", {
+          /* @__PURE__ */ jsx5("div", {
             style: { flex: 1, minHeight: 0, overflow: "auto" },
-            children: /* @__PURE__ */ jsx8(JsonView, {
+            children: /* @__PURE__ */ jsx5(JsonView, {
               value: store.currentState,
               style: { minHeight: "100%" }
             })
           })
         ]
       }),
-      /* @__PURE__ */ jsxs6("div", {
+      /* @__PURE__ */ jsxs5("div", {
         style: {
           flex: 1,
           minHeight: 0,
@@ -1730,7 +1321,7 @@ function StateInspector({
           borderTop: `1px solid ${DEVTOOL_PANEL_DIVIDER_BORDER}`
         },
         children: [
-          /* @__PURE__ */ jsxs6("div", {
+          /* @__PURE__ */ jsxs5("div", {
             style: {
               display: "flex",
               alignItems: "center",
@@ -1738,18 +1329,18 @@ function StateInspector({
               marginBottom: "3px"
             },
             children: [
-              /* @__PURE__ */ jsx8(SectionLabel, {
+              /* @__PURE__ */ jsx5(SectionLabel, {
                 label: "Edit & apply",
                 color: DEVTOOL_COLOR_SEMANTIC_WARNING
               }),
-              dirty && /* @__PURE__ */ jsx8("button", {
+              dirty && /* @__PURE__ */ jsx5("button", {
                 onClick: reload,
                 style: linkButtonStyle(DEVTOOL_COLOR_TEXT_MUTED),
                 children: "reload from store"
               })
             ]
           }),
-          /* @__PURE__ */ jsx8("textarea", {
+          /* @__PURE__ */ jsx5("textarea", {
             value: draft,
             spellCheck: false,
             onChange: (e) => onEdit(e.target.value),
@@ -1769,7 +1360,7 @@ function StateInspector({
               lineHeight: 1.5
             }
           }),
-          error != null && /* @__PURE__ */ jsx8("div", {
+          error != null && /* @__PURE__ */ jsx5("div", {
             style: {
               marginTop: "6px",
               padding: "6px 8px",
@@ -1782,9 +1373,9 @@ function StateInspector({
             },
             children: error
           }),
-          /* @__PURE__ */ jsx8("div", {
+          /* @__PURE__ */ jsx5("div", {
             style: { display: "flex", gap: "8px", marginTop: "8px", flexShrink: 0 },
-            children: /* @__PURE__ */ jsx8("button", {
+            children: /* @__PURE__ */ jsx5("button", {
               onClick: apply,
               disabled: !dirty,
               style: {
@@ -1819,14 +1410,14 @@ function linkButtonStyle(color) {
 }
 
 // src/devtools/browser/components/StoreTabs.tsx
-import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 function StoreTabs({
   stores,
   selectedStoreId,
   onSelect,
   includeAll = true
 }) {
-  return /* @__PURE__ */ jsxs7("div", {
+  return /* @__PURE__ */ jsxs6("div", {
     style: {
       display: "flex",
       gap: "6px",
@@ -1834,19 +1425,20 @@ function StoreTabs({
       overflowX: "auto",
       background: DEVTOOL_LIST_BASE_BACKGROUND,
       borderBottom: `1px solid ${DEVTOOL_SECTION_BACKGROUND}`,
+      flexWrap: "wrap",
       flexShrink: 0
     },
     children: [
-      includeAll && /* @__PURE__ */ jsx9(Pill, {
+      includeAll && /* @__PURE__ */ jsx6(Pill, {
         active: selectedStoreId == null,
         onClick: () => onSelect(null),
         label: "all"
       }),
-      stores.length === 0 && /* @__PURE__ */ jsx9("span", {
+      stores.length === 0 && /* @__PURE__ */ jsx6("span", {
         style: { color: DEVTOOL_COLOR_TEXT_MUTED, fontSize: "11px", padding: "2px 0" },
         children: "no stores registered"
       }),
-      stores.map((store) => /* @__PURE__ */ jsx9(Pill, {
+      stores.map((store) => /* @__PURE__ */ jsx6(Pill, {
         active: selectedStoreId === store.id,
         onClick: () => onSelect(store.id),
         label: store.label,
@@ -1861,7 +1453,7 @@ function Pill({
   label,
   count
 }) {
-  return /* @__PURE__ */ jsxs7("button", {
+  return /* @__PURE__ */ jsxs6("button", {
     onClick,
     style: {
       display: "flex",
@@ -1880,7 +1472,7 @@ function Pill({
     },
     children: [
       label,
-      count != null && count > 0 && /* @__PURE__ */ jsx9("span", {
+      count != null && count > 0 && /* @__PURE__ */ jsx6("span", {
         style: {
           color: active ? DEVTOOL_COLOR_SEMANTIC_SYSTEM : DEVTOOL_COLOR_TEXT_FAINT,
           fontSize: "10px"
@@ -1891,115 +1483,8 @@ function Pill({
   });
 }
 
-// src/devtools/browser/devtools_dock.ts
-var GLOBAL_KEY = "__NICE_DEVTOOLS_DOCK__";
-var VERSION = 4;
-function createCoordinator() {
-  const panels = new Map;
-  const listeners = new Set;
-  function toRef(panel) {
-    return {
-      id: panel.id,
-      label: panel.label,
-      icon: panel.icon,
-      badge: panel.badge,
-      onOpen: panel.onOpen
-    };
-  }
-  function applyBodyMargins() {
-    if (typeof document === "undefined")
-      return;
-    const margins = { top: 0, bottom: 0, left: 0, right: 0 };
-    for (const panel of panels.values()) {
-      if (panel.open)
-        margins[panel.side] += panel.size;
-    }
-    const sides = ["top", "bottom", "left", "right"];
-    for (const side of sides) {
-      if (margins[side] > 0) {
-        document.body.style.setProperty(`margin-${side}`, `${margins[side]}px`);
-      } else {
-        document.body.style.removeProperty(`margin-${side}`);
-      }
-    }
-  }
-  function notify() {
-    applyBodyMargins();
-    for (const listener of listeners)
-      listener();
-  }
-  return {
-    version: VERSION,
-    register(panel) {
-      panels.set(panel.id, { ...panel });
-      notify();
-      return () => {
-        panels.delete(panel.id);
-        notify();
-      };
-    },
-    update(id, next) {
-      const existing = panels.get(id);
-      if (existing == null)
-        return;
-      if (existing.side === next.side && existing.size === next.size && existing.open === next.open && existing.badge === next.badge) {
-        return;
-      }
-      panels.set(id, { ...existing, ...next });
-      notify();
-    },
-    getView(id) {
-      const list = [...panels.values()];
-      const anyOpen = list.some((p) => p.open);
-      const firstId = list.length > 0 ? list[0].id : null;
-      let dockOffset = 0;
-      let stacked = false;
-      const self = panels.get(id);
-      if (self != null && self.open) {
-        let seenSelf = false;
-        for (const panel of list) {
-          if (panel.id === id) {
-            seenSelf = true;
-            continue;
-          }
-          if (panel.open && panel.side === self.side) {
-            stacked = true;
-            if (!seenSelf)
-              dockOffset += panel.size;
-          }
-        }
-      }
-      return {
-        dockOffset,
-        stacked,
-        anyOpen,
-        isPrimary: id === firstId,
-        devtools: list.map(toRef),
-        otherClosed: list.filter((p) => !p.open && p.id !== id).map(toRef)
-      };
-    },
-    subscribe(listener) {
-      listeners.add(listener);
-      return () => {
-        listeners.delete(listener);
-      };
-    }
-  };
-}
-function getDevtoolsDockCoordinator() {
-  if (typeof window === "undefined")
-    return createCoordinator();
-  const host = window;
-  const existing = host[GLOBAL_KEY];
-  if (existing != null && existing.version === VERSION)
-    return existing;
-  const created = createCoordinator();
-  host[GLOBAL_KEY] = created;
-  return created;
-}
-
 // src/devtools/browser/NiceStateDevtools.tsx
-import { jsx as jsx10, jsxs as jsxs8, Fragment } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs7, Fragment } from "react/jsx-runtime";
 if (typeof document !== "undefined" && !document.getElementById("__nice-state-devtools-styles")) {
   const style = document.createElement("style");
   style.id = "__nice-state-devtools-styles";
@@ -2013,12 +1498,20 @@ if (typeof document !== "undefined" && !document.getElementById("__nice-state-de
     #__nice-state-devtools-panel ::-webkit-scrollbar-thumb { background: #334155; border-radius: 2px; }
     #__nice-state-devtools-panel ::-webkit-scrollbar-thumb:hover { background: #475569; }
     #__nice-state-devtools-panel ::-webkit-scrollbar-corner { background: transparent; }
+    /* Shield the panel's native form controls from the host app's global element
+       styles (e.g. a bare \`input {}\`/\`button {}\` rule). \`all: revert\` drops them
+       to the UA baseline the panel is authored against; the panel's own inline
+       styles still win, so its look is unchanged across any host. */
+    #__nice-state-devtools-panel input,
+    #__nice-state-devtools-panel button,
+    #__nice-state-devtools-panel select,
+    #__nice-state-devtools-panel textarea { all: revert; font-family: inherit; }
   `;
   document.head?.appendChild(style);
 }
 var PREFS_KEY = "__nice-state-devtools-prefs";
 var DOCKED_HEIGHT_DEFAULT = 340;
-var DOCKED_WIDTH_DEFAULT = 460;
+var DOCKED_WIDTH_DEFAULT = 330;
 var DETAIL_RATIO_DEFAULT = 0.5;
 var DOCK_POSITIONS = ["dock-bottom", "dock-top", "dock-left", "dock-right"];
 function isDockPosition(value) {
@@ -2034,7 +1527,7 @@ function readPrefs(defaultPosition, initialOpen) {
     stayOnLatest: true,
     followLatestOnSelect: true,
     compressDiff: true,
-    detailView: "diff",
+    detailView: "props",
     diffLatestFirst: true
   };
   try {
@@ -2061,20 +1554,20 @@ function NiceStateDevtools({ forceEnable, ...props }) {
   if (!forceEnable && process["env"]["NODE_ENV"] !== "development") {
     return null;
   }
-  return /* @__PURE__ */ jsx10(NiceStateDevtools_Panel, {
+  return /* @__PURE__ */ jsx7(NiceStateDevtools_Panel, {
     ...props
   });
 }
 function NiceStateDevtools_Panel({
   core,
-  position: defaultPosition = "dock-bottom",
+  position: defaultPosition = "dock-right",
   initialOpen = false
 }) {
-  const [prefs, setPrefsRaw] = useState3(() => readPrefs(defaultPosition, initialOpen));
-  const [snapshot, setSnapshot] = useState3(EMPTY_SNAPSHOT);
-  const [mode, setMode] = useState3("timeline");
-  const [storeFilter, setStoreFilter] = useState3(null);
-  const [selectedChangeCuid, setSelectedChangeCuid] = useState3(null);
+  const [prefs, setPrefsRaw] = useState2(() => readPrefs(defaultPosition, initialOpen));
+  const [snapshot, setSnapshot] = useState2(EMPTY_SNAPSHOT);
+  const [mode, setMode] = useState2("timeline");
+  const [storeFilter, setStoreFilter] = useState2(null);
+  const [selectedChangeCuid, setSelectedChangeCuid] = useState2(null);
   useEffect2(() => core.subscribe(setSnapshot), [core]);
   const setPrefs = (update) => {
     setPrefsRaw((prev) => ({ ...prev, ...update }));
@@ -2155,7 +1648,7 @@ function NiceStateDevtools_Panel({
   };
   if (!isOpen) {
     if (view.isPrimary && !view.anyOpen) {
-      return /* @__PURE__ */ jsx10(DevtoolsLauncher, {
+      return /* @__PURE__ */ jsx7(DevtoolsLauncher, {
         items: view.devtools
       });
     }
@@ -2196,16 +1689,17 @@ function NiceStateDevtools_Panel({
       borderRadius: view.stacked ? "0" : "8px 0 0 8px"
     }
   };
-  return /* @__PURE__ */ jsxs8("div", {
+  return /* @__PURE__ */ jsxs7("div", {
     id: "__nice-state-devtools-panel",
     style: panelStyle,
     children: [
-      /* @__PURE__ */ jsx10(ResizeHandle, {
+      /* @__PURE__ */ jsx7(ResizeHandle, {
         dockSide,
         dockedSize,
         onChange: (size) => setPrefs(isHorizDock ? { dockedHeight: size } : { dockedWidth: size })
       }),
-      /* @__PURE__ */ jsx10(PanelHeader, {
+      /* @__PURE__ */ jsx7(PanelHeader, {
+        title: "\uD83E\uDDE9 state",
         position,
         onPositionChange: (p) => setPrefs({ position: p }),
         onClose: () => setPrefs({ isOpen: false }),
@@ -2216,7 +1710,7 @@ function NiceStateDevtools_Panel({
         paused,
         onTogglePause: () => core.togglePaused(),
         openOthers: view.otherClosed,
-        children: /* @__PURE__ */ jsx10(SegmentedControl, {
+        children: /* @__PURE__ */ jsx7(SegmentedControl2, {
           options: [
             { value: "timeline", label: "Timeline" },
             { value: "state", label: "State" }
@@ -2225,18 +1719,18 @@ function NiceStateDevtools_Panel({
           onChange: setMode
         })
       }),
-      /* @__PURE__ */ jsx10(StoreTabs, {
+      /* @__PURE__ */ jsx7(StoreTabs, {
         stores,
         selectedStoreId: mode === "state" ? activeStore?.id ?? null : storeFilter,
         onSelect: setStoreFilter,
         includeAll: mode === "timeline"
       }),
-      mode === "state" ? activeStore != null ? /* @__PURE__ */ jsx10(StateInspector, {
+      mode === "state" ? activeStore != null ? /* @__PURE__ */ jsx7(StateInspector, {
         store: activeStore,
         onApply: (id, next) => core.applyEdit(id, next)
-      }) : /* @__PURE__ */ jsx10(EmptyMessage, {
+      }) : /* @__PURE__ */ jsx7(EmptyMessage, {
         children: "No stores registered. Call core.registerStore(...)."
-      }) : /* @__PURE__ */ jsxs8("div", {
+      }) : /* @__PURE__ */ jsxs7("div", {
         style: {
           flex: 1,
           display: "flex",
@@ -2245,7 +1739,7 @@ function NiceStateDevtools_Panel({
           minHeight: 0
         },
         children: [
-          /* @__PURE__ */ jsxs8("div", {
+          /* @__PURE__ */ jsxs7("div", {
             style: {
               flexGrow: selectedChange != null ? 1 - detailRatio : 1,
               flexShrink: 1,
@@ -2257,7 +1751,8 @@ function NiceStateDevtools_Panel({
               overflow: "hidden"
             },
             children: [
-              /* @__PURE__ */ jsx10(TimelineFollowToggles, {
+              /* @__PURE__ */ jsx7(FollowLatestToggles, {
+                noun: "change",
                 stayOnLatest,
                 onStayOnLatestChange: (next) => setPrefs({ stayOnLatest: next }),
                 followLatestOnSelect,
@@ -2269,9 +1764,10 @@ function NiceStateDevtools_Panel({
                   }
                 }
               }),
-              /* @__PURE__ */ jsx10("div", {
-                style: { flex: 1, minHeight: 0, overflowY: "auto" },
-                children: /* @__PURE__ */ jsx10(ChangeList, {
+              /* @__PURE__ */ jsx7("div", {
+                style: { flex: 1, minHeight: 0, display: "flex", flexDirection: "column" },
+                children: /* @__PURE__ */ jsx7(ChangeList, {
+                  style: { flex: 1, minHeight: 0, overflowY: "auto" },
                   groups,
                   selectedCuid: selectedChangeCuid,
                   onSelect: (cuid) => {
@@ -2289,13 +1785,13 @@ function NiceStateDevtools_Panel({
               })
             ]
           }),
-          selectedChange != null && /* @__PURE__ */ jsxs8(Fragment, {
+          selectedChange != null && /* @__PURE__ */ jsxs7(Fragment, {
             children: [
-              /* @__PURE__ */ jsx10(SplitHandle, {
+              /* @__PURE__ */ jsx7(SplitHandle, {
                 horizontal: isHorizDock,
                 onRatioChange: (ratio) => setPrefs({ detailRatio: ratio })
               }),
-              /* @__PURE__ */ jsx10("div", {
+              /* @__PURE__ */ jsx7("div", {
                 style: {
                   flexGrow: detailRatio,
                   flexShrink: 1,
@@ -2313,7 +1809,7 @@ function NiceStateDevtools_Panel({
                     boxShadow: "inset 0 18px 36px -14px rgba(0,0,0,0.8)"
                   }
                 },
-                children: /* @__PURE__ */ jsx10(ChangeDetailPanel, {
+                children: /* @__PURE__ */ jsx7(ChangeDetailPanel, {
                   change: selectedChange,
                   onRevert: (c) => core.revertChange(c),
                   view: detailView,
@@ -2331,84 +1827,8 @@ function NiceStateDevtools_Panel({
     ]
   });
 }
-function TimelineFollowToggles({
-  stayOnLatest,
-  onStayOnLatestChange,
-  followLatestOnSelect,
-  onFollowLatestOnSelectChange
-}) {
-  return /* @__PURE__ */ jsxs8("div", {
-    style: {
-      display: "flex",
-      flexDirection: "column",
-      flexShrink: 0,
-      paddingBottom: "3px",
-      background: DEVTOOL_SECTION_BACKGROUND,
-      borderBottom: `1px solid ${DEVTOOL_LIST_BASE_BACKGROUND}`
-    },
-    children: [
-      /* @__PURE__ */ jsx10(ToggleLabel, {
-        title: "Auto-select the most recent change so the detail pane keeps showing the latest as new changes land",
-        checked: stayOnLatest,
-        onChange: onStayOnLatestChange,
-        children: "Follow latest"
-      }),
-      /* @__PURE__ */ jsxs8("div", {
-        style: { display: "flex", alignItems: "center", paddingLeft: "12px", marginTop: "-4px" },
-        children: [
-          /* @__PURE__ */ jsx10("span", {
-            "aria-hidden": true,
-            style: {
-              color: DEVTOOL_COLOR_TEXT_MUTED,
-              fontFamily: SANS_FONT,
-              fontSize: "10px",
-              lineHeight: 1
-            },
-            children: "└"
-          }),
-          /* @__PURE__ */ jsx10(ToggleLabel, {
-            title: "When you click the latest change, turn 'Follow latest' back on so the view resumes tracking new changes. Turn this off to pin exactly to the change you click instead.",
-            checked: followLatestOnSelect,
-            onChange: onFollowLatestOnSelectChange,
-            children: "clicking latest re-follows"
-          })
-        ]
-      })
-    ]
-  });
-}
-function ToggleLabel({
-  checked,
-  onChange,
-  title,
-  children
-}) {
-  return /* @__PURE__ */ jsxs8("label", {
-    title,
-    style: {
-      display: "flex",
-      alignItems: "center",
-      gap: "6px",
-      padding: "5px 10px",
-      cursor: "pointer",
-      userSelect: "none",
-      color: checked ? DEVTOOL_COLOR_TEXT_SECONDARY : DEVTOOL_COLOR_TEXT_MUTED,
-      fontSize: "10px",
-      fontFamily: SANS_FONT
-    },
-    children: [
-      /* @__PURE__ */ jsx10("input", {
-        type: "checkbox",
-        checked,
-        onChange: (e) => onChange(e.target.checked),
-        style: { accentColor: DEVTOOL_COLOR_SEMANTIC_SYSTEM, cursor: "pointer", margin: 0 }
-      }),
-      children
-    ]
-  });
-}
 function EmptyMessage({ children }) {
-  return /* @__PURE__ */ jsx10("div", {
+  return /* @__PURE__ */ jsx7("div", {
     style: {
       flex: 1,
       display: "flex",