@gridsheet/react-dev 3.0.0-rc.0 → 3.0.0-rc.2

package/README.md

@@ -0,0 +1,74 @@
+# @gridsheet/react-dev
+
+Development tools for [GridSheet](https://github.com/walkframe/gridsheet).
+
+## Overview
+
+`@gridsheet/react-dev` provides a `Debugger` component that gives you real-time visibility into the internal state of a GridSheet instance. It is intended for use during development only and should **not** be included in production builds.
+
+## Installation
+
+```bash
+npm install --save-dev @gridsheet/react-dev
+# or
+pnpm add -D @gridsheet/react-dev
+```
+
+## Usage
+
+Pass a `hub` object (created via `useHub` from `@gridsheet/react-core`) to the `Debugger` component.
+
+```tsx
+import React from 'react';
+import { GridSheet, useHub } from '@gridsheet/react-core';
+import { Debugger } from '@gridsheet/react-dev';
+
+export default function App() {
+  const hub = useHub();
+  return (
+    <>
+      <GridSheet hub={hub} />
+      <Debugger hub={hub} />
+    </>
+  );
+}
+```
+
+## Props
+
+### `Debugger`
+
+| Prop         | Type      | Default | Description                                           |
+|--------------|-----------|---------|-------------------------------------------------------|
+| `hub`        | `HubType` | —       | The hub object connected to a `GridSheet` instance.   |
+| `intervalMs` | `number`  | `500`   | Polling interval (ms) for refreshing the state view.  |
+
+## Panel Layout
+
+The `Debugger` renders a resizable panel divided into two rows:
+
+### Top row (resizable height)
+
+| Panel                  | Description                                                            |
+|------------------------|------------------------------------------------------------------------|
+| **Wire State**         | Snapshot of the shared wire state (choosing address, history, etc.).   |
+| **Cell**               | Data of the currently selected cell (value, style, meta, etc.).        |
+| **Formula Expressions**| Parsed AST of the formula in the selected cell (if any).               |
+| **Formula Tokens**     | Tokenized result of the formula lexer for the selected cell (if any).  |
+
+### Sheet tabs
+
+Tabs to switch which sheet's internal data is shown in the bottom row.
+
+### Bottom row (resizable height)
+
+| Panel          | Description                                      |
+|----------------|--------------------------------------------------|
+| **Table Data** | Raw table instance data for the selected sheet.  |
+| **Store Data** | Internal store state for the selected sheet.     |
+
+Both rows can be resized by dragging the divider between them. Heights are persisted in `sessionStorage`.
+
+## License
+
+Apache-2.0

package/dist/index.js

@@ -1,21 +1,66 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useState, useEffect } from "react";
-import { a2p, x2c, Lexer, FormulaParser } from "@gridsheet/react-core";
-const Debugger = ({ hub, intervalMs = 500 }) => {
-  const { wire } = hub;
+import { a2p, x2c, Lexer, FormulaParser, Sheet } from "@gridsheet/react-core";
+import { Light } from "react-syntax-highlighter";
+import jsonLang from "react-syntax-highlighter/dist/esm/languages/hljs/json";
+import atomOneLight from "react-syntax-highlighter/dist/esm/styles/hljs/atom-one-light";
+import tomorrowNight from "react-syntax-highlighter/dist/esm/styles/hljs/tomorrow-night";
+import solarizedDark from "react-syntax-highlighter/dist/esm/styles/hljs/solarized-dark";
+import solarizedLight from "react-syntax-highlighter/dist/esm/styles/hljs/solarized-light";
+import docco from "react-syntax-highlighter/dist/esm/styles/hljs/docco";
+import atelierSeasideLight from "react-syntax-highlighter/dist/esm/styles/hljs/atelier-seaside-light";
+import atelierHeathLight from "react-syntax-highlighter/dist/esm/styles/hljs/atelier-heath-light";
+Light.registerLanguage("json", jsonLang);
+const ss = {
+  get: (key) => typeof window !== "undefined" ? sessionStorage.getItem(key) : null,
+  set: (key, value) => {
+    if (typeof window !== "undefined") {
+      sessionStorage.setItem(key, value);
+    }
+  }
+};
+const JsonCode = ({
+  data,
+  replacer,
+  theme
+}) => {
+  const code = JSON.stringify(data, replacer, 2) ?? "";
+  return /* @__PURE__ */ jsx(
+    Light,
+    {
+      language: "json",
+      style: theme,
+      showLineNumbers: true,
+      customStyle: { margin: 0, fontSize: "10px", minHeight: "100%", borderRadius: 0, whiteSpace: "pre" },
+      codeTagProps: { style: { display: "block", whiteSpace: "pre", fontSize: "10px" } },
+      children: code
+    }
+  );
+};
+const Debugger = ({ book, intervalMs = 500 }) => {
+  const { registry } = book;
   const [snapshot, setSnapshot] = useState({});
   const [activeTabId, setActiveTabId] = useState(null);
-  const [topHeight, setTopHeight] = useState(() => {
-    const saved = sessionStorage.getItem("debugger_top_height");
-    return saved ? Number(saved) : 200;
-  });
-  const [bottomHeight, setBottomHeight] = useState(() => {
-    const saved = sessionStorage.getItem("debugger_bottom_height");
-    return saved ? Number(saved) : 200;
-  });
+  const [topHeight, setTopHeight] = useState(200);
+  const [bottomHeight, setBottomHeight] = useState(200);
+  const [formulaView, setFormulaView] = useState("expressions");
+  useEffect(() => {
+    const savedTop = ss.get("gs-debugger-top-height");
+    if (savedTop) {
+      setTopHeight(Number(savedTop));
+    }
+    const savedBottom = ss.get("gs-debugger-bottom-height");
+    if (savedBottom) {
+      setBottomHeight(Number(savedBottom));
+    }
+    const savedFormula = ss.get("gs-debugger-formula-view");
+    if (savedFormula) {
+      setFormulaView(savedFormula);
+    }
+  }, []);
   useEffect(() => {
     const updateSnapshot = () => {
-      if (!wire) {
+      if (!registry) {
         return;
       }
       const {
@@ -37,7 +82,7 @@ const Debugger = ({ hub, intervalMs = 500 }) => {
         histories,
         asyncPending,
         asyncInflight
-      } = wire;
+      } = registry;
       setSnapshot({
         asyncPending,
         asyncInflight,
@@ -62,7 +107,7 @@ const Debugger = ({ hub, intervalMs = 500 }) => {
     updateSnapshot();
     const intervalId = setInterval(updateSnapshot, intervalMs);
     return () => clearInterval(intervalId);
-  }, [wire, intervalMs]);
+  }, [registry, intervalMs]);
   const sheets = snapshot.sheetIdsByName ? Object.entries(snapshot.sheetIdsByName).map(([name, id]) => ({ id, name })).sort((a, b) => a.id - b.id) : [];
   useEffect(() => {
     if (activeTabId === null && sheets.length > 0) {
@@ -71,59 +116,61 @@ const Debugger = ({ hub, intervalMs = 500 }) => {
   }, [sheets.length, activeTabId]);
   let activeStoreData = null;
   let activeTableData = null;
-  let wireCellData = null;
-  let wireCellAddress = (wire == null ? void 0 : wire.choosingAddress) || "";
-  let wireCellSheetName = "";
-  let wireFormulaExpr = null;
-  let wireFormulaTokens = null;
-  if (wire && activeTabId !== null) {
-    const { contextsBySheetId } = wire;
+  let registryCellData = null;
+  let registrySystemData = null;
+  let registryCellAddress = (registry == null ? void 0 : registry.choosingAddress) || "";
+  let registryCellSheetName = "";
+  let registryFormulaExpr = null;
+  let registryFormulaTokens = null;
+  if (registry && activeTabId !== null) {
+    const { contextsBySheetId } = registry;
     const context = contextsBySheetId[activeTabId];
     if (context) {
       activeStoreData = context.store;
-      const table = context.store.tableReactive.current;
-      if (table) {
-        activeTableData = table;
+      const sheet = context.store.sheetReactive.current;
+      if (sheet) {
+        activeTableData = sheet;
       }
     }
   }
-  if (wire && wire.choosingSheetId != null) {
-    const { contextsBySheetId } = wire;
-    const choosingContext = contextsBySheetId[wire.choosingSheetId];
-    if (wire.sheetIdsByName) {
-      const entry = Object.entries(wire.sheetIdsByName).find(([, id]) => id === wire.choosingSheetId);
+  if (registry && registry.choosingSheetId != null) {
+    const { contextsBySheetId } = registry;
+    const choosingContext = contextsBySheetId[registry.choosingSheetId];
+    if (registry.sheetIdsByName) {
+      const entry = Object.entries(registry.sheetIdsByName).find(([, id]) => id === registry.choosingSheetId);
       if (entry) {
-        wireCellSheetName = entry[0];
+        registryCellSheetName = entry[0];
       }
     }
     if (choosingContext) {
-      const table = choosingContext.store.tableReactive.current;
+      const sheet = choosingContext.store.sheetReactive.current;
       const store = choosingContext.store;
-      if (table) {
-        const rawTable = table.__raw__ || table;
+      if (sheet) {
+        const rawTable = sheet.__raw__ || sheet;
         const idMatrix = rawTable.idMatrix;
         const isTopHeaderSelecting = store.topHeaderSelecting;
         const isLeftHeaderSelecting = store.leftHeaderSelecting;
-        const pos = isTopHeaderSelecting ? { y: 0, x: store.choosing.x } : isLeftHeaderSelecting ? { y: store.choosing.y, x: 0 } : a2p(wire.choosingAddress);
+        const pos = isTopHeaderSelecting ? { y: 0, x: store.choosing.x } : isLeftHeaderSelecting ? { y: store.choosing.y, x: 0 } : a2p(registry.choosingAddress);
         if (isTopHeaderSelecting) {
-          wireCellAddress = `header:${x2c(store.choosing.x)}`;
+          registryCellAddress = `header:${x2c(store.choosing.x)}`;
         } else if (isLeftHeaderSelecting) {
-          wireCellAddress = `header:${store.choosing.y}`;
+          registryCellAddress = `header:${store.choosing.y}`;
         }
         if (pos && idMatrix[pos.y]) {
           const id = idMatrix[pos.y][pos.x];
           if (id) {
-            wireCellData = wire.data[id];
-            const text = wireCellData == null ? void 0 : wireCellData.value;
+            registryCellData = registry.data[id];
+            registrySystemData = registry.systems[id] ?? null;
+            const text = registryCellData == null ? void 0 : registryCellData.value;
             if (typeof text === "string" && text.startsWith("=")) {
               try {
                 const lexer = new Lexer(text.substring(1));
                 lexer.tokenize();
-                wireFormulaTokens = lexer.tokens;
+                registryFormulaTokens = lexer.tokens;
                 const parser = new FormulaParser(lexer.tokens);
-                wireFormulaExpr = parser.build();
+                registryFormulaExpr = parser.build();
               } catch (e) {
-                wireFormulaExpr = { error: String(e) };
+                registryFormulaExpr = { error: String(e) };
               }
             }
           }
@@ -131,8 +178,8 @@ const Debugger = ({ hub, intervalMs = 500 }) => {
       }
     }
   }
-  const jsonReplacer = (key, value) => {
-    if (key === "wire" || key === "__raw__" || value && typeof value === "object" && "current" in value && Object.keys(value).length === 1) {
+  const baseReplacer = (key, value) => {
+    if (key === "registry" || key === "__raw__" || value && typeof value === "object" && "current" in value && Object.keys(value).length === 1) {
       return void 0;
     }
     if (value instanceof Map) {
@@ -143,6 +190,12 @@ const Debugger = ({ hub, intervalMs = 500 }) => {
     }
     return value;
   };
+  const jsonReplacer = (key, value) => {
+    if (value instanceof Sheet) {
+      return value.toString();
+    }
+    return baseReplacer(key, value);
+  };
   const startDrag = (e) => {
     e.preventDefault();
     const startY = e.clientY;
@@ -150,7 +203,7 @@ const Debugger = ({ hub, intervalMs = 500 }) => {
     const onMouseMove = (moveEvent) => {
       const h = Math.max(100, startHeight + moveEvent.clientY - startY);
       setTopHeight(h);
-      sessionStorage.setItem("debugger_top_height", String(h));
+      ss.set("gs-debugger-top-height", String(h));
     };
     const onMouseUp = () => {
       document.removeEventListener("mousemove", onMouseMove);
@@ -166,7 +219,7 @@ const Debugger = ({ hub, intervalMs = 500 }) => {
     const onMouseMove = (moveEvent) => {
       const h = Math.max(100, startHeight + moveEvent.clientY - startY);
       setBottomHeight(h);
-      sessionStorage.setItem("debugger_bottom_height", String(h));
+      ss.set("gs-debugger-bottom-height", String(h));
     };
     const onMouseUp = () => {
       document.removeEventListener("mousemove", onMouseMove);
@@ -222,10 +275,10 @@ const Debugger = ({ hub, intervalMs = 500 }) => {
                           fontWeight: "bold",
                           borderBottom: "2px solid #ccc"
                         },
-                        children: "Wire State"
+                        children: "Registry State"
                       }
                     ),
-                    /* @__PURE__ */ jsx("pre", { style: { margin: 0, padding: "12px" }, children: JSON.stringify(snapshot, jsonReplacer, 2) })
+                    /* @__PURE__ */ jsx(JsonCode, { data: snapshot, replacer: jsonReplacer, theme: atomOneLight })
                   ]
                 }
               ),
@@ -254,14 +307,12 @@ const Debugger = ({ hub, intervalMs = 500 }) => {
                         },
                         children: [
                           "Cell: ",
-                          wireCellSheetName && `${wireCellSheetName}!`,
-                          wireCellAddress,
-                          " ",
-                          (wire == null ? void 0 : wire.choosingSheetId) != null && `(SheetID: ${wire.choosingSheetId})`
+                          registryCellSheetName && `'${registryCellSheetName}'!`,
+                          registryCellAddress
                         ]
                       }
                     ),
-                    wireCellData ? /* @__PURE__ */ jsx("pre", { style: { margin: 0, padding: "12px" }, children: JSON.stringify(wireCellData, null, 2) }) : /* @__PURE__ */ jsx("div", { style: { fontStyle: "italic", color: "#6c757d", padding: "12px" }, children: "No cell data" })
+                    registryCellData ? /* @__PURE__ */ jsx(JsonCode, { data: registryCellData, replacer: baseReplacer, theme: atelierSeasideLight }) : /* @__PURE__ */ jsx("div", { style: { fontStyle: "italic", color: "#6c757d", padding: "12px" }, children: "No cell data" })
                   ]
                 }
               ),
@@ -272,47 +323,94 @@ const Debugger = ({ hub, intervalMs = 500 }) => {
                     flex: 1,
                     borderRight: "1px solid #dee2e6",
                     overflow: "auto",
-                    backgroundColor: "#fffbf0",
+                    backgroundColor: "#fdf0f2",
                     position: "relative"
                   },
                   children: [
-                    /* @__PURE__ */ jsx(
+                    /* @__PURE__ */ jsxs(
                       "div",
                       {
                         style: {
                           position: "sticky",
                           top: 0,
-                          background: "#fffbf0",
+                          background: "#fdf0f2",
                           zIndex: 1,
                           padding: "8px 12px",
                           fontWeight: "bold",
                           borderBottom: "2px solid #ccc"
                         },
-                        children: "Formula Expressions"
+                        children: [
+                          "System: ",
+                          registryCellSheetName && `'${registryCellSheetName}'!`,
+                          registryCellAddress
+                        ]
                       }
                     ),
-                    wireFormulaExpr ? /* @__PURE__ */ jsx("pre", { style: { margin: 0, padding: "12px" }, children: JSON.stringify(wireFormulaExpr, null, 2) }) : /* @__PURE__ */ jsx("div", { style: { fontStyle: "italic", color: "#6c757d", padding: "12px" }, children: wireCellData ? "Not a formula" : "No cell selected" })
+                    registrySystemData ? /* @__PURE__ */ jsx(JsonCode, { data: registrySystemData, replacer: baseReplacer, theme: atelierHeathLight }) : /* @__PURE__ */ jsx("div", { style: { fontStyle: "italic", color: "#6c757d", padding: "12px" }, children: "No system data" })
                   ]
                 }
               ),
-              /* @__PURE__ */ jsxs("div", { style: { flex: 1, overflow: "auto", backgroundColor: "#f5f0ff", position: "relative" }, children: [
-                /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    style: {
-                      position: "sticky",
-                      top: 0,
-                      background: "#f5f0ff",
-                      zIndex: 1,
-                      padding: "8px 12px",
-                      fontWeight: "bold",
-                      borderBottom: "2px solid #ccc"
-                    },
-                    children: "Formula Tokens"
-                  }
-                ),
-                wireFormulaTokens ? /* @__PURE__ */ jsx("pre", { style: { margin: 0, padding: "12px" }, children: JSON.stringify(wireFormulaTokens, null, 2) }) : /* @__PURE__ */ jsx("div", { style: { fontStyle: "italic", color: "#6c757d", padding: "12px" }, children: wireCellData ? "Not a formula" : "No cell selected" })
-              ] })
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    flex: 1,
+                    overflow: "auto",
+                    backgroundColor: formulaView === "expressions" ? "#fffbf0" : "#f5f0ff",
+                    position: "relative"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        style: {
+                          position: "sticky",
+                          top: 0,
+                          background: formulaView === "expressions" ? "#fffbf0" : "#f5f0ff",
+                          zIndex: 1,
+                          padding: "6px 12px",
+                          fontWeight: "bold",
+                          borderBottom: "2px solid #ccc",
+                          display: "flex",
+                          alignItems: "center",
+                          gap: "8px"
+                        },
+                        children: [
+                          /* @__PURE__ */ jsx("span", { children: formulaView === "expressions" ? "Formula Expressions" : "Formula Tokens" }),
+                          /* @__PURE__ */ jsx(
+                            "button",
+                            {
+                              onClick: () => {
+                                const next = formulaView === "expressions" ? "tokens" : "expressions";
+                                setFormulaView(next);
+                                ss.set("gs-debugger-formula-view", next);
+                              },
+                              style: {
+                                marginLeft: "auto",
+                                fontSize: "11px",
+                                padding: "2px 8px",
+                                cursor: "pointer",
+                                border: "1px solid #aaa",
+                                borderRadius: "4px",
+                                background: "#fff"
+                              },
+                              children: formulaView === "expressions" ? "→ Tokens" : "→ Expressions"
+                            }
+                          )
+                        ]
+                      }
+                    ),
+                    registryCellData ? /* @__PURE__ */ jsx(
+                      JsonCode,
+                      {
+                        data: formulaView === "expressions" ? registryFormulaExpr : registryFormulaTokens,
+                        replacer: baseReplacer,
+                        theme: formulaView === "expressions" ? solarizedLight : docco
+                      }
+                    ) : /* @__PURE__ */ jsx("div", { style: { fontStyle: "italic", color: "#6c757d", padding: "12px" }, children: "No cell selected" })
+                  ]
+                }
+              )
             ]
           }
         ),
@@ -376,35 +474,48 @@ const Debugger = ({ hub, intervalMs = 500 }) => {
               display: "flex",
               flexDirection: "row",
               height: `${bottomHeight}px`,
-              backgroundColor: "#fff",
+              backgroundColor: "#282c34",
               overflow: "hidden"
             },
             children: [
-              /* @__PURE__ */ jsxs("div", { style: { flex: 1, borderRight: "1px solid #dee2e6", overflow: "auto", position: "relative" }, children: [
-                /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    style: {
-                      position: "sticky",
-                      top: 0,
-                      background: "#fff",
-                      zIndex: 1,
-                      padding: "8px 12px",
-                      fontWeight: "bold",
-                      borderBottom: "2px solid #ccc"
-                    },
-                    children: "Table Data"
-                  }
-                ),
-                activeTableData ? /* @__PURE__ */ jsx("pre", { style: { margin: 0, padding: "12px" }, children: JSON.stringify(activeTableData, jsonReplacer, 2) }) : /* @__PURE__ */ jsx("div", { style: { fontStyle: "italic", color: "#6c757d", padding: "12px" }, children: "Table instance not found" })
-              ] }),
               /* @__PURE__ */ jsxs(
                 "div",
                 {
                   style: {
                     flex: 1,
+                    borderRight: "1px solid #3a3a3a",
                     overflow: "auto",
-                    backgroundColor: "#fdfdfe",
+                    position: "relative",
+                    backgroundColor: "#282c34"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        style: {
+                          position: "sticky",
+                          top: 0,
+                          background: "#21252b",
+                          zIndex: 1,
+                          padding: "8px 12px",
+                          fontWeight: "bold",
+                          borderBottom: "2px solid #3a3a3a",
+                          color: "#abb2bf"
+                        },
+                        children: "Sheet Data"
+                      }
+                    ),
+                    activeTableData ? /* @__PURE__ */ jsx(JsonCode, { data: activeTableData, replacer: baseReplacer, theme: tomorrowNight }) : /* @__PURE__ */ jsx("div", { style: { fontStyle: "italic", color: "#6c757d", padding: "12px" }, children: "Sheet instance not found" })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    flex: 1,
+                    overflow: "auto",
+                    backgroundColor: "#282c34",
                     position: "relative"
                   },
                   children: [
@@ -414,16 +525,17 @@ const Debugger = ({ hub, intervalMs = 500 }) => {
                         style: {
                           position: "sticky",
                           top: 0,
-                          background: "#fdfdfe",
+                          background: "#21252b",
                           zIndex: 1,
                           padding: "8px 12px",
                           fontWeight: "bold",
-                          borderBottom: "2px solid #ccc"
+                          borderBottom: "2px solid #3a3a3a",
+                          color: "#abb2bf"
                         },
                         children: "Store Data"
                       }
                     ),
