seitu 0.15.1 → 0.16.0

package/dist/solid.d.mts

@@ -0,0 +1,170 @@
+import { _ as Readable, v as Subscribable } from "./index-DwN8Up-P.mjs";
+import { Accessor, JSX } from "solid-js";
+
+//#region src/solid/hooks.d.ts
+interface UseSubscriptionOptions<S extends Subscribable<any> & Readable<any>, R = S['~']['output']> {
+  selector?: (value: S['~']['output']) => R;
+  isEqual?: (prev: R, next: R) => boolean;
+}
+/**
+ * Use this primitive to subscribe to a reactive value. Accepts a subscription object
+ * directly, or an accessor/getter that returns one. The getter is reactive — when it
+ * reads a signal, the subscription is recreated and re-subscribed automatically.
+ *
+ * Returns a Solid `Accessor<R>`: call it (`value()`) to read the current value inside JSX
+ * or another reactive scope.
+ *
+ * @example Inline subscription
+ * ```tsx
+ * import { createWebStorageValue } from 'seitu/web'
+ * import { useSubscription } from 'seitu/solid'
+ * import * as z from 'zod'
+ *
+ * function Counter() {
+ *   const value = useSubscription(() => createWebStorageValue({
+ *     type: 'sessionStorage',
+ *     key: 'test',
+ *     defaultValue: 0,
+ *     schema: z.number(),
+ *   }))
+ *
+ *   return <div>{value()}</div>
+ * }
+ * ```
+ *
+ * @example Instance outside of component
+ * ```tsx
+ * import { createWebStorage } from 'seitu/web'
+ * import { useSubscription } from 'seitu/solid'
+ * import * as z from 'zod'
+ *
+ * const sessionStorage = createWebStorage({
+ *   type: 'sessionStorage',
+ *   schemas: { count: z.number(), name: z.string() },
+ *   defaultValues: { count: 0, name: '' },
+ * })
+ *
+ * function Counter() {
+ *   const value = useSubscription(sessionStorage)
+ *   return <div>{value().count}</div>
+ * }
+ * ```
+ *
+ * @example Subscription with selector
+ * ```tsx
+ * import { createWebStorage } from 'seitu/web'
+ * import { useSubscription } from 'seitu/solid'
+ * import * as z from 'zod'
+ *
+ * const sessionStorage = createWebStorage({
+ *   type: 'sessionStorage',
+ *   schemas: {
+ *     count: z.number(),
+ *     name: z.string(),
+ *   },
+ *   defaultValues: { count: 0, name: '' },
+ * })
+ *
+ * function Counter() {
+ *   // Usage with selector, the accessor only updates when count changes
+ *   const count = useSubscription(sessionStorage, { selector: value => value.count })
+ *
+ *   return <div>{count()}</div>
+ * }
+ * ```
+ *
+ * @example Reactive source (re-subscribes when a signal changes)
+ * ```tsx
+ * import { createSignal } from 'solid-js'
+ * import { createWebStorageValue } from 'seitu/web'
+ * import { useSubscription } from 'seitu/solid'
+ * import * as z from 'zod'
+ *
+ * function User() {
+ *   const [userId, setUserId] = createSignal('user-1')
+ *   const data = useSubscription(() => createWebStorageValue({
+ *     type: 'localStorage',
+ *     key: `user:${userId()}`,
+ *     schema: z.object({ name: z.string() }),
+ *     defaultValue: { name: '' },
+ *   }))
+ *
+ *   return <div>{data().name}</div>
+ * }
+ * ```
+ *
+ * @example Ref example
+ * ```tsx
+ * import { createScrollState } from 'seitu/web'
+ * import { useSubscription } from 'seitu/solid'
+ *
+ * function Page() {
+ *   let ref: HTMLDivElement | undefined
+ *   const state = useSubscription(() => createScrollState({ element: () => ref, direction: 'vertical' }))
+ *
+ *   return (
+ *     <div ref={ref}>
+ *       {String(state().top.reached)}
+ *     </div>
+ *   )
+ * }
+ * ```
+ */
+declare function useSubscription<S extends Subscribable<any> & Readable<any>, R = S['~']['output']>(source: S | Accessor<S>, options?: UseSubscriptionOptions<S, R>): Accessor<R>;
+//#endregion
+//#region src/solid/components.d.ts
+interface SubscriptionProps<S extends Subscribable<any> & Readable<any>, R = S['~']['output']> extends Pick<UseSubscriptionOptions<S, R>, 'selector'> {
+  value: S;
+  children: (value: Accessor<R>) => JSX.Element;
+}
+/**
+ * Declarative component that subscribes to a reactive value and passes an accessor to a render function.
+ * Unlike React, the children function runs once and receives a Solid `Accessor<R>` — call it (`value()`)
+ * inside the returned JSX so updates stay fine-grained. Use when you prefer a component API over the
+ * useSubscription primitive.
+ *
+ * @example Basic usage
+ * ```tsx
+ * import { createWebStorage } from 'seitu/web'
+ * import { Subscription } from 'seitu/solid'
+ * import * as z from 'zod'
+ *
+ * const sessionStorage = createWebStorage({
+ *   type: 'sessionStorage',
+ *   schemas: { count: z.number(), name: z.string() },
+ *   defaultValues: { count: 0, name: '' },
+ * })
+ *
+ * function Page() {
+ *   return (
+ *     <Subscription value={sessionStorage}>
+ *       {value => <div>{value().count}</div>}
+ *     </Subscription>
+ *   )
+ * }
+ * ```
+ *
+ * @example With selector
+ * ```tsx
+ * import { createWebStorage } from 'seitu/web'
+ * import { Subscription } from 'seitu/solid'
+ * import * as z from 'zod'
+ *
+ * const sessionStorage = createWebStorage({
+ *   type: 'sessionStorage',
+ *   schemas: { count: z.number(), name: z.string() },
+ *   defaultValues: { count: 0, name: '' },
+ * })
+ *
+ * function Page() {
+ *   return (
+ *     <Subscription value={sessionStorage} selector={v => v.count}>
+ *       {count => <div>{count()}</div>}
+ *     </Subscription>
+ *   )
+ * }
+ * ```
+ */
+declare function Subscription<S extends Subscribable<any> & Readable<any>, R = S['~']['output']>(props: SubscriptionProps<S, R>): JSX.Element;
+//#endregion
+export { Subscription, SubscriptionProps, UseSubscriptionOptions, useSubscription };

