@wcstack/devtools 4.0.0-rc.6 → 4.0.0-rc.8

package/dist/index.d.ts

@@ -341,7 +341,12 @@ interface IWiringEntry {
      */
     readonly stateElementRef: WeakRef<object> | null;
 }
-type CoreChangeKind = "sources" | "roster" | "wiring" | "timeline" | "coverage";
+/**
+ * Core の変化の種類。`values` は「状態の値が変わったかもしれない」の合図で、更新バッチ
+ * （`state:update-batch`）ごとに流れる。timeline の一時停止（paused）とは独立 —
+ * 一時停止が止めるのは記録であって観測ではないので、State ペインは追従し続ける。
+ */
+type CoreChangeKind = "sources" | "roster" | "wiring" | "timeline" | "coverage" | "values";
 type CoreChangeListener = (kind: CoreChangeKind) => void;
 /**
  * 配線カバレッジ 1 行（static-wiring-dx-design.md §4 — 宣言 × 実測の突合）。
@@ -512,6 +517,10 @@ declare class WcsDevtools extends HTMLElement {
     private _expanded;
     private _hotkeyHandler;
     private _pickHandler;
+    /** State ペインで開いているインライン編集の入力欄（無ければ null）。 */
+    private _editInput;
+    /** State ペインの中でポインタが押されている間 true（離すまで再描画を待つ）。 */
+    private _statePointerDown;
     get core(): DevtoolsCore | null;
     connectedCallback(): void;
     disconnectedCallback(): void;
