foldkit 0.30.0 → 0.31.0

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

@@ -1,10 +1,12 @@
 import { Schema as S } from 'effect';
 import type { Command } from '../../command';
 import type { Html } from '../../html';
-/** Schema for the dialog component's state, tracking its unique ID and open/closed status. */
+/** Schema for the dialog component's state, tracking its unique ID, open/closed status, animation support, and transition phase. */
 export declare const Model: S.Struct<{
     id: typeof S.String;
     isOpen: typeof S.Boolean;
+    isAnimated: typeof S.Boolean;
+    transitionState: S.Literal<["Idle", "EnterStart", "EnterAnimating", "LeaveStart", "LeaveAnimating"]>;
 }>;
 export type Model = typeof Model.Type;
 /** Sent when the dialog should open. Triggers the showModal command. */
@@ -13,21 +15,27 @@ export declare const Opened: import("../../schema").CallableTaggedStruct<"Opened
 export declare const Closed: import("../../schema").CallableTaggedStruct<"Closed", {}>;
 /** Placeholder message used when no action is needed, such as after a showModal or closeModal command completes. */
 export declare const NoOp: import("../../schema").CallableTaggedStruct<"NoOp", {}>;
+/** Sent internally when a double-rAF completes, advancing the transition to its animating phase. */
+export declare const AdvancedTransitionFrame: import("../../schema").CallableTaggedStruct<"AdvancedTransitionFrame", {}>;
+/** Sent internally when all CSS transitions on the dialog panel have completed. */
+export declare const EndedTransition: import("../../schema").CallableTaggedStruct<"EndedTransition", {}>;
 /** Union of all messages the dialog component can produce. */
-export declare const Message: S.Union<[import("../../schema").CallableTaggedStruct<"Opened", {}>, import("../../schema").CallableTaggedStruct<"Closed", {}>, import("../../schema").CallableTaggedStruct<"NoOp", {}>]>;
+export declare const Message: S.Union<[import("../../schema").CallableTaggedStruct<"Opened", {}>, import("../../schema").CallableTaggedStruct<"Closed", {}>, import("../../schema").CallableTaggedStruct<"NoOp", {}>, import("../../schema").CallableTaggedStruct<"AdvancedTransitionFrame", {}>, import("../../schema").CallableTaggedStruct<"EndedTransition", {}>]>;
 export type Opened = typeof Opened.Type;
 export type Closed = typeof Closed.Type;
 export type NoOp = typeof NoOp.Type;
 export type Message = typeof Message.Type;
-/** Configuration for creating a dialog model with `init`. */
+/** Configuration for creating a dialog model with `init`. `isAnimated` enables CSS transition coordination (default `false`). */
 export type InitConfig = Readonly<{
     id: string;
     isOpen?: boolean;
+    isAnimated?: boolean;
 }>;
-/** Creates an initial dialog model from a config. Defaults to closed. */
+/** Creates an initial dialog model from a config. Defaults to closed and non-animated. */
 export declare const init: (config: InitConfig) => Model;
+type UpdateReturn = [Model, ReadonlyArray<Command<Message>>];
 /** Processes a dialog message and returns the next model and commands. */
-export declare const update: (model: Model, message: Message) => [Model, ReadonlyArray<Command<Message>>];
+export declare const update: (model: Model, message: Message) => UpdateReturn;
 /** Returns the ID used for `aria-labelledby` on the dialog. Apply this to your title element. */
 export declare const titleId: (model: Model) => string;
 /** Returns the ID used for `aria-describedby` on the dialog. Apply this to your description element. */
@@ -46,4 +54,5 @@ export declare const view: <Message>(config: ViewConfig<Message>) => Html;
 /** Creates a memoized dialog view. Static config is captured in a closure;
  *  only `model` and `toMessage` are compared per render via `createLazy`. */
 export declare const lazy: <Message>(staticConfig: Omit<ViewConfig<Message>, "model" | "toMessage">) => ((model: Model, toMessage: ViewConfig<Message>["toMessage"]) => Html);
