@lotics/ui 1.11.1 → 1.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "1.11.1",
+  "version": "1.12.0",
   "type": "module",
   "exports": {
     "./tokens": "./src/tokens.ts",

package/src/calendar/calendar_view.tsx

@@ -20,6 +20,9 @@ export interface CalendarViewProps<T = unknown> {
   labels?: Partial<CalendarLabels>;
   onEventPress?: (event: CalendarEvent<T>) => void;
   onDayPress?: (day: Date) => void;
+  /** When set, month-view event chips become draggable; dropping on another day
+   *  reschedules the event (duration preserved). Receives event + new start/end. */
+  onEventDrop?: (event: CalendarEvent<T>, newStart: Date, newEnd: Date | null) => void;
 }
 
 /**
@@ -28,7 +31,7 @@ export interface CalendarViewProps<T = unknown> {
  * primitive is drop-in; the consumer only supplies events + callbacks.
  */
 export function CalendarView<T = unknown>(props: CalendarViewProps<T>) {
-  const { events, defaultView = "month", defaultDate, weekStartsOn = 1, locale, onEventPress, onDayPress } = props;
+  const { events, defaultView = "month", defaultDate, weekStartsOn = 1, locale, onEventPress, onDayPress, onEventDrop } = props;
   const L = { ...DEFAULT_CALENDAR_LABELS, ...props.labels };
   const [view, setView] = useState<CalendarViewMode>(defaultView);
   const [date, setDate] = useState<Date>(defaultDate ?? new Date());
@@ -88,6 +91,7 @@ export function CalendarView<T = unknown>(props: CalendarViewProps<T>) {
             moreLabel={L.more}
             onEventPress={onEventPress}
             onDayPress={drillToDay}
+            onEventDrop={onEventDrop}
           />
         ) : (
           <TimeGridView

package/src/calendar/month_view.tsx

@@ -1,9 +1,10 @@
-import { useMemo } from "react";
+import { useMemo, useRef } from "react";
 import { View, Pressable, StyleSheet } from "react-native";
 import { Text } from "../text";
 import { colors } from "../colors";
+import { usePointerDrag } from "../use_pointer_drag";
 import { packEventLanes } from "./layout";
-import { daysInView, isSameMonth, isToday, weekdayShort } from "./dates";
+import { addDays, dayDiff, daysInView, isSameMonth, isToday, startOfDay, weekdayShort } from "./dates";
 import type { CalendarEvent, Weekday } from "./types";
 
 const LANE_H = 19;
@@ -19,15 +20,39 @@ export interface MonthViewProps<T = unknown> {
   moreLabel?: (count: number) => string;
   onEventPress?: (event: CalendarEvent<T>) => void;
   onDayPress?: (day: Date) => void;
+  /** When set, event chips become draggable; dropping on another day reschedules
+   *  the event, preserving its duration. Receives the event + new start/end. */
+  onEventDrop?: (event: CalendarEvent<T>, newStart: Date, newEnd: Date | null) => void;
 }
 
 export function MonthView<T = unknown>(props: MonthViewProps<T>) {
-  const { date, events, weekStartsOn = 1, locale, moreLabel = (n) => `+${n} more`, onEventPress, onDayPress } = props;
+  const { date, events, weekStartsOn = 1, locale, moreLabel = (n) => `+${n} more`, onEventPress, onDayPress, onEventDrop } = props;
   const days = useMemo(() => daysInView("month", date, weekStartsOn), [date, weekStartsOn]);
   const weeks = useMemo(() => Array.from({ length: 6 }, (_, w) => days.slice(w * 7, w * 7 + 7)), [days]);
   const weekdayLabels = useMemo(() => days.slice(0, 7).map((d) => weekdayShort(d, locale)), [days, locale]);
   const now = new Date();
 
+  // Drag-to-reschedule: each week row registers its DOM rect; on drop we map the
+  // pointer to a (week, column) → day, then shift the event by whole days.
+  const eventById = useMemo(() => new Map(events.map((e) => [e.id, e])), [events]);
+  const weekNodes = useRef<Map<number, HTMLElement>>(new Map());
+  const { live, bind } = usePointerDrag((id, pointer) => {
+    const ev = eventById.get(id);
+    if (!ev || !onEventDrop) return;
+    for (const [w, el] of weekNodes.current) {
+      const r = el.getBoundingClientRect();
+      if (r.width > 0 && pointer.y >= r.top && pointer.y <= r.bottom) {
+        const col = Math.min(6, Math.max(0, Math.floor((pointer.x - r.left) / (r.width / 7))));
+        const target = days[w * 7 + col];
+        if (!target) return;
+        const shift = dayDiff(startOfDay(ev.start), target);
+        if (shift === 0) return;
+        onEventDrop(ev, addDays(ev.start, shift), ev.end ? addDays(ev.end, shift) : null);
+        return;
+      }
+    }
+  });
+
   return (
     <View style={styles.root}>
       <View style={styles.weekdayHeader}>
@@ -49,7 +74,15 @@ export function MonthView<T = unknown>(props: MonthViewProps<T>) {
         }
 
         return (
-          <View key={w} style={styles.weekRow}>
+          <View
+            key={w}
+            style={styles.weekRow}
+            ref={(node) => {
+              const el = node as unknown as HTMLElement | null;
+              if (el) weekNodes.current.set(w, el);
+              else weekNodes.current.delete(w);
+            }}
+          >
             {/* Date numbers */}
             <View style={styles.dateRow}>
               {weekDays.map((day) => {
@@ -89,9 +122,11 @@ export function MonthView<T = unknown>(props: MonthViewProps<T>) {
               {visible.map((bar) => {
                 const accent = bar.event.color || colors.teal[600];
                 const banner = bar.span > 1 || !!bar.event.allDay;
+                const drag = live && live.id === bar.event.id ? live : null;
                 return (
                   <Pressable
                     key={bar.event.id}
+                    ref={onEventDrop ? bind(bar.event.id, "grab") : undefined}
                     onPress={onEventPress ? () => onEventPress(bar.event) : undefined}
                     accessibilityRole={onEventPress ? "button" : undefined}
                     accessibilityLabel={bar.event.title}
@@ -102,6 +137,7 @@ export function MonthView<T = unknown>(props: MonthViewProps<T>) {
                       left: `${(bar.startCol / 7) * 100}%`,
                       width: `${(bar.span / 7) * 100}%`,
                       paddingHorizontal: 2,
+                      ...(drag ? { transform: [{ translateX: drag.dx }, { translateY: drag.dy }], zIndex: 20, opacity: 0.9 } : null),
                     }}
                   >
                     <View

package/src/css_modules.d.ts

@@ -2,3 +2,5 @@ declare module "*.module.css" {
   const classes: { [key: string]: string };
   export default classes;
 }
+
+declare module "*.css";

package/src/gantt/gantt_view.tsx

@@ -2,7 +2,8 @@ import { useEffect, useMemo, useRef, useState } from "react";
 import { View, ScrollView, Pressable, StyleSheet } from "react-native";
 import { Text } from "../text";
 import { colors } from "../colors";
-import { dayDiff } from "../calendar/dates";
+import { addDays, dayDiff } from "../calendar/dates";
+import { usePointerDrag } from "../use_pointer_drag";
 import { axisRange, barGeometry, buildTicks, pxPerDay } from "./scale";
 import { DEFAULT_GANTT_LABELS } from "./types";
 import type { GanttLabels, GanttScale, GanttTask } from "./types";
@@ -11,6 +12,8 @@ const LABEL_W = 188;
 const HEADER_H = 38;
 const ROW_H = 40;
 const BAR_H = 22;
+const HANDLE_W = 8;
+const MIN_BAR = 8;
 const SCALES: GanttScale[] = ["day", "week", "month"];
 
 export interface GanttViewProps<T = unknown> {
@@ -23,6 +26,9 @@ export interface GanttViewProps<T = unknown> {
   /** User-facing chrome strings; defaults to English. */
   labels?: Partial<GanttLabels>;
   onTaskPress?: (task: GanttTask<T>) => void;
+  /** When set, each bar gets a right-edge resize handle; dragging it adjusts the
+   *  task's end. Receives the task + the new inclusive end day (clamped ≥ start). */
+  onTaskResize?: (task: GanttTask<T>, newEnd: Date) => void;
 }
 
 /**
@@ -33,10 +39,20 @@ export interface GanttViewProps<T = unknown> {
  * — wrap in a ScrollView for very long task lists.
  */
 export function GanttView<T = unknown>(props: GanttViewProps<T>) {
-  const { tasks, defaultScale = "week", today = new Date(), locale, title, onTaskPress } = props;
+  const { tasks, defaultScale = "week", today = new Date(), locale, title, onTaskPress, onTaskResize } = props;
   const L = { ...DEFAULT_GANTT_LABELS, ...props.labels };
   const [scale, setScale] = useState<GanttScale>(defaultScale);
 
+  const taskById = useMemo(() => new Map(tasks.map((t) => [t.id, t])), [tasks]);
+  const { live, bind } = usePointerDrag((id, _pointer, delta) => {
+    const t = taskById.get(id);
+    if (!t || !onTaskResize) return;
+    const days = Math.round(delta.dx / pxPerDay(scale));
+    if (days === 0) return;
+    const newEnd = addDays(t.end ?? t.start, days);
+    onTaskResize(t, newEnd < t.start ? t.start : newEnd);
+  });
+
   const { start: axisStart, end: axisEnd } = useMemo(() => axisRange(tasks, today), [tasks, today]);
   const ticks = useMemo(() => buildTicks(axisStart, axisEnd, scale, locale), [axisStart, axisEnd, scale, locale]);
   const axisWidth = useMemo(() => (dayDiff(axisStart, axisEnd) + 1) * pxPerDay(scale), [axisStart, axisEnd, scale]);
@@ -100,7 +116,9 @@ export function GanttView<T = unknown>(props: GanttViewProps<T>) {
 
             {/* Task rows */}
             {tasks.map((t) => {
-              const bar = barGeometry(t, axisStart, scale);
+              const base = barGeometry(t, axisStart, scale);
+              const dragging = live && live.id === t.id ? live : null;
+              const width = dragging ? Math.max(MIN_BAR, base.width + dragging.dx) : base.width;
               const accent = t.color || colors.teal[600];
               return (
                 <View key={t.id} style={{ height: ROW_H, borderBottomWidth: 1, borderBottomColor: colors.zinc[100] }}>
@@ -113,12 +131,20 @@ export function GanttView<T = unknown>(props: GanttViewProps<T>) {
                     onPress={onTaskPress ? () => onTaskPress(t) : undefined}
                     accessibilityRole={onTaskPress ? "button" : undefined}
                     accessibilityLabel={t.label}
-                    style={{ position: "absolute", left: bar.left, width: bar.width, top: (ROW_H - BAR_H) / 2, height: BAR_H }}
+                    style={{ position: "absolute", left: base.left, width, top: (ROW_H - BAR_H) / 2, height: BAR_H }}
                   >
-                    <View style={{ flex: 1, borderRadius: 5, backgroundColor: accent, justifyContent: "center", paddingHorizontal: 8 }}>
+                    <View style={{ flex: 1, borderRadius: 5, backgroundColor: accent, justifyContent: "center", paddingHorizontal: 8, opacity: dragging ? 0.85 : 1 }}>
                       <Text size="xs" weight="medium" numberOfLines={1} style={{ color: colors.white }}>{t.label}</Text>
                     </View>
                   </Pressable>
+                  {onTaskResize ? (
+                    <View
+                      ref={bind(t.id, "ew-resize")}
+                      style={{ position: "absolute", left: base.left + width - HANDLE_W, width: HANDLE_W + 6, top: (ROW_H - BAR_H) / 2, height: BAR_H, alignItems: "center", justifyContent: "center", zIndex: 2 }}
+                    >
+                      <View style={{ width: 3, height: 11, borderRadius: 2, backgroundColor: "rgba(255,255,255,0.75)" }} />
+                    </View>
+                  ) : null}
                 </View>
               );
             })}

package/src/popover.tsx

@@ -3,6 +3,7 @@ import React, {
   useCallback,
   useContext,
   useEffect,
+  useLayoutEffect,
   useRef,
   useState,
 } from "react";
@@ -203,12 +204,29 @@ export function PopoverContent(props: PopoverContentProps) {
   const [triggerWidth, setTriggerWidth] = useState<number>(0);
   const [isBottomSheetShown, setIsBottomSheetShown] = useState(false);
   const returnFocusRef = useRef<HTMLElement | null>(null);
+  // Last known trigger geometry. The trigger can unmount while the popover is
+  // open — a hover-revealed menu button stops being rendered the moment our
+  // overlay covers its row and the hover ends — so positioning cannot rely on
+  // `triggerRef.current` still being live when it runs.
+  const triggerRectRef = useRef<DOMRect | null>(null);
 
   const handleClose = useCallback(() => {
     if (!open) return;
     onOpenChange(false);
   }, [onOpenChange, open]);
 
+  // Snapshot the trigger geometry synchronously the moment we open, while it is
+  // guaranteed to still be mounted. `calculatePosition` runs later in a rAF, by
+  // which point a hover-revealed trigger may already be gone (our overlay covers
+  // its row, hover ends, the button unmounts). Capturing here keeps the popover
+  // anchored to where the trigger was instead of stranding it off-screen.
+  useLayoutEffect(() => {
+    if (!open || small) return;
+    if (triggerRef.current) {
+      triggerRectRef.current = triggerRef.current.getBoundingClientRect();
+    }
+  }, [open, small, triggerRef]);
+
   // Focus management: when the popover opens, remember what had focus and move
   // focus into the popover (the content div is tab-able via `tabIndex=-1`).
   // When it closes, restore focus to the prior element so keyboard users don't
@@ -280,10 +298,17 @@ export function PopoverContent(props: PopoverContentProps) {
   }, [open, small, onOpenChange]);
 
   const calculatePosition = useCallback(() => {
-    if (!triggerRef.current || !popoverRef.current) return;
+    if (!popoverRef.current) return;
     if (small) return;
 
-    const triggerRect = triggerRef.current.getBoundingClientRect();
+    // Prefer the live trigger when it is still mounted (so the popover tracks
+    // scroll/layout); fall back to the rect captured at open time when the
+    // trigger has since unmounted, instead of stranding the popover off-screen.
+    const liveTriggerRect = triggerRef.current?.getBoundingClientRect();
+    if (liveTriggerRect) triggerRectRef.current = liveTriggerRect;
+    const triggerRect = triggerRectRef.current;
+    if (!triggerRect) return;
+
     const popoverRect = popoverRef.current.getBoundingClientRect();
     const viewportWidth = window.innerWidth;
     const viewportHeight = window.innerHeight;
@@ -403,6 +428,7 @@ export function PopoverContent(props: PopoverContentProps) {
     if (!open) {
       setPosition((previous) => (previous === null ? previous : null));
       setIsBottomSheetShown((previous) => (previous ? false : previous));
+      triggerRectRef.current = null;
       return;
     }
 

package/src/use_pointer_drag.ts

@@ -0,0 +1,99 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Platform } from "react-native";
+
+const DRAG_THRESHOLD = 4; // px the pointer must travel before a press becomes a drag
+
+/** Live state of an in-progress drag — the pointer delta from where it started. */
+export interface DragLive {
+  id: string;
+  dx: number;
+  dy: number;
+}
+
+export interface PointerDragApi {
+  /** Non-null only while a drag is active (past the threshold). Consumers render
+   *  live feedback (translate / resize) from `dx`/`dy`. */
+  live: DragLive | null;
+  /** Ref for a draggable element — attaches a pointerdown listener tagged with
+   *  `id` and sets the web-only `cursor` + `touch-action: none` on the node (so
+   *  touch-drag doesn't scroll). Stable per id+cursor, so it doesn't thrash
+   *  listeners across renders. */
+  bind: (id: string, cursor?: string) => (node: unknown) => void;
+}
+
+/**
+ * Self-contained pointer-event drag for time-axis primitives (calendar event
+ * chips, gantt bar handles). Mirrors the kanban's proven approach — pointerdown
+ * on the element, a movement threshold to distinguish taps, then window-level
+ * pointermove/up — but with no floating clone and no column/card coupling. On
+ * release, `onDrop` receives the final client pointer position plus the total
+ * delta; the consumer maps that to a date. Web-only (RN has no pointer events);
+ * on native it's an inert no-op so taps/press handlers still work.
+ */
+export function usePointerDrag(
+  onDrop: (id: string, pointer: { x: number; y: number }, delta: { dx: number; dy: number }) => void,
+): PointerDragApi {
+  const [live, setLive] = useState<DragLive | null>(null);
+  const press = useRef<{ id: string; x: number; y: number; active: boolean } | null>(null);
+  const onDropRef = useRef(onDrop);
+  onDropRef.current = onDrop;
+
+  // Per-id DOM node + its pointerdown handler, so we can detach on unmount/rebind.
+  const bound = useRef<Map<string, { el: HTMLElement; handler: (e: PointerEvent) => void }>>(new Map());
+  const refCache = useRef<Map<string, (node: unknown) => void>>(new Map());
+
+  useEffect(() => {
+    if (Platform.OS !== "web") return;
+    const move = (e: PointerEvent) => {
+      const p = press.current;
+      if (!p) return;
+      const dx = e.clientX - p.x;
+      const dy = e.clientY - p.y;
+      if (!p.active && Math.hypot(dx, dy) < DRAG_THRESHOLD) return;
+      p.active = true;
+      e.preventDefault();
+      setLive({ id: p.id, dx, dy });
+    };
+    const up = (e: PointerEvent) => {
+      const p = press.current;
+      press.current = null;
+      setLive(null);
+      if (p?.active) {
+        onDropRef.current(p.id, { x: e.clientX, y: e.clientY }, { dx: e.clientX - p.x, dy: e.clientY - p.y });
+      }
+    };
+    window.addEventListener("pointermove", move);
+    window.addEventListener("pointerup", up);
+    return () => {
+      window.removeEventListener("pointermove", move);
+      window.removeEventListener("pointerup", up);
+    };
+  }, []);
+
+  const bind = useCallback((id: string, cursor = "grab") => {
+    const key = `${id}:${cursor}`;
+    const cached = refCache.current.get(key);
+    if (cached) return cached;
+    const cb = (node: unknown) => {
+      const el = node as HTMLElement | null;
+      const prev = bound.current.get(id);
+      if (prev && prev.el !== el) {
+        prev.el.removeEventListener("pointerdown", prev.handler);
+        bound.current.delete(id);
+      }
+      if (!el || Platform.OS !== "web") return;
+      if (bound.current.has(id)) return;
+      el.style.touchAction = "none";
+      el.style.cursor = cursor;
+      const handler = (e: PointerEvent) => {
+        press.current = { id, x: e.clientX, y: e.clientY, active: false };
+      };
+      el.addEventListener("pointerdown", handler);
+      bound.current.set(id, { el, handler });
+    };
+    refCache.current.set(key, cb);
+    return cb;
+  }, []);
+
+  return { live, bind };
+}