@nice-code/state 0.3.3

package/build/devtools/browser/index.js

@@ -0,0 +1,1653 @@
+// src/devtools/core/StateDevtoolsCore.ts
+class StateDevtoolsCore {
+  _stores = new Map;
+  _changes = [];
+  _listeners = new Set;
+  _maxChanges;
+  _paused = false;
+  _cuidCounter = 0;
+  _sourceOverride = null;
+  constructor(options = {}) {
+    this._maxChanges = options.maxChanges ?? 250;
+  }
+  registerStore(label, store) {
+    const id = this._uniqueId(label);
+    let lastSnapshot = store.getRawState();
+    let pendingPatches = [];
+    let pendingInverse = [];
+    const unsubPatches = store.listenToPatches((patches, inverse) => {
+      for (const p of patches)
+        pendingPatches.push(p);
+      for (const p of inverse)
+        pendingInverse.push(p);
+    });
+    const unsubUpdate = store.subscribe(() => {
+      const snapshot = store.getRawState();
+      const patches = pendingPatches;
+      const inverse = pendingInverse;
+      pendingPatches = [];
+      pendingInverse = [];
+      const reg = this._stores.get(id);
+      if (reg != null)
+        reg.currentState = snapshot;
+      const source = this._sourceOverride ?? (patches.length > 0 ? "update" : "replace");
+      const prevSnapshot = lastSnapshot;
+      lastSnapshot = snapshot;
+      if (this._paused) {
+        this._notify();
+        return;
+      }
+      this._recordChange(id, {
+        cuid: `chg_${++this._cuidCounter}`,
+        storeId: id,
+        storeLabel: label,
+        timestamp: Date.now(),
+        patches,
+        inversePatches: inverse,
+        prevSnapshot,
+        snapshot,
+        source
+      });
+    });
+    this._stores.set(id, {
+      id,
+      label,
+      store,
+      currentState: lastSnapshot,
+      changeCount: 0,
+      unsubscribe: () => {
+        unsubPatches();
+        unsubUpdate();
+      }
+    });
+    this._notify();
+    return () => this.unregisterStore(id);
+  }
+  unregisterStore(id) {
+    const reg = this._stores.get(id);
+    if (reg == null)
+      return;
+    reg.unsubscribe();
+    this._stores.delete(id);
+    this._changes = this._changes.filter((c) => c.storeId !== id);
+    this._notify();
+  }
+  applyEdit(storeId, newState) {
+    const reg = this._stores.get(storeId);
+    if (reg == null)
+      return;
+    this._sourceOverride = "devtools-edit";
+    try {
+      reg.store.replace(newState);
+    } finally {
+      this._sourceOverride = null;
+    }
+  }
+  revertChange(change) {
+    const reg = this._stores.get(change.storeId);
+    if (reg == null || change.inversePatches.length === 0)
+      return;
+    this._sourceOverride = "devtools-revert";
+    try {
+      reg.store.applyPatches(change.inversePatches);
+    } finally {
+      this._sourceOverride = null;
+    }
+  }
+  setPaused(paused) {
+    if (this._paused === paused)
+      return;
+    this._paused = paused;
+    this._notify();
+  }
+  togglePaused() {
+    this.setPaused(!this._paused);
+  }
+  clear() {
+    this._changes = [];
+    for (const reg of this._stores.values()) {
+      reg.changeCount = 0;
+      reg.lastChangeTime = undefined;
+    }
+    this._notify();
+  }
+  getSnapshot() {
+    return this._buildSnapshot();
+  }
+  subscribe(listener) {
+    this._listeners.add(listener);
+    listener(this._buildSnapshot());
+    return () => {
+      this._listeners.delete(listener);
+    };
+  }
+  _recordChange(id, change) {
+    const reg = this._stores.get(id);
+    if (reg != null) {
+      reg.changeCount += 1;
+      reg.lastChangeTime = change.timestamp;
+    }
+    this._changes = [change, ...this._changes];
+    if (this._changes.length > this._maxChanges) {
+      this._changes.length = this._maxChanges;
+    }
+    this._notify();
+  }
+  _uniqueId(label) {
+    if (!this._stores.has(label))
+      return label;
+    let n = 2;
+    while (this._stores.has(`${label} (${n})`))
+      n += 1;
+    return `${label} (${n})`;
+  }
+  _buildSnapshot() {
+    const stores = [];
+    for (const reg of this._stores.values()) {
+      stores.push({
+        id: reg.id,
+        label: reg.label,
+        currentState: reg.currentState,
+        changeCount: reg.changeCount,
+        lastChangeTime: reg.lastChangeTime
+      });
+    }
+    return { stores, changes: this._changes, paused: this._paused };
+  }
+  _notify() {
+    const snapshot = this._buildSnapshot();
+    for (const listener of this._listeners)
+      listener(snapshot);
+  }
+}
+// src/devtools/browser/NiceStateDevtools.tsx
+import { useEffect as useEffect2, useId, useMemo, useReducer, useState as useState4 } 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";
+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/devtools_dock.ts
+var GLOBAL_KEY = "__NICE_DEVTOOLS_DOCK__";
+var VERSION = 2;
+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;
+      const self = panels.get(id);
+      if (self != null && self.open) {
+        for (const panel of list) {
+          if (panel.id === id)
+            break;
+          if (panel.open && panel.side === self.side)
+            dockOffset += panel.size;
+        }
+      }
+      return {
+        dockOffset,
+        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/components/ChangeDetailPanel.tsx
+import { useState as useState2 } from "react";
+
+// 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
+  });
+}
+var SOURCE_LABEL = {
+  update: "UPDATE",
+  replace: "REPLACE",
+  "devtools-edit": "EDIT",
+  "devtools-revert": "REVERT"
+};
+var SOURCE_COLOR = {
+  update: DEVTOOL_COLOR_SEMANTIC_SYSTEM,
+  replace: DEVTOOL_COLOR_SEMANTIC_METADATA,
+  "devtools-edit": DEVTOOL_COLOR_SEMANTIC_WARNING,
+  "devtools-revert": DEVTOOL_COLOR_SEMANTIC_WARNING
+};
+function patchPathToString(path) {
+  if (path.length === 0)
+    return "(root)";
+  return path.map((seg) => String(seg)).join(".");
+}
+function summarizeChange(change) {
+  const { patches } = change;
+  if (patches.length === 0) {
+    return change.source === "replace" || change.source === "devtools-edit" ? "whole state replaced" : "no patches";
+  }
+  if (patches.length === 1) {
+    const p = patches[0];
+    const path = patchPathToString(p.path);
+    if (p.op === "replace" && isScalar(p.value)) {
+      return `${path} → ${formatScalar(p.value)}`;
+    }
+    if (p.op === "add")
+      return `+ ${path}`;
+    if (p.op === "remove")
+      return `− ${path}`;
+    return path;
+  }
+  const paths = patches.map((p) => topLevel(p.path)).filter((s) => s.length > 0);
+  const unique = [...new Set(paths)];
+  const shown = unique.slice(0, 3).join(", ");
+  return unique.length > 3 ? `${shown} +${unique.length - 3}` : shown;
+}
+function topLevel(path) {
+  return path.length > 0 ? String(path[0]) : "(root)";
+}
+function computeDiff(before, after) {
+  const out = [];
+  walkDiff([], before, after, out);
+  return out;
+}
+function isPlainObjectOrArray(value) {
+  return value != null && typeof value === "object";
+}
+function walkDiff(path, before, after, out) {
+  if (Object.is(before, after))
+    return;
+  const bothContainers = isPlainObjectOrArray(before) && isPlainObjectOrArray(after);
+  const sameShape = bothContainers && Array.isArray(before) === Array.isArray(after);
+  if (sameShape) {
+    const b = before;
+    const a = after;
+    const keys = new Set([...Object.keys(b), ...Object.keys(a)]);
+    for (const key of keys) {
+      const inB = key in b;
+      const inA = key in a;
+      const next = [...path, key];
+      if (inB && !inA) {
+        out.push({ path: formatDiffPath(next), kind: "removed", before: b[key] });
+      } else if (!inB && inA) {
+        out.push({ path: formatDiffPath(next), kind: "added", after: a[key] });
+      } else {
+        walkDiff(next, b[key], a[key], out);
+      }
+    }
+    return;
+  }
+  out.push({ path: formatDiffPath(path), kind: "changed", before, after });
+}
+function formatDiffPath(path) {
+  return path.length === 0 ? "(root)" : path.map((seg) => String(seg)).join(".");
+}
+function isScalar(value) {
+  return value == null || typeof value !== "object";
+}
+function formatScalar(value) {
+  if (typeof value === "string")
+    return `"${value.length > 24 ? `${value.slice(0, 24)}…` : value}"`;
+  return String(value);
+}
+
+// src/devtools/browser/components/JsonView.tsx
+import { jsxDEV } from "react/jsx-dev-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__ */ jsxDEV("span", {
+          style: { color: DEVTOOL_JSON_KEY },
+          children: str
+        }, i++, false, undefined, this));
+        nodes.push(/* @__PURE__ */ jsxDEV("span", {
+          style: { color: DEVTOOL_JSON_PUNCTUATION },
+          children: colon
+        }, i++, false, undefined, this));
+      } else {
+        nodes.push(/* @__PURE__ */ jsxDEV("span", {
+          style: { color: DEVTOOL_JSON_STRING },
+          children: str
+        }, i++, false, undefined, this));
+      }
+    } else if (num != null) {
+      nodes.push(/* @__PURE__ */ jsxDEV("span", {
+        style: { color: DEVTOOL_JSON_NUMBER },
+        children: num
+      }, i++, false, undefined, this));
+    } else if (kw != null) {
+      nodes.push(/* @__PURE__ */ jsxDEV("span", {
+        style: { color: DEVTOOL_JSON_KEYWORD },
+        children: kw
+      }, i++, false, undefined, this));
+    } else if (punct != null) {
+      nodes.push(/* @__PURE__ */ jsxDEV("span", {
+        style: { color: DEVTOOL_JSON_PUNCTUATION },
+        children: punct
+      }, i++, false, undefined, this));
+    }
+    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__ */ jsxDEV("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)
+  }, undefined, false, undefined, this);
+}
+
+// src/devtools/browser/components/DiffView.tsx
+import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
+var ADDED_BG = "rgba(163, 230, 53, 0.08)";
+var REMOVED_BG = "rgba(255, 92, 92, 0.08)";
+function DiffView({ before, after }) {
+  const entries = computeDiff(before, after);
+  if (entries.length === 0) {
+    return /* @__PURE__ */ jsxDEV2("div", {
+      style: {
+        padding: "10px",
+        borderRadius: "4px",
+        background: DEVTOOL_SECTION_STRING_BACKGROUND,
+        color: DEVTOOL_COLOR_TEXT_MUTED,
+        fontSize: "11px",
+        fontStyle: "italic"
+      },
+      children: "No differences — before and after are structurally equal."
+    }, undefined, false, undefined, this);
+  }
+  return /* @__PURE__ */ jsxDEV2("div", {
+    style: { display: "flex", flexDirection: "column", gap: "6px" },
+    children: entries.map((entry) => /* @__PURE__ */ jsxDEV2(DiffRow, {
+      entry
+    }, `${entry.kind}:${entry.path}`, false, undefined, this))
+  }, undefined, false, undefined, this);
+}
+function DiffRow({ entry }) {
+  const showRemoved = entry.kind === "removed" || entry.kind === "changed";
+  const showAdded = entry.kind === "added" || entry.kind === "changed";
+  return /* @__PURE__ */ jsxDEV2("div", {
+    style: {
+      borderRadius: "4px",
+      overflow: "hidden",
+      border: `1px solid ${DEVTOOL_SECTION_STRING_BACKGROUND}`
+    },
+    children: [
+      /* @__PURE__ */ jsxDEV2("div", {
+        style: {
+          padding: "3px 8px",
+          background: DEVTOOL_SECTION_STRING_BACKGROUND,
+          color: DEVTOOL_COLOR_TEXT_SECONDARY,
+          fontFamily: MONO_FONT,
+          fontSize: "10px"
+        },
+        children: entry.path
+      }, undefined, false, undefined, this),
+      showRemoved && /* @__PURE__ */ jsxDEV2(DiffLine, {
+        sign: "−",
+        color: DEVTOOL_COLOR_SEMANTIC_ERROR,
+        background: REMOVED_BG,
+        value: entry.before
+      }, undefined, false, undefined, this),
+      showAdded && /* @__PURE__ */ jsxDEV2(DiffLine, {
+        sign: "+",
+        color: DEVTOOL_COLOR_SEMANTIC_SUCCESS,
+        background: ADDED_BG,
+        value: entry.after
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+function DiffLine({
+  sign,
+  color,
+  background,
+  value
+}) {
+  return /* @__PURE__ */ jsxDEV2("div", {
+    style: { display: "flex", gap: "6px", padding: "3px 8px", background },
+    children: [
+      /* @__PURE__ */ jsxDEV2("span", {
+        style: { color, fontWeight: 700, flexShrink: 0, userSelect: "none" },
+        children: sign
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV2("span", {
+        style: {
+          flex: 1,
+          minWidth: 0,
+          fontFamily: MONO_FONT,
+          fontSize: "11px",
+          lineHeight: 1.5,
+          whiteSpace: "pre-wrap",
+          wordBreak: "break-word"
+        },
+        children: renderColoredJson(safeStringify(value, 2))
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/devtools/browser/components/PanelChrome.tsx
+import {
+  useState
+} from "react";
+import { jsxDEV as jsxDEV3 } from "react/jsx-dev-runtime";
+var DOCKED_SIZE_MIN = 160;
+var POSITION_GRID = [
+  [null, "dock-top", null],
+  ["dock-left", null, "dock-right"],
+  [null, "dock-bottom", 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__ */ jsxDEV3("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__ */ jsxDEV3("div", {
+        style: { display: "flex", alignItems: "center", gap: "8px", minWidth: 0 },
+        children: [
+          /* @__PURE__ */ jsxDEV3("span", {
+            style: {
+              color: DEVTOOL_COLOR_SEMANTIC_SYSTEM,
+              fontWeight: "bold",
+              fontSize: "11px",
+              whiteSpace: "nowrap"
+            },
+            children: "\uD83E\uDDE9 state"
+          }, undefined, false, undefined, this),
+          openOthers?.map((item) => /* @__PURE__ */ jsxDEV3("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__ */ jsxDEV3("span", {
+                children: item.icon
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV3("span", {
+                children: item.label
+              }, undefined, false, undefined, this),
+              item.badge != null && /* @__PURE__ */ jsxDEV3("span", {
+                style: { color: DEVTOOL_COLOR_SEMANTIC_SYSTEM },
+                children: item.badge
+              }, undefined, false, undefined, this)
+            ]
+          }, item.id, true, undefined, this))
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV3("div", {
+        style: { display: "flex", gap: "10px", alignItems: "center" },
+        children: [
+          children,
+          /* @__PURE__ */ jsxDEV3("button", {
+            onClick: onTogglePause,
+            title: paused ? "Resume recording" : "Pause recording",
+            style: chromeButtonStyle(paused ? DEVTOOL_COLOR_SEMANTIC_SYSTEM : DEVTOOL_COLOR_TEXT_MUTED),
+            children: paused ? "▶ resume" : "⏸ pause"
+          }, undefined, false, undefined, this),
+          onClear != null && /* @__PURE__ */ jsxDEV3("button", {
+            onClick: onClear,
+            style: chromeButtonStyle(DEVTOOL_COLOR_TEXT_MUTED),
+            children: "clear"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV3(PositionPicker, {
+            position,
+            onChange: onPositionChange
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV3("button", {
+            onClick: onClose,
+            style: {
+              ...chromeButtonStyle(DEVTOOL_COLOR_TEXT_MUTED),
+              fontSize: "16px",
+              lineHeight: "1"
+            },
+            children: "×"
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+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__ */ jsxDEV3("div", {
+    title: "Move / dock panel",
+    style: { display: "grid", gridTemplateColumns: "repeat(3, 9px)", gap: "2px", padding: "2px" },
+    children: POSITION_GRID.flat().map((pos) => {
+      if (pos == null)
+        return /* @__PURE__ */ jsxDEV3("div", {
+          style: { width: "9px", height: "9px" }
+        }, "center-empty", false, undefined, this);
+      const isDock = pos.startsWith("dock-");
+      const isTopBottom = pos === "dock-top" || pos === "dock-bottom";
+      const isActive = pos === position;
+      return /* @__PURE__ */ jsxDEV3("div", {
+        title: pos,
+        onClick: () => onChange(pos),
+        style: {
+          width: "9px",
+          height: "9px",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          cursor: "pointer"
+        },
+        children: /* @__PURE__ */ jsxDEV3("div", {
+          style: {
+            width: isDock ? isTopBottom ? "9px" : "3px" : "7px",
+            height: isDock ? isTopBottom ? "3px" : "9px" : "7px",
+            borderRadius: isDock ? "1px" : "50%",
+            background: isActive ? DEVTOOL_COLOR_SEMANTIC_SYSTEM : DEVTOOL_COLOR_TEXT_FAINT
+          }
+        }, undefined, false, undefined, this)
+      }, pos, false, undefined, this);
+    })
+  }, undefined, false, undefined, this);
+}
+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__ */ jsxDEV3("div", {
+    onMouseDown,
+    style: { position: "absolute", zIndex: 10, background: "transparent", ...edgeStyle }
+  }, undefined, false, undefined, this);
+}
+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__ */ jsxDEV3("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
+    }
+  }, undefined, false, undefined, this);
+}
+function SegmentedControl({
+  options,
+  value,
+  onChange
+}) {
+  return /* @__PURE__ */ jsxDEV3("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__ */ jsxDEV3("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, false, undefined, this);
+    })
+  }, undefined, false, undefined, this);
+}
+function DevtoolsLauncher({ items }) {
+  return /* @__PURE__ */ jsxDEV3("div", {
+    style: {
+      position: "fixed",
+      bottom: "16px",
+      right: "16px",
+      zIndex: 2147483646,
+      display: "flex",
+      fontFamily: MONO_FONT,
+      fontSize: "12px"
+    },
+    children: /* @__PURE__ */ jsxDEV3("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__ */ jsxDEV3("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__ */ jsxDEV3("span", {
+            children: item.icon
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV3("span", {
+            children: item.label
+          }, undefined, false, undefined, this),
+          item.badge != null && /* @__PURE__ */ jsxDEV3("span", {
+            style: { color: DEVTOOL_COLOR_SEMANTIC_SYSTEM },
+            children: item.badge
+          }, undefined, false, undefined, this)
+        ]
+      }, item.id, true, undefined, this))
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+
+// src/devtools/browser/components/ChangeDetailPanel.tsx
+import { jsxDEV as jsxDEV4 } from "react/jsx-dev-runtime";
+function ChangeDetailPanel({
+  change,
+  onRevert
+}) {
+  const [view, setView] = useState2("diff");
+  const canRevert = change.inversePatches.length > 0;
+  return /* @__PURE__ */ jsxDEV4("div", {
+    style: {
+      flex: 1,
+      display: "flex",
+      flexDirection: "column",
+      overflow: "hidden",
+      minHeight: 0,
+      background: DEVTOOL_DETAIL_BASE_BACKGROUND
+    },
+    children: [
+      /* @__PURE__ */ jsxDEV4("div", {
+        style: {
+          padding: "8px 12px",
+          background: DEVTOOL_DETAIL_HEADER_BACKGROUND,
+          borderBottom: `1px solid ${DEVTOOL_LIST_BASE_BACKGROUND}`,
+          display: "flex",
+          alignItems: "center",
+          gap: "8px",
+          flexShrink: 0
+        },
+        children: [
+          /* @__PURE__ */ jsxDEV4("span", {
+            style: {
+              color: DEVTOOL_COLOR_TEXT_EMPHASIS,
+              fontWeight: 600,
+              fontFamily: MONO_FONT,
+              fontSize: "12px",
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              whiteSpace: "nowrap"
+            },
+            children: change.storeLabel
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV4("span", {
+            style: {
+              padding: "1px 7px",
+              borderRadius: "999px",
+              background: SOURCE_COLOR[change.source],
+              color: "#0f172a",
+              fontSize: "8px",
+              fontWeight: 700,
+              letterSpacing: "0.08em",
+              fontFamily: SANS_FONT
+            },
+            children: SOURCE_LABEL[change.source]
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV4("span", {
+            style: { flex: 1 }
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV4("span", {
+            style: { color: DEVTOOL_COLOR_TEXT_MUTED, fontSize: "10px", fontFamily: MONO_FONT },
+            children: formatTimestamp(change.timestamp)
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV4("button", {
+            onClick: () => onRevert(change),
+            disabled: !canRevert,
+            title: canRevert ? "Apply this change's inverse patches to undo it" : "No inverse patches available to revert",
+            style: {
+              background: "transparent",
+              border: `1px solid ${canRevert ? DEVTOOL_COLOR_SEMANTIC_WARNING : DEVTOOL_SECTION_BACKGROUND}`,
+              color: canRevert ? DEVTOOL_COLOR_SEMANTIC_WARNING : DEVTOOL_COLOR_TEXT_MUTED,
+              borderRadius: "4px",
+              cursor: canRevert ? "pointer" : "not-allowed",
+              fontSize: "10px",
+              padding: "2px 8px",
+              fontFamily: SANS_FONT,
+              flexShrink: 0
+            },
+            children: "⟲ revert"
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV4("div", {
+        style: {
+          padding: "6px 12px",
+          borderBottom: `1px solid ${DEVTOOL_LIST_BASE_BACKGROUND}`,
+          flexShrink: 0
+        },
+        children: /* @__PURE__ */ jsxDEV4(SegmentedControl, {
+          options: [
+            { value: "diff", label: "Diff View" },
+            { value: "before", label: "Before" },
+            { value: "after", label: "After" }
+          ],
+          value: view,
+          onChange: setView
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV4("div", {
+        style: {
+          flex: 1,
+          overflowY: "auto",
+          minHeight: 0,
+          padding: "10px 12px"
+        },
+        children: [
+          view === "diff" && /* @__PURE__ */ jsxDEV4(DiffView, {
+            before: change.prevSnapshot,
+            after: change.snapshot
+          }, undefined, false, undefined, this),
+          view === "before" && /* @__PURE__ */ jsxDEV4(JsonView, {
+            value: change.prevSnapshot
+          }, undefined, false, undefined, this),
+          view === "after" && /* @__PURE__ */ jsxDEV4(JsonView, {
+            value: change.snapshot
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/devtools/browser/components/ChangeList.tsx
+import { jsxDEV as jsxDEV5 } from "react/jsx-dev-runtime";
+function ChangeList({
+  changes,
+  selectedCuid,
+  onSelect,
+  showStore,
+  style
+}) {
+  if (changes.length === 0) {
+    return /* @__PURE__ */ jsxDEV5("div", {
+      style: {
+        padding: "24px",
+        textAlign: "center",
+        color: DEVTOOL_COLOR_TEXT_MUTED,
+        fontSize: "11px",
+        ...style
+      },
+      children: "No changes recorded yet. Mutate a store to see it here."
+    }, undefined, false, undefined, this);
+  }
+  return /* @__PURE__ */ jsxDEV5("div", {
+    style,
+    children: changes.map((change) => /* @__PURE__ */ jsxDEV5(ChangeRow, {
+      change,
+      selected: change.cuid === selectedCuid,
+      onClick: () => onSelect(change.cuid),
+      showStore
+    }, change.cuid, false, undefined, this))
+  }, undefined, false, undefined, this);
+}
+function ChangeRow({
+  change,
+  selected,
+  onClick,
+  showStore
+}) {
+  const sourceColor = SOURCE_COLOR[change.source];
+  return /* @__PURE__ */ jsxDEV5("div", {
+    onClick,
+    style: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "3px",
+      padding: "6px 10px",
+      cursor: "pointer",
+      borderBottom: `1px solid ${DEVTOOL_SECTION_BACKGROUND}`,
+      borderLeft: `2px solid ${selected ? DEVTOOL_COLOR_SEMANTIC_SYSTEM : "transparent"}`,
+      background: selected ? DEVTOOL_LIST_SELECTED_BACKGROUND : DEVTOOL_LIST_BASE_BACKGROUND
+    },
+    children: [
+      /* @__PURE__ */ jsxDEV5("div", {
+        style: { display: "flex", alignItems: "center", gap: "6px" },
+        children: [
+          /* @__PURE__ */ jsxDEV5("span", {
+            style: {
+              color: DEVTOOL_COLOR_TEXT_MUTED,
+              fontSize: "10px",
+              fontFamily: MONO_FONT,
+              flexShrink: 0
+            },
+            children: formatTimestamp(change.timestamp)
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV5(Badge, {
+            color: sourceColor,
+            children: SOURCE_LABEL[change.source]
+          }, undefined, false, undefined, this),
+          showStore && /* @__PURE__ */ jsxDEV5("span", {
+            style: {
+              color: DEVTOOL_COLOR_SEMANTIC_SYSTEM,
+              fontSize: "10px",
+              fontFamily: MONO_FONT,
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              whiteSpace: "nowrap"
+            },
+            children: change.storeLabel
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV5("span", {
+            style: { flex: 1 }
+          }, undefined, false, undefined, this),
+          change.patches.length > 0 && /* @__PURE__ */ jsxDEV5("span", {
+            style: { color: DEVTOOL_COLOR_TEXT_FAINT, fontSize: "10px", flexShrink: 0 },
+            children: [
+              change.patches.length,
+              " patch",
+              change.patches.length === 1 ? "" : "es"
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV5("div", {
+        style: {
+          color: DEVTOOL_COLOR_TEXT_SECONDARY,
+          fontSize: "11px",
+          fontFamily: MONO_FONT,
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          whiteSpace: "nowrap"
+        },
+        children: summarizeChange(change)
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+function Badge({ color, children }) {
+  return /* @__PURE__ */ jsxDEV5("span", {
+    style: {
+      flexShrink: 0,
+      padding: "1px 6px",
+      borderRadius: "999px",
+      background: color,
+      color: "#0f172a",
+      fontSize: "8px",
+      fontWeight: 700,
+      letterSpacing: "0.08em",
+      fontFamily: SANS_FONT
+    },
+    children
+  }, undefined, false, undefined, this);
+}
+
+// src/devtools/browser/components/StateInspector.tsx
+import { useEffect, useState as useState3 } from "react";
+
+// src/devtools/browser/components/SectionLabel.tsx
+import { jsxDEV as jsxDEV6 } from "react/jsx-dev-runtime";
+function SectionLabel({
+  label,
+  color = DEVTOOL_COLOR_SEMANTIC_SYSTEM
+}) {
+  return /* @__PURE__ */ jsxDEV6("div", {
+    style: {
+      color,
+      fontSize: "0.85em",
+      marginBottom: "3px",
+      textTransform: "uppercase",
+      letterSpacing: "0.05em",
+      fontWeight: 500,
+      textAlign: "left"
+    },
+    children: label
+  }, undefined, false, undefined, this);
+}
+
+// src/devtools/browser/components/StateInspector.tsx
+import { jsxDEV as jsxDEV7 } from "react/jsx-dev-runtime";
+function StateInspector({
+  store,
+  onApply
+}) {
+  const liveText = safeStringify(store.currentState, 2);
+  const [draft, setDraft] = useState3(liveText);
+  const [dirty, setDirty] = useState3(false);
+  const [error, setError] = useState3(null);
+  useEffect(() => {
+    setDraft(liveText);
+    setDirty(false);
+    setError(null);
+  }, [store.id]);
+  useEffect(() => {
+    if (!dirty)
+      setDraft(liveText);
+  }, [liveText]);
+  const onEdit = (value) => {
+    setDraft(value);
+    setDirty(true);
+    setError(null);
+  };
+  const reload = () => {
+    setDraft(liveText);
+    setDirty(false);
+    setError(null);
+  };
+  const apply = () => {
+    let parsed;
+    try {
+      parsed = JSON.parse(draft);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Invalid JSON");
+      return;
+    }
+    onApply(store.id, parsed);
+    setDirty(false);
+    setError(null);
+  };
+  return /* @__PURE__ */ jsxDEV7("div", {
+    style: {
+      flex: 1,
+      display: "flex",
+      flexDirection: "column",
+      overflow: "hidden",
+      minHeight: 0,
+      background: DEVTOOL_DETAIL_BASE_BACKGROUND
+    },
+    children: [
+      /* @__PURE__ */ jsxDEV7("div", {
+        style: {
+          flex: 1,
+          minHeight: 0,
+          display: "flex",
+          flexDirection: "column",
+          padding: "10px 12px 8px"
+        },
+        children: [
+          /* @__PURE__ */ jsxDEV7(SectionLabel, {
+            label: "Current state"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV7("div", {
+            style: { flex: 1, minHeight: 0, overflow: "auto" },
+            children: /* @__PURE__ */ jsxDEV7(JsonView, {
+              value: store.currentState,
+              style: { minHeight: "100%" }
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV7("div", {
+        style: {
+          flex: 1,
+          minHeight: 0,
+          display: "flex",
+          flexDirection: "column",
+          padding: "8px 12px 10px",
+          borderTop: `1px solid ${DEVTOOL_PANEL_DIVIDER_BORDER}`
+        },
+        children: [
+          /* @__PURE__ */ jsxDEV7("div", {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              marginBottom: "3px"
+            },
+            children: [
+              /* @__PURE__ */ jsxDEV7(SectionLabel, {
+                label: "Edit & apply",
+                color: DEVTOOL_COLOR_SEMANTIC_WARNING
+              }, undefined, false, undefined, this),
+              dirty && /* @__PURE__ */ jsxDEV7("button", {
+                onClick: reload,
+                style: linkButtonStyle(DEVTOOL_COLOR_TEXT_MUTED),
+                children: "reload from store"
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV7("textarea", {
+            value: draft,
+            spellCheck: false,
+            onChange: (e) => onEdit(e.target.value),
+            style: {
+              flex: 1,
+              minHeight: 0,
+              width: "100%",
+              resize: "none",
+              boxSizing: "border-box",
+              background: DEVTOOL_EDITOR_BACKGROUND,
+              color: DEVTOOL_COLOR_TEXT_SECONDARY,
+              border: `1px solid ${error != null ? DEVTOOL_COLOR_SEMANTIC_ERROR : DEVTOOL_SECTION_BACKGROUND}`,
+              borderRadius: "4px",
+              padding: "8px 10px",
+              fontFamily: MONO_FONT,
+              fontSize: "11px",
+              lineHeight: 1.5
+            }
+          }, undefined, false, undefined, this),
+          error != null && /* @__PURE__ */ jsxDEV7("div", {
+            style: {
+              marginTop: "6px",
+              padding: "6px 8px",
+              borderRadius: "4px",
+              background: DEVTOOL_ERROR_BACKGROUND,
+              color: DEVTOOL_COLOR_SEMANTIC_ERROR,
+              fontFamily: MONO_FONT,
+              fontSize: "10px",
+              flexShrink: 0
+            },
+            children: error
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV7("div", {
+            style: { display: "flex", gap: "8px", marginTop: "8px", flexShrink: 0 },
+            children: /* @__PURE__ */ jsxDEV7("button", {
+              onClick: apply,
+              disabled: !dirty,
+              style: {
+                background: dirty ? DEVTOOL_COLOR_SEMANTIC_SUCCESS : DEVTOOL_SECTION_BACKGROUND,
+                color: dirty ? "#0f172a" : DEVTOOL_COLOR_TEXT_MUTED,
+                border: "none",
+                borderRadius: "4px",
+                cursor: dirty ? "pointer" : "not-allowed",
+                fontSize: "11px",
+                fontWeight: 600,
+                padding: "5px 14px",
+                fontFamily: SANS_FONT
+              },
+              children: "Apply to store"
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+function linkButtonStyle(color) {
+  return {
+    background: "none",
+    border: "none",
+    color,
+    cursor: "pointer",
+    fontSize: "10px",
+    padding: 0,
+    fontFamily: SANS_FONT
+  };
+}
+
+// src/devtools/browser/components/StoreTabs.tsx
+import { jsxDEV as jsxDEV8 } from "react/jsx-dev-runtime";
+function StoreTabs({
+  stores,
+  selectedStoreId,
+  onSelect,
+  includeAll = true
+}) {
+  return /* @__PURE__ */ jsxDEV8("div", {
+    style: {
+      display: "flex",
+      gap: "6px",
+      padding: "6px 10px",
+      overflowX: "auto",
+      background: DEVTOOL_LIST_BASE_BACKGROUND,
+      borderBottom: `1px solid ${DEVTOOL_SECTION_BACKGROUND}`,
+      flexShrink: 0
+    },
+    children: [
+      includeAll && /* @__PURE__ */ jsxDEV8(Pill, {
+        active: selectedStoreId == null,
+        onClick: () => onSelect(null),
+        label: "all"
+      }, undefined, false, undefined, this),
+      stores.length === 0 && /* @__PURE__ */ jsxDEV8("span", {
+        style: { color: DEVTOOL_COLOR_TEXT_MUTED, fontSize: "11px", padding: "2px 0" },
+        children: "no stores registered"
+      }, undefined, false, undefined, this),
+      stores.map((store) => /* @__PURE__ */ jsxDEV8(Pill, {
+        active: selectedStoreId === store.id,
+        onClick: () => onSelect(store.id),
+        label: store.label,
+        count: store.changeCount
+      }, store.id, false, undefined, this))
+    ]
+  }, undefined, true, undefined, this);
+}
+function Pill({
+  active,
+  onClick,
+  label,
+  count
+}) {
+  return /* @__PURE__ */ jsxDEV8("button", {
+    onClick,
+    style: {
+      display: "flex",
+      alignItems: "center",
+      gap: "5px",
+      background: active ? DEVTOOL_SECTION_BACKGROUND : "transparent",
+      color: active ? DEVTOOL_COLOR_SEMANTIC_SYSTEM : DEVTOOL_COLOR_TEXT_MUTED,
+      border: `1px solid ${active ? DEVTOOL_COLOR_SEMANTIC_SYSTEM : DEVTOOL_COLOR_TEXT_FAINT}`,
+      borderRadius: "5px",
+      cursor: "pointer",
+      fontSize: "11px",
+      fontFamily: MONO_FONT,
+      padding: "2px 8px",
+      whiteSpace: "nowrap",
+      flexShrink: 0
+    },
+    children: [
+      label,
+      count != null && count > 0 && /* @__PURE__ */ jsxDEV8("span", {
+        style: {
+          color: active ? DEVTOOL_COLOR_SEMANTIC_SYSTEM : DEVTOOL_COLOR_TEXT_FAINT,
+          fontSize: "10px"
+        },
+        children: count
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/devtools/browser/NiceStateDevtools.tsx
+import { jsxDEV as jsxDEV9, Fragment } from "react/jsx-dev-runtime";
+if (typeof document !== "undefined" && !document.getElementById("__nice-state-devtools-styles")) {
+  const style = document.createElement("style");
+  style.id = "__nice-state-devtools-styles";
+  style.textContent = `
+    @keyframes __nice-state-pulse {
+      0%, 100% { opacity: 1; }
+      50% { opacity: 0.35; }
+    }
+    #__nice-state-devtools-panel ::-webkit-scrollbar { width: 4px; height: 4px; }
+    #__nice-state-devtools-panel ::-webkit-scrollbar-track { background: transparent; }
+    #__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; }
+  `;
+  document.head?.appendChild(style);
+}
+var PREFS_KEY = "__nice-state-devtools-prefs";
+var DOCKED_HEIGHT_DEFAULT = 340;
+var DOCKED_WIDTH_DEFAULT = 460;
+var DETAIL_RATIO_DEFAULT = 0.5;
+var DOCK_POSITIONS = ["dock-bottom", "dock-top", "dock-left", "dock-right"];
+function isDockPosition(value) {
+  return typeof value === "string" && DOCK_POSITIONS.includes(value);
+}
+function readPrefs(defaultPosition, initialOpen) {
+  const fallback = {
+    position: defaultPosition,
+    isOpen: initialOpen,
+    dockedHeight: DOCKED_HEIGHT_DEFAULT,
+    dockedWidth: DOCKED_WIDTH_DEFAULT,
+    detailRatio: DETAIL_RATIO_DEFAULT
+  };
+  try {
+    if (typeof localStorage === "undefined")
+      return fallback;
+    const stored = localStorage.getItem(PREFS_KEY);
+    const merged = stored != null ? { ...fallback, ...JSON.parse(stored) } : fallback;
+    if (!isDockPosition(merged.position))
+      merged.position = defaultPosition;
+    return merged;
+  } catch {
+    return fallback;
+  }
+}
+function writePrefs(prefs) {
+  try {
+    localStorage.setItem(PREFS_KEY, JSON.stringify(prefs));
+  } catch {
+    return;
+  }
+}
+var EMPTY_SNAPSHOT = { stores: [], changes: [], paused: false };
+function NiceStateDevtools(props) {
+  if (false) {}
+  return /* @__PURE__ */ jsxDEV9(NiceStateDevtools_Panel, {
+    ...props
+  }, undefined, false, undefined, this);
+}
+function NiceStateDevtools_Panel({
+  core,
+  position: defaultPosition = "dock-bottom",
+  initialOpen = false
+}) {
+  const [prefs, setPrefsRaw] = useState4(() => readPrefs(defaultPosition, initialOpen));
+  const [snapshot, setSnapshot] = useState4(EMPTY_SNAPSHOT);
+  const [mode, setMode] = useState4("timeline");
+  const [storeFilter, setStoreFilter] = useState4(null);
+  const [selectedChangeCuid, setSelectedChangeCuid] = useState4(null);
+  useEffect2(() => core.subscribe(setSnapshot), [core]);
+  const setPrefs = (update) => {
+    setPrefsRaw((prev) => {
+      const next = { ...prev, ...update };
+      writePrefs(next);
+      return next;
+    });
+  };
+  const { stores, changes, paused } = snapshot;
+  const { position, isOpen, dockedHeight, dockedWidth, detailRatio } = prefs;
+  const dockSide = getDockSide(position);
+  const isHorizDock = dockSide === "top" || dockSide === "bottom";
+  const dockedSize = isHorizDock ? dockedHeight : dockedWidth;
+  const filteredChanges = useMemo(() => storeFilter == null ? changes : changes.filter((c) => c.storeId === storeFilter), [changes, storeFilter]);
+  const selectedChange = selectedChangeCuid != null ? changes.find((c) => c.cuid === selectedChangeCuid) ?? null : null;
+  const activeStore = stores.find((s) => s.id === storeFilter) ?? (stores.length > 0 ? stores[0] : null);
+  const dock = useMemo(() => getDevtoolsDockCoordinator(), []);
+  const panelId = useId();
+  const [, bumpView] = useReducer((n) => n + 1, 0);
+  const badge = changes.length > 0 ? String(changes.length) : undefined;
+  useEffect2(() => {
+    const unregister = dock.register({
+      id: panelId,
+      label: "state",
+      icon: "\uD83E\uDDE9",
+      side: dockSide,
+      size: dockedSize,
+      open: isOpen,
+      badge,
+      onOpen: () => setPrefs({ isOpen: true })
+    });
+    const unsubscribe = dock.subscribe(bumpView);
+    return () => {
+      unregister();
+      unsubscribe();
+    };
+  }, [dock, panelId]);
+  useEffect2(() => {
+    dock.update(panelId, { side: dockSide, size: dockedSize, open: isOpen, badge });
+  }, [dock, panelId, dockSide, dockedSize, isOpen, badge]);
+  const view = dock.getView(panelId);
+  const baseStyle = {
+    position: "fixed",
+    zIndex: 2147483646,
+    fontFamily: "ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace",
+    fontSize: "12px"
+  };
+  if (!isOpen) {
+    if (view.isPrimary && !view.anyOpen) {
+      return /* @__PURE__ */ jsxDEV9(DevtoolsLauncher, {
+        items: view.devtools
+      }, undefined, false, undefined, this);
+    }
+    return null;
+  }
+  const panelStyle = {
+    ...baseStyle,
+    background: DEVTOOL_LIST_BASE_BACKGROUND,
+    border: `1px solid ${DEVTOOL_PANEL_BORDER}`,
+    color: DEVTOOL_COLOR_TEXT_SECONDARY,
+    display: "flex",
+    flexDirection: "column",
+    boxShadow: "0 -4px 24px rgba(0,0,0,0.4)",
+    overflow: "hidden",
+    ...dockSide === "bottom" ? { bottom: view.dockOffset, left: 0, right: 0, height: `${dockedSize}px`, borderRadius: "8px 8px 0 0" } : dockSide === "top" ? { top: view.dockOffset, left: 0, right: 0, height: `${dockedSize}px`, borderRadius: "0 0 8px 8px" } : dockSide === "left" ? { top: 0, left: view.dockOffset, bottom: 0, width: `${dockedSize}px`, borderRadius: "0 8px 8px 0" } : { top: 0, right: view.dockOffset, bottom: 0, width: `${dockedSize}px`, borderRadius: "8px 0 0 8px" }
+  };
+  return /* @__PURE__ */ jsxDEV9("div", {
+    id: "__nice-state-devtools-panel",
+    style: panelStyle,
+    children: [
+      /* @__PURE__ */ jsxDEV9(ResizeHandle, {
+        dockSide,
+        dockedSize,
+        onChange: (size) => setPrefs(isHorizDock ? { dockedHeight: size } : { dockedWidth: size })
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV9(PanelHeader, {
+        position,
+        onPositionChange: (p) => setPrefs({ position: p }),
+        onClose: () => setPrefs({ isOpen: false }),
+        onClear: changes.length > 0 ? () => {
+          core.clear();
+          setSelectedChangeCuid(null);
+        } : undefined,
+        paused,
+        onTogglePause: () => core.togglePaused(),
+        openOthers: view.otherClosed,
+        children: /* @__PURE__ */ jsxDEV9(SegmentedControl, {
+          options: [
+            { value: "timeline", label: "Timeline" },
+            { value: "state", label: "State" }
+          ],
+          value: mode,
+          onChange: setMode
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV9(StoreTabs, {
+        stores,
+        selectedStoreId: mode === "state" ? activeStore?.id ?? null : storeFilter,
+        onSelect: setStoreFilter,
+        includeAll: mode === "timeline"
+      }, undefined, false, undefined, this),
+      mode === "state" ? activeStore != null ? /* @__PURE__ */ jsxDEV9(StateInspector, {
+        store: activeStore,
+        onApply: (id, next) => core.applyEdit(id, next)
+      }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV9(EmptyMessage, {
+        children: "No stores registered. Call core.registerStore(...)."
+      }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV9("div", {
+        style: {
+          flex: 1,
+          display: "flex",
+          flexDirection: isHorizDock ? "row" : "column",
+          overflow: "hidden",
+          minHeight: 0
+        },
+        children: [
+          /* @__PURE__ */ jsxDEV9("div", {
+            style: {
+              flexGrow: selectedChange != null ? 1 - detailRatio : 1,
+              flexShrink: 1,
+              flexBasis: 0,
+              minWidth: 0,
+              minHeight: 0,
+              overflowY: "auto"
+            },
+            children: /* @__PURE__ */ jsxDEV9(ChangeList, {
+              changes: filteredChanges,
+              selectedCuid: selectedChangeCuid,
+              onSelect: (cuid) => setSelectedChangeCuid((prev) => prev === cuid ? null : cuid),
+              showStore: storeFilter == null
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this),
+          selectedChange != null && /* @__PURE__ */ jsxDEV9(Fragment, {
+            children: [
+              /* @__PURE__ */ jsxDEV9(SplitHandle, {
+                horizontal: isHorizDock,
+                onRatioChange: (ratio) => setPrefs({ detailRatio: ratio })
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV9("div", {
+                style: {
+                  flexGrow: detailRatio,
+                  flexShrink: 1,
+                  flexBasis: 0,
+                  minWidth: 0,
+                  minHeight: 0,
+                  display: "flex",
+                  flexDirection: "column",
+                  overflow: "hidden",
+                  ...isHorizDock ? {
+                    borderLeft: `1px solid ${DEVTOOL_PANEL_DIVIDER_BORDER}`,
+                    boxShadow: "inset 18px 0 36px -14px rgba(0,0,0,0.8)"
+                  } : {
+                    borderTop: `1px solid ${DEVTOOL_PANEL_DIVIDER_BORDER}`,
+                    boxShadow: "inset 0 18px 36px -14px rgba(0,0,0,0.8)"
+                  }
+                },
+                children: /* @__PURE__ */ jsxDEV9(ChangeDetailPanel, {
+                  change: selectedChange,
+                  onRevert: (c) => core.revertChange(c)
+                }, selectedChange.cuid, false, undefined, this)
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+function EmptyMessage({ children }) {
+  return /* @__PURE__ */ jsxDEV9("div", {
+    style: {
+      flex: 1,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      padding: "24px",
+      textAlign: "center",
+      color: DEVTOOL_COLOR_TEXT_MUTED,
+      fontSize: "11px"
+    },
+    children
+  }, undefined, false, undefined, this);
+}
+export {
+  StateDevtoolsCore,
+  NiceStateDevtools
+};