@lotics/ui 1.10.0 → 1.11.0

package/src/calendar/time_grid_view.tsx

@@ -0,0 +1,261 @@
+import { useEffect, useMemo, useRef, useState } from "react";
+import { View, ScrollView, Pressable, StyleSheet, Text as RNText } from "react-native";
+import { Text } from "../text";
+import { colors } from "../colors";
+import { layoutDayColumns, packEventLanes } from "./layout";
+import {
+  daysInView,
+  formatTime,
+  hourLabel,
+  isSameDay,
+  isToday,
+  minutesSinceMidnight,
+  startOfDay,
+  weekdayShort,
+} from "./dates";
+import type { CalendarEvent, Weekday } from "./types";
+
+const HOUR_HEIGHT = 44;
+const PX_PER_MIN = HOUR_HEIGHT / 60;
+const GRID_HEIGHT = 24 * HOUR_HEIGHT;
+const GUTTER = 56;
+const ALLDAY_LANE_H = 24;
+const HOURS = Array.from({ length: 24 }, (_, i) => i);
+const COL_GAP = 2;
+
+export interface TimeGridViewProps<T = unknown> {
+  mode: "week" | "day";
+  date: Date;
+  events: CalendarEvent<T>[];
+  weekStartsOn?: Weekday;
+  locale?: string;
+  /** Hour to scroll to on mount. Default: an hour before now (clamped). */
+  scrollToHour?: number;
+  onEventPress?: (event: CalendarEvent<T>) => void;
+}
+
+function EventBlock<T>({
+  event,
+  top,
+  height,
+  leftPct,
+  widthPct,
+  onPress,
+  locale,
+}: {
+  event: CalendarEvent<T>;
+  top: number;
+  height: number;
+  leftPct: number;
+  widthPct: number;
+  onPress?: (e: CalendarEvent<T>) => void;
+  locale?: string;
+}) {
+  const accent = event.color || colors.teal[600];
+  const compact = height < 34;
+  return (
+    <Pressable
+      onPress={onPress ? () => onPress(event) : undefined}
+      accessibilityRole={onPress ? "button" : undefined}
+      accessibilityLabel={event.title}
+      style={{
+        position: "absolute",
+        top,
+        height: Math.max(height - 1, 14),
+        left: `${leftPct}%`,
+        width: `${widthPct}%`,
+        paddingHorizontal: COL_GAP,
+      }}
+    >
+      <View
+        style={{
+          flex: 1,
+          borderRadius: 6,
+          backgroundColor: accent + "1f",
+          borderLeftWidth: 3,
+          borderLeftColor: accent,
+          paddingHorizontal: 6,
+          paddingVertical: compact ? 1 : 3,
+          overflow: "hidden",
+        }}
+      >
+        <Text size="xs" weight="medium" numberOfLines={1} style={{ color: colors.zinc[800] }}>
+          {event.title}
+        </Text>
+        {!compact ? (
+          <Text size="xs" numberOfLines={1} style={{ color: colors.zinc[500] }}>
+            {formatTime(event.start, locale)}
+          </Text>
+        ) : null}
+      </View>
+    </Pressable>
+  );
+}
+
+export function TimeGridView<T = unknown>(props: TimeGridViewProps<T>) {
+  const { mode, date, events, weekStartsOn = 1, locale, onEventPress } = props;
+  const days = useMemo(
+    () => daysInView(mode, date, weekStartsOn),
+    [mode, date, weekStartsOn],
+  );
+
+  // Live now-indicator: tick each minute.
+  const [now, setNow] = useState(() => new Date());
+  useEffect(() => {
+    const id = setInterval(() => setNow(new Date()), 60_000);
+    return () => clearInterval(id);
+  }, []);
+
+  const scrollRef = useRef<ScrollView>(null);
+  useEffect(() => {
+    const hour = props.scrollToHour ?? Math.max(0, now.getHours() - 1);
+    const id = setTimeout(() => scrollRef.current?.scrollTo({ y: hour * HOUR_HEIGHT, animated: false }), 0);
+    return () => clearTimeout(id);
+    // Only on mount / mode change — not every minute.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [mode]);
+
+  const { timedByDay, allDay } = useMemo(() => {
+    const timed: CalendarEvent<T>[] = [];
+    const banner: CalendarEvent<T>[] = [];
+    for (const e of events) {
+      const multiDay = e.end ? !isSameDay(e.start, e.end) : false;
+      if (e.allDay || multiDay) banner.push(e);
+      else timed.push(e);
+    }
+    const byDay = days.map((day) =>
+      timed.filter((e) => {
+        const s = startOfDay(e.start);
+        return s.getTime() === day.getTime();
+      }),
+    );
+    return { timedByDay: byDay, allDay: banner };
+  }, [events, days]);
+
+  const allDayPacked = useMemo(() => packEventLanes(allDay, days[0], days.length), [allDay, days]);
+
+  return (
+    <View style={styles.root}>
+      {/* Header: day columns */}
+      <View style={styles.headerRow}>
+        <View style={{ width: GUTTER }} />
+        {days.map((day) => {
+          const today = isToday(day, now);
+          return (
+            <View key={day.toISOString()} style={styles.headerCell}>
+              <Text size="xs" style={{ color: today ? colors.teal[600] : colors.zinc[500] }}>
+                {weekdayShort(day, locale).toUpperCase()}
+              </Text>
+              <View style={[styles.dateBadge, today && { backgroundColor: colors.teal[600] }]}>
+                <Text size="sm" weight={today ? "semibold" : "medium"} style={{ color: today ? colors.white : colors.zinc[800] }}>
+                  {day.getDate()}
+                </Text>
+              </View>
+            </View>
+          );
+        })}
+      </View>
+
+      {/* All-day banner row */}
+      {allDayPacked.lanes > 0 ? (
+        <View style={[styles.allDayRow, { height: allDayPacked.lanes * (ALLDAY_LANE_H + 2) + 6 }]}>
+          <View style={{ width: GUTTER, justifyContent: "center" }}>
+            <Text size="xs" style={{ color: colors.zinc[400], textAlign: "right", paddingRight: 6 }}>
+              cả ngày
+            </Text>
+          </View>
+          <View style={{ flex: 1 }}>
+            {allDayPacked.bars.map((bar) => {
+              const accent = bar.event.color || colors.teal[600];
+              return (
+                <Pressable
+                  key={bar.event.id}
+                  onPress={onEventPress ? () => onEventPress(bar.event) : undefined}
+                  accessibilityRole={onEventPress ? "button" : undefined}
+                  accessibilityLabel={bar.event.title}
+                  style={{
+                    position: "absolute",
+                    top: bar.lane * (ALLDAY_LANE_H + 2) + 3,
+                    height: ALLDAY_LANE_H,
+                    left: `${(bar.startCol / days.length) * 100}%`,
+                    width: `${(bar.span / days.length) * 100}%`,
+                    paddingHorizontal: COL_GAP,
+                  }}
+                >
+                  <View style={{ flex: 1, borderRadius: 5, backgroundColor: accent, justifyContent: "center", paddingHorizontal: 8 }}>
+                    <Text size="xs" weight="medium" numberOfLines={1} style={{ color: colors.white }}>
+                      {bar.event.title}
+                    </Text>
+                  </View>
+                </Pressable>
+              );
+            })}
+          </View>
+        </View>
+      ) : null}
+
+      {/* Scrollable time grid */}
+      <ScrollView ref={scrollRef} style={{ flex: 1 }} showsVerticalScrollIndicator>
+        <View style={{ flexDirection: "row", height: GRID_HEIGHT }}>
+          {/* Hour gutter */}
+          <View style={{ width: GUTTER }}>
+            {HOURS.map((h) =>
+              h === 0 ? null : (
+                <RNText
+                  key={h}
+                  style={{
+                    position: "absolute",
+                    top: h * HOUR_HEIGHT - 7,
+                    right: 6,
+                    fontSize: 11,
+                    color: colors.zinc[400],
+                  }}
+                >
+                  {hourLabel(h)}
+                </RNText>
+              ),
+            )}
+          </View>
+          {/* Day columns */}
+          {days.map((day, dayIdx) => {
+            const placed = layoutDayColumns(day, timedByDay[dayIdx]);
+            const today = isToday(day, now);
+            return (
+              <View key={day.toISOString()} style={styles.dayColumn}>
+                {HOURS.map((h) => (
+                  <View key={h} style={{ position: "absolute", top: h * HOUR_HEIGHT, left: 0, right: 0, borderTopWidth: 1, borderTopColor: colors.zinc[100] }} />
+                ))}
+                {placed.map((c) => (
+                  <EventBlock
+                    key={c.event.id}
+                    event={c.event}
+                    top={c.topMinutes * PX_PER_MIN}
+                    height={c.heightMinutes * PX_PER_MIN}
+                    leftPct={(c.column / c.columns) * 100}
+                    widthPct={(1 / c.columns) * 100}
+                    onPress={onEventPress}
+                    locale={locale}
+                  />
+                ))}
+                {today ? (
+                  <View style={{ position: "absolute", top: minutesSinceMidnight(now) * PX_PER_MIN, left: 0, right: 0, height: 2, backgroundColor: colors.red[500] }}>
+                    <View style={{ position: "absolute", left: -4, top: -3, width: 8, height: 8, borderRadius: 4, backgroundColor: colors.red[500] }} />
+                  </View>
+                ) : null}
+              </View>
+            );
+          })}
+        </View>
+      </ScrollView>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  root: { flex: 1, backgroundColor: colors.white },
+  headerRow: { flexDirection: "row", borderBottomWidth: 1, borderBottomColor: colors.border, paddingVertical: 6 },
+  headerCell: { flex: 1, alignItems: "center", gap: 3 },
+  dateBadge: { minWidth: 26, height: 26, borderRadius: 13, alignItems: "center", justifyContent: "center", paddingHorizontal: 4 },
+  allDayRow: { flexDirection: "row", borderBottomWidth: 1, borderBottomColor: colors.border, paddingVertical: 3 },
+  dayColumn: { flex: 1, borderLeftWidth: 1, borderLeftColor: colors.zinc[100] },
+});

package/src/calendar/types.ts

@@ -0,0 +1,38 @@
+/**
+ * Calendar primitive — data model. Mirrors the minimum shape every calendar API
+ * converges on ({title, start, end}) plus the layered extras (all-day, color).
+ * `data` carries the consumer's row so render/press callbacks stay typed.
+ */
+export interface CalendarEvent<T = unknown> {
+  id: string;
+  title: string;
+  /** Event start (local time). For an all-day event, the day it begins. */
+  start: Date;
+  /** Exclusive end. Null/undefined → a zero-length point (treated as 30 min in the time grid). */
+  end?: Date | null;
+  /** All-day / multi-day banner event (rendered in the all-day row, not the time grid). */
+  allDay?: boolean;
+  /** Hex or design-token color for the event chip. */
+  color?: string | null;
+  data?: T;
+}
+
+export type CalendarViewMode = "month" | "week" | "day";
+
+/** 0 = Sunday … 6 = Saturday. */
+export type Weekday = 0 | 1 | 2 | 3 | 4 | 5 | 6;
+
+/**
+ * Geometry produced by the overlap layout for one timed event: which column it
+ * occupies and how many columns its overlap cluster spans. width = 1/columns,
+ * left = column/columns — concurrent events render side-by-side, FullCalendar-style.
+ */
+export interface EventColumn<T = unknown> {
+  event: CalendarEvent<T>;
+  /** Minutes from midnight of the grid day (clamped to [0, 1440]). */
+  topMinutes: number;
+  /** Height in minutes (>= a floor so very short events stay tappable). */
+  heightMinutes: number;
+  column: number;
+  columns: number;
+}

package/src/download.ts

@@ -12,11 +12,23 @@
 // No React Native / @lotics/shared imports — kept pure so both the host
 // frontend and sandboxed custom-code apps can consume via the per-file
 // export without dragging the wider UI surface.
+//
+// `credentials` defaults to `same-origin`: custom-code apps download presigned
+// R2 URLs (cross-site, no cookie — sending one would trip R2's CORS). The host
+// frontend downloads auth-gated proxy URLs on a sibling subdomain and passes
+// `credentials: "include"` so the session cookie rides the cross-origin fetch.
 
-export async function downloadFileFromUrl(url: string, filename: string): Promise<void> {
+export async function downloadFileFromUrl(
+  url: string,
+  filename: string,
+  opts?: { credentials?: RequestCredentials },
+): Promise<void> {
   if (!url) throw new Error("downloadFileFromUrl: empty url");
 
-  const response = await fetch(url, { cache: "no-store" });
+  const response = await fetch(url, {
+    cache: "no-store",
+    credentials: opts?.credentials ?? "same-origin",
+  });
   if (!response.ok) {
     throw new Error(`File download failed: ${response.status} ${response.statusText}`);
   }

package/src/gantt/gantt_view.tsx

@@ -0,0 +1,131 @@
+import { useMemo, 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 { axisRange, barGeometry, buildTicks, pxPerDay } from "./scale";
+import type { GanttScale, GanttTask } from "./types";
+
+const LABEL_W = 188;
+const HEADER_H = 38;
+const ROW_H = 40;
+const BAR_H = 22;
+const SCALE_LABELS: Record<GanttScale, string> = { day: "Ngày", week: "Tuần", month: "Tháng" };
+const SCALES: GanttScale[] = ["day", "week", "month"];
+
+export interface GanttViewProps<T = unknown> {
+  tasks: GanttTask<T>[];
+  defaultScale?: GanttScale;
+  today?: Date;
+  locale?: string;
+  onTaskPress?: (task: GanttTask<T>) => void;
+}
+
+/**
+ * Timeline / gantt: a frozen task-label column beside a horizontally-scrollable
+ * zoomable axis. Bars are positioned by {@link barGeometry}; month boundaries get
+ * a heavier gridline; a red line marks today. Renders at its natural height — 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, onTaskPress } = props;
+  const [scale, setScale] = useState<GanttScale>(defaultScale);
+
+  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]);
+  const todayLeft = dayDiff(axisStart, today) * pxPerDay(scale);
+  const todayInRange = today >= axisStart && today <= axisEnd;
+
+  return (
+    <View style={styles.root}>
+      {/* Toolbar: zoom */}
+      <View style={styles.toolbar}>
+        <Text size="sm" color="muted">Tiến độ dự án</Text>
+        <View style={styles.zoomSwitch}>
+          {SCALES.map((s) => (
+            <Pressable key={s} onPress={() => setScale(s)} accessibilityRole="button" style={[styles.zoomBtn, scale === s && styles.zoomBtnActive]}>
+              <Text size="sm" weight={scale === s ? "medium" : "regular"} color={scale === s ? "default" : "muted"}>
+                {SCALE_LABELS[s]}
+              </Text>
+            </Pressable>
+          ))}
+        </View>
+      </View>
+
+      <View style={{ flexDirection: "row", flex: 1 }}>
+        {/* Frozen label column */}
+        <View style={{ width: LABEL_W, borderRightWidth: 1, borderRightColor: colors.border }}>
+          <View style={[styles.headerCell, { height: HEADER_H, paddingLeft: 12, justifyContent: "center" }]}>
+            <Text size="xs" color="muted">CÔNG VIỆC</Text>
+          </View>
+          {tasks.map((t) => (
+            <View key={t.id} style={[styles.labelRow, { height: ROW_H }]}>
+              <View style={{ width: 8, height: 8, borderRadius: 2, backgroundColor: t.color || colors.teal[600] }} />
+              <Text size="sm" numberOfLines={1} style={{ flex: 1 }}>{t.label}</Text>
+            </View>
+          ))}
+        </View>
+
+        {/* Scrollable timeline */}
+        <ScrollView horizontal style={{ flex: 1 }} showsHorizontalScrollIndicator>
+          <View style={{ width: axisWidth }}>
+            {/* Header ticks */}
+            <View style={{ height: HEADER_H, flexDirection: "row", borderBottomWidth: 1, borderBottomColor: colors.border }}>
+              {ticks.map((tk) => (
+                <View
+                  key={tk.date.toISOString()}
+                  style={{ position: "absolute", left: tk.left, top: 0, bottom: 0, justifyContent: "center", paddingLeft: 4, borderLeftWidth: tk.monthStart ? 1 : 0, borderLeftColor: colors.zinc[300] }}
+                >
+                  <Text size="xs" weight={tk.monthStart ? "medium" : "regular"} color={tk.monthStart ? "default" : "muted"}>
+                    {tk.label}
+                  </Text>
+                </View>
+              ))}
+            </View>
+
+            {/* Task rows */}
+            {tasks.map((t) => {
+              const bar = barGeometry(t, axisStart, scale);
+              const accent = t.color || colors.teal[600];
+              return (
+                <View key={t.id} style={{ height: ROW_H, borderBottomWidth: 1, borderBottomColor: colors.zinc[100] }}>
+                  {ticks.map((tk) =>
+                    tk.monthStart ? (
+                      <View key={tk.date.toISOString()} style={{ position: "absolute", left: tk.left, top: 0, bottom: 0, borderLeftWidth: 1, borderLeftColor: colors.zinc[200] }} />
+                    ) : null,
+                  )}
+                  <Pressable
+                    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 }}
+                  >
+                    <View style={{ flex: 1, borderRadius: 5, backgroundColor: accent, justifyContent: "center", paddingHorizontal: 8 }}>
+                      <Text size="xs" weight="medium" numberOfLines={1} style={{ color: colors.white }}>{t.label}</Text>
+                    </View>
+                  </Pressable>
+                </View>
+              );
+            })}
+
+            {/* Today marker */}
+            {todayInRange ? (
+              <View style={{ position: "absolute", left: todayLeft, top: 0, bottom: 0, width: 2, backgroundColor: colors.red[500] }} />
+            ) : null}
+          </View>
+        </ScrollView>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  root: { flex: 1, backgroundColor: colors.white },
+  toolbar: { flexDirection: "row", alignItems: "center", justifyContent: "space-between", paddingHorizontal: 14, paddingVertical: 10, borderBottomWidth: 1, borderBottomColor: colors.border },
+  zoomSwitch: { flexDirection: "row", backgroundColor: colors.zinc[100], borderRadius: 8, padding: 2 },
+  zoomBtn: { paddingHorizontal: 12, paddingVertical: 5, borderRadius: 6 },
+  zoomBtnActive: { backgroundColor: colors.white },
+  headerCell: { borderBottomWidth: 1, borderBottomColor: colors.border },
+  labelRow: { flexDirection: "row", alignItems: "center", gap: 8, paddingHorizontal: 12, borderBottomWidth: 1, borderBottomColor: colors.zinc[100] },
+});