package/dist/solid.mjs

@@ -0,0 +1,180 @@
+import { deepEqual } from "fast-equals";
+import { createEffect, createMemo, createSignal, onCleanup } from "solid-js";
+//#region src/solid/hooks.ts
+/**
+* Use this primitive to subscribe to a reactive value. Accepts a subscription object
+* directly, or an accessor/getter that returns one. The getter is reactive — when it
+* reads a signal, the subscription is recreated and re-subscribed automatically.
+*
+* Returns a Solid `Accessor<R>`: call it (`value()`) to read the current value inside JSX
+* or another reactive scope.
+*
+* @example Inline subscription
+* ```tsx
+* import { createWebStorageValue } from 'seitu/web'
+* import { useSubscription } from 'seitu/solid'
+* import * as z from 'zod'
+*
+* function Counter() {
+*   const value = useSubscription(() => createWebStorageValue({
+*     type: 'sessionStorage',
+*     key: 'test',
+*     defaultValue: 0,
+*     schema: z.number(),
+*   }))
+*
+*   return <div>{value()}</div>
+* }
+* ```
+*
+* @example Instance outside of component
+* ```tsx
+* import { createWebStorage } from 'seitu/web'
+* import { useSubscription } from 'seitu/solid'
+* import * as z from 'zod'
+*
+* const sessionStorage = createWebStorage({
+*   type: 'sessionStorage',
+*   schemas: { count: z.number(), name: z.string() },
+*   defaultValues: { count: 0, name: '' },
+* })
+*
+* function Counter() {
+*   const value = useSubscription(sessionStorage)
+*   return <div>{value().count}</div>
+* }
+* ```
+*
+* @example Subscription with selector
+* ```tsx
+* import { createWebStorage } from 'seitu/web'
+* import { useSubscription } from 'seitu/solid'
+* import * as z from 'zod'
+*
+* const sessionStorage = createWebStorage({
+*   type: 'sessionStorage',
+*   schemas: {
+*     count: z.number(),
+*     name: z.string(),
+*   },
+*   defaultValues: { count: 0, name: '' },
+* })
+*
+* function Counter() {
+*   // Usage with selector, the accessor only updates when count changes
+*   const count = useSubscription(sessionStorage, { selector: value => value.count })
+*
+*   return <div>{count()}</div>
+* }
+* ```
+*
+* @example Reactive source (re-subscribes when a signal changes)
+* ```tsx
+* import { createSignal } from 'solid-js'
+* import { createWebStorageValue } from 'seitu/web'
+* import { useSubscription } from 'seitu/solid'
+* import * as z from 'zod'
+*
+* function User() {
+*   const [userId, setUserId] = createSignal('user-1')
+*   const data = useSubscription(() => createWebStorageValue({
+*     type: 'localStorage',
+*     key: `user:${userId()}`,
+*     schema: z.object({ name: z.string() }),
+*     defaultValue: { name: '' },
+*   }))
+*
+*   return <div>{data().name}</div>
+* }
+* ```
+*
+* @example Ref example
+* ```tsx
+* import { createScrollState } from 'seitu/web'
+* import { useSubscription } from 'seitu/solid'
+*
+* function Page() {
+*   let ref: HTMLDivElement | undefined
+*   const state = useSubscription(() => createScrollState({ element: () => ref, direction: 'vertical' }))
+*
+*   return (
+*     <div ref={ref}>
+*       {String(state().top.reached)}
+*     </div>
+*   )
+* }
+* ```
+*/
+function useSubscription(source, options) {
+	const { selector, isEqual = deepEqual } = options ?? {};
+	const getSource = typeof source === "function" ? source : () => source;
+	function getSnapshot(sub) {
+		return selector ? selector(sub.get()) : sub.get();
+	}
+	const sub = createMemo(() => getSource());
+	const [state, setState] = createSignal(getSnapshot(sub()), { equals: isEqual });
+	createEffect(() => {
+		const current = sub();
+		setState(() => getSnapshot(current));
+		onCleanup(current.subscribe(() => {
+			setState(() => getSnapshot(current));
+		}));
+	});
+	return state;
+}
+//#endregion
+//#region src/solid/components.ts
+/**
+* Declarative component that subscribes to a reactive value and passes an accessor to a render function.
+* Unlike React, the children function runs once and receives a Solid `Accessor<R>` — call it (`value()`)
+* inside the returned JSX so updates stay fine-grained. Use when you prefer a component API over the
+* useSubscription primitive.
+*
+* @example Basic usage
+* ```tsx
+* import { createWebStorage } from 'seitu/web'
+* import { Subscription } from 'seitu/solid'
+* import * as z from 'zod'
+*
+* const sessionStorage = createWebStorage({
+*   type: 'sessionStorage',
+*   schemas: { count: z.number(), name: z.string() },
+*   defaultValues: { count: 0, name: '' },
+* })
+*
+* function Page() {
+*   return (
+*     <Subscription value={sessionStorage}>
+*       {value => <div>{value().count}</div>}
+*     </Subscription>
+*   )
+* }
+* ```
+*
+* @example With selector
+* ```tsx
+* import { createWebStorage } from 'seitu/web'
+* import { Subscription } from 'seitu/solid'
+* import * as z from 'zod'
+*
+* const sessionStorage = createWebStorage({
+*   type: 'sessionStorage',
+*   schemas: { count: z.number(), name: z.string() },
+*   defaultValues: { count: 0, name: '' },
+* })
+*
+* function Page() {
+*   return (
+*     <Subscription value={sessionStorage} selector={v => v.count}>
+*       {count => <div>{count()}</div>}
+*     </Subscription>
+*   )
+* }
+* ```
+*/
+function Subscription(props) {
+	const value = useSubscription(() => props.value, { selector: props.selector });
+	return props.children(value);
+}
+//#endregion
+export { Subscription, useSubscription };

