@llui/components 0.0.1

package/dist/components/slider.d.ts

@@ -0,0 +1,117 @@
+import type { Send } from '@llui/dom';
+/**
+ * Slider — numeric input controlled by drag or keyboard. Supports multiple
+ * thumbs (range slider) and horizontal/vertical orientations. The machine is
+ * pure; pointer drag handling (pointermove listeners during a drag) is done
+ * by the consumer via `startThumbDrag()` helper which returns a cleanup.
+ */
+export type Orientation = 'horizontal' | 'vertical';
+export interface SliderState {
+    /** One value per thumb. For a single-value slider, a one-element array. */
+    value: number[];
+    min: number;
+    max: number;
+    step: number;
+    disabled: boolean;
+    orientation: Orientation;
+    /** Minimum gap enforced between adjacent thumbs (range slider). */
+    minStepsBetweenThumbs: number;
+}
+export type SliderMsg = {
+    type: 'setValue';
+    value: number[];
+} | {
+    type: 'setThumb';
+    index: number;
+    value: number;
+} | {
+    type: 'increment';
+    index: number;
+    multiplier?: number;
+} | {
+    type: 'decrement';
+    index: number;
+    multiplier?: number;
+} | {
+    type: 'toMin';
+    index: number;
+} | {
+    type: 'toMax';
+    index: number;
+} | {
+    type: 'setDisabled';
+    disabled: boolean;
+};
+export interface SliderInit {
+    value?: number[];
+    min?: number;
+    max?: number;
+    step?: number;
+    disabled?: boolean;
+    orientation?: Orientation;
+    minStepsBetweenThumbs?: number;
+}
+export declare function init(opts?: SliderInit): SliderState;
+export declare function update(state: SliderState, msg: SliderMsg): [SliderState, never[]];
+export interface SliderThumbParts<S> {
+    thumb: {
+        role: 'slider';
+        'aria-valuemin': (s: S) => number;
+        'aria-valuemax': (s: S) => number;
+        'aria-valuenow': (s: S) => number;
+        'aria-orientation': (s: S) => Orientation;
+        'aria-disabled': (s: S) => 'true' | undefined;
+        'data-orientation': (s: S) => Orientation;
+        'data-disabled': (s: S) => '' | undefined;
+        'data-scope': 'slider';
+        'data-part': 'thumb';
+        'data-index': string;
+        tabIndex: (s: S) => number;
+        onKeyDown: (e: KeyboardEvent) => void;
+        style: (s: S) => string;
+    };
+}
+export interface SliderParts<S> {
+    root: {
+        'data-scope': 'slider';
+        'data-part': 'root';
+        'data-orientation': (s: S) => Orientation;
+        'data-disabled': (s: S) => '' | undefined;
+    };
+    control: {
+        'data-scope': 'slider';
+        'data-part': 'control';
+        'data-orientation': (s: S) => Orientation;
+        onPointerDown: (e: PointerEvent) => void;
+    };
+    track: {
+        'data-scope': 'slider';
+        'data-part': 'track';
+        'data-orientation': (s: S) => Orientation;
+    };
+    range: {
+        'data-scope': 'slider';
+        'data-part': 'range';
+        'data-orientation': (s: S) => Orientation;
+        style: (s: S) => string;
+    };
+    thumb: (index: number) => SliderThumbParts<S>;
+    /** Current raw values — accessor convenience. */
+    value: (s: S) => number[];
+}
+export declare function connect<S>(get: (s: S) => SliderState, send: Send<SliderMsg>): SliderParts<S>;
+/**
+ * Compute the slider value at a given pointer position within the control's
+ * bounding rect. Returns null if the pointer is outside the track.
+ */
+export declare function valueFromPoint(state: SliderState, rect: DOMRect, clientX: number, clientY: number): number;
+/** Determine which thumb index is closest to a given raw value. */
+export declare function closestThumbIndex(state: SliderState, raw: number): number;
+export declare const slider: {
+    init: typeof init;
+    update: typeof update;
+    connect: typeof connect;
+    valueFromPoint: typeof valueFromPoint;
+    closestThumbIndex: typeof closestThumbIndex;
+};
+//# sourceMappingURL=slider.d.ts.map

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

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

package/dist/components/slider.js

