@foldkit/ui 0.127.0 → 0.128.0

package/dist/tabs/index.d.ts

@@ -1,7 +1,7 @@
 import { Effect, Option, Schema as S } from 'effect';
 import * as Command from 'foldkit/command';
 import { type ChildAttribute, type Html } from 'foldkit/html';
-import { type Reflect2, type View as SubmodelView } from 'foldkit/submodel';
+import { type View as SubmodelView } from 'foldkit/submodel';
 export { wrapIndex, findFirstEnabledIndex, keyToIndex } from '../keyboard.js';
 /** Controls the tab list layout direction and which arrow keys navigate between tabs. */
 export declare const Orientation: S.Literals<readonly ["Horizontal", "Vertical"]>;
@@ -9,15 +9,19 @@ export type Orientation = typeof Orientation.Type;
 /** Controls whether tabs activate on focus (`Automatic`) or require an explicit selection (`Manual`). */
 export declare const ActivationMode: S.Literals<readonly ["Automatic", "Manual"]>;
 export type ActivationMode = typeof ActivationMode.Type;
-/** Schema for the tabs component's state, tracking active/focused indices and activation mode. */
+/** Schema for the tabs component's private interaction state. The active
+ *  tab is owned by the parent and passed in via `ViewInputs.selectedValue`,
+ *  so it is not stored here. `maybeFocusedIndex` is the roving-tabindex
+ *  cursor: `None` means keyboard focus follows the selected tab, and `Manual`
+ *  activation stores `Some(index)` while focus diverges from the selection. */
 export declare const Model: S.Struct<{
     readonly id: S.String;
-    readonly activeIndex: S.Number;
-    readonly focusedIndex: S.Number;
+    readonly maybeFocusedIndex: S.Option<S.Number>;
     readonly activationMode: S.Literals<readonly ["Automatic", "Manual"]>;
 }>;
 export type Model = typeof Model.Type;
