foldkit 0.56.0 → 0.57.0

package/dist/ui/transition/update.d.ts

@@ -0,0 +1,22 @@
+import { Option } from 'effect';
+import * as Command from '../../command';
+import { type Message, type Model, type OutMessage } from './schema';
+type UpdateReturn = readonly [
+    Model,
+    ReadonlyArray<Command.Command<Message>>,
+    Option.Option<OutMessage>
+];
+/** Advances the transition's enter/leave animation by waiting a double-rAF. */
+export declare const RequestFrame: Command.CommandDefinition<"RequestFrame", {
+    readonly _tag: "AdvancedTransitionFrame";
+}>;
+/** Waits for all CSS transitions on the transition element to complete. */
+export declare const WaitForTransitions: Command.CommandDefinition<"WaitForTransitions", {
+    readonly _tag: "EndedTransition";
+}>;
+/** Processes a transition message and returns the next model, commands, and optional OutMessage. */
+export declare const update: (model: Model, message: Message) => UpdateReturn;
+/** Creates the standard leave-phase command that waits for CSS transitions on the transition element. Use this when handling the `StartedLeaveAnimating` OutMessage for components that don't need custom leave behavior. */
+export declare const defaultLeaveCommand: (model: Model) => Command.Command<Message>;
+export {};
+//# sourceMappingURL=update.d.ts.map

package/dist/ui/transition/update.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"update.d.ts","sourceRoot":"","sources":["../../../src/ui/transition/update.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsB,MAAM,EAAE,MAAM,QAAQ,CAAA;AAEnD,OAAO,KAAK,OAAO,MAAM,eAAe,CAAA;AAGxC,OAAO,EAGL,KAAK,OAAO,EACZ,KAAK,KAAK,EACV,KAAK,UAAU,EAGhB,MAAM,UAAU,CAAA;AAMjB,KAAK,YAAY,GAAG,SAAS;IAC3B,KAAK;IACL,aAAa,CAAC,OAAO,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;IACvC,MAAM,CAAC,MAAM,CAAC,UAAU,CAAC;CAC1B,CAAA;AAGD,+EAA+E;AAC/E,eAAO,MAAM,YAAY;;EAGxB,CAAA;AACD,2EAA2E;AAC3E,eAAO,MAAM,kBAAkB;;EAG9B,CAAA;AAED,oGAAoG;AACpG,eAAO,MAAM,MAAM,GAAI,OAAO,KAAK,EAAE,SAAS,OAAO,KAAG,YAiFvD,CAAA;AAED,6NAA6N;AAC7N,eAAO,MAAM,mBAAmB,GAAI,OAAO,KAAK,KAAG,OAAO,CAAC,OAAO,CAAC,OAAO,CAKvE,CAAA"}

package/dist/ui/transition/update.js

@@ -0,0 +1,68 @@
+import { Effect, Match as M, Option } from 'effect';
+import * as Command from '../../command';
+import { evo } from '../../struct';
+import * as Task from '../../task';
+import { AdvancedTransitionFrame, EndedTransition, StartedLeaveAnimating, TransitionedOut, } from './schema';
+// UPDATE
+const elementSelector = (id) => `#${id}`;
+const withUpdateReturn = M.withReturnType();
+/** Advances the transition's enter/leave animation by waiting a double-rAF. */
+export const RequestFrame = Command.define('RequestFrame', AdvancedTransitionFrame);
+/** Waits for all CSS transitions on the transition element to complete. */
+export const WaitForTransitions = Command.define('WaitForTransitions', EndedTransition);
+/** Processes a transition message and returns the next model, commands, and optional OutMessage. */
+export const update = (model, message) => {
+    const maybeNextFrame = RequestFrame(Task.nextFrame.pipe(Effect.as(AdvancedTransitionFrame())));
+    return M.value(message).pipe(withUpdateReturn, M.tagsExhaustive({
+        Showed: () => {
+            if (model.isShowing) {
+                return [model, [], Option.none()];
+            }
+            return [
+                evo(model, {
+                    isShowing: () => true,
+                    transitionState: () => 'EnterStart',
+                }),
+                [maybeNextFrame],
+                Option.none(),
+            ];
+        },
+        Hidden: () => {
+            const isLeaving = model.transitionState === 'LeaveStart' ||
+                model.transitionState === 'LeaveAnimating';
+            if (isLeaving || !model.isShowing) {
+                return [model, [], Option.none()];
+            }
+            return [
+                evo(model, {
+                    isShowing: () => false,
+                    transitionState: () => 'LeaveStart',
+                }),
+                [maybeNextFrame],
+                Option.none(),
+            ];
+        },
+        AdvancedTransitionFrame: () => M.value(model.transitionState).pipe(withUpdateReturn, M.when('EnterStart', () => [
+            evo(model, { transitionState: () => 'EnterAnimating' }),
+            [
+                WaitForTransitions(Task.waitForTransitions(elementSelector(model.id)).pipe(Effect.as(EndedTransition()))),
+            ],
+            Option.none(),
+        ]), M.when('LeaveStart', () => [
+            evo(model, { transitionState: () => 'LeaveAnimating' }),
+            [],
+            Option.some(StartedLeaveAnimating()),
+        ]), M.orElse(() => [model, [], Option.none()])),
+        EndedTransition: () => M.value(model.transitionState).pipe(withUpdateReturn, M.when('EnterAnimating', () => [
+            evo(model, { transitionState: () => 'Idle' }),
+            [],
+            Option.none(),
+        ]), M.when('LeaveAnimating', () => [
+            evo(model, { transitionState: () => 'Idle' }),
+            [],
+            Option.some(TransitionedOut()),
+        ]), M.orElse(() => [model, [], Option.none()])),
+    }));
+};
+/** Creates the standard leave-phase command that waits for CSS transitions on the transition element. Use this when handling the `StartedLeaveAnimating` OutMessage for components that don't need custom leave behavior. */
+export const defaultLeaveCommand = (model) => WaitForTransitions(Task.waitForTransitions(elementSelector(model.id)).pipe(Effect.as(EndedTransition())));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "foldkit",
-  "version": "0.56.0",
+  "version": "0.57.0",
   "description": "A frontend framework for TypeScript, built on Effect, using The Elm Architecture",
   "type": "module",
   "main": "./dist/index.js",

package/dist/ui/transition.d.ts

@@ -1,5 +0,0 @@
-import { Schema as S } from 'effect';
-/** Schema for the transition animation state, tracking enter/leave phases for CSS transition coordination. */
-export declare const TransitionState: S.Literal<["Idle", "EnterStart", "EnterAnimating", "LeaveStart", "LeaveAnimating"]>;
-export type TransitionState = typeof TransitionState.Type;
-//# sourceMappingURL=transition.d.ts.map

package/dist/ui/transition.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"transition.d.ts","sourceRoot":"","sources":["../../src/ui/transition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,CAAC,EAAE,MAAM,QAAQ,CAAA;AAEpC,8GAA8G;AAC9G,eAAO,MAAM,eAAe,qFAM3B,CAAA;AACD,MAAM,MAAM,eAAe,GAAG,OAAO,eAAe,CAAC,IAAI,CAAA"}

package/dist/ui/transition.js

@@ -1,3 +0,0 @@
-import { Schema as S } from 'effect';
-/** Schema for the transition animation state, tracking enter/leave phases for CSS transition coordination. */
-export const TransitionState = S.Literal('Idle', 'EnterStart', 'EnterAnimating', 'LeaveStart', 'LeaveAnimating');