@vamos-ui/react 0.0.0-stage → 0.3.0

package/dist/sortable/use-pointer-drag.d.ts

@@ -0,0 +1,75 @@
+/**
+ * Pointer-driven dragging for time grids, bars and handles (Agenda, Resource calendar, Gantt,
+ * Hierarchy chart pan, cropper handles). Pointer Events + `setPointerCapture`, a movement
+ * threshold, axis lock, snapping, Esc to cancel and auto-scroll near the scroll container edges.
+ * It is not a sortable engine; lists use `Sortable`.
+ */
+import * as React from "react";
+export interface PointerDragPoint {
+    x: number;
+    y: number;
+}
+export interface PointerDragState {
+    /** Pointer position at press, in client coordinates. */
+    origin: PointerDragPoint;
+    /** Movement since press, including container auto-scroll, after axis lock and `snap`. */
+    delta: PointerDragPoint;
+    /** Movement before `snap`. */
+    rawDelta: PointerDragPoint;
+    pointerType: string;
+    /** Modifier keys at the last event (e.g. Alt to disable snapping). */
+    altKey: boolean;
+    shiftKey: boolean;
+    /** The element the drag started on. */
+    target: HTMLElement;
+}
+export interface UsePointerDragOptions {
+    /** Lock movement to one axis. Default `"both"`. */
+    axis?: "x" | "y" | "both";
+    /** Pixels before a press becomes a drag (clicks stay clicks). Default 3; touch 6. */
+    threshold?: number;
+    /** Map the raw delta to a snapped delta (e.g. to a 15-minute grid). */
+    snap?: (delta: PointerDragPoint, state: Omit<PointerDragState, "delta">) => PointerDragPoint;
+    /** Only the primary button / single touch starts a drag. Default true. */
+    primaryOnly?: boolean;
+    disabled?: boolean;
+    /** Scroll container to auto-scroll near its edges. */
+    scrollContainer?: React.RefObject<HTMLElement | null> | (() => HTMLElement | null);
+    /** Edge size in px that triggers auto-scroll. Default 32. */
+    autoScrollEdge?: number;
+    /** Max auto-scroll speed in px per frame. Default 14. */
+    autoScrollSpeed?: number;
+    onStart?(state: PointerDragState): void;
+    onMove?(state: PointerDragState): void;
+    onEnd?(state: PointerDragState): void;
+    /** Esc, `pointercancel` or `cancel()`. */
+    onCancel?(state: PointerDragState): void;
+    /** A press released before the threshold (a click). */
+    onTap?(event: PointerEvent): void;
+}
+export interface UsePointerDragResult {
+    /** Spread on the element that starts the drag. */
+    bind: {
+        onPointerDown: (e: React.PointerEvent<HTMLElement>) => void;
+        style: React.CSSProperties;
+    };
+    isDragging: boolean;
+    cancel(): void;
+}
+/**
+ * ```tsx
+ * const { bind, isDragging } = usePointerDrag({
+ *   axis: "y",
+ *   snap: (d) => ({ x: 0, y: Math.round(d.y / slotPx) * slotPx }),
+ *   onMove: (s) => setPreview(s.delta.y),
+ *   onEnd: (s) => commit(s.delta.y),
+ * });
+ * <div {...bind} />
+ * ```
+ */
+export declare function usePointerDrag(options?: UsePointerDragOptions): UsePointerDragResult;
+/** Snap helper: rounds a delta to a pixel grid per axis (`snapToGrid({ y: slotPx })`). */
+export declare function snapToGrid(grid: {
+    x?: number;
+    y?: number;
+}): (d: PointerDragPoint) => PointerDragPoint;

package/dist/sortable/use-pointer-drag.js