@@ -530,9 +539,20 @@ declare class WcsDevtools extends HTMLElement {
     private _exitPickMode;
     private _markDirty;
     private _renderDirty;
+    /**
+     * State ペインの描き直しを待つべきか: インライン編集の入力欄にフォーカスがあるか、
+     * ペインの中でポインタが押されている。描き直すと入力欄（打ちかけの値）や押した行が消える。
+     * フォーカスで見るのは、パネルを閉じる・ノードを外すなど blur の来ない抜け方でも
+     * 待ち続けないため。
+     */
+    private _stateHeld;
+    /** 待たせていた State ペインの描き直しを流す（保留が無ければ何もしない）。 */
+    private _releaseState;
+    private _holdStateWhilePressed;
     private _rosterKey;
     private _selectedRoster;
     private _renderStatePane;
+    private _renderStateBody;
     /**
      * 選択ツリーの鍵付き購読セクション（keyedSubscriptions — protocol v2 追補・要件 D17）。
      * `$eq` / `$eqPath` / `$eqIndex` の購読は依存グラフの動的な変化で、上の状態ツリーにも

package/dist/index.esm.js

@@ -775,6 +775,9 @@ class DevtoolsCore {
                 if (total === 0) {
                     return;
                 }
+                // 値の変化の合図（State ペインの丸ごとの再読 — devtools-tag-design.md §10 G-U1）。
+                // timeline の行より先に、一時停止中でも流す
+                this._notify("values");
                 const rest = total > labels.length ? `, …(${total})` : "";
                 this._appendTimeline({
                     sourceId,
@@ -1123,7 +1126,29 @@ header {
   border-bottom: 1px solid #2b4f78;
   background: #10263f;
 }
-header .title { font-weight: 700; color: #9fd0ff; margin-right: 4px; }
+/* The header never grows wider than the panel: the title and the middle group shrink (the
+   group scrolls sideways when even that is not enough), so dock and × always stay in view —
+   the right dock is only 420px wide. */
+header .title {
+  flex: 0 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-weight: 700;
+  color: #9fd0ff;
+  margin-right: 4px;
+}
+header .tools {
+  flex: 1 1 auto;
+  min-width: 0;
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  overflow-x: auto;
+}
+header .tools select { flex: 0 1 auto; min-width: 6em; text-overflow: ellipsis; }
+header .tools button, header > button { flex: none; white-space: nowrap; }
 header select, header button {
   font: inherit;
   background: #16324f;
@@ -1134,7 +1159,6 @@ header select, header button {
   cursor: pointer;
 }
 header button[aria-pressed="true"] { background: #2b5d8f; }
-header .spacer { flex: 1; }
 .panes { display: flex; flex: 1; min-height: 0; }
 .pane { flex: 1; min-width: 0; overflow: auto; padding: 6px 8px; border-right: 1px solid #1d3a5c; }
 .pane:last-child { border-right: none; }
@@ -1238,6 +1262,10 @@ class WcsDevtools extends HTMLElement {
     _expanded = new Set();
     _hotkeyHandler = null;
     _pickHandler = null;
+    /** State ペインで開いているインライン編集の入力欄（無ければ null）。 */
+    _editInput = null;
+    /** State ペインの中でポインタが押されている間 true（離すまで再描画を待つ）。 */
+    _statePointerDown = false;
     get core() {
         return this._core;
     }
@@ -1267,6 +1295,13 @@ class WcsDevtools extends HTMLElement {
                     this._markDirty("wiring");
                 }
             }
+            else if (kind === "values") {
+                // 値が変わった: State ペインを丸ごと読み直す（devtools-tag-design.md §10 G-U1）。
+                // 閉じている間は読まない — 開いたときに _applyOpen が描き直す
+                if (this.open) {
+                    this._markDirty("state");
+                }
+            }
             else {
                 this._markDirty("timeline");
             }
@@ -1327,6 +1362,11 @@ class WcsDevtools extends HTMLElement {
         title.className = "title";
         title.textContent = "wcstack devtools";
         header.append(title);
+        // 中間のグループ（ツリー選択・pick・⏸・🗑）。幅が足りないときはここが縮んで横に
+        // スクロールし、dock と × はヘッダーの右端に残る
+        const tools = document.createElement("div");
+        tools.className = "tools";
+        header.append(tools);
         const stateSelect = document.createElement("select");
         stateSelect.title = "state element";
         stateSelect.addEventListener("change", () => {
@@ -1336,9 +1376,9 @@ class WcsDevtools extends HTMLElement {
             this._markDirty("state");
             this._markDirty("wiring");
         });
-        header.append(stateSelect);
+        tools.append(stateSelect);
         this._stateSelect = stateSelect;
-        const pickButton = this._headerButton(header, "⌖ pick", "pick a page element");
+        const pickButton = this._headerButton(tools, "⌖ pick", "pick a page element");
         pickButton.addEventListener("click", () => {
             if (this._pickMode) {
                 this._exitPickMode();
@@ -1349,7 +1389,7 @@ class WcsDevtools extends HTMLElement {
             pickButton.setAttribute("aria-pressed", String(this._pickMode));
         });
         pickButton.dataset["role"] = "pick";
-        const pauseButton = this._headerButton(header, "⏸", "pause timeline");
+        const pauseButton = this._headerButton(tools, "⏸", "pause timeline");
         pauseButton.addEventListener("click", () => {
             const core = this._core;
             if (core === null) {
@@ -1359,14 +1399,11 @@ class WcsDevtools extends HTMLElement {
             pauseButton.setAttribute("aria-pressed", String(core.paused));
         });
         pauseButton.dataset["role"] = "pause";
-        const clearButton = this._headerButton(header, "🗑", "clear timeline");
+        const clearButton = this._headerButton(tools, "🗑", "clear timeline");
         clearButton.addEventListener("click", () => {
             this._core?.clearTimeline();
         });
         clearButton.dataset["role"] = "clear";
-        const spacer = document.createElement("span");
-        spacer.className = "spacer";
-        header.append(spacer);
         const dockButton = this._headerButton(header, "dock", "toggle dock position");
         dockButton.addEventListener("click", () => {
             const next = (this.getAttribute("dock") ?? "bottom") === "bottom" ? "right" : "bottom";
@@ -1394,6 +1431,11 @@ class WcsDevtools extends HTMLElement {
             panes.append(pane);
             this._paneElements[name] = body;
         }
+        // 押している間に State ペインを描き直すと、押した行が消えてクリックが成立しない
+        // （値が毎フレーム変わるページ）。離すまで待つ
+        this._paneElements["state"].parentElement.addEventListener("pointerdown", () => {
+            this._holdStateWhilePressed();
+        });
         panel.append(panes);
         shadow.append(panel);
         this._panel = panel;
@@ -1402,12 +1444,12 @@ class WcsDevtools extends HTMLElement {
         shadow.append(highlightLayer);
         this._highlightLayer = highlightLayer;
     }
-    _headerButton(header, label, title) {
+    _headerButton(container, label, title) {
         const button = document.createElement("button");
         button.textContent = label;
         button.title = title;
         button.setAttribute("aria-pressed", "false");
-        header.append(button);
+        container.append(button);
         return button;
     }
     // --- open/close/dock/hotkey ---
@@ -1518,7 +1560,13 @@ class WcsDevtools extends HTMLElement {
         const dirty = this._dirtyPanes;
         this._dirtyPanes = new Set();
         if (dirty.has("state")) {
-            this._renderStatePane();
+            if (this._stateHeld()) {
+                // 編集中・押下中は今の DOM のまま。印だけ残し、終わったときに描く（_releaseState）
+                this._dirtyPanes.add("state");
+            }
+            else {
+                this._renderStatePane();
+            }
         }
         if (dirty.has("wiring")) {
             this._renderWiringPane();
@@ -1527,6 +1575,37 @@ class WcsDevtools extends HTMLElement {
             this._renderTimelinePane();
         }
     }
+    /**
+     * State ペインの描き直しを待つべきか: インライン編集の入力欄にフォーカスがあるか、
+     * ペインの中でポインタが押されている。描き直すと入力欄（打ちかけの値）や押した行が消える。
+     * フォーカスで見るのは、パネルを閉じる・ノードを外すなど blur の来ない抜け方でも
+     * 待ち続けないため。
+     */
+    _stateHeld() {
+        if (this._statePointerDown) {
+            return true;
+        }
+        // 外れた（描き直しで消えた）入力欄はフォーカスを持てないので、これだけで足りる
+        return this._editInput !== null && this.shadowRoot.activeElement === this._editInput;
+    }
+    /** 待たせていた State ペインの描き直しを流す（保留が無ければ何もしない）。 */
+    _releaseState() {
+        if (this._dirtyPanes.has("state")) {
+            this._markDirty("state");
+        }
+    }
+    _holdStateWhilePressed() {
+        this._statePointerDown = true;
+        // 離した場所はペインの外かもしれない（ドラッグ）。window で受けて、受けたら外す
+        const release = () => {
+            window.removeEventListener("pointerup", release, true);
+            window.removeEventListener("pointercancel", release, true);
+            this._statePointerDown = false;
+            this._releaseState();
+        };
+        window.addEventListener("pointerup", release, true);
+        window.addEventListener("pointercancel", release, true);
+    }
     _rosterKey(entry) {
         return `${entry.sourceId}:${entry.label}`;
     }
@@ -1540,8 +1619,18 @@ class WcsDevtools extends HTMLElement {
         return found ?? roster[0];
     }
     _renderStatePane() {
-        const core = this._core;
+        // 描き直しで今の入力欄は消える（編集中ならここへは来ない — _stateHeld）
+        this._editInput = null;
         const body = this._paneElements["state"];
+        // スクロール位置は描き直しの前後で保つ。中身を空にした瞬間にレイアウトが走ると
+        // （値の読み出しがページの getter を通る）スクロールが 0 に詰められうる
+        const scroller = body.parentElement;
+        const scrollTop = scroller.scrollTop;
+        this._renderStateBody(body);
+        scroller.scrollTop = scrollTop;
+    }
+    _renderStateBody(body) {
+        const core = this._core;
         const select = this._stateSelect;
         const roster = core.getRoster();
         const selected = this._selectedRoster();
@@ -1773,6 +1862,7 @@ class WcsDevtools extends HTMLElement {
         const input = document.createElement("input");
         input.value = typeof current === "string" ? current : String(current);
         const commit = () => {
+            this._editInput = null;
             // 編集は通常のリアクティブパイプラインを通る（devtools-tag-design.md §3.1）
             this._core?.writeValue(entry, ref.path, coerceInput(input.value), ref.indexes);
             this._markDirty("state");
@@ -1782,10 +1872,17 @@ class WcsDevtools extends HTMLElement {
                 commit();
             }
             else if (event.key === "Escape") {
+                this._editInput = null;
                 this._markDirty("state");
             }
         });
+        // フォーカスが外れたら、待たせていた描き直しを流す（入力欄はそれで消える = 取り消し）。
+        // 待たせていなければ入力欄はそのまま残る（従来どおり）
+        input.addEventListener("blur", () => {
+            this._releaseState();
+        });
         row.replaceChild(input, valueSpan);
+        this._editInput = input;
         input.focus();
     }
     _renderWiringPane() {