@@ -0,0 +1,210 @@
+export function init(opts = {}) {
+    return {
+        value: opts.value ?? [0],
+        min: opts.min ?? 0,
+        max: opts.max ?? 100,
+        step: opts.step ?? 1,
+        disabled: opts.disabled ?? false,
+        orientation: opts.orientation ?? 'horizontal',
+        minStepsBetweenThumbs: opts.minStepsBetweenThumbs ?? 0,
+    };
+}
+function clamp(n, min, max) {
+    if (n < min)
+        return min;
+    if (n > max)
+        return max;
+    return n;
+}
+function snapToStep(n, min, step) {
+    const steps = Math.round((n - min) / step);
+    const snapped = min + steps * step;
+    // Avoid floating-point drift — round to precision of step
+    const decimals = decimalPlaces(step);
+    return Number(snapped.toFixed(decimals));
+}
+function decimalPlaces(n) {
+    if (Math.floor(n) === n)
+        return 0;
+    const str = n.toString();
+    const dot = str.indexOf('.');
+    return dot === -1 ? 0 : str.length - dot - 1;
+}
+function setThumbValue(state, index, rawValue) {
+    const { min, max, step, minStepsBetweenThumbs } = state;
+    const snapped = snapToStep(clamp(rawValue, min, max), min, step);
+    const value = [...state.value];
+    // Enforce gap with neighbors
+    const gap = minStepsBetweenThumbs * step;
+    const lowerBound = index > 0 ? (value[index - 1] ?? min) + gap : min;
+    const upperBound = index < value.length - 1 ? (value[index + 1] ?? max) - gap : max;
+    value[index] = clamp(snapped, lowerBound, upperBound);
+    return value;
+}
+export function update(state, msg) {
+    if (state.disabled && msg.type !== 'setDisabled')
+        return [state, []];
+    switch (msg.type) {
+        case 'setValue':
+            return [{ ...state, value: msg.value }, []];
+        case 'setThumb':
+            return [{ ...state, value: setThumbValue(state, msg.index, msg.value) }, []];
+        case 'increment': {
+            const m = msg.multiplier ?? 1;
+            const current = state.value[msg.index] ?? state.min;
+            return [{ ...state, value: setThumbValue(state, msg.index, current + state.step * m) }, []];
+        }
+        case 'decrement': {
+            const m = msg.multiplier ?? 1;
+            const current = state.value[msg.index] ?? state.min;
+            return [{ ...state, value: setThumbValue(state, msg.index, current - state.step * m) }, []];
+        }
+        case 'toMin':
+            return [{ ...state, value: setThumbValue(state, msg.index, state.min) }, []];
+        case 'toMax':
+            return [{ ...state, value: setThumbValue(state, msg.index, state.max) }, []];
+        case 'setDisabled':
+            return [{ ...state, disabled: msg.disabled }, []];
+    }
+}
+function thumbPercent(state, index) {
+    const v = state.value[index] ?? state.min;
+    const range = state.max - state.min;
+    if (range === 0)
+        return 0;
+    return ((v - state.min) / range) * 100;
+}
+export function connect(get, send) {
+    return {
+        root: {
+            'data-scope': 'slider',
+            'data-part': 'root',
+            'data-orientation': (s) => get(s).orientation,
+            'data-disabled': (s) => (get(s).disabled ? '' : undefined),
+        },
+        control: {
+            'data-scope': 'slider',
+            'data-part': 'control',
+            'data-orientation': (s) => get(s).orientation,
+            // Consumers attach their own pointer drag logic via onMount, using
+            // `valueFromPoint` + `closestThumbIndex` helpers. The connect layer
+            // preventDefault's to suppress text selection while dragging.
+            onPointerDown: (e) => e.preventDefault(),
+        },
+        track: {
+            'data-scope': 'slider',
+            'data-part': 'track',
+            'data-orientation': (s) => get(s).orientation,
+        },
+        range: {
+            'data-scope': 'slider',
+            'data-part': 'range',
+            'data-orientation': (s) => get(s).orientation,
+            style: (s) => rangeStyle(get(s)),
+        },
+        thumb: (index) => ({
+            thumb: {
+                role: 'slider',
+                'aria-valuemin': (s) => get(s).min,
+                'aria-valuemax': (s) => get(s).max,
+                'aria-valuenow': (s) => get(s).value[index] ?? get(s).min,
+                'aria-orientation': (s) => get(s).orientation,
+                'aria-disabled': (s) => (get(s).disabled ? 'true' : undefined),
+                'data-orientation': (s) => get(s).orientation,
+                'data-disabled': (s) => (get(s).disabled ? '' : undefined),
+                'data-scope': 'slider',
+                'data-part': 'thumb',
+                'data-index': String(index),
+                tabIndex: (s) => (get(s).disabled ? -1 : 0),
+                style: (s) => thumbStyle(get(s), index),
+                onKeyDown: (e) => handleThumbKey(e, index, send),
+            },
+        }),
+        value: (s) => get(s).value,
+    };
+}
+function handleThumbKey(e, index, send) {
+    switch (e.key) {
+        case 'ArrowRight':
+        case 'ArrowUp':
+            e.preventDefault();
+            send({ type: 'increment', index });
+            return;
+        case 'ArrowLeft':
+        case 'ArrowDown':
+            e.preventDefault();
+            send({ type: 'decrement', index });
+            return;
+        case 'PageUp':
+            e.preventDefault();
+            send({ type: 'increment', index, multiplier: 10 });
+            return;
+        case 'PageDown':
+            e.preventDefault();
+            send({ type: 'decrement', index, multiplier: 10 });
+            return;
+        case 'Home':
+            e.preventDefault();
+            send({ type: 'toMin', index });
+            return;
+        case 'End':
+            e.preventDefault();
+            send({ type: 'toMax', index });
+            return;
+    }
+}
+function thumbStyle(state, index) {
+    const pct = thumbPercent(state, index);
+    if (state.orientation === 'horizontal') {
+        return `position:absolute;left:${pct}%;transform:translateX(-50%);`;
+    }
+    return `position:absolute;bottom:${pct}%;transform:translateY(50%);`;
+}
+function rangeStyle(state) {
+    if (state.value.length === 0)
+        return '';
+    const sorted = [...state.value].sort((a, b) => a - b);
+    const low = sorted[0];
+    const high = sorted[sorted.length - 1];
+    const range = state.max - state.min;
+    if (range === 0)
+        return '';
+    const startPct = ((low - state.min) / range) * 100;
+    const endPct = ((high - state.min) / range) * 100;
+    if (state.orientation === 'horizontal') {
+        return `position:absolute;left:${startPct}%;right:${100 - endPct}%;`;
+    }
+    return `position:absolute;bottom:${startPct}%;top:${100 - endPct}%;`;
+}
+/**
+ * Compute the slider value at a given pointer position within the control's
+ * bounding rect. Returns null if the pointer is outside the track.
+ */
+export function valueFromPoint(state, rect, clientX, clientY) {
+    const { min, max, step, orientation } = state;
+    let pct;
+    if (orientation === 'horizontal') {
+        pct = (clientX - rect.left) / rect.width;
+    }
+    else {
+        pct = 1 - (clientY - rect.top) / rect.height;
+    }
+    const raw = min + pct * (max - min);
+    return snapToStep(clamp(raw, min, max), min, step);
+}
+/** Determine which thumb index is closest to a given raw value. */
+export function closestThumbIndex(state, raw) {
+    if (state.value.length === 0)
+        return 0;
+    let best = 0;
+    let bestDist = Infinity;
+    for (let i = 0; i < state.value.length; i++) {
+        const d = Math.abs((state.value[i] ?? 0) - raw);
+        if (d < bestDist) {
+            bestDist = d;
+            best = i;
+        }
+    }
+    return best;
+}
+export const slider = { init, update, connect, valueFromPoint, closestThumbIndex };

