@nice-code/state 0.4.0 → 0.4.2

package/build/devtools/browser/index.js

@@ -191,105 +191,6 @@ 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";
 
@@ -571,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) {
@@ -705,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", {
@@ -726,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);
 }
@@ -1395,6 +1301,105 @@ function Pill({
   }, undefined, true, undefined, this);
 }
 
+// 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/NiceStateDevtools.tsx
 import { jsxDEV as jsxDEV9, Fragment } from "react/jsx-dev-runtime";
 if (typeof document !== "undefined" && !document.getElementById("__nice-state-devtools-styles")) {
@@ -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);
@@ -1529,7 +1534,31 @@ function NiceStateDevtools_Panel({
     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" }
+    ...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",

package/build/types/devtools/browser/NiceStateDevtools.d.ts

@@ -1,5 +1,5 @@
-import type { StateDevtoolsCore } from "../core/StateDevtoolsCore";
 import type { TDevtoolsPosition } from "../core/StateDevtools.types";
+import type { StateDevtoolsCore } from "../core/StateDevtoolsCore";
 export interface INiceStateDevtoolsProps {
     core: StateDevtoolsCore;
     position?: TDevtoolsPosition;

package/package.json

@@ -1,56 +1,56 @@
-{
-  "name": "@nice-code/state",
-  "version": "0.4.0",
-  "private": false,
-  "type": "module",
-  "exports": {
-    ".": {
-      "source": "./src/index.ts",
-      "types": "./build/types/index.d.ts",
-      "import": "./build/index.js"
-    },
-    "./react": {
-      "source": "./src/react/index.ts",
-      "types": "./build/types/react/index.d.ts",
-      "import": "./build/react/index.js"
-    },
-    "./devtools/browser": {
-      "source": "./src/devtools/browser/index.ts",
-      "types": "./build/types/devtools/browser/index.d.ts",
-      "import": "./build/devtools/browser/index.js"
-    }
-  },
-  "files": [
-    "build",
-    "package.json",
-    "README.md"
-  ],
-  "publishConfig": {
-    "access": "public"
-  },
-  "scripts": {
-    "type-check": "bunx tsc --noEmit",
-    "type-check-watch": "bunx tsc --noEmit --watch",
-    "clean-build": "bunx rimraf build",
-    "vitest": "vitest --typecheck",
-    "vitest-agent": "vitest --typecheck --reporter=agent",
-    "build": "bun run clean-build && bun run build.ts && bun run build-types",
-    "build-watch": "bun run clean-build && bun run build.ts --watch && bun run build-types --watch",
-    "build-types": "tsc --project tsconfig.build.json"
-  },
-  "dependencies": {
-    "immer": "11.1.8",
-    "fast-equals": "6.0.0"
-  },
-  "devDependencies": {
-    "react": "19.2.7"
-  },
-  "peerDependencies": {
-    "react": ">=19"
-  },
-  "peerDependenciesMeta": {
-    "react": {
-      "optional": true
-    }
-  }
-}
+{
+  "name": "@nice-code/state",
+  "version": "0.4.2",
+  "private": false,
+  "type": "module",
+  "exports": {
+    ".": {
+      "source": "./src/index.ts",
+      "types": "./build/types/index.d.ts",
+      "import": "./build/index.js"
+    },
+    "./react": {
+      "source": "./src/react/index.ts",
+      "types": "./build/types/react/index.d.ts",
+      "import": "./build/react/index.js"
+    },
+    "./devtools/browser": {
+      "source": "./src/devtools/browser/index.ts",
+      "types": "./build/types/devtools/browser/index.d.ts",
+      "import": "./build/devtools/browser/index.js"
+    }
+  },
+  "files": [
+    "build",
+    "package.json",
+    "README.md"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "type-check": "bunx tsc --noEmit",
+    "type-check-watch": "bunx tsc --noEmit --watch",
+    "clean-build": "bunx rimraf build",
+    "vitest": "vitest --typecheck",
+    "vitest-agent": "vitest --typecheck --reporter=agent",
+    "build": "bun run clean-build && bun run build.ts && bun run build-types",
+    "build-watch": "bun run clean-build && bun run build.ts --watch && bun run build-types --watch",
+    "build-types": "tsc --project tsconfig.build.json"
+  },
+  "dependencies": {
+    "immer": "11.1.8",
+    "fast-equals": "6.0.0"
+  },
+  "devDependencies": {
+    "react": "19.2.7"
+  },
+  "peerDependencies": {
+    "react": ">=19"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    }
+  }
+}