foldkit 0.71.0 → 0.73.0

package/dist/ui/slider/index.js

@@ -0,0 +1,319 @@
+import { Effect, Equal, Function, Match as M, Option, Schema as S, Stream, String as String_, pipe, } from 'effect';
+import { createLazy, html } from '../../html';
+import { m } from '../../message';
+import { makeSubscriptions } from '../../runtime/subscription';
+import { ts } from '../../schema';
+import { evo } from '../../struct';
+// MODEL
+const Idle = ts('Idle');
+const Dragging = ts('Dragging', { originValue: S.Number });
+const DragState = S.Union(Idle, Dragging);
+/** Schema for the slider component's state. Tracks the current value, the
+ *  range (min/max/step), and the active drag phase. */
+export const Model = S.Struct({
+    id: S.String,
+    value: S.Number,
+    min: S.Number,
+    max: S.Number,
+    step: S.Number,
+    dragState: DragState,
+});
+// MESSAGE
+/** The user pressed the thumb. Starts a drag without changing the value. */
+export const PressedThumb = m('PressedThumb');
+/** The user pressed the track. Starts a drag and snaps the value to the
+ *  cursor position. Ignored while already dragging, which absorbs the bubble
+ *  from a thumb press so the value is not shifted. */
+export const PressedPointer = m('PressedPointer', { value: S.Number });
+/** The pointer moved during a drag, producing a new snapped value from the
+ *  cursor position within the track. */
+export const MovedDragPointer = m('MovedDragPointer', { value: S.Number });
+/** The pointer was released during a drag. Commits the current value. */
+export const ReleasedDragPointer = m('ReleasedDragPointer');
+/** Escape was pressed during a drag. Restores the value from the drag origin. */
+export const CancelledDrag = m('CancelledDrag');
+/** The user pressed a keyboard navigation key on the focused thumb. */
+export const PressedKeyboardNavigation = m('PressedKeyboardNavigation', {
+    direction: S.Literal('StepDecrement', 'StepIncrement', 'PageDecrement', 'PageIncrement', 'Min', 'Max'),
+});
+/** Union of all messages the slider component can produce. */
+export const Message = S.Union(PressedThumb, PressedPointer, MovedDragPointer, ReleasedDragPointer, CancelledDrag, PressedKeyboardNavigation);
+// OUT MESSAGE
+/** Emitted when the slider value changes. The parent uses this to react to
+ *  value updates — e.g. to run validation or trigger a side effect. */
+export const ChangedValue = ts('ChangedValue', { value: S.Number });
+/** Union of all out-messages the slider component can emit to its parent. */
+export const OutMessage = ChangedValue;
+/** Creates an initial slider model from a config. The initial value is
+ *  snapped to the step and clamped into range. */
+export const init = (config) => ({
+    id: config.id,
+    value: snapAndClamp(config.initialValue, config.min, config.max, config.step),
+    min: config.min,
+    max: config.max,
+    step: config.step,
+    dragState: Idle(),
+});
+// HELPERS
+const stepDecimals = (step) => {
+    const text = step.toString();
+    return pipe(text, String_.indexOf('.'), Option.match({
+        onNone: () => 0,
+        onSome: dotIndex => text.length - dotIndex - 1,
+    }));
+};
+const roundToStepPrecision = (value, step) => {
+    const decimals = stepDecimals(step);
+    return Number(value.toFixed(decimals));
+};
+const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
+const snapAndClamp = (value, min, max, step) => {
+    const snapped = min + Math.round((value - min) / step) * step;
+    return roundToStepPrecision(clamp(snapped, min, max), step);
+};
+/** Computes the fraction (0–1) of a value between min and max. Returns 0 when
+ *  the range has zero width. */
+export const fractionOfValue = (model) => {
+    const range = model.max - model.min;
+    if (range <= 0) {
+        return 0;
+    }
+    else {
+        return clamp((model.value - model.min) / range, 0, 1);
+    }
+};
+const PAGE_STEP_MULTIPLIER = 10;
+const nextValueForDirection = (model, direction) => M.value(direction).pipe(M.withReturnType(), M.when('StepIncrement', () => snapAndClamp(model.value + model.step, model.min, model.max, model.step)), M.when('StepDecrement', () => snapAndClamp(model.value - model.step, model.min, model.max, model.step)), M.when('PageIncrement', () => snapAndClamp(model.value + model.step * PAGE_STEP_MULTIPLIER, model.min, model.max, model.step)), M.when('PageDecrement', () => snapAndClamp(model.value - model.step * PAGE_STEP_MULTIPLIER, model.min, model.max, model.step)), M.when('Min', () => model.min), M.when('Max', () => model.max), M.exhaustive);
+const withUpdateReturn = M.withReturnType();
+const withValue = (model, nextValue, commands) => {
+    if (nextValue === model.value) {
+        return [model, commands, Option.none()];
+    }
+    else {
+        return [
+            evo(model, { value: () => nextValue }),
+            commands,
+            Option.some(ChangedValue({ value: nextValue })),
+        ];
+    }
+};
+/** Processes a slider message and returns the next model, commands, and an
+ *  optional out-message for the parent. */
+export const update = (model, message) => M.value(message).pipe(withUpdateReturn, M.tagsExhaustive({
+    PressedThumb: () => M.value(model.dragState).pipe(withUpdateReturn, M.tag('Dragging', () => [model, [], Option.none()]), M.orElse(() => [
+        evo(model, {
+            dragState: () => Dragging({ originValue: model.value }),
+        }),
+        [],
+        Option.none(),
+    ])),
+    // NOTE: the pointerdown event on the thumb bubbles to the track, so a
+    // thumb press also dispatches PressedPointer. Short-circuit when already
+    // Dragging so the bubbled track handler cannot shift the value away
+    // from the thumb's current position. Fine-grained sliders (e.g. step
+    // 0.05) see a visible jump without this guard, because the cursor sits
+    // off-center on a non-zero-width thumb.
+    PressedPointer: ({ value }) => M.value(model.dragState).pipe(withUpdateReturn, M.tag('Dragging', () => [model, [], Option.none()]), M.orElse(() => {
+        const snapped = snapAndClamp(value, model.min, model.max, model.step);
+        const [modelWithValue, commands, maybeOut] = withValue(model, snapped, []);
+        return [
+            evo(modelWithValue, {
+                dragState: () => Dragging({ originValue: model.value }),
+            }),
+            commands,
+            maybeOut,
+        ];
+    })),
+    MovedDragPointer: ({ value }) => M.value(model.dragState).pipe(withUpdateReturn, M.tag('Dragging', () => withValue(model, snapAndClamp(value, model.min, model.max, model.step), [])), M.orElse(() => [model, [], Option.none()])),
+    ReleasedDragPointer: () => M.value(model.dragState).pipe(withUpdateReturn, M.tag('Dragging', () => [
+        evo(model, { dragState: () => Idle() }),
+        [],
+        Option.none(),
+    ]), M.orElse(() => [model, [], Option.none()])),
+    CancelledDrag: () => M.value(model.dragState).pipe(withUpdateReturn, M.tag('Dragging', ({ originValue }) => {
+        const restored = evo(model, {
+            dragState: () => Idle(),
+        });
+        return withValue(restored, originValue, []);
+    }), M.orElse(() => [model, [], Option.none()])),
+    PressedKeyboardNavigation: ({ direction }) => withValue(model, nextValueForDirection(model, direction), []),
+}));
+// SUBSCRIPTION
+const DragActivity = S.Literal('Idle', 'Active');
+const dragActivityFromModel = (model) => M.value(model.dragState).pipe(M.withReturnType(), M.tag('Dragging', () => 'Active'), M.orElse(() => 'Idle'));
+const trackElement = (id) => Option.fromNullable(document.querySelector(`[data-slider-track-id="${id}"]`));
+const valueFromClientX = (clientX, trackElement_, min, max) => {
+    const rect = trackElement_.getBoundingClientRect();
+    if (rect.width === 0) {
+        return min;
+    }
+    else {
+        const fraction = clamp((clientX - rect.left) / rect.width, 0, 1);
+        return min + fraction * (max - min);
+    }
+};
+/** Schema describing the subscription dependencies for document-level drag
+ *  tracking. */
+export const SubscriptionDeps = S.Struct({
+    documentPointer: S.Struct({
+        dragActivity: DragActivity,
+        id: S.String,
+        min: S.Number,
+        max: S.Number,
+    }),
+    documentEscape: S.Struct({
+        dragActivity: DragActivity,
+    }),
+});
+/** Document-level subscriptions for pointer and keyboard events during slider
+ *  drag. */
+export const subscriptions = makeSubscriptions(SubscriptionDeps)({
+    documentPointer: {
+        modelToDependencies: model => ({
+            dragActivity: dragActivityFromModel(model),
+            id: model.id,
+            min: model.min,
+            max: model.max,
+        }),
+        dependenciesToStream: ({ dragActivity, id, min, max }) => {
+            const pointerEvents = Stream.merge(Stream.fromEventListener(document, 'pointermove').pipe(Stream.mapEffect(event => Effect.sync(() => Option.map(trackElement(id), element => MovedDragPointer({
+                value: valueFromClientX(event.clientX, element, min, max),
+            })))), Stream.filterMap(Function.identity)), Stream.fromEventListener(document, 'pointerup').pipe(Stream.map(() => ReleasedDragPointer())));
+            // NOTE: prevents text selection and locks cursor to grabbing while the
+            // user drags the thumb. Matches the approach used in drag-and-drop.
+            const documentDragStyles = Stream.async(_emit => {
+                document.documentElement.style.setProperty('user-select', 'none');
+                document.documentElement.style.setProperty('-webkit-user-select', 'none');
+                const cursorStyle = document.createElement('style');
+                cursorStyle.textContent = '* { cursor: grabbing !important; }';
+                document.head.appendChild(cursorStyle);
+                return Effect.sync(() => {
+                    document.documentElement.style.removeProperty('user-select');
+                    document.documentElement.style.removeProperty('-webkit-user-select');
+                    cursorStyle.remove();
+                });
+            });
+            return Stream.when(Stream.merge(pointerEvents, documentDragStyles), () => dragActivity === 'Active');
+        },
+    },
+    documentEscape: {
+        modelToDependencies: model => ({
+            dragActivity: dragActivityFromModel(model),
+        }),
+        dependenciesToStream: ({ dragActivity }) => Stream.when(Stream.fromEventListener(document, 'keydown').pipe(Stream.filter(({ key }) => key === 'Escape'), Stream.map(() => CancelledDrag())), () => dragActivity === 'Active'),
+    },
+});
+// VIEW
+const LEFT_MOUSE_BUTTON = 0;
+const labelId = (id) => `${id}-label`;
+const keyToDirection = (key) => M.value(key).pipe(M.withReturnType(), M.whenOr('ArrowRight', 'ArrowUp', () => 'StepIncrement'), M.whenOr('ArrowLeft', 'ArrowDown', () => 'StepDecrement'), M.when('PageUp', () => 'PageIncrement'), M.when('PageDown', () => 'PageDecrement'), M.when('Home', () => 'Min'), M.when('End', () => 'Max'), M.option);
+const percentString = (fraction) => `${Math.round(fraction * 10000) / 100}%`;
+/** Renders an accessible slider by building ARIA attribute groups and
+ *  delegating layout to the consumer's `toView` callback. Follows the
+ *  WAI-ARIA slider pattern — role="slider" on the thumb, aria-valuemin /
+ *  aria-valuemax / aria-valuenow, keyboard navigation by step / page / home /
+ *  end. Pointer drag is handled by the component's document-level
+ *  subscriptions. */
+export const view = (config) => {
+    const { AriaDisabled, AriaLabel, AriaLabelledBy, AriaOrientation, AriaValuemax, AriaValuemin, AriaValuenow, AriaValuetext, DataAttribute, Id, Name, OnKeyDownPreventDefault, OnPointerDown, Role, Style, Tabindex, Type, Value, } = html();
+    const { model, toParentMessage, formatValue, isDisabled = false, name, } = config;
+    const { id, value, min, max } = model;
+    const isDragging = model.dragState._tag === 'Dragging';
+    const fraction = fractionOfValue(model);
+    const handleKeyDown = (key) => Option.map(keyToDirection(key), direction => toParentMessage(PressedKeyboardNavigation({ direction })));
+    const pointerAtClientX = (clientX) => Option.map(trackElement(id), element => toParentMessage(PressedPointer({
+        value: valueFromClientX(clientX, element, min, max),
+    })));
+    const trackPointerHandler = (_pointerType, button, _screenX, _screenY, _timeStamp, clientX) => pipe(button, Option.liftPredicate(Equal.equals(LEFT_MOUSE_BUTTON)), Option.flatMap(() => pointerAtClientX(clientX)));
+    const thumbPointerHandler = (_pointerType, button) => pipe(button, Option.liftPredicate(Equal.equals(LEFT_MOUSE_BUTTON)), Option.map(() => toParentMessage(PressedThumb())));
+    const stateAttributes = [
+        ...(isDragging ? [DataAttribute('dragging', '')] : []),
+        ...(isDisabled ? [DataAttribute('disabled', '')] : []),
+    ];
+    const rootAttributes = [
+        DataAttribute('slider-id', id),
+        DataAttribute('orientation', 'horizontal'),
+        ...stateAttributes,
+    ];
+    const trackInteractionAttributes = isDisabled
+        ? []
+        : [OnPointerDown(trackPointerHandler)];
+    const trackAttributes = [
+        DataAttribute('slider-track-id', id),
+        Style({ position: 'relative', 'touch-action': 'none' }),
+        ...stateAttributes,
+        ...trackInteractionAttributes,
+    ];
+    const filledTrackAttributes = [
+        Style({
+            position: 'absolute',
+            left: '0',
+            top: '0',
+            bottom: '0',
+            width: percentString(fraction),
+            'pointer-events': 'none',
+        }),
+        ...stateAttributes,
+    ];
+    const resolveThumbLabel = () => {
+        if (config.ariaLabel !== undefined) {
+            return [AriaLabel(config.ariaLabel)];
+        }
+        else if (config.ariaLabelledBy !== undefined) {
+            return [AriaLabelledBy(config.ariaLabelledBy)];
+        }
+        else {
+            return [AriaLabelledBy(labelId(id))];
+        }
+    };
+    const thumbLabelAttributes = resolveThumbLabel();
+    const maybeAriaValuetext = formatValue !== undefined ? [AriaValuetext(formatValue(value))] : [];
+    const thumbInteractionAttributes = isDisabled
+        ? []
+        : [
+            OnPointerDown(thumbPointerHandler),
+            OnKeyDownPreventDefault(handleKeyDown),
+        ];
+    const thumbAttributes = [
+        Id(`${id}-thumb`),
+        Role('slider'),
+        Tabindex(0),
+        AriaOrientation('horizontal'),
+        AriaValuemin(min),
+        AriaValuemax(max),
+        AriaValuenow(value),
+        ...maybeAriaValuetext,
+        ...thumbLabelAttributes,
+        ...(isDisabled ? [AriaDisabled(true)] : []),
+        Style({
+            position: 'absolute',
+            left: percentString(fraction),
+            transform: 'translateX(-50%)',
+            'touch-action': 'none',
+        }),
+        ...stateAttributes,
+        ...thumbInteractionAttributes,
+    ];
+    const labelAttributes = [Id(labelId(id))];
+    const hiddenInputAttributes = name !== undefined
+        ? [Type('hidden'), Name(name), Value(value.toString())]
+        : [];
+    return config.toView({
+        root: rootAttributes,
+        track: trackAttributes,
+        filledTrack: filledTrackAttributes,
+        thumb: thumbAttributes,
+        label: labelAttributes,
+        hiddenInput: hiddenInputAttributes,
+    });
+};
+/** Creates a memoized slider view. Static config is captured in a closure;
+ *  only `model` and `toParentMessage` are compared per render via `createLazy`. */
+export const lazy = (staticConfig) => {
+    const lazyView = createLazy();
+    return (model, toParentMessage) => lazyView((currentModel, currentToMessage) => view({
+        ...staticConfig,
+        model: currentModel,
+        toParentMessage: currentToMessage,
+    }), [model, toParentMessage]);
+};

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

