foldkit 0.16.0 → 0.18.0

package/dist/runtime/urlRequest.js

@@ -1,11 +1,12 @@
 import { Schema as S } from 'effect';
+import { ts } from '../schema';
 import { Url } from '../url';
 /** A URL request to a page within the application (same origin). */
-export const Internal = S.TaggedStruct('Internal', {
+export const Internal = ts('Internal', {
     url: Url,
 });
 /** A URL request to an external page (different origin). */
-export const External = S.TaggedStruct('External', {
+export const External = ts('External', {
     href: S.String,
 });
 /** Union of `Internal` and `External` URL request types. */

package/dist/schema/index.d.ts

@@ -0,0 +1,26 @@
+import { Schema as S } from 'effect';
+/** A `TaggedStruct` schema that can be called directly as a constructor: `Foo({ count: 1 })` instead of `Foo.make({ count: 1 })`. */
+export type CallableTaggedStruct<Tag extends string, Fields extends S.Struct.Fields> = S.TaggedStruct<Tag, Fields> & (keyof Fields extends never ? (value?: Parameters<S.TaggedStruct<Tag, Fields>['make']>[0] | void) => S.Simplify<S.Struct.Type<{
+    readonly _tag: S.tag<Tag>;
+} & Fields>> : (value: Parameters<S.TaggedStruct<Tag, Fields>['make']>[0]) => S.Simplify<S.Struct.Type<{
+    readonly _tag: S.tag<Tag>;
+} & Fields>>);
+/**
+ * A wrapper around Effect Schema.taggedStruct that returns a callable schema.
+ *
+ * Abbreviated as `ts` because it's used so frequently throughout Foldkit applications.
+ *
+ * @example
+ * ```typescript
+ * // Simple tag — callable with no args
+ * const Reset = ts('Reset')
+ * Reset() // { _tag: 'Reset' }
+ *
+ * // Tag with fields — callable with fields
+ * const SetCount = ts('SetCount', { count: S.Number })
+ * SetCount({ count: 1 }) // { _tag: 'SetCount', count: 1 }
+ * ```
+ */
+export declare function ts<Tag extends string>(tag: Tag): CallableTaggedStruct<Tag, {}>;
+export declare function ts<Tag extends string, Fields extends S.Struct.Fields>(tag: Tag, fields: Fields): CallableTaggedStruct<Tag, Fields>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/schema/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,CAAC,EAAE,MAAM,QAAQ,CAAA;AAEpC,qIAAqI;AACrI,MAAM,MAAM,oBAAoB,CAC9B,GAAG,SAAS,MAAM,EAClB,MAAM,SAAS,CAAC,CAAC,MAAM,CAAC,MAAM,IAC5B,CAAC,CAAC,YAAY,CAAC,GAAG,EAAE,MAAM,CAAC,GAC7B,CAAC,MAAM,MAAM,SAAS,KAAK,GACvB,CACE,KAAK,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC,YAAY,CAAC,GAAG,EAAE,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI,KAC9D,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC;IAAE,QAAQ,CAAC,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;CAAE,GAAG,MAAM,CAAC,CAAC,GACtE,CACE,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,YAAY,CAAC,GAAG,EAAE,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,KACtD,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC;IAAE,QAAQ,CAAC,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;CAAE,GAAG,MAAM,CAAC,CAAC,CAAC,CAAA;AAe7E;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,EAAE,CAAC,GAAG,SAAS,MAAM,EAAE,GAAG,EAAE,GAAG,GAAG,oBAAoB,CAAC,GAAG,EAAE,EAAE,CAAC,CAAA;AAC/E,wBAAgB,EAAE,CAAC,GAAG,SAAS,MAAM,EAAE,MAAM,SAAS,CAAC,CAAC,MAAM,CAAC,MAAM,EACnE,GAAG,EAAE,GAAG,EACR,MAAM,EAAE,MAAM,GACb,oBAAoB,CAAC,GAAG,EAAE,MAAM,CAAC,CAAA"}

package/dist/schema/index.js

@@ -0,0 +1,14 @@
+import { Schema as S } from 'effect';
+const makeCallable = (schema) => 
+/* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
+new Proxy(schema, {
+    apply(_target, _thisArg, argumentsList) {
+        return schema.make(argumentsList[0]);
+    },
+    get(target, property, receiver) {
+        return Reflect.get(target, property, receiver);
+    },
+});
+export function ts(tag, fields = {}) {
+    return makeCallable(S.TaggedStruct(tag, fields));
+}

package/dist/schema/public.d.ts

@@ -0,0 +1,3 @@
+export { ts } from './index';
+export type { CallableTaggedStruct } from './index';
+//# sourceMappingURL=public.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"public.d.ts","sourceRoot":"","sources":["../../src/schema/public.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,SAAS,CAAA;AAC5B,YAAY,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAA"}

package/dist/schema/public.js

@@ -0,0 +1 @@
+export { ts } from './index';

package/dist/{struct.d.ts → struct/index.d.ts}

@@ -7,9 +7,10 @@ type StrictKeys<O, T> = T extends Record<string, any> ? Exclude<keyof T, keyof O
 type Evolved<O, T> = {
     [K in keyof O]: K extends keyof T ? T[K] extends (a: any) => infer R ? R : O[K] : O[K];
 };
+/** Immutably updates fields of a struct by applying transform functions. Wraps Effect's `Struct.evolve` with stricter key checking. */
 export declare const evo: {
     <O, const T extends EvolveTransform<O>>(t: StrictKeys<O, T>): (obj: O) => Evolved<O, T>;
     <O, const T extends EvolveTransform<O>>(obj: O, t: StrictKeys<O, T>): Evolved<O, T>;
 };
 export {};
-//# sourceMappingURL=struct.d.ts.map
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/struct/index.ts"],"names":[],"mappings":"AAEA,KAAK,eAAe,CAAC,CAAC,IAAI,OAAO,CAAC;KAC/B,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;CAClC,CAAC,CAAA;AAEF,KAAK,UAAU,CAAC,CAAC,EAAE,CAAC,IAClB,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GACzB,OAAO,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC,CAAC,SAAS,KAAK,GACrC,CAAC,GACD,CAAC,GAAG;KACD,CAAC,IAAI,gBAAgB,OAAO,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,MAAM,EAAE,GAAG,KAAK;CACnE,GACH,KAAK,CAAA;AAEX,KAAK,OAAO,CAAC,CAAC,EAAE,CAAC,IAAI;KAClB,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,SAAS,MAAM,CAAC,GAC7B,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,GAAG,KAAK,MAAM,CAAC,GAC9B,CAAC,GACD,CAAC,CAAC,CAAC,CAAC,GACN,CAAC,CAAC,CAAC,CAAC;CACT,CAAA;AAED,uIAAuI;AACvI,eAAO,MAAM,GAAG,EAAE;IAChB,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,SAAS,eAAe,CAAC,CAAC,CAAC,EACpC,CAAC,EAAE,UAAU,CAAC,CAAC,EAAE,CAAC,CAAC,GAClB,CAAC,GAAG,EAAE,CAAC,KAAK,OAAO,CAAC,CAAC,EAAE,CAAC,CAAC,CAAA;IAC5B,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,SAAS,eAAe,CAAC,CAAC,CAAC,EACpC,GAAG,EAAE,CAAC,EACN,CAAC,EAAE,UAAU,CAAC,CAAC,EAAE,CAAC,CAAC,GAClB,OAAO,CAAC,CAAC,EAAE,CAAC,CAAC,CAAA;CACD,CAAA"}

package/dist/struct/index.js

@@ -0,0 +1,3 @@
+import { Struct } from 'effect';
+/** Immutably updates fields of a struct by applying transform functions. Wraps Effect's `Struct.evolve` with stricter key checking. */
+export const evo = Struct.evolve;

package/dist/struct/public.d.ts

@@ -0,0 +1,2 @@
+export { evo } from './index';
+//# sourceMappingURL=public.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"public.d.ts","sourceRoot":"","sources":["../../src/struct/public.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,SAAS,CAAA"}

package/dist/struct/public.js

@@ -0,0 +1 @@
+export { evo } from './index';

package/dist/task/index.d.ts

@@ -0,0 +1,109 @@
+import { DateTime, Duration, Effect } from 'effect';
+/**
+ * Creates a command that gets the current UTC time and passes it to a message constructor.
+ * This is similar to Elm's `Task.perform` with `Time.now`.
+ *
+ * @example
+ * ```typescript
+ * Task.getTime(utc => GotTime({ utc }))
+ * ```
+ */
+export declare const getTime: <Message>(f: (utc: DateTime.Utc) => Message) => Effect.Effect<Message>;
+/**
+ * Creates a command that gets the system timezone and passes it to a message constructor.
+ * This is similar to Elm's `Task.perform` with `Time.here`.
+ *
+ * @example
+ * ```typescript
+ * Task.getTimeZone(zone => GotTimeZone({ zone }))
+ * ```
+ */
+export declare const getTimeZone: <Message>(f: (zone: DateTime.TimeZone) => Message) => Effect.Effect<Message>;
+/**
+ * Creates a command that gets the current time in the system timezone and passes it to a message constructor.
+ * This combines both time and timezone in a single task.
+ *
+ * @example
+ * ```typescript
+ * Task.getZonedTime(zoned => GotTime({ zoned }))
+ * ```
+ */
+export declare const getZonedTime: <Message>(f: (zoned: DateTime.Zoned) => Message) => Effect.Effect<Message>;
+/**
+ * Creates a command that gets the current time in a specific timezone and passes it to a message constructor.
+ * If the timezone is invalid, the effect will fail with an error string.
+ *
+ * @example
+ * ```typescript
+ * Task.getZonedTimeIn('America/New_York', zoned => GotNYTime({ zoned }))
+ * ```
+ */
+export declare const getZonedTimeIn: <Message>(zoneId: string, f: (zoned: DateTime.Zoned) => Message) => Effect.Effect<Message, string>;
+/**
+ * Creates a command that focuses an element by selector and passes the result to a message constructor.
+ * Passes true if the element was found and focused, false otherwise.
+ * Uses requestAnimationFrame to ensure the DOM tree is updated and nodes exist before attempting to focus.
+ * This follows the same approach as Elm's Browser.Dom.focus.
+ *
+ * @example
+ * ```typescript
+ * Task.focus('#email-input', success => InputFocused({ success }))
+ * ```
+ */
+export declare const focus: <Message>(selector: string, f: (success: boolean) => Message) => Effect.Effect<Message>;
+/**
+ * Creates a command that opens a dialog element as a modal using `showModal()`.
+ * Passes true if the element was found and opened, false otherwise.
+ * Uses requestAnimationFrame to ensure the DOM tree is updated and nodes exist before attempting to show.
+ *
+ * @example
+ * ```typescript
+ * Task.showModal('#my-dialog', success => ModalOpened({ success }))
+ * ```
+ */
+export declare const showModal: <Message>(selector: string, f: (success: boolean) => Message) => Effect.Effect<Message>;
+/**
+ * Creates a command that closes a dialog element using `.close()`.
+ * Passes true if the element was found and closed, false otherwise.
+ * Uses requestAnimationFrame to ensure the DOM tree is updated and nodes exist before attempting to close.
+ *
+ * @example
+ * ```typescript
+ * Task.closeModal('#my-dialog', success => ModalClosed({ success }))
+ * ```
+ */
+export declare const closeModal: <Message>(selector: string, f: (success: boolean) => Message) => Effect.Effect<Message>;
+/**
+ * Creates a command that resolves to a message after a delay.
+ * Useful for debouncing, such as clearing a typeahead search query.
+ *
+ * @example
+ * ```typescript
+ * Task.delay(350, () => SearchCleared({ version: model.searchVersion }))
+ * Task.delay(Duration.seconds(1), () => TimedOut())
+ * ```
+ */
+export declare const delay: <Message>(duration: Duration.DurationInput, f: () => Message) => Effect.Effect<Message>;
+/**
+ * Creates a command that generates a random integer between min (inclusive) and max (exclusive)
+ * and passes it to a message constructor.
+ *
+ * @example
+ * ```typescript
+ * Task.randomInt(0, 100, value => GotRandom({ value }))
+ * ```
+ */
+/**
+ * Creates a command that scrolls an element into view by selector and passes the result to a message constructor.
+ * Passes true if the element was found and scrolled, false otherwise.
+ * Uses requestAnimationFrame to ensure the DOM tree is updated and nodes exist before attempting to scroll.
+ * Uses `{ block: 'nearest' }` to avoid unnecessary scrolling when the element is already visible.
+ *
+ * @example
+ * ```typescript
+ * Task.scrollIntoView('#active-item', success => ItemScrolled({ success }))
+ * ```
+ */
+export declare const scrollIntoView: <Message>(selector: string, f: (success: boolean) => Message) => Effect.Effect<Message>;
+export declare const randomInt: <Message>(min: number, max: number, f: (value: number) => Message) => Effect.Effect<Message>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/task/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAU,MAAM,QAAQ,CAAA;AAE3D;;;;;;;;GAQG;AACH,eAAO,MAAM,OAAO,GAAI,OAAO,EAC7B,GAAG,CAAC,GAAG,EAAE,QAAQ,CAAC,GAAG,KAAK,OAAO,KAChC,MAAM,CAAC,MAAM,CAAC,OAAO,CAAgC,CAAA;AAExD;;;;;;;;GAQG;AACH,eAAO,MAAM,WAAW,GAAI,OAAO,EACjC,GAAG,CAAC,IAAI,EAAE,QAAQ,CAAC,QAAQ,KAAK,OAAO,KACtC,MAAM,CAAC,MAAM,CAAC,OAAO,CAAmD,CAAA;AAE3E;;;;;;;;GAQG;AACH,eAAO,MAAM,YAAY,GAAI,OAAO,EAClC,GAAG,CAAC,KAAK,EAAE,QAAQ,CAAC,KAAK,KAAK,OAAO,KACpC,MAAM,CAAC,MAAM,CAAC,OAAO,CAMpB,CAAA;AAEJ;;;;;;;;GAQG;AACH,eAAO,MAAM,cAAc,GAAI,OAAO,EACpC,QAAQ,MAAM,EACd,GAAG,CAAC,KAAK,EAAE,QAAQ,CAAC,KAAK,KAAK,OAAO,KACpC,MAAM,CAAC,MAAM,CAAC,OAAO,EAAE,MAAM,CAS5B,CAAA;AAEJ;;;;;;;;;;GAUG;AACH,eAAO,MAAM,KAAK,GAAI,OAAO,EAC3B,UAAU,MAAM,EAChB,GAAG,CAAC,OAAO,EAAE,OAAO,KAAK,OAAO,KAC/B,MAAM,CAAC,MAAM,CAAC,OAAO,CAWpB,CAAA;AAEJ;;;;;;;;;GASG;AACH,eAAO,MAAM,SAAS,GAAI,OAAO,EAC/B,UAAU,MAAM,EAChB,GAAG,CAAC,OAAO,EAAE,OAAO,KAAK,OAAO,KAC/B,MAAM,CAAC,MAAM,CAAC,OAAO,CAWpB,CAAA;AAEJ;;;;;;;;;GASG;AACH,eAAO,MAAM,UAAU,GAAI,OAAO,EAChC,UAAU,MAAM,EAChB,GAAG,CAAC,OAAO,EAAE,OAAO,KAAK,OAAO,KAC/B,MAAM,CAAC,MAAM,CAAC,OAAO,CAWpB,CAAA;AAEJ;;;;;;;;;GASG;AACH,eAAO,MAAM,KAAK,GAAI,OAAO,EAC3B,UAAU,QAAQ,CAAC,aAAa,EAChC,GAAG,MAAM,OAAO,KACf,MAAM,CAAC,MAAM,CAAC,OAAO,CAIpB,CAAA;AAEJ;;;;;;;;GAQG;AACH;;;;;;;;;;GAUG;AACH,eAAO,MAAM,cAAc,GAAI,OAAO,EACpC,UAAU,MAAM,EAChB,GAAG,CAAC,OAAO,EAAE,OAAO,KAAK,OAAO,KAC/B,MAAM,CAAC,MAAM,CAAC,OAAO,CAWpB,CAAA;AAEJ,eAAO,MAAM,SAAS,GAAI,OAAO,EAC/B,KAAK,MAAM,EACX,KAAK,MAAM,EACX,GAAG,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,KAC5B,MAAM,CAAC,MAAM,CAAC,OAAO,CAC6C,CAAA"}

package/dist/task/index.js

@@ -0,0 +1,168 @@
+import { DateTime, Effect, Option } from 'effect';
+/**
+ * Creates a command that gets the current UTC time and passes it to a message constructor.
+ * This is similar to Elm's `Task.perform` with `Time.now`.
+ *
+ * @example
+ * ```typescript
+ * Task.getTime(utc => GotTime({ utc }))
+ * ```
+ */
+export const getTime = (f) => Effect.map(DateTime.now, f);
+/**
+ * Creates a command that gets the system timezone and passes it to a message constructor.
+ * This is similar to Elm's `Task.perform` with `Time.here`.
+ *
+ * @example
+ * ```typescript
+ * Task.getTimeZone(zone => GotTimeZone({ zone }))
+ * ```
+ */
+export const getTimeZone = (f) => Effect.sync(() => f(DateTime.zoneMakeLocal()));
+/**
+ * Creates a command that gets the current time in the system timezone and passes it to a message constructor.
+ * This combines both time and timezone in a single task.
+ *
+ * @example
+ * ```typescript
+ * Task.getZonedTime(zoned => GotTime({ zoned }))
+ * ```
+ */
+export const getZonedTime = (f) => Effect.gen(function* () {
+    const utc = yield* DateTime.now;
+    const zone = DateTime.zoneMakeLocal();
+    const zoned = DateTime.setZone(utc, zone);
+    return f(zoned);
+});
+/**
+ * Creates a command that gets the current time in a specific timezone and passes it to a message constructor.
+ * If the timezone is invalid, the effect will fail with an error string.
+ *
+ * @example
+ * ```typescript
+ * Task.getZonedTimeIn('America/New_York', zoned => GotNYTime({ zoned }))
+ * ```
+ */
+export const getZonedTimeIn = (zoneId, f) => Effect.gen(function* () {
+    const utc = yield* DateTime.now;
+    const maybeZone = DateTime.zoneMakeNamed(zoneId);
+    if (Option.isNone(maybeZone)) {
+        return yield* Effect.fail(`Invalid timezone: ${zoneId}`);
+    }
+    const zoned = DateTime.setZone(utc, maybeZone.value);
+    return f(zoned);
+});
+/**
+ * Creates a command that focuses an element by selector and passes the result to a message constructor.
+ * Passes true if the element was found and focused, false otherwise.
+ * Uses requestAnimationFrame to ensure the DOM tree is updated and nodes exist before attempting to focus.
+ * This follows the same approach as Elm's Browser.Dom.focus.
+ *
+ * @example
+ * ```typescript
+ * Task.focus('#email-input', success => InputFocused({ success }))
+ * ```
+ */
+export const focus = (selector, f) => Effect.async((resume) => {
+    requestAnimationFrame(() => {
+        const element = document.querySelector(selector);
+        if (element instanceof HTMLElement) {
+            element.focus();
+            resume(Effect.succeed(f(true)));
+        }
+        else {
+            resume(Effect.succeed(f(false)));
+        }
+    });
+});
+/**
+ * Creates a command that opens a dialog element as a modal using `showModal()`.
+ * Passes true if the element was found and opened, false otherwise.
+ * Uses requestAnimationFrame to ensure the DOM tree is updated and nodes exist before attempting to show.
+ *
+ * @example
+ * ```typescript
+ * Task.showModal('#my-dialog', success => ModalOpened({ success }))
+ * ```
+ */
+export const showModal = (selector, f) => Effect.async((resume) => {
+    requestAnimationFrame(() => {
+        const element = document.querySelector(selector);
+        if (element instanceof HTMLDialogElement) {
+            element.showModal();
+            resume(Effect.succeed(f(true)));
+        }
+        else {
+            resume(Effect.succeed(f(false)));
+        }
+    });
+});
+/**
+ * Creates a command that closes a dialog element using `.close()`.
+ * Passes true if the element was found and closed, false otherwise.
+ * Uses requestAnimationFrame to ensure the DOM tree is updated and nodes exist before attempting to close.
+ *
+ * @example
+ * ```typescript
+ * Task.closeModal('#my-dialog', success => ModalClosed({ success }))
+ * ```
+ */
+export const closeModal = (selector, f) => Effect.async((resume) => {
+    requestAnimationFrame(() => {
+        const element = document.querySelector(selector);
+        if (element instanceof HTMLDialogElement) {
+            element.close();
+            resume(Effect.succeed(f(true)));
+        }
+        else {
+            resume(Effect.succeed(f(false)));
+        }
+    });
+});
+/**
+ * Creates a command that resolves to a message after a delay.
+ * Useful for debouncing, such as clearing a typeahead search query.
+ *
+ * @example
+ * ```typescript
+ * Task.delay(350, () => SearchCleared({ version: model.searchVersion }))
+ * Task.delay(Duration.seconds(1), () => TimedOut())
+ * ```
+ */
+export const delay = (duration, f) => Effect.gen(function* () {
+    yield* Effect.sleep(duration);
+    return f();
+});
+/**
+ * Creates a command that generates a random integer between min (inclusive) and max (exclusive)
+ * and passes it to a message constructor.
+ *
+ * @example
+ * ```typescript
+ * Task.randomInt(0, 100, value => GotRandom({ value }))
+ * ```
+ */
+/**
+ * Creates a command that scrolls an element into view by selector and passes the result to a message constructor.
+ * Passes true if the element was found and scrolled, false otherwise.
+ * Uses requestAnimationFrame to ensure the DOM tree is updated and nodes exist before attempting to scroll.
+ * Uses `{ block: 'nearest' }` to avoid unnecessary scrolling when the element is already visible.
+ *
+ * @example
+ * ```typescript
+ * Task.scrollIntoView('#active-item', success => ItemScrolled({ success }))
+ * ```
+ */
+export const scrollIntoView = (selector, f) => Effect.async((resume) => {
+    requestAnimationFrame(() => {
+        const element = document.querySelector(selector);
+        if (element instanceof HTMLElement) {
+            element.scrollIntoView({ block: 'nearest' });
+            resume(Effect.succeed(f(true)));
+        }
+        else {
+            resume(Effect.succeed(f(false)));
+        }
+    });
+});
+export const randomInt = (min, max, f) => Effect.sync(() => f(Math.floor(Math.random() * (max - min)) + min));

package/dist/task/public.d.ts

@@ -0,0 +1,2 @@
+export { getTime, getTimeZone, getZonedTime, getZonedTimeIn, focus, showModal, closeModal, delay, scrollIntoView, randomInt, } from './index';
+//# sourceMappingURL=public.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"public.d.ts","sourceRoot":"","sources":["../../src/task/public.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,OAAO,EACP,WAAW,EACX,YAAY,EACZ,cAAc,EACd,KAAK,EACL,SAAS,EACT,UAAU,EACV,KAAK,EACL,cAAc,EACd,SAAS,GACV,MAAM,SAAS,CAAA"}

package/dist/task/public.js

@@ -0,0 +1 @@
+export { getTime, getTimeZone, getZonedTime, getZonedTimeIn, focus, showModal, closeModal, delay, scrollIntoView, randomInt, } from './index';

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

@@ -0,0 +1,46 @@
+import { Schema as S } from 'effect';
+import type { Html } from '../../html';
+import type { Command } from '../../runtime/runtime';
+/** Schema for the dialog component's state, tracking its unique ID and open/closed status. */
+export declare const Model: S.Struct<{
+    id: typeof S.String;
+    isOpen: typeof S.Boolean;
+}>;
+export type Model = typeof Model.Type;
+/** Sent when the dialog should open. Triggers the showModal command. */
+export declare const Opened: import("../../schema").CallableTaggedStruct<"Opened", {}>;
+/** Sent when the dialog should close (Escape key, backdrop click, or programmatic). Triggers the closeModal command. */
+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", {}>;
+/** 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 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`. */
+export type InitConfig = Readonly<{
+    id: string;
+    isOpen?: boolean;
+}>;
+/** Creates an initial dialog model from a config. Defaults to closed. */
+export declare const init: (config: InitConfig) => Model;
+/** Processes a dialog message and returns the next model and commands. */
+export declare const update: (model: Model, message: Message) => [Model, ReadonlyArray<Command<Message>>];
+/** 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. */
+export declare const descriptionId: (model: Model) => string;
+/** Configuration for rendering a dialog with `view`. */
+export type ViewConfig<Message> = Readonly<{
+    model: Model;
+    toMessage: (message: Closed | NoOp) => Message;
+    panelContent: Html;
+    panelClassName: string;
+    backdropClassName: string;
+    className?: string;
+}>;
+/** Renders a headless dialog component backed by the native `<dialog>` element with `showModal()`. */
+export declare const view: <Message>(config: ViewConfig<Message>) => Html;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/dialog/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsB,MAAM,IAAI,CAAC,EAAE,MAAM,QAAQ,CAAA;AAGxD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,YAAY,CAAA;AACtC,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAA;AAOpD,8FAA8F;AAC9F,eAAO,MAAM,KAAK;;;EAGhB,CAAA;AAEF,MAAM,MAAM,KAAK,GAAG,OAAO,KAAK,CAAC,IAAI,CAAA;AAIrC,wEAAwE;AACxE,eAAO,MAAM,MAAM,2DAAe,CAAA;AAClC,wHAAwH;AACxH,eAAO,MAAM,MAAM,2DAAe,CAAA;AAClC,oHAAoH;AACpH,eAAO,MAAM,IAAI,yDAAa,CAAA;AAE9B,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"}

package/dist/ui/dialog/index.js

@@ -0,0 +1,67 @@
+import { Match as M, Option, Schema as S } from 'effect';
+import { html } from '../../html';
+import { ts } from '../../schema';
+import { evo } from '../../struct';
+import * as Task from '../../task';
+// MODEL
+/** Schema for the dialog component's state, tracking its unique ID and open/closed status. */
+export const Model = S.Struct({
+    id: S.String,
+    isOpen: S.Boolean,
+});
+// MESSAGE
+/** Sent when the dialog should open. Triggers the showModal command. */
+export const Opened = ts('Opened');
+/** Sent when the dialog should close (Escape key, backdrop click, or programmatic). Triggers the closeModal command. */
+export const Closed = ts('Closed');
+/** Placeholder message used when no action is needed, such as after a showModal or closeModal command completes. */
+export const NoOp = ts('NoOp');
+/** 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 init = (config) => ({
+    id: config.id,
+    isOpen: config.isOpen ?? false,
+});
+// UPDATE
+const dialogSelector = (id) => `#${id}`;
+/** 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 maybeShowCommand = Option.liftPredicate(Task.showModal(dialogSelector(model.id), () => NoOp()), () => !model.isOpen);
+        return [
+            evo(model, { isOpen: () => true }),
+            Option.toArray(maybeShowCommand),
+        ];
+    },
+    Closed: () => {
+        const maybeCloseCommand = Option.liftPredicate(Task.closeModal(dialogSelector(model.id), () => NoOp()), () => model.isOpen);
+        return [
+            evo(model, { isOpen: () => false }),
+            Option.toArray(maybeCloseCommand),
+        ];
+    },
+    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`;
+/** Returns the ID used for `aria-describedby` on the dialog. Apply this to your description element. */
+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 dialogAttributes = [
+        Id(id),
+        AriaLabelledBy(`${id}-title`),
+        AriaDescribedBy(`${id}-description`),
+        OnCancel(toMessage(Closed())),
+        ...(isOpen ? [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] : [];
+    return keyed('dialog')(id, dialogAttributes, content);
+};

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

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

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

@@ -0,0 +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,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"}

package/dist/ui/dialog/public.js

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

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

@@ -0,0 +1,47 @@
+import { Schema as S } from 'effect';
+import type { Html, TagName } from '../../html';
+import type { Command } from '../../runtime/runtime';
+/** Schema for the disclosure component's state, tracking its unique ID and open/closed status. */
+export declare const Model: S.Struct<{
+    id: typeof S.String;
+    isOpen: typeof S.Boolean;
+}>;
+export type Model = typeof Model.Type;
+/** Sent when the disclosure button is clicked. Toggles the open/closed state. */
+export declare const Toggled: import("../../schema").CallableTaggedStruct<"Toggled", {}>;
+/** Sent to explicitly close the disclosure, regardless of its current state. */
+export declare const Closed: import("../../schema").CallableTaggedStruct<"Closed", {}>;
+/** Placeholder message used when no action is needed, such as after a focus command completes. */
+export declare const NoOp: import("../../schema").CallableTaggedStruct<"NoOp", {}>;
+/** Union of all messages the disclosure component can produce. */
+export declare const Message: S.Union<[import("../../schema").CallableTaggedStruct<"Toggled", {}>, import("../../schema").CallableTaggedStruct<"Closed", {}>, import("../../schema").CallableTaggedStruct<"NoOp", {}>]>;
+export type Toggled = typeof Toggled.Type;
+export type Closed = typeof Closed.Type;
+export type NoOp = typeof NoOp.Type;
+export type Message = typeof Message.Type;
+/** Configuration for creating a disclosure model with `init`. */
+export type InitConfig = Readonly<{
+    id: string;
+    isOpen?: boolean;
+}>;
+/** Creates an initial disclosure model from a config. Defaults to closed. */
+export declare const init: (config: InitConfig) => Model;
+/** Processes a disclosure message and returns the next model and commands. */
+export declare const update: (model: Model, message: Message) => [Model, ReadonlyArray<Command<Message>>];
+/** Configuration for rendering a disclosure with `view`. */
+export type ViewConfig<Message> = Readonly<{
+    model: Model;
+    toMessage: (message: Toggled | Closed | NoOp) => Message;
+    buttonClassName: string;
+    buttonContent: Html;
+    panelClassName: string;
+    panelContent: Html;
+    isDisabled?: boolean;
+    persistPanel?: boolean;
+    buttonElement?: TagName;
+    panelElement?: TagName;
+    className?: string;
+}>;
+/** Renders a headless disclosure component with accessible ARIA attributes and keyboard support. */
+export declare const view: <Message>(config: ViewConfig<Message>) => Html;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/disclosure/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsB,MAAM,IAAI,CAAC,EAAE,MAAM,QAAQ,CAAA;AAGxD,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,YAAY,CAAA;AAC/C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAA;AAOpD,kGAAkG;AAClG,eAAO,MAAM,KAAK;;;EAGhB,CAAA;AAEF,MAAM,MAAM,KAAK,GAAG,OAAO,KAAK,CAAC,IAAI,CAAA;AAIrC,iFAAiF;AACjF,eAAO,MAAM,OAAO,4DAAgB,CAAA;AACpC,gFAAgF;AAChF,eAAO,MAAM,MAAM,2DAAe,CAAA;AAClC,kGAAkG;AAClG,eAAO,MAAM,IAAI,yDAAa,CAAA;AAE9B,kEAAkE;AAClE,eAAO,MAAM,OAAO,2LAAiC,CAAA;AAErD,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAC,IAAI,CAAA;AACzC,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,iEAAiE;AACjE,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC;IAChC,EAAE,EAAE,MAAM,CAAA;IACV,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,CAAC,CAAA;AAEF,6EAA6E;AAC7E,eAAO,MAAM,IAAI,GAAI,QAAQ,UAAU,KAAG,KAGxC,CAAA;AAQF,8EAA8E;AAC9E,eAAO,MAAM,MAAM,GACjB,OAAO,KAAK,EACZ,SAAS,OAAO,KACf,CAAC,KAAK,EAAE,aAAa,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CA4BvC,CAAA;AAIH,4DAA4D;AAC5D,MAAM,MAAM,UAAU,CAAC,OAAO,IAAI,QAAQ,CAAC;IACzC,KAAK,EAAE,KAAK,CAAA;IACZ,SAAS,EAAE,CAAC,OAAO,EAAE,OAAO,GAAG,MAAM,GAAG,IAAI,KAAK,OAAO,CAAA;IACxD,eAAe,EAAE,MAAM,CAAA;IACvB,aAAa,EAAE,IAAI,CAAA;IACnB,cAAc,EAAE,MAAM,CAAA;IACtB,YAAY,EAAE,IAAI,CAAA;IAClB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAC,CAAA;AAEF,oGAAoG;AACpG,eAAO,MAAM,IAAI,GAAI,OAAO,EAAE,QAAQ,UAAU,CAAC,OAAO,CAAC,KAAG,IAyF3D,CAAA"}