package/dist/components/splitter.d.ts

@@ -0,0 +1,87 @@
+import type { Send } from '@llui/dom';
+/**
+ * Splitter — resizable panes with a draggable handle. The handle's position
+ * is expressed as a percentage of the container, stored as a number 0..100.
+ * Supports keyboard arrow resize with a configurable step.
+ */
+export type Orientation = 'horizontal' | 'vertical';
+export interface SplitterState {
+    position: number;
+    min: number;
+    max: number;
+    step: number;
+    orientation: Orientation;
+    disabled: boolean;
+    dragging: boolean;
+}
+export type SplitterMsg = {
+    type: 'setPosition';
+    position: number;
+} | {
+    type: 'increment';
+    multiplier?: number;
+} | {
+    type: 'decrement';
+    multiplier?: number;
+} | {
+    type: 'toMin';
+} | {
+    type: 'toMax';
+} | {
+    type: 'startDrag';
+} | {
+    type: 'endDrag';
+};
+export interface SplitterInit {
+    position?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    orientation?: Orientation;
+    disabled?: boolean;
+}
+export declare function init(opts?: SplitterInit): SplitterState;
+export declare function update(state: SplitterState, msg: SplitterMsg): [SplitterState, never[]];
+/** Compute position percentage from a pointer event within a container rect. */
+export declare function positionFromPoint(state: SplitterState, rect: DOMRect, clientX: number, clientY: number): number;
+export interface SplitterParts<S> {
+    root: {
+        'data-scope': 'splitter';
+        'data-part': 'root';
+        'data-orientation': (s: S) => Orientation;
+        'data-disabled': (s: S) => '' | undefined;
+        'data-dragging': (s: S) => '' | undefined;
+    };
+    primaryPanel: {
+        'data-scope': 'splitter';
+        'data-part': 'primary-panel';
+        style: (s: S) => string;
+    };
+    secondaryPanel: {
+        'data-scope': 'splitter';
+        'data-part': 'secondary-panel';
+        style: (s: S) => string;
+    };
+    resizeTrigger: {
+        role: 'separator';
+        'aria-orientation': (s: S) => Orientation;
+        'aria-valuemin': (s: S) => number;
+        'aria-valuemax': (s: S) => number;
+        'aria-valuenow': (s: S) => number;
+        'aria-disabled': (s: S) => 'true' | undefined;
+        'data-scope': 'splitter';
+        'data-part': 'resize-trigger';
+        'data-orientation': (s: S) => Orientation;
+        tabIndex: (s: S) => number;
+        onKeyDown: (e: KeyboardEvent) => void;
+        onPointerDown: (e: PointerEvent) => void;
+    };
+}
+export declare function connect<S>(get: (s: S) => SplitterState, send: Send<SplitterMsg>): SplitterParts<S>;
+export declare const splitter: {
+    init: typeof init;
+    update: typeof update;
+    connect: typeof connect;
+    positionFromPoint: typeof positionFromPoint;
+};
+//# sourceMappingURL=splitter.d.ts.map

