@typed/ui 1.0.0-beta.1 → 1.0.0-beta.11

package/dist/Carousel.d.ts

@@ -0,0 +1,346 @@
+/**
+ * Carousel state keeps the active slide and rotation pause policy outside the renderer. Root
+ * pauses rotation on focus and pointer entry; slides retain DOM identity while hidden; controls
+ * use native button clicks.
+ *
+ * @remarks
+ * The module keeps policy, state transitions, and DOM rendering separable so applications can use
+ * the state and pure operations without mounting UI, or supply custom hosts without replacing native
+ * events and browser-owned focus.
+ *
+ * Learn the interaction in the [Carousel guide](/explore/ui-carousel).
+ *
+ * @since 1.0.0
+ * @category modules
+ * @packageDocumentation
+ */
+import * as Effect from "effect/Effect";
+import type * as Scope from "effect/Scope";
+import * as Schema from "effect/Schema";
+import type { Fx } from "@typed/fx/Fx";
+import { RefSubject } from "@typed/fx";
+import { type Renderable, type RenderEvent, type RenderTemplate } from "@typed/template";
+import * as Collection from "./Collection.js";
+import * as Dom from "./Dom.js";
+import type { HostResult } from "./Dom/Types.js";
+/**
+ * The visible slide identity and explicit paused flag.
+ * Changing `paused` does not start a timer; an application scheduler must honor the flag.
+ *
+ * @since 1.0.0
+ * @category Slide and rotation state
+ */
+export interface State {
+    /**
+     * Id currently active for keyboard navigation; null means no active item.
+     * @since 1.0.0
+     * @category Keyboard focus
+     */
+    readonly activeId: string;
+    /**
+     * Whether automatic carousel rotation is suspended.
+     * @since 1.0.0
+     * @category Rotation policy
+     */
+    readonly paused: boolean;
+}
+/**
+ * Initial Carousel values. activeId is required and paused defaults to true.
+ *
+ * @since 1.0.0
+ * @category Slide and rotation state
+ */
+export interface InitialState {
+    /**
+     * Id currently active for keyboard navigation; null means no active item.
+     * @since 1.0.0
+     * @category Keyboard focus
+     */
+    readonly activeId: string;
+    /**
+     * Whether automatic carousel rotation is suspended.
+     * @since 1.0.0
+     * @category Rotation policy
+     */
+    readonly paused?: boolean;
+}
+/**
+ * Effect Schema used by makeState to encode, decode, and hydrate Carousel state.
+ *
+ * @remarks
+ * @example
+ * ```ts
+ * import * as Schema from "effect/Schema";
+ * import * as Carousel from "@typed/ui/Carousel";
+ *
+ * const decodeState = Schema.decodeUnknownEffect(Carousel.StateSchema);
+ * ```
+ * @since 1.0.0
+ * @category Slide and rotation state
+ */
+export declare const StateSchema: Schema.Struct<{
+    readonly activeId: Schema.String;
+    readonly paused: Schema.Boolean;
+}>;
+/**
+ * Creates hydrated Carousel state. activeId is required and paused defaults to true.
+ *
+ * @remarks
+ * The returned Effect creates the RefSubject when run. That state is renderer-independent;
+ * collection registrations belong to the separate Scope that runs register or ref, not to state
+ * creation.
+ *
+ * @example
+ * ```ts
+ * import * as Effect from "effect/Effect";
+ * import * as Carousel from "@typed/ui/Carousel";
+ *
+ * const program = Effect.scoped(
+ *   Effect.gen(function* () {
+ *     const state = yield* Carousel.makeState({ activeId: "slide-1" });
+ *     const collection = yield* Carousel.makeCollection();
+ *     return { state: yield* state, collection: yield* collection };
+ *   }),
+ * );
+ * ```
+ * @since 1.0.0
+ * @category Slide and rotation state
+ */
+export declare function makeState(initial: InitialState): Effect.Effect<RefSubject.HydratedRefSubject<{
+    readonly activeId: string;
+    readonly paused: boolean;
+}, Schema.SchemaError, never, never>, never, Scope.Scope>;
+/**
+ * Creates a scoped Collection for Carousel items.
+ *
+ * @remarks
+ * The returned Effect allocates the RefSubject in the caller's Scope. Each later registration is
+ * owned by the Scope that runs register, independently of this construction Effect.
+ *
+ * @example
+ * ```ts
+ * import * as Effect from "effect/Effect";
+ * import * as Carousel from "@typed/ui/Carousel";
+ *
+ * const program = Effect.scoped(
+ *   Effect.gen(function* () {
+ *     const collection = yield* Carousel.makeCollection();
+ *     return yield* collection;
+ *   }),
+ * );
+ * ```
+ * @since 1.0.0
+ * @category Slide registration
+ */
+export declare const makeCollection: (initial?: Collection.State<string, Element>) => Effect.Effect<RefSubject.RefSubject<Collection.State<string, Element>, never, never>, never, Scope.Scope>;
+/**
+ * Sets activeId without changing paused state.
+ *
+ * @remarks
+ * The operation exposes Carousel's transition directly so callers can compose it in Effect
+ * programs and native event handlers.
+ *
+ * @since 1.0.0
+ * @category Slide navigation
+ */
+export declare function select<E, R>(state: RefSubject.RefSubject<State, E, R>, activeId: string): Effect.Effect<State, E, R>;
+/**
+ * Selects the previous or next enabled registered slide; movement wraps and leaves state unchanged
+ * for an empty collection.
+ *
+ * @remarks
+ * The operation exposes Carousel's transition directly so callers can compose it in Effect
+ * programs and native event handlers.
+ *
+ * @since 1.0.0
+ * @category Slide navigation
+ */
+export declare function move<E, R, E2, R2>(state: RefSubject.RefSubject<State, E, R>, collection: RefSubject.RefSubject<Collection.State<string>, E2, R2>, direction: "next" | "previous"): Effect.Effect<State, E | E2, R | R2>;
+/**
+ * Flips paused and preserves activeId.
+ *
+ * @remarks
+ * The operation exposes Carousel's transition directly so callers can compose it in Effect
+ * programs and native event handlers.
+ *
+ * @since 1.0.0
+ * @category Rotation policy
+ */
+export declare function toggleRotation<E, R>(state: RefSubject.RefSubject<State, E, R>): Effect.Effect<State, E, R>;
+/**
+ * Inputs accepted by Carousel.Root in addition to the shared DOM host options.
+ *
+ * @since 1.0.0
+ * @category Carousel region
+ */
+export interface RootOptions extends Dom.HostOptions<HTMLDivElement> {
+    /**
+     * Renderer-independent RefSubject state consumed by this component or operation.
+     * @since 1.0.0
+     * @category State connection
+     */
+    readonly state: RefSubject.HydratedRefSubject<State, Schema.SchemaError>;
+    /**
+     * Renderable child content for the component host.
+     * @since 1.0.0
+     * @category Rendered content
+     */
+    readonly content: Renderable.Any;
+    /**
+     * Accessible label rendered through aria-label.
+     * @since 1.0.0
+     * @category Accessible naming
+     */
+    readonly label: Renderable.Any<string | null | undefined>;
+}
+declare function rootInternalProps<const Options extends RootOptions>(options: Options): ({ property }: Dom.InternalPropsHelpers<Options>) => {
+    readonly role: "region";
+    readonly "aria-roledescription": "carousel";
+    readonly "aria-label": Exclude<Dom.Property<Options, "label">, Dom.Nullish> | undefined;
+    readonly onfocusin: Effect.Effect<State, Schema.SchemaError, never>;
+    readonly onmouseenter: Effect.Effect<State, Schema.SchemaError, never>;
+    readonly onmouseleave: Effect.Effect<void, Schema.SchemaError, never>;
+    readonly ref: RefSubject.HydratedRefSubject<State, Schema.SchemaError, never, never>;
+};
+type RootInternalProps<Options extends RootOptions> = ReturnType<ReturnType<typeof rootInternalProps<Options>>>;
+/**
+ * Renders the carousel region and pauses automatic rotation on focus or pointer entry without
+ * replacing its child nodes.
+ *
+ * @remarks
+ * The returned Fx installs DOM refs, native listeners, state subscriptions, and optional
+ * collection registrations only when rendered. The rendering Scope removes those resources;
+ * unrelated nodes and attributes remain caller-owned.
+ *
+ * @since 1.0.0
+ * @category Carousel region
+ */
+export declare function Root<const Options extends RootOptions, const Host extends HostResult = never>(options: Options, host?: Dom.HostOverride<Dom.RenderHostProps<Options, RootInternalProps<Options>>, Options["content"], Host>): Fx<RenderEvent, Renderable.Error<Options | Host>, Renderable.Services<Options | Host> | Scope.Scope | RenderTemplate>;
+/**
+ * Inputs accepted by Carousel.Slide in addition to the shared DOM host options.
+ *
+ * @since 1.0.0
+ * @category Slide content
+ */
+export interface SlideOptions extends Dom.HostOptions<HTMLDivElement> {
+    /**
+     * Renderer-independent RefSubject state consumed by this component or operation.
+     * @since 1.0.0
+     * @category State connection
+     */
+    readonly state: RefSubject.HydratedRefSubject<State, Schema.SchemaError>;
+    /**
+     * Item registry used for collection-driven keyboard behavior and mounted ordering.
+     * @since 1.0.0
+     * @category Item registration
+     */
+    readonly collection?: RefSubject.RefSubject<Collection.State<string>>;
+    /**
+     * Stable id used for collection identity and ARIA relationships.
+     * @since 1.0.0
+     * @category Identity and relationships
+     */
+    readonly id: string;
+    /**
+     * Accessible label rendered through aria-label.
+     * @since 1.0.0
+     * @category Accessible naming
+     */
+    readonly label: Renderable.Any<string | null | undefined>;
+    /**
+     * Renderable child content for the component host.
+     * @since 1.0.0
+     * @category Rendered content
+     */
+    readonly content: Renderable.Any;
+}
+declare function slideInternalProps<const Options extends SlideOptions>(options: Options): ({ property }: Dom.InternalPropsHelpers<Options>) => {
+    readonly id: string;
+    readonly role: "group";
+    readonly "aria-roledescription": "slide";
+    readonly "aria-label": Exclude<Dom.Property<Options, "label">, Dom.Nullish> | undefined;
+    readonly "?hidden": RefSubject.Computed<boolean, Schema.SchemaError, never>;
+    readonly ref: ((element: Element) => Effect.Effect<void, never, Scope.Scope>) | undefined;
+};
+type SlideInternalProps<Options extends SlideOptions> = ReturnType<ReturnType<typeof slideInternalProps<Options>>>;
+/**
+ * Renders one labelled slide, registers it when a collection is supplied, and toggles hidden from
+ * activeId.
+ *
+ * @remarks
+ * The returned Fx installs DOM refs, native listeners, state subscriptions, and optional
+ * collection registrations only when rendered. The rendering Scope removes those resources;
+ * unrelated nodes and attributes remain caller-owned.
+ *
+ * @since 1.0.0
+ * @category Slide content
+ */
+export declare function Slide<const Options extends SlideOptions, const Host extends HostResult = never>(options: Options, host?: Dom.HostOverride<Dom.RenderHostProps<Options, SlideInternalProps<Options>>, Options["content"], Host>): Fx<RenderEvent, Renderable.Error<Options | Host>, Renderable.Services<Options | Host> | Scope.Scope | RenderTemplate>;
+/**
+ * Inputs accepted by Carousel.Control in addition to the shared DOM host options.
+ *
+ * @since 1.0.0
+ * @category Slide controls
+ */
+export interface ControlOptions extends Dom.HostOptions<HTMLButtonElement> {
+    /**
+     * Renderer-independent RefSubject state consumed by this component or operation.
+     * @since 1.0.0
+     * @category State connection
+     */
+    readonly state: RefSubject.HydratedRefSubject<State, Schema.SchemaError>;
+    /**
+     * Item registry used for collection-driven keyboard behavior and mounted ordering.
+     * @since 1.0.0
+     * @category Item registration
+     */
+    readonly collection?: RefSubject.RefSubject<Collection.State<string>>;
+    /**
+     * Renderable child content for the component host.
+     * @since 1.0.0
+     * @category Rendered content
+     */
+    readonly content: Renderable.Any;
+}
+declare function controlInternalProps<const Options extends ControlOptions>(options: Options, action: Effect.Effect<unknown, Schema.SchemaError>): () => {
+    readonly type: "button";
+    readonly onclick: Effect.Effect<unknown, Schema.SchemaError, never>;
+};
+/**
+ * Renders a button whose native click selects the previous registered slide with wrapping enabled.
+ *
+ * @remarks
+ * The returned Fx installs DOM refs, native listeners, state subscriptions, and optional
+ * collection registrations only when rendered. The rendering Scope removes those resources;
+ * unrelated nodes and attributes remain caller-owned.
+ *
+ * @since 1.0.0
+ * @category Slide controls
+ */
+export declare function Previous<const Options extends ControlOptions, const Host extends HostResult = never>(options: Options, host?: Dom.HostOverride<Dom.RenderHostProps<Options, ReturnType<ReturnType<typeof controlInternalProps<Options>>>>, Options["content"], Host>): import("./Dom/Types.js").HostComponent<Host | Options>;
+/**
+ * Renders a button whose native click selects the next registered slide with wrapping enabled.
+ *
+ * @remarks
+ * The returned Fx installs DOM refs, native listeners, state subscriptions, and optional
+ * collection registrations only when rendered. The rendering Scope removes those resources;
+ * unrelated nodes and attributes remain caller-owned.
+ *
+ * @since 1.0.0
+ * @category Slide controls
+ */
+export declare function Next<const Options extends ControlOptions, const Host extends HostResult = never>(options: Options, host?: Dom.HostOverride<Dom.RenderHostProps<Options, ReturnType<ReturnType<typeof controlInternalProps<Options>>>>, Options["content"], Host>): import("./Dom/Types.js").HostComponent<Host | Options>;
+/**
+ * Renders a button whose native click toggles the explicit paused state.
+ *
+ * @remarks
+ * The returned Fx installs DOM refs, native listeners, state subscriptions, and optional
+ * collection registrations only when rendered. The rendering Scope removes those resources;
+ * unrelated nodes and attributes remain caller-owned.
+ *
+ * @since 1.0.0
+ * @category Rotation policy
+ */
+export declare function RotationControl<const Options extends Omit<ControlOptions, "collection">, const Host extends HostResult = never>(options: Options, host?: Dom.HostOverride<Dom.RenderHostProps<Options, ReturnType<ReturnType<typeof controlInternalProps<Options>>>>, Options["content"], Host>): import("./Dom/Types.js").HostComponent<Host | Options>;
+export {};
+//# sourceMappingURL=Carousel.d.ts.map

