@foldkit/ui 0.112.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Devin Jameson
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,67 @@
+# @foldkit/ui
+
+Headless, accessible UI components for [Foldkit](https://foldkit.dev).
+
+Each component ships behavior, not markup: the ARIA attributes, keyboard navigation, focus management, and state machine. You provide the elements and the styling. Components follow The Elm Architecture, so they compose into a Foldkit app the same way the rest of your code does.
+
+## Installation
+
+```bash
+pnpm add @foldkit/ui
+# or
+npm install @foldkit/ui
+# or
+yarn add @foldkit/ui
+```
+
+`@foldkit/ui` lists `foldkit` and `effect` as peer dependencies, so install those alongside it.
+
+## Usage
+
+Import a component by name. Each import is a namespace that groups the component's `view` and, for stateful components, its `Model`, `Message`, `init`, and `update`.
+
+```typescript
+import { html } from 'foldkit/html'
+
+import { Button } from '@foldkit/ui'
+
+const view = () => {
+  const h = html<Message>()
+
+  return Button.view({
+    onClick: ClickedSave(), // your Message
+    toView: attributes =>
+      h.button(
+        [...attributes.button, h.Class('px-4 py-2 rounded-lg')],
+        ['Save'],
+      ),
+  })
+}
+```
+
+Components come in two shapes:
+
+- **Render helpers** (Button, Input, Textarea, Select, Fieldset) are stateless. Call their `view` directly with a typed config.
+- **Submodels** (Checkbox, Combobox, Dialog, Listbox, Menu, Popover, RadioGroup, and the like) own a Model. Embed them with `h.submodel`, drive them through their `update`, and consume their `OutMessage` in the parent.
+
+Every component is also available as a subpath import:
+
+```typescript
+import { Button } from '@foldkit/ui/button'
+```
+
+When a component name collides with another import (for example core's `Calendar`), alias it:
+
+```typescript
+import { Calendar as UiCalendar } from '@foldkit/ui'
+```
+
+## Components
+
+Animation, Button, Calendar, Checkbox, Combobox, DatePicker, Dialog, Disclosure, DragAndDrop, Fieldset, FileDrop, Input, Listbox, Menu, Popover, RadioGroup, Select, Slider, Switch, Tabs, Textarea, Toast, Tooltip, and VirtualList.
+
+See the [component documentation](https://foldkit.dev/ui/overview) for the full API and a live example of each.
+
+## License
+
+MIT

package/dist/anchor.d.ts

@@ -0,0 +1,38 @@
+import { Schema as S } from 'effect';
+/** Schema mirroring `@floating-ui/dom`'s `Placement` literal union: a side
+ *  (`top`/`right`/`bottom`/`left`) optionally suffixed with `-start` or `-end`. */
+export declare const Placement: S.Literals<readonly ["top", "right", "bottom", "left", "top-start", "top-end", "right-start", "right-end", "bottom-start", "bottom-end", "left-start", "left-end"]>;
+/** Static configuration for anchor-based positioning of a floating element relative to a button. */
+export declare const AnchorConfig: S.Struct<{
+    readonly placement: S.optional<S.Literals<readonly ["top", "right", "bottom", "left", "top-start", "top-end", "right-start", "right-end", "bottom-start", "bottom-end", "left-start", "left-end"]>>;
+    readonly gap: S.optional<S.Number>;
+    readonly offset: S.optional<S.Number>;
+    readonly padding: S.optional<S.Number>;
+    readonly portal: S.optional<S.Boolean>;
+}>;
+export type AnchorConfig = typeof AnchorConfig.Type;
+/** Relocates an element into the shared `foldkit-portal-root` div appended to
+ *  `document.body`, escaping any ancestor stacking context. Returns a cleanup
+ *  function that removes the element from the portal root. Designed to be
+ *  called from inside an `OnMount` action: the consumer wraps the call in
+ *  `Effect.sync` and stashes the returned cleanup in the `Mount` result. */
+export declare const portalToBody: (element: Element) => (() => void);
+/** Positions a floating element relative to its button using Floating UI, then
+ *  returns a cleanup function. Designed to be called inside an `OnMount`
+ *  action: the consumer wraps the call in `Effect.sync` and stashes the
+ *  returned cleanup in the `Mount` result. When `interceptTab` is true
+ *  (default), Tab key in portal mode refocuses the button — set to false for
+ *  components like Popover where Tab should navigate naturally within the
+ *  panel. When `focusAfterPosition` is true, the element is focused after the
+ *  first position computation clears visibility — deferred via
+ *  requestAnimationFrame so the element is painted before focus fires.
+ *  `focusSelector` optionally targets a descendant (e.g. a calendar grid
+ *  inside a popover panel) instead of the panel itself. */
+export declare const anchorSetup: (config: {
+    buttonId: string;
+    anchor: AnchorConfig;
+    interceptTab?: boolean;
+    focusAfterPosition?: boolean;
+    focusSelector?: string;
+}) => (element: Element) => (() => void);
+//# sourceMappingURL=anchor.d.ts.map

package/dist/anchor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"anchor.d.ts","sourceRoot":"","sources":["../src/anchor.ts"],"names":[],"mappings":"AAAA,OAAO,EAAY,MAAM,IAAI,CAAC,EAAE,MAAM,QAAQ,CAAA;AAW9C;mFACmF;AACnF,eAAO,MAAM,SAAS,qKAapB,CAAA;AAEF,oGAAoG;AACpG,eAAO,MAAM,YAAY;;;;;;EAMvB,CAAA;AAEF,MAAM,MAAM,YAAY,GAAG,OAAO,YAAY,CAAC,IAAI,CAAA;AAwBnD;;;;4EAI4E;AAC5E,eAAO,MAAM,YAAY,GAAI,SAAS,OAAO,KAAG,CAAC,MAAM,IAAI,CAW1D,CAAA;AAED;;;;;;;;;;2DAU2D;AAC3D,eAAO,MAAM,WAAW,GACrB,QAAQ;IACP,QAAQ,EAAE,MAAM,CAAA;IAChB,MAAM,EAAE,YAAY,CAAA;IACpB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,MACA,SAAS,OAAO,KAAG,CAAC,MAAM,IAAI,CAiF9B,CAAA"}

package/dist/anchor.js

@@ -0,0 +1,142 @@
+import { Function, Schema as S } from 'effect';
+import { autoUpdate, computePosition, flip, offset as floatingOffset, shift, size, } from '@floating-ui/dom';
+/** Schema mirroring `@floating-ui/dom`'s `Placement` literal union: a side
+ *  (`top`/`right`/`bottom`/`left`) optionally suffixed with `-start` or `-end`. */
+export const Placement = S.Literals([
+    'top',
+    'right',
+    'bottom',
+    'left',
+    'top-start',
+    'top-end',
+    'right-start',
+    'right-end',
+    'bottom-start',
+    'bottom-end',
+    'left-start',
+    'left-end',
+]);
+/** Static configuration for anchor-based positioning of a floating element relative to a button. */
+export const AnchorConfig = S.Struct({
+    placement: S.optional(Placement),
+    gap: S.optional(S.Number),
+    offset: S.optional(S.Number),
+    padding: S.optional(S.Number),
+    portal: S.optional(S.Boolean),
+});
+const PORTAL_ROOT_ID = 'foldkit-portal-root';
+const getOrCreatePortalRoot = () => {
+    const existing = document.getElementById(PORTAL_ROOT_ID);
+    if (existing) {
+        return existing;
+    }
+    const root = document.createElement('div');
+    root.id = PORTAL_ROOT_ID;
+    // NOTE: prepended (not appended) so portaled overlays sit BEFORE the page's
+    // listbox/popover/menu wrappers in tree order. Those wrappers are
+    // `position: relative; z-index: auto` and paint at CSS step 8 in tree order;
+    // a backdrop appended after them would paint on top of every button on the
+    // page, breaking click-outside detection. Prepending makes wrappers paint
+    // above the backdrop, while panels (z-10) still win via step 9.
+    document.body.insertBefore(root, document.body.firstChild);
+    return root;
+};
+/** Relocates an element into the shared `foldkit-portal-root` div appended to
+ *  `document.body`, escaping any ancestor stacking context. Returns a cleanup
+ *  function that removes the element from the portal root. Designed to be
+ *  called from inside an `OnMount` action: the consumer wraps the call in
+ *  `Effect.sync` and stashes the returned cleanup in the `Mount` result. */
+export const portalToBody = (element) => {
+    getOrCreatePortalRoot().appendChild(element);
+    return () => {
+        try {
+            element.remove();
+        }
+        catch {
+            // NOTE: a re-render may unmount the element before this cleanup fires,
+            // so the remove() call can throw on a node that's already been removed.
+            // Swallow the error.
+        }
+    };
+};
+/** Positions a floating element relative to its button using Floating UI, then
+ *  returns a cleanup function. Designed to be called inside an `OnMount`
+ *  action: the consumer wraps the call in `Effect.sync` and stashes the
+ *  returned cleanup in the `Mount` result. When `interceptTab` is true
+ *  (default), Tab key in portal mode refocuses the button — set to false for
+ *  components like Popover where Tab should navigate naturally within the
+ *  panel. When `focusAfterPosition` is true, the element is focused after the
+ *  first position computation clears visibility — deferred via
+ *  requestAnimationFrame so the element is painted before focus fires.
+ *  `focusSelector` optionally targets a descendant (e.g. a calendar grid
+ *  inside a popover panel) instead of the panel itself. */
+export const anchorSetup = (config) => (element) => {
+    const button = document.getElementById(config.buttonId);
+    if (!(button instanceof HTMLElement) || !(element instanceof HTMLElement)) {
+        return Function.constVoid;
+    }
+    const isPortal = config.anchor.portal ?? true;
+    const portalCleanup = isPortal ? portalToBody(element) : undefined;
+    const { placement, gap, offset: crossAxis, padding } = config.anchor;
+    const shouldInterceptTab = config.interceptTab ?? true;
+    let isFirstUpdate = true;
+    const floatingCleanup = autoUpdate(button, element, () => {
+        computePosition(button, element, {
+            placement: placement ?? 'bottom-start',
+            strategy: 'absolute',
+            middleware: [
+                floatingOffset({
+                    mainAxis: gap ?? 0,
+                    crossAxis: crossAxis ?? 0,
+                }),
+                flip({ padding: padding ?? 0 }),
+                shift({ padding: padding ?? 0 }),
+                size({
+                    padding: padding ?? 0,
+                    apply({ rects, availableHeight }) {
+                        element.style.setProperty('--button-width', `${rects.reference.width}px`);
+                        element.style.maxHeight = `${availableHeight}px`;
+                        element.style.overflowY = 'auto';
+                        element.style.overscrollBehavior = 'none';
+                    },
+                }),
+            ],
+        }).then(({ x, y }) => {
+            element.style.left = `${x}px`;
+            element.style.top = `${y}px`;
+            if (isFirstUpdate) {
+                isFirstUpdate = false;
+                element.style.visibility = '';
+                if (config.focusAfterPosition ?? false) {
+                    requestAnimationFrame(() => {
+                        const target = config.focusSelector
+                            ? document.querySelector(config.focusSelector)
+                            : element;
+                        if (target instanceof HTMLElement) {
+                            target.focus();
+                        }
+                    });
+                }
+            }
+        });
+    });
+    if (isPortal && shouldInterceptTab) {
+        const handleTabKey = (event) => {
+            if (event instanceof KeyboardEvent && event.key === 'Tab') {
+                button.focus();
+            }
+        };
+        element.addEventListener('keydown', handleTabKey);
+        return () => {
+            floatingCleanup();
+            element.removeEventListener('keydown', handleTabKey);
+            portalCleanup?.();
+        };
+    }
+    else {
+        return () => {
+            floatingCleanup();
+            portalCleanup?.();
+        };
+    }
+};

package/dist/animation/index.d.ts

@@ -0,0 +1,49 @@
+import { type ChildAttribute, type Html, type TagName } from 'foldkit/html';
+import { AdvancedAnimationFrame, EndedAnimation, Hid, Message, Model, OutMessage, Showed, StartedLeaveAnimating, TransitionState, TransitionedOut, init } from './schema.js';
+import { RequestFrame, WaitForAnimationSettled, defaultLeaveCommand, update } from './update.js';
+export type { InitConfig } from './schema.js';
+export { AdvancedAnimationFrame, EndedAnimation, Hid, init, Message, Model, OutMessage, Showed, StartedLeaveAnimating, TransitionState, TransitionedOut, };
+export { RequestFrame, WaitForAnimationSettled, defaultLeaveCommand, update };
+/** Per-render view inputs passed to `view` via `h.submodel`'s `viewInputs` field. */
+export type ViewInputs = Readonly<{
+    content: Html;
+    className?: string;
+    attributes?: ReadonlyArray<ChildAttribute>;
+    element?: TagName;
+    /** When true, wraps content in a CSS grid container that smoothly animates
+     *  height via `grid-template-rows: 0fr → 1fr`. The element stays in the DOM
+     *  when hidden (collapsed to zero height) instead of being removed. */
+    animateSize?: boolean;
+}>;
+/** Renders a headless animation wrapper that coordinates CSS transitions and
+ *  CSS keyframe animations via data attributes.
+ *
+ *  Data attributes reflect the current lifecycle phase:
+ *  - `data-closed`: element is in its hidden/initial state
+ *  - `data-enter`: enter animation is active
+ *  - `data-leave`: leave animation is active
+ *  - `data-transition`: any animation is active
+ */
+export declare const view: import("foldkit/submodel").View<{
+    readonly id: string;
+    readonly isShowing: boolean;
+    readonly transitionState: "Idle" | "EnterStart" | "EnterAnimating" | "LeaveStart" | "LeaveAnimating";
+}, {
+    readonly _tag: "Showed";
+} | {
+    readonly _tag: "Hid";
+} | {
+    readonly _tag: "AdvancedAnimationFrame";
+} | {
+    readonly _tag: "EndedAnimation";
+}, Readonly<{
+    content: Html;
+    className?: string;
+    attributes?: ReadonlyArray<ChildAttribute>;
+    element?: TagName;
+    /** When true, wraps content in a CSS grid container that smoothly animates
+     *  height via `grid-template-rows: 0fr → 1fr`. The element stays in the DOM
+     *  when hidden (collapsed to zero height) instead of being removed. */
+    animateSize?: boolean;
+}>>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/animation/index.ts"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,IAAI,EACT,KAAK,OAAO,EAEb,MAAM,cAAc,CAAA;AAGrB,OAAO,EACL,sBAAsB,EACtB,cAAc,EACd,GAAG,EACH,OAAO,EACP,KAAK,EACL,UAAU,EACV,MAAM,EACN,qBAAqB,EACrB,eAAe,EACf,eAAe,EACf,IAAI,EACL,MAAM,aAAa,CAAA;AACpB,OAAO,EACL,YAAY,EACZ,uBAAuB,EACvB,mBAAmB,EACnB,MAAM,EACP,MAAM,aAAa,CAAA;AAEpB,YAAY,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AAC7C,OAAO,EACL,sBAAsB,EACtB,cAAc,EACd,GAAG,EACH,IAAI,EACJ,OAAO,EACP,KAAK,EACL,UAAU,EACV,MAAM,EACN,qBAAqB,EACrB,eAAe,EACf,eAAe,GAChB,CAAA;AAED,OAAO,EAAE,YAAY,EAAE,uBAAuB,EAAE,mBAAmB,EAAE,MAAM,EAAE,CAAA;AAI7E,qFAAqF;AACrF,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC;IAChC,OAAO,EAAE,IAAI,CAAA;IACb,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,aAAa,CAAC,cAAc,CAAC,CAAA;IAC1C,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;2EAEuE;IACvE,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB,CAAC,CAAA;AAEF;;;;;;;;GAQG;AACH,eAAO,MAAM,IAAI;;;;;;;;;;;;;aAnBN,IAAI;gBACD,MAAM;iBACL,aAAa,CAAC,cAAc,CAAC;cAChC,OAAO;IACjB;;2EAEuE;kBACzD,OAAO;GA6GtB,CAAA"}

package/dist/animation/index.js

@@ -0,0 +1,75 @@
+import { Match as M } from 'effect';
+import { html, } from 'foldkit/html';
+import { defineView } from 'foldkit/submodel';
+import { AdvancedAnimationFrame, EndedAnimation, Hid, Message, Model, OutMessage, Showed, StartedLeaveAnimating, TransitionState, TransitionedOut, init, } from './schema.js';
+import { RequestFrame, WaitForAnimationSettled, defaultLeaveCommand, update, } from './update.js';
+export { AdvancedAnimationFrame, EndedAnimation, Hid, init, Message, Model, OutMessage, Showed, StartedLeaveAnimating, TransitionState, TransitionedOut, };
+export { RequestFrame, WaitForAnimationSettled, defaultLeaveCommand, update };
+/** Renders a headless animation wrapper that coordinates CSS transitions and
+ *  CSS keyframe animations via data attributes.
+ *
+ *  Data attributes reflect the current lifecycle phase:
+ *  - `data-closed`: element is in its hidden/initial state
+ *  - `data-enter`: enter animation is active
+ *  - `data-leave`: leave animation is active
+ *  - `data-transition`: any animation is active
+ */
+export const view = defineView((model, viewInputs) => {
+    const h = html();
+    const { id, isShowing, transitionState } = model;
+    const { content, className, attributes = [], element = 'div', animateSize = false, } = viewInputs;
+    const isLeaving = transitionState === 'LeaveStart' || transitionState === 'LeaveAnimating';
+    const isVisible = isShowing || isLeaving;
+    const transitionAttributes = M.value(transitionState).pipe(M.when('EnterStart', () => [
+        h.DataAttribute('closed', ''),
+        h.DataAttribute('enter', ''),
+        h.DataAttribute('transition', ''),
+    ]), M.when('EnterAnimating', () => [
+        h.DataAttribute('enter', ''),
+        h.DataAttribute('transition', ''),
+    ]), M.when('LeaveStart', () => [
+        h.DataAttribute('leave', ''),
+        h.DataAttribute('transition', ''),
+    ]), M.when('LeaveAnimating', () => [
+        h.DataAttribute('closed', ''),
+        h.DataAttribute('leave', ''),
+        h.DataAttribute('transition', ''),
+    ]), M.orElse(() => []));
+    if (animateSize) {
+        const isClosed = transitionState === 'EnterStart' ||
+            transitionState === 'LeaveAnimating' ||
+            !isVisible;
+        return h.div([
+            h.Style({
+                display: 'grid',
+                gridTemplateRows: isClosed ? '0fr' : '1fr',
+                transition: 'grid-template-rows 200ms ease-out',
+                overflow: 'hidden',
+            }),
+        ], [
+            h.div([
+                h.Style({ minHeight: '0px', overflow: 'hidden' }),
+                ...(!isVisible ? [h.AriaHidden(true)] : []),
+            ], [
+                h.keyed(element)(id, [
+                    h.Id(id),
+                    ...(isClosed && transitionState === 'Idle'
+                        ? [h.DataAttribute('closed', '')]
+                        : []),
+                    ...transitionAttributes,
+                    ...(className ? [h.Class(className)] : []),
+                    ...attributes,
+                ], [content]),
+            ]),
+        ]);
+    }
+    if (!isVisible) {
+        return h.empty;
+    }
+    return h.keyed(element)(id, [
+        h.Id(id),
+        ...transitionAttributes,
+        ...(className ? [h.Class(className)] : []),
+        ...attributes,
+    ], [content]);
+});

package/dist/animation/public.d.ts

@@ -0,0 +1,3 @@
+export { init, update, view, defaultLeaveCommand, Model, Message, OutMessage, Showed, Hid, AdvancedAnimationFrame, EndedAnimation, StartedLeaveAnimating, TransitionedOut, TransitionState, RequestFrame, WaitForAnimationSettled, } from './index.js';
+export type { InitConfig, ViewInputs } from './index.js';
+//# sourceMappingURL=public.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"public.d.ts","sourceRoot":"","sources":["../../src/animation/public.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,IAAI,EACJ,MAAM,EACN,IAAI,EACJ,mBAAmB,EACnB,KAAK,EACL,OAAO,EACP,UAAU,EACV,MAAM,EACN,GAAG,EACH,sBAAsB,EACtB,cAAc,EACd,qBAAqB,EACrB,eAAe,EACf,eAAe,EACf,YAAY,EACZ,uBAAuB,GACxB,MAAM,YAAY,CAAA;AAEnB,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,YAAY,CAAA"}

package/dist/animation/public.js

@@ -0,0 +1 @@
+export { init, update, view, defaultLeaveCommand, Model, Message, OutMessage, Showed, Hid, AdvancedAnimationFrame, EndedAnimation, StartedLeaveAnimating, TransitionedOut, TransitionState, RequestFrame, WaitForAnimationSettled, } from './index.js';

package/dist/animation/schema.d.ts

@@ -0,0 +1,43 @@
+import { Schema as S } from 'effect';
+/** Schema for the animation lifecycle state, tracking enter/leave phases. */
+export declare const TransitionState: S.Literals<readonly ["Idle", "EnterStart", "EnterAnimating", "LeaveStart", "LeaveAnimating"]>;
+export type TransitionState = typeof TransitionState.Type;
+/** Schema for the animation component's state, tracking its unique ID, visibility intent, and lifecycle phase. */
+export declare const Model: S.Struct<{
+    readonly id: S.String;
+    readonly isShowing: S.Boolean;
+    readonly transitionState: S.Literals<readonly ["Idle", "EnterStart", "EnterAnimating", "LeaveStart", "LeaveAnimating"]>;
+}>;
+export type Model = typeof Model.Type;
+/** Sent when the animation should enter (become visible). Starts the enter sequence. */
+export declare const Showed: import("foldkit/schema").CallableTaggedStruct<"Showed", {}>;
+/** Sent when the animation should leave (become hidden). Starts the leave sequence. */
+export declare const Hid: import("foldkit/schema").CallableTaggedStruct<"Hid", {}>;
+/** Sent internally when a double-rAF completes, advancing the lifecycle to its animating phase. */
+export declare const AdvancedAnimationFrame: import("foldkit/schema").CallableTaggedStruct<"AdvancedAnimationFrame", {}>;
+/** Sent internally when all CSS animations on the element have settled. Covers both CSS transitions and CSS keyframe animations. */
+export declare const EndedAnimation: import("foldkit/schema").CallableTaggedStruct<"EndedAnimation", {}>;
+/** Union of all messages the animation component can produce. */
+export declare const Message: S.Union<[
+    typeof Showed,
+    typeof Hid,
+    typeof AdvancedAnimationFrame,
+    typeof EndedAnimation
+]>;
+export type Message = typeof Message.Type;
+export type Showed = typeof Showed.Type;
+export type Hid = typeof Hid.Type;
+/** Sent to the parent when the leave sequence advances to LeaveAnimating. The parent is responsible for providing the command that detects when the leave animation completes (e.g. WaitForAnimationSettled or a racing command). Use `defaultLeaveCommand` for the standard behavior. */
+export declare const StartedLeaveAnimating: import("foldkit/schema").CallableTaggedStruct<"StartedLeaveAnimating", {}>;
+/** Sent to the parent when the leave animation completes. The parent can use this to unmount content or update its own state. */
+export declare const TransitionedOut: import("foldkit/schema").CallableTaggedStruct<"TransitionedOut", {}>;
+export declare const OutMessage: S.Union<readonly [import("foldkit/schema").CallableTaggedStruct<"StartedLeaveAnimating", {}>, import("foldkit/schema").CallableTaggedStruct<"TransitionedOut", {}>]>;
+export type OutMessage = typeof OutMessage.Type;
+/** Configuration for creating an animation model with `init`. */
+export type InitConfig = Readonly<{
+    id: string;
+    isShowing?: boolean;
+}>;
+/** Creates an initial animation model from a config. Defaults to hidden. */
+export declare const init: (config: InitConfig) => Model;
+//# sourceMappingURL=schema.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../src/animation/schema.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,CAAC,EAAE,MAAM,QAAQ,CAAA;AAKpC,6EAA6E;AAC7E,eAAO,MAAM,eAAe,+FAM1B,CAAA;AACF,MAAM,MAAM,eAAe,GAAG,OAAO,eAAe,CAAC,IAAI,CAAA;AAIzD,kHAAkH;AAClH,eAAO,MAAM,KAAK;;;;EAIhB,CAAA;AAEF,MAAM,MAAM,KAAK,GAAG,OAAO,KAAK,CAAC,IAAI,CAAA;AAIrC,wFAAwF;AACxF,eAAO,MAAM,MAAM,6DAAc,CAAA;AACjC,uFAAuF;AACvF,eAAO,MAAM,GAAG,0DAAW,CAAA;AAC3B,mGAAmG;AACnG,eAAO,MAAM,sBAAsB,6EAA8B,CAAA;AACjE,oIAAoI;AACpI,eAAO,MAAM,cAAc,qEAAsB,CAAA;AAEjD,iEAAiE;AACjE,eAAO,MAAM,OAAO,EAAE,CAAC,CAAC,KAAK,CAC3B;IACE,OAAO,MAAM;IACb,OAAO,GAAG;IACV,OAAO,sBAAsB;IAC7B,OAAO,cAAc;CACtB,CAC+D,CAAA;AAClE,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAC,IAAI,CAAA;AAEzC,MAAM,MAAM,MAAM,GAAG,OAAO,MAAM,CAAC,IAAI,CAAA;AACvC,MAAM,MAAM,GAAG,GAAG,OAAO,GAAG,CAAC,IAAI,CAAA;AAIjC,0RAA0R;AAC1R,eAAO,MAAM,qBAAqB,4EAA6B,CAAA;AAC/D,iIAAiI;AACjI,eAAO,MAAM,eAAe,sEAAuB,CAAA;AAEnD,eAAO,MAAM,UAAU,sKAAoD,CAAA;AAC3E,MAAM,MAAM,UAAU,GAAG,OAAO,UAAU,CAAC,IAAI,CAAA;AAI/C,iEAAiE;AACjE,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC;IAChC,EAAE,EAAE,MAAM,CAAA;IACV,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,CAAC,CAAA;AAEF,4EAA4E;AAC5E,eAAO,MAAM,IAAI,GAAI,QAAQ,UAAU,KAAG,KAIxC,CAAA"}

package/dist/animation/schema.js

@@ -0,0 +1,41 @@
+import { Schema as S } from 'effect';
+import { m } from 'foldkit/message';
+// TRANSITION STATE
+/** Schema for the animation lifecycle state, tracking enter/leave phases. */
+export const TransitionState = S.Literals([
+    'Idle',
+    'EnterStart',
+    'EnterAnimating',
+    'LeaveStart',
+    'LeaveAnimating',
+]);
+// MODEL
+/** Schema for the animation component's state, tracking its unique ID, visibility intent, and lifecycle phase. */
+export const Model = S.Struct({
+    id: S.String,
+    isShowing: S.Boolean,
+    transitionState: TransitionState,
+});
+// MESSAGE
+/** Sent when the animation should enter (become visible). Starts the enter sequence. */
+export const Showed = m('Showed');
+/** Sent when the animation should leave (become hidden). Starts the leave sequence. */
+export const Hid = m('Hid');
+/** Sent internally when a double-rAF completes, advancing the lifecycle to its animating phase. */
+export const AdvancedAnimationFrame = m('AdvancedAnimationFrame');
+/** Sent internally when all CSS animations on the element have settled. Covers both CSS transitions and CSS keyframe animations. */
+export const EndedAnimation = m('EndedAnimation');
+/** Union of all messages the animation component can produce. */
+export const Message = S.Union([Showed, Hid, AdvancedAnimationFrame, EndedAnimation]);
+// OUT MESSAGE
+/** Sent to the parent when the leave sequence advances to LeaveAnimating. The parent is responsible for providing the command that detects when the leave animation completes (e.g. WaitForAnimationSettled or a racing command). Use `defaultLeaveCommand` for the standard behavior. */
+export const StartedLeaveAnimating = m('StartedLeaveAnimating');
+/** Sent to the parent when the leave animation completes. The parent can use this to unmount content or update its own state. */
+export const TransitionedOut = m('TransitionedOut');
+export const OutMessage = S.Union([StartedLeaveAnimating, TransitionedOut]);
+/** Creates an initial animation model from a config. Defaults to hidden. */
+export const init = (config) => ({
+    id: config.id,
+    isShowing: config.isShowing ?? false,
+    transitionState: 'Idle',
+});

package/dist/animation/update.d.ts

@@ -0,0 +1,24 @@
+import { Effect, Option, Schema as S } from 'effect';
+import * as Command from 'foldkit/command';
+import { type Message, type Model, type OutMessage } from './schema.js';
+type UpdateReturn = readonly [
+    Model,
+    ReadonlyArray<Command.Command<Message>>,
+    Option.Option<OutMessage>
+];
+/** Advances the enter/leave lifecycle by waiting a double-rAF. */
+export declare const RequestFrame: Command.CommandDefinitionNoArgs<"RequestFrame", Effect.Effect<{
+    readonly _tag: "AdvancedAnimationFrame";
+}, never, never>>;
+/** Waits for all CSS animations on the element to settle. Covers both CSS transitions and CSS keyframe animations. */
+export declare const WaitForAnimationSettled: Command.CommandDefinitionWithArgs<"WaitForAnimationSettled", {
+    id: S.String;
+}, Effect.Effect<{
+    readonly _tag: "EndedAnimation";
+}, never, never>>;
+/** Processes an animation message and returns the next model, commands, and optional OutMessage. */
+export declare const update: (model: Model, message: Message) => UpdateReturn;
+/** Creates the standard leave-phase command that waits for CSS animations on the element to settle. Use this when handling the `StartedLeaveAnimating` OutMessage for components that don't need custom leave behavior. */
+export declare const defaultLeaveCommand: (model: Model) => Command.Command<Message>;
+export {};
+//# sourceMappingURL=update.d.ts.map

package/dist/animation/update.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"update.d.ts","sourceRoot":"","sources":["../../src/animation/update.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAc,MAAM,EAAE,MAAM,IAAI,CAAC,EAAE,MAAM,QAAQ,CAAA;AAChE,OAAO,KAAK,OAAO,MAAM,iBAAiB,CAAA;AAK1C,OAAO,EAGL,KAAK,OAAO,EACZ,KAAK,KAAK,EACV,KAAK,UAAU,EAGhB,MAAM,aAAa,CAAA;AAMpB,KAAK,YAAY,GAAG,SAAS;IAC3B,KAAK;IACL,aAAa,CAAC,OAAO,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;IACvC,MAAM,CAAC,MAAM,CAAC,UAAU,CAAC;CAC1B,CAAA;AAGD,kEAAkE;AAClE,eAAO,MAAM,YAAY;;iBAGqC,CAAA;AAC9D,sHAAsH;AACtH,eAAO,MAAM,uBAAuB;;;;iBAQnC,CAAA;AAED,oGAAoG;AACpG,eAAO,MAAM,MAAM,GAAI,OAAO,KAAK,EAAE,SAAS,OAAO,KAAG,YAyEvD,CAAA;AAED,2NAA2N;AAC3N,eAAO,MAAM,mBAAmB,GAAI,OAAO,KAAK,KAAG,OAAO,CAAC,OAAO,CAAC,OAAO,CAC/B,CAAA"}

package/dist/animation/update.js

@@ -0,0 +1,67 @@
+import { Effect, Match as M, Option, Schema as S } from 'effect';
+import * as Command from 'foldkit/command';
+import * as Dom from 'foldkit/dom';
+import * as Render from 'foldkit/render';
+import { evo } from 'foldkit/struct';
+import { AdvancedAnimationFrame, EndedAnimation, StartedLeaveAnimating, TransitionedOut, } from './schema.js';
+// UPDATE
+const elementSelector = (id) => `#${id}`;
+const withUpdateReturn = M.withReturnType();
+/** Advances the enter/leave lifecycle by waiting a double-rAF. */
+export const RequestFrame = Command.define('RequestFrame', AdvancedAnimationFrame)(Render.afterPaint.pipe(Effect.as(AdvancedAnimationFrame())));
+/** Waits for all CSS animations on the element to settle. Covers both CSS transitions and CSS keyframe animations. */
+export const WaitForAnimationSettled = Command.define('WaitForAnimationSettled', { id: S.String }, EndedAnimation)(({ id }) => Dom.waitForAnimationSettled(elementSelector(id)).pipe(Effect.as(EndedAnimation())));
+/** Processes an animation message and returns the next model, commands, and optional OutMessage. */
+export const update = (model, message) => {
+    const maybeNextFrame = RequestFrame();
+    return M.value(message).pipe(withUpdateReturn, M.tagsExhaustive({
+        Showed: () => {
+            if (model.isShowing) {
+                return [model, [], Option.none()];
+            }
+            return [
+                evo(model, {
+                    isShowing: () => true,
+                    transitionState: () => 'EnterStart',
+                }),
+                [maybeNextFrame],
+                Option.none(),
+            ];
+        },
+        Hid: () => {
+            const isLeaving = model.transitionState === 'LeaveStart' ||
+                model.transitionState === 'LeaveAnimating';
+            if (isLeaving || !model.isShowing) {
+                return [model, [], Option.none()];
+            }
+            return [
+                evo(model, {
+                    isShowing: () => false,
+                    transitionState: () => 'LeaveStart',
+                }),
+                [maybeNextFrame],
+                Option.none(),
+            ];
+        },
+        AdvancedAnimationFrame: () => M.value(model.transitionState).pipe(withUpdateReturn, M.when('EnterStart', () => [
+            evo(model, { transitionState: () => 'EnterAnimating' }),
+            [WaitForAnimationSettled({ id: model.id })],
+            Option.none(),
+        ]), M.when('LeaveStart', () => [
+            evo(model, { transitionState: () => 'LeaveAnimating' }),
+            [],
+            Option.some(StartedLeaveAnimating()),
+        ]), M.orElse(() => [model, [], Option.none()])),
+        EndedAnimation: () => M.value(model.transitionState).pipe(withUpdateReturn, M.when('EnterAnimating', () => [
+            evo(model, { transitionState: () => 'Idle' }),
+            [],
+            Option.none(),
+        ]), M.when('LeaveAnimating', () => [
+            evo(model, { transitionState: () => 'Idle' }),
+            [],
+            Option.some(TransitionedOut()),
+        ]), M.orElse(() => [model, [], Option.none()])),
+    }));
+};
+/** Creates the standard leave-phase command that waits for CSS animations on the element to settle. Use this when handling the `StartedLeaveAnimating` OutMessage for components that don't need custom leave behavior. */
+export const defaultLeaveCommand = (model) => WaitForAnimationSettled({ id: model.id });

package/dist/button/index.d.ts

@@ -0,0 +1,17 @@
+import type { Attribute } from 'foldkit/html';
+import type { Html } from 'foldkit/html';
+/** Attribute groups the button component provides to the consumer's `toView` callback. */
+export type ButtonAttributes<ParentMessage> = Readonly<{
+    button: ReadonlyArray<Attribute<ParentMessage>>;
+}>;
+/** Configuration for rendering a button with `view`. */
+export type ViewConfig<ParentMessage> = Readonly<{
+    toView: (attributes: ButtonAttributes<ParentMessage>) => Html;
+    onClick?: ParentMessage;
+    isDisabled?: boolean;
+    type?: 'button' | 'submit' | 'reset';
+    isAutofocus?: boolean;
+}>;
+/** Renders an accessible button by building attribute groups and delegating layout to the consumer's `toView` callback. */
+export declare const view: <ParentMessage>(config: ViewConfig<ParentMessage>) => Html;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/button/index.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAE7C,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAIxC,0FAA0F;AAC1F,MAAM,MAAM,gBAAgB,CAAC,aAAa,IAAI,QAAQ,CAAC;IACrD,MAAM,EAAE,aAAa,CAAC,SAAS,CAAC,aAAa,CAAC,CAAC,CAAA;CAChD,CAAC,CAAA;AAEF,wDAAwD;AACxD,MAAM,MAAM,UAAU,CAAC,aAAa,IAAI,QAAQ,CAAC;IAC/C,MAAM,EAAE,CAAC,UAAU,EAAE,gBAAgB,CAAC,aAAa,CAAC,KAAK,IAAI,CAAA;IAC7D,OAAO,CAAC,EAAE,aAAa,CAAA;IACvB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAA;IACpC,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB,CAAC,CAAA;AAEF,2HAA2H;AAC3H,eAAO,MAAM,IAAI,GAAI,aAAa,EAChC,QAAQ,UAAU,CAAC,aAAa,CAAC,KAChC,IA+BF,CAAA"}