+export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/ui/dialog/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/dialog/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAA8B,MAAM,IAAI,CAAC,EAAE,MAAM,QAAQ,CAAA;AAEhE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AAE5C,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,YAAY,CAAA;AAQtC,8FAA8F;AAC9F,eAAO,MAAM,KAAK;;;EAGhB,CAAA;AAEF,MAAM,MAAM,KAAK,GAAG,OAAO,KAAK,CAAC,IAAI,CAAA;AAIrC,wEAAwE;AACxE,eAAO,MAAM,MAAM,2DAAc,CAAA;AACjC,wHAAwH;AACxH,eAAO,MAAM,MAAM,2DAAc,CAAA;AACjC,oHAAoH;AACpH,eAAO,MAAM,IAAI,yDAAY,CAAA;AAE7B,8DAA8D;AAC9D,eAAO,MAAM,OAAO,0LAAgC,CAAA;AAEpD,MAAM,MAAM,MAAM,GAAG,OAAO,MAAM,CAAC,IAAI,CAAA;AACvC,MAAM,MAAM,MAAM,GAAG,OAAO,MAAM,CAAC,IAAI,CAAA;AACvC,MAAM,MAAM,IAAI,GAAG,OAAO,IAAI,CAAC,IAAI,CAAA;AAEnC,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAC,IAAI,CAAA;AAIzC,6DAA6D;AAC7D,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC;IAChC,EAAE,EAAE,MAAM,CAAA;IACV,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,CAAC,CAAA;AAEF,yEAAyE;AACzE,eAAO,MAAM,IAAI,GAAI,QAAQ,UAAU,KAAG,KAGxC,CAAA;AAMF,0EAA0E;AAC1E,eAAO,MAAM,MAAM,GACjB,OAAO,KAAK,EACZ,SAAS,OAAO,KACf,CAAC,KAAK,EAAE,aAAa,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CA4BvC,CAAA;AAIH,iGAAiG;AACjG,eAAO,MAAM,OAAO,GAAI,OAAO,KAAK,KAAG,MAA6B,CAAA;AAEpE,wGAAwG;AACxG,eAAO,MAAM,aAAa,GAAI,OAAO,KAAK,KAAG,MAAmC,CAAA;AAEhF,wDAAwD;AACxD,MAAM,MAAM,UAAU,CAAC,OAAO,IAAI,QAAQ,CAAC;IACzC,KAAK,EAAE,KAAK,CAAA;IACZ,SAAS,EAAE,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,KAAK,OAAO,CAAA;IAC9C,YAAY,EAAE,IAAI,CAAA;IAClB,cAAc,EAAE,MAAM,CAAA;IACtB,iBAAiB,EAAE,MAAM,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAC,CAAA;AAEF,sGAAsG;AACtG,eAAO,MAAM,IAAI,GAAI,OAAO,EAAE,QAAQ,UAAU,CAAC,OAAO,CAAC,KAAG,IA6C3D,CAAA;AAED;6EAC6E;AAC7E,eAAO,MAAM,IAAI,GAAI,OAAO,EAC1B,cAAc,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE,OAAO,GAAG,WAAW,CAAC,KAC7D,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,KAAK,IAAI,CAgBtE,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/dialog/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAqC,MAAM,IAAI,CAAC,EAAE,MAAM,QAAQ,CAAA;AAEvE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AAG5C,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,YAAY,CAAA;AAStC,oIAAoI;AACpI,eAAO,MAAM,KAAK;;;;;EAKhB,CAAA;AAEF,MAAM,MAAM,KAAK,GAAG,OAAO,KAAK,CAAC,IAAI,CAAA;AAIrC,wEAAwE;AACxE,eAAO,MAAM,MAAM,2DAAc,CAAA;AACjC,wHAAwH;AACxH,eAAO,MAAM,MAAM,2DAAc,CAAA;AACjC,oHAAoH;AACpH,eAAO,MAAM,IAAI,yDAAY,CAAA;AAC7B,oGAAoG;AACpG,eAAO,MAAM,uBAAuB,4EAA+B,CAAA;AACnE,mFAAmF;AACnF,eAAO,MAAM,eAAe,oEAAuB,CAAA;AAEnD,8DAA8D;AAC9D,eAAO,MAAM,OAAO,0UAMnB,CAAA;AAED,MAAM,MAAM,MAAM,GAAG,OAAO,MAAM,CAAC,IAAI,CAAA;AACvC,MAAM,MAAM,MAAM,GAAG,OAAO,MAAM,CAAC,IAAI,CAAA;AACvC,MAAM,MAAM,IAAI,GAAG,OAAO,IAAI,CAAC,IAAI,CAAA;AAEnC,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAC,IAAI,CAAA;AAIzC,iIAAiI;AACjI,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC;IAChC,EAAE,EAAE,MAAM,CAAA;IACV,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB,CAAC,CAAA;AAEF,0FAA0F;AAC1F,eAAO,MAAM,IAAI,GAAI,QAAQ,UAAU,KAAG,KAKxC,CAAA;AAOF,KAAK,YAAY,GAAG,CAAC,KAAK,EAAE,aAAa,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,CAAA;AAG5D,0EAA0E;AAC1E,eAAO,MAAM,MAAM,GAAI,OAAO,KAAK,EAAE,SAAS,OAAO,KAAG,YAqGvD,CAAA;AAID,iGAAiG;AACjG,eAAO,MAAM,OAAO,GAAI,OAAO,KAAK,KAAG,MAA6B,CAAA;AAEpE,wGAAwG;AACxG,eAAO,MAAM,aAAa,GAAI,OAAO,KAAK,KAAG,MAAmC,CAAA;AAEhF,wDAAwD;AACxD,MAAM,MAAM,UAAU,CAAC,OAAO,IAAI,QAAQ,CAAC;IACzC,KAAK,EAAE,KAAK,CAAA;IACZ,SAAS,EAAE,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,KAAK,OAAO,CAAA;IAC9C,YAAY,EAAE,IAAI,CAAA;IAClB,cAAc,EAAE,MAAM,CAAA;IACtB,iBAAiB,EAAE,MAAM,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAC,CAAA;AAEF,sGAAsG;AACtG,eAAO,MAAM,IAAI,GAAI,OAAO,EAAE,QAAQ,UAAU,CAAC,OAAO,CAAC,KAAG,IA4E3D,CAAA;AAED;6EAC6E;AAC7E,eAAO,MAAM,IAAI,GAAI,OAAO,EAC1B,cAAc,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE,OAAO,GAAG,WAAW,CAAC,KAC7D,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,KAAK,IAAI,CAgBtE,CAAA"}