package/dist/svelte.d.mts

@@ -0,0 +1,77 @@
+import { _ as Readable$1, v as Subscribable } from "./index-DwN8Up-P.mjs";
+import { Readable } from "svelte/store";
+
+//#region src/svelte/hooks.d.ts
+interface UseSubscriptionOptions<S extends Subscribable<any> & Readable$1<any>, R = S['~']['output']> {
+  selector?: (value: S['~']['output']) => R;
+  isEqual?: (prev: R, next: R) => boolean;
+}
+/**
+ * Use this function to subscribe to a reactive value from a Svelte component.
+ * Accepts a subscription object directly, or a factory function that is called
+ * once to create one.
+ *
+ * Returns a Svelte `Readable` store — read it with the `$` auto-subscription
+ * (`$value`) in markup. The underlying subscription is created lazily on the
+ * first subscriber and torn down when the last one leaves.
+ *
+ * @example Inline subscription
+ * ```svelte
+ * <script lang="ts">
+ *   import { createWebStorageValue } from 'seitu/web'
+ *   import { useSubscription } from 'seitu/svelte'
+ *   import * as z from 'zod'
+ *
+ *   const value = useSubscription(() => createWebStorageValue({
+ *     type: 'sessionStorage',
+ *     key: 'test',
+ *     defaultValue: 0,
+ *     schema: z.number(),
+ *   }))
+ * </script>
+ *
+ * <div>{$value}</div>
+ * ```
+ *
+ * @example Instance outside of component
+ * ```svelte
+ * <script lang="ts">
+ *   import { createWebStorage } from 'seitu/web'
+ *   import { useSubscription } from 'seitu/svelte'
+ *   import * as z from 'zod'
+ *
+ *   const sessionStorage = createWebStorage({
+ *     type: 'sessionStorage',
+ *     schemas: { count: z.number(), name: z.string() },
+ *     defaultValues: { count: 0, name: '' },
+ *   })
+ *
+ *   const value = useSubscription(sessionStorage)
+ * </script>
+ *
+ * <div>{$value.count}</div>
+ * ```
+ *
+ * @example With selector
+ * ```svelte
+ * <script lang="ts">
+ *   import { createWebStorage } from 'seitu/web'
+ *   import { useSubscription } from 'seitu/svelte'
+ *   import * as z from 'zod'
+ *
+ *   const sessionStorage = createWebStorage({
+ *     type: 'sessionStorage',
+ *     schemas: { count: z.number(), name: z.string() },
+ *     defaultValues: { count: 0, name: '' },
+ *   })
+ *
+ *   // Updates only when count changes
+ *   const count = useSubscription(sessionStorage, { selector: v => v.count })
+ * </script>
+ *
+ * <div>{$count}</div>
+ * ```
+ */
+declare function useSubscription<S extends Subscribable<any> & Readable$1<any>, R = S['~']['output']>(source: S | (() => S), options?: UseSubscriptionOptions<S, R>): Readable<R>;
+//#endregion
+export { UseSubscriptionOptions, useSubscription };

