@glissade/react 0.1.0 → 0.3.0

package/README.md

@@ -0,0 +1,24 @@
+# @glissade/react
+
+Thin React adapters over the signal graph via `useSyncExternalStore` — components re-render only when a value actually changes. Includes the v2 machine hooks, typed structurally so this package never depends on `@glissade/interact`.
+
+```sh
+npm i @glissade/react
+```
+
+```ts
+import { useSignalValue, usePlayhead, useMachineState, useInput } from '@glissade/react';
+
+const t = usePlayhead(player);
+const state = useMachineState(machine);          // 'idle' | 'hover' | ...
+const [hovered, setHovered] = useInput(machine, 'hovered');
+```
+
+## Part of glissade
+
+*(glide & slide)* — programmatic motion graphics for TypeScript: realtime-first in any web page, deterministic headless video export from the same code, a visual studio over the same document. No generator functions.
+
+- [Repository & full README](https://github.com/tyevco/glissade)
+- [Getting started](https://github.com/tyevco/glissade/blob/main/docs/getting-started.md) · [Concepts](https://github.com/tyevco/glissade/blob/main/docs/concepts.md) · [Interactivity](https://github.com/tyevco/glissade/blob/main/docs/interactivity.md)
+
+Apache-2.0.

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { ReadonlySignal } from "@glissade/core";
+import { ReadonlySignal, Signal } from "@glissade/core";
 import { Player } from "@glissade/player";
 
 //#region src/index.d.ts
@@ -13,5 +13,17 @@ declare function usePlayerState(player: Player): {
   time: number;
   duration: number;
 };
+/**
+ * Machine hooks (v2 §C.6): the machine's active state and inputs are signals,
+ * so the §4.3 contract already covers them. Typed structurally — react never
+ * imports @glissade/interact; any object with this shape works.
+ */
+declare function useMachineState(machine: {
+  current: ReadonlySignal<string>;
+}): string;
+/** A machine input as React state: [value, set]. */
+declare function useInput<T extends boolean | number>(machine: {
+  input(name: string): Signal<T>;
+}, name: string): [T, (value: T) => void];
 //#endregion
-export { usePlayerState, usePlayhead, useSignalValue };
+export { useInput, useMachineState, usePlayerState, usePlayhead, useSignalValue };

package/dist/index.js

@@ -26,5 +26,18 @@ function usePlayerState(player) {
 		duration: player.duration
 	};
 }
+/**
+* Machine hooks (v2 §C.6): the machine's active state and inputs are signals,
+* so the §4.3 contract already covers them. Typed structurally — react never
+* imports @glissade/interact; any object with this shape works.
+*/
+function useMachineState(machine) {
+	return useSignalValue(machine.current);
+}
+/** A machine input as React state: [value, set]. */
+function useInput(machine, name) {
+	const sig = machine.input(name);
+	return [useSignalValue(sig), useCallback((v) => sig.set(v), [sig])];
+}
 //#endregion
-export { usePlayerState, usePlayhead, useSignalValue };
+export { useInput, useMachineState, usePlayerState, usePlayhead, useSignalValue };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@glissade/react",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "description": "glissade React bindings: signals via useSyncExternalStore, player hooks.",
   "license": "Apache-2.0",
   "type": "module",
@@ -15,8 +15,8 @@
     "dist"
   ],
   "dependencies": {
-    "@glissade/core": "0.1.0",
-    "@glissade/player": "0.1.0"
+    "@glissade/core": "0.3.0",
+    "@glissade/player": "0.3.0"
   },
   "peerDependencies": {
     "react": ">=18"