@kdeveloper/kvark 0.5.3 → 0.6.1

package/README.md

@@ -1,12 +1,12 @@
 # @kdeveloper/kvark
 
-Atomic state management for React with **explicit dependency graphs**, stale-while-revalidate, and first-class external invalidation.
+Atomic state management for **React** and **Vue 3** with **explicit dependency graphs**, stale-while-revalidate, and first-class external invalidation.
 
-Inspired by Jotai, but built around a key difference: dependencies are declared upfront rather than inferred at runtime. This makes the data graph statically analysable, enables parallel loading, and allows invalidation from anywhere — WebSocket handlers, SSE streams, timers, Service Workers — without any React hooks.
+Inspired by Jotai, but built around a key difference: dependencies are declared upfront rather than inferred at runtime. This makes the data graph statically analysable, enables parallel loading, and allows invalidation from anywhere — WebSocket handlers, SSE streams, timers, Service Workers — without framework hooks.
 
-```
-npm install @kdeveloper/kvark
-# peer dependency: react >=18
+```bash
+pnpm add @kdeveloper/kvark
+# optional peers: react >=18 and/or vue >=3.4 (install the one you use)
 ```
 
 ## Why Kvark?
@@ -26,7 +26,7 @@ npm install @kdeveloper/kvark
 
 ```bash
 pnpm add @kdeveloper/kvark
-# react >=18 is a peer dependency
+# optional peers: react >=18 and/or vue >=3.4
 ```
 
 ## Quick Start
@@ -73,6 +73,69 @@ function UserCard() {
 }
 ```
 