package/src/gantt/index.ts

@@ -0,0 +1,4 @@
+export { GanttView } from "./gantt_view";
+export type { GanttViewProps } from "./gantt_view";
+export { barGeometry, axisRange, buildTicks, pxPerDay } from "./scale";
+export type { GanttTask, GanttScale, GanttTick, GanttBar } from "./types";

package/src/gantt/scale.test.ts

@@ -0,0 +1,47 @@
+import { describe, it, expect } from "vitest";
+import { axisRange, barGeometry, buildTicks, pxPerDay } from "./scale";
+import type { GanttTask } from "./types";
+
+const AXIS = new Date(2026, 0, 1); // Jan 1 2026
+const task = (id: string, s: [number, number], e?: [number, number]): GanttTask => ({
+  id,
+  label: id,
+  start: new Date(2026, s[0], s[1]),
+  end: e ? new Date(2026, e[0], e[1]) : null,
+});
+
+describe("gantt scale", () => {
+  it("zoom widths shrink as the scale widens", () => {
+    expect(pxPerDay("day")).toBeGreaterThan(pxPerDay("week"));
+    expect(pxPerDay("week")).toBeGreaterThan(pxPerDay("month"));
+  });
+
+  it("positions a bar by day offset and inclusive span", () => {
+    // Jan 3 → Jan 5 inclusive = 3 days, 2 days after the axis start.
+    const b = barGeometry(task("a", [0, 3], [0, 5]), AXIS, "day");
+    expect(b.left).toBe(2 * 40);
+    expect(b.width).toBe(3 * 40);
+  });
+
+  it("gives a single-day task one day of width (floored)", () => {
+    const b = barGeometry(task("m", [0, 10]), AXIS, "day");
+    expect(b.width).toBe(40);
+    const tiny = barGeometry(task("m", [0, 10]), AXIS, "month"); // 1 * 5px → floored to 8
+    expect(tiny.width).toBe(8);
+  });
+
+  it("derives a padded axis window from the tasks", () => {
+    const { start, end } = axisRange([task("a", [0, 5], [0, 8]), task("b", [0, 3], [0, 20])], new Date(2026, 0, 1), 3);
+    expect(start).toEqual(new Date(2026, 0, 0)); // Jan 3 - 3 = Dec 31 (= Jan 0)
+    expect(end).toEqual(new Date(2026, 0, 23)); // Jan 20 + 3
+  });
+
+  it("emits one day-tick per day and flags month starts", () => {
+    const ticks = buildTicks(new Date(2026, 0, 30), new Date(2026, 1, 2), "day");
+    expect(ticks.map((t) => t.label)).toEqual(["30", "31", "1", "2"]);
+    expect(ticks.find((t) => t.label === "1")?.monthStart).toBe(true);
+    expect(ticks.find((t) => t.label === "30")?.monthStart).toBe(false);
+    expect(ticks[0].left).toBe(0);
+    expect(ticks[1].left).toBe(40); // one day across at day scale
+  });
+});

