@nice-code/state 0.4.1 → 0.4.2

package/build/devtools/browser/index.js

@@ -472,9 +472,15 @@ import {
 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]
+  { key: "tl", pos: null },
+  { key: "tc", pos: "dock-top" },
+  { key: "tr", pos: null },
+  { key: "ml", pos: "dock-left" },
+  { key: "mc", pos: null },
+  { key: "mr", pos: "dock-right" },
+  { key: "bl", pos: null },
+  { key: "bc", pos: "dock-bottom" },
+  { key: "br", pos: null }
 ];
 function getDockSide(pos) {
   switch (pos) {
@@ -606,12 +612,11 @@ function PositionPicker({
   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) => {
+    children: POSITION_GRID.map(({ key, pos }) => {
       if (pos == null)
         return /* @__PURE__ */ jsxDEV3("div", {
           style: { width: "9px", height: "9px" }
-        }, "center-empty", false, undefined, this);
-      const isDock = pos.startsWith("dock-");
+        }, key, false, undefined, this);
       const isTopBottom = pos === "dock-top" || pos === "dock-bottom";
       const isActive = pos === position;
       return /* @__PURE__ */ jsxDEV3("div", {
@@ -627,13 +632,13 @@ function PositionPicker({
         },
         children: /* @__PURE__ */ jsxDEV3("div", {
           style: {
-            width: isDock ? isTopBottom ? "9px" : "3px" : "7px",
-            height: isDock ? isTopBottom ? "3px" : "9px" : "7px",
-            borderRadius: isDock ? "1px" : "50%",
+            width: isTopBottom ? "9px" : "3px",
+            height: isTopBottom ? "3px" : "9px",
+            borderRadius: "1px",
             background: isActive ? DEVTOOL_COLOR_SEMANTIC_SYSTEM : DEVTOOL_COLOR_TEXT_FAINT
           }
         }, undefined, false, undefined, this)
-      }, pos, false, undefined, this);
+      }, key, false, undefined, this);
     })
   }, undefined, false, undefined, this);
 }
@@ -1467,12 +1472,12 @@ function NiceStateDevtools_Panel({
   const [selectedChangeCuid, setSelectedChangeCuid] = useState4(null);
   useEffect2(() => core.subscribe(setSnapshot), [core]);
   const setPrefs = (update) => {
-    setPrefsRaw((prev) => {
-      const next = { ...prev, ...update };
-      writePrefs(next);
-      return next;
-    });
+    setPrefsRaw((prev) => ({ ...prev, ...update }));
   };
+  useEffect2(() => {
+    const timer = setTimeout(() => writePrefs(prefs), 250);
+    return () => clearTimeout(timer);
+  }, [prefs]);
   const { stores, changes, paused } = snapshot;
   const { position, isOpen, dockedHeight, dockedWidth, detailRatio } = prefs;
   const dockSide = getDockSide(position);

package/package.json

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