+### Vue 3
+
+The same atoms and store work with `@kdeveloper/kvark/vue`. Composables mirror the React hooks; `useAtomValue` returns a [`shallowRef`](https://vuejs.org/api/reactivity-advanced.html#shallowref) to the value — use `.value` in `<script setup>` (templates unwrap refs automatically).
+
+Composables must run **inside** a `Provider` subtree. Put `useAtomValue` / `useAtom` in a child component (or a nested route), not in the same component that renders `Provider` without passing the store through a wrapper.
+
+`atoms.ts` — lift the atom definitions from the Quick Start into a shared module:
+
+```ts
+import { atom } from "@kdeveloper/kvark";
+
+export const userIdAtom = atom({
+  debugLabel: "userId",
+  get: async () => 1,
+  set: async () => {},
+});
+
+export const userAtom = atom({
+  debugLabel: "user",
+  dependencies: { userId: userIdAtom },
+  get: async (ctx) => {
+    const id = await ctx.get("userId");
+    const res = await fetch(`/api/users/${id}`, { signal: ctx.signal });
+    return res.json();
+  },
+});
+```
+
+`UserCard.vue`
+
+```vue
+<script setup lang="ts">
+import { useAtomValue } from "@kdeveloper/kvark/vue";
+import { userAtom } from "./atoms";
+
+const user = useAtomValue(userAtom);
+</script>
+
+<template>
+  <div>{{ user.name }}</div>
+</template>
+```
+
+`App.vue`
+
+```vue
+<script setup lang="ts">
+import { createStore } from "@kdeveloper/kvark";
+import { Provider } from "@kdeveloper/kvark/vue";
+import UserCard from "./UserCard.vue";
+
+const store = createStore();
+</script>
+
+<template>
+  <Provider :store="store">
+    <UserCard />
+  </Provider>
+</template>
+```
+
+Unlike React’s `Suspense` around `useAtomValue`, Vue’s `<Suspense>` only activates for **async** child components. To show a fallback until the first `get` completes, use **`async setup`**, `useStore()`, `useAtomValue(atom)`, then **`await store.resolve(atom)`**, and wrap that child in `<Suspense>` — see [Suspense (Vue 3)](#suspense-vue-3).
+
 ## Core Concepts
 
 ### Atoms
@@ -174,7 +237,7 @@ Both can update an atom's cached value, but they serve different purposes:
 
 ### `onMount`
 
-Optional lifecycle hook that runs when the atom **first gains a subscriber** in a store (for example when a React component using `useAtomValue` mounts). It receives a synchronous `set(value)` that marks the atom `fresh` and notifies listeners — useful for timers, subscriptions, or imperative updates that should not go through `get`.
+Optional lifecycle hook that runs when the atom **first gains a subscriber** in a store (for example when a component using `useAtomValue` mounts). It receives a synchronous `set(value)` that marks the atom `fresh` and notifies listeners — useful for timers, subscriptions, or imperative updates that should not go through `get`.
 
 You may return a cleanup function; it runs when the **last** subscriber unsubscribes (for example when the last mounted consumer unmounts). If several components subscribe to the same atom, `onMount` runs once and the cleanup runs once after all of them unsubscribe.
 
@@ -300,10 +363,14 @@ A built-in helper that serialises plain objects and arrays into a deterministic
 - Not supported: class instances (other than plain `Object`/`Array`), `Map`, `Set`, `Symbol`, functions, circular references.
 - Memoises by object reference via a `WeakMap` — repeated calls with the **same object reference** are O(1). Treat param objects as **immutable** after the first call; mutating an object after it has been memoised will silently return the stale key.
 
-## React Hooks
+## React (`@kdeveloper/kvark/react`)
 
 All hooks must be used inside a `<Provider>`.
 
+### `useStore`
+
+Returns the `Store` instance from context — for advanced cases (e.g. calling `store.resolve` in async setup patterns) or when you need the store outside atom helpers.
+
 ### `useAtomValue`
 
 Reads an atom value and subscribes to updates. Suspends on first load.
@@ -346,9 +413,77 @@ const readBalance = useAtomContext(async (client) => {
 const balance = await readBalance();
 ```
 
+## Vue 3 (`@kdeveloper/kvark/vue`)
+
+Same composable names and behaviour as React: `Provider`, `useStore`, `useAtomValue`, `useSetAtom`, `useAtom`, `useAtomContext`. Wrap your app (or subtree) with `Provider` and pass `:store="store"`.
+
+`useAtomValue` / `useAtom` expose values as **shallow refs** — in script code use `.value`; in templates Vue unwraps refs for you.
+
+### Suspense (Vue 3)
+
+Vue’s `<Suspense>` boundary applies to **async** components (e.g. **`async setup`** or [top-level `await` in `<script setup>`](https://vuejs.org/guide/built-ins/suspense.html#async-setup)), not to composables alone. To get a loading fallback until the first `get` finishes, the child that uses `useAtomValue` should **`await store.resolve(atom)`** after subscribing, and be wrapped in `<Suspense>`.
+
+`atoms.ts`
+
+```ts
+import { atom } from "@kdeveloper/kvark";
+
+export const slowAtom = atom({
+  get: async () => {
+    await new Promise((r) => setTimeout(r, 50));
+    return "ready";
+  },
+});
+```
+
+`AsyncRead.vue` (under `Provider`; top-level `await` makes this component async for Suspense)
+
+```vue
+<script setup lang="ts">
+import { useAtomValue, useStore } from "@kdeveloper/kvark/vue";
+import { slowAtom } from "./atoms";
+
+const store = useStore();
+const value = useAtomValue(slowAtom);
+await store.resolve(slowAtom);
+</script>
+
+<template>
+  <div>{{ value }}</div>
+</template>
+```
+
+`App.vue`
+
+```vue
+<script setup lang="ts">
+import { Suspense } from "vue";
+import { createStore } from "@kdeveloper/kvark";
+import { Provider } from "@kdeveloper/kvark/vue";
+import AsyncRead from "./AsyncRead.vue";
+
+const store = createStore();
+</script>
+
+<template>
+  <Provider :store="store">
+    <Suspense>
+      <template #default>
+        <AsyncRead />
+      </template>
+      <template #fallback>
+        <div>Loading…</div>
+      </template>
+    </Suspense>
+  </Provider>
+</template>
+```
+
+Alternatively, use **`defineComponent({ async setup() { ... } })`** and `await store.resolve(slowAtom)` before returning the render function — the same pattern as in `test/vue/hooks.test.ts`.
+
 ## External Invalidation
 
-`StoreClient` exposes the store's full capabilities outside of React — useful for WebSocket handlers, SSE streams, polling timers, and Service Workers.
+`StoreClient` exposes the store's full capabilities outside your component tree — useful for WebSocket handlers, SSE streams, polling timers, and Service Workers.
 
 ```ts
 import { createStore } from "@kdeveloper/kvark";
@@ -377,7 +512,7 @@ sse.addEventListener("prices.updated", () => {
 // Polling
 setInterval(() => client.invalidate(statusAtom), 30_000);
 
-// Subscribe to state changes outside React
+// Subscribe to state changes outside components
 const unsub = client.subscribe(userAtom, (state) => {
   if (state.status === "fresh") {
     analytics.identify(state.value.id);
@@ -424,6 +559,8 @@ interface StoreClient {
 
 ## Provider and Store Setup
 
+**React**
+
 ```tsx
 // store.ts
 import { createStore } from "@kdeveloper/kvark";
@@ -442,6 +579,23 @@ export function App() {
 }
 ```
 
+**Vue 3**
+
+```vue
+<script setup lang="ts">
+import { createStore } from "@kdeveloper/kvark";
+import { Provider } from "@kdeveloper/kvark/vue";
+
+const store = createStore();
+</script>
+
+<template>
+  <Provider :store="store">
+    <RouterView />
+  </Provider>
+</template>
+```
+
 ## Utility Types
 
 ```ts
@@ -454,19 +608,21 @@ type Writable = IsWritable<typeof countAtom>; // → true | false
 
 ## Package Structure
 
-| Import                     | Contents                                                              |
-| -------------------------- | --------------------------------------------------------------------- |
-| `@kdeveloper/kvark`        | `atom`, `createStore`, all types                                      |
-| `@kdeveloper/kvark/react`  | `Provider`, `useAtomValue`, `useSetAtom`, `useAtom`, `useAtomContext` |
-| `@kdeveloper/kvark/family` | `atomFamily`                                                          |
+| Import                     | Contents                                                                                    |
+| -------------------------- | ------------------------------------------------------------------------------------------- |
+| `@kdeveloper/kvark`        | `atom`, `createStore`, all types                                                            |
+| `@kdeveloper/kvark/react`  | `Provider`, `useStore`, `useAtomValue`, `useSetAtom`, `useAtom`, `useAtomContext`           |
+| `@kdeveloper/kvark/vue`    | `Provider`, `useStore`, `useAtomValue`, `useSetAtom`, `useAtom`, `useAtomContext`           |
+| `@kdeveloper/kvark/family` | `atomFamily`, `stableFamilyKey`, re-exports `atom` / `createStore` and core types           |
 
-The core (`@kdeveloper/kvark`) has **zero runtime dependencies**. React is a peer dependency only needed when using the `/react` subpath.
+The core (`@kdeveloper/kvark`) has **zero runtime dependencies**. **React** and **Vue** are optional peer dependencies — install the framework you use and import from `/react` or `/vue`.
 
 ## Requirements
 
 - **Node.js** ≥ 20
 - **TypeScript** ≥ 6 (strict mode recommended)
-- **React** ≥ 18 (for `@kdeveloper/kvark/react`)
+- **React** ≥ 18 (optional peer, for `@kdeveloper/kvark/react`)
+- **Vue** ≥ 3.4 (optional peer, for `@kdeveloper/kvark/vue`)
 
 ## License
 

package/dist/vue/index.d.mts

@@ -0,0 +1,42 @@
+import { f as WritableAtom, i as Atom, n as StoreClient, t as Store } from "../store-DQL8VJhU.mjs";
+import * as _$vue from "vue";
+import { PropType, ShallowRef } from "vue";
+
+//#region src/vue/provider.d.ts
+declare const Provider: _$vue.DefineComponent<_$vue.ExtractPropTypes<{
+  store: {
+    type: PropType<Store>;
+    required: true;
+  };
+}>, () => _$vue.VNode<_$vue.RendererNode, _$vue.RendererElement, {
+  [key: string]: any;
+}>[] | undefined, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, _$vue.PublicProps, Readonly<_$vue.ExtractPropTypes<{
+  store: {
+    type: PropType<Store>;
+    required: true;
+  };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, _$vue.ComponentProvideOptions, true, {}, any>;
+declare function useStore(): Store;
+//#endregion
+//#region src/vue/use-atom-value.d.ts
+type ObservedValue<V> = {
+  value: V;
+  isStale: boolean;
+  error: unknown;
+};
+declare function useAtomValue<V>(atom: Atom<V>): Readonly<ShallowRef<V>>;
+declare function useAtomValue<V>(atom: Atom<V>, opts: {
+  observe: true;
+}): Readonly<ShallowRef<ObservedValue<V>>>;
+//#endregion
+//#region src/vue/use-set-atom.d.ts
+declare function useSetAtom<V, A extends readonly unknown[]>(atom: WritableAtom<V, A>): (...args: A) => Promise<void>;
+//#endregion
+//#region src/vue/use-atom.d.ts
+declare function useAtom<V, A extends readonly unknown[]>(atom: WritableAtom<V, A>): readonly [Readonly<ShallowRef<V>>, (...args: A) => Promise<void>];
+//#endregion
+//#region src/vue/use-atom-context.d.ts
+declare function useAtomContext<R>(callback: (ctx: StoreClient) => Promise<R>): () => Promise<R>;
+//#endregion
+export { Provider, useAtom, useAtomContext, useAtomValue, useSetAtom, useStore };
+//# sourceMappingURL=index.d.mts.map

package/dist/vue/index.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.mts","names":[],"sources":["../../src/vue/provider.ts","../../src/vue/use-atom-value.ts","../../src/vue/use-set-atom.ts","../../src/vue/use-atom.ts","../../src/vue/use-atom-context.ts"],"mappings":";;;;;cAWa,QAAA,QAAQ,eAAA,CAGgB,KAAA,CAHhB,gBAAA;;UAGQ,QAAA,CAAS,KAAA;;;sBAHjB,KAAA,CAAA,YAAA;;gIAGgB,KAAA,CAAA,gBAAA;;UAAR,QAAA,CAAS,KAAA;;;;iBAQtB,QAAA,CAAA,GAAY,KAAA;;;KClBvB,aAAA;EACH,KAAA,EAAO,CAAA;EACP,OAAA;EACA,KAAA;AAAA;AAAA,iBAGc,YAAA,GAAA,CAAgB,IAAA,EAAM,IAAA,CAAK,CAAA,IAAK,QAAA,CAAS,UAAA,CAAW,CAAA;AAAA,iBACpD,YAAA,GAAA,CACd,IAAA,EAAM,IAAA,CAAK,CAAA,GACX,IAAA;EAAQ,OAAA;AAAA,IACP,QAAA,CAAS,UAAA,CAAW,aAAA,CAAc,CAAA;;;iBCXrB,UAAA,iCAAA,CACd,IAAA,EAAM,YAAA,CAAa,CAAA,EAAG,CAAA,QACjB,IAAA,EAAM,CAAA,KAAM,OAAA;;;iBCAH,OAAA,iCAAA,CACd,IAAA,EAAM,YAAA,CAAa,CAAA,EAAG,CAAA,cACX,QAAA,CAAS,UAAA,CAAW,CAAA,QAAS,IAAA,EAAM,CAAA,KAAM,OAAA;;;iBCJtC,cAAA,GAAA,CAAkB,QAAA,GAAW,GAAA,EAAK,WAAA,KAAgB,OAAA,CAAQ,CAAA,UAAW,OAAA,CAAQ,CAAA"}

package/dist/vue/index.mjs

@@ -0,0 +1,86 @@
+import { defineComponent, inject, provide, readonly, shallowRef, watchEffect } from "vue";
+//#region src/vue/provider.ts
+const StoreKey = Symbol("kvark-store");
+const Provider = defineComponent({
+	name: "KvarkProvider",
+	props: { store: {
+		type: Object,
+		required: true
+	} },
+	setup(props, { slots }) {
+		provide(StoreKey, props.store);
+		return () => slots["default"]?.();
+	}
+});
+function useStore() {
+	const store = inject(StoreKey);
+	if (store == null) throw new Error("useStore must be used within a <Provider>");
+	return store;
+}
+//#endregion
+//#region src/vue/use-atom-value.ts
+function useAtomValue(atom, opts) {
+	const store = useStore();
+	function derive(snapshot) {
+		if (snapshot.status === "pending") {
+			store.resolve(atom);
+			if (opts?.observe === true) return {
+				value: void 0,
+				isStale: false,
+				error: void 0
+			};
+			return;
+		}
+		if (snapshot.status === "stale") {
+			store.resolve(atom);
+			if (opts?.observe === true) return {
+				value: snapshot.value,
+				isStale: true,
+				error: void 0
+			};
+			return snapshot.value;
+		}
+		if (snapshot.status === "error") {
+			if (opts?.observe === true && snapshot.value !== void 0) return {
+				value: snapshot.value,
+				isStale: false,
+				error: snapshot.error
+			};
+			throw snapshot.error;
+		}
+		if (opts?.observe === true) return {
+			value: snapshot.value,
+			isStale: false,
+			error: void 0
+		};
+		return snapshot.value;
+	}
+	const result = shallowRef(derive(store.getSnapshot(atom)));
+	watchEffect((onCleanup) => {
+		onCleanup(store.subscribe(atom, () => {
+			result.value = derive(store.getSnapshot(atom));
+		}));
+	});
+	return readonly(result);
+}
+//#endregion
+//#region src/vue/use-set-atom.ts
+function useSetAtom(atom) {
+	const store = useStore();
+	return (...args) => store.set(atom, ...args);
+}
+//#endregion
+//#region src/vue/use-atom.ts
+function useAtom(atom) {
+	return [useAtomValue(atom), useSetAtom(atom)];
+}
+//#endregion
+//#region src/vue/use-atom-context.ts
+function useAtomContext(callback) {
+	const store = useStore();
+	return () => callback(store.getClient());
+}
+//#endregion
+export { Provider, useAtom, useAtomContext, useAtomValue, useSetAtom, useStore };
+
+//# sourceMappingURL=index.mjs.map

package/dist/vue/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":[],"sources":["../../src/vue/provider.ts","../../src/vue/use-atom-value.ts","../../src/vue/use-set-atom.ts","../../src/vue/use-atom.ts","../../src/vue/use-atom-context.ts"],"sourcesContent":["import {\n  type InjectionKey,\n  type PropType,\n  defineComponent,\n  inject,\n  provide,\n} from \"vue\";\nimport { Store } from \"@/internal/store.js\";\n\nconst StoreKey: InjectionKey<Store> = Symbol(\"kvark-store\");\n\nexport const Provider = defineComponent({\n  name: \"KvarkProvider\",\n  props: {\n    store: { type: Object as PropType<Store>, required: true },\n  },\n  setup(props, { slots }) {\n    provide(StoreKey, props.store);\n    return () => slots[\"default\"]?.();\n  },\n});\n\nexport function useStore(): Store {\n  const store = inject(StoreKey);\n  if (store == null) {\n    throw new Error(\"useStore must be used within a <Provider>\");\n  }\n  return store;\n}\n","import { type ShallowRef, readonly, shallowRef, watchEffect } from \"vue\";\nimport type { Atom, AtomState } from \"@/internal/types.js\";\nimport { useStore } from \"@/vue/provider.js\";\n\ntype ObservedValue<V> = {\n  value: V;\n  isStale: boolean;\n  error: unknown;\n};\n\nexport function useAtomValue<V>(atom: Atom<V>): Readonly<ShallowRef<V>>;\nexport function useAtomValue<V>(\n  atom: Atom<V>,\n  opts: { observe: true },\n): Readonly<ShallowRef<ObservedValue<V>>>;\nexport function useAtomValue<V>(\n  atom: Atom<V>,\n  opts?: { observe: true },\n): Readonly<ShallowRef<V | ObservedValue<V>>> {\n  const store = useStore();\n\n  function derive(snapshot: AtomState<V>): V | ObservedValue<V> {\n    if (snapshot.status === \"pending\") {\n      void store.resolve(atom);\n      if (opts?.observe === true) {\n        return { value: undefined as V, isStale: false, error: undefined };\n      }\n      return undefined as V;\n    }\n\n    if (snapshot.status === \"stale\") {\n      void store.resolve(atom);\n      if (opts?.observe === true) {\n        return { value: snapshot.value, isStale: true, error: undefined };\n      }\n      return snapshot.value;\n    }\n\n    if (snapshot.status === \"error\") {\n      if (opts?.observe === true && snapshot.value !== undefined) {\n        return { value: snapshot.value as V, isStale: false, error: snapshot.error };\n      }\n      throw snapshot.error;\n    }\n\n    // status === \"fresh\"\n    if (opts?.observe === true) {\n      return { value: snapshot.value, isStale: false, error: undefined };\n    }\n    return snapshot.value;\n  }\n\n  const result = shallowRef(derive(store.getSnapshot(atom)));\n\n  watchEffect((onCleanup) => {\n    const unsub = store.subscribe(atom, () => {\n      result.value = derive(store.getSnapshot(atom));\n    });\n    onCleanup(unsub);\n  });\n\n  return readonly(result) as Readonly<ShallowRef<V | ObservedValue<V>>>;\n}\n","import type { WritableAtom } from \"@/internal/types.js\";\nimport { useStore } from \"@/vue/provider.js\";\n\nexport function useSetAtom<V, A extends readonly unknown[]>(\n  atom: WritableAtom<V, A>,\n): (...args: A) => Promise<void> {\n  const store = useStore();\n  return (...args: A): Promise<void> => store.set(atom, ...args);\n}\n","import type { ShallowRef } from \"vue\";\nimport type { WritableAtom } from \"@/internal/types.js\";\nimport { useAtomValue } from \"@/vue/use-atom-value.js\";\nimport { useSetAtom } from \"@/vue/use-set-atom.js\";\n\nexport function useAtom<V, A extends readonly unknown[]>(\n  atom: WritableAtom<V, A>,\n): readonly [Readonly<ShallowRef<V>>, (...args: A) => Promise<void>] {\n  const value = useAtomValue(atom);\n  const setter = useSetAtom(atom);\n  return [value, setter] as const;\n}\n","import type { StoreClient } from \"@/internal/store.js\";\nimport { useStore } from \"@/vue/provider.js\";\n\nexport function useAtomContext<R>(callback: (ctx: StoreClient) => Promise<R>): () => Promise<R> {\n  const store = useStore();\n  return (): Promise<R> => callback(store.getClient());\n}\n"],"mappings":";;AASA,MAAM,WAAgC,OAAO,cAAc;AAE3D,MAAa,WAAW,gBAAgB;CACtC,MAAM;CACN,OAAO,EACL,OAAO;EAAE,MAAM;EAA2B,UAAU;EAAM,EAC3D;CACD,MAAM,OAAO,EAAE,SAAS;AACtB,UAAQ,UAAU,MAAM,MAAM;AAC9B,eAAa,MAAM,cAAc;;CAEpC,CAAC;AAEF,SAAgB,WAAkB;CAChC,MAAM,QAAQ,OAAO,SAAS;AAC9B,KAAI,SAAS,KACX,OAAM,IAAI,MAAM,4CAA4C;AAE9D,QAAO;;;;ACZT,SAAgB,aACd,MACA,MAC4C;CAC5C,MAAM,QAAQ,UAAU;CAExB,SAAS,OAAO,UAA8C;AAC5D,MAAI,SAAS,WAAW,WAAW;AAC5B,SAAM,QAAQ,KAAK;AACxB,OAAI,MAAM,YAAY,KACpB,QAAO;IAAE,OAAO,KAAA;IAAgB,SAAS;IAAO,OAAO,KAAA;IAAW;AAEpE;;AAGF,MAAI,SAAS,WAAW,SAAS;AAC1B,SAAM,QAAQ,KAAK;AACxB,OAAI,MAAM,YAAY,KACpB,QAAO;IAAE,OAAO,SAAS;IAAO,SAAS;IAAM,OAAO,KAAA;IAAW;AAEnE,UAAO,SAAS;;AAGlB,MAAI,SAAS,WAAW,SAAS;AAC/B,OAAI,MAAM,YAAY,QAAQ,SAAS,UAAU,KAAA,EAC/C,QAAO;IAAE,OAAO,SAAS;IAAY,SAAS;IAAO,OAAO,SAAS;IAAO;AAE9E,SAAM,SAAS;;AAIjB,MAAI,MAAM,YAAY,KACpB,QAAO;GAAE,OAAO,SAAS;GAAO,SAAS;GAAO,OAAO,KAAA;GAAW;AAEpE,SAAO,SAAS;;CAGlB,MAAM,SAAS,WAAW,OAAO,MAAM,YAAY,KAAK,CAAC,CAAC;AAE1D,cAAa,cAAc;AAIzB,YAHc,MAAM,UAAU,YAAY;AACxC,UAAO,QAAQ,OAAO,MAAM,YAAY,KAAK,CAAC;IAC9C,CACc;GAChB;AAEF,QAAO,SAAS,OAAO;;;;AC1DzB,SAAgB,WACd,MAC+B;CAC/B,MAAM,QAAQ,UAAU;AACxB,SAAQ,GAAG,SAA2B,MAAM,IAAI,MAAM,GAAG,KAAK;;;;ACFhE,SAAgB,QACd,MACmE;AAGnE,QAAO,CAFO,aAAa,KAAK,EACjB,WAAW,KAAK,CACT;;;;ACPxB,SAAgB,eAAkB,UAA8D;CAC9F,MAAM,QAAQ,UAAU;AACxB,cAAyB,SAAS,MAAM,WAAW,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kdeveloper/kvark",
-  "version": "0.5.3",
+  "version": "0.6.1",
   "description": "Atomic state management with explicit dependency graphs",
   "license": "MIT",
   "files": [
@@ -19,6 +19,10 @@
       "types": "./dist/react/index.d.mts",
       "import": "./dist/react/index.mjs"
     },
+    "./vue": {
+      "types": "./dist/vue/index.d.mts",
+      "import": "./dist/vue/index.mjs"
+    },
     "./family": {
       "types": "./dist/family.d.mts",
       "import": "./dist/family.mjs"
@@ -29,6 +33,7 @@
     "@testing-library/react": "^16.3.2",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
+    "@vue/test-utils": "^2.4.6",
     "jsdom": "^29.0.1",
     "oxfmt": "^0.42.0",
     "oxlint": "^1.57.0",
@@ -36,10 +41,20 @@
     "react-dom": "^19.2.4",
     "tsdown": "^0.21.6",
     "typescript": "^6.0.2",
-    "vitest": "^4.1.2"
+    "vitest": "^4.1.2",
+    "vue": "^3.5.31"
   },
   "peerDependencies": {
-    "react": ">=18"
+    "react": ">=18",
+    "vue": ">=3.4"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "vue": {
+      "optional": true
+    }
   },
   "engines": {
     "node": ">=20"