@@ -0,0 +1,3 @@
+export { init, update, view, lazy, subscriptions, fractionOfValue, Model, Message, OutMessage, SubscriptionDeps, } from './index';
+export type { InitConfig, ViewConfig, SliderAttributes, PressedThumb, PressedPointer, MovedDragPointer, ReleasedDragPointer, CancelledDrag, PressedKeyboardNavigation, } from './index';
+//# sourceMappingURL=public.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"public.d.ts","sourceRoot":"","sources":["../../../src/ui/slider/public.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,IAAI,EACJ,MAAM,EACN,IAAI,EACJ,IAAI,EACJ,aAAa,EACb,eAAe,EACf,KAAK,EACL,OAAO,EACP,UAAU,EACV,gBAAgB,GACjB,MAAM,SAAS,CAAA;AAEhB,YAAY,EACV,UAAU,EACV,UAAU,EACV,gBAAgB,EAChB,YAAY,EACZ,cAAc,EACd,gBAAgB,EAChB,mBAAmB,EACnB,aAAa,EACb,yBAAyB,GAC1B,MAAM,SAAS,CAAA"}

package/dist/ui/slider/public.js

@@ -0,0 +1 @@
+export { init, update, view, lazy, subscriptions, fractionOfValue, Model, Message, OutMessage, SubscriptionDeps, } from './index';

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

