@lotics/ui 1.10.0 → 1.11.1

package/src/command_menu.tsx

@@ -1,7 +1,6 @@
 import { StyleSheet, View, ScrollView } from "react-native";
-import { useState, useCallback, useMemo, useRef } from "react";
+import { useState, useCallback, useMemo, useRef, useId } from "react";
 import { colors } from "./colors";
-import { Icon } from "./icon";
 import { TextInputField } from "./text_input_field";
 import { MenuButton } from "./menu_button";
 import { Text } from "./text";
@@ -20,14 +19,27 @@ interface CommandMenuProps {
   enableSearch?: boolean;
   /** Search input placeholder. Default: "Search...". Pass a translated string from the consumer. */
   searchPlaceholder?: string;
+  /** Accessible name for the list. Default: "Options". Pass a translated string from the consumer. */
+  accessibilityLabel?: string;
 }
 
 export function CommandMenu(props: CommandMenuProps) {
-  const { options, onSelect, onRequestClose, enableSearch, searchPlaceholder = "Search..." } = props;
+  const {
+    options,
+    onSelect,
+    onRequestClose,
+    enableSearch,
+    searchPlaceholder = "Search...",
+    accessibilityLabel,
+  } = props;
   const scrollViewRef = useRef<ScrollView>(null);
   const screenSize = useScreenSize();
   const OPTION_HEIGHT = 40;
 
+  const baseId = useId();
+  const listboxId = `${baseId}-listbox`;
+  const optionId = (index: number) => `${baseId}-option-${index}`;
+
   const [searchQuery, setSearchQuery] = useState("");
 
   const filteredOptions = useMemo(() => {
@@ -83,6 +95,16 @@ export function CommandMenu(props: CommandMenuProps) {
           }
           return true;
         }
+        case "Home":
+          setFocusedIndex(0);
+          scrollToIndex(0);
+          return true;
+        case "End": {
+          const last = filteredOptions.length - 1;
+          setFocusedIndex(last);
+          scrollToIndex(last);
+          return true;
+        }
         case "Enter":
           if (focusedIndex >= 0 && focusedIndex < filteredOptions.length) {
             const opt = filteredOptions[focusedIndex];
@@ -111,6 +133,10 @@ export function CommandMenu(props: CommandMenuProps) {
     [handleKeyNavigation],
   );
 
+  const listLabel = accessibilityLabel ?? "Options";
+  const activeOptionId =
+    focusedIndex >= 0 && focusedIndex < filteredOptions.length ? optionId(focusedIndex) : undefined;
+
   return (
     <View style={[styles.container, screenSize.small ? { flex: 1 } : { maxHeight: 480 }]}>
       {enableSearch && (
@@ -124,20 +150,40 @@ export function CommandMenu(props: CommandMenuProps) {
           autoCapitalize="none"
           autoCorrect={false}
           onKeyPress={handleSearchKeyPress}
+          accessibilityLabel={listLabel}
+          role="combobox"
+          aria-expanded
+          aria-controls={listboxId}
+          aria-activedescendant={activeOptionId}
+          aria-autocomplete="list"
         />
       )}
-      <ScrollView ref={scrollViewRef} style={styles.optionsList}>
+      <ScrollView
+        ref={scrollViewRef}
+        style={styles.optionsList}
+        nativeID={listboxId}
+        accessibilityLabel={listLabel}
+        // Boundary adapter: `listbox` is a valid ARIA role but missing from
+        // React Native's `Role` enum, so TypeScript cannot accept the literal
+        // here. `react-native-web` forwards the attribute verbatim, which is
+        // what assistive technology reads on web.
+        role={"listbox" as "list"}
+      >
         {filteredOptions.map((item, index) => (
           <MenuButton
             key={item.value}
+            nativeID={optionId(index)}
             testID={`command-option-${item.value}`}
             title={
               <Text userSelect="none" numberOfLines={1}>
                 {item.label}
               </Text>
             }
+            accessibilityLabel={item.label}
+            role="option"
             right={undefined}
             focused={index === focusedIndex}
+            selected={index === focusedIndex}
             disabled={item.disabled}
             onPress={() => handleSelect(item.value)}
             onHoverIn={() => setFocusedIndex(index)}

package/src/dialog.tsx

@@ -163,7 +163,7 @@ export function Dialog(props: DialogProps) {
                   <PortalHost>
                     <View testID={testID} style={[styles.dialogContainer, { borderRadius }]}>
                       <View style={[styles.closeButtonContainer, { paddingHorizontal: screenSize.small ? 16 : 24 }]}>
-                        <Button icon="x" onPress={handleClose} />
+                        <Button icon="x" accessibilityLabel="Close" onPress={handleClose} />
                       </View>
                       <View style={styles.container}>{children}</View>
                     </View>

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/form_field.tsx

@@ -1,3 +1,4 @@
+import { createContext, useContext, useId } from "react";
 import { StyleProp, View, ViewStyle } from "react-native";
 import { Text } from "./text";
 import { Spacer } from "./spacer";
@@ -12,38 +13,89 @@ export interface FormFieldProps {
   optionalLabel?: string;
 }
 
+/**
+ * Binding emitted by `FormField` to the single input it wraps. Descendants
+ * that call `useFormField()` apply these props to the native input so screen
+ * readers know the label, error, and description apply to it.
+ */
+export interface FormFieldBinding {
+  inputId: string;
+  labelId: string;
+  descriptionId: string | undefined;
+  errorId: string | undefined;
+  invalid: boolean;
+}
+
+const FormFieldContext = createContext<FormFieldBinding | null>(null);
+
+/**
+ * Returns the association IDs set by the nearest enclosing `FormField`.
+ * Inputs spread the returned props onto their underlying element so label,
+ * description, and error are announced together. Returns `null` when the
+ * input is used outside a `FormField` — callers should then provide their
+ * own `accessibilityLabel`.
+ */
+export function useFormField(): FormFieldBinding | null {
+  return useContext(FormFieldContext);
+}
+
 export function FormField(props: FormFieldProps & { children: React.ReactNode }) {
   const { label, description, error, optional, style, children, optionalLabel = "Optional" } = props;
 
+  const inputId = useId();
+  const labelId = `${inputId}-label`;
+  const descriptionId = description ? `${inputId}-description` : undefined;
+  const errorId = error ? `${inputId}-error` : undefined;
+
+  const binding: FormFieldBinding = {
+    inputId,
+    labelId,
+    descriptionId,
+    errorId,
+    invalid: !!error,
+  };
+
   return (
-    <View style={[{ paddingBottom: 16 }, style]}>
-      <View
-        style={{
-          flexDirection: "row",
-          alignItems: "center",
-          justifyContent: "space-between",
-        }}
-      >
-        {!!label && (
-          <Text numberOfLines={1} weight="medium">
-            {label}
+    <FormFieldContext.Provider value={binding}>
+      <View style={[{ paddingBottom: 16 }, style]}>
+        <View
+          style={{
+            flexDirection: "row",
+            alignItems: "center",
+            justifyContent: "space-between",
+          }}
+        >
+          {!!label && (
+            <Text nativeID={labelId} numberOfLines={1} weight="medium">
+              {label}
+            </Text>
+          )}
+          {!!optional && (
+            <Text numberOfLines={1} size="sm" color="zinc-500">
+              {optionalLabel}
+            </Text>
+          )}
+        </View>
+        {!!description && (
+          <Text nativeID={descriptionId} color="muted">
+            {description}
           </Text>
         )}
-        {!!optional && (
-          <Text numberOfLines={1} size="sm" color="zinc-500">
-            {optionalLabel}
-          </Text>
+        <Spacer size={8} />
+        <View>{children}</View>
+        {error && (
+          <>
+            <Spacer size={8} />
+            {/*
+              `role="alert"` + `aria-live="polite"` makes the text announce
+              when the error first appears or changes, without stealing focus.
+            */}
+            <Text nativeID={errorId} color="danger" accessibilityRole="alert" aria-live="polite">
+              {error}
+            </Text>
+          </>
         )}
       </View>
-      {!!description && <Text color="muted">{description}</Text>}
-      <Spacer size={8} />
-      <View>{children}</View>
-      {error && (
-        <>
-          <Spacer size={8} />
-          <Text color="danger">{error}</Text>
-        </>
-      )}
-    </View>
+    </FormFieldContext.Provider>
   );
 }

package/src/form_switch.tsx

@@ -1,3 +1,4 @@
+import { useId } from "react";
 import { View } from "react-native";
 import { Text } from "./text";
 import { FormFieldProps } from "./form_field";
@@ -8,6 +9,8 @@ export interface FormSwitchProps extends Omit<FormFieldProps, "optional">, Switc
 
 export function FormSwitch(props: FormSwitchProps) {
   const { label, description, error, value, onChange } = props;
+  const labelId = useId();
+  const errorId = error ? `${labelId}-error` : undefined;
 
   return (
     <View>
@@ -18,9 +21,18 @@ export function FormSwitch(props: FormSwitchProps) {
           alignItems: description ? "flex-start" : "center",
         }}
       >
-        <Switch value={value} onChange={onChange} />
+        <Switch
+          value={value}
+          onChange={onChange}
+          accessibilityLabel={label}
+        />
         <View style={{ flex: 1 }}>
-          <Text onPress={() => onChange?.(!value)} weight="medium" userSelect="none">
+          <Text
+            nativeID={labelId}
+            onPress={() => onChange?.(!value)}
+            weight="medium"
+            userSelect="none"
+          >
             {label}
           </Text>
           {!!description && (
@@ -34,7 +46,14 @@ export function FormSwitch(props: FormSwitchProps) {
       {!!error && (
         <>
           <Spacer size={8} />
-          <Text color="danger">{error}</Text>
+          <Text
+            nativeID={errorId}
+            color="danger"
+            accessibilityRole="alert"
+            aria-live="polite"
+          >
+            {error}
+          </Text>
         </>
       )}
       <Spacer size={8} />

package/src/gantt/gantt_view.tsx

@@ -0,0 +1,145 @@
+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 { axisRange, barGeometry, buildTicks, pxPerDay } from "./scale";
+import { DEFAULT_GANTT_LABELS } from "./types";
+import type { GanttLabels, GanttScale, GanttTask } from "./types";
+
+const LABEL_W = 188;
+const HEADER_H = 38;
+const ROW_H = 40;
+const BAR_H = 22;
+const SCALES: GanttScale[] = ["day", "week", "month"];
+
+export interface GanttViewProps<T = unknown> {
+  tasks: GanttTask<T>[];
+  defaultScale?: GanttScale;
+  today?: Date;
+  locale?: string;
+  /** Optional toolbar caption shown left of the zoom switch. */
+  title?: string;
+  /** User-facing chrome strings; defaults to English. */
+  labels?: Partial<GanttLabels>;
+  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. The axis opens scrolled to today
+ * so a long history doesn't bury the active range. 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, title, onTaskPress } = props;
+  const L = { ...DEFAULT_GANTT_LABELS, ...props.labels };
+  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;
+
+  // Open scrolled to today (a margin of recent past visible), like the time-grid
+  // scrolls to "now" — keeps the active range in view when history is long.
+  const scrollRef = useRef<ScrollView>(null);
+  useEffect(() => {
+    const id = setTimeout(() => scrollRef.current?.scrollTo({ x: Math.max(0, todayLeft - 96), animated: false }), 0);
+    return () => clearTimeout(id);
+  }, [scale, todayLeft]);
+
+  return (
+    <View style={styles.root}>
+      {/* Toolbar: zoom */}
+      <View style={styles.toolbar}>
+        {title ? <Text size="sm" color="muted">{title}</Text> : <View />}
+        <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"}>
+                {L[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" style={{ textTransform: "uppercase" }}>{L.task}</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 ref={scrollRef} 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,5 @@
+export { GanttView } from "./gantt_view";
+export type { GanttViewProps } from "./gantt_view";
+export { barGeometry, axisRange, buildTicks, pxPerDay } from "./scale";
+export { DEFAULT_GANTT_LABELS } from "./types";
+export type { GanttTask, GanttScale, GanttTick, GanttBar, GanttLabels } 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,51 @@
+/**
+ * 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";
+
+/**
+ * User-facing chrome strings. Defaults to English and taken as a prop — i18n is
+ * the consumer's responsibility (see the @lotics/ui convention in
+ * grid/data_grid.tsx). Axis tick labels come from `locale` via Intl.
+ */
+export interface GanttLabels {
+  day: string;
+  week: string;
+  month: string;
+  /** Frozen task-column header. */
+  task: string;
+}
+
+export const DEFAULT_GANTT_LABELS: GanttLabels = { day: "Day", week: "Week", month: "Month", task: "Task" };
+
+/** 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/grid/select_header_cell.tsx

@@ -17,6 +17,7 @@ export const SelectHeaderCell = memo(function SelectHeaderCell() {
       }}
     >
       <CheckboxInput
+        accessibilityLabel="Select all rows"
         testID="table-header-checkbox"
         indeterminate={isIndeterminate}
         checked={isRowSelected}