@typed/ui 1.0.0-beta.5 → 1.0.0-beta.7

package/dist/WindowSplitter.d.ts

@@ -1,172 +1,130 @@
 import * as Effect from "effect/Effect";
+import * as Scope from "effect/Scope";
 import * as Schema from "effect/Schema";
-import { RefSubject } from "@typed/fx";
+import { Fx, RefSubject } from "@typed/fx";
 import { EventHandler, type Renderable } from "@typed/template";
 import * as Dom from "./Dom.js";
+import type { ComposedRef } from "./Dom/Refs.js";
 import type { HostResult } from "./Dom/Types.js";
 /** Visual orientation of the separator between panes.
  * @remarks
- * ## Why
  * A vertical separator adjusts with Left/Right; a horizontal separator adjusts
  * with Up/Down, matching the axis perpendicular to the dividing line.
- * ## Ownership and lifetime
- * This pure type acquires no resources.
  * @since 1.0.0
- * @category models
+ * @category Resize axis
  */
 export type Orientation = "horizontal" | "vertical";
 /** Current value and keyboard policy for a window splitter.
  * @remarks
- * ## Why
  * All range and collapse information remains renderer-independent and directly
  * testable.
- * ## Ownership and lifetime
  * Plain state retains no resources; its hydrated RefSubject is Scope-owned.
  * @since 1.0.0
- * @category state
+ * @category Pane sizing state
  */
 export interface State {
     /** Current pane size value.
      * @remarks
-     * ## Why
      * It drives `aria-valuenow` and keyboard adjustments.
-     * ## Ownership and lifetime
-     * Plain numeric data acquires no resources.
      * @since 1.0.0
-     * @category state
+     * @category Current value
      */
     readonly value: number;
     /** Restore value used by `toggleCollapsed`.
      * @remarks
-     * ## Why
      * It starts at the initial clamped value. `toggleCollapsed` overwrites it only
      * when collapsing from a non-minimum value, then reads it when restoring.
      * Ordinary `setValue` and `adjust` calls do not update it.
-     * ## Ownership and lifetime
-     * Plain numeric data acquires no resources.
      * @since 1.0.0
-     * @category state
+     * @category Collapse and restore
      */
     readonly previousValue: number;
     /** Inclusive minimum pane value.
      * @remarks
-     * ## Why
      * Updates clamp to this bound and Home jumps to it.
-     * ## Ownership and lifetime
-     * Plain numeric data acquires no resources.
      * @since 1.0.0
-     * @category constraints
+     * @category Range constraints
      */
     readonly min: number;
     /** Inclusive maximum pane value.
      * @remarks
-     * ## Why
      * Updates clamp to this bound and End jumps to it.
-     * ## Ownership and lifetime
-     * Plain numeric data acquires no resources.
      * @since 1.0.0
-     * @category constraints
+     * @category Range constraints
      */
     readonly max: number;
     /** Keyboard adjustment increment.
      * @remarks
-     * ## Why
      * Arrow keys require a deterministic application-defined change size. The
      * state constructor does not enforce positivity; callers must provide a
      * positive value for conventional keyboard direction.
-     * ## Ownership and lifetime
-     * Plain numeric data acquires no resources.
      * @since 1.0.0
-     * @category constraints
+     * @category Keyboard adjustment
      */
     readonly step: number;
     /** Separator orientation and keyboard axis.
      * @remarks
-     * ## Why
      * The value drives both `aria-orientation` and valid arrow keys.
-     * ## Ownership and lifetime
-     * Plain data acquires no resources.
      * @since 1.0.0
-     * @category accessibility
+     * @category Keyboard navigation
      */
     readonly orientation: Orientation;
 }
 /** Initial splitter range and keyboard configuration.
  * @remarks
- * ## Why
  * Defaults give the widget a complete deterministic state before rendering.
  * Callers remain responsible for `min <= max` and `step > 0`.
- * ## Ownership and lifetime
- * Configuration is inert.
  * @since 1.0.0
- * @category state
+ * @category Pane sizing state
  */
 export interface InitialState {
     /** Initial pane size, clamped to min/max.
      * @remarks
-     * ## Why
      * Invalid out-of-range starts become a valid accessible value.
-     * ## Ownership and lifetime
-     * Plain data is copied into state.
      * @since 1.0.0
-     * @category state
+     * @category Current value
      */
     readonly value: number;
     /** Minimum value, defaulting to zero.
      * @remarks
-     * ## Why
      * It defines the collapsed boundary and Home result. Callers must ensure it is
      * less than or equal to `max`; neither the schema nor constructor compares them.
-     * ## Ownership and lifetime
-     * Plain data is copied into state.
      * @since 1.0.0
-     * @category constraints
+     * @category Range constraints
      */
     readonly min?: number;
     /** Maximum value, defaulting to one hundred.
      * @remarks
-     * ## Why
      * It defines the upper keyboard and ARIA bound. Callers must ensure it is
      * greater than or equal to `min`; neither the schema nor constructor compares them.
-     * ## Ownership and lifetime
-     * Plain data is copied into state.
      * @since 1.0.0
-     * @category constraints
+     * @category Range constraints
      */
     readonly max?: number;
     /** Arrow-key increment, defaulting to ten.
      * @remarks
-     * ## Why
      * The widget needs an explicit adjustment granularity. Callers must provide a
      * positive value; `Schema.Finite` rejects infinities and NaN but accepts zero
      * and negative numbers.
-     * ## Ownership and lifetime
-     * Plain data is copied into state.
      * @since 1.0.0
-     * @category constraints
+     * @category Keyboard adjustment
      */
     readonly step?: number;
     /** Separator orientation, defaulting to vertical.
      * @remarks
-     * ## Why
      * Orientation determines ARIA output and arrow-key mapping.
-     * ## Ownership and lifetime
-     * Plain data is copied into state.
      * @since 1.0.0
-     * @category accessibility
+     * @category Keyboard navigation
      */
     readonly orientation?: Orientation;
 }
 /** Schema for the structural splitter hydration state.
  * @remarks
- * ## Why
  * It validates finite numeric fields and the orientation union. It does not
  * enforce `min <= max`, a positive `step`, or any relationship among fields;
  * callers must satisfy those semantic preconditions.
- * ## Ownership and lifetime
- * The immutable schema acquires no resources.
  * @since 1.0.0
- * @category schemas
+ * @category Pane sizing state
  */
 export declare const StateSchema: Schema.Struct<{
     readonly value: Schema.Finite;
@@ -178,11 +136,9 @@ export declare const StateSchema: Schema.Struct<{
 }>;
 /** Creates hydrated splitter state and clamps the initial value.
  * @remarks
- * ## Why
  * Pane sizing behavior can be composed and tested without mounting a separator.
  * Callers must supply `min <= max` and `step > 0`; the constructor defaults
  * omitted bounds/step but does not validate those relationships.
- * ## Ownership and lifetime
  * The calling Effect Scope owns the returned RefSubject.
  * @example
  * ```ts
@@ -194,7 +150,7 @@ export declare const StateSchema: Schema.Struct<{
  * })
  * ```
  * @since 1.0.0
- * @category constructors
+ * @category Pane sizing state
  */
 export declare function makeState(initial: InitialState): Effect.Effect<RefSubject.HydratedRefSubject<{
     readonly value: number;
@@ -203,14 +159,12 @@ export declare function makeState(initial: InitialState): Effect.Effect<RefSubje
     readonly max: number;
     readonly step: number;
     readonly orientation: "horizontal" | "vertical";
-}, Schema.SchemaError, never, never>, never, import("effect/Scope").Scope>;
+}, Schema.SchemaError, never, never>, never, Scope.Scope>;
 /** Sets and clamps the current splitter value.
  * @remarks
- * ## Why
  * All callers share one transition bounded by the state's `min` and `max`.
  * Correct range ordering remains a caller precondition. This operation does not
  * change `previousValue`.
- * ## Ownership and lifetime
  * The Effect uses the existing RefSubject lifetime and acquires no resource.
  * @example
  * ```ts
@@ -223,16 +177,14 @@ export declare function makeState(initial: InitialState): Effect.Effect<RefSubje
  * })
  * ```
  * @since 1.0.0
- * @category state
+ * @category Bounded resizing
  */
 export declare function setValue<E, R>(state: RefSubject.RefSubject<State, E, R>, value: number): Effect.Effect<State, E, R>;
 /** Adds a delta and clamps the resulting splitter value.
  * @remarks
- * ## Why
  * Arrow-key behavior can be tested independently of DOM events. Correct range
  * ordering remains a caller precondition, and this operation does not change
  * `previousValue`.
- * ## Ownership and lifetime
  * The Effect uses the existing RefSubject lifetime and acquires no resource.
  * @example
  * ```ts
@@ -245,16 +197,14 @@ export declare function setValue<E, R>(state: RefSubject.RefSubject<State, E, R>
  * })
  * ```
  * @since 1.0.0
- * @category state
+ * @category Bounded resizing
  */
 export declare function adjust<E, R>(state: RefSubject.RefSubject<State, E, R>, delta: number): Effect.Effect<State, E, R>;
 /** Collapses to min or restores the recorded collapse value.
  * @remarks
- * ## Why
  * When the current value is not `min`, the operation records that exact value in
  * `previousValue` and collapses. At `min`, it restores the stored value after
  * clamping it to the current range. Other updates do not maintain a history.
- * ## Ownership and lifetime
  * The Effect updates existing state atomically and acquires no resource.
  * @example
  * ```ts
@@ -267,94 +217,104 @@ export declare function adjust<E, R>(state: RefSubject.RefSubject<State, E, R>,
  * })
  * ```
  * @since 1.0.0
- * @category state
+ * @category Collapse and restore
  */
 export declare function toggleCollapsed<E, R>(state: RefSubject.RefSubject<State, E, R>): Effect.Effect<State, E, R>;
 /** Options for the focusable ARIA window splitter.
  * @remarks
- * ## Why
  * The model connects renderer-independent sizing to its controlled pane and
  * accessible range metadata. Its state must already satisfy `min <= max` and a
  * positive `step`; the component does not repair invalid state.
- * ## Ownership and lifetime
  * Options are inert; rendering owns subscriptions/listeners by Scope.
  * @since 1.0.0
- * @category models
+ * @category Resize separator
  */
 export interface WindowSplitterOptions extends Dom.HostOptions<HTMLDivElement> {
     /** Hydrated sizing state.
      * @remarks
-     * ## Why
      * One source drives keyboard updates and every ARIA range attribute.
-     * ## Ownership and lifetime
      * The splitter borrows state; its original Scope owns it.
      * @since 1.0.0
-     * @category state
+     * @category State connection
      */
     readonly state: RefSubject.HydratedRefSubject<State, Schema.SchemaError>;
     /** Id of the pane controlled by the splitter.
      * @remarks
-     * ## Why
      * `aria-controls` makes the resizing relationship explicit.
-     * ## Ownership and lifetime
      * Dynamic values follow the component Scope.
      * @since 1.0.0
-     * @category relationships
+     * @category Identity and relationships
      */
     readonly primaryPaneId: Renderable.Any<string | null | undefined>;
     /** Accessible name when no external label is supplied.
      * @remarks
-     * ## Why
      * A focusable separator needs a discoverable purpose.
-     * ## Ownership and lifetime
      * Dynamic values follow the component Scope.
      * @since 1.0.0
-     * @category accessibility
+     * @category Accessible naming
      */
     readonly label?: Renderable.Any<string | null | undefined>;
     /** Human-readable value text supplementing the number.
      * @remarks
-     * ## Why
      * Pane sizes such as percentages or labels may be clearer than raw values.
-     * ## Ownership and lifetime
      * Dynamic values follow the component Scope.
      * @since 1.0.0
-     * @category accessibility
+     * @category Accessible value text
      */
     readonly valueText?: Renderable.Any<string | null | undefined>;
-    /** Whether keyboard adjustments are disabled.
+    /** State-value units represented by one CSS pixel of pointer movement.
+     * @remarks
+     * By default, the usable parent width (vertical separator) or height
+     * (horizontal separator), minus the separator thickness, represents 100
+     * units. This matches percentage pane sizes. Set `1` for CSS-pixel values.
+     * Positive axis-aligned CSS scaling is accounted for; pointer coordinates
+     * are converted from viewport pixels to the parent's CSS-pixel scale.
+     * Supply a positive finite number when using another unit system.
+     * Keyboard step and min/max remain independent of pointer resolution.
+     * @since 1.0.0
+     * @category Pointer resizing
+     */
+    readonly valuePerPixel?: number;
+    /** Whether keyboard and pointer adjustments are disabled.
      * @remarks
-     * ## Why
      * ARIA disabled state and handler behavior must agree.
-     * ## Ownership and lifetime
      * Dynamic values follow the component Scope.
      * @since 1.0.0
-     * @category accessibility
+     * @category Availability
      */
     readonly disabled?: Renderable.Any<boolean | null | undefined>;
 }
