@foldkit/ui 0.112.0

package/dist/slider/index.d.ts

@@ -0,0 +1,318 @@
+import { Option, Schema as S } from 'effect';
+import type { Command } from 'foldkit/command';
+import { type ChildAttribute, type Html } from 'foldkit/html';
+import { type Reflect } from 'foldkit/submodel';
+import * as Subscription from 'foldkit/subscription';
+/** Schema for the slider component's state. Tracks the current value, the
+ *  range (min/max/step), and the active drag phase. */
+export declare const Model: S.Struct<{
+    readonly id: S.String;
+    readonly value: S.Number;
+    readonly min: S.Number;
+    readonly max: S.Number;
+    readonly step: S.Number;
+    readonly dragState: S.Union<readonly [import("foldkit/schema").CallableTaggedStruct<"Idle", {}>, import("foldkit/schema").CallableTaggedStruct<"Dragging", {
+        originValue: S.Number;
+    }>]>;
+}>;
+export type Model = typeof Model.Type;
+/** The user pressed the thumb. Starts a drag without changing the value. */
+export declare const PressedThumb: import("foldkit/schema").CallableTaggedStruct<"PressedThumb", {}>;
+/** The user pressed the track. Starts a drag and snaps the value to the
+ *  cursor position. Ignored while already dragging, which absorbs the bubble
+ *  from a thumb press so the value is not shifted. */
+export declare const PressedPointer: import("foldkit/schema").CallableTaggedStruct<"PressedPointer", {
+    value: S.Number;
+}>;
+/** The pointer moved during a drag, producing a new snapped value from the
+ *  cursor position within the track. */
+export declare const MovedDragPointer: import("foldkit/schema").CallableTaggedStruct<"MovedDragPointer", {
+    value: S.Number;
+}>;
+/** The pointer was released during a drag. Commits the current value. */
+export declare const ReleasedDragPointer: import("foldkit/schema").CallableTaggedStruct<"ReleasedDragPointer", {}>;
+/** Escape was pressed during a drag. Restores the value from the drag origin. */
+export declare const CancelledDrag: import("foldkit/schema").CallableTaggedStruct<"CancelledDrag", {}>;
+/** The user pressed a keyboard navigation key on the focused thumb. */
+export declare const PressedKeyboardNavigation: import("foldkit/schema").CallableTaggedStruct<"PressedKeyboardNavigation", {
+    direction: S.Literals<readonly ["StepDecrement", "StepIncrement", "PageDecrement", "PageIncrement", "Min", "Max"]>;
+}>;
+/** Union of all messages the slider component can produce. */
+export declare const Message: S.Union<[
+    typeof PressedThumb,
+    typeof PressedPointer,
+    typeof MovedDragPointer,
+    typeof ReleasedDragPointer,
+    typeof CancelledDrag,
+    typeof PressedKeyboardNavigation
+]>;
+export type Message = typeof Message.Type;
+export type PressedThumb = typeof PressedThumb.Type;
+export type PressedPointer = typeof PressedPointer.Type;
+export type MovedDragPointer = typeof MovedDragPointer.Type;
+export type ReleasedDragPointer = typeof ReleasedDragPointer.Type;
+export type CancelledDrag = typeof CancelledDrag.Type;
+export type PressedKeyboardNavigation = typeof PressedKeyboardNavigation.Type;
+/** Emitted when the slider value changes. The parent can handle this to
+ *  update its own state or dispatch its own Commands, for example to run
+ *  validation or trigger a downstream Command. */
+export declare const ChangedValue: import("foldkit/schema").CallableTaggedStruct<"ChangedValue", {
+    value: S.Number;
+}>;
+/** Union of all out-messages the slider component can emit to its parent. */
+export declare const OutMessage: S.Union<readonly [import("foldkit/schema").CallableTaggedStruct<"ChangedValue", {
+    value: S.Number;
+}>]>;
+export type OutMessage = typeof OutMessage.Type;
+/** Configuration for creating a slider model with `init`. */
+export type InitConfig = Readonly<{
+    id: string;
+    min: number;
+    max: number;
+    step: number;
+    initialValue: number;
+}>;
+/** Creates an initial slider model from a config. The initial value is
+ *  snapped to the step and clamped into range. */
+export declare const init: (config: InitConfig) => Model;
+/** Computes the fraction (0–1) of a value between min and max. Returns 0 when
+ *  the range has zero width. */
+export declare const fractionOfValue: (model: Model) => number;
+type UpdateReturn = readonly [
+    Model,
+    ReadonlyArray<Command<Message>>,
+    Option.Option<OutMessage>
+];
+/** Processes a slider message and returns the next model, commands, and an
+ *  optional out-message for the parent. */
+export declare const update: (model: Model, message: Message) => UpdateReturn;
+/** Reflects an externally-driven range onto the slider. Snaps and clamps the
+ *  current value into the new range. Use this when min/max derive from
+ *  external state (e.g. a bounded buffer whose first/last index shifts over
+ *  time). Unlike `reflectValue`, this runs even while the user is Dragging: a
+ *  structural range change cannot leave the value out of bounds. */
+export declare const reflectRange: Reflect<Model, Readonly<{
+    min: number;
+    max: number;
+}>>;
+/** Reflects an externally-driven value onto the slider, snapped and clamped
+ *  into range; a no-op while the user is dragging, since drag state owns the
+ *  value. Does not emit `ChangedValue`; use when the value is being driven by
+ *  external state rather than user input. */
+export declare const reflectValue: Reflect<Model, number>;
+/** Builds slider drag subscriptions, looking up the track
+ *  element through the supplied root resolver. Use this when the slider is
+ *  rendered inside a Shadow DOM. The root is read lazily so consumers can
+ *  resolve it at subscription time. */
+export declare const subscriptionsForRoot: (getTrackRoot: () => Document | ShadowRoot) => {
+    readonly dragPointer: Subscription.EntryWithoutKeepAlive<{
+        readonly id: string;
+        readonly value: number;
+        readonly min: number;
+        readonly max: number;
+        readonly step: number;
+        readonly dragState: {
+            readonly _tag: "Idle";
+        } | {
+            readonly _tag: "Dragging";
+            readonly originValue: number;
+        };
+    }, {
+        readonly _tag: "CancelledDrag";
+    } | {
+        readonly _tag: "PressedThumb";
+    } | {
+        readonly _tag: "PressedPointer";
+        readonly value: number;
+    } | {
+        readonly _tag: "MovedDragPointer";
+        readonly value: number;
+    } | {
+        readonly _tag: "ReleasedDragPointer";
+    } | {
+        readonly _tag: "PressedKeyboardNavigation";
+        readonly direction: "Max" | "Min" | "StepDecrement" | "StepIncrement" | "PageDecrement" | "PageIncrement";
+    }, {
+        readonly dragActivity: "Idle" | "Active";
+        readonly id: string;
+        readonly min: number;
+        readonly max: number;
+    }, never> & {
+        readonly __subscription: never;
+    };
+    readonly dragEscape: Subscription.EntryWithoutKeepAlive<{
+        readonly id: string;
+        readonly value: number;
+        readonly min: number;
+        readonly max: number;
+        readonly step: number;
+        readonly dragState: {
+            readonly _tag: "Idle";
+        } | {
+            readonly _tag: "Dragging";
+            readonly originValue: number;
+        };
+    }, {
+        readonly _tag: "CancelledDrag";
+    } | {
+        readonly _tag: "PressedThumb";
+    } | {
+        readonly _tag: "PressedPointer";
+        readonly value: number;
+    } | {
+        readonly _tag: "MovedDragPointer";
+        readonly value: number;
+    } | {
+        readonly _tag: "ReleasedDragPointer";
+    } | {
+        readonly _tag: "PressedKeyboardNavigation";
+        readonly direction: "Max" | "Min" | "StepDecrement" | "StepIncrement" | "PageDecrement" | "PageIncrement";
+    }, {
+        readonly dragActivity: "Idle" | "Active";
+    }, never> & {
+        readonly __subscription: never;
+    };
+};
+/** Default drag subscriptions, with the track looked up via `document`. */
+export declare const subscriptions: {
+    readonly dragPointer: Subscription.EntryWithoutKeepAlive<{
+        readonly id: string;
+        readonly value: number;
+        readonly min: number;
+        readonly max: number;
+        readonly step: number;
+        readonly dragState: {
+            readonly _tag: "Idle";
+        } | {
+            readonly _tag: "Dragging";
+            readonly originValue: number;
+        };
+    }, {
+        readonly _tag: "CancelledDrag";
+    } | {
+        readonly _tag: "PressedThumb";
+    } | {
+        readonly _tag: "PressedPointer";
+        readonly value: number;
+    } | {
+        readonly _tag: "MovedDragPointer";
+        readonly value: number;
+    } | {
+        readonly _tag: "ReleasedDragPointer";
+    } | {
+        readonly _tag: "PressedKeyboardNavigation";
+        readonly direction: "Max" | "Min" | "StepDecrement" | "StepIncrement" | "PageDecrement" | "PageIncrement";
+    }, {
+        readonly dragActivity: "Idle" | "Active";
+        readonly id: string;
+        readonly min: number;
+        readonly max: number;
+    }, never> & {
+        readonly __subscription: never;
+    };
+    readonly dragEscape: Subscription.EntryWithoutKeepAlive<{
+        readonly id: string;
+        readonly value: number;
+        readonly min: number;
+        readonly max: number;
+        readonly step: number;
+        readonly dragState: {
+            readonly _tag: "Idle";
+        } | {
+            readonly _tag: "Dragging";
+            readonly originValue: number;
+        };
+    }, {
+        readonly _tag: "CancelledDrag";
+    } | {
+        readonly _tag: "PressedThumb";
+    } | {
+        readonly _tag: "PressedPointer";
+        readonly value: number;
+    } | {
+        readonly _tag: "MovedDragPointer";
+        readonly value: number;
+    } | {
+        readonly _tag: "ReleasedDragPointer";
+    } | {
+        readonly _tag: "PressedKeyboardNavigation";
+        readonly direction: "Max" | "Min" | "StepDecrement" | "StepIncrement" | "PageDecrement" | "PageIncrement";
+    }, {
+        readonly dragActivity: "Idle" | "Active";
+    }, never> & {
+        readonly __subscription: never;
+    };
+};
+/** Attribute groups the slider component provides to the consumer's `toView`
+ *  callback. Each bundle carries the boundary's captured dispatch, so the
+ *  consumer can spread it directly into element attributes without manual
+ *  Message wrapping. */
+export type SliderAttributes = Readonly<{
+    root: ReadonlyArray<ChildAttribute>;
+    track: ReadonlyArray<ChildAttribute>;
+    filledTrack: ReadonlyArray<ChildAttribute>;
+    thumb: ReadonlyArray<ChildAttribute>;
+    label: ReadonlyArray<ChildAttribute>;
+    hiddenInput: ReadonlyArray<ChildAttribute>;
+}>;
+/** Per-render view inputs passed to `view` via `h.submodel`'s `viewInputs` field. */
+export type ViewInputs = Readonly<{
+    toView: (attributes: SliderAttributes) => Html;
+    ariaLabel?: string;
+    ariaLabelledBy?: string;
+    formatValue?: (value: number) => string;
+    isDisabled?: boolean;
+    name?: string;
+    /** Resolves the root that holds the slider track when looking it up by its
+     *  `data-slider-track-id` attribute. Defaults to `document`. Provide a
+     *  ShadowRoot when rendering the slider inside a shadow tree so pointer
+     *  events on the track can map clientX into a value. */
+    getTrackRoot?: () => Document | ShadowRoot;
+}>;
+/** Renders an accessible slider by building ARIA attribute groups and
+ *  delegating layout to the consumer's `toView` callback. Follows the
+ *  WAI-ARIA slider pattern: role="slider" on the thumb, aria-valuemin /
+ *  aria-valuemax / aria-valuenow, keyboard navigation by step / page / home /
+ *  end. Pointer drag is handled by the component's drag subscriptions. */
+export declare const view: import("foldkit/submodel").View<{
+    readonly id: string;
+    readonly value: number;
+    readonly min: number;
+    readonly max: number;
+    readonly step: number;
+    readonly dragState: {
+        readonly _tag: "Idle";
+    } | {
+        readonly _tag: "Dragging";
+        readonly originValue: number;
+    };
+}, {
+    readonly _tag: "CancelledDrag";
+} | {
+    readonly _tag: "PressedThumb";
+} | {
+    readonly _tag: "PressedPointer";
+    readonly value: number;
+} | {
+    readonly _tag: "MovedDragPointer";
+    readonly value: number;
+} | {
+    readonly _tag: "ReleasedDragPointer";
+} | {
+    readonly _tag: "PressedKeyboardNavigation";
+    readonly direction: "Max" | "Min" | "StepDecrement" | "StepIncrement" | "PageDecrement" | "PageIncrement";
+}, Readonly<{
+    toView: (attributes: SliderAttributes) => Html;
+    ariaLabel?: string;
+    ariaLabelledBy?: string;
+    formatValue?: (value: number) => string;
+    isDisabled?: boolean;
+    name?: string;
+    /** Resolves the root that holds the slider track when looking it up by its
+     *  `data-slider-track-id` attribute. Defaults to `document`. Provide a
+     *  ShadowRoot when rendering the slider inside a shadow tree so pointer
+     *  events on the track can map clientX into a value. */
+    getTrackRoot?: () => Document | ShadowRoot;
+}>>;
+export {};
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist/slider/index.js