-/** Sent when a tab is selected via click or keyboard. Updates both the active and focused indices. */
+/** Sent when a tab is selected via click or keyboard. Commits the tab as the
+ *  new selection and moves focus onto it. */
 export declare const SelectedTab: import("foldkit/schema").CallableTaggedStruct<"SelectedTab", {
     index: S.Number;
     value: S.String;
@@ -59,10 +63,11 @@ export type OutMessage<Value extends string = string> = Selected<Value>;
 /** Configuration for creating a tabs model with `init`. */
 export type InitConfig = Readonly<{
     id: string;
-    activeIndex?: number;
     activationMode?: ActivationMode;
 }>;
-/** Creates an initial tabs model from a config. Defaults to first tab and automatic activation. */
+/** Creates an initial tabs model from a config. Focus follows the selected
+ *  tab until the user navigates in `Manual` mode, so `maybeFocusedIndex`
+ *  starts `None`. Defaults to automatic activation. */
 export declare const init: (config: InitConfig) => Model;
 /** Moves focus to the tab at the given index. */
 export declare const FocusTab: Command.CommandDefinitionWithArgs<"FocusTab", {
@@ -76,20 +81,11 @@ type UpdateReturn = readonly [
     ReadonlyArray<Command.Command<Message>>,
     Option.Option<OutMessage>
 ];
-/** Processes a tabs message and returns the next model, commands, and an optional OutMessage. `Selected` fires when a tab is committed via click or keyboard. */
+/** Processes a tabs message and returns the next model, commands, and an
+ *  optional OutMessage. `Selected` fires when a tab is committed via click or
+ *  keyboard; the parent stores the new value and passes it back in as
+ *  `selectedValue`. */
 export declare const update: (model: Model, message: Message) => UpdateReturn;
-/** Programmatically selects a tab. Emits a `Selected` OutMessage. */
-export declare const selectTab: (model: Model, value: string, index: number) => UpdateReturn;
-/** Reflects an externally-sourced active tab onto the model without
- *  emitting an OutMessage or running the focus command. Use this to mirror
- *  external truth (a deep link, restored storage) onto the active tab.
- *  Contrast with `selectTab`, which represents a user or programmatic
- *  *choice*: it focuses the tab and emits `Selected`. Takes the tab `value`
- *  plus the `options` list (mirroring `RadioGroup.select`) because Tabs
- *  stores the active *index* internally, so the value is resolved to an
- *  index. A value not present in `options` is a no-op. Returns the model
- *  directly because it produces no commands and no OutMessage. */
-export declare const reflectSelectedTab: Reflect2<Model, string, ReadonlyArray<string>>;
 /** Per-tab render info passed to the consumer's `toView`. Generic over
  *  `Value extends string`: when `Tabs.create<MyUnion>()` is declared,
  *  `tab.value` is typed `MyUnion` so the consumer can switch on it without
@@ -109,9 +105,9 @@ export type TabInfo<Value extends string = string> = Readonly<{
  *  - `tabs`: one entry per tab in `viewInputs.tabs`, in the same order, with
  *    the tab button's attribute bundle, the panel's attribute bundle,
  *    and derived state.
- *  - `activeIndex`: the currently-active tab index, convenient when the
- *    consumer wants to render only the active panel (vs all panels with
- *    `Hidden` for transitions). */
+ *  - `activeIndex`: the index of `viewInputs.selectedValue` within
+ *    `viewInputs.tabs`, convenient when the consumer wants to render only the
+ *    active panel (vs all panels with `Hidden` for transitions). */
 export type RenderInfo<Value extends string = string> = Readonly<{
     tablist: ReadonlyArray<ChildAttribute>;
     tabs: ReadonlyArray<TabInfo<Value>>;
@@ -121,26 +117,32 @@ export type RenderInfo<Value extends string = string> = Readonly<{
  *  Generic over `Value extends string` so consumers using
  *  `Tabs.create<MyUnion>()` receive `tab.value: MyUnion` in `toView`
  *  and `(value: MyUnion, index) => boolean` in `isTabDisabled`, without
- *  casting. */
+ *  casting.
+ *
+ *  - `selectedValue`: the active tab, read straight from the parent Model.
+ *    `aria-selected`, the `data-selected` marker, and which panel is active
+ *    all derive from it. */
 export type ViewInputs<Value extends string = string> = Readonly<{
     tabs: ReadonlyArray<Value>;
+    selectedValue: Value;
     ariaLabel: string;
     toView: (render: RenderInfo<Value>) => Html;
     isTabDisabled?: (value: Value, index: number) => boolean;
     orientation?: Orientation;
 }>;
-/** Pairs the tabs `view`, `update`, and `selectTab` behind a single
- *  Value-typed entry point. Declare once at module scope so consumers
- *  receive `tab.value: Value` in `toView` without an `as` cast:
+/** Pairs the tabs `view` and `update` behind a single Value-typed entry
+ *  point. Declare once at module scope so consumers receive
+ *  `tab.value: Value` in `toView` and the `Selected` OutMessage without an
+ *  `as` cast:
  *
  *  ```ts
  *  const DemoTabs = Tabs.create<DemoTab>()
  *
- *  // In view:
- *  h.submodel({ view: DemoTabs.view, ... })
+ *  // In view (selectedValue is the parent-owned active tab):
+ *  h.submodel({ view: DemoTabs.view, viewInputs: { selectedValue, ... }, ... })
  *
- *  // In update:
- *  const [next, commands] = DemoTabs.update(model, message)
+ *  // In update, fold the Selected OutMessage into your Model:
+ *  const [next, commands, maybeOutMessage] = DemoTabs.update(model, message)
  *  ```
  *
  *  The internal view stays typed `ReadonlyArray<string>`; consumers can
@@ -149,7 +151,5 @@ export type ViewInputs<Value extends string = string> = Readonly<{
 export declare const create: <Value extends string = string>() => Readonly<{
     view: SubmodelView<Model, Message, ViewInputs<Value>>;
     update: (model: Model, message: Message) => readonly [Model, ReadonlyArray<Command.Command<Message>>, Option.Option<OutMessage<Value>>];
-    selectTab: (model: Model, value: Value, index: number) => readonly [Model, ReadonlyArray<Command.Command<Message>>, Option.Option<OutMessage<Value>>];
-    reflectSelectedTab: Reflect2<Model, Value, ReadonlyArray<Value>>;
 }>;
 //# sourceMappingURL=index.d.ts.map

package/dist/tabs/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/tabs/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/tabs/index.ts"],"names":[],"mappings":"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"}

package/dist/tabs/index.js

@@ -1,10 +1,10 @@
-import { Array, Effect, Function, Match as M, Option, Schema as S, String, pipe, } from 'effect';
+import { Array, Effect, Match as M, Option, Schema as S, String, pipe, } from 'effect';
 import * as Command from 'foldkit/command';
 import * as Dom from 'foldkit/dom';
 import { childAttributes, html, } from 'foldkit/html';
 import { m } from 'foldkit/message';
 import { evo } from 'foldkit/struct';
-import { defineView, } from 'foldkit/submodel';
+import { defineView } from 'foldkit/submodel';
 import { idSelector } from '../internal/selectors.js';
 import { keyToIndex } from '../keyboard.js';
 export { wrapIndex, findFirstEnabledIndex, keyToIndex } from '../keyboard.js';
@@ -13,15 +13,19 @@ export { wrapIndex, findFirstEnabledIndex, keyToIndex } from '../keyboard.js';
 export const Orientation = S.Literals(['Horizontal', 'Vertical']);
 /** Controls whether tabs activate on focus (`Automatic`) or require an explicit selection (`Manual`). */
 export const ActivationMode = S.Literals(['Automatic', 'Manual']);
-/** Schema for the tabs component's state, tracking active/focused indices and activation mode. */
+/** Schema for the tabs component's private interaction state. The active
+ *  tab is owned by the parent and passed in via `ViewInputs.selectedValue`,
+ *  so it is not stored here. `maybeFocusedIndex` is the roving-tabindex
+ *  cursor: `None` means keyboard focus follows the selected tab, and `Manual`
+ *  activation stores `Some(index)` while focus diverges from the selection. */
 export const Model = S.Struct({
     id: S.String,
-    activeIndex: S.Number,
-    focusedIndex: S.Number,
+    maybeFocusedIndex: S.Option(S.Number),
     activationMode: ActivationMode,
 });
 // MESSAGE
-/** Sent when a tab is selected via click or keyboard. Updates both the active and focused indices. */
+/** Sent when a tab is selected via click or keyboard. Commits the tab as the
+ *  new selection and moves focus onto it. */
 export const SelectedTab = m('SelectedTab', {
     index: S.Number,
     value: S.String,
@@ -40,57 +44,42 @@ export const Selected = m('Selected', {
 });
 /** Union of out-messages the tabs component can produce. Surfaced as the third element of `update`'s return tuple and pattern-matched by the parent. */
 export const OutMessage = S.Union([Selected]);
-/** Creates an initial tabs model from a config. Defaults to first tab and automatic activation. */
-export const init = (config) => {
-    const activeIndex = config.activeIndex ?? 0;
-    return {
-        id: config.id,
-        activeIndex,
-        focusedIndex: activeIndex,
-        activationMode: config.activationMode ?? 'Automatic',
-    };
-};
+/** Creates an initial tabs model from a config. Focus follows the selected
+ *  tab until the user navigates in `Manual` mode, so `maybeFocusedIndex`
+ *  starts `None`. Defaults to automatic activation. */
+export const init = (config) => ({
+    id: config.id,
+    maybeFocusedIndex: Option.none(),
+    activationMode: config.activationMode ?? 'Automatic',
+});
 // UPDATE
 const tabId = (id, index) => `${id}-tab-${index}`;
 const tabPanelId = (id, index) => `${id}-panel-${index}`;
 /** Moves focus to the tab at the given index. */
 export const FocusTab = Command.define('FocusTab', { id: S.String, index: S.Number }, CompletedFocusTab)(({ id, index }) => Dom.focus(idSelector(tabId(id, index))).pipe(Effect.ignore, Effect.as(CompletedFocusTab())));
-/** Processes a tabs message and returns the next model, commands, and an optional OutMessage. `Selected` fires when a tab is committed via click or keyboard. */
+/** Processes a tabs message and returns the next model, commands, and an
+ *  optional OutMessage. `Selected` fires when a tab is committed via click or
+ *  keyboard; the parent stores the new value and passes it back in as
+ *  `selectedValue`. */
 export const update = (model, message) => M.value(message).pipe(M.withReturnType(), M.tagsExhaustive({
     SelectedTab: ({ index, value }) => [
-        evo(model, {
-            activeIndex: () => index,
-            focusedIndex: () => index,
-        }),
+        evo(model, { maybeFocusedIndex: () => Option.none() }),
         [FocusTab({ id: model.id, index })],
         Option.some(Selected({ value, index })),
     ],
     FocusedTab: ({ index }) => [
-        evo(model, { focusedIndex: () => index }),
+        evo(model, { maybeFocusedIndex: () => Option.some(index) }),
         [FocusTab({ id: model.id, index })],
         Option.none(),
     ],
     CompletedFocusTab: () => [model, [], Option.none()],
 }));
-/** Programmatically selects a tab. Emits a `Selected` OutMessage. */
-export const selectTab = (model, value, index) => update(model, SelectedTab({ index, value }));
-/** Reflects an externally-sourced active tab onto the model without
- *  emitting an OutMessage or running the focus command. Use this to mirror
- *  external truth (a deep link, restored storage) onto the active tab.
- *  Contrast with `selectTab`, which represents a user or programmatic
- *  *choice*: it focuses the tab and emits `Selected`. Takes the tab `value`
- *  plus the `options` list (mirroring `RadioGroup.select`) because Tabs
- *  stores the active *index* internally, so the value is resolved to an
- *  index. A value not present in `options` is a no-op. Returns the model
- *  directly because it produces no commands and no OutMessage. */
-export const reflectSelectedTab = Function.dual(3, (model, value, options) => pipe(options, Array.findFirstIndex(option => option === value), Option.match({
-    onNone: () => model,
-    onSome: index => evo(model, { activeIndex: () => index, focusedIndex: () => index }),
-})));
 const internalView = defineView((model, viewInputs) => {
     const h = html();
-    const { id, activationMode, focusedIndex, activeIndex } = model;
-    const { tabs, ariaLabel, toView, isTabDisabled, orientation = 'Horizontal', } = viewInputs;
+    const { id, activationMode, maybeFocusedIndex } = model;
+    const { tabs, selectedValue, ariaLabel, toView, isTabDisabled, orientation = 'Horizontal', } = viewInputs;
+    const activeIndex = pipe(tabs, Array.findFirstIndex(tab => tab === selectedValue), Option.getOrElse(() => 0));
+    const focusedIndex = pipe(maybeFocusedIndex, Option.filter(index => index < tabs.length), Option.getOrElse(() => activeIndex));
     const isDisabled = (index) => !!isTabDisabled &&
         pipe(tabs, Array.get(index), Option.exists(tab => isTabDisabled(tab, index)));
     const { nextKey, previousKey } = M.value(orientation).pipe(M.when('Horizontal', () => ({
@@ -154,18 +143,19 @@ const internalView = defineView((model, viewInputs) => {
         activeIndex,
     });
 });
-/** Pairs the tabs `view`, `update`, and `selectTab` behind a single
- *  Value-typed entry point. Declare once at module scope so consumers
- *  receive `tab.value: Value` in `toView` without an `as` cast:
+/** Pairs the tabs `view` and `update` behind a single Value-typed entry
+ *  point. Declare once at module scope so consumers receive
+ *  `tab.value: Value` in `toView` and the `Selected` OutMessage without an
+ *  `as` cast:
  *
  *  ```ts
  *  const DemoTabs = Tabs.create<DemoTab>()
  *
- *  // In view:
- *  h.submodel({ view: DemoTabs.view, ... })
+ *  // In view (selectedValue is the parent-owned active tab):
+ *  h.submodel({ view: DemoTabs.view, viewInputs: { selectedValue, ... }, ... })
  *
- *  // In update:
- *  const [next, commands] = DemoTabs.update(model, message)
+ *  // In update, fold the Selected OutMessage into your Model:
+ *  const [next, commands, maybeOutMessage] = DemoTabs.update(model, message)
  *  ```
  *
  *  The internal view stays typed `ReadonlyArray<string>`; consumers can
@@ -179,8 +169,5 @@ export const create = () => {
         /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
         view: internalView,
         update: (model, message) => cast(update(model, message)),
-        selectTab: (model, value, index) => cast(selectTab(model, value, index)),
-        /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
-        reflectSelectedTab: reflectSelectedTab,
     };
 };

package/dist/toast/index.d.ts

@@ -4,6 +4,7 @@ import { Dismissed, DismissedAll, ElapsedDuration, GotAnimationMessage, HoveredE
 import { DismissAfter } from './update.js';
 export type { InitConfig } from './schema.js';
 export type { ShowInput } from './update.js';
+export * as test from './test.js';
 export { Variant, Position, Dismissed, DismissedAll, ElapsedDuration, HoveredEntry, LeftEntry, GotAnimationMessage, DismissAfter, };
 /** Handlers passed to `entryToView`. Spread `dismiss` onto a close
  *  button's attribute array (typically inside `h.button([...dismiss])`)

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/toast/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAc,MAAM,IAAI,CAAC,EAAE,MAAM,QAAQ,CAAA;AAChD,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,IAAI,EAGV,MAAM,cAAc,CAAA;AAGrB,OAAO,EACL,SAAS,EACT,YAAY,EACZ,eAAe,EACf,mBAAmB,EACnB,YAAY,EACZ,SAAS,EACT,QAAQ,EACR,OAAO,EACR,MAAM,aAAa,CAAA;AACpB,OAAO,EAAE,YAAY,EAAe,MAAM,aAAa,CAAA;AAEvD,YAAY,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AAC7C,YAAY,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AAE5C,OAAO,EACL,OAAO,EACP,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,eAAe,EACf,YAAY,EACZ,SAAS,EACT,mBAAmB,EACnB,YAAY,GACb,CAAA;AA0ED;;;;qDAIqD;AACrD,MAAM,MAAM,aAAa,GAAG,QAAQ,CAAC;IACnC,OAAO,EAAE,aAAa,CAAC,cAAc,CAAC,CAAA;CACvC,CAAC,CAAA;AAIF;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,eAAO,MAAM,IAAI,GAAI,CAAC,EAAE,CAAC,EAAE,eAAe,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kBAUzC,QAAQ;qBACL,CAAC,KAAK;;;;;;;;;;;;kBAAO,EAAE,QAAQ,EAAE,aAAa,KAAK,IAAI;oBAChD,MAAM;6BACG,MAAM;yBACV,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2F1B,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/toast/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAc,MAAM,IAAI,CAAC,EAAE,MAAM,QAAQ,CAAA;AAChD,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,IAAI,EAGV,MAAM,cAAc,CAAA;AAGrB,OAAO,EACL,SAAS,EACT,YAAY,EACZ,eAAe,EACf,mBAAmB,EACnB,YAAY,EACZ,SAAS,EACT,QAAQ,EACR,OAAO,EACR,MAAM,aAAa,CAAA;AACpB,OAAO,EAAE,YAAY,EAAe,MAAM,aAAa,CAAA;AAEvD,YAAY,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AAC7C,YAAY,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AAE5C,OAAO,KAAK,IAAI,MAAM,WAAW,CAAA;AAEjC,OAAO,EACL,OAAO,EACP,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,eAAe,EACf,YAAY,EACZ,SAAS,EACT,mBAAmB,EACnB,YAAY,GACb,CAAA;AA0ED;;;;qDAIqD;AACrD,MAAM,MAAM,aAAa,GAAG,QAAQ,CAAC;IACnC,OAAO,EAAE,aAAa,CAAC,cAAc,CAAC,CAAA;CACvC,CAAC,CAAA;AAIF;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,eAAO,MAAM,IAAI,GAAI,CAAC,EAAE,CAAC,EAAE,eAAe,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kBAUzC,QAAQ;qBACL,CAAC,KAAK;;;;;;;;;;;;kBAAO,EAAE,QAAQ,EAAE,aAAa,KAAK,IAAI;oBAChD,MAAM;6BACG,MAAM;yBACV,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2F1B,CAAA"}

package/dist/toast/index.js

@@ -3,6 +3,7 @@ import { childAttributes, html, } from 'foldkit/html';
 import { defineView } from 'foldkit/submodel';
 import { Dismissed, DismissedAll, ElapsedDuration, GotAnimationMessage, HoveredEntry, LeftEntry, Position, Variant, } from './schema.js';
 import { DismissAfter, makeRuntime } from './update.js';
+export * as test from './test.js';
 export { Variant, Position, Dismissed, DismissedAll, ElapsedDuration, HoveredEntry, LeftEntry, GotAnimationMessage, DismissAfter, };
 const variantToRole = (variant) => M.value(variant).pipe(M.withReturnType(), M.when('Info', () => 'status'), M.when('Success', () => 'status'), M.when('Warning', () => 'alert'), M.when('Error', () => 'alert'), M.exhaustive);
 const positionToContainerStyle = (position) => {

package/dist/toast/public.d.ts

@@ -1,4 +1,6 @@
 export { make, Variant, Position, Dismissed, DismissedAll, ElapsedDuration, HoveredEntry, LeftEntry, GotAnimationMessage, DismissAfter, } from './index.js';
+export * as test from './test.js';
 export type { EntryHandlers } from './index.js';
 export type { InitConfig, ShowInput } from './index.js';
+export type { DrainEntryInput } from './test.js';
 //# sourceMappingURL=public.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"public.d.ts","sourceRoot":"","sources":["../../src/toast/public.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,eAAe,EACf,YAAY,EACZ,SAAS,EACT,mBAAmB,EACnB,YAAY,GACb,MAAM,YAAY,CAAA;AAEnB,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA;AAC/C,YAAY,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,YAAY,CAAA"}
+{"version":3,"file":"public.d.ts","sourceRoot":"","sources":["../../src/toast/public.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,eAAe,EACf,YAAY,EACZ,SAAS,EACT,mBAAmB,EACnB,YAAY,GACb,MAAM,YAAY,CAAA;AAEnB,OAAO,KAAK,IAAI,MAAM,WAAW,CAAA;AAEjC,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA;AAC/C,YAAY,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,YAAY,CAAA;AACvD,YAAY,EAAE,eAAe,EAAE,MAAM,WAAW,CAAA"}

package/dist/toast/public.js

@@ -1 +1,2 @@
 export { make, Variant, Position, Dismissed, DismissedAll, ElapsedDuration, HoveredEntry, LeftEntry, GotAnimationMessage, DismissAfter, } from './index.js';
+export * as test from './test.js';

package/dist/toast/test.d.ts

@@ -0,0 +1,41 @@
+import * as Story from 'foldkit/story';
+/** Input for {@link drainEntry}. `entryId` selects the entry whose lifecycle
+ *  to drain. `version` is the auto-dismiss timer version echoed back by
+ *  `ElapsedDuration`; it defaults to `0`, the version a freshly shown entry
+ *  carries. */
+export type DrainEntryInput = Readonly<{
+    entryId: string;
+    version?: number;
+}>;
+/** Builds a {@link Story.Command.resolveAll} step that drains a single toast
+ *  entry's full animation and dismiss lifecycle. Resolving these Commands in
+ *  order takes a freshly shown entry from its enter animation through
+ *  auto-dismiss and its exit animation, ending with the entry removed from the
+ *  stack and the `DismissedToast` OutMessage emitted.
+ *
+ *  Showing a toast via `Toast.show` emits a multi-step lifecycle that a Story
+ *  test must resolve in full or the story fails on leftover Commands. The
+ *  steps are:
+ *
+ *  - enter animation: `RequestFrame` then `AdvancedAnimationFrame`
+ *  - enter settle: `WaitForAnimationSettled` then `EndedAnimation`
+ *  - auto-dismiss: `DismissAfter` then `ElapsedDuration`
+ *  - exit animation: `RequestFrame` then `AdvancedAnimationFrame`
+ *  - exit settle: `WaitForAnimationSettled` then `EndedAnimation`
+ *
+ *  Each step resolves with the child's raw result Message. `resolveAll` replays
+ *  the matched Command's own recorded wrapping, so a parent that embeds the
+ *  toast Submodel drains the same way without restating its `Got*` lift.
+ *
+ *  @example
+ *  ```ts
+ *  Story.story(
+ *    update,
+ *    Story.with(model),
+ *    Story.message(ClickedSave()),
+ *    Toast.test.drainEntry({ entryId: 'toast-entry-0' }),
+ *  )
+ *  ```
+ */
+export declare const drainEntry: ({ entryId, version, }: DrainEntryInput) => <Model, Message, OutMessage = undefined>(simulation: Story.StorySimulation<Model, Message, OutMessage>) => Story.StorySimulation<Model, Message, OutMessage>;
+//# sourceMappingURL=test.d.ts.map

package/dist/toast/test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"test.d.ts","sourceRoot":"","sources":["../../src/toast/test.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,eAAe,CAAA;AAWtC;;;eAGe;AACf,MAAM,MAAM,eAAe,GAAG,QAAQ,CAAC;IACrC,OAAO,EAAE,MAAM,CAAA;IACf,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB,CAAC,CAAA;AAIF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,eAAO,MAAM,UAAU,GAAI,uBAGxB,eAAe,iKAOf,CAAA"}

package/dist/toast/test.js

@@ -0,0 +1,36 @@
+import * as Story from 'foldkit/story';
+import { AdvancedAnimationFrame, EndedAnimation, RequestFrame, WaitForAnimationSettled, } from '../animation/index.js';
+import { ElapsedDuration } from './schema.js';
+import { DismissAfter } from './update.js';
+const DEFAULT_VERSION = 0;
+/** Builds a {@link Story.Command.resolveAll} step that drains a single toast
+ *  entry's full animation and dismiss lifecycle. Resolving these Commands in
+ *  order takes a freshly shown entry from its enter animation through
+ *  auto-dismiss and its exit animation, ending with the entry removed from the
+ *  stack and the `DismissedToast` OutMessage emitted.
+ *
+ *  Showing a toast via `Toast.show` emits a multi-step lifecycle that a Story
+ *  test must resolve in full or the story fails on leftover Commands. The
+ *  steps are:
+ *
+ *  - enter animation: `RequestFrame` then `AdvancedAnimationFrame`
+ *  - enter settle: `WaitForAnimationSettled` then `EndedAnimation`
+ *  - auto-dismiss: `DismissAfter` then `ElapsedDuration`
+ *  - exit animation: `RequestFrame` then `AdvancedAnimationFrame`
+ *  - exit settle: `WaitForAnimationSettled` then `EndedAnimation`
+ *
+ *  Each step resolves with the child's raw result Message. `resolveAll` replays
+ *  the matched Command's own recorded wrapping, so a parent that embeds the
+ *  toast Submodel drains the same way without restating its `Got*` lift.
+ *
+ *  @example
+ *  ```ts
+ *  Story.story(
+ *    update,
+ *    Story.with(model),
+ *    Story.message(ClickedSave()),
+ *    Toast.test.drainEntry({ entryId: 'toast-entry-0' }),
+ *  )
+ *  ```
+ */
+export const drainEntry = ({ entryId, version = DEFAULT_VERSION, }) => Story.Command.resolveAll([RequestFrame, AdvancedAnimationFrame()], [WaitForAnimationSettled, EndedAnimation()], [DismissAfter, ElapsedDuration({ entryId, version })], [RequestFrame, AdvancedAnimationFrame()], [WaitForAnimationSettled, EndedAnimation()]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@foldkit/ui",
-  "version": "0.127.0",
+  "version": "0.128.0",
   "description": "Headless, accessible UI components for Foldkit",
   "type": "module",
   "main": "./dist/index.js",
@@ -127,7 +127,7 @@
     "typedoc": "^0.28.19",
     "typescript": "^6.0.3",
     "vitest": "^4.1.9",
-    "foldkit": "0.127.0"
+    "foldkit": "0.128.0"
   },
   "keywords": [
     "foldkit",