package/dist/ui/dialog/index.js

@@ -1,14 +1,18 @@
-import { Effect, Match as M, Option, Schema as S } from 'effect';
+import { Array, Effect, Match as M, Option, Schema as S } from 'effect';
+import { OptionExt } from '../../effectExtensions';
 import { html } from '../../html';
 import { createLazy } from '../../html/lazy';
 import { m } from '../../message';
 import { evo } from '../../struct';
 import * as Task from '../../task';
+import { TransitionState } from '../transition';
 // MODEL
-/** Schema for the dialog component's state, tracking its unique ID and open/closed status. */
+/** Schema for the dialog component's state, tracking its unique ID, open/closed status, animation support, and transition phase. */
 export const Model = S.Struct({
     id: S.String,
     isOpen: S.Boolean,
+    isAnimated: S.Boolean,
+    transitionState: TransitionState,
 });
 // MESSAGE
 /** Sent when the dialog should open. Triggers the showModal command. */
@@ -17,27 +21,78 @@ export const Opened = m('Opened');
 export const Closed = m('Closed');
 /** Placeholder message used when no action is needed, such as after a showModal or closeModal command completes. */
 export const NoOp = m('NoOp');
+/** Sent internally when a double-rAF completes, advancing the transition to its animating phase. */
+export const AdvancedTransitionFrame = m('AdvancedTransitionFrame');
+/** Sent internally when all CSS transitions on the dialog panel have completed. */
+export const EndedTransition = m('EndedTransition');
 /** Union of all messages the dialog component can produce. */
-export const Message = S.Union(Opened, Closed, NoOp);
-/** Creates an initial dialog model from a config. Defaults to closed. */
+export const Message = S.Union(Opened, Closed, NoOp, AdvancedTransitionFrame, EndedTransition);
+/** Creates an initial dialog model from a config. Defaults to closed and non-animated. */
 export const init = (config) => ({
     id: config.id,
     isOpen: config.isOpen ?? false,
+    isAnimated: config.isAnimated ?? false,
+    transitionState: 'Idle',
 });
 // UPDATE
 const dialogSelector = (id) => `#${id}`;