package/dist/svelte.mjs

@@ -0,0 +1,91 @@
+import { deepEqual } from "fast-equals";
+import { readable } from "svelte/store";
+//#region src/svelte/hooks.ts
+/**
+* Use this function to subscribe to a reactive value from a Svelte component.
+* Accepts a subscription object directly, or a factory function that is called
+* once to create one.
+*
+* Returns a Svelte `Readable` store — read it with the `$` auto-subscription
+* (`$value`) in markup. The underlying subscription is created lazily on the
+* first subscriber and torn down when the last one leaves.
+*
+* @example Inline subscription
+* ```svelte
+* <script lang="ts">
+*   import { createWebStorageValue } from 'seitu/web'
+*   import { useSubscription } from 'seitu/svelte'
+*   import * as z from 'zod'
+*
+*   const value = useSubscription(() => createWebStorageValue({
+*     type: 'sessionStorage',
+*     key: 'test',
+*     defaultValue: 0,
+*     schema: z.number(),
+*   }))
+* <\/script>
+*
+* <div>{$value}</div>
+* ```
+*
+* @example Instance outside of component
+* ```svelte
+* <script lang="ts">
+*   import { createWebStorage } from 'seitu/web'
+*   import { useSubscription } from 'seitu/svelte'
+*   import * as z from 'zod'
+*
+*   const sessionStorage = createWebStorage({
+*     type: 'sessionStorage',
+*     schemas: { count: z.number(), name: z.string() },
+*     defaultValues: { count: 0, name: '' },
+*   })
+*
+*   const value = useSubscription(sessionStorage)
+* <\/script>
+*
+* <div>{$value.count}</div>
+* ```
+*
+* @example With selector
+* ```svelte
+* <script lang="ts">
+*   import { createWebStorage } from 'seitu/web'
+*   import { useSubscription } from 'seitu/svelte'
+*   import * as z from 'zod'
+*
+*   const sessionStorage = createWebStorage({
+*     type: 'sessionStorage',
+*     schemas: { count: z.number(), name: z.string() },
+*     defaultValues: { count: 0, name: '' },
+*   })
+*
+*   // Updates only when count changes
+*   const count = useSubscription(sessionStorage, { selector: v => v.count })
+* <\/script>
+*
+* <div>{$count}</div>
+* ```
+*/
+function useSubscription(source, options) {
+	const { selector, isEqual = deepEqual } = options ?? {};
+	const sub = typeof source === "function" ? source() : source;
+	function getSnapshot() {
+		return selector ? selector(sub.get()) : sub.get();
+	}
+	const initial = getSnapshot();
+	return readable(initial, (set) => {
+		let current = initial;
+		function refresh() {
+			const next = getSnapshot();
+			if (!isEqual(current, next)) {
+				current = next;
+				set(next);
+			}
+		}
+		refresh();
+		return sub.subscribe(refresh);
+	});
+}
+//#endregion
+export { useSubscription };

package/package.json

@@ -2,7 +2,7 @@
   "name": "seitu",
   "displayName": "Seitu",
   "type": "module",
-  "version": "0.15.1",
+  "version": "0.16.0",
   "private": false,
   "author": "Valerii Strilets",
   "license": "MIT",
@@ -20,6 +20,9 @@
     "typescript",
     "react",
     "vue",
+    "solid",
+    "solid-js",
+    "svelte",
     "utils",
     "type-safe",
     "tanstack-intent"
@@ -45,6 +48,14 @@
       "types": "./dist/vue/index.d.mts",
       "import": "./dist/vue.mjs"
     },
