foldkit 0.90.1 → 0.92.0

package/dist/subscription/animationFrame.d.ts

@@ -0,0 +1,53 @@
+import { Stream } from 'effect';
+/**
+ * Configuration for the `animationFrame` Subscription helper.
+ *
+ * `isActive(model)` controls whether the request-animation-frame loop is
+ * scheduled at all. When it returns `false` (e.g. the game is paused, the
+ * scene is static, or the canvas is offscreen), no rAF callbacks fire and
+ * no Messages are emitted. The Subscription system automatically restarts
+ * the loop when `isActive` flips back to `true`.
+ */
+export type AnimationFrameConfig<Model, Message> = Readonly<{
+    isActive: (model: Model) => boolean;
+    toMessage: (deltaTime: number) => Message;
+}>;
+/**
+ * The subscription record returned by `animationFrame`. Shape matches the
+ * `{ modelToDependencies, dependenciesToStream }` form expected by
+ * `Subscription.makeSubscriptions` field configs.
+ */
+export type AnimationFrameSubscription<Model, Message> = Readonly<{
+    modelToDependencies: (model: Model) => boolean;
+    dependenciesToStream: (isActive: boolean) => Stream.Stream<Message>;
+}>;
+/**
+ * Build a Subscription field config that emits a Message on every
+ * `requestAnimationFrame` tick, with the inter-frame delta in milliseconds.
+ *
+ * Pair with `S.Boolean` in the `SubscriptionDeps` schema:
+ *
+ * @example
+ * ```typescript
+ * const SubscriptionDeps = S.Struct({
+ *   frame: S.Boolean,
+ * })
+ *
+ * const subscriptions = Subscription.makeSubscriptions(SubscriptionDeps)<
+ *   Model,
+ *   Message
+ * >({
+ *   frame: Subscription.animationFrame({
+ *     isActive: model => model.isPlaying,
+ *     toMessage: deltaTime => Tick({ deltaTime }),
+ *   }),
+ * })
+ * ```
+ *
+ * The browser pauses `requestAnimationFrame` when the tab is hidden, so
+ * `deltaTime` may spike on the first frame after the tab regains focus.
+ * Clamp it in the update function if your simulation is sensitive to large
+ * jumps.
+ */
+export declare const animationFrame: <Model, Message>(config: AnimationFrameConfig<Model, Message>) => AnimationFrameSubscription<Model, Message>;
+//# sourceMappingURL=animationFrame.d.ts.map

package/dist/subscription/animationFrame.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"animationFrame.d.ts","sourceRoot":"","sources":["../../src/subscription/animationFrame.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,MAAM,EAAE,MAAM,QAAQ,CAAA;AAE9C;;;;;;;;GAQG;AACH,MAAM,MAAM,oBAAoB,CAAC,KAAK,EAAE,OAAO,IAAI,QAAQ,CAAC;IAC1D,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,OAAO,CAAA;IACnC,SAAS,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,OAAO,CAAA;CAC1C,CAAC,CAAA;AAEF;;;;GAIG;AACH,MAAM,MAAM,0BAA0B,CAAC,KAAK,EAAE,OAAO,IAAI,QAAQ,CAAC;IAChE,mBAAmB,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,OAAO,CAAA;IAC9C,oBAAoB,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,CAAA;CACpE,CAAC,CAAA;AA2BF;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,eAAO,MAAM,cAAc,GAAI,KAAK,EAAE,OAAO,EAC3C,QAAQ,oBAAoB,CAAC,KAAK,EAAE,OAAO,CAAC,KAC3C,0BAA0B,CAAC,KAAK,EAAE,OAAO,CAO1C,CAAA"}

package/dist/subscription/animationFrame.js