+const panelSelector = (id) => `#${id}-panel`;
+const withUpdateReturn = M.withReturnType();
 /** Processes a dialog message and returns the next model and commands. */
-export const update = (model, message) => M.value(message).pipe(M.withReturnType(), M.tagsExhaustive({
-    Opened: () => {
-        const maybeShow = Option.liftPredicate(Task.showModal(dialogSelector(model.id)).pipe(Effect.ignore, Effect.as(NoOp())), () => !model.isOpen);
-        return [evo(model, { isOpen: () => true }), Option.toArray(maybeShow)];
-    },
-    Closed: () => {
-        const maybeClose = Option.liftPredicate(Task.closeModal(dialogSelector(model.id)).pipe(Effect.ignore, Effect.as(NoOp())), () => model.isOpen);
-        return [evo(model, { isOpen: () => false }), Option.toArray(maybeClose)];
-    },
-    NoOp: () => [model, []],
-}));
+export const update = (model, message) => {
+    const maybeNextFrame = OptionExt.when(model.isAnimated, Task.nextFrame.pipe(Effect.as(AdvancedTransitionFrame())));
+    return M.value(message).pipe(withUpdateReturn, M.tagsExhaustive({
+        Opened: () => {
+            const maybeShow = Option.liftPredicate(Task.showModal(dialogSelector(model.id)).pipe(Effect.ignore, Effect.as(NoOp())), () => !model.isOpen);
+            return [
+                evo(model, {
+                    isOpen: () => true,
+                    transitionState: () => (model.isAnimated ? 'EnterStart' : 'Idle'),
+                }),
+                Array.getSomes([maybeShow, maybeNextFrame]),
+            ];
+        },
+        Closed: () => {
+            const isLeaving = model.transitionState === 'LeaveStart' ||
+                model.transitionState === 'LeaveAnimating';
+            if (isLeaving) {
+                return [model, []];
+            }
+            if (model.isAnimated) {
+                return [
+                    evo(model, {
+                        isOpen: () => false,
+                        transitionState: () => 'LeaveStart',
+                    }),
+                    Option.toArray(maybeNextFrame),
+                ];
+            }
+            const maybeClose = Option.liftPredicate(Task.closeModal(dialogSelector(model.id)).pipe(Effect.ignore, Effect.as(NoOp())), () => model.isOpen);
+            return [evo(model, { isOpen: () => false }), Option.toArray(maybeClose)];
+        },
+        AdvancedTransitionFrame: () => M.value(model.transitionState).pipe(withUpdateReturn, M.when('EnterStart', () => [
+            evo(model, { transitionState: () => 'EnterAnimating' }),
+            [
+                Task.waitForTransitions(panelSelector(model.id)).pipe(Effect.as(EndedTransition())),
+            ],
+        ]), M.when('LeaveStart', () => [
+            evo(model, { transitionState: () => 'LeaveAnimating' }),
+            [
+                Task.waitForTransitions(panelSelector(model.id)).pipe(Effect.as(EndedTransition())),
+            ],
+        ]), M.orElse(() => [model, []])),
+        EndedTransition: () => M.value(model.transitionState).pipe(withUpdateReturn, M.when('EnterAnimating', () => [
+            evo(model, { transitionState: () => 'Idle' }),
+            [],
+        ]), M.when('LeaveAnimating', () => [
+            evo(model, { transitionState: () => 'Idle' }),
+            [
+                Task.closeModal(dialogSelector(model.id)).pipe(Effect.ignore, Effect.as(NoOp())),
+            ],
+        ]), M.orElse(() => [model, []])),
+        NoOp: () => [model, []],
+    }));
+};
 // VIEW
 /** Returns the ID used for `aria-labelledby` on the dialog. Apply this to your title element. */
 export const titleId = (model) => `${model.id}-title`;