package/src/gantt/scale.ts

@@ -0,0 +1,92 @@
+import { addDays, dayDiff, startOfDay, startOfMonth, startOfWeek } from "../calendar/dates";
+import type { Weekday } from "../calendar/types";
+import type { GanttBar, GanttScale, GanttTask, GanttTick } from "./types";
+
+const MIN_BAR_PX = 8;
+
+/** Pixels per day at each zoom. Day = roomy single days; month = dense quarters. */
+export function pxPerDay(scale: GanttScale): number {
+  switch (scale) {
+    case "day":
+      return 40;
+    case "week":
+      return 16;
+    case "month":
+      return 5;
+  }
+}
+
+/** The axis window: from the earliest task start to the latest end, padded so
+ *  bars never hug the edges. Falls back to a month around `today` when empty. */
+export function axisRange(tasks: GanttTask[], today: Date = new Date(), padDays = 3): { start: Date; end: Date } {
+  if (tasks.length === 0) {
+    return { start: addDays(today, -padDays), end: addDays(today, 30) };
+  }
+  let min = tasks[0].start;
+  let max = tasks[0].end ?? tasks[0].start;
+  for (const t of tasks) {
+    if (t.start < min) min = t.start;
+    const e = t.end ?? t.start;
+    if (e > max) max = e;
+  }
+  return { start: addDays(startOfDay(min), -padDays), end: addDays(startOfDay(max), padDays) };
+}
+
+/** Bar geometry: left = days from axis start; width spans the inclusive end. */
+export function barGeometry<T>(task: GanttTask<T>, axisStart: Date, scale: GanttScale): GanttBar<T> {
+  const ppd = pxPerDay(scale);
+  const left = dayDiff(axisStart, task.start) * ppd;
+  const endDay = task.end ?? task.start;
+  const days = Math.max(1, dayDiff(task.start, endDay) + 1); // inclusive
+  return { task, left, width: Math.max(MIN_BAR_PX, days * ppd) };
+}
+
+/**
+ * Header ticks across [start, end]. Granularity follows the zoom: a tick per day
+ * (day), per week (week), or per month (month). Each tick flags a month start so
+ * the view can draw a heavier divider / month band — the monday.com two-level feel.
+ */
+export function buildTicks(
+  axisStart: Date,
+  axisEnd: Date,
+  scale: GanttScale,
+  locale?: string,
+  weekStartsOn: Weekday = 1,
+): GanttTick[] {
+  const ppd = pxPerDay(scale);
+  const ticks: GanttTick[] = [];
+  const at = (date: Date, label: string): GanttTick => ({
+    date,
+    left: dayDiff(axisStart, date) * ppd,
+    label,
+    monthStart: date.getDate() === 1,
+  });
+
+  if (scale === "month") {
+    let cursor = startOfMonth(axisStart);
+    const fmt = new Intl.DateTimeFormat(locale, { month: "short", year: "2-digit" });
+    while (cursor <= axisEnd) {
+      ticks.push(at(cursor, fmt.format(cursor)));
+      cursor = new Date(cursor.getFullYear(), cursor.getMonth() + 1, 1);
+    }
+    return ticks;
+  }
+
+  if (scale === "week") {
+    let cursor = startOfWeek(axisStart, weekStartsOn);
+    const fmt = new Intl.DateTimeFormat(locale, { day: "numeric", month: "short" });
+    while (cursor <= axisEnd) {
+      ticks.push(at(cursor, fmt.format(cursor)));
+      cursor = addDays(cursor, 7);
+    }
+    return ticks;
+  }
+
+  // day
+  let cursor = startOfDay(axisStart);
+  while (cursor <= axisEnd) {
+    ticks.push(at(cursor, String(cursor.getDate())));
+    cursor = addDays(cursor, 1);
+  }
+  return ticks;
+}