@@ -0,0 +1,47 @@
+import { Effect, Queue, Stream } from 'effect';
+const makeAnimationFrameStream = (toMessage) => Stream.callback(queue => Effect.acquireRelease(Effect.sync(() => {
+    const state = {
+        frameId: 0,
+        lastTime: performance.now(),
+    };
+    const tick = (now) => {
+        const deltaTime = now - state.lastTime;
+        state.lastTime = now;
+        Queue.offerUnsafe(queue, toMessage(deltaTime));
+        state.frameId = requestAnimationFrame(tick);
+    };
+    state.frameId = requestAnimationFrame(tick);
+    return state;
+}), state => Effect.sync(() => cancelAnimationFrame(state.frameId))).pipe(Effect.flatMap(() => Effect.never)));
+/**
+ * Build a Subscription field config that emits a Message on every
+ * `requestAnimationFrame` tick, with the inter-frame delta in milliseconds.
+ *
+ * Pair with `S.Boolean` in the `SubscriptionDeps` schema:
+ *
+ * @example
+ * ```typescript
+ * const SubscriptionDeps = S.Struct({
+ *   frame: S.Boolean,
+ * })
+ *
+ * const subscriptions = Subscription.makeSubscriptions(SubscriptionDeps)<
+ *   Model,
+ *   Message
+ * >({
+ *   frame: Subscription.animationFrame({
+ *     isActive: model => model.isPlaying,
+ *     toMessage: deltaTime => Tick({ deltaTime }),
+ *   }),
+ * })
+ * ```
+ *
+ * The browser pauses `requestAnimationFrame` when the tab is hidden, so
+ * `deltaTime` may spike on the first frame after the tab regains focus.
+ * Clamp it in the update function if your simulation is sensitive to large
+ * jumps.
+ */
+export const animationFrame = (config) => ({
+    modelToDependencies: model => config.isActive(model),
+    dependenciesToStream: isActive => Stream.when(makeAnimationFrameStream(config.toMessage), Effect.sync(() => isActive)),
+});

package/dist/subscription/public.d.ts

@@ -1,3 +1,5 @@
 export { makeSubscriptions } from '../runtime/subscription.js';
 export type { Subscription, Subscriptions } from '../runtime/subscription.js';
+export { animationFrame } from './animationFrame.js';
+export type { AnimationFrameConfig, AnimationFrameSubscription, } from './animationFrame.js';
 //# sourceMappingURL=public.d.ts.map

package/dist/subscription/public.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"public.d.ts","sourceRoot":"","sources":["../../src/subscription/public.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAA;AAE9D,YAAY,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAA"}
+{"version":3,"file":"public.d.ts","sourceRoot":"","sources":["../../src/subscription/public.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAA;AAE9D,YAAY,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAA;AAE7E,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AAEpD,YAAY,EACV,oBAAoB,EACpB,0BAA0B,GAC3B,MAAM,qBAAqB,CAAA"}

package/dist/subscription/public.js

@@ -1 +1,2 @@
 export { makeSubscriptions } from '../runtime/subscription.js';
+export { animationFrame } from './animationFrame.js';

package/dist/ui/dragAndDrop/index.d.ts

@@ -243,7 +243,7 @@ export declare const subscriptions: import("../../runtime/subscription.js").Subs
     readonly _tag: "ConfirmedKeyboardDrop";
 } | {
     readonly _tag: "PressedArrowKey";
-    readonly direction: "Up" | "Down" | "Left" | "Right" | "NextContainer" | "PreviousContainer";
+    readonly direction: "Left" | "Right" | "Up" | "Down" | "NextContainer" | "PreviousContainer";
 } | {
     readonly _tag: "CompletedAutoScroll";
 } | {

package/dist/ui/listbox/multi.d.ts

@@ -145,8 +145,8 @@ export declare const update: (model: {
             readonly _tag: "EndedAnimation";
         };
     } | {
-        readonly button: number;
         readonly _tag: "PressedPointerOnButton";
+        readonly button: number;
         readonly pointerType: string;
     }, never, never>;
 }>[]];

package/dist/ui/listbox/shared.d.ts

@@ -304,8 +304,8 @@ export declare const makeUpdate: <Model extends BaseModel>(handleSelectedItem: (
             readonly _tag: "EndedAnimation";
         };
     } | {
-        readonly button: number;
         readonly _tag: "PressedPointerOnButton";
+        readonly button: number;
         readonly pointerType: string;
     }, never, never>;
 }>[]];

package/dist/ui/listbox/single.d.ts

@@ -145,8 +145,8 @@ export declare const update: (model: {
             readonly _tag: "EndedAnimation";
         };
     } | {
-        readonly button: number;
         readonly _tag: "PressedPointerOnButton";
+        readonly button: number;
         readonly pointerType: string;
     }, never, never>;
 }>[]];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "foldkit",
-  "version": "0.90.1",
+  "version": "0.92.0",
   "description": "A TypeScript frontend framework, built on Effect and architected like Elm",
   "type": "module",
   "main": "./dist/index.js",
@@ -15,6 +15,10 @@
       "types": "./dist/calendar/public.d.ts",
       "import": "./dist/calendar/public.js"
     },
+    "./canvas": {
+      "types": "./dist/canvas/public.d.ts",
+      "import": "./dist/canvas/public.js"
+    },
     "./command": {
       "types": "./dist/command/public.d.ts",
       "import": "./dist/command/public.js"