@thefoxieflow/signalctx 0.1.0 → 1.0.0

package/README.md

@@ -6,7 +6,9 @@ A tiny, signal-based state utility for React that **solves the `useContext` re-r
 If you’ve ever had this issue:
 
 ```ts
-{ count, book }
+{
+  count, book;
+}
 // updating count re-renders book components 😡
 ```
 
@@ -21,7 +23,7 @@ If you’ve ever had this issue:
 React Context subscribes to the **entire value**.
 
 ```tsx
-const { book } = useContext(StoreCtx)
+const { book } = useContext(StoreCtx);
 ```
 
 When **any property changes**, **every consumer re-renders** — even if they don’t use it.
@@ -34,23 +36,23 @@ This is not a bug. Context has **no selector mechanism**.
 
 `signal-ctx`:
 
-* Moves state **outside React**
-* Uses **external subscriptions**
-* Allows **selector-based updates**
+- Moves state **outside React**
+- Uses **external subscriptions**
+- Allows **selector-based updates**
 
-So only the components that *actually use* the changed data re-render.
+So only the components that _actually use_ the changed data re-render.
 
 ---
 
 ## ✨ Features
 
-* ⚡ Signal-style state container
-* 🎯 Selector-based subscriptions
-* 🧵 React 18 concurrent-safe
-* 🧩 Context-backed but not context-driven
-* 📦 Very small bundle size
-* 🌳 Tree-shakable
-* 🧠 Explicit and predictable
+- ⚡ Signal-style state container
+- 🎯 Selector-based subscriptions
+- 🧵 React 18 concurrent-safe
+- 🧩 Context-backed but not context-driven
+- 📦 Very small bundle size
+- 🌳 Tree-shakable
+- 🧠 Explicit and predictable
 
 ---
 
@@ -78,39 +80,70 @@ The state lives **outside React**, and components subscribe **directly to the si
 
 ---
 
-## 🔹 Signal Store
+## 🔹 Signal
 
 A signal is:
 
-* A function that returns state
-* Can be subscribed to
-* Can be updated imperatively
+- A function that returns state
+- Can be subscribed to
+- Can be updated imperatively
 
 ```ts
-type Store<T> = {
-  (): T
-  subscribe(fn: () => void): () => void
-  set(action: SetStateAction<T>): void
-}
+type Signal<T extends object> = {
+  (): T; // get state
+
+  // add listener
+  on(fn: Subscriber): () => void;
+
+  // notify all listeners
+  notify(): void;
+
+  // reset to initial value
+  reset(): void;
+
+  // update state
+  set(action: SetAction<T>): void;
+};
 ```
 
 ---
 
-## 🔹 Low-Level Hooks
+## 🔹 Low-Level Functions
+
+### `newSignal(init)`
 
-### `createStore(()=>{})`
+Creates a low-level signal.
+
+```ts
+const signal = newSignal({ count: 0 });
+const state = signal(); // get state { count: 0 }
+
+signal.on(() => console.log("changed"));
+
+setInterval(() => {
+  signal.set((s) => {
+    s.count++;
+  });
+  // will trigger signal.on listeners
+  signal.notify();
+}, 2000);
+```
+
+---
+
+## 🔹 React Hooks
 
 ### `useValue(store, selector?)`
 
 Subscribe to a signal.
 
 ```tsx
-const count = useValue(store, s => s.count)
+const count = useValue(store, (s) => s.count);
 ```
 
-* Uses `useSyncExternalStore`
-* Re-renders only when the selected value changes
-* Selector is optional
+- Uses `useSyncExternalStore`
+- Re-renders only when the selected value changes
+- Selector is optional
 
 ---
 
