@nice-code/state 0.4.10 → 0.4.11

package/build/devtools/browser/index.js

@@ -2032,6 +2032,7 @@ function readPrefs(defaultPosition, initialOpen) {
     dockedWidth: DOCKED_WIDTH_DEFAULT,
     detailRatio: DETAIL_RATIO_DEFAULT,
     stayOnLatest: true,
+    followLatestOnSelect: true,
     compressDiff: true,
     detailView: "diff",
     diffLatestFirst: true
@@ -2088,6 +2089,7 @@ function NiceStateDevtools_Panel({
     dockedWidth,
     detailRatio,
     stayOnLatest,
+    followLatestOnSelect,
     compressDiff,
     detailView,
     diffLatestFirst
@@ -2253,9 +2255,17 @@ function NiceStateDevtools_Panel({
               overflow: "hidden"
             },
             children: [
-              /* @__PURE__ */ jsxDEV10(StayOnLatestToggle, {
-                checked: stayOnLatest,
-                onChange: (next) => setPrefs({ stayOnLatest: next })
+              /* @__PURE__ */ jsxDEV10(TimelineFollowToggles, {
+                stayOnLatest,
+                onStayOnLatestChange: (next) => setPrefs({ stayOnLatest: next }),
+                followLatestOnSelect,
+                onFollowLatestOnSelectChange: (next) => {
+                  if (next && latestCuid != null && selectedChangeCuid === latestCuid && !stayOnLatest) {
+                    setPrefs({ followLatestOnSelect: next, stayOnLatest: true });
+                  } else {
+                    setPrefs({ followLatestOnSelect: next });
+                  }
+                }
               }, undefined, false, undefined, this),
               /* @__PURE__ */ jsxDEV10("div", {
                 style: { flex: 1, minHeight: 0, overflowY: "auto" },
@@ -2263,9 +2273,14 @@ function NiceStateDevtools_Panel({
                   groups,
                   selectedCuid: selectedChangeCuid,
                   onSelect: (cuid) => {
-                    if (stayOnLatest)
+                    const next = selectedChangeCuid === cuid ? null : cuid;
+                    if (next != null && next === latestCuid && followLatestOnSelect) {
+                      if (!stayOnLatest)
+                        setPrefs({ stayOnLatest: true });
+                    } else if (stayOnLatest) {
                       setPrefs({ stayOnLatest: false });
-                    setSelectedChangeCuid((prev) => prev === cuid ? null : cuid);
+                    }
+                    setSelectedChangeCuid(next);
                   },
                   showStore: storeFilter == null
                 }, undefined, false, undefined, this)
@@ -2314,22 +2329,67 @@ function NiceStateDevtools_Panel({
     ]
   }, undefined, true, undefined, this);
 }
-function StayOnLatestToggle({
+function TimelineFollowToggles({
+  stayOnLatest,
+  onStayOnLatestChange,
+  followLatestOnSelect,
+  onFollowLatestOnSelectChange
+}) {
+  return /* @__PURE__ */ jsxDEV10("div", {
+    style: {
+      display: "flex",
+      flexDirection: "column",
+      flexShrink: 0,
+      paddingBottom: "3px",
+      background: DEVTOOL_SECTION_BACKGROUND,
+      borderBottom: `1px solid ${DEVTOOL_LIST_BASE_BACKGROUND}`
+    },
+    children: [
+      /* @__PURE__ */ jsxDEV10(ToggleLabel, {
+        title: "Auto-select the most recent change so the detail pane keeps showing the latest as new changes land",
+        checked: stayOnLatest,
+        onChange: onStayOnLatestChange,
+        children: "Follow latest"
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV10("div", {
+        style: { display: "flex", alignItems: "center", paddingLeft: "12px", marginTop: "-4px" },
+        children: [
+          /* @__PURE__ */ jsxDEV10("span", {
+            "aria-hidden": true,
+            style: {
+              color: DEVTOOL_COLOR_TEXT_MUTED,
+              fontFamily: SANS_FONT,
+              fontSize: "10px",
+              lineHeight: 1
+            },
+            children: "└"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV10(ToggleLabel, {
+            title: "When you click the latest change, turn 'Follow latest' back on so the view resumes tracking new changes. Turn this off to pin exactly to the change you click instead.",
+            checked: followLatestOnSelect,
+            onChange: onFollowLatestOnSelectChange,
+            children: "clicking latest re-follows"
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+function ToggleLabel({
   checked,
-  onChange
+  onChange,
+  title,
+  children
 }) {
   return /* @__PURE__ */ jsxDEV10("label", {
-    title: "Always select the most recent change so the detail pane follows it",
+    title,
     style: {
       display: "flex",
       alignItems: "center",
       gap: "6px",
       padding: "5px 10px",
-      flexShrink: 0,
       cursor: "pointer",
       userSelect: "none",
-      background: DEVTOOL_SECTION_BACKGROUND,
-      borderBottom: `1px solid ${DEVTOOL_LIST_BASE_BACKGROUND}`,
       color: checked ? DEVTOOL_COLOR_TEXT_SECONDARY : DEVTOOL_COLOR_TEXT_MUTED,
       fontSize: "10px",
       fontFamily: SANS_FONT
@@ -2341,7 +2401,7 @@ function StayOnLatestToggle({
         onChange: (e) => onChange(e.target.checked),
         style: { accentColor: DEVTOOL_COLOR_SEMANTIC_SYSTEM, cursor: "pointer", margin: 0 }
       }, undefined, false, undefined, this),
-      "stay on latest"
+      children
     ]
   }, undefined, true, undefined, this);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nice-code/state",
-  "version": "0.4.10",
+  "version": "0.4.11",
   "private": false,
   "type": "module",
   "exports": {