@@ -0,0 +1,337 @@
+import { Effect, Equal, Function, Match as M, Option, Schema as S, Stream, String as String_, pipe, } from 'effect';
+import { childAttributes, html, } from 'foldkit/html';
+import { m } from 'foldkit/message';
+import { ts } from 'foldkit/schema';
+import { evo } from 'foldkit/struct';
+import { defineView } from 'foldkit/submodel';
+import * as Subscription from 'foldkit/subscription';
+// MODEL
+const Idle = ts('Idle');
+const Dragging = ts('Dragging', { originValue: S.Number });
+const DragState = S.Union([Idle, Dragging]);
+/** Schema for the slider component's state. Tracks the current value, the
+ *  range (min/max/step), and the active drag phase. */
+export const Model = S.Struct({
+    id: S.String,
+    value: S.Number,
+    min: S.Number,
+    max: S.Number,
+    step: S.Number,
+    dragState: DragState,
+});
+// MESSAGE
+/** The user pressed the thumb. Starts a drag without changing the value. */
+export const PressedThumb = m('PressedThumb');
+/** The user pressed the track. Starts a drag and snaps the value to the
+ *  cursor position. Ignored while already dragging, which absorbs the bubble
+ *  from a thumb press so the value is not shifted. */
+export const PressedPointer = m('PressedPointer', { value: S.Number });
+/** The pointer moved during a drag, producing a new snapped value from the
+ *  cursor position within the track. */
+export const MovedDragPointer = m('MovedDragPointer', { value: S.Number });
+/** The pointer was released during a drag. Commits the current value. */
+export const ReleasedDragPointer = m('ReleasedDragPointer');
+/** Escape was pressed during a drag. Restores the value from the drag origin. */
+export const CancelledDrag = m('CancelledDrag');
+/** The user pressed a keyboard navigation key on the focused thumb. */
+export const PressedKeyboardNavigation = m('PressedKeyboardNavigation', {
+    direction: S.Literals([
+        'StepDecrement',
+        'StepIncrement',
+        'PageDecrement',
+        'PageIncrement',
+        'Min',
+        'Max',
+    ]),
+});
+/** Union of all messages the slider component can produce. */
+export const Message = S.Union([
+    PressedThumb,
+    PressedPointer,
+    MovedDragPointer,
+    ReleasedDragPointer,
+    CancelledDrag,
+    PressedKeyboardNavigation,
+]);
+// OUT MESSAGE
+/** Emitted when the slider value changes. The parent can handle this to
+ *  update its own state or dispatch its own Commands, for example to run
+ *  validation or trigger a downstream Command. */
+export const ChangedValue = m('ChangedValue', { value: S.Number });
+/** Union of all out-messages the slider component can emit to its parent. */
+export const OutMessage = S.Union([ChangedValue]);
+/** Creates an initial slider model from a config. The initial value is
+ *  snapped to the step and clamped into range. */
+export const init = (config) => ({
+    id: config.id,
+    value: snapAndClamp(config.initialValue, config.min, config.max, config.step),
+    min: config.min,
+    max: config.max,
+    step: config.step,
+    dragState: Idle(),
+});
+// HELPERS
+const stepDecimals = (step) => {
+    const text = step.toString();
+    return pipe(text, String_.indexOf('.'), Option.match({
+        onNone: () => 0,
+        onSome: dotIndex => text.length - dotIndex - 1,
+    }));
+};
+const roundToStepPrecision = (value, step) => {
+    const decimals = stepDecimals(step);
+    return Number(value.toFixed(decimals));
+};
+const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
+const snapAndClamp = (value, min, max, step) => {
+    const snapped = min + Math.round((value - min) / step) * step;
+    return roundToStepPrecision(clamp(snapped, min, max), step);
+};
+/** Computes the fraction (0–1) of a value between min and max. Returns 0 when
+ *  the range has zero width. */
+export const fractionOfValue = (model) => {
+    const range = model.max - model.min;
+    if (range <= 0) {
+        return 0;
+    }
+    else {
+        return clamp((model.value - model.min) / range, 0, 1);
+    }
+};
+const PAGE_STEP_MULTIPLIER = 10;
+const nextValueForDirection = (model, direction) => M.value(direction).pipe(M.withReturnType(), M.when('StepIncrement', () => snapAndClamp(model.value + model.step, model.min, model.max, model.step)), M.when('StepDecrement', () => snapAndClamp(model.value - model.step, model.min, model.max, model.step)), M.when('PageIncrement', () => snapAndClamp(model.value + model.step * PAGE_STEP_MULTIPLIER, model.min, model.max, model.step)), M.when('PageDecrement', () => snapAndClamp(model.value - model.step * PAGE_STEP_MULTIPLIER, model.min, model.max, model.step)), M.when('Min', () => model.min), M.when('Max', () => model.max), M.exhaustive);
+const withUpdateReturn = M.withReturnType();
+const withValue = (model, nextValue, commands) => {
+    if (nextValue === model.value) {
+        return [model, commands, Option.none()];
+    }
+    else {
+        return [
+            evo(model, { value: () => nextValue }),
+            commands,
+            Option.some(ChangedValue({ value: nextValue })),
+        ];
+    }
+};
+/** Processes a slider message and returns the next model, commands, and an
+ *  optional out-message for the parent. */
+export const update = (model, message) => M.value(message).pipe(withUpdateReturn, M.tagsExhaustive({
+    PressedThumb: () => M.value(model.dragState).pipe(withUpdateReturn, M.tag('Dragging', () => [model, [], Option.none()]), M.orElse(() => [
+        evo(model, {
+            dragState: () => Dragging({ originValue: model.value }),
+        }),
+        [],
+        Option.none(),
+    ])),
+    // NOTE: the pointerdown event on the thumb bubbles to the track, so a
+    // thumb press also dispatches PressedPointer. Short-circuit when already
+    // Dragging so the bubbled track handler cannot shift the value away
+    // from the thumb's current position. Fine-grained sliders (e.g. step
+    // 0.05) see a visible jump without this guard, because the cursor sits
+    // off-center on a non-zero-width thumb.
+    PressedPointer: ({ value }) => M.value(model.dragState).pipe(withUpdateReturn, M.tag('Dragging', () => [model, [], Option.none()]), M.orElse(() => {
+        const snapped = snapAndClamp(value, model.min, model.max, model.step);
+        const [modelWithValue, commands, maybeOutMessage] = withValue(model, snapped, []);
+        return [
+            evo(modelWithValue, {
+                dragState: () => Dragging({ originValue: model.value }),
+            }),
+            commands,
+            maybeOutMessage,
+        ];
+    })),
+    MovedDragPointer: ({ value }) => M.value(model.dragState).pipe(withUpdateReturn, M.tag('Dragging', () => withValue(model, snapAndClamp(value, model.min, model.max, model.step), [])), M.orElse(() => [model, [], Option.none()])),
+    ReleasedDragPointer: () => M.value(model.dragState).pipe(withUpdateReturn, M.tag('Dragging', () => [
+        evo(model, { dragState: () => Idle() }),
+        [],
+        Option.none(),
+    ]), M.orElse(() => [model, [], Option.none()])),
+    CancelledDrag: () => M.value(model.dragState).pipe(withUpdateReturn, M.tag('Dragging', ({ originValue }) => {
+        const restored = evo(model, {
+            dragState: () => Idle(),
+        });
+        return withValue(restored, originValue, []);
+    }), M.orElse(() => [model, [], Option.none()])),
+    PressedKeyboardNavigation: ({ direction }) => withValue(model, nextValueForDirection(model, direction), []),
+}));
+/** Reflects an externally-driven range onto the slider. Snaps and clamps the
+ *  current value into the new range. Use this when min/max derive from
+ *  external state (e.g. a bounded buffer whose first/last index shifts over
+ *  time). Unlike `reflectValue`, this runs even while the user is Dragging: a
+ *  structural range change cannot leave the value out of bounds. */
+export const reflectRange = Function.dual(2, (model, range) => evo(model, {
+    min: () => range.min,
+    max: () => range.max,
+    value: current => snapAndClamp(current, range.min, range.max, model.step),
+}));
+/** Reflects an externally-driven value onto the slider, snapped and clamped
+ *  into range; a no-op while the user is dragging, since drag state owns the
+ *  value. Does not emit `ChangedValue`; use when the value is being driven by
+ *  external state rather than user input. */
+export const reflectValue = Function.dual(2, (model, value) => M.value(model.dragState).pipe(M.withReturnType(), M.tag('Dragging', () => model), M.orElse(() => evo(model, {
+    value: () => snapAndClamp(value, model.min, model.max, model.step),
+}))));
+// SUBSCRIPTION
+const DragActivity = S.Literals(['Idle', 'Active']);
+const dragActivityFromModel = (model) => M.value(model.dragState).pipe(M.withReturnType(), M.tag('Dragging', () => 'Active'), M.orElse(() => 'Idle'));
+const trackElement = (id, root) => Option.fromNullishOr(root.querySelector(`[data-slider-track-id="${id}"]`));
+const valueFromClientX = (clientX, trackElement_, min, max) => {
+    const rect = trackElement_.getBoundingClientRect();
+    if (rect.width === 0) {
+        return min;
+    }
+    else {
+        const fraction = clamp((clientX - rect.left) / rect.width, 0, 1);
+        return min + fraction * (max - min);
+    }
+};
+/** Builds slider drag subscriptions, looking up the track
+ *  element through the supplied root resolver. Use this when the slider is
+ *  rendered inside a Shadow DOM. The root is read lazily so consumers can
+ *  resolve it at subscription time. */
+export const subscriptionsForRoot = (getTrackRoot) => Subscription.make()(entry => ({
+    dragPointer: entry({
+        dragActivity: DragActivity,
+        id: S.String,
+        min: S.Number,
+        max: S.Number,
+    }, {
+        modelToDependencies: model => ({
+            dragActivity: dragActivityFromModel(model),
+            id: model.id,
+            min: model.min,
+            max: model.max,
+        }),
+        dependenciesToStream: ({ dragActivity, id, min, max }) => {
+            const pointerEvents = Stream.merge(Stream.fromEventListener(document, 'pointermove').pipe(Stream.mapEffect(event => Effect.sync(() => Option.map(trackElement(id, getTrackRoot()), element => MovedDragPointer({
+                value: valueFromClientX(event.clientX, element, min, max),
+            })))), Stream.filter(Option.isSome), Stream.map(option => option.value)), Stream.fromEventListener(document, 'pointerup').pipe(Stream.map(() => ReleasedDragPointer())));
+            // NOTE: prevents text selection and locks cursor to grabbing while the
+            // user drags the thumb. Matches the approach used in drag-and-drop.
+            const documentDragStyles = Stream.callback(() => Effect.acquireRelease(Effect.sync(() => {
+                document.documentElement.style.setProperty('user-select', 'none');
+                document.documentElement.style.setProperty('-webkit-user-select', 'none');
+                const cursorStyle = document.createElement('style');
+                cursorStyle.textContent = '* { cursor: grabbing !important; }';
+                document.head.appendChild(cursorStyle);
+                return cursorStyle;
+            }), cursorStyle => Effect.sync(() => {
+                document.documentElement.style.removeProperty('user-select');
+                document.documentElement.style.removeProperty('-webkit-user-select');
+                cursorStyle.remove();
+            })).pipe(Effect.flatMap(() => Effect.never)));
+            return Stream.when(Stream.merge(pointerEvents, documentDragStyles), Effect.sync(() => dragActivity === 'Active'));
+        },
+    }),
+    dragEscape: entry({ dragActivity: DragActivity }, {
+        modelToDependencies: model => ({
+            dragActivity: dragActivityFromModel(model),
+        }),
+        dependenciesToStream: ({ dragActivity }) => Stream.when(Stream.fromEventListener(document, 'keydown').pipe(Stream.filter(({ key }) => key === 'Escape'), Stream.map(() => CancelledDrag())), Effect.sync(() => dragActivity === 'Active')),
+    }),
+}));
+/** Default drag subscriptions, with the track looked up via `document`. */
+export const subscriptions = subscriptionsForRoot(() => document);
+// VIEW
+const LEFT_MOUSE_BUTTON = 0;
+const labelId = (id) => `${id}-label`;
+const keyToDirection = (key) => M.value(key).pipe(M.withReturnType(), M.whenOr('ArrowRight', 'ArrowUp', () => 'StepIncrement'), M.whenOr('ArrowLeft', 'ArrowDown', () => 'StepDecrement'), M.when('PageUp', () => 'PageIncrement'), M.when('PageDown', () => 'PageDecrement'), M.when('Home', () => 'Min'), M.when('End', () => 'Max'), M.option);
+const percentString = (fraction) => `${Math.round(fraction * 10000) / 100}%`;
+/** Renders an accessible slider by building ARIA attribute groups and
+ *  delegating layout to the consumer's `toView` callback. Follows the
+ *  WAI-ARIA slider pattern: role="slider" on the thumb, aria-valuemin /
+ *  aria-valuemax / aria-valuenow, keyboard navigation by step / page / home /
+ *  end. Pointer drag is handled by the component's drag subscriptions. */
+export const view = defineView((model, viewInputs) => {
+    const h = html();
+    const { formatValue, isDisabled = false, name, getTrackRoot = () => document, } = viewInputs;
+    const { id, value, min, max } = model;
+    const isDragging = model.dragState._tag === 'Dragging';
+    const fraction = fractionOfValue(model);
+    const handleKeyDown = (key) => Option.map(keyToDirection(key), direction => PressedKeyboardNavigation({ direction }));
+    const pointerAtClientX = (clientX) => Option.map(trackElement(id, getTrackRoot()), element => PressedPointer({
+        value: valueFromClientX(clientX, element, min, max),
+    }));
+    const trackPointerHandler = (_pointerType, button, _screenX, _screenY, _timeStamp, clientX) => pipe(button, Option.liftPredicate(Equal.equals(LEFT_MOUSE_BUTTON)), Option.flatMap(() => pointerAtClientX(clientX)));
+    const thumbPointerHandler = (_pointerType, button) => pipe(button, Option.liftPredicate(Equal.equals(LEFT_MOUSE_BUTTON)), Option.map(() => PressedThumb()));
+    const stateAttributes = [
+        ...(isDragging ? [h.DataAttribute('dragging', '')] : []),
+        ...(isDisabled ? [h.DataAttribute('disabled', '')] : []),
+    ];
+    const rootAttributes = [
+        h.DataAttribute('slider-id', id),
+        h.DataAttribute('orientation', 'horizontal'),
+        ...stateAttributes,
+    ];
+    const trackInteractionAttributes = isDisabled
+        ? []
+        : [h.OnPointerDown(trackPointerHandler)];
+    const trackAttributes = [
+        h.DataAttribute('slider-track-id', id),
+        h.Style({ position: 'relative', 'touch-action': 'none' }),
+        ...stateAttributes,
+        ...trackInteractionAttributes,
+    ];
+    const filledTrackAttributes = [
+        h.Style({
+            position: 'absolute',
+            left: '0',
+            top: '0',
+            bottom: '0',
+            width: percentString(fraction),
+            'pointer-events': 'none',
+        }),
+        ...stateAttributes,
+    ];
+    const resolveThumbLabel = () => {
+        if (viewInputs.ariaLabel !== undefined) {
+            return [h.AriaLabel(viewInputs.ariaLabel)];
+        }
+        else if (viewInputs.ariaLabelledBy !== undefined) {
+            return [h.AriaLabelledBy(viewInputs.ariaLabelledBy)];
+        }
+        else {
+            return [h.AriaLabelledBy(labelId(id))];
+        }
+    };
+    const thumbLabelAttributes = resolveThumbLabel();
+    const maybeAriaValuetext = formatValue !== undefined ? [h.AriaValuetext(formatValue(value))] : [];
+    const thumbInteractionAttributes = isDisabled
+        ? []
+        : [
+            h.OnPointerDown(thumbPointerHandler),
+            h.OnKeyDownPreventDefault(handleKeyDown),
+        ];
+    const thumbAttributes = [
+        h.Id(`${id}-thumb`),
+        h.Role('slider'),
+        h.Tabindex(0),
+        h.AriaOrientation('horizontal'),
+        h.AriaValuemin(min),
+        h.AriaValuemax(max),
+        h.AriaValuenow(value),
+        ...maybeAriaValuetext,
+        ...thumbLabelAttributes,
+        ...(isDisabled ? [h.AriaDisabled(true)] : []),
+        h.Style({
+            position: 'absolute',
+            left: percentString(fraction),
+            transform: 'translateX(-50%)',
+            'touch-action': 'none',
+        }),
+        ...stateAttributes,
+        ...thumbInteractionAttributes,
+    ];
+    const labelAttributes = [h.Id(labelId(id))];
+    const hiddenInputAttributes = name !== undefined
+        ? [h.Type('hidden'), h.Name(name), h.Value(value.toString())]
+        : [];
+    return viewInputs.toView({
+        root: childAttributes(rootAttributes),
+        track: childAttributes(trackAttributes),
+        filledTrack: childAttributes(filledTrackAttributes),
+        thumb: childAttributes(thumbAttributes),
+        label: childAttributes(labelAttributes),
+        hiddenInput: childAttributes(hiddenInputAttributes),
+    });
+});

package/dist/slider/public.d.ts

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

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

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

package/dist/slider/public.js

@@ -0,0 +1 @@
+export { init, update, reflectRange, reflectValue, view, subscriptions, subscriptionsForRoot, fractionOfValue, Model, Message, OutMessage, } from './index.js';