package/dist/components/splitter.d.ts.map

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

package/dist/components/splitter.js

@@ -0,0 +1,119 @@
+export function init(opts = {}) {
+    return {
+        position: opts.position ?? 50,
+        min: opts.min ?? 0,
+        max: opts.max ?? 100,
+        step: opts.step ?? 1,
+        orientation: opts.orientation ?? 'horizontal',
+        disabled: opts.disabled ?? false,
+        dragging: false,
+    };
+}
+function clamp(n, min, max) {
+    return Math.max(min, Math.min(max, n));
+}
+export function update(state, msg) {
+    if (state.disabled && msg.type !== 'endDrag')
+        return [state, []];
+    switch (msg.type) {
+        case 'setPosition':
+            return [{ ...state, position: clamp(msg.position, state.min, state.max) }, []];
+        case 'increment': {
+            const delta = state.step * (msg.multiplier ?? 1);
+            return [{ ...state, position: clamp(state.position + delta, state.min, state.max) }, []];
+        }
+        case 'decrement': {
+            const delta = state.step * (msg.multiplier ?? 1);
+            return [{ ...state, position: clamp(state.position - delta, state.min, state.max) }, []];
+        }
+        case 'toMin':
+            return [{ ...state, position: state.min }, []];
+        case 'toMax':
+            return [{ ...state, position: state.max }, []];
+        case 'startDrag':
+            return [{ ...state, dragging: true }, []];
+        case 'endDrag':
+            return [{ ...state, dragging: false }, []];
+    }
+}
+/** Compute position percentage from a pointer event within a container rect. */
+export function positionFromPoint(state, rect, clientX, clientY) {
+    const pct = state.orientation === 'horizontal'
+        ? ((clientX - rect.left) / rect.width) * 100
+        : ((clientY - rect.top) / rect.height) * 100;
+    return clamp(pct, state.min, state.max);
+}
+export function connect(get, send) {
+    const sizeProp = (s, inverted) => {
+        const pos = get(s).position;
+        const axis = get(s).orientation === 'horizontal' ? 'width' : 'height';
+        const pct = inverted ? 100 - pos : pos;
+        return `${axis}:${pct}%;`;
+    };
+    return {
+        root: {
+            'data-scope': 'splitter',
+            'data-part': 'root',
+            'data-orientation': (s) => get(s).orientation,
+            'data-disabled': (s) => (get(s).disabled ? '' : undefined),
+            'data-dragging': (s) => (get(s).dragging ? '' : undefined),
+        },
+        primaryPanel: {
+            'data-scope': 'splitter',
+            'data-part': 'primary-panel',
+            style: (s) => sizeProp(s, false),
+        },
+        secondaryPanel: {
+            'data-scope': 'splitter',
+            'data-part': 'secondary-panel',
+            style: (s) => sizeProp(s, true),
+        },
+        resizeTrigger: {
+            role: 'separator',
+            'aria-orientation': (s) => get(s).orientation,
+            'aria-valuemin': (s) => get(s).min,
+            'aria-valuemax': (s) => get(s).max,
+            'aria-valuenow': (s) => get(s).position,
+            'aria-disabled': (s) => (get(s).disabled ? 'true' : undefined),
+            'data-scope': 'splitter',
+            'data-part': 'resize-trigger',
+            'data-orientation': (s) => get(s).orientation,
+            tabIndex: (s) => (get(s).disabled ? -1 : 0),
+            onKeyDown: (e) => {
+                switch (e.key) {
+                    case 'ArrowRight':
+                    case 'ArrowDown':
+                        e.preventDefault();
+                        send({ type: 'increment' });
+                        return;
+                    case 'ArrowLeft':
+                    case 'ArrowUp':
+                        e.preventDefault();
+                        send({ type: 'decrement' });
+                        return;
+                    case 'PageUp':
+                        e.preventDefault();
+                        send({ type: 'increment', multiplier: 10 });
+                        return;
+                    case 'PageDown':
+                        e.preventDefault();
+                        send({ type: 'decrement', multiplier: 10 });
+                        return;
+                    case 'Home':
+                        e.preventDefault();
+                        send({ type: 'toMin' });
+                        return;
+                    case 'End':
+                        e.preventDefault();
+                        send({ type: 'toMax' });
+                        return;
+                }
+            },
+            onPointerDown: (e) => {
+                e.preventDefault();
+                send({ type: 'startDrag' });
+            },
+        },
+    };
+}
+export const splitter = { init, update, connect, positionFromPoint };