-                    activeStoreData ? /* @__PURE__ */ jsx("pre", { style: { margin: 0, padding: "12px" }, children: JSON.stringify(activeStoreData, jsonReplacer, 2) }) : /* @__PURE__ */ jsx("div", { style: { fontStyle: "italic", color: "#6c757d", padding: "12px" }, children: "Store state not found" })
+                    activeStoreData ? /* @__PURE__ */ jsx(JsonCode, { data: activeStoreData, replacer: jsonReplacer, theme: solarizedDark }) : /* @__PURE__ */ jsx("div", { style: { fontStyle: "italic", color: "#6c757d", padding: "12px" }, children: "Store state not found" })
                   ]
                 }
               )

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../src/Debugger.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport type { HubType } from '@gridsheet/react-core';\nimport { a2p, x2c, Lexer, FormulaParser } from '@gridsheet/react-core';\n\nexport type DebuggerProps = {\n  hub: HubType;\n  intervalMs?: number;\n};\n\nexport const Debugger: React.FC<DebuggerProps> = ({ hub, intervalMs = 500 }) => {\n  const { wire } = hub;\n  const [snapshot, setSnapshot] = useState<any>({});\n  const [activeTabId, setActiveTabId] = useState<number | null>(null);\n  const [topHeight, setTopHeight] = useState<number>(() => {\n    const saved = sessionStorage.getItem('debugger_top_height');\n    return saved ? Number(saved) : 200;\n  });\n  const [bottomHeight, setBottomHeight] = useState<number>(() => {\n    const saved = sessionStorage.getItem('debugger_bottom_height');\n    return saved ? Number(saved) : 200;\n  });\n\n  useEffect(() => {\n    const updateSnapshot = () => {\n      if (!wire) {\n        return;\n      }\n\n      const {\n        choosingAddress,\n        choosingSheetId,\n        editingAddress,\n        editingSheetId,\n        ready,\n        sheetIdsByName,\n        sheetHead,\n        cellHead,\n        paletteBySheetName,\n        solvedCaches,\n        copyingSheetId,\n        copyingZone,\n        cutting,\n        historyIndex,\n        historyLimit,\n        histories,\n        asyncPending,\n        asyncInflight,\n      } = wire;\n\n      setSnapshot({\n        asyncPending,\n        asyncInflight,\n        ready,\n        sheetIdsByName,\n        sheetHead,\n        cellHead,\n        paletteBySheetName,\n        solvedCaches,\n        choosingAddress,\n        choosingSheetId,\n        editingAddress,\n        editingSheetId,\n        copyingSheetId,\n        copyingZone,\n        cutting,\n        historyIndex,\n        historyLimit,\n        histories,\n      });\n    };\n\n    updateSnapshot();\n\n    const intervalId = setInterval(updateSnapshot, intervalMs);\n    return () => clearInterval(intervalId);\n  }, [wire, intervalMs]);\n\n  const sheets = snapshot.sheetIdsByName\n    ? Object.entries(snapshot.sheetIdsByName)\n        .map(([name, id]) => ({ id: id as number, name }))\n        .sort((a, b) => a.id - b.id)\n    : [];\n\n  useEffect(() => {\n    if (activeTabId === null && sheets.length > 0) {\n      setActiveTabId(sheets[0].id);\n    }\n  }, [sheets.length, activeTabId]);\n\n  let activeStoreData = null;\n  let activeTableData = null;\n\n  // Cell data for wire.choosingSheetId / choosingAddress\n  let wireCellData = null;\n  let wireCellAddress = wire?.choosingAddress || '';\n  let wireCellSheetName = '';\n  let wireFormulaExpr = null;\n  let wireFormulaTokens = null;\n\n  if (wire && activeTabId !== null) {\n    const { contextsBySheetId } = wire;\n    const context = contextsBySheetId[activeTabId];\n\n    if (context) {\n      activeStoreData = context.store;\n\n      const table = context.store.tableReactive.current;\n      if (table) {\n        activeTableData = table;\n      }\n    }\n  }\n\n  // Resolve cell data for wire.choosingSheetId / choosingAddress\n  if (wire && wire.choosingSheetId != null) {\n    const { contextsBySheetId } = wire;\n    const choosingContext = contextsBySheetId[wire.choosingSheetId];\n\n    // Resolve sheet name\n    if (wire.sheetIdsByName) {\n      const entry = Object.entries(wire.sheetIdsByName).find(([, id]) => id === wire.choosingSheetId);\n      if (entry) {\n        wireCellSheetName = entry[0];\n      }\n    }\n\n    if (choosingContext) {\n      const table = choosingContext.store.tableReactive.current;\n      const store = choosingContext.store;\n      if (table) {\n        const rawTable = (table as any).__raw__ || table;\n        const idMatrix = rawTable.idMatrix;\n\n        // When a header is selected, refer to y=0 (top) or x=0 (left) header cell\n        const isTopHeaderSelecting = store.topHeaderSelecting;\n        const isLeftHeaderSelecting = store.leftHeaderSelecting;\n        const pos = isTopHeaderSelecting\n          ? { y: 0, x: store.choosing.x }\n          : isLeftHeaderSelecting\n            ? { y: store.choosing.y, x: 0 }\n            : a2p(wire.choosingAddress);\n\n        if (isTopHeaderSelecting) {\n          wireCellAddress = `header:${x2c(store.choosing.x)}`;\n        } else if (isLeftHeaderSelecting) {\n          wireCellAddress = `header:${store.choosing.y}`;\n        }\n\n        if (pos && idMatrix[pos.y]) {\n          const id = idMatrix[pos.y][pos.x];\n          if (id) {\n            wireCellData = wire.data[id];\n\n            // Parse formula\n            const text = wireCellData?.value;\n            if (typeof text === 'string' && text.startsWith('=')) {\n              try {\n                const lexer = new Lexer(text.substring(1));\n                lexer.tokenize();\n                wireFormulaTokens = lexer.tokens;\n                const parser = new FormulaParser(lexer.tokens);\n                wireFormulaExpr = parser.build();\n              } catch (e) {\n                wireFormulaExpr = { error: String(e) };\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n\n  const jsonReplacer = (key: string, value: any) => {\n    // Avoid circular refs, noise, and React RefObjects\n    if (\n      key === 'wire' ||\n      key === '__raw__' ||\n      (value && typeof value === 'object' && 'current' in value && Object.keys(value).length === 1) // basic heuristic to skip ref objects\n    ) {\n      return undefined;\n    }\n    if (value instanceof Map) {\n      return Object.fromEntries(value.entries());\n    }\n    if (value instanceof Set) {\n      return Array.from(value);\n    }\n    return value;\n  };\n\n  const startDrag = (e: React.MouseEvent) => {\n    e.preventDefault();\n    const startY = e.clientY;\n    const startHeight = topHeight;\n    const onMouseMove = (moveEvent: MouseEvent) => {\n      const h = Math.max(100, startHeight + moveEvent.clientY - startY);\n      setTopHeight(h);\n      sessionStorage.setItem('debugger_top_height', String(h));\n    };\n    const onMouseUp = () => {\n      document.removeEventListener('mousemove', onMouseMove);\n      document.removeEventListener('mouseup', onMouseUp);\n    };\n    document.addEventListener('mousemove', onMouseMove);\n    document.addEventListener('mouseup', onMouseUp);\n  };\n\n  const startDragBottom = (e: React.MouseEvent) => {\n    e.preventDefault();\n    const startY = e.clientY;\n    const startHeight = bottomHeight;\n    const onMouseMove = (moveEvent: MouseEvent) => {\n      const h = Math.max(100, startHeight + moveEvent.clientY - startY);\n      setBottomHeight(h);\n      sessionStorage.setItem('debugger_bottom_height', String(h));\n    };\n    const onMouseUp = () => {\n      document.removeEventListener('mousemove', onMouseMove);\n      document.removeEventListener('mouseup', onMouseUp);\n    };\n    document.addEventListener('mousemove', onMouseMove);\n    document.addEventListener('mouseup', onMouseUp);\n  };\n\n  return (\n    <div\n      style={{\n        display: 'flex',\n        flexDirection: 'column',\n        fontFamily: 'monospace',\n        fontSize: '12px',\n        color: '#212529',\n        border: '1px solid #dee2e6',\n        borderRadius: '6px',\n        overflow: 'hidden',\n      }}\n    >\n      {/* 上段: Wire State | Wire Cell | Formula Expressions | Formula Tokens */}\n      <div\n        style={{\n          display: 'flex',\n          flexDirection: 'row',\n          height: `${topHeight}px`,\n          overflow: 'hidden',\n        }}\n      >\n        {/* Wire State */}\n        <div\n          style={{\n            flex: 1,\n            borderRight: '1px solid #dee2e6',\n            backgroundColor: '#fafafa',\n            overflow: 'auto',\n            position: 'relative',\n          }}\n        >\n          <div\n            style={{\n              position: 'sticky',\n              top: 0,\n              background: '#fafafa',\n              zIndex: 1,\n              padding: '8px 12px',\n              fontWeight: 'bold',\n              borderBottom: '2px solid #ccc',\n            }}\n          >\n            Wire State\n          </div>\n          <pre style={{ margin: 0, padding: '12px' }}>{JSON.stringify(snapshot, jsonReplacer, 2)}</pre>\n        </div>\n\n        {/* Wire Cell Value: wire.choosingSheetId / choosingAddress のセルデータ */}\n        <div\n          style={{\n            flex: 1,\n            borderRight: '1px solid #dee2e6',\n            overflow: 'auto',\n            backgroundColor: '#f0f8f0',\n            position: 'relative',\n          }}\n        >\n          <div\n            style={{\n              position: 'sticky',\n              top: 0,\n              background: '#f0f8f0',\n              zIndex: 1,\n              padding: '8px 12px',\n              fontWeight: 'bold',\n              borderBottom: '2px solid #ccc',\n            }}\n          >\n            Cell: {wireCellSheetName && `${wireCellSheetName}!`}\n            {wireCellAddress} {wire?.choosingSheetId != null && `(SheetID: ${wire.choosingSheetId})`}\n          </div>\n          {wireCellData ? (\n            <pre style={{ margin: 0, padding: '12px' }}>{JSON.stringify(wireCellData, null, 2)}</pre>\n          ) : (\n            <div style={{ fontStyle: 'italic', color: '#6c757d', padding: '12px' }}>No cell data</div>\n          )}\n        </div>\n\n        {/* Formula Expressions */}\n        <div\n          style={{\n            flex: 1,\n            borderRight: '1px solid #dee2e6',\n            overflow: 'auto',\n            backgroundColor: '#fffbf0',\n            position: 'relative',\n          }}\n        >\n          <div\n            style={{\n              position: 'sticky',\n              top: 0,\n              background: '#fffbf0',\n              zIndex: 1,\n              padding: '8px 12px',\n              fontWeight: 'bold',\n              borderBottom: '2px solid #ccc',\n            }}\n          >\n            Formula Expressions\n          </div>\n          {wireFormulaExpr ? (\n            <pre style={{ margin: 0, padding: '12px' }}>{JSON.stringify(wireFormulaExpr, null, 2)}</pre>\n          ) : (\n            <div style={{ fontStyle: 'italic', color: '#6c757d', padding: '12px' }}>\n              {wireCellData ? 'Not a formula' : 'No cell selected'}\n            </div>\n          )}\n        </div>\n\n        {/* Formula Tokens: lexer.tokens */}\n        <div style={{ flex: 1, overflow: 'auto', backgroundColor: '#f5f0ff', position: 'relative' }}>\n          <div\n            style={{\n              position: 'sticky',\n              top: 0,\n              background: '#f5f0ff',\n              zIndex: 1,\n              padding: '8px 12px',\n              fontWeight: 'bold',\n              borderBottom: '2px solid #ccc',\n            }}\n          >\n            Formula Tokens\n          </div>\n          {wireFormulaTokens ? (\n            <pre style={{ margin: 0, padding: '12px' }}>{JSON.stringify(wireFormulaTokens, null, 2)}</pre>\n          ) : (\n            <div style={{ fontStyle: 'italic', color: '#6c757d', padding: '12px' }}>\n              {wireCellData ? 'Not a formula' : 'No cell selected'}\n            </div>\n          )}\n        </div>\n      </div>\n\n      {/* Resizer for Top Pane */}\n      <div\n        onMouseDown={startDrag}\n        style={{\n          height: '6px',\n          backgroundColor: '#dee2e6',\n          cursor: 'row-resize',\n          transition: 'background-color 0.2s',\n          zIndex: 10,\n        }}\n        onMouseEnter={(e) => {\n          e.currentTarget.style.backgroundColor = '#adb5bd';\n        }}\n        onMouseLeave={(e) => {\n          e.currentTarget.style.backgroundColor = '#dee2e6';\n        }}\n      />\n\n      {/* Sheet Tabs */}\n      <div\n        style={{\n          display: 'flex',\n          borderBottom: '1px solid #dee2e6',\n          borderTop: '1px solid #dee2e6',\n          backgroundColor: '#f8f9fa',\n        }}\n      >\n        {sheets.map((sheet) => (\n          <div\n            key={sheet.id}\n            onClick={() => setActiveTabId(sheet.id)}\n            style={{\n              padding: '8px 16px',\n              cursor: 'pointer',\n              fontWeight: 'bold',\n              borderBottom: activeTabId === sheet.id ? '2px solid #0d6efd' : '2px solid transparent',\n              color: activeTabId === sheet.id ? '#0d6efd' : '#495057',\n            }}\n          >\n            {sheet.name} (ID: {sheet.id})\n          </div>\n        ))}\n        {sheets.length === 0 && <div style={{ padding: '8px 16px', color: '#6c757d' }}>No sheets detected</div>}\n      </div>\n\n      {/* 下段: Table Data | Store Data */}\n      <div\n        style={{\n          display: 'flex',\n          flexDirection: 'row',\n          height: `${bottomHeight}px`,\n          backgroundColor: '#fff',\n          overflow: 'hidden',\n        }}\n      >\n        <div style={{ flex: 1, borderRight: '1px solid #dee2e6', overflow: 'auto', position: 'relative' }}>\n          <div\n            style={{\n              position: 'sticky',\n              top: 0,\n              background: '#fff',\n              zIndex: 1,\n              padding: '8px 12px',\n              fontWeight: 'bold',\n              borderBottom: '2px solid #ccc',\n            }}\n          >\n            Table Data\n          </div>\n          {activeTableData ? (\n            <pre style={{ margin: 0, padding: '12px' }}>{JSON.stringify(activeTableData, jsonReplacer, 2)}</pre>\n          ) : (\n            <div style={{ fontStyle: 'italic', color: '#6c757d', padding: '12px' }}>Table instance not found</div>\n          )}\n        </div>\n\n        <div\n          style={{\n            flex: 1,\n            overflow: 'auto',\n            backgroundColor: '#fdfdfe',\n            position: 'relative',\n          }}\n        >\n          <div\n            style={{\n              position: 'sticky',\n              top: 0,\n              background: '#fdfdfe',\n              zIndex: 1,\n              padding: '8px 12px',\n              fontWeight: 'bold',\n              borderBottom: '2px solid #ccc',\n            }}\n          >\n            Store Data\n          </div>\n          {activeStoreData ? (\n            <pre style={{ margin: 0, padding: '12px' }}>{JSON.stringify(activeStoreData, jsonReplacer, 2)}</pre>\n          ) : (\n            <div style={{ fontStyle: 'italic', color: '#6c757d', padding: '12px' }}>Store state not found</div>\n          )}\n        </div>\n      </div>\n\n      {/* Resizer for Bottom Pane */}\n      <div\n        onMouseDown={startDragBottom}\n        style={{\n          height: '6px',\n          backgroundColor: '#dee2e6',\n          cursor: 'row-resize',\n          transition: 'background-color 0.2s',\n          zIndex: 10,\n        }}\n        onMouseEnter={(e) => {\n          e.currentTarget.style.backgroundColor = '#adb5bd';\n        }}\n        onMouseLeave={(e) => {\n          e.currentTarget.style.backgroundColor = '#dee2e6';\n        }}\n      />\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../src/Debugger.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport type { BookType } from '@gridsheet/react-core';\nimport { a2p, x2c, Lexer, FormulaParser, Sheet } from '@gridsheet/react-core';\nimport { Light as SyntaxHighlighter } from 'react-syntax-highlighter';\nimport type { SyntaxHighlighterProps } from 'react-syntax-highlighter';\nimport jsonLang from 'react-syntax-highlighter/dist/esm/languages/hljs/json';\nimport atomOneLight from 'react-syntax-highlighter/dist/esm/styles/hljs/atom-one-light';\nimport tomorrowNight from 'react-syntax-highlighter/dist/esm/styles/hljs/tomorrow-night';\nimport solarizedDark from 'react-syntax-highlighter/dist/esm/styles/hljs/solarized-dark';\nimport solarizedLight from 'react-syntax-highlighter/dist/esm/styles/hljs/solarized-light';\nimport docco from 'react-syntax-highlighter/dist/esm/styles/hljs/docco';\nimport atelierSeasideLight from 'react-syntax-highlighter/dist/esm/styles/hljs/atelier-seaside-light';\nimport atelierHeathLight from 'react-syntax-highlighter/dist/esm/styles/hljs/atelier-heath-light';\n\nSyntaxHighlighter.registerLanguage('json', jsonLang);\n\nconst ss = {\n  get: (key: string) => (typeof window !== 'undefined' ? sessionStorage.getItem(key) : null),\n  set: (key: string, value: string) => {\n    if (typeof window !== 'undefined') {\n      sessionStorage.setItem(key, value);\n    }\n  },\n};\n\ntype HljsStyle = SyntaxHighlighterProps['style'];\n\nconst JsonCode: React.FC<{ data: any; replacer?: (k: string, v: any) => any; theme: HljsStyle }> = ({\n  data,\n  replacer,\n  theme,\n}) => {\n  const code = JSON.stringify(data, replacer, 2) ?? '';\n  return (\n    <SyntaxHighlighter\n      language=\"json\"\n      style={theme}\n      showLineNumbers\n      customStyle={{ margin: 0, fontSize: '10px', minHeight: '100%', borderRadius: 0, whiteSpace: 'pre' }}\n      codeTagProps={{ style: { display: 'block', whiteSpace: 'pre', fontSize: '10px' } }}\n    >\n      {code}\n    </SyntaxHighlighter>\n  );\n};\n\nexport type DebuggerProps = {\n  book: BookType;\n  intervalMs?: number;\n};\n\nexport const Debugger: React.FC<DebuggerProps> = ({ book, intervalMs = 500 }) => {\n  const { registry } = book;\n  const [snapshot, setSnapshot] = useState<any>({});\n  const [activeTabId, setActiveTabId] = useState<number | null>(null);\n  const [topHeight, setTopHeight] = useState<number>(200);\n  const [bottomHeight, setBottomHeight] = useState<number>(200);\n  const [formulaView, setFormulaView] = useState<'expressions' | 'tokens'>('expressions');\n\n  useEffect(() => {\n    const savedTop = ss.get('gs-debugger-top-height');\n    if (savedTop) {\n      setTopHeight(Number(savedTop));\n    }\n    const savedBottom = ss.get('gs-debugger-bottom-height');\n    if (savedBottom) {\n      setBottomHeight(Number(savedBottom));\n    }\n    const savedFormula = ss.get('gs-debugger-formula-view') as 'expressions' | 'tokens';\n    if (savedFormula) {\n      setFormulaView(savedFormula);\n    }\n  }, []);\n\n  useEffect(() => {\n    const updateSnapshot = () => {\n      if (!registry) {\n        return;\n      }\n\n      const {\n        choosingAddress,\n        choosingSheetId,\n        editingAddress,\n        editingSheetId,\n        ready,\n        sheetIdsByName,\n        sheetHead,\n        cellHead,\n        paletteBySheetName,\n        solvedCaches,\n        copyingSheetId,\n        copyingZone,\n        cutting,\n        historyIndex,\n        historyLimit,\n        histories,\n        asyncPending,\n        asyncInflight,\n      } = registry;\n\n      setSnapshot({\n        asyncPending,\n        asyncInflight,\n        ready,\n        sheetIdsByName,\n        sheetHead,\n        cellHead,\n        paletteBySheetName,\n        solvedCaches,\n        choosingAddress,\n        choosingSheetId,\n        editingAddress,\n        editingSheetId,\n        copyingSheetId,\n        copyingZone,\n        cutting,\n        historyIndex,\n        historyLimit,\n        histories,\n      });\n    };\n\n    updateSnapshot();\n\n    const intervalId = setInterval(updateSnapshot, intervalMs);\n    return () => clearInterval(intervalId);\n  }, [registry, intervalMs]);\n\n  const sheets = snapshot.sheetIdsByName\n    ? Object.entries(snapshot.sheetIdsByName)\n        .map(([name, id]) => ({ id: id as number, name }))\n        .sort((a, b) => a.id - b.id)\n    : [];\n\n  useEffect(() => {\n    if (activeTabId === null && sheets.length > 0) {\n      setActiveTabId(sheets[0].id);\n    }\n  }, [sheets.length, activeTabId]);\n\n  let activeStoreData = null;\n  let activeTableData = null;\n\n  // Cell data for the currently selected cell (registry.choosingSheetId / choosingAddress)\n  let registryCellData = null;\n  let registrySystemData = null;\n  let registryCellAddress = registry?.choosingAddress || '';\n  let registryCellSheetName = '';\n  let registryFormulaExpr = null;\n  let registryFormulaTokens = null;\n\n  if (registry && activeTabId !== null) {\n    const { contextsBySheetId } = registry;\n    const context = contextsBySheetId[activeTabId];\n\n    if (context) {\n      activeStoreData = context.store;\n\n      const sheet = context.store.sheetReactive.current;\n      if (sheet) {\n        activeTableData = sheet;\n      }\n    }\n  }\n\n  // Resolve cell data for the currently selected cell (registry.choosingSheetId / choosingAddress)\n  if (registry && registry.choosingSheetId != null) {\n    const { contextsBySheetId } = registry;\n    const choosingContext = contextsBySheetId[registry.choosingSheetId];\n\n    // Resolve sheet name\n    if (registry.sheetIdsByName) {\n      const entry = Object.entries(registry.sheetIdsByName).find(([, id]) => id === registry.choosingSheetId);\n      if (entry) {\n        registryCellSheetName = entry[0];\n      }\n    }\n\n    if (choosingContext) {\n      const sheet = choosingContext.store.sheetReactive.current;\n      const store = choosingContext.store;\n      if (sheet) {\n        const rawTable = (sheet as any).__raw__ || sheet;\n        const idMatrix = rawTable.idMatrix;\n\n        // When a header cell is selected, use y=0 (top header) or x=0 (left header)\n        const isTopHeaderSelecting = store.topHeaderSelecting;\n        const isLeftHeaderSelecting = store.leftHeaderSelecting;\n        const pos = isTopHeaderSelecting\n          ? { y: 0, x: store.choosing.x }\n          : isLeftHeaderSelecting\n            ? { y: store.choosing.y, x: 0 }\n            : a2p(registry.choosingAddress);\n\n        if (isTopHeaderSelecting) {\n          registryCellAddress = `header:${x2c(store.choosing.x)}`;\n        } else if (isLeftHeaderSelecting) {\n          registryCellAddress = `header:${store.choosing.y}`;\n        }\n\n        if (pos && idMatrix[pos.y]) {\n          const id = idMatrix[pos.y][pos.x];\n          if (id) {\n            registryCellData = registry.data[id];\n            registrySystemData = registry.systems[id] ?? null;\n\n            // Parse formula\n            const text = registryCellData?.value;\n            if (typeof text === 'string' && text.startsWith('=')) {\n              try {\n                const lexer = new Lexer(text.substring(1));\n                lexer.tokenize();\n                registryFormulaTokens = lexer.tokens;\n                const parser = new FormulaParser(lexer.tokens);\n                registryFormulaExpr = parser.build();\n              } catch (e) {\n                registryFormulaExpr = { error: String(e) };\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n\n  const baseReplacer = (key: string, value: any) => {\n    // Avoid circular refs, noisy internals, and React RefObjects\n    if (\n      key === 'registry' ||\n      key === '__raw__' ||\n      (value && typeof value === 'object' && 'current' in value && Object.keys(value).length === 1) // heuristic to skip React ref objects\n    ) {\n      return undefined;\n    }\n    if (value instanceof Map) {\n      return Object.fromEntries(value.entries());\n    }\n    if (value instanceof Set) {\n      return Array.from(value);\n    }\n    return value;\n  };\n\n  // Replace nested Sheet instances with their string representation (for Registry State / Store Data panels)\n  const jsonReplacer = (key: string, value: any) => {\n    if (value instanceof Sheet) {\n      return value.toString();\n    }\n    return baseReplacer(key, value);\n  };\n\n  const startDrag = (e: React.MouseEvent) => {\n    e.preventDefault();\n    const startY = e.clientY;\n    const startHeight = topHeight;\n    const onMouseMove = (moveEvent: MouseEvent) => {\n      const h = Math.max(100, startHeight + moveEvent.clientY - startY);\n      setTopHeight(h);\n      ss.set('gs-debugger-top-height', String(h));\n    };\n    const onMouseUp = () => {\n      document.removeEventListener('mousemove', onMouseMove);\n      document.removeEventListener('mouseup', onMouseUp);\n    };\n    document.addEventListener('mousemove', onMouseMove);\n    document.addEventListener('mouseup', onMouseUp);\n  };\n\n  const startDragBottom = (e: React.MouseEvent) => {\n    e.preventDefault();\n    const startY = e.clientY;\n    const startHeight = bottomHeight;\n    const onMouseMove = (moveEvent: MouseEvent) => {\n      const h = Math.max(100, startHeight + moveEvent.clientY - startY);\n      setBottomHeight(h);\n      ss.set('gs-debugger-bottom-height', String(h));\n    };\n    const onMouseUp = () => {\n      document.removeEventListener('mousemove', onMouseMove);\n      document.removeEventListener('mouseup', onMouseUp);\n    };\n    document.addEventListener('mousemove', onMouseMove);\n    document.addEventListener('mouseup', onMouseUp);\n  };\n\n  return (\n    <div\n      style={{\n        display: 'flex',\n        flexDirection: 'column',\n        fontFamily: 'monospace',\n        fontSize: '12px',\n        color: '#212529',\n        border: '1px solid #dee2e6',\n        borderRadius: '6px',\n        overflow: 'hidden',\n      }}\n    >\n      {/* Top pane: Registry State | Cell | System | Formula */}\n      <div\n        style={{\n          display: 'flex',\n          flexDirection: 'row',\n          height: `${topHeight}px`,\n          overflow: 'hidden',\n        }}\n      >\n        {/* Registry State panel */}\n        <div\n          style={{\n            flex: 1,\n            borderRight: '1px solid #dee2e6',\n            backgroundColor: '#fafafa',\n            overflow: 'auto',\n            position: 'relative',\n          }}\n        >\n          <div\n            style={{\n              position: 'sticky',\n              top: 0,\n              background: '#fafafa',\n              zIndex: 1,\n              padding: '8px 12px',\n              fontWeight: 'bold',\n              borderBottom: '2px solid #ccc',\n            }}\n          >\n            Registry State\n          </div>\n          <JsonCode data={snapshot} replacer={jsonReplacer} theme={atomOneLight} />\n        </div>\n\n        {/* Registry Cell Value: cell data for registry.choosingSheetId / choosingAddress */}\n        <div\n          style={{\n            flex: 1,\n            borderRight: '1px solid #dee2e6',\n            overflow: 'auto',\n            backgroundColor: '#f0f8f0',\n            position: 'relative',\n          }}\n        >\n          <div\n            style={{\n              position: 'sticky',\n              top: 0,\n              background: '#f0f8f0',\n              zIndex: 1,\n              padding: '8px 12px',\n              fontWeight: 'bold',\n              borderBottom: '2px solid #ccc',\n            }}\n          >\n            Cell: {registryCellSheetName && `'${registryCellSheetName}'!`}\n            {registryCellAddress}\n          </div>\n          {registryCellData ? (\n            <JsonCode data={registryCellData} replacer={baseReplacer} theme={atelierSeasideLight} />\n          ) : (\n            <div style={{ fontStyle: 'italic', color: '#6c757d', padding: '12px' }}>No cell data</div>\n          )}\n        </div>\n\n        {/* System: systems[id] for the choosing cell */}\n        <div\n          style={{\n            flex: 1,\n            borderRight: '1px solid #dee2e6',\n            overflow: 'auto',\n            backgroundColor: '#fdf0f2',\n            position: 'relative',\n          }}\n        >\n          <div\n            style={{\n              position: 'sticky',\n              top: 0,\n              background: '#fdf0f2',\n              zIndex: 1,\n              padding: '8px 12px',\n              fontWeight: 'bold',\n              borderBottom: '2px solid #ccc',\n            }}\n          >\n            System: {registryCellSheetName && `'${registryCellSheetName}'!`}\n            {registryCellAddress}\n          </div>\n          {registrySystemData ? (\n            <JsonCode data={registrySystemData} replacer={baseReplacer} theme={atelierHeathLight} />\n          ) : (\n            <div style={{ fontStyle: 'italic', color: '#6c757d', padding: '12px' }}>No system data</div>\n          )}\n        </div>\n\n        {/* Formula: toggling between Expressions and Tokens */}\n        <div\n          style={{\n            flex: 1,\n            overflow: 'auto',\n            backgroundColor: formulaView === 'expressions' ? '#fffbf0' : '#f5f0ff',\n            position: 'relative',\n          }}\n        >\n          <div\n            style={{\n              position: 'sticky',\n              top: 0,\n              background: formulaView === 'expressions' ? '#fffbf0' : '#f5f0ff',\n              zIndex: 1,\n              padding: '6px 12px',\n              fontWeight: 'bold',\n              borderBottom: '2px solid #ccc',\n              display: 'flex',\n              alignItems: 'center',\n              gap: '8px',\n            }}\n          >\n            <span>{formulaView === 'expressions' ? 'Formula Expressions' : 'Formula Tokens'}</span>\n            <button\n              onClick={() => {\n                const next = formulaView === 'expressions' ? 'tokens' : 'expressions';\n                setFormulaView(next);\n                ss.set('gs-debugger-formula-view', next);\n              }}\n              style={{\n                marginLeft: 'auto',\n                fontSize: '11px',\n                padding: '2px 8px',\n                cursor: 'pointer',\n                border: '1px solid #aaa',\n                borderRadius: '4px',\n                background: '#fff',\n              }}\n            >\n              {formulaView === 'expressions' ? '→ Tokens' : '→ Expressions'}\n            </button>\n          </div>\n          {registryCellData ? (\n            <JsonCode\n              data={formulaView === 'expressions' ? registryFormulaExpr : registryFormulaTokens}\n              replacer={baseReplacer}\n              theme={formulaView === 'expressions' ? solarizedLight : docco}\n            />\n          ) : (\n            <div style={{ fontStyle: 'italic', color: '#6c757d', padding: '12px' }}>No cell selected</div>\n          )}\n        </div>\n      </div>\n\n      {/* Resizer for top pane */}\n      <div\n        onMouseDown={startDrag}\n        style={{\n          height: '6px',\n          backgroundColor: '#dee2e6',\n          cursor: 'row-resize',\n          transition: 'background-color 0.2s',\n          zIndex: 10,\n        }}\n        onMouseEnter={(e) => {\n          e.currentTarget.style.backgroundColor = '#adb5bd';\n        }}\n        onMouseLeave={(e) => {\n          e.currentTarget.style.backgroundColor = '#dee2e6';\n        }}\n      />\n\n      {/* Sheet tabs */}\n      <div\n        style={{\n          display: 'flex',\n          borderBottom: '1px solid #dee2e6',\n          borderTop: '1px solid #dee2e6',\n          backgroundColor: '#f8f9fa',\n        }}\n      >\n        {sheets.map((sheet) => (\n          <div\n            key={sheet.id}\n            onClick={() => setActiveTabId(sheet.id)}\n            style={{\n              padding: '8px 16px',\n              cursor: 'pointer',\n              fontWeight: 'bold',\n              borderBottom: activeTabId === sheet.id ? '2px solid #0d6efd' : '2px solid transparent',\n              color: activeTabId === sheet.id ? '#0d6efd' : '#495057',\n            }}\n          >\n            {sheet.name} (ID: {sheet.id})\n          </div>\n        ))}\n        {sheets.length === 0 && <div style={{ padding: '8px 16px', color: '#6c757d' }}>No sheets detected</div>}\n      </div>\n\n      {/* Bottom pane: Sheet Data | Store Data */}\n      <div\n        style={{\n          display: 'flex',\n          flexDirection: 'row',\n          height: `${bottomHeight}px`,\n          backgroundColor: '#282c34',\n          overflow: 'hidden',\n        }}\n      >\n        <div\n          style={{\n            flex: 1,\n            borderRight: '1px solid #3a3a3a',\n            overflow: 'auto',\n            position: 'relative',\n            backgroundColor: '#282c34',\n          }}\n        >\n          <div\n            style={{\n              position: 'sticky',\n              top: 0,\n              background: '#21252b',\n              zIndex: 1,\n              padding: '8px 12px',\n              fontWeight: 'bold',\n              borderBottom: '2px solid #3a3a3a',\n              color: '#abb2bf',\n            }}\n          >\n            Sheet Data\n          </div>\n          {activeTableData ? (\n            <JsonCode data={activeTableData} replacer={baseReplacer} theme={tomorrowNight} />\n          ) : (\n            <div style={{ fontStyle: 'italic', color: '#6c757d', padding: '12px' }}>Sheet instance not found</div>\n          )}\n        </div>\n\n        <div\n          style={{\n            flex: 1,\n            overflow: 'auto',\n            backgroundColor: '#282c34',\n            position: 'relative',\n          }}\n        >\n          <div\n            style={{\n              position: 'sticky',\n              top: 0,\n              background: '#21252b',\n              zIndex: 1,\n              padding: '8px 12px',\n              fontWeight: 'bold',\n              borderBottom: '2px solid #3a3a3a',\n              color: '#abb2bf',\n            }}\n          >\n            Store Data\n          </div>\n          {activeStoreData ? (\n            <JsonCode data={activeStoreData} replacer={jsonReplacer} theme={solarizedDark} />\n          ) : (\n            <div style={{ fontStyle: 'italic', color: '#6c757d', padding: '12px' }}>Store state not found</div>\n          )}\n        </div>\n      </div>\n\n      {/* Resizer for bottom pane */}\n      <div\n        onMouseDown={startDragBottom}\n        style={{\n          height: '6px',\n          backgroundColor: '#dee2e6',\n          cursor: 'row-resize',\n          transition: 'background-color 0.2s',\n          zIndex: 10,\n        }}\n        onMouseEnter={(e) => {\n          e.currentTarget.style.backgroundColor = '#adb5bd';\n        }}\n        onMouseLeave={(e) => {\n          e.currentTarget.style.backgroundColor = '#dee2e6';\n        }}\n      />\n    </div>\n  );\n};\n"],"names":["SyntaxHighlighter"],"mappings":"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"}

package/dist/react-dev/src/Debugger.d.ts

@@ -1,7 +1,7 @@
 import { default as React } from 'react';
-import { HubType } from '../../react-core/src/index.ts';
+import { BookType } from '../../react-core/src/index.ts';
 export type DebuggerProps = {
-    hub: HubType;
+    book: BookType;
     intervalMs?: number;
 };
 export declare const Debugger: React.FC<DebuggerProps>;

package/dist/react-dev/src/Debugger.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Debugger.d.ts","sourceRoot":"","sources":["../../../src/Debugger.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AACnD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAGrD,MAAM,MAAM,aAAa,GAAG;IAC1B,GAAG,EAAE,OAAO,CAAC;IACb,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA2d5C,CAAC"}
+{"version":3,"file":"Debugger.d.ts","sourceRoot":"","sources":["../../../src/Debugger.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AACnD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AA6CtD,MAAM,MAAM,aAAa,GAAG;IAC1B,IAAI,EAAE,QAAQ,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAshB5C,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gridsheet/react-dev",
-  "version": "3.0.0-rc.0",
+  "version": "3.0.0-rc.2",
   "description": "Development tools for GridSheet",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -24,10 +24,17 @@
     "README.md",
     "LICENSE"
   ],
-  "dependencies": {
-    "@gridsheet/react-core": "^3.0.0-rc.0"
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/walkframe/gridsheet.git"
+  },
+  "bugs": {
+    "url": "https://github.com/walkframe/gridsheet/issues"
   },
+  "homepage": "https://gridsheet.walkframe.com/",
+  "packageManager": "pnpm@10.6.5",
   "peerDependencies": {
+    "@gridsheet/react-core": ">=3.0.0-rc.2",
     "react": ">=16.9.0",
     "react-dom": ">=16.9.0"
   },
@@ -38,5 +45,9 @@
     "typescript": "^5.8.2",
     "vite": "^6.2.2",
     "vite-plugin-dts": "^4.5.3"
+  },
+  "dependencies": {
+    "@types/react-syntax-highlighter": "^15.5.13",
+    "react-syntax-highlighter": "^16.1.1"
   }
 }