@@ -0,0 +1,173 @@
+"use client";
+/**
+ * Pointer-driven dragging for time grids, bars and handles (Agenda, Resource calendar, Gantt,
+ * Hierarchy chart pan, cropper handles). Pointer Events + `setPointerCapture`, a movement
+ * threshold, axis lock, snapping, Esc to cancel and auto-scroll near the scroll container edges.
+ * It is not a sortable engine; lists use `Sortable`.
+ */
+import * as React from "react";
+import { useLatest } from "../lib/use-controllable-state.js";
+const resolveContainer = (c) => (typeof c === "function" ? c() : (c?.current ?? null));
+/**
+ * ```tsx
+ * const { bind, isDragging } = usePointerDrag({
+ *   axis: "y",
+ *   snap: (d) => ({ x: 0, y: Math.round(d.y / slotPx) * slotPx }),
+ *   onMove: (s) => setPreview(s.delta.y),
+ *   onEnd: (s) => commit(s.delta.y),
+ * });
+ * <div {...bind} />
+ * ```
+ */
+export function usePointerDrag(options = {}) {
+    const opts = useLatest(options);
+    const session = React.useRef(null);
+    const [isDragging, setDragging] = React.useState(false);
+    const stateOf = React.useCallback((s) => {
+        const o = opts.current;
+        const container = resolveContainer(o.scrollContainer);
+        const scrollX = container ? container.scrollLeft - s.scrollStart.x : 0;
+        const scrollY = container ? container.scrollTop - s.scrollStart.y : 0;
+        let raw = { x: s.last.x - s.origin.x + scrollX, y: s.last.y - s.origin.y + scrollY };
+        if (o.axis === "x")
+            raw = { x: raw.x, y: 0 };
+        else if (o.axis === "y")
+            raw = { x: 0, y: raw.y };
+        const base = { origin: s.origin, rawDelta: raw, pointerType: s.pointerType, altKey: s.altKey, shiftKey: s.shiftKey, target: s.target };
+        return { ...base, delta: o.snap ? o.snap(raw, base) : raw };
+    }, [opts]);
+    const finish = React.useCallback((kind, event) => {
+        const s = session.current;
+        if (!s)
+            return;
+        session.current = null;
+        s.cleanup();
+        cancelAnimationFrame(s.raf);
+        try {
+            if (s.target.hasPointerCapture?.(s.pointerId))
+                s.target.releasePointerCapture(s.pointerId);
+        }
+        catch {
+            /* already released */
+        }
+        if (s.started) {
+            setDragging(false);
+            const st = stateOf(s);
+            if (kind === "cancel")
+                opts.current.onCancel?.(st);
+            else
+                opts.current.onEnd?.(st);
+        }
+        else if (kind !== "cancel" && event) {
+            opts.current.onTap?.(event);
+        }
+    }, [opts, stateOf]);
+    const cancel = React.useCallback(() => finish("cancel"), [finish]);
+    React.useEffect(() => () => finish("cancel"), [finish]);
+    const autoScroll = React.useCallback(() => {
+        const s = session.current;
+        if (!s || !s.started)
+            return;
+        const o = opts.current;
+        const container = resolveContainer(o.scrollContainer);
+        if (container) {
+            const r = container.getBoundingClientRect();
+            const edge = o.autoScrollEdge ?? 32;
+            const speed = o.autoScrollSpeed ?? 14;
+            const ramp = (dist) => (dist < edge ? Math.ceil(((edge - dist) / edge) * speed) : 0);
+            const dx = o.axis === "y" ? 0 : ramp(s.last.x - r.left) * -1 + ramp(r.right - s.last.x);
+            const dy = o.axis === "x" ? 0 : ramp(s.last.y - r.top) * -1 + ramp(r.bottom - s.last.y);
+            if (dx || dy) {
+                const bx = container.scrollLeft;
+                const by = container.scrollTop;
+                container.scrollLeft += dx;
+                container.scrollTop += dy;
+                if (container.scrollLeft !== bx || container.scrollTop !== by)
+                    o.onMove?.(stateOf(s));
+            }
+        }
+        s.raf = requestAnimationFrame(autoScroll);
+    }, [opts, stateOf]);
+    const onPointerDown = React.useCallback((e) => {
+        const o = opts.current;
+        if (o.disabled || session.current)
+            return;
+        if ((o.primaryOnly ?? true) && (e.button !== 0 || !e.isPrimary))
+            return;
+        const target = e.currentTarget;
+        const container = resolveContainer(o.scrollContainer);
+        const threshold = o.threshold ?? (e.pointerType === "touch" ? 6 : 3);
+        const s = {
+            pointerId: e.pointerId,
+            target,
+            origin: { x: e.clientX, y: e.clientY },
+            last: { x: e.clientX, y: e.clientY },
+            scrollStart: { x: container?.scrollLeft ?? 0, y: container?.scrollTop ?? 0 },
+            started: false,
+            pointerType: e.pointerType,
+            altKey: e.altKey,
+            shiftKey: e.shiftKey,
+            raf: 0,
+            cleanup: () => { },
+        };
+        const onMove = (ev) => {
+            if (ev.pointerId !== s.pointerId)
+                return;
+            s.last = { x: ev.clientX, y: ev.clientY };
+            s.altKey = ev.altKey;
+            s.shiftKey = ev.shiftKey;
+            if (!s.started) {
+                if (Math.hypot(s.last.x - s.origin.x, s.last.y - s.origin.y) < threshold)
+                    return;
+                s.started = true;
+                setDragging(true);
+                try {
+                    target.setPointerCapture(s.pointerId);
+                }
+                catch {
+                    /* jsdom / detached */
+                }
+                opts.current.onStart?.(stateOf(s));
+                s.raf = requestAnimationFrame(autoScroll);
+            }
+            ev.preventDefault();
+            opts.current.onMove?.(stateOf(s));
+        };
+        const onUp = (ev) => {
+            if (ev.pointerId !== s.pointerId)
+                return;
+            if (s.started)
+                s.last = { x: ev.clientX, y: ev.clientY };
+            finish("end", ev);
+        };
+        const onCancelEv = (ev) => ev.pointerId === s.pointerId && finish("cancel");
+        const onKey = (ev) => {
+            if (ev.key === "Escape" && s.started) {
+                ev.preventDefault();
+                ev.stopPropagation();
+                finish("cancel");
+            }
+        };
+        // Window listeners: work with and without pointer capture.
+        window.addEventListener("pointermove", onMove, { passive: false });
+        window.addEventListener("pointerup", onUp);
+        window.addEventListener("pointercancel", onCancelEv);
+        window.addEventListener("keydown", onKey, true);
+        s.cleanup = () => {
+            window.removeEventListener("pointermove", onMove);
+            window.removeEventListener("pointerup", onUp);
+            window.removeEventListener("pointercancel", onCancelEv);
+            window.removeEventListener("keydown", onKey, true);
+        };
+        session.current = s;
+    }, [opts, stateOf, finish, autoScroll]);
+    const bind = React.useMemo(() => ({ onPointerDown, style: { touchAction: options.axis === "x" ? "pan-y" : options.axis === "y" ? "pan-x" : "none" } }), [onPointerDown, options.axis]);
+    return { bind, isDragging, cancel };
+}
+/** Snap helper: rounds a delta to a pixel grid per axis (`snapToGrid({ y: slotPx })`). */
+export function snapToGrid(grid) {
+    return (d) => ({
+        x: grid.x ? Math.round(d.x / grid.x) * grid.x : d.x,
+        y: grid.y ? Math.round(d.y / grid.y) * grid.y : d.y,
+    });
+}