+    "./solid": {
+      "types": "./dist/solid/index.d.mts",
+      "import": "./dist/solid.mjs"
+    },
+    "./svelte": {
+      "types": "./dist/svelte/index.d.mts",
+      "import": "./dist/svelte.mjs"
+    },
     "./utils": {
       "types": "./dist/utils/index.d.mts",
       "import": "./dist/utils.mjs"
@@ -62,6 +73,8 @@
   "peerDependencies": {
     "react": ">=19",
     "react-dom": ">=19",
+    "solid-js": ">=1.9",
+    "svelte": ">=5",
     "vue": ">=3.5"
   },
   "peerDependenciesMeta": {
@@ -71,6 +84,12 @@
     "react-dom": {
       "optional": true
     },
+    "solid-js": {
+      "optional": true
+    },
+    "svelte": {
+      "optional": true
+    },
     "vue": {
       "optional": true
     }
@@ -79,21 +98,26 @@
     "fast-equals": "^6.0.0"
   },
   "devDependencies": {
+    "@solidjs/testing-library": "^0.8.10",
     "@standard-schema/spec": "^1.1.0",
     "@tanstack/intent": "^0.0.42",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@types/react": "^19.2.17",
+    "@vitejs/plugin-react": "^6.0.2",
     "fake-indexeddb": "^6.2.5",
     "happy-dom": "^20.10.2",
     "react-dom": "^19.2.7",
+    "solid-js": "^1.9.13",
+    "svelte": "^5.56.3",
     "tsdown": "^0.22.2",
     "type-fest": "^5.7.0",
     "typescript": "^6.0.3",
-    "vite": "^6.4.3",
-    "vitest": "^3.2.6",
-    "vue": "^3.5.35",
-    "yaml": "^2.8.3",
+    "vite": "^8.0.16",
+    "vite-plugin-solid": "^2.11.12",
+    "vitest": "^4.1.8",
+    "vue": "^3.5.38",
+    "yaml": "^2.9.0",
     "zod": "^4.4.3"
   },
   "scripts": {

package/skills/README.md

@@ -78,6 +78,19 @@ Restart Cursor or start a new agent chat so skills are picked up.
 |-------|-----------|-------------|
 | [use-subscription-vue](./use-subscription-vue/SKILL.md) | `seitu#use-subscription-vue` | Composable for any Seitu primitive |
 
+### Solid (`seitu/solid`)
+
+| Skill | Intent id | When to use |
+|-------|-----------|-------------|
+| [use-subscription-solid](./use-subscription-solid/SKILL.md) | `seitu#use-subscription-solid` | Primitive returning an accessor for any Seitu primitive |
+| [subscription-solid](./subscription-solid/SKILL.md) | `seitu#subscription-solid` | Render-prop component |
+
+### Svelte (`seitu/svelte`)
+
+| Skill | Intent id | When to use |
+|-------|-----------|-------------|
+| [use-subscription-svelte](./use-subscription-svelte/SKILL.md) | `seitu#use-subscription-svelte` | Binding returning a Svelte `Readable` store for any Seitu primitive |
+
 ## Registry and version history
 
 The package includes the `tanstack-intent` npm keyword. Published versions are indexed on the [Agent Skills Registry](https://tanstack.com/intent/registry) with skill history per release.

package/skills/create-computed/SKILL.md

@@ -4,7 +4,7 @@ description: >-
   Derived read-only subscription from one or many sources.
 type: core
 library: seitu
-library_version: "0.15.1"
+library_version: "0.16.0"
 requires:
   - seitu-overview
 sources:

package/skills/create-debounced/SKILL.md

@@ -4,7 +4,7 @@ description: >-
   Debounce updates from a source subscribable.
 type: core
 library: seitu
-library_version: "0.15.1"
+library_version: "0.16.0"
 requires:
   - seitu-overview
 sources:

package/skills/create-debounced-fn/SKILL.md

@@ -4,7 +4,7 @@ description: >-
   Debounced callable with reactive return value.
 type: core
 library: seitu
-library_version: "0.15.1"
+library_version: "0.16.0"
 requires:
   - seitu-overview
 sources:

package/skills/create-indexed-db-storage/SKILL.md

@@ -4,7 +4,7 @@ description: >-
   Async IndexedDB persistence with cached sync reads.
 type: core
 library: seitu
-library_version: "0.15.1"
+library_version: "0.16.0"
 requires:
   - seitu-overview
 sources:

package/skills/create-is-online/SKILL.md

@@ -4,7 +4,7 @@ description: >-
   Reactive navigator.onLine status.
 type: core
 library: seitu
-library_version: "0.15.1"
+library_version: "0.16.0"
 requires:
   - seitu-overview
 sources:

package/skills/create-media-query/SKILL.md

@@ -4,7 +4,7 @@ description: >-
   Reactive CSS media query with SSR defaultMatches.
 type: core
 library: seitu
-library_version: "0.15.1"
+library_version: "0.16.0"
 requires:
   - seitu-overview
 sources:

package/skills/create-readable-subscription/SKILL.md

@@ -4,7 +4,7 @@ description: >-
   Compose get + subscribe + notify into standard Readable & Subscribable.
 type: core
 library: seitu
-library_version: "0.15.1"
+library_version: "0.16.0"
 requires:
   - seitu-overview
   - create-subscription

package/skills/create-schema-store/SKILL.md

@@ -4,7 +4,7 @@ description: >-
   Standard Schema validated store with default fallback on invalid data.
 type: core
 library: seitu
-library_version: "0.15.1"
+library_version: "0.16.0"
 requires:
   - seitu-overview
 sources:

package/skills/create-scroll-state/SKILL.md

@@ -4,7 +4,7 @@ description: >-
   Scroll position, edges, and remaining distance for an element.
 type: core
 library: seitu
-library_version: "0.15.1"
+library_version: "0.16.0"
 requires:
   - seitu-overview
 sources:

package/skills/create-store/SKILL.md

@@ -4,7 +4,7 @@ description: >-
   Minimal in-memory reactive store with get, set, and subscribe.
 type: core
 library: seitu
-library_version: "0.15.1"
+library_version: "0.16.0"
 requires:
   - seitu-overview
 sources:

package/skills/create-subscription/SKILL.md

@@ -4,7 +4,7 @@ description: >-
   Low-level subscribe/notify for custom primitives.
 type: core
 library: seitu
-library_version: "0.15.1"
+library_version: "0.16.0"
 requires:
   - seitu-overview
 sources:

package/skills/create-throttled/SKILL.md

@@ -4,7 +4,7 @@ description: >-
   Throttle updates from a source subscribable.
 type: core
 library: seitu
-library_version: "0.15.1"
+library_version: "0.16.0"
 requires:
   - seitu-overview
 sources:

package/skills/create-throttled-fn/SKILL.md

@@ -4,7 +4,7 @@ description: >-
   Throttled callable with reactive return value.
 type: core
 library: seitu
-library_version: "0.15.1"
+library_version: "0.16.0"
 requires:
   - seitu-overview
 sources:

package/skills/create-web-storage/SKILL.md

@@ -4,7 +4,7 @@ description: >-
   Multi-key localStorage/sessionStorage with per-key schemas.
 type: core
 library: seitu
-library_version: "0.15.1"
+library_version: "0.16.0"
 requires:
   - seitu-overview
   - create-web-storage-value

package/skills/create-web-storage-value/SKILL.md

@@ -4,7 +4,7 @@ description: >-
   Single-key localStorage/sessionStorage with schema validation.
 type: core
 library: seitu
-library_version: "0.15.1"
+library_version: "0.16.0"
 requires:
   - seitu-overview
 sources:

package/skills/seitu-overview/SKILL.md

@@ -4,7 +4,7 @@ description: >-
   Module map, mental model, decision tree, SSR — read before other Seitu skills.
 type: lifecycle
 library: seitu
-library_version: "0.15.1"
+library_version: "0.16.0"
 sources:
   - letstri/seitu:docs/content/docs/index.mdx
   - letstri/seitu:seitu/src/core/index.ts
@@ -13,7 +13,7 @@ sources:
 # Seitu Overview
 
 Seitu is a type-safe reactive primitives library. Framework-agnostic core with
-React and Vue bindings. Every primitive shares the same `get()` / `subscribe()`
+React, Vue, Solid, and Svelte bindings. Every primitive shares the same `get()` / `subscribe()`
 API — no actions, no reducers, no context providers.
 
 ## Module map
@@ -24,9 +24,11 @@ API — no actions, no reducers, no context providers.
 | `seitu/web` | Browser persistence (localStorage, sessionStorage, IndexedDB) and DOM state |
 | `seitu/react` | `useSubscription` hook + `Subscription` component |
 | `seitu/vue` | `useSubscription` composable |
+| `seitu/solid` | `useSubscription` primitive (returns `Accessor`) + `Subscription` component |
+| `seitu/svelte` | `useSubscription` (returns a Svelte `Readable` store) |
 | `seitu/utils` | Helpers (`repairValueObjectWithDefault`) |
 
-ESM-only. Node >= 22. React >= 19 and Vue >= 3.5 are optional peer deps.
+ESM-only. Node >= 22. React >= 19, Vue >= 3.5, Solid >= 1.9, and Svelte >= 5 are optional peer deps.
 
 ## Mental model
 
@@ -101,7 +103,9 @@ What do you need?
 │
 └─ Framework integration
    ├─ React → useSubscription (hook) or Subscription (component)
-   └─ Vue → useSubscription (composable)
+   ├─ Vue → useSubscription (composable)
+   ├─ Solid → useSubscription (returns Accessor) or Subscription (component)
+   └─ Svelte → useSubscription (returns a Readable store, read with $value)
 ```
 
 ## Framework binding
@@ -122,6 +126,21 @@ const value = useSubscription(store)
 const data = useSubscription(computed(() => createWebStorageValue({ ... })))
 ```
 
+```tsx
+// Solid — instance or reactive getter; returns an Accessor, read with value()
+const value = useSubscription(store)
+const data = useSubscription(() => createWebStorageValue({ ... }))
+```
+
+```svelte
+<!-- Svelte — instance or factory; returns a Readable store, read with $value -->
+<script lang="ts">
+  const value = useSubscription(store)
+  const data = useSubscription(() => createWebStorageValue({ ... }))
+</script>
+<div>{$value}</div>
+```
+
 ## SSR
 
 All `seitu/web` primitives return defaults when `window` / `navigator` is

package/skills/subscription-react/SKILL.md

@@ -4,7 +4,7 @@ description: >-
   Render-prop Subscription component for React.
 type: framework
 library: seitu
-library_version: "0.15.1"
+library_version: "0.16.0"
 requires:
   - seitu-overview
   - use-subscription-react

package/skills/subscription-solid/SKILL.md

@@ -0,0 +1,97 @@
+---
+name: subscription-solid
+description: >-
+  Render-prop Subscription component for Solid.
+type: framework
+library: seitu
+library_version: "0.16.0"
+requires:
+  - seitu-overview
+  - use-subscription-solid
+sources:
+  - letstri/seitu:docs/content/docs/solid/components.mdx
+  - letstri/seitu:seitu/src/solid/components.ts
+---
+
+# Subscription (Solid component)
+
+Declarative render-prop component from `seitu/solid`. The children function runs once and
+receives a Solid `Accessor<R>` — read it with `value()` so updates stay fine-grained.
+
+```tsx
+import { Subscription } from 'seitu/solid'
+
+<Subscription value={storage}>
+  {value => <div>{value().count}</div>}
+</Subscription>
+
+<Subscription value={storage} selector={v => v.count}>
+  {count => <div>{count()}</div>}
+</Subscription>
+```
+
+## Props
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `value` | `Subscribable & Readable` | The reactive source |
+| `selector?` | `(value) => R` | Optional selector for granular updates |
+| `children` | `(value: Accessor<R>) => JSX.Element` | Render function receiving an accessor |
+
+## Common Mistakes
+
+### [CRITICAL] Treating children's argument as a value, not an accessor
+
+Wrong:
+
+```tsx
+<Subscription value={store}>
+  {value => <div>{value.count}</div>}
+</Subscription>
+```
+
+Correct:
+
+```tsx
+<Subscription value={store}>
+  {value => <div>{value().count}</div>}
+</Subscription>
+```
+
+Unlike React, the children function runs once and receives a Solid `Accessor`; call it (`value()`) inside JSX.
+
+### [LOW] Preferring the component over the primitive without reason
+
+Wrong:
+
+```tsx
+<Subscription value={s}>{v => <Child value={v()} />}</Subscription>
+```
+
+Correct:
+
+```tsx
+const v = useSubscription(s); return <Child value={v()} />
+```
+
+`useSubscription` is simpler for most cases; `Subscription` is for render-prop composition.
+
+### [CRITICAL] Importing from seitu/react in Solid
+
+Wrong:
+
+```ts
+import { Subscription } from 'seitu/react'
+```
+
+Correct:
+
+```ts
+import { Subscription } from 'seitu/solid'
+```
+
+The React component relies on React internals; Solid apps must use `seitu/solid`.
+
+## Source
+
+`src/solid/components.ts`

package/skills/use-subscription-react/SKILL.md

@@ -4,7 +4,7 @@ description: >-
   React hook for any Seitu primitive via useSyncExternalStore.
 type: framework
 library: seitu
-library_version: "0.15.1"
+library_version: "0.16.0"
 requires:
   - seitu-overview
 sources:

package/skills/use-subscription-solid/SKILL.md

@@ -0,0 +1,144 @@
+---
+name: use-subscription-solid
+description: >-
+  Solid primitive returning an Accessor for any Seitu primitive.
+type: framework
+library: seitu
+library_version: "0.16.0"
+requires:
+  - seitu-overview
+sources:
+  - letstri/seitu:docs/content/docs/solid/hooks.mdx
+  - letstri/seitu:seitu/src/solid/hooks.ts
+---
+
+# useSubscription (Solid)
+
+Core Solid primitive from `seitu/solid`. Returns a Solid `Accessor<T>` (`() => T`) that stays in sync with the source. Works with any `Subscribable<T> & Readable<T>`. Accepts a raw instance or a reactive getter.
+
+## Basic usage (module-level instance)
+
+```tsx
+import { useSubscription } from 'seitu/solid'
+import { createStore } from 'seitu'
+
+const count = createStore(0)
+
+function Counter() {
+  const value = useSubscription(count)
+  return <button onClick={() => count.set(v => v + 1)}>{value()}</button>
+}
+```
+
+## Inline subscription (getter form)
+
+```tsx
+import { useSubscription } from 'seitu/solid'
+import { createScrollState } from 'seitu/web'
+
+function ScrollTracker() {
+  let ref: HTMLDivElement | undefined
+  const state = useSubscription(() =>
+    createScrollState({ element: () => ref, direction: 'vertical' })
+  )
+  return <div ref={ref}>{state().top.reached ? 'at top' : 'scrolled'}</div>
+}
+```
+
+## Reactive source (re-subscribes when a signal changes)
+
+```tsx
+import { createSignal } from 'solid-js'
+import { useSubscription } from 'seitu/solid'
+import { createWebStorageValue } from 'seitu/web'
+
+function UserStorage(props: { userId: string }) {
+  const data = useSubscription(() =>
+    createWebStorageValue({ type: 'localStorage', key: `user:${props.userId}`, schema, defaultValue })
+  )
+  return <div>{data().name}</div>
+}
+```
+
+## With selector (granular updates)
+
+```tsx
+const count = useSubscription(storage, { selector: v => v.count })
+// count() only changes when the selected value changes
+```
+
+## Options
+
+| Option | Type | Description |
+|--------|------|-------------|
+| `selector?` | `(value) => R` | Derive subset; the accessor updates only when it changes |
+| `isEqual?` | `(prev, next) => boolean` | Custom equality (default: `deepEqual`) |
+
+## Returns
+
+`Accessor<R>` — a getter function. Read it with `value()` inside JSX or any tracked scope.
+
+## Common Mistakes
+
+### [CRITICAL] Reading the accessor without calling it
+
+Wrong:
+
+```tsx
+const value = useSubscription(store)
+return <div>{value}</div>
+```
+
+Correct:
+
+```tsx
+const value = useSubscription(store)
+return <div>{value()}</div>
+```
+
+`useSubscription` returns a Solid `Accessor`; you must call it (`value()`) to read and track the value.
+
+### [HIGH] Passing reactive props directly instead of a getter
+
+Wrong:
+
+```tsx
+function Item(props: { store: Store<number> }) {
+  const value = useSubscription(props.store)
+}
+```
+
+Correct:
+
+```tsx
+function Item(props: { store: Store<number> }) {
+  const value = useSubscription(() => props.store)
+}
+```
+
+Reading `props.store` outside a tracked scope loses reactivity; the getter form re-subscribes when the prop changes.
+
+### [CRITICAL] Importing from seitu/react in Solid
+
+Wrong:
+
+```ts
+import { useSubscription } from 'seitu/react'
+```
+
+Correct:
+
+```ts
+import { useSubscription } from 'seitu/solid'
+```
+
+Solid apps must use the `seitu/solid` primitive — the React hook relies on `useSyncExternalStore`.
+
+## See also
+
+- [`subscription-solid`](../subscription-solid/SKILL.md) — Render-prop component alternative.
+- [`create-scroll-state`](../create-scroll-state/SKILL.md) — Scroll tracking uses the getter + ref pattern in Solid.
+
+## Source
+
+`src/solid/hooks.ts`

package/skills/use-subscription-svelte/SKILL.md

@@ -0,0 +1,134 @@
+---
+name: use-subscription-svelte
+description: >-
+  Svelte binding returning a Readable store for any Seitu primitive.
+type: framework
+library: seitu
+library_version: "0.16.0"
+requires:
+  - seitu-overview
+sources:
+  - letstri/seitu:docs/content/docs/svelte/hooks.mdx
+  - letstri/seitu:seitu/src/svelte/hooks.ts
+---
+
+# useSubscription (Svelte)
+
+Binding from `seitu/svelte`. Returns a Svelte [`Readable`](https://svelte.dev/docs/svelte-store#readable)
+store that stays in sync with any `Subscribable<T> & Readable<T>`. Read it with the `$`
+auto-subscription (`$value`) in markup. The source subscription is created lazily on the
+first subscriber and torn down when the last one leaves (SSR-safe, auto-cleanup).
+
+## Basic usage (module-level instance)
+
+```svelte
+<script lang="ts">
+  import { useSubscription } from 'seitu/svelte'
+  import { createStore } from 'seitu'
+
+  const count = createStore(0)
+  const value = useSubscription(count)
+</script>
+
+<button onclick={() => count.set(v => v + 1)}>{$value}</button>
+```
+
+## Inline subscription (factory form)
+
+```svelte
+<script lang="ts">
+  import { useSubscription } from 'seitu/svelte'
+  import { createWebStorageValue } from 'seitu/web'
+  import * as z from 'zod'
+
+  const value = useSubscription(() => createWebStorageValue({
+    type: 'sessionStorage',
+    key: 'test',
+    defaultValue: 0,
+    schema: z.number(),
+  }))
+</script>
+
+<div>{$value}</div>
+```
+
+## With selector (granular updates)
+
+```svelte
+<script lang="ts">
+  const count = useSubscription(storage, { selector: v => v.count })
+</script>
+
+<div>{$count}</div>
+```
+
+## Options
+
+| Option | Type | Description |
+|--------|------|-------------|
+| `selector?` | `(value) => R` | Derive a subset; the store updates only when it changes |
+| `isEqual?` | `(prev, next) => boolean` | Custom equality (default: `deepEqual`) |
+
+## Returns
+
+`Readable<R>` (from `svelte/store`) — read it as `$value` in markup, or with `get(value)` in scripts.
+
+## Common Mistakes
+
+### [CRITICAL] Reading the store without the `$` prefix
+
+Wrong:
+
+```svelte
+<div>{value}</div>
+```
+
+Correct:
+
+```svelte
+<div>{$value}</div>
+```
+
+`useSubscription` returns a Svelte store; the `$` prefix auto-subscribes and reads the current value.
+
+### [MEDIUM] Passing a factory expecting reactivity to a changing source
+
+Wrong:
+
+```svelte
+<script lang="ts">
+  // The factory runs once; it does not re-run when `id` changes.
+  const value = useSubscription(() => createWebStorageValue({ key: `user:${id}`, ... }))
+</script>
+```
+
+Correct:
+
+```svelte
+<script lang="ts">
+  // Recreate via a keyed block or derive the source explicitly when it must change.
+  const value = useSubscription(createWebStorageValue({ key: `user:${id}`, ... }))
+</script>
+```
+
+The factory is a one-time initializer; for a source that changes over time, recreate the binding (e.g. in a `{#key}` block).
+
+### [CRITICAL] Importing from seitu/react in Svelte
+
+Wrong:
+
+```ts
+import { useSubscription } from 'seitu/react'
+```
+
+Correct:
+
+```ts
+import { useSubscription } from 'seitu/svelte'
+```
+
+The React hook relies on `useSyncExternalStore`; Svelte apps must use the `seitu/svelte` binding.
+
+## Source
+
+`src/svelte/hooks.ts`

package/skills/use-subscription-vue/SKILL.md

@@ -4,7 +4,7 @@ description: >-
   Vue composable returning readonly ShallowRef.
 type: framework
 library: seitu
-library_version: "0.15.1"
+library_version: "0.16.0"
 requires:
   - seitu-overview
 sources: