@lotics/ui 1.10.0 → 1.11.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "1.10.0",
+  "version": "1.11.1",
   "type": "module",
   "exports": {
     "./tokens": "./src/tokens.ts",
@@ -19,6 +19,9 @@
     "./trend_chip": "./src/trend_chip.tsx",
     "./section_card": "./src/section_card.tsx",
     "./kpi_card": "./src/kpi_card.tsx",
+    "./kanban": "./src/kanban/index.ts",
+    "./calendar": "./src/calendar/index.ts",
+    "./gantt": "./src/gantt/index.ts",
     "./ring_gauge": "./src/ring_gauge.tsx",
     "./alert_row": "./src/alert_row.tsx",
     "./stacked_progress_bar": "./src/stacked_progress_bar.tsx",
@@ -115,6 +118,8 @@
     "./command_menu": "./src/command_menu.tsx",
     "./switch_button": "./src/switch_button.tsx",
     "./alert": "./src/alert.tsx",
+    "./landmark": "./src/landmark.tsx",
+    "./skip_link": "./src/skip_link.tsx",
     "./text_utils": "./src/text_utils.ts",
     "./cell_text": "./src/cell_text.tsx",
     "./cell_number": "./src/cell_number.tsx",
@@ -130,7 +135,9 @@
     "./grid/data_grid_context": "./src/grid/data_grid_context.ts",
     "./grid/search_highlight": "./src/grid/search_highlight.ts"
   },
-  "files": ["src"],
+  "files": [
+    "src"
+  ],
   "publishConfig": {
     "access": "public"
   },
@@ -153,11 +160,21 @@
     "recharts": ">=3.0.0"
   },
   "peerDependenciesMeta": {
-    "expo-image": { "optional": true },
-    "@react-native-picker/picker": { "optional": true },
-    "lucide-react-native": { "optional": true },
-    "react-native-svg": { "optional": true },
-    "recharts": { "optional": true }
+    "expo-image": {
+      "optional": true
+    },
+    "@react-native-picker/picker": {
+      "optional": true
+    },
+    "lucide-react-native": {
+      "optional": true
+    },
+    "react-native-svg": {
+      "optional": true
+    },
+    "recharts": {
+      "optional": true
+    }
   },
   "scripts": {
     "typecheck": "tsgo --noEmit",

package/src/alert.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useCallback } from "react";
+import React, { useEffect, useId, useRef, useState, useCallback } from "react";
 import { createRoot, Root } from "react-dom/client";
 import "./alert.css";
 import { Text } from "./text";
@@ -81,6 +81,11 @@ class Alert {
 
     const AlertComponent = () => {
       const [visible, setVisible] = useState(true);
+      const dialogId = useId();
+      const titleId = `${dialogId}-title`;
+      const messageId = `${dialogId}-message`;
+      const dialogRef = useRef<HTMLDivElement>(null);
+      const returnFocusRef = useRef<HTMLElement | null>(null);
 
       useOverlayScope(visible);
 
@@ -106,6 +111,29 @@ class Alert {
         }
       }, [visible]);
 
+      // Focus management: remember what had focus so it can be restored when
+      // the dialog dismisses. Move focus to the preferred button on mount so
+      // keyboard users do not land outside the dialog.
+      useEffect(() => {
+        returnFocusRef.current = document.activeElement as HTMLElement | null;
+        const frame = requestAnimationFrame(() => {
+          // The primary/positive button is conventionally rightmost in the
+          // row, so default focus lands there. Users can Shift-Tab to the
+          // cancel/neutral buttons if they need them.
+          const buttons = dialogRef.current?.querySelectorAll<HTMLElement>(
+            ".lotics-alert-buttons [role='button']",
+          );
+          const preferred = buttons ? buttons[buttons.length - 1] : undefined;
+          preferred?.focus();
+        });
+        return () => {
+          cancelAnimationFrame(frame);
+          const target = returnFocusRef.current;
+          returnFocusRef.current = null;
+          if (target && typeof target.focus === "function") target.focus();
+        };
+      }, []);
+
       useEffect(() => {
         const handleEscape = (e: KeyboardEvent) => {
           if (e.key === "Escape" && alertOptions.cancelable !== false) {
@@ -124,19 +152,21 @@ class Alert {
       return (
         <div className="lotics-alert-overlay" onClick={handleDismiss}>
           <div
+            ref={dialogRef}
             className="lotics-alert-dialog"
             onClick={(e) => e.stopPropagation()}
             role="alertdialog"
-            aria-labelledby={title && title.trim() ? "alert-title" : undefined}
-            aria-describedby={message ? "alert-message" : undefined}
+            aria-modal="true"
+            aria-labelledby={title && title.trim() ? titleId : undefined}
+            aria-describedby={message ? messageId : undefined}
           >
             {title && title.trim() && (
-              <Text size="md" weight="medium">
+              <Text nativeID={titleId} size="md" weight="medium">
                 {title}
               </Text>
             )}
             {message && (
-              <Text size="sm" color="zinc-500">
+              <Text nativeID={messageId} size="sm" color="zinc-500">
                 {message}
               </Text>
             )}

package/src/avatar.tsx

@@ -10,21 +10,44 @@ interface AvatarProps {
   name?: string;
   style?: StyleProp<ViewStyle | ImageStyle>;
   contentFit?: ImageContentFit;
+  /**
+   * When true, the avatar announces its `name` to assistive tech. Default
+   * false because avatars almost always appear adjacent to the name text —
+   * announcing the image as well would double-read. Pass `announce` when the
+   * avatar is standalone (with no visible name nearby).
+   */
+  announce?: boolean;
 }
 
 export function Avatar(props: AvatarProps) {
-  const { source, size = 32, name = "Unknown", style, contentFit } = props;
+  const { source, size = 32, name = "Unknown", style, contentFit, announce } = props;
+  const decorative = !announce;
 
   if (!source || !source.uri) {
     return (
       <View
+        accessible={!decorative}
+        accessibilityLabel={decorative ? undefined : name}
+        accessibilityElementsHidden={decorative}
+        importantForAccessibility={decorative ? "no-hide-descendants" : undefined}
+        aria-hidden={decorative || undefined}
         style={[
           styles.base,
           { backgroundColor: colors.blue["600"], width: size, height: size },
           style,
         ]}
       >
-        <Text userSelect="none" size="xs" weight="medium" color="inverted">
+        {/* Initials are a visual shorthand for the name; the accessible name is
+            on the container so the SR does not read "HM" in addition. */}
+        <Text
+          userSelect="none"
+          size="xs"
+          weight="medium"
+          color="inverted"
+          accessibilityElementsHidden
+          importantForAccessibility="no-hide-descendants"
+          aria-hidden
+        >
           {getInitials(name, size)}
         </Text>
       </View>
@@ -33,7 +56,9 @@ export function Avatar(props: AvatarProps) {
 
   return (
     <Image
-      alt={name}
+      alt={decorative ? "" : name}
+      accessibilityElementsHidden={decorative}
+      importantForAccessibility={decorative ? "no-hide-descendants" : undefined}
       style={[styles.base, { width: size, height: size }, style as ImageStyle]}
       source={source}
       contentFit={contentFit}

package/src/back_button.tsx

@@ -1,18 +1,20 @@
 import { Button } from "./button";
-import { Text } from "./text";
 import { View } from "react-native";
 
 interface BackButtonProps {
   onPress: () => void;
+  /** Accessible name. Default: "Back". Pass a translated string from the consumer. */
+  accessibilityLabel?: string;
 }
 
 export function BackButton(props: BackButtonProps) {
-  const { onPress } = props;
+  const { onPress, accessibilityLabel = "Back" } = props;
   return (
     <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
       <Button
         icon="chevron-left"
         color="secondary"
+        accessibilityLabel={accessibilityLabel}
         onPress={onPress}
         style={{ alignSelf: "flex-start" }}
       />

package/src/button.tsx

@@ -16,10 +16,9 @@ import { useTooltip, UseTooltipOptions } from "./tooltip";
 export type ButtonColor = "primary" | "secondary" | "danger" | "muted" | "danger-secondary";
 export type ButtonIconPosition = "left" | "right";
 
-export interface ButtonProps {
+interface ButtonPropsBase {
   ref?: Ref<View>;
   testID?: string;
-  title?: string | boolean;
   icon?: IconName;
   alignSelf?: "flex-start" | "flex-end" | "center" | "stretch" | "auto";
   color?: ButtonColor;
@@ -30,9 +29,34 @@ export interface ButtonProps {
   style?: StyleProp<ViewStyle>;
 }
 
+/**
+ * A button must have an accessible name. The compiler enforces it by
+ * requiring at least one of: a string `title`, an explicit
+ * `accessibilityLabel`, or a `tooltip` that carries a visible name. The
+ * runtime derives `accessibilityLabel` in that precedence order.
+ */
+export type ButtonProps = ButtonPropsBase &
+  (
+    | { title: string; accessibilityLabel?: string; tooltip?: string | UseTooltipOptions }
+    | { title?: boolean | undefined; accessibilityLabel: string; tooltip?: string | UseTooltipOptions }
+    | { title?: boolean | undefined; accessibilityLabel?: string; tooltip: string | UseTooltipOptions }
+  );
+
 export function Button(props: ButtonProps) {
-  const { ref, icon, alignSelf, title, color, style, disabled, tooltip, loading, onPress, testID } =
-    props;
+  const {
+    ref,
+    icon,
+    alignSelf,
+    title,
+    color,
+    style,
+    disabled,
+    tooltip,
+    loading,
+    onPress,
+    testID,
+    accessibilityLabel,
+  } = props;
 
   const disabledOrLoading = disabled || loading;
   const tooltipProps = useTooltip(tooltip);
@@ -74,7 +98,13 @@ export function Button(props: ButtonProps) {
       ref={ref}
       testID={testID}
       accessibilityRole="button"
-      accessibilityState={{ disabled: disabledOrLoading }}
+      accessibilityLabel={
+        accessibilityLabel ||
+        (typeof title === "string" ? title : "") ||
+        (typeof tooltip === "string" ? tooltip : tooltip?.text) ||
+        undefined
+      }
+      accessibilityState={{ disabled: disabledOrLoading, busy: loading }}
       disabled={disabledOrLoading}
       // @ts-ignore hovered is a react-native-web extension not in base RN types
       style={({ pressed, hovered }) => {

package/src/calendar/calendar_view.tsx

@@ -0,0 +1,127 @@
+import { useState } from "react";
+import { View, Pressable, StyleSheet } from "react-native";
+import { Text } from "../text";
+import { colors } from "../colors";
+import { MonthView } from "./month_view";
+import { TimeGridView } from "./time_grid_view";
+import { addDays, addMonths, viewTitle } from "./dates";
+import { DEFAULT_CALENDAR_LABELS } from "./types";
+import type { CalendarEvent, CalendarLabels, CalendarViewMode, Weekday } from "./types";
+
+const VIEW_ORDER: CalendarViewMode[] = ["month", "week", "day"];
+
+export interface CalendarViewProps<T = unknown> {
+  events: CalendarEvent<T>[];
+  defaultView?: CalendarViewMode;
+  defaultDate?: Date;
+  weekStartsOn?: Weekday;
+  locale?: string;
+  /** User-facing chrome strings; defaults to English. */
+  labels?: Partial<CalendarLabels>;
+  onEventPress?: (event: CalendarEvent<T>) => void;
+  onDayPress?: (day: Date) => void;
+}
+
+/**
+ * Full calendar: a toolbar (prev / today / next + month·week·day switch) over
+ * the month grid or the week/day time grid. Date + view are owned here so the
+ * 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 L = { ...DEFAULT_CALENDAR_LABELS, ...props.labels };
+  const [view, setView] = useState<CalendarViewMode>(defaultView);
+  const [date, setDate] = useState<Date>(defaultDate ?? new Date());
+
+  const step = (dir: number) =>
+    setDate((d) => (view === "month" ? addMonths(d, dir) : addDays(d, dir * (view === "week" ? 7 : 1))));
+
+  // Drilling into a day (month "+N more" or a day cell) opens the day grid.
+  const drillToDay = (day: Date) => {
+    setDate(day);
+    setView("day");
+    onDayPress?.(day);
+  };
+
+  return (
+    <View style={styles.root}>
+      <View style={styles.toolbar}>
+        <View style={styles.navGroup}>
+          <Pressable onPress={() => step(-1)} accessibilityRole="button" accessibilityLabel={L.previous} style={styles.iconBtn}>
+            <Text size="lg" color="muted">‹</Text>
+          </Pressable>
+          <Pressable onPress={() => setDate(new Date())} accessibilityRole="button" style={styles.todayBtn}>
+            <Text size="sm" weight="medium">{L.today}</Text>
+          </Pressable>
+          <Pressable onPress={() => step(1)} accessibilityRole="button" accessibilityLabel={L.next} style={styles.iconBtn}>
+            <Text size="lg" color="muted">›</Text>
+          </Pressable>
+        </View>
+
+        <Text size="lg" weight="semibold" style={styles.title} numberOfLines={1}>
+          {viewTitle(view, date, weekStartsOn, locale)}
+        </Text>
+
+        <View style={styles.viewSwitch}>
+          {VIEW_ORDER.map((v) => (
+            <Pressable
+              key={v}
+              onPress={() => setView(v)}
+              accessibilityRole="button"
+              style={[styles.viewBtn, view === v && styles.viewBtnActive]}
+            >
+              <Text size="sm" weight={view === v ? "medium" : "regular"} color={view === v ? "default" : "muted"}>
+                {L[v]}
+              </Text>
+            </Pressable>
+          ))}
+        </View>
+      </View>
+
+      <View style={{ flex: 1 }}>
+        {view === "month" ? (
+          <MonthView
+            date={date}
+            events={events}
+            weekStartsOn={weekStartsOn}
+            locale={locale}
+            moreLabel={L.more}
+            onEventPress={onEventPress}
+            onDayPress={drillToDay}
+          />
+        ) : (
+          <TimeGridView
+            mode={view}
+            date={date}
+            events={events}
+            weekStartsOn={weekStartsOn}
+            locale={locale}
+            allDayLabel={L.allDay}
+            onEventPress={onEventPress}
+          />
+        )}
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  root: { flex: 1, backgroundColor: colors.white },
+  toolbar: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingHorizontal: 14,
+    paddingVertical: 10,
+    gap: 12,
+    borderBottomWidth: 1,
+    borderBottomColor: colors.border,
+  },
+  navGroup: { flexDirection: "row", alignItems: "center", gap: 4 },
+  iconBtn: { width: 30, height: 30, borderRadius: 6, alignItems: "center", justifyContent: "center" },
+  todayBtn: { paddingHorizontal: 12, height: 30, borderRadius: 6, borderWidth: 1, borderColor: colors.border, alignItems: "center", justifyContent: "center" },
+  title: { flex: 1, textAlign: "center" },
+  viewSwitch: { flexDirection: "row", backgroundColor: colors.zinc[100], borderRadius: 8, padding: 2 },
+  viewBtn: { paddingHorizontal: 12, paddingVertical: 5, borderRadius: 6 },
+  viewBtnActive: { backgroundColor: colors.white },
+});

package/src/calendar/dates.ts

@@ -0,0 +1,102 @@
+import type { CalendarViewMode, Weekday } from "./types";
+
+/**
+ * Self-contained date helpers (native `Date` + `Intl`) — no date library, so the
+ * calendar primitive adds no peer dependency to apps. All math is local-time, as
+ * a calendar displays; we never cross into UTC arithmetic.
+ */
+
+export const MS_PER_DAY = 86_400_000;
+
+export function startOfDay(d: Date): Date {
+  return new Date(d.getFullYear(), d.getMonth(), d.getDate());
+}
+
+export function addDays(d: Date, n: number): Date {
+  // Construct via Y/M/D so DST day-boundary shifts can't drift the calendar day.
+  return new Date(d.getFullYear(), d.getMonth(), d.getDate() + n);
+}
+
+export function startOfWeek(d: Date, weekStartsOn: Weekday = 1): Date {
+  const day = d.getDay();
+  const diff = (day - weekStartsOn + 7) % 7;
+  return addDays(startOfDay(d), -diff);
+}
+
+export function startOfMonth(d: Date): Date {
+  return new Date(d.getFullYear(), d.getMonth(), 1);
+}
+
+export function endOfMonth(d: Date): Date {
+  return new Date(d.getFullYear(), d.getMonth() + 1, 0);
+}
+
+export function addMonths(d: Date, n: number): Date {
+  return new Date(d.getFullYear(), d.getMonth() + n, d.getDate());
+}
+
+export function isSameDay(a: Date, b: Date): boolean {
+  return (
+    a.getFullYear() === b.getFullYear() &&
+    a.getMonth() === b.getMonth() &&
+    a.getDate() === b.getDate()
+  );
+}
+
+export function isToday(d: Date, now: Date = new Date()): boolean {
+  return isSameDay(d, now);
+}
+
+export function isSameMonth(a: Date, b: Date): boolean {
+  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth();
+}
+
+/** Whole calendar days from `a`'s day to `b`'s day (b - a), DST-safe. */
+export function dayDiff(a: Date, b: Date): number {
+  return Math.round((startOfDay(b).getTime() - startOfDay(a).getTime()) / MS_PER_DAY);
+}
+
+export function minutesSinceMidnight(d: Date): number {
+  return d.getHours() * 60 + d.getMinutes();
+}
+
+/** The day columns a view spans: 7 for week, 1 for day, the 6-week grid for month. */
+export function daysInView(mode: CalendarViewMode, date: Date, weekStartsOn: Weekday = 1): Date[] {
+  if (mode === "day") return [startOfDay(date)];
+  if (mode === "week") {
+    const start = startOfWeek(date, weekStartsOn);
+    return Array.from({ length: 7 }, (_, i) => addDays(start, i));
+  }
+  // month: full weeks covering the month → always 6 rows for a stable grid height.
+  const gridStart = startOfWeek(startOfMonth(date), weekStartsOn);
+  return Array.from({ length: 42 }, (_, i) => addDays(gridStart, i));
+}
+
+// ─── Localized labels (Intl, browser/workspace locale) ──────────────────────
+
+export function weekdayShort(d: Date, locale?: string): string {
+  return new Intl.DateTimeFormat(locale, { weekday: "short" }).format(d);
+}
+
+export function formatTime(d: Date, locale?: string): string {
+  return new Intl.DateTimeFormat(locale, { hour: "2-digit", minute: "2-digit", hour12: false }).format(d);
+}
+
+/** "0:00".."23:00" rail labels — 24-hour, unambiguous across locales. */
+export function hourLabel(hour: number): string {
+  return `${String(hour).padStart(2, "0")}:00`;
+}
+
+/** Header title: "March 2026" (month) or the week/day range. */
+export function viewTitle(mode: CalendarViewMode, date: Date, weekStartsOn: Weekday, locale?: string): string {
+  if (mode === "month") {
+    return new Intl.DateTimeFormat(locale, { month: "long", year: "numeric" }).format(date);
+  }
+  if (mode === "day") {
+    return new Intl.DateTimeFormat(locale, { weekday: "long", day: "numeric", month: "long", year: "numeric" }).format(date);
+  }
+  const start = startOfWeek(date, weekStartsOn);
+  const end = addDays(start, 6);
+  const md = (x: Date) => new Intl.DateTimeFormat(locale, { day: "numeric", month: "short" }).format(x);
+  return `${md(start)} – ${md(end)}, ${end.getFullYear()}`;
+}

package/src/calendar/index.ts

@@ -0,0 +1,20 @@
+export { CalendarView } from "./calendar_view";
+export type { CalendarViewProps } from "./calendar_view";
+export { TimeGridView } from "./time_grid_view";
+export type { TimeGridViewProps } from "./time_grid_view";
+export { MonthView } from "./month_view";
+export type { MonthViewProps } from "./month_view";
+export { layoutDayColumns, packEventLanes } from "./layout";
+export type { LaneBar } from "./layout";
+export { DEFAULT_CALENDAR_LABELS } from "./types";
+export type { CalendarEvent, CalendarViewMode, Weekday, EventColumn, CalendarLabels } from "./types";
+export {
+  addDays,
+  addMonths,
+  startOfWeek,
+  startOfMonth,
+  daysInView,
+  isSameDay,
+  isToday,
+  viewTitle,
+} from "./dates";

package/src/calendar/layout.test.ts

@@ -0,0 +1,103 @@
+import { describe, it, expect } from "vitest";
+import { layoutDayColumns, packEventLanes } from "./layout";
+import type { CalendarEvent } from "./types";
+
+const DAY = new Date(2026, 0, 15);
+const at = (h: number, m = 0) => new Date(2026, 0, 15, h, m);
+const ev = (id: string, sh: number, sm: number, eh: number, em: number): CalendarEvent => ({
+  id,
+  title: id,
+  start: at(sh, sm),
+  end: at(eh, em),
+});
+
+/** column/columns keyed by event id, for order-independent assertions. */
+function geom(events: CalendarEvent[]) {
+  return Object.fromEntries(
+    layoutDayColumns(DAY, events).map((c) => [c.event.id, { column: c.column, columns: c.columns }]),
+  );
+}
+
+describe("layoutDayColumns", () => {
+  it("returns nothing for an empty day", () => {
+    expect(layoutDayColumns(DAY, [])).toEqual([]);
+  });
+
+  it("stacks non-overlapping events in a single column", () => {
+    const g = geom([ev("a", 9, 0, 10, 0), ev("b", 11, 0, 12, 0)]);
+    expect(g.a).toEqual({ column: 0, columns: 1 });
+    expect(g.b).toEqual({ column: 0, columns: 1 });
+  });
+
+  it("splits two fully overlapping events into two columns", () => {
+    const g = geom([ev("a", 9, 0, 10, 0), ev("b", 9, 0, 10, 0)]);
+    expect(g.a.columns).toBe(2);
+    expect(g.b.columns).toBe(2);
+    expect(new Set([g.a.column, g.b.column])).toEqual(new Set([0, 1]));
+  });
+
+  it("gives three concurrent events three columns", () => {
+    const g = geom([ev("a", 9, 0, 12, 0), ev("b", 9, 0, 12, 0), ev("c", 9, 0, 12, 0)]);
+    expect(new Set([g.a.column, g.b.column, g.c.column])).toEqual(new Set([0, 1, 2]));
+    for (const k of ["a", "b", "c"]) expect(g[k].columns).toBe(3);
+  });
+
+  it("reuses a freed column within a transitive cluster (A→B→C chain)", () => {
+    // A 9-10, B 9:30-11 (overlaps A), C 10:30-12 (overlaps B, not A).
+    // One cluster via B; 2 columns; C reuses A's column once A ends.
+    const g = geom([ev("a", 9, 0, 10, 0), ev("b", 9, 30, 11, 0), ev("c", 10, 30, 12, 0)]);
+    expect(g.a.columns).toBe(2);
+    expect(g.a.column).toBe(0);
+    expect(g.b.column).toBe(1);
+    expect(g.c.column).toBe(0); // freed by A
+  });
+
+  it("treats time-separated events as independent clusters", () => {
+    const g = geom([ev("morn1", 9, 0, 10, 0), ev("morn2", 9, 0, 10, 0), ev("aft", 14, 0, 15, 0)]);
+    expect(g.morn1.columns).toBe(2);
+    expect(g.morn2.columns).toBe(2);
+    expect(g.aft).toEqual({ column: 0, columns: 1 }); // own cluster
+  });
+
+  it("positions and floors height; clamps to the day window", () => {
+    const [c] = layoutDayColumns(DAY, [ev("x", 9, 0, 9, 5)]);
+    expect(c.topMinutes).toBe(540); // 9:00
+    expect(c.heightMinutes).toBeGreaterThanOrEqual(20); // 5-min event floored
+    const spill = layoutDayColumns(DAY, [
+      { id: "y", title: "y", start: at(23, 0), end: new Date(2026, 0, 16, 2, 0) },
+    ])[0];
+    expect(spill.topMinutes).toBe(1380); // 23:00
+    expect(spill.topMinutes + spill.heightMinutes).toBeLessThanOrEqual(1440); // clamped
+  });
+});
+
+describe("packEventLanes", () => {
+  const WEEK = new Date(2026, 0, 12); // Mon
+  const allDay = (id: string, startDay: number, endDay: number): CalendarEvent => ({
+    id,
+    title: id,
+    start: new Date(2026, 0, 12 + startDay),
+    end: new Date(2026, 0, 12 + endDay),
+    allDay: true,
+  });
+
+  it("places non-overlapping spans in one lane", () => {
+    const { bars, lanes } = packEventLanes([allDay("a", 0, 1), allDay("b", 3, 4)], WEEK, 7);
+    expect(lanes).toBe(1);
+    expect(bars.find((b) => b.event.id === "a")).toMatchObject({ startCol: 0, span: 2, lane: 0 });
+    expect(bars.find((b) => b.event.id === "b")).toMatchObject({ startCol: 3, span: 2, lane: 0 });
+  });
+
+  it("stacks overlapping multi-day spans into separate lanes", () => {
+    const { lanes } = packEventLanes([allDay("a", 0, 3), allDay("b", 2, 5)], WEEK, 7);
+    expect(lanes).toBe(2);
+  });
+
+  it("clamps a span that starts before the window and filters out-of-range", () => {
+    const before: CalendarEvent = { id: "x", title: "x", start: new Date(2026, 0, 9), end: new Date(2026, 0, 13), allDay: true };
+    const after = allDay("y", 9, 10); // entirely after a 7-day window
+    const { bars } = packEventLanes([before, after], WEEK, 7);
+    expect(bars).toHaveLength(1);
+    expect(bars[0]).toMatchObject({ event: { id: "x" }, startCol: 0, span: 2 }); // clamped to days 0..1
+  });
+});