package/dist/sortable/use-time-scale.d.ts

@@ -0,0 +1,11 @@
+import { type TimeScale, type TimeScaleOptions } from "../scheduler/core/time-scale.js";
+/**
+ * Memoized `createTimeScale` for Agenda, Resource calendar and Gantt. Recomputed only when a
+ * primitive option changes (dates are compared by instant).
+ *
+ * ```tsx
+ * const scale = useTimeScale({ start: "2026-11-01", end: "2026-12-01", scale: "day", timeZone, locale });
+ * <div style={{ width: scale.width }}>{scale.ticks("day").map((t) => <div key={t.start} style={{ insetInlineStart: t.x, width: t.width }} />)}</div>
+ * ```
+ */
+export declare function useTimeScale(options: TimeScaleOptions): TimeScale;

package/dist/sortable/use-time-scale.js

@@ -0,0 +1,19 @@
+"use client";
+import * as React from "react";
+import { createTimeScale, toEpoch } from "../scheduler/core/time-scale.js";
+/**
+ * Memoized `createTimeScale` for Agenda, Resource calendar and Gantt. Recomputed only when a
+ * primitive option changes (dates are compared by instant).
+ *
+ * ```tsx
+ * const scale = useTimeScale({ start: "2026-11-01", end: "2026-12-01", scale: "day", timeZone, locale });
+ * <div style={{ width: scale.width }}>{scale.ticks("day").map((t) => <div key={t.start} style={{ insetInlineStart: t.x, width: t.width }} />)}</div>
+ * ```
+ */
+export function useTimeScale(options) {
+    const tz = options.timeZone ?? "UTC";
+    const start = toEpoch(options.start, tz);
+    const end = toEpoch(options.end, tz);
+    const { scale, pxPerDay, locale, workCalendar } = options;
+    return React.useMemo(() => createTimeScale({ start, end, scale, pxPerDay, timeZone: tz, locale, workCalendar }), [start, end, scale, pxPerDay, tz, locale, workCalendar]);
+}