@@ -1,10 +1,10 @@
 import { Schema as S } from 'effect';
 import { type Attribute, type Html } from '../../html';
-import { Dismissed, DismissedAll, ElapsedDuration, GotTransitionMessage, HoveredEntry, LeftEntry, Position, Variant } from './schema';
+import { Dismissed, DismissedAll, ElapsedDuration, GotAnimationMessage, HoveredEntry, LeftEntry, Position, Variant } from './schema';
 import { DismissAfter } from './update';
 export type { InitConfig } from './schema';
 export type { ShowInput } from './update';
-export { Variant, Position, Dismissed, DismissedAll, ElapsedDuration, HoveredEntry, LeftEntry, GotTransitionMessage, DismissAfter, };
+export { Variant, Position, Dismissed, DismissedAll, ElapsedDuration, HoveredEntry, LeftEntry, GotAnimationMessage, DismissAfter, };
 /** Handlers passed to `renderEntry`. Attach `dismiss` to a close button's
  *  `OnClick` to let users dismiss the entry manually. */
 export type EntryHandlers<ParentMessage> = Readonly<{
@@ -18,7 +18,7 @@ export type EntryHandlers<ParentMessage> = Readonly<{
  *  The payload is whatever content shape the consumer supplies via Schema.
  *  The component never reads it — it flows through to `renderEntry`. The
  *  component itself owns only lifecycle and a11y fields (id, variant,
- *  transition, dismiss timer, hover state).
+ *  animation, dismiss timer, hover state).
  *
  *  Consume the bound module's exports everywhere — `Toast.Model` in your app
  *  Model, `Toast.Message` in your parent Message union, `Toast.show` /
@@ -44,7 +44,7 @@ export declare const make: <A, I>(payloadSchema: S.Schema<A, I>) => {
         model: {
             readonly entries: readonly {
                 readonly id: string;
-                readonly transition: {
+                readonly animation: {
                     readonly id: string;
                     readonly isShowing: boolean;
                     readonly transitionState: "Idle" | "EnterStart" | "EnterAnimating" | "LeaveStart" | "LeaveAnimating";
@@ -63,7 +63,7 @@ export declare const make: <A, I>(payloadSchema: S.Schema<A, I>) => {
         toParentMessage: (message: Dismissed | HoveredEntry | LeftEntry) => ParentMessage;
         renderEntry: (entry: {
             readonly id: string;
-            readonly transition: {
+            readonly animation: {
                 readonly id: string;
                 readonly isShowing: boolean;
                 readonly transitionState: "Idle" | "EnterStart" | "EnterAnimating" | "LeaveStart" | "LeaveAnimating";
@@ -86,7 +86,7 @@ export declare const make: <A, I>(payloadSchema: S.Schema<A, I>) => {
         model: {
             readonly entries: readonly {
                 readonly id: string;
-                readonly transition: {
+                readonly animation: {
                     readonly id: string;
                     readonly isShowing: boolean;
                     readonly transitionState: "Idle" | "EnterStart" | "EnterAnimating" | "LeaveStart" | "LeaveAnimating";
@@ -105,7 +105,7 @@ export declare const make: <A, I>(payloadSchema: S.Schema<A, I>) => {
         toParentMessage: (message: Dismissed | HoveredEntry | LeftEntry) => ParentMessage;
         renderEntry: (entry: {
             readonly id: string;
-            readonly transition: {
+            readonly animation: {
                 readonly id: string;
                 readonly isShowing: boolean;
                 readonly transitionState: "Idle" | "EnterStart" | "EnterAnimating" | "LeaveStart" | "LeaveAnimating";
@@ -126,7 +126,7 @@ export declare const make: <A, I>(payloadSchema: S.Schema<A, I>) => {
     }>, "model" | "toParentMessage" | "renderEntry">) => ((model: {
         readonly entries: readonly {
             readonly id: string;
-            readonly transition: {
+            readonly animation: {
                 readonly id: string;
                 readonly isShowing: boolean;
                 readonly transitionState: "Idle" | "EnterStart" | "EnterAnimating" | "LeaveStart" | "LeaveAnimating";
@@ -142,7 +142,7 @@ export declare const make: <A, I>(payloadSchema: S.Schema<A, I>) => {
         readonly nextEntryKey: number;
     }, toParentMessage: (message: Dismissed | HoveredEntry | LeftEntry) => ParentMessage, renderEntry: (entry: {
         readonly id: string;
-        readonly transition: {
+        readonly animation: {
             readonly id: string;
             readonly isShowing: boolean;
             readonly transitionState: "Idle" | "EnterStart" | "EnterAnimating" | "LeaveStart" | "LeaveAnimating";
@@ -158,7 +158,7 @@ export declare const make: <A, I>(payloadSchema: S.Schema<A, I>) => {
     readonly Entry: S.Struct<{
         id: typeof S.String;
         variant: S.Literal<["Info", "Success", "Warning", "Error"]>;
-        transition: S.Struct<{
+        animation: S.Struct<{
             id: typeof S.String;
             isShowing: typeof S.Boolean;
             transitionState: S.Literal<["Idle", "EnterStart", "EnterAnimating", "LeaveStart", "LeaveAnimating"]>;
@@ -174,7 +174,7 @@ export declare const make: <A, I>(payloadSchema: S.Schema<A, I>) => {
         entries: S.Array$<S.Struct<{
             id: typeof S.String;
             variant: S.Literal<["Info", "Success", "Warning", "Error"]>;
-            transition: S.Struct<{
+            animation: S.Struct<{
                 id: typeof S.String;
                 isShowing: typeof S.Boolean;
                 transitionState: S.Literal<["Idle", "EnterStart", "EnterAnimating", "LeaveStart", "LeaveAnimating"]>;
@@ -190,7 +190,7 @@ export declare const make: <A, I>(payloadSchema: S.Schema<A, I>) => {
         entry: S.Struct<{
             id: typeof S.String;
             variant: S.Literal<["Info", "Success", "Warning", "Error"]>;
-            transition: S.Struct<{
+            animation: S.Struct<{
                 id: typeof S.String;
                 isShowing: typeof S.Boolean;
                 transitionState: S.Literal<["Idle", "EnterStart", "EnterAnimating", "LeaveStart", "LeaveAnimating"]>;
@@ -209,15 +209,15 @@ export declare const make: <A, I>(payloadSchema: S.Schema<A, I>) => {
         entryId: typeof S.String;
     }>, import("../../schema").CallableTaggedStruct<"LeftEntry", {
         entryId: typeof S.String;
-    }>, import("../../schema").CallableTaggedStruct<"GotTransitionMessage", {
+    }>, import("../../schema").CallableTaggedStruct<"GotAnimationMessage", {
         entryId: typeof S.String;
-        message: S.Union<[import("../../schema").CallableTaggedStruct<"Showed", {}>, import("../../schema").CallableTaggedStruct<"Hid", {}>, import("../../schema").CallableTaggedStruct<"AdvancedTransitionFrame", {}>, import("../../schema").CallableTaggedStruct<"EndedTransition", {}>]>;
+        message: S.Union<[import("../../schema").CallableTaggedStruct<"Showed", {}>, import("../../schema").CallableTaggedStruct<"Hid", {}>, import("../../schema").CallableTaggedStruct<"AdvancedAnimationFrame", {}>, import("../../schema").CallableTaggedStruct<"EndedAnimation", {}>]>;
     }>]>;
     readonly Added: import("../../schema").CallableTaggedStruct<"Added", {
         entry: S.Struct<{
             id: typeof S.String;
             variant: S.Literal<["Info", "Success", "Warning", "Error"]>;
-            transition: S.Struct<{
+            animation: S.Struct<{
                 id: typeof S.String;
                 isShowing: typeof S.Boolean;
                 transitionState: S.Literal<["Idle", "EnterStart", "EnterAnimating", "LeaveStart", "LeaveAnimating"]>;
@@ -234,7 +234,7 @@ export declare const make: <A, I>(payloadSchema: S.Schema<A, I>) => {
     }>) => {
         readonly entries: readonly {
             readonly id: string;
-            readonly transition: {
+            readonly animation: {
                 readonly id: string;
                 readonly isShowing: boolean;
                 readonly transitionState: "Idle" | "EnterStart" | "EnterAnimating" | "LeaveStart" | "LeaveAnimating";
@@ -252,7 +252,7 @@ export declare const make: <A, I>(payloadSchema: S.Schema<A, I>) => {
     readonly update: (model: {
         readonly entries: readonly {
             readonly id: string;
-            readonly transition: {
+            readonly animation: {
                 readonly id: string;
                 readonly isShowing: boolean;
                 readonly transitionState: "Idle" | "EnterStart" | "EnterAnimating" | "LeaveStart" | "LeaveAnimating";
@@ -282,22 +282,22 @@ export declare const make: <A, I>(payloadSchema: S.Schema<A, I>) => {
         readonly _tag: "LeftEntry";
         readonly entryId: string;
     } | {
-        readonly _tag: "GotTransitionMessage";
+        readonly _tag: "GotAnimationMessage";
         readonly message: {
             readonly _tag: "Showed";
         } | {
             readonly _tag: "Hid";
         } | {
-            readonly _tag: "AdvancedTransitionFrame";
+            readonly _tag: "AdvancedAnimationFrame";
         } | {
-            readonly _tag: "EndedTransition";
+            readonly _tag: "EndedAnimation";
         };
         readonly entryId: string;
     } | {
         readonly _tag: "Added";
         readonly entry: {
             readonly id: string;
-            readonly transition: {
+            readonly animation: {
                 readonly id: string;
                 readonly isShowing: boolean;
                 readonly transitionState: "Idle" | "EnterStart" | "EnterAnimating" | "LeaveStart" | "LeaveAnimating";
@@ -311,7 +311,7 @@ export declare const make: <A, I>(payloadSchema: S.Schema<A, I>) => {
     }) => readonly [{
         readonly entries: readonly {
             readonly id: string;
-            readonly transition: {
+            readonly animation: {
                 readonly id: string;
                 readonly isShowing: boolean;
                 readonly transitionState: "Idle" | "EnterStart" | "EnterAnimating" | "LeaveStart" | "LeaveAnimating";
@@ -343,22 +343,22 @@ export declare const make: <A, I>(payloadSchema: S.Schema<A, I>) => {
             readonly _tag: "LeftEntry";
             readonly entryId: string;
         } | {
-            readonly _tag: "GotTransitionMessage";
+            readonly _tag: "GotAnimationMessage";
             readonly message: {
                 readonly _tag: "Showed";
             } | {
                 readonly _tag: "Hid";
             } | {
-                readonly _tag: "AdvancedTransitionFrame";
+                readonly _tag: "AdvancedAnimationFrame";
             } | {
-                readonly _tag: "EndedTransition";
+                readonly _tag: "EndedAnimation";
             };
             readonly entryId: string;
         } | {
             readonly _tag: "Added";
             readonly entry: {
                 readonly id: string;
-                readonly transition: {
+                readonly animation: {
                     readonly id: string;
                     readonly isShowing: boolean;
                     readonly transitionState: "Idle" | "EnterStart" | "EnterAnimating" | "LeaveStart" | "LeaveAnimating";
@@ -374,7 +374,7 @@ export declare const make: <A, I>(payloadSchema: S.Schema<A, I>) => {
     readonly show: (model: {
         readonly entries: readonly {
             readonly id: string;
-            readonly transition: {
+            readonly animation: {
                 readonly id: string;
                 readonly isShowing: boolean;
                 readonly transitionState: "Idle" | "EnterStart" | "EnterAnimating" | "LeaveStart" | "LeaveAnimating";
@@ -396,7 +396,7 @@ export declare const make: <A, I>(payloadSchema: S.Schema<A, I>) => {
     }>) => readonly [{
         readonly entries: readonly {
             readonly id: string;
-            readonly transition: {
+            readonly animation: {
                 readonly id: string;
                 readonly isShowing: boolean;
                 readonly transitionState: "Idle" | "EnterStart" | "EnterAnimating" | "LeaveStart" | "LeaveAnimating";
@@ -428,22 +428,22 @@ export declare const make: <A, I>(payloadSchema: S.Schema<A, I>) => {
             readonly _tag: "LeftEntry";
             readonly entryId: string;
         } | {
-            readonly _tag: "GotTransitionMessage";
+            readonly _tag: "GotAnimationMessage";
             readonly message: {
                 readonly _tag: "Showed";
             } | {
                 readonly _tag: "Hid";
             } | {
-                readonly _tag: "AdvancedTransitionFrame";
+                readonly _tag: "AdvancedAnimationFrame";
             } | {
-                readonly _tag: "EndedTransition";
+                readonly _tag: "EndedAnimation";
             };
             readonly entryId: string;
         } | {
             readonly _tag: "Added";
             readonly entry: {
                 readonly id: string;
-                readonly transition: {
+                readonly animation: {
                     readonly id: string;
                     readonly isShowing: boolean;
                     readonly transitionState: "Idle" | "EnterStart" | "EnterAnimating" | "LeaveStart" | "LeaveAnimating";
@@ -459,7 +459,7 @@ export declare const make: <A, I>(payloadSchema: S.Schema<A, I>) => {
     readonly dismiss: (model: {
         readonly entries: readonly {
             readonly id: string;
-            readonly transition: {
+            readonly animation: {
                 readonly id: string;
                 readonly isShowing: boolean;
                 readonly transitionState: "Idle" | "EnterStart" | "EnterAnimating" | "LeaveStart" | "LeaveAnimating";
@@ -476,7 +476,7 @@ export declare const make: <A, I>(payloadSchema: S.Schema<A, I>) => {
     }, entryId: string) => readonly [{
         readonly entries: readonly {
             readonly id: string;
-            readonly transition: {
+            readonly animation: {
                 readonly id: string;
                 readonly isShowing: boolean;
                 readonly transitionState: "Idle" | "EnterStart" | "EnterAnimating" | "LeaveStart" | "LeaveAnimating";
@@ -508,22 +508,22 @@ export declare const make: <A, I>(payloadSchema: S.Schema<A, I>) => {
             readonly _tag: "LeftEntry";
             readonly entryId: string;
         } | {
-            readonly _tag: "GotTransitionMessage";
+            readonly _tag: "GotAnimationMessage";
             readonly message: {
                 readonly _tag: "Showed";
             } | {
                 readonly _tag: "Hid";
             } | {
-                readonly _tag: "AdvancedTransitionFrame";
+                readonly _tag: "AdvancedAnimationFrame";
             } | {
-                readonly _tag: "EndedTransition";
+                readonly _tag: "EndedAnimation";
             };
             readonly entryId: string;
         } | {
             readonly _tag: "Added";
             readonly entry: {
                 readonly id: string;
-                readonly transition: {
+                readonly animation: {
                     readonly id: string;
                     readonly isShowing: boolean;
                     readonly transitionState: "Idle" | "EnterStart" | "EnterAnimating" | "LeaveStart" | "LeaveAnimating";
@@ -539,7 +539,7 @@ export declare const make: <A, I>(payloadSchema: S.Schema<A, I>) => {
     readonly dismissAll: (model: {
         readonly entries: readonly {
             readonly id: string;
-            readonly transition: {
+            readonly animation: {
                 readonly id: string;
                 readonly isShowing: boolean;
                 readonly transitionState: "Idle" | "EnterStart" | "EnterAnimating" | "LeaveStart" | "LeaveAnimating";
@@ -556,7 +556,7 @@ export declare const make: <A, I>(payloadSchema: S.Schema<A, I>) => {
     }) => readonly [{
         readonly entries: readonly {
             readonly id: string;
-            readonly transition: {
+            readonly animation: {
                 readonly id: string;
                 readonly isShowing: boolean;
                 readonly transitionState: "Idle" | "EnterStart" | "EnterAnimating" | "LeaveStart" | "LeaveAnimating";
@@ -588,22 +588,22 @@ export declare const make: <A, I>(payloadSchema: S.Schema<A, I>) => {
             readonly _tag: "LeftEntry";
             readonly entryId: string;
         } | {
-            readonly _tag: "GotTransitionMessage";
+            readonly _tag: "GotAnimationMessage";
             readonly message: {
                 readonly _tag: "Showed";
             } | {
                 readonly _tag: "Hid";
             } | {
-                readonly _tag: "AdvancedTransitionFrame";
+                readonly _tag: "AdvancedAnimationFrame";
             } | {
-                readonly _tag: "EndedTransition";
+                readonly _tag: "EndedAnimation";
             };
             readonly entryId: string;
         } | {
             readonly _tag: "Added";
             readonly entry: {
                 readonly id: string;
-                readonly transition: {
+                readonly animation: {
                     readonly id: string;
                     readonly isShowing: boolean;
                     readonly transitionState: "Idle" | "EnterStart" | "EnterAnimating" | "LeaveStart" | "LeaveAnimating";