package/dist/components/steps.d.ts

@@ -0,0 +1,104 @@
+import type { Send } from '@llui/dom';
+/**
+ * Steps — progress indicator for multi-step flows (wizards, checkouts).
+ * Tracks current step and completed steps; supports linear and non-linear
+ * navigation.
+ */
+export type StepStatus = 'pending' | 'current' | 'completed' | 'error';
+export interface StepsState {
+    current: number;
+    completed: number[];
+    errors: number[];
+    steps: string[];
+    /** If linear, users cannot skip steps. */
+    linear: boolean;
+    disabled: boolean;
+}
+export type StepsMsg = {
+    type: 'goTo';
+    step: number;
+} | {
+    type: 'next';
+} | {
+    type: 'prev';
+} | {
+    type: 'complete';
+    step: number;
+} | {
+    type: 'markError';
+    step: number;
+} | {
+    type: 'clearError';
+    step: number;
+} | {
+    type: 'reset';
+};
+export interface StepsInit {
+    current?: number;
+    completed?: number[];
+    steps?: string[];
+    linear?: boolean;
+    disabled?: boolean;
+}
+export declare function init(opts?: StepsInit): StepsState;
+export declare function update(state: StepsState, msg: StepsMsg): [StepsState, never[]];
+export declare function stepStatus(state: StepsState, step: number): StepStatus;
+export interface StepsItemParts<S> {
+    item: {
+        'data-scope': 'steps';
+        'data-part': 'item';
+        'data-status': (s: S) => StepStatus;
+        'data-index': string;
+        'aria-current': (s: S) => 'step' | undefined;
+    };
+    trigger: {
+        type: 'button';
+        'aria-label': string;
+        disabled: (s: S) => boolean;
+        'data-scope': 'steps';
+        'data-part': 'trigger';
+        'data-status': (s: S) => StepStatus;
+        onClick: (e: MouseEvent) => void;
+    };
+    separator: {
+        'data-scope': 'steps';
+        'data-part': 'separator';
+        'data-status': (s: S) => StepStatus;
+        'aria-hidden': 'true';
+    };
+}
+export interface StepsParts<S> {
+    root: {
+        role: 'group';
+        'aria-label': string;
+        'data-scope': 'steps';
+        'data-part': 'root';
+        'data-disabled': (s: S) => '' | undefined;
+    };
+    nextTrigger: {
+        type: 'button';
+        disabled: (s: S) => boolean;
+        'data-scope': 'steps';
+        'data-part': 'next-trigger';
+        onClick: (e: MouseEvent) => void;
+    };
+    prevTrigger: {
+        type: 'button';
+        disabled: (s: S) => boolean;
+        'data-scope': 'steps';
+        'data-part': 'prev-trigger';
+        onClick: (e: MouseEvent) => void;
+    };
+    item: (index: number) => StepsItemParts<S>;
+}
+export interface ConnectOptions {
+    label?: string;
+}
+export declare function connect<S>(get: (s: S) => StepsState, send: Send<StepsMsg>, opts?: ConnectOptions): StepsParts<S>;
+export declare const steps: {
+    init: typeof init;
+    update: typeof update;
+    connect: typeof connect;
+    stepStatus: typeof stepStatus;
+};
+//# sourceMappingURL=steps.d.ts.map

package/dist/components/steps.d.ts.map

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