package/dist/styles/base.css

@@ -0,0 +1,51 @@
+/* base — component CSS owned by the base (foundations) group. Tokens only. */
+
+/* Spinner: a rotating arc whose length breathes; reduced motion → slow pulse. */
+@keyframes ui-spinner-dash {
+  0% { stroke-dasharray: 1 150; stroke-dashoffset: 0; }
+  50% { stroke-dasharray: 42 150; stroke-dashoffset: -10; }
+  100% { stroke-dasharray: 42 150; stroke-dashoffset: -58; }
+}
+@keyframes ui-spinner-pulse {
+  50% { opacity: 0.35; }
+}
+@layer components {
+  .ui-spinner {
+    animation: ui-spin 1.1s linear infinite;
+    transform-origin: center;
+  }
+  .ui-spinner-arc {
+    animation: ui-spinner-dash 1.6s ease-in-out infinite;
+    stroke-dasharray: 26 150;
+  }
+  /* Delayed spinners stay invisible for --spinner-delay to avoid flashes on fast responses. */
+  .ui-spinner-delayed {
+    opacity: 0;
+    animation:
+      ui-spin 1.1s linear infinite,
+      ui-appear 160ms ease-out var(--spinner-delay, 400ms) forwards;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .ui-spinner,
+  .ui-spinner-arc {
+    animation: ui-spinner-pulse 1.8s ease-in-out infinite;
+  }
+  .ui-spinner-delayed {
+    animation:
+      ui-spinner-pulse 1.8s ease-in-out infinite,
+      ui-appear 1ms linear var(--spinner-delay, 400ms) forwards;
+  }
+}
+
+/* Kbd keycap: a hairline bottom edge reads as "key" without skeuomorphism. */
+@layer components {
+  .ui-keycap {
+    box-shadow: inset 0 -1px 0 var(--kbd-edge, var(--field-border));
+  }
+}
+
+/* Skeleton: under glass the token is lighter; keep shimmer subtle on translucent surfaces. */
+[data-material="glass"] .ui-shimmer::after {
+  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--surface-border) 60%, transparent), transparent);
+}