package/src/gantt/types.ts

@@ -0,0 +1,36 @@
+/**
+ * Gantt / timeline primitive — data model. A task is a labelled bar spanning
+ * [start, end] (end inclusive — a one-day task has start === end's day). `data`
+ * carries the consumer's row for render/press callbacks.
+ */
+export interface GanttTask<T = unknown> {
+  id: string;
+  label: string;
+  start: Date;
+  /** Inclusive end day. Null/undefined → a single-day (milestone-ish) bar. */
+  end?: Date | null;
+  color?: string | null;
+  /** Optional grouping lane label (e.g. project / assignee). */
+  group?: string;
+  data?: T;
+}
+
+/** Zoom level of the horizontal time axis. */
+export type GanttScale = "day" | "week" | "month";
+
+/** A header tick on the time axis. */
+export interface GanttTick {
+  date: Date;
+  /** px offset from the axis start. */
+  left: number;
+  label: string;
+  /** Start of a new month — used to draw the heavier divider + month band. */
+  monthStart: boolean;
+}
+
+/** Pixel geometry of one task bar on the axis. */
+export interface GanttBar<T = unknown> {
+  task: GanttTask<T>;
+  left: number;
+  width: number;
+}

package/src/kanban/constants.ts

@@ -0,0 +1,18 @@
+// Column layout
+export const DEFAULT_COLUMN_WIDTH = 280;
+export const MINIMIZED_COLUMN_WIDTH = 44;
+export const DEFAULT_COLUMN_GAP = 16;
+export const DEFAULT_ITEM_GAP = 8;
+export const COLUMN_CONTENT_PADDING = 12;
+
+// Auto-scroll behavior
+export const AUTO_SCROLL_THRESHOLD = 60;
+export const AUTO_SCROLL_SPEED = 8;
+
+// Drag detection
+export const DRAG_THRESHOLD = 5;
+
+// Touch-specific drag activation (like dnd-kit's delay activation)
+// On touch devices, require a hold before drag can start to distinguish from tap
+export const TOUCH_DRAG_DELAY = 200; // ms - hold time before drag activates on touch
+export const TOUCH_TOLERANCE = 10; // px - max movement allowed during delay period