-declare function internalProps<const Options extends WindowSplitterOptions>(options: Options): ({ property }: Dom.InternalPropsHelpers<Options>) => {
+type WindowSplitterInternalProps<Options extends WindowSplitterOptions> = {
     readonly role: "separator";
+    readonly style: Fx.Fx<string | Partial<CSSStyleDeclaration>, Renderable.Error<Options>, Renderable.Services<Options>>;
     readonly tabindex: 0;
-    readonly "aria-orientation": RefSubject.Computed<Orientation, Schema.SchemaError, never>;
-    readonly "aria-valuenow": RefSubject.Computed<number, Schema.SchemaError, never>;
-    readonly "aria-valuemin": RefSubject.Computed<number, Schema.SchemaError, never>;
-    readonly "aria-valuemax": RefSubject.Computed<number, Schema.SchemaError, never>;
-    readonly "aria-controls": Exclude<Dom.Property<Options, "primaryPaneId">, Dom.Nullish> | undefined;
-    readonly "aria-label": Exclude<Dom.Property<Options, "label">, Dom.Nullish> | undefined;
-    readonly "aria-valuetext": Exclude<Dom.Property<Options, "valueText">, Dom.Nullish> | undefined;
-    readonly "aria-disabled": false | Exclude<Dom.Property<Options, "disabled">, Dom.Nullish>;
-    readonly onkeydown: EventHandler.EventHandler<KeyboardEvent, Schema.SchemaError, never>;
-    readonly ref: RefSubject.HydratedRefSubject<State, Schema.SchemaError, never, never>;
+    readonly "aria-orientation": RefSubject.Computed<Orientation, Schema.SchemaError>;
+    readonly "aria-valuenow": RefSubject.Computed<number, Schema.SchemaError>;
+    readonly "aria-valuemin": RefSubject.Computed<number, Schema.SchemaError>;
+    readonly "aria-valuemax": RefSubject.Computed<number, Schema.SchemaError>;
+    readonly "aria-controls": Dom.NonNullish<Dom.Property<Options, "primaryPaneId">> | undefined;
+    readonly "aria-label": Dom.NonNullish<Dom.Property<Options, "label">> | undefined;
+    readonly "aria-valuetext": Dom.NonNullish<Dom.Property<Options, "valueText">> | undefined;
+    readonly "aria-disabled": Dom.NonNullish<Dom.Property<Options, "disabled">> | false;
+    readonly onkeydown: EventHandler.EventHandler<KeyboardEvent, Schema.SchemaError>;
+    readonly onpointerdown: EventHandler.EventHandler<PointerEvent>;
+    readonly onpointermove: EventHandler.EventHandler<PointerEvent, Schema.SchemaError>;
+    readonly onpointerup: EventHandler.EventHandler<PointerEvent>;
+    readonly onpointercancel: EventHandler.EventHandler<PointerEvent>;
+    readonly onlostpointercapture: EventHandler.EventHandler<PointerEvent>;
+    readonly ref: ComposedRef<RefSubject.HydratedRefSubject<State, Schema.SchemaError>, (element: HTMLDivElement) => Effect.Effect<void, never, Scope.Scope>> | undefined;
 };
-type WindowSplitterInternalProps<Options extends WindowSplitterOptions> = ReturnType<ReturnType<typeof internalProps<Options>>>;
 /** Renders a focusable ARIA separator for resizing a pane.
  * @remarks
- * ## Why
  * The component exposes native DOM focus/events and the ARIA window-splitter
  * range contract: arrows adjust by step, Home/End reach bounds, and Enter
- * collapses/restores. Disabled state leaves key events inert.
- * ## Ownership and lifetime
+ * collapses/restores. Pointer dragging adjusts the same clamped state, using
+ * percentage-of-parent movement by default or the supplied `valuePerPixel`.
+ * Native pointer capture keeps movement attached outside the separator;
+ * release, cancellation, lost capture, and Scope teardown end the drag.
+ * The host composes caller styles with `touch-action: none` so touch gestures
+ * remain resize interactions. The caller binds state to actual pane layout. Disabled state
+ * leaves keyboard and pointer activation inert.
  * Running the returned Fx owns real key listeners, reactive ARIA attributes,
  * and the hydration ref in its Effect Scope. A custom host must preserve role,
  * tab index, range/relationship attributes, handler, and one hydration owner.
@@ -369,7 +329,7 @@ type WindowSplitterInternalProps<Options extends WindowSplitterOptions> = Return
  * })
  * ```
  * @since 1.0.0
- * @category components
+ * @category Resize separator
  */
 export declare function WindowSplitter<const Options extends WindowSplitterOptions, const Host extends HostResult = never>(options: Options, host?: Dom.HostOverride<Dom.RenderHostProps<Options, WindowSplitterInternalProps<Options>>, "", Host>): import("./Dom/Types.js").HostComponent<Host | Options>;
 export {};

package/dist/WindowSplitter.d.ts.map

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

package/dist/WindowSplitter.js

@@ -1,18 +1,16 @@
 import * as Effect from "effect/Effect";
+import * as Scope from "effect/Scope";
 import * as Schema from "effect/Schema";
-import { RefSubject } from "@typed/fx";
-import { EventHandler, html } from "@typed/template";
+import { Fx, RefSubject } from "@typed/fx";
+import { EventHandler, html, liftRenderableToFx } from "@typed/template";
 import * as Dom from "./Dom.js";
 /** Schema for the structural splitter hydration state.
  * @remarks
- * ## Why
  * It validates finite numeric fields and the orientation union. It does not
  * enforce `min <= max`, a positive `step`, or any relationship among fields;
  * callers must satisfy those semantic preconditions.
- * ## Ownership and lifetime
- * The immutable schema acquires no resources.
  * @since 1.0.0
- * @category schemas
+ * @category Pane sizing state
  */
 export const StateSchema = Schema.Struct({
     value: Schema.Finite,
@@ -24,11 +22,9 @@ export const StateSchema = Schema.Struct({
 });
 /** Creates hydrated splitter state and clamps the initial value.
  * @remarks
- * ## Why
  * Pane sizing behavior can be composed and tested without mounting a separator.
  * Callers must supply `min <= max` and `step > 0`; the constructor defaults
  * omitted bounds/step but does not validate those relationships.
- * ## Ownership and lifetime
  * The calling Effect Scope owns the returned RefSubject.
  * @example
  * ```ts
@@ -40,7 +36,7 @@ export const StateSchema = Schema.Struct({
  * })
  * ```
  * @since 1.0.0
- * @category constructors
+ * @category Pane sizing state
  */
 export function makeState(initial) {
     const min = initial.min ?? 0;
@@ -57,11 +53,9 @@ export function makeState(initial) {
 }
 /** Sets and clamps the current splitter value.
  * @remarks
- * ## Why
  * All callers share one transition bounded by the state's `min` and `max`.
  * Correct range ordering remains a caller precondition. This operation does not
  * change `previousValue`.
- * ## Ownership and lifetime
  * The Effect uses the existing RefSubject lifetime and acquires no resource.
  * @example
  * ```ts
@@ -74,7 +68,7 @@ export function makeState(initial) {
  * })
  * ```
  * @since 1.0.0
- * @category state
+ * @category Bounded resizing
  */
 export function setValue(state, value) {
     return RefSubject.update(state, (current) => ({
@@ -84,11 +78,9 @@ export function setValue(state, value) {
 }
 /** Adds a delta and clamps the resulting splitter value.
  * @remarks
- * ## Why
  * Arrow-key behavior can be tested independently of DOM events. Correct range
  * ordering remains a caller precondition, and this operation does not change
  * `previousValue`.
- * ## Ownership and lifetime
  * The Effect uses the existing RefSubject lifetime and acquires no resource.
  * @example
  * ```ts
@@ -101,7 +93,7 @@ export function setValue(state, value) {
  * })
  * ```
  * @since 1.0.0
- * @category state
+ * @category Bounded resizing
  */
 export function adjust(state, delta) {
     return RefSubject.update(state, (current) => ({
@@ -111,11 +103,9 @@ export function adjust(state, delta) {
 }
 /** Collapses to min or restores the recorded collapse value.
  * @remarks
- * ## Why
  * When the current value is not `min`, the operation records that exact value in
  * `previousValue` and collapses. At `min`, it restores the stored value after
  * clamping it to the current range. Other updates do not maintain a history.
- * ## Ownership and lifetime
  * The Effect updates existing state atomically and acquires no resource.
  * @example
  * ```ts
@@ -128,7 +118,7 @@ export function adjust(state, delta) {
  * })
  * ```
  * @since 1.0.0
- * @category state
+ * @category Collapse and restore
  */
 export function toggleCollapsed(state) {
     return RefSubject.update(state, (current) => current.value === current.min
@@ -136,6 +126,89 @@ export function toggleCollapsed(state) {
         : { ...current, previousValue: current.value, value: current.min });
 }
 function internalProps(options) {
+    const drags = new WeakMap();
+    const release = (element) => {
+        const drag = drags.get(element);
+        drags.delete(element);
+        if (drag !== undefined && element.hasPointerCapture(drag.pointerId)) {
+            element.releasePointerCapture(drag.pointerId);
+        }
+    };
+    const pointerRef = Effect.fn(function* (element) {
+        yield* Scope.addFinalizer(yield* Effect.scope, Effect.sync(() => {
+            release(element);
+        }));
+    });
+    const pointerStyle = liftRenderableToFx(options.props?.style).pipe(Fx.map((style) => {
+        if (typeof style === "string")
+            return `${style};touch-action:none;`;
+        if (typeof style?.cssText === "string")
+            return `${style.cssText};touch-action:none;`;
+        return { ...style, touchAction: "none" };
+    }));
+    const onpointerdown = EventHandler.make((event) => Effect.sync(() => {
+        const element = Dom.currentTarget(event);
+        if (event.button !== 0 || !event.isPrimary || element.getAttribute("aria-disabled") === "true")
+            return;
+        if (drags.has(element))
+            return;
+        // The visible ARIA snapshot starts the native gesture without yielding to
+        // state acquisition before preventDefault and pointer capture.
+        const valueAttribute = element.getAttribute("aria-valuenow");
+        const value = Number(valueAttribute);
+        const orientation = element.getAttribute("aria-orientation");
+        if (valueAttribute === null || !Number.isFinite(value))
+            return;
+        const parent = element.parentElement;
+        if (parent === null)
+            return;
+        const vertical = orientation === "vertical";
+        const parentRect = parent.getBoundingClientRect();
+        const separatorRect = element.getBoundingClientRect();
+        // Pointer coordinates and DOMRects use viewport pixels. Convert the
+        // parent's client extent to that same unit, excluding its border/scrollbar.
+        const axisScale = vertical
+            ? parentRect.width / parent.offsetWidth
+            : parentRect.height / parent.offsetHeight;
+        if (!Number.isFinite(axisScale) || axisScale <= 0)
+            return;
+        const extent = vertical
+            ? parent.clientWidth * axisScale - separatorRect.width
+            : parent.clientHeight * axisScale - separatorRect.height;
+        const scale = options.valuePerPixel === undefined
+            ? 100 / extent
+            : options.valuePerPixel / axisScale;
+        if (!Number.isFinite(scale) || scale <= 0)
+            return;
+        event.preventDefault();
+        element.focus();
+        element.setPointerCapture(event.pointerId);
+        drags.set(element, {
+            pointerId: event.pointerId,
+            coordinate: vertical ? event.clientX : event.clientY,
+            value,
+            orientation: vertical ? "vertical" : "horizontal",
+            scale,
+        });
+    }));
+    const onpointermove = EventHandler.make(Effect.fn(function* (event) {
+        const element = Dom.currentTarget(event);
+        const drag = drags.get(element);
+        if (drag === undefined || drag.pointerId !== event.pointerId)
+            return;
+        if (element.getAttribute("aria-disabled") === "true" || (event.buttons & 1) === 0) {
+            release(element);
+            return;
+        }
+        event.preventDefault();
+        const coordinate = drag.orientation === "vertical" ? event.clientX : event.clientY;
+        yield* setValue(options.state, drag.value + (coordinate - drag.coordinate) * drag.scale);
+    }));
+    const endDrag = EventHandler.make((event) => Effect.sync(() => {
+        const element = Dom.currentTarget(event);
+        if (drags.get(element)?.pointerId === event.pointerId)
+            release(element);
+    }));
     const onkeydown = EventHandler.make(Effect.fn(function* (event) {
         const current = yield* options.state;
         if (Dom.currentTarget(event).getAttribute("aria-disabled") === "true") {
@@ -162,6 +235,7 @@ function internalProps(options) {
     }));
     return ({ property }) => ({
         role: "separator",
+        style: pointerStyle,
         tabindex: 0,
         "aria-orientation": RefSubject.map(options.state, (state) => state.orientation),
         "aria-valuenow": RefSubject.map(options.state, (state) => state.value),
@@ -172,16 +246,25 @@ function internalProps(options) {
         "aria-valuetext": property("valueText", undefined),
         "aria-disabled": property("disabled", false),
         onkeydown,
-        ref: options.state,
+        onpointerdown,
+        onpointermove,
+        onpointerup: endDrag,
+        onpointercancel: endDrag,
+        onlostpointercapture: endDrag,
+        ref: Dom.composeRefs(options.state, pointerRef),
     });
 }
 /** Renders a focusable ARIA separator for resizing a pane.
  * @remarks
- * ## Why
  * The component exposes native DOM focus/events and the ARIA window-splitter
  * range contract: arrows adjust by step, Home/End reach bounds, and Enter
- * collapses/restores. Disabled state leaves key events inert.
- * ## Ownership and lifetime
+ * collapses/restores. Pointer dragging adjusts the same clamped state, using
+ * percentage-of-parent movement by default or the supplied `valuePerPixel`.
+ * Native pointer capture keeps movement attached outside the separator;
+ * release, cancellation, lost capture, and Scope teardown end the drag.
+ * The host composes caller styles with `touch-action: none` so touch gestures
+ * remain resize interactions. The caller binds state to actual pane layout. Disabled state
+ * leaves keyboard and pointer activation inert.
  * Running the returned Fx owns real key listeners, reactive ARIA attributes,
  * and the hydration ref in its Effect Scope. A custom host must preserve role,
  * tab index, range/relationship attributes, handler, and one hydration owner.
@@ -196,7 +279,7 @@ function internalProps(options) {
  * })
  * ```
  * @since 1.0.0
- * @category components
+ * @category Resize separator
  */
 export function WindowSplitter(options, host) {
     return Dom.renderHost()(options, host, internalProps(options), "", (props) => {