@@ -119,27 +152,40 @@ const count = useValue(store, s => s.count)
 Returns a setter function.
 
 ```ts
-const set = useSet(store)
+const set = useSet(store);
 
-set(prev => ({ ...prev, count: prev.count + 1 }))
+// update entire state
+const prev = store();
+set({ ...prev, count: prev.count + 1 });
+
+// or update partially
+set((s) => {
+  s.count++;
+});
 ```
 
 Scoped update:
 
 ```ts
+const store = newStore(() => ({
+  book: { title: "1984", page: 1 },
+  user: { name: "Alice" },
+}));
 // book must be object for selector
-const setBook = useSetSignal(store, s => s.book)
-
-
-// put: update an object
-setBook({
-    title : "book"
-})
-
-// patch: update partially
-setBook((b)=>{
-    b.title = "book"
-})
+const setBook = useSet(store, (s) => s.book);
+
+// update an object
+const setBook = () => {
+  setBook({
+    title: "1999",
+    page: 10,
+  });
+};
+
+// or update partially
+setBook((b) => {
+  b.title = "1999";
+});
 ```
 
 ⚠️ Updates are **mutation-based**. Spread manually if you want immutability.
@@ -153,14 +199,21 @@ setBook((b)=>{
 Creates a **context-backed signal store hook**.
 
 ```ts
-import { createCtx } from "@your-scope/signal-ctx"
+import { createCtx } from "@thefoxieflow/signalctx";
 
-export const useStore = createCtx(() => ({
+export const useAppCtx = createCtx(() => ({
   count: 0,
-  book: { title: "1984" }
-}))
+  book: { title: "1984" },
+}));
 ```
 
+The returned function has these properties:
+
+- **`useAppCtx(selector, options)`** - Hook to select state
+- **`useAppCtx.Provider`** - Context provider component
+- **`useAppCtx.useSet(selector, options)`** - Hook to get setter function
+- **`useAppCtx.useStore(options)`** - Hook to access raw store
+
 ---
 
 ## 🚀 Usage
@@ -168,26 +221,27 @@ export const useStore = createCtx(() => ({
 ### 1. Create a Provider
 
 ```tsx
-// use default initial value from useStore
+// use default initial value from useAppCtx
 type Props = {
-  children: React.ReactNode
-}
+  children: React.ReactNode;
+};
 
 export function StoreProvider({ children }: Props) {
-  const Provider = useStore.provide()
-  return <Provider>{children}</Provider>
+  return <useAppCtx.Provider>{children}</useAppCtx.Provider>;
 }
 
 // overwrite value
 export function StoreProvider({ children }: Props) {
-  const Provider = useStore.provide({
-    value: {
-      count: 10,
-      book: { title: "Brave New World" }
-    }
-  })
-
-  return <Provider>{children}</Provider>
+  return (
+    <useAppCtx.Provider
+      value={{
+        count: 10,
+        book: { title: "Brave New World" },
+      }}
+    >
+      {children}
+    </useAppCtx.Provider>
+  );
 }
 ```
 
@@ -203,13 +257,13 @@ export function StoreProvider({ children }: Props) {
 
 ```tsx
 function Count() {
-  const count = useStore(s => s.count)
-  return <div>{count}</div>
+  const count = useAppCtx((s) => s.count);
+  return <div>{count}</div>;
 }
 
 function Book() {
-  const book = useStore(s => s.book)
-  return <div>{book.title}</div>
+  const book = useAppCtx((s) => s.book);
+  return <div>{book.title}</div>;
 }
 ```
 
@@ -219,34 +273,69 @@ function Book() {
 
 ```tsx
 function Increment() {
-  const set = useStore.useSetter()
+  const setCount = useAppCtx.useSet((s) => s);
 
   return (
-    <button onClick={() =>
-      set(s => ({ ...s, count: s.count + 1 }))
-    }>
+    <button
+      onClick={() =>
+        setCount((s) => {
+          s.count++;
+        })
+      }
+    >
       +
     </button>
-  )
+  );
 }
 ```
 
+### 4. Custom signal for additional logic
+
+```tsx
+const signalWithTraceSet = <T extends object & { traceSet: number }>(
+  init: () => T
+) => {
+  const core = newSignal(init);
+
+  const signal: Signal<T> = () => core();
+
+  signal.reset = core.reset;
+  signal.notify = core.notify;
+  signal.on = core.on;
+
+  // set interceptor
+  signal.set = (action: SetAction<T>) => {
+    console.log("before set", core().traceSet);
+    core.set(action);
+    core().traceSet += 1;
+    console.log("after set", core().traceSet);
+  };
+
+  return signal;
+};
+
+const useHelloCtx = createCtx(
+  () => ({ traceSet: 0, text: "hello" }),
+  signalWithTraceSet
+);
+```
+
 ✅ Updating `count` **does NOT re-render** `Book`.
 
 ---
 
 ## 🧩 Why This Works
 
-* Context value never changes
-* React does not re-render on context updates
-* `useSyncExternalStore` compares selected snapshots
-* Only changed selectors trigger re-renders
+- Context value never changes
+- React does not re-render on context updates
+- `useSyncExternalStore` compares selected snapshots
+- Only changed selectors trigger re-renders
 
 This is the **same model** used by:
 
-* Redux `useSelector`
-* Zustand selectors
-* React’s official external store docs
+- Redux `useSelector`
+- Zustand selectors
+- React’s official external store docs
 
 ---
 
@@ -258,13 +347,13 @@ This is the **same model** used by:
 ❌ Bad:
 
 ```ts
-const state = useStore(s => s)
+const { count } = useAppCtx((s) => s);
 ```
 
 ✅ Good:
 
 ```ts
-const count = useStore(s => s.count)
+const count = useAppCtx((s) => s.count);
 ```
 
 ---
@@ -275,78 +364,88 @@ You can create isolated stores using `storeName`.
 
 ```tsx
 type Props = {
-  children: React.ReactNode
-  storeName: string
-  initialValue?: { count: number; book: { title: string } }
-}
+  children: React.ReactNode;
+  storeName?: string;
+  initialValue?: { count: number; book: { title: string } };
+};
 
 export function StoreProvider({ children, storeName, initialValue }: Props) {
-  const Provider = useStore.provide({
-    storeName,
-    value: initialValue || { count: 0, book: { title: "1984" } }
-  })
-
-  return <Provider>{children}</Provider>
+  return (
+    <useAppCtx.Provider value={initialValue} storeName={storeName}>
+      {children}
+    </useAppCtx.Provider>
+  );
 }
 ```
 
 ### Usage
+
 ```tsx
-<StoreProvider storeName="storeA" initialValue={{ count: 1, book: { title: "A" } }}>
+<StoreProvider
+  storeName="storeA"
+  initialValue={{ count: 1, book: { title: "A" } }}
+>
+  {/* useAppCtx(s => s.book) is from storeA */}
   <AppA />
-  <StoreProvider storeName="storeB" initialValue={{ count: 5, book: { title: "B" } }}>
+  <StoreProvider
+    storeName="storeB"
+    initialValue={{ count: 5, book: { title: "B" } }}
+  >
+    {/* useAppCtx(s => s.book) is from storeB */}
+    {/* useAppCtx(s => s.book, { storeName: "storeA" }) is from storeA */}
     <AppB />
   </StoreProvider>
-</StoreProvider>
+</StoreProvider>;
+
+function AppB() {
+  // Read from parent storeB, book.title = "B"
+  const currentBook = useAppCtx((s) => s.book); // or useAppCtx(s => s.book, { storeName: "storeB" })
 
-function AppB(){
-  // book from parent context; parent = "storeA" so book.title = "A"
-  const book = useStore(s => s.book)
+  const layerAbook = useAppCtx((s) => s.book, { storeName: "storeA" }); // book.title = "A"
 
-  // but i want a book from storeA; so it requires storeName
-  // book.title = "B"
-  const storeABook = useStore(s => s.book,{ storeName :"storeA" })
+  // AppB want to change data in context StoreA layer
+  const setLayerAbook = useAppCtx.useSet((s) => s.book, {
+    storeName: "storeA",
+  });
 
-  // same apply to setter
-  const setBookStoreA = useStore.useSetter((s)=>s.book, {storeName : "storeA"})
+  const handleSetLayerABook = (text) => {
+    setLayerAbook((b) => {
+      if (b.title !== "A") {
+        console.error("title in storeA should be A");
+      }
 
-  const handleClick = (text)=>{
-    setCountStoreA((s) => {
-       s.title = "change A to AA"
-       return s
-    })
-  }
+      b.title = text;
+    });
+  };
 }
 ```
 
-
-
 Each store is independent.
 
 ---
 
 ## 🌐 Server-Side Rendering (SSR)
 
-`signalctx` is SSR-safe.
+`Signal Ctx` is SSR-safe.
 
-* Uses `useSyncExternalStore`
-* Identical snapshot logic on server & client
-* No shared global state between requests
+- Uses `useSyncExternalStore`
+- Identical snapshot logic on server & client
+- No shared global state between requests
 
 ---
 
 ## ⚠️ Caveats
 
-* No middleware
-* No devtools
-* No persistence
-* Mutation-based updates by design
+- No middleware
+- No devtools
+- No persistence
+- Mutation-based updates by design
 
 Best suited for:
 
-* UI state
-* App-level shared state
-* Lightweight global stores
+- UI state
+- Lightweight global stores
+- flexible shared state
 
 ---
 
@@ -355,7 +454,7 @@ Best suited for:
 Fully typed with generics and inferred selectors.
 
 ```ts
-const count = useStore(s => s.count) // number
+const count = useAppCtx((s) => s.count); // number
 ```
 
 ---
@@ -372,8 +471,8 @@ MIT
 
 It favors:
 
-* Explicit ownership
-* Predictable updates
-* Minimal abstraction
+- Explicit ownership
+- Predictable updates
+- Minimal abstraction
 
 If you understand React, you understand `signalctx`.

package/dist/index.d.mts

@@ -1,49 +1,29 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { PropsWithChildren } from 'react';
 
-type SetStateAction<T> = T | ((prev: T) => T);
+type SetAction<T> = T | ((prev: T) => void);
 type Subscriber = () => void;
-/** for controlling store internal state without notifying subscribers
- * @function calling the store internal state reference
- * @method on subscribe to state changes
- * @method set update the state without notifying subscribers
- * @method reset reset the state to initial value without notifying subscribers
- * @method notify manually notify all subscribers
- */
-type InnerStore<T> = {
+type Signal<T> = {
     (): T;
     on: (sub: Subscriber) => () => void;
     notify: () => void;
     reset: () => void;
-    set: (action: SetStateAction<T>) => void;
+    set: (action: SetAction<T>) => void;
 };
-/**
- * @function calling the store returns a copy of the internal state
- * @method on subscribe to state changes
- * @method set update the state with notifying subscribers
- * @method reset reset the state to initial value with notifying subscribers
- * @property $ access to non-notifying methods
- */
-type Store<T> = {
-    (): T;
-    on: (sub: Subscriber) => () => void;
-    reset: () => void;
-    set: (action: SetStateAction<T>) => void;
-    $: InnerStore<T>;
-};
-declare const useValue: <T extends object, Dest = T>(store: Store<T>, selector?: (state: T) => Dest) => Dest;
-declare const useSet: <T extends object = any, Dest extends object = T>(store: Store<T>, selector?: (state: T) => Dest) => (action: SetStateAction<Dest>) => Dest;
+declare const newSignal: <T extends object>(init: () => T) => Signal<T>;
+declare const useValue: <T extends object, Dest = T>(store: Signal<T>, selector?: (state: T) => Dest) => Dest;
+declare const useSet: <T extends object = any, Dest extends object = T>($: Signal<T>, selector?: (state: T) => Dest) => (action: SetAction<Dest>) => void;
 type StoreOption = {
-    storeName?: string;
+    name?: string;
 };
-declare function createCtx<T extends object>(init: () => T): {
-    <Dest = any>(selector: (state: T) => Dest, opt?: StoreOption): Dest;
-    provide: (opt?: {
+declare function createCtx<T extends object>(init: () => T, makeSignal?: (init: () => T) => Signal<T>): {
+    <Dest extends object = T>(selector: (state: T) => Dest, opt?: StoreOption): Dest;
+    useSet<Dest extends object = T>(selector?: (state: T) => Dest, opt?: StoreOption): (action: SetAction<Dest>) => void;
+    useSignal<Dest extends object = T>(selector: (state: T) => Dest, opt?: StoreOption): Dest;
+    Provider(props: PropsWithChildren<{
         value?: T;
-        storeName?: string;
-    }) => ({ children }: PropsWithChildren) => react_jsx_runtime.JSX.Element;
-    useSet: <Dest extends object = T>(selector?: (state: T) => Dest, opt?: StoreOption) => (action: SetStateAction<Dest>) => Dest;
-    useStore: (opt?: StoreOption) => Store<T>;
+        name?: string;
+    }>): react_jsx_runtime.JSX.Element;
 };
 
-export { type InnerStore, type SetStateAction, type Store, type Subscriber, createCtx, useSet, useValue };
+export { type SetAction, type Signal, type Subscriber, createCtx, newSignal, useSet, useValue };

package/dist/index.d.ts

@@ -1,49 +1,29 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { PropsWithChildren } from 'react';
 
-type SetStateAction<T> = T | ((prev: T) => T);
+type SetAction<T> = T | ((prev: T) => void);
 type Subscriber = () => void;
-/** for controlling store internal state without notifying subscribers
- * @function calling the store internal state reference
- * @method on subscribe to state changes
- * @method set update the state without notifying subscribers
- * @method reset reset the state to initial value without notifying subscribers
- * @method notify manually notify all subscribers
- */
-type InnerStore<T> = {
+type Signal<T> = {
     (): T;
     on: (sub: Subscriber) => () => void;
     notify: () => void;
     reset: () => void;
-    set: (action: SetStateAction<T>) => void;
+    set: (action: SetAction<T>) => void;
 };
-/**
- * @function calling the store returns a copy of the internal state
- * @method on subscribe to state changes
- * @method set update the state with notifying subscribers
- * @method reset reset the state to initial value with notifying subscribers
- * @property $ access to non-notifying methods
- */
-type Store<T> = {
-    (): T;
-    on: (sub: Subscriber) => () => void;
-    reset: () => void;
-    set: (action: SetStateAction<T>) => void;
-    $: InnerStore<T>;
-};
-declare const useValue: <T extends object, Dest = T>(store: Store<T>, selector?: (state: T) => Dest) => Dest;
-declare const useSet: <T extends object = any, Dest extends object = T>(store: Store<T>, selector?: (state: T) => Dest) => (action: SetStateAction<Dest>) => Dest;
+declare const newSignal: <T extends object>(init: () => T) => Signal<T>;
+declare const useValue: <T extends object, Dest = T>(store: Signal<T>, selector?: (state: T) => Dest) => Dest;
+declare const useSet: <T extends object = any, Dest extends object = T>($: Signal<T>, selector?: (state: T) => Dest) => (action: SetAction<Dest>) => void;
 type StoreOption = {
-    storeName?: string;
+    name?: string;
 };
-declare function createCtx<T extends object>(init: () => T): {
-    <Dest = any>(selector: (state: T) => Dest, opt?: StoreOption): Dest;
-    provide: (opt?: {
+declare function createCtx<T extends object>(init: () => T, makeSignal?: (init: () => T) => Signal<T>): {
+    <Dest extends object = T>(selector: (state: T) => Dest, opt?: StoreOption): Dest;
+    useSet<Dest extends object = T>(selector?: (state: T) => Dest, opt?: StoreOption): (action: SetAction<Dest>) => void;
+    useSignal<Dest extends object = T>(selector: (state: T) => Dest, opt?: StoreOption): Dest;
+    Provider(props: PropsWithChildren<{
         value?: T;
-        storeName?: string;
-    }) => ({ children }: PropsWithChildren) => react_jsx_runtime.JSX.Element;
-    useSet: <Dest extends object = T>(selector?: (state: T) => Dest, opt?: StoreOption) => (action: SetStateAction<Dest>) => Dest;
-    useStore: (opt?: StoreOption) => Store<T>;
+        name?: string;
+    }>): react_jsx_runtime.JSX.Element;
 };
 
-export { type InnerStore, type SetStateAction, type Store, type Subscriber, createCtx, useSet, useValue };
+export { type SetAction, type Signal, type Subscriber, createCtx, newSignal, useSet, useValue };

package/dist/index.js

@@ -21,115 +21,112 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   createCtx: () => createCtx,
+  newSignal: () => newSignal,
   useSet: () => useSet,
   useValue: () => useValue
 });
 module.exports = __toCommonJS(index_exports);
 var import_react = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
-var createInnerStore = (init) => {
+var newSignal = (init) => {
   let ref;
   const subs = /* @__PURE__ */ new Set();
-  const store = () => ref || (ref = init());
-  store.set = (action) => {
-    apply(store(), action);
+  const signal = () => ref || (ref = init());
+  signal.set = (action) => {
+    act(signal(), action);
   };
-  store.reset = () => {
+  signal.reset = () => {
     ref = init();
   };
-  store.notify = () => {
+  signal.notify = () => {
     subs.forEach((sub) => sub());
   };
-  store.on = (sub) => {
+  signal.on = (sub) => {
     subs.add(sub);
     return () => subs.delete(sub);
   };
-  return store;
+  return signal;
 };
-var isFunction = (val) => typeof val === "function";
-var setTargetValue = (target, newVal) => {
-  if (Object.is(target, newVal)) return target;
+var replaceIfDiff = (target, newVal) => {
+  if (Object.is(target, newVal)) return;
   Object.keys(target).forEach((k) => delete target[k]);
   Object.keys(newVal).forEach((k) => target[k] = newVal[k]);
-  return target;
 };
-var apply = (target, action) => {
-  const val = isFunction(action) ? action(target) : action;
-  return setTargetValue(target, val);
+var act = (target, action) => {
+  if (typeof action === "function") {
+    action(target);
+  } else {
+    replaceIfDiff(target, action);
+  }
 };
-function createStore(init) {
-  const $ = createInnerStore(init);
-  const store = () => {
-    const ref = $();
-    return { ...ref };
-  };
-  store.reset = () => {
-    $.reset();
-    $.notify();
-  };
-  store.set = (action) => {
-    $.set(action);
-    $.notify();
-  };
-  store.on = $.on;
-  store.$ = $;
-  return store;
-}
 var useValue = (store, selector) => {
   const get = () => selector ? selector(store()) : store();
   return (0, import_react.useSyncExternalStore)(store.on, get, get);
 };
-var useSet = (store, selector) => {
+var useSet = ($, selector) => {
   const setter = (action) => {
-    const current = store();
-    const target = selector ? selector(current) : current;
-    apply(target, action);
-    store.set(current);
-    return target;
+    const ref = $();
+    const targetRef = selector ? selector(ref) : ref;
+    act(targetRef, action);
+    $.notify();
   };
   return setter;
 };
-function createCtx(init) {
-  const ctx = (0, import_react.createContext)(createStore(init));
-  const stores = /* @__PURE__ */ new Map();
-  const initStore = (name, init2) => {
-    if (!stores.has(name)) stores.set(name, createStore(init2));
+function createCtx(init, makeSignal = (init2) => newSignal(init2)) {
+  const ctx = (0, import_react.createContext)(null);
+  let stores;
+  const initSignal = (init2, name) => {
+    if (!name) return makeSignal(init2);
+    if (!stores) stores = /* @__PURE__ */ new Map();
+    if (!stores.has(name)) stores.set(name, makeSignal(init2));
     return stores.get(name);
   };
-  const useStore = (opt) => {
+  const useSignal = (opt) => {
+    if (opt?.name) {
+      if (!stores || !stores.has(opt.name))
+        throw new Error(`<Provider name="${opt.name}" ...> does not exist`);
+      return stores.get(opt.name);
+    }
     const store = (0, import_react.useContext)(ctx);
-    if (opt?.storeName && stores.has(opt.storeName)) return stores.get(opt.storeName);
     if (!store) throw new Error("useCtx must be used within a Provider");
     return store;
   };
-  const provide = (opt = {}) => {
-    const storeInit = opt.value ? () => opt.value : init;
-    const storeName = opt.storeName || "ctx__store";
-    const Provider = ({ children }) => {
-      const store = initStore(storeName, storeInit);
-      (0, import_react.useEffect)(() => () => {
-        stores.delete(storeName);
-      }, []);
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ctx.Provider, { value: store, children });
-    };
-    return Provider;
-  };
-  const use = (selector, opt) => {
-    const store = useStore(opt);
+  const useSelect = (selector, opt) => {
+    const store = useSignal(opt);
     return useValue(store, selector);
   };
-  const useSetter = (selector, opt) => {
-    const store = useStore(opt);
+  useSelect.useSet = (selector, opt) => {
+    const store = useSignal(opt);
     return useSet(store, selector);
   };
-  use.provide = provide;
-  use.useSet = useSetter;
-  use.useStore = useStore;
-  return use;
+  useSelect.useSignal = (selector, opt) => {
+    const store = useSignal(opt);
+    return useValue(store, selector);
+  };
+  useSelect.Provider = (props) => {
+    const [signal, name] = (0, import_react.useMemo)(() => {
+      const initor = props.value ? () => props.value : init;
+      const _signal = initSignal(initor, props.name);
+      return [_signal, props.name];
+    }, [props.value, props.name]);
+    (0, import_react.useEffect)(
+      () => () => {
+        if (name) stores.delete(name);
+      },
+      [signal, name]
+    );
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(ctx.Provider, { value: signal, children: [
+      " ",
+      props.children,
+      " "
+    ] });
+  };
+  return useSelect;
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   createCtx,
+  newSignal,
   useSet,
   useValue
 });

package/dist/index.mjs

@@ -3,111 +3,108 @@ import {
   createContext,
   useContext,
   useEffect,
+  useMemo,
   useSyncExternalStore
 } from "react";
-import { jsx } from "react/jsx-runtime";
-var createInnerStore = (init) => {
+import { jsxs } from "react/jsx-runtime";
+var newSignal = (init) => {
   let ref;
   const subs = /* @__PURE__ */ new Set();
-  const store = () => ref || (ref = init());
-  store.set = (action) => {
-    apply(store(), action);
+  const signal = () => ref || (ref = init());
+  signal.set = (action) => {
+    act(signal(), action);
   };
-  store.reset = () => {
+  signal.reset = () => {
     ref = init();
   };
-  store.notify = () => {
+  signal.notify = () => {
     subs.forEach((sub) => sub());
   };
-  store.on = (sub) => {
+  signal.on = (sub) => {
     subs.add(sub);
     return () => subs.delete(sub);
   };
-  return store;
+  return signal;
 };
-var isFunction = (val) => typeof val === "function";
-var setTargetValue = (target, newVal) => {
-  if (Object.is(target, newVal)) return target;
+var replaceIfDiff = (target, newVal) => {
+  if (Object.is(target, newVal)) return;
   Object.keys(target).forEach((k) => delete target[k]);
   Object.keys(newVal).forEach((k) => target[k] = newVal[k]);
-  return target;
 };
-var apply = (target, action) => {
-  const val = isFunction(action) ? action(target) : action;
-  return setTargetValue(target, val);
+var act = (target, action) => {
+  if (typeof action === "function") {
+    action(target);
+  } else {
+    replaceIfDiff(target, action);
+  }
 };
-function createStore(init) {
-  const $ = createInnerStore(init);
-  const store = () => {
-    const ref = $();
-    return { ...ref };
-  };
-  store.reset = () => {
-    $.reset();
-    $.notify();
-  };
-  store.set = (action) => {
-    $.set(action);
-    $.notify();
-  };
-  store.on = $.on;
-  store.$ = $;
-  return store;
-}
 var useValue = (store, selector) => {
   const get = () => selector ? selector(store()) : store();
   return useSyncExternalStore(store.on, get, get);
 };
-var useSet = (store, selector) => {
+var useSet = ($, selector) => {
   const setter = (action) => {
-    const current = store();
-    const target = selector ? selector(current) : current;
-    apply(target, action);
-    store.set(current);
-    return target;
+    const ref = $();
+    const targetRef = selector ? selector(ref) : ref;
+    act(targetRef, action);
+    $.notify();
   };
   return setter;
 };
-function createCtx(init) {
-  const ctx = createContext(createStore(init));
-  const stores = /* @__PURE__ */ new Map();
-  const initStore = (name, init2) => {
-    if (!stores.has(name)) stores.set(name, createStore(init2));
+function createCtx(init, makeSignal = (init2) => newSignal(init2)) {
+  const ctx = createContext(null);
+  let stores;
+  const initSignal = (init2, name) => {
+    if (!name) return makeSignal(init2);
+    if (!stores) stores = /* @__PURE__ */ new Map();
+    if (!stores.has(name)) stores.set(name, makeSignal(init2));
     return stores.get(name);
   };
-  const useStore = (opt) => {
+  const useSignal = (opt) => {
+    if (opt?.name) {
+      if (!stores || !stores.has(opt.name))
+        throw new Error(`<Provider name="${opt.name}" ...> does not exist`);
+      return stores.get(opt.name);
+    }
     const store = useContext(ctx);
-    if (opt?.storeName && stores.has(opt.storeName)) return stores.get(opt.storeName);
     if (!store) throw new Error("useCtx must be used within a Provider");
     return store;
   };
-  const provide = (opt = {}) => {
-    const storeInit = opt.value ? () => opt.value : init;
-    const storeName = opt.storeName || "ctx__store";
-    const Provider = ({ children }) => {
-      const store = initStore(storeName, storeInit);
-      useEffect(() => () => {
-        stores.delete(storeName);
-      }, []);
-      return /* @__PURE__ */ jsx(ctx.Provider, { value: store, children });
-    };
-    return Provider;
-  };
-  const use = (selector, opt) => {
-    const store = useStore(opt);
+  const useSelect = (selector, opt) => {
+    const store = useSignal(opt);
     return useValue(store, selector);
   };
-  const useSetter = (selector, opt) => {
-    const store = useStore(opt);
+  useSelect.useSet = (selector, opt) => {
+    const store = useSignal(opt);
     return useSet(store, selector);
   };
-  use.provide = provide;
-  use.useSet = useSetter;
-  use.useStore = useStore;
-  return use;
+  useSelect.useSignal = (selector, opt) => {
+    const store = useSignal(opt);
+    return useValue(store, selector);
+  };
+  useSelect.Provider = (props) => {
+    const [signal, name] = useMemo(() => {
+      const initor = props.value ? () => props.value : init;
+      const _signal = initSignal(initor, props.name);
+      return [_signal, props.name];
+    }, [props.value, props.name]);
+    useEffect(
+      () => () => {
+        if (name) stores.delete(name);
+      },
+      [signal, name]
+    );
+    return /* @__PURE__ */ jsxs(ctx.Provider, { value: signal, children: [
+      " ",
+      props.children,
+      " "
+    ] });
+  };
+  return useSelect;
 }
 export {
   createCtx,
+  newSignal,
   useSet,
   useValue
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thefoxieflow/signalctx",
-  "version": "0.1.0",
+  "version": "1.0.0",
   "description": "Lightweight signal-based React context store",
   "main": "dist/index.cjs",
   "module": "dist/index.js",