package/dist/Carousel.d.ts.map

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

package/dist/Carousel.js

@@ -0,0 +1,264 @@
+/**
+ * Carousel state keeps the active slide and rotation pause policy outside the renderer. Root
+ * pauses rotation on focus and pointer entry; slides retain DOM identity while hidden; controls
+ * use native button clicks.
+ *
+ * @remarks
+ * The module keeps policy, state transitions, and DOM rendering separable so applications can use
+ * the state and pure operations without mounting UI, or supply custom hosts without replacing native
+ * events and browser-owned focus.
+ *
+ * Learn the interaction in the [Carousel guide](/explore/ui-carousel).
+ *
+ * @since 1.0.0
+ * @category modules
+ * @packageDocumentation
+ */
+import * as Effect from "effect/Effect";
+import * as Schema from "effect/Schema";
+import { RefSubject } from "@typed/fx";
+import { html } from "@typed/template";
+import * as Collection from "./Collection.js";
+import * as Composite from "./Composite.js";
+import * as Dom from "./Dom.js";
+/**
+ * Effect Schema used by makeState to encode, decode, and hydrate Carousel state.
+ *
+ * @remarks
+ * @example
+ * ```ts
+ * import * as Schema from "effect/Schema";
+ * import * as Carousel from "@typed/ui/Carousel";
+ *
+ * const decodeState = Schema.decodeUnknownEffect(Carousel.StateSchema);
+ * ```
+ * @since 1.0.0
+ * @category Slide and rotation state
+ */
+export const StateSchema = Schema.Struct({ activeId: Schema.String, paused: Schema.Boolean });
+/**
+ * Creates hydrated Carousel state. activeId is required and paused defaults to true.
+ *
+ * @remarks
+ * The returned Effect creates the RefSubject when run. That state is renderer-independent;
+ * collection registrations belong to the separate Scope that runs register or ref, not to state
+ * creation.
+ *
+ * @example
+ * ```ts
+ * import * as Effect from "effect/Effect";
+ * import * as Carousel from "@typed/ui/Carousel";
+ *
+ * const program = Effect.scoped(
+ *   Effect.gen(function* () {
+ *     const state = yield* Carousel.makeState({ activeId: "slide-1" });
+ *     const collection = yield* Carousel.makeCollection();
+ *     return { state: yield* state, collection: yield* collection };
+ *   }),
+ * );
+ * ```
+ * @since 1.0.0
+ * @category Slide and rotation state
+ */
+export function makeState(initial) {
+    return RefSubject.hydrate(StateSchema, {
+        activeId: initial.activeId,
+        paused: initial.paused ?? true,
+    });
+}
+/**
+ * Creates a scoped Collection for Carousel items.
+ *
+ * @remarks
+ * The returned Effect allocates the RefSubject in the caller's Scope. Each later registration is
+ * owned by the Scope that runs register, independently of this construction Effect.
+ *
+ * @example
+ * ```ts
+ * import * as Effect from "effect/Effect";
+ * import * as Carousel from "@typed/ui/Carousel";
+ *
+ * const program = Effect.scoped(
+ *   Effect.gen(function* () {
+ *     const collection = yield* Carousel.makeCollection();
+ *     return yield* collection;
+ *   }),
+ * );
+ * ```
+ * @since 1.0.0
+ * @category Slide registration
+ */
+export const makeCollection = Collection.makeState;
+/**
+ * Sets activeId without changing paused state.
+ *
+ * @remarks
+ * The operation exposes Carousel's transition directly so callers can compose it in Effect
+ * programs and native event handlers.
+ *
+ * @since 1.0.0
+ * @category Slide navigation
+ */
+export function select(state, activeId) {
+    return RefSubject.update(state, (current) => ({ ...current, activeId }));
+}
+/**
+ * Selects the previous or next enabled registered slide; movement wraps and leaves state unchanged
+ * for an empty collection.
+ *
+ * @remarks
+ * The operation exposes Carousel's transition directly so callers can compose it in Effect
+ * programs and native event handlers.
+ *
+ * @since 1.0.0
+ * @category Slide navigation
+ */
+export function move(state, collection, direction) {
+    return Effect.gen(function* () {
+        const next = Composite.moveActiveId(yield* collection, { activeId: (yield* state).activeId, loop: true }, direction);
+        return next === null ? yield* state : yield* select(state, next);
+    });
+}
+/**
+ * Flips paused and preserves activeId.
+ *
+ * @remarks
+ * The operation exposes Carousel's transition directly so callers can compose it in Effect
+ * programs and native event handlers.
+ *
+ * @since 1.0.0
+ * @category Rotation policy
+ */
+export function toggleRotation(state) {
+    return RefSubject.update(state, (current) => ({ ...current, paused: !current.paused }));
+}
+function rootInternalProps(options) {
+    const pause = RefSubject.update(options.state, (current) => current.paused ? current : { ...current, paused: true });
+    let resumeOnPointerLeave = false;
+    const pauseForFocus = Effect.andThen(Effect.sync(() => {
+        resumeOnPointerLeave = false;
+    }), pause);
+    const pauseForPointer = Effect.flatMap(options.state, (current) => {
+        resumeOnPointerLeave = !current.paused;
+        return pause;
+    });
+    const resumeAfterPointer = Effect.suspend(() => {
+        if (!resumeOnPointerLeave)
+            return Effect.void;
+        resumeOnPointerLeave = false;
+        return RefSubject.update(options.state, (current) => current.paused ? { ...current, paused: false } : current);
+    });
+    return ({ property }) => ({
+        role: "region",
+        "aria-roledescription": "carousel",
+        "aria-label": property("label", undefined),
+        onfocusin: pauseForFocus,
+        onmouseenter: pauseForPointer,
+        onmouseleave: resumeAfterPointer,
+        ref: options.state,
+    });
+}
+/**
+ * Renders the carousel region and pauses automatic rotation on focus or pointer entry without
+ * replacing its child nodes.
+ *
+ * @remarks
+ * The returned Fx installs DOM refs, native listeners, state subscriptions, and optional
+ * collection registrations only when rendered. The rendering Scope removes those resources;
+ * unrelated nodes and attributes remain caller-owned.
+ *
+ * @since 1.0.0
+ * @category Carousel region
+ */
+export function Root(options, host) {
+    return Dom.renderHost()(options, host, rootInternalProps(options), options.content, (props, content) => {
+        return html `<div ...${props}>${content}</div>`;
+    });
+}
+function slideInternalProps(options) {
+    const register = options.collection === undefined
+        ? undefined
+        : Collection.ref(options.collection, {
+            id: options.id,
+            value: options.id,
+            textValue: options.id,
+        });
+    return ({ property }) => ({
+        id: options.id,
+        role: "group",
+        "aria-roledescription": "slide",
+        "aria-label": property("label", undefined),
+        "?hidden": RefSubject.map(options.state, (state) => state.activeId !== options.id),
+        ref: register,
+    });
+}
+/**
+ * Renders one labelled slide, registers it when a collection is supplied, and toggles hidden from
+ * activeId.
+ *
+ * @remarks
+ * The returned Fx installs DOM refs, native listeners, state subscriptions, and optional
+ * collection registrations only when rendered. The rendering Scope removes those resources;
+ * unrelated nodes and attributes remain caller-owned.
+ *
+ * @since 1.0.0
+ * @category Slide content
+ */
+export function Slide(options, host) {
+    return Dom.renderHost()(options, host, slideInternalProps(options), options.content, (props, content) => {
+        return html `<div ...${props}>${content}</div>`;
+    });
+}
+function controlInternalProps(options, action) {
+    return () => ({ type: "button", onclick: action });
+}
+function control(options, host, action) {
+    const internal = controlInternalProps(options, action);
+    return Dom.renderHost()(options, host, internal, options.content, (props, content) => html `<button ...${props}>${content}</button>`);
+}
+/**
+ * Renders a button whose native click selects the previous registered slide with wrapping enabled.
+ *
+ * @remarks
+ * The returned Fx installs DOM refs, native listeners, state subscriptions, and optional
+ * collection registrations only when rendered. The rendering Scope removes those resources;
+ * unrelated nodes and attributes remain caller-owned.
+ *
+ * @since 1.0.0
+ * @category Slide controls
+ */
+export function Previous(options, host) {
+    return control(options, host, options.collection === undefined
+        ? Effect.void
+        : move(options.state, options.collection, "previous"));
+}
+/**
+ * Renders a button whose native click selects the next registered slide with wrapping enabled.
+ *
+ * @remarks
+ * The returned Fx installs DOM refs, native listeners, state subscriptions, and optional
+ * collection registrations only when rendered. The rendering Scope removes those resources;
+ * unrelated nodes and attributes remain caller-owned.
+ *
+ * @since 1.0.0
+ * @category Slide controls
+ */
+export function Next(options, host) {
+    return control(options, host, options.collection === undefined
+        ? Effect.void
+        : move(options.state, options.collection, "next"));
+}
+/**
+ * Renders a button whose native click toggles the explicit paused state.
+ *
+ * @remarks
+ * The returned Fx installs DOM refs, native listeners, state subscriptions, and optional
+ * collection registrations only when rendered. The rendering Scope removes those resources;
+ * unrelated nodes and attributes remain caller-owned.
+ *
+ * @since 1.0.0
+ * @category Rotation policy
+ */
+export function RotationControl(options, host) {
+    return control(options, host, toggleRotation(options.state));
+}