@@ -46,18 +101,39 @@ export const descriptionId = (model) => `${model.id}-description`;
 /** Renders a headless dialog component backed by the native `<dialog>` element with `showModal()`. */
 export const view = (config) => {
     const { AriaDescribedBy, AriaLabelledBy, Class, DataAttribute, Id, OnCancel, OnClick, keyed, } = html();
-    const { model: { id, isOpen }, toMessage, panelContent, panelClassName, backdropClassName, className, } = config;
+    const { model: { id, isOpen, transitionState }, toMessage, panelContent, panelClassName, backdropClassName, className, } = config;
+    const isLeaving = transitionState === 'LeaveStart' || transitionState === 'LeaveAnimating';
+    const isVisible = isOpen || isLeaving;
+    const transitionAttributes = M.value(transitionState).pipe(M.when('EnterStart', () => [
+        DataAttribute('closed', ''),
+        DataAttribute('enter', ''),
+        DataAttribute('transition', ''),
+    ]), M.when('EnterAnimating', () => [
+        DataAttribute('enter', ''),
+        DataAttribute('transition', ''),
+    ]), M.when('LeaveStart', () => [
+        DataAttribute('leave', ''),
+        DataAttribute('transition', ''),
+    ]), M.when('LeaveAnimating', () => [
+        DataAttribute('closed', ''),
+        DataAttribute('leave', ''),
+        DataAttribute('transition', ''),
+    ]), M.orElse(() => []));
     const dialogAttributes = [
         Id(id),
         AriaLabelledBy(`${id}-title`),
         AriaDescribedBy(`${id}-description`),
         OnCancel(toMessage(Closed())),
-        ...(isOpen ? [DataAttribute('open', '')] : []),
+        ...(isVisible ? [DataAttribute('open', '')] : []),
         ...(className ? [Class(className)] : []),
     ];
-    const backdrop = keyed('div')(`${id}-backdrop`, [Class(backdropClassName), OnClick(toMessage(Closed()))], []);
-    const panel = keyed('div')(`${id}-panel`, [Class(panelClassName)], [panelContent]);
-    const content = isOpen ? [backdrop, panel] : [];
+    const backdrop = keyed('div')(`${id}-backdrop`, [
+        Class(backdropClassName),
+        ...transitionAttributes,
+        ...(isLeaving ? [] : [OnClick(toMessage(Closed()))]),
+    ], []);
+    const panel = keyed('div')(`${id}-panel`, [Id(`${id}-panel`), Class(panelClassName), ...transitionAttributes], [panelContent]);
+    const content = isVisible ? [backdrop, panel] : [];
     return keyed('dialog')(id, dialogAttributes, content);
 };
 /** Creates a memoized dialog view. Static config is captured in a closure;

package/dist/ui/dialog/public.d.ts

@@ -1,3 +1,3 @@
-export { init, update, view, lazy, titleId, descriptionId, Model, Message, Opened, Closed, NoOp, } from './index';
+export { init, update, view, lazy, titleId, descriptionId, Model, Message, Opened, Closed, NoOp, AdvancedTransitionFrame, EndedTransition, } from './index';
 export type { InitConfig, ViewConfig } from './index';
 //# sourceMappingURL=public.d.ts.map

package/dist/ui/dialog/public.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"public.d.ts","sourceRoot":"","sources":["../../../src/ui/dialog/public.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,IAAI,EACJ,MAAM,EACN,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,aAAa,EACb,KAAK,EACL,OAAO,EACP,MAAM,EACN,MAAM,EACN,IAAI,GACL,MAAM,SAAS,CAAA;AAEhB,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA"}
+{"version":3,"file":"public.d.ts","sourceRoot":"","sources":["../../../src/ui/dialog/public.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,IAAI,EACJ,MAAM,EACN,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,aAAa,EACb,KAAK,EACL,OAAO,EACP,MAAM,EACN,MAAM,EACN,IAAI,EACJ,uBAAuB,EACvB,eAAe,GAChB,MAAM,SAAS,CAAA;AAEhB,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA"}

package/dist/ui/dialog/public.js

@@ -1 +1 @@
-export { init, update, view, lazy, titleId, descriptionId, Model, Message, Opened, Closed, NoOp, } from './index';
+export { init, update, view, lazy, titleId, descriptionId, Model, Message, Opened, Closed, NoOp, AdvancedTransitionFrame, EndedTransition, } from './index';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "foldkit",
-  "version": "0.30.0",
+  "version": "0.31.0",
   "description": "Elm-inspired UI framework powered by Effect",
   "type": "module",
   "main": "./dist/index.js",