@heyramzi/ui 1.54.1 → 2.0.0

package/src/tasks/gantt/gantt.test.ts

@@ -0,0 +1,77 @@
+import { mount, tick, unmount } from "svelte";
+import { afterEach, describe, expect, it } from "vite-plus/test";
+import TaskGantt from "../task-gantt.svelte";
+import type { GanttChange } from "../task-types.js";
+
+type Task = { id: string; title: string; start?: string; end?: string; parent?: string };
+const items: Task[] = [
+  { id: "a", title: "Design", start: "2026-10-05", end: "2026-10-09" },
+  { id: "p", title: "Parent", parent: undefined },
+  { id: "c", title: "Child", start: "2026-10-14", end: "2026-10-15", parent: "p" },
+];
+
+let target: HTMLElement;
+let app: Record<string, unknown> | undefined;
+
+function render(extra: Record<string, unknown> = {}) {
+  target = document.createElement("div");
+  document.body.append(target);
+  app = mount(TaskGantt, {
+    target,
+    props: {
+      items,
+      getId: (t: Task) => t.id,
+      getTitle: (t: Task) => t.title,
+      getStart: (t: Task) => t.start,
+      getEnd: (t: Task) => t.end,
+      today: "2026-10-16",
+      ...extra,
+    },
+  }) as Record<string, unknown>;
+  return target;
+}
+
+afterEach(() => {
+  if (app) void unmount(app);
+  target?.remove();
+  app = undefined;
+});
+
+describe("TaskGantt", () => {
+  it("draws a bar per dated task with its dates in the label", () => {
+    const root = render();
+    const bars = root.querySelectorAll("[data-bar]");
+    expect(bars).toHaveLength(2);
+    expect(bars[0]?.getAttribute("aria-label")).toContain("Oct 5 to Oct 9, 5 days");
+  });
+
+  it("moves a bar a day on an arrow key, and grows it on shift plus arrow", async () => {
+    const changes: GanttChange[] = [];
+    const root = render({ onChange: (_id: string, change: GanttChange) => changes.push(change) });
+    const bar = root.querySelector("[data-bar]");
+    bar?.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowRight", bubbles: true }));
+    bar?.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowRight", shiftKey: true, bubbles: true }));
+    await tick();
+    expect(changes).toEqual([
+      { start: "2026-10-06", end: "2026-10-10" },
+      { start: "2026-10-05", end: "2026-10-10" },
+    ]);
+  });
+
+  it("selects on Enter and stays read-only without onChange", async () => {
+    const picked: string[] = [];
+    const root = render({ onSelect: (id: string) => picked.push(id) });
+    const bar = root.querySelector("[data-bar]");
+    bar?.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowRight", bubbles: true }));
+    bar?.dispatchEvent(new KeyboardEvent("keydown", { key: "Enter", bubbles: true }));
+    await tick();
+    expect(picked).toEqual(["a"]);
+    expect(root.querySelectorAll(".g-handle")).toHaveLength(0);
+  });
+
+  it("hides a folded parent's children", () => {
+    const nested = render({ getParent: (t: Task) => t.parent, collapsed: ["p"] });
+    expect(nested.querySelectorAll('[role="listitem"]')).toHaveLength(2);
+    expect(nested.querySelector('button[aria-expanded="false"]')).not.toBeNull();
+  });
+});

package/src/tasks/gantt/logic.test.ts

@@ -0,0 +1,163 @@
+import { describe, expect, it } from "vite-plus/test";
+import { dayNumber } from "../dates.js";
+import { barWidth, buildArrows, buildMonths, buildDays, buildRows, liveSpan, rangeLabel, rangeOf, roundedPath, spanOf, type Drag, type Layout } from "./logic.js";
+
+type Task = { id: string; start?: string; end?: string; parent?: string; group?: string; after?: string[] };
+
+const dates = { getStart: (t: Task) => t.start, getEnd: (t: Task) => t.end };
+const source = (overrides: Partial<Parameters<typeof buildRows<Task>>[1]> = {}) => ({
+  getId: (t: Task) => t.id,
+  ...dates,
+  folded: new Set<string>(),
+  drag: null,
+  ...overrides,
+});
+
+describe("spanOf", () => {
+  it("reads inclusive dates", () => {
+    const span = spanOf({ id: "a", start: "2026-10-05", end: "2026-10-07" }, dates);
+    expect(span && span.end - span.start).toBe(2);
+  });
+  it("lets a lone date stand for a one-day task", () => {
+    expect(spanOf({ id: "a", end: "2026-10-05" }, dates)).toEqual({ start: dayNumber("2026-10-05"), end: dayNumber("2026-10-05") });
+    expect(spanOf({ id: "a", start: "2026-10-05" }, dates)).toEqual({ start: dayNumber("2026-10-05"), end: dayNumber("2026-10-05") });
+  });
+  it("gives an undated task no span, and never an end before the start", () => {
+    expect(spanOf({ id: "a" }, dates)).toBeNull();
+    expect(spanOf({ id: "a", start: "2026-10-09", end: "2026-10-05" }, dates)?.end).toBe(dayNumber("2026-10-09"));
+  });
+});
+
+describe("liveSpan", () => {
+  const span = { start: 100, end: 104 };
+  const drag = (mode: Drag["mode"], dx: number): Drag => ({ id: "a", mode, originX: 0, dx });
+  it("moves, resizes and clamps at the other edge", () => {
+    expect(liveSpan(span, drag("move", 3), "a")).toEqual({ start: 103, end: 107 });
+    expect(liveSpan(span, drag("start", 9), "a")).toEqual({ start: 104, end: 104 });
+    expect(liveSpan(span, drag("end", -9), "a")).toEqual({ start: 100, end: 100 });
+  });
+  it("leaves other rows and idle drags alone", () => {
+    expect(liveSpan(span, drag("move", 3), "b")).toBe(span);
+    expect(liveSpan(span, drag("move", 0), "a")).toBe(span);
+    expect(liveSpan(null, drag("move", 3), "a")).toBeNull();
+  });
+});
+
+describe("rangeOf", () => {
+  const today = dayNumber("2026-10-21");
+  it("pads the tasks' span and starts on a Monday", () => {
+    const { first, last } = rangeOf([{ id: "a", start: "2026-10-14", end: "2026-10-30" }], dates, today);
+    expect(new Date(first * 86_400_000).getUTCDay()).toBe(1);
+    expect(first).toBeLessThanOrEqual(dayNumber("2026-10-07"));
+    expect(last).toBe(dayNumber("2026-10-30") + 21);
+  });
+  it("honours from and to, and never ends before it starts", () => {
+    expect(rangeOf([], dates, today, "2026-10-21", "2026-10-01")).toEqual({ first: today, last: today });
+  });
+});
+
+describe("buildRows", () => {
+  const tasks: Task[] = [
+    { id: "p", parent: undefined },
+    { id: "c1", parent: "p", start: "2026-10-05", end: "2026-10-06" },
+    { id: "c2", parent: "p", start: "2026-10-08", end: "2026-10-09" },
+    { id: "solo", start: "2026-10-01", end: "2026-10-02" },
+  ];
+  it("is flat without a parent accessor", () => {
+    const rows = buildRows(tasks, source());
+    expect(rows.map((r) => (r.kind === "task" ? r.depth : -1))).toEqual([0, 0, 0, 0]);
+  });
+  it("nests children under their parent and draws the span below an undated parent", () => {
+    const rows = buildRows(tasks, source({ getParent: (t) => t.parent }));
+    const ids = rows.map((r) => (r.kind === "task" ? `${r.id}:${r.depth}` : "g"));
+    expect(ids).toEqual(["p:0", "c1:1", "c2:1", "solo:0"]);
+    const parent = rows[0];
+    if (parent.kind !== "task") throw new Error("expected a task row");
+    expect(parent.own).toBeNull();
+    expect(parent.span).toEqual({ start: dayNumber("2026-10-05"), end: dayNumber("2026-10-09") });
+    expect(parent.hasChildren).toBe(true);
+  });
+  it("hides the children of a folded parent but keeps its span", () => {
+    const rows = buildRows(tasks, source({ getParent: (t) => t.parent, folded: new Set(["p"]) }));
+    expect(rows.map((r) => (r.kind === "task" ? r.id : "g"))).toEqual(["p", "solo"]);
+    const parent = rows[0];
+    if (parent.kind !== "task") throw new Error("expected a task row");
+    expect(parent.open).toBe(false);
+    expect(parent.span).not.toBeNull();
+  });
+  it("puts a group header before its tasks, in the order given", () => {
+    const grouped: Task[] = [
+      { id: "a", group: "two", start: "2026-10-05", end: "2026-10-06" },
+      { id: "b", group: "one", start: "2026-10-01", end: "2026-10-02" },
+      { id: "c", group: "one", start: "2026-10-10", end: "2026-10-12" },
+    ];
+    const rows = buildRows(grouped, source({
+      groups: [{ id: "one", label: "One" }, { id: "two", label: "Two" }],
+      getGroup: (t) => t.group ?? "",
+    }));
+    expect(rows.map((r) => (r.kind === "group" ? `#${r.group.id}:${r.count}` : r.id))).toEqual(["#one:2", "b", "c", "#two:1", "a"]);
+    expect(rows[0].span).toEqual({ start: dayNumber("2026-10-01"), end: dayNumber("2026-10-12") });
+  });
+  it("applies a live drag to the row it moves", () => {
+    const rows = buildRows([{ id: "a", start: "2026-10-05", end: "2026-10-06" }], source({ drag: { id: "a", mode: "move", originX: 0, dx: 2 } }));
+    const row = rows[0];
+    if (row.kind !== "task") throw new Error("expected a task row");
+    expect(row.span).toEqual({ start: dayNumber("2026-10-07"), end: dayNumber("2026-10-08") });
+  });
+});
+
+describe("buildArrows", () => {
+  const first = dayNumber("2026-10-05");
+  const layout: Layout = { first, last: first + 30, dayWidth: 32, rowHeight: 40, inset: 3, timelineWidth: 31 * 32, todayDay: first };
+  const rows = (tasks: Task[]) => buildRows(tasks, source());
+  it("draws one arrow per known dependency and skips unknown or undated ones", () => {
+    const tasks: Task[] = [
+      { id: "a", start: "2026-10-05", end: "2026-10-06" },
+      { id: "b", start: "2026-10-12", end: "2026-10-13", after: ["a", "ghost"] },
+      { id: "c", after: ["a"] },
+    ];
+    const arrows = buildArrows(rows(tasks), layout, (t) => tasks.find((x) => x.id === t.id)?.after);
+    expect(arrows.map((a) => a.key)).toEqual(["a->b"]);
+  });
+  it("bends once in the gap when there's room", () => {
+    const tasks: Task[] = [
+      { id: "a", start: "2026-10-05", end: "2026-10-05" },
+      { id: "b", start: "2026-10-12", end: "2026-10-12", after: ["a"] },
+    ];
+    const [arrow] = buildArrows(rows(tasks), layout, (t) => tasks.find((x) => x.id === t.id)?.after);
+    expect(arrow.d.match(/Q/g)).toHaveLength(2);
+  });
+  it("routes round the row gap when the bars touch", () => {
+    const tasks: Task[] = [
+      { id: "a", start: "2026-10-05", end: "2026-10-08" },
+      { id: "b", start: "2026-10-06", end: "2026-10-09", after: ["a"] },
+    ];
+    const [arrow] = buildArrows(rows(tasks), layout, (t) => tasks.find((x) => x.id === t.id)?.after);
+    expect(arrow.d.match(/Q/g)).toHaveLength(4);
+  });
+});
+
+describe("roundedPath", () => {
+  it("rounds each corner by up to the radius and ends on the last point", () => {
+    expect(roundedPath([[0, 0], [20, 0], [20, 20]], 6)).toBe("M0,0 L14,0 Q20,0 20,6 L20,20");
+  });
+});
+
+describe("timeline helpers", () => {
+  it("groups days under their month", () => {
+    const first = dayNumber("2026-10-30");
+    const months = buildMonths(buildDays(first, 4), new Intl.DateTimeFormat("en-US", { month: "long", year: "numeric", timeZone: "UTC" }));
+    expect(months).toEqual([
+      { key: "2026-10", label: "October 2026", i: 0, length: 2 },
+      { key: "2026-11", label: "November 2026", i: 2, length: 2 },
+    ]);
+  });
+  it("never draws a bar under 8px, and labels the span", () => {
+    const layout: Layout = { first: 0, last: 9, dayWidth: 4, rowHeight: 40, inset: 0, timelineWidth: 40, todayDay: 0 };
+    expect(barWidth({ start: 1, end: 1 }, layout)).toBe(8);
+    const format = new Intl.DateTimeFormat("en-US", { month: "short", day: "numeric", timeZone: "UTC" });
+    const start = dayNumber("2026-10-05");
+    expect(rangeLabel({ start, end: start }, format)).toBe("Oct 5 to Oct 5, 1 day");
+    expect(rangeLabel({ start, end: start + 2 }, format)).toBe("Oct 5 to Oct 7, 3 days");
+  });
+});

package/src/tasks/gantt/logic.ts

@@ -0,0 +1,248 @@
+import type { KanbanColumn } from "../kanban-types.js";
+import { dayNumber, isoFromDay, weekday } from "../dates.js";
+
+export type Span = { start: number; end: number };
+export type Drag = { id: string; mode: "move" | "start" | "end"; originX: number; dx: number };
+
+export type TaskRow<T> = {
+  kind: "task";
+  item: T;
+  id: string;
+  order: number;
+  depth: number;
+  hasChildren: boolean;
+  open: boolean;
+  /** The task's own dates, with a live drag applied. Null when undated. */
+  own: Span | null;
+  /** What the row draws: its own span, else the span of what is below it. */
+  span: Span | null;
+};
+export type GroupRow = { kind: "group"; group: KanbanColumn; count: number; span: Span | null };
+export type Row<T> = GroupRow | TaskRow<T>;
+
+export type Arrow = { key: string; d: string; head: string; from: string; to: string };
+
+/** The numbers every part of the chart measures from. */
+export type Layout = {
+  /** The first day drawn, as a day number. */
+  first: number;
+  last: number;
+  dayWidth: number;
+  rowHeight: number;
+  /** Gap either side of a bar. Under 18px a day is too narrow for one. */
+  inset: number;
+  timelineWidth: number;
+  todayDay: number;
+};
+
+type Dates<T> = {
+  getStart: (item: T) => string | null | undefined;
+  getEnd: (item: T) => string | null | undefined;
+};
+
+export type RowSource<T> = Dates<T> & {
+  getId: (item: T) => string;
+  getParent?: (item: T) => string | null | undefined;
+  getGroup?: (item: T) => string;
+  groups?: KanbanColumn[];
+  folded: Set<string>;
+  drag: Drag | null;
+};
+
+const DAY_MS = 86_400_000;
+
+export function dayX(layout: Layout, day: number): number {
+  return (day - layout.first) * layout.dayWidth;
+}
+
+/** The task's own dates. A lone date stands for a one-day task. */
+export function spanOf<T>(item: T, { getStart, getEnd }: Dates<T>): Span | null {
+  const first = getStart(item) || getEnd(item);
+  const last = getEnd(item) || getStart(item);
+  if (!first || !last) return null;
+  const start = dayNumber(first);
+  return { start, end: Math.max(start, dayNumber(last)) };
+}
+
+/** A bar's span, with the live drag applied. Resizes never cross the other edge. */
+export function liveSpan(span: Span | null, drag: Drag | null, id: string): Span | null {
+  if (!span || drag?.id !== id || drag.dx === 0) return span;
+  if (drag.mode === "move") return { start: span.start + drag.dx, end: span.end + drag.dx };
+  if (drag.mode === "start") return { start: Math.min(span.start + drag.dx, span.end), end: span.end };
+  return { start: span.start, end: Math.max(span.end + drag.dx, span.start) };
+}
+
+function join(a: Span | null, b: Span | null): Span | null {
+  return !a ? b : !b ? a : { start: Math.min(a.start, b.start), end: Math.max(a.end, b.end) };
+}
+
+/** The days shown: the tasks' span, padded, starting on a Monday, unless `from` and `to` say otherwise. */
+export function rangeOf<T>(
+  items: T[],
+  source: Dates<T>,
+  todayDay: number,
+  from?: string,
+  to?: string,
+): { first: number; last: number } {
+  let lo = todayDay;
+  let hi = todayDay;
+  for (const item of items) {
+    const span = spanOf(item, source);
+    if (!span) continue;
+    lo = Math.min(lo, span.start);
+    hi = Math.max(hi, span.end);
+  }
+  let first = from ? dayNumber(from) : lo - 7;
+  // Day 0 was a Thursday. Step back to the Monday on or before `first`.
+  if (!from) first -= (weekday(first) + 6) % 7;
+  const last = to ? dayNumber(to) : hi + 21;
+  return { first, last: Math.max(last, first) };
+}
+
+export function buildDays(first: number, count: number) {
+  return Array.from({ length: count }, (_, i) => {
+    const day = first + i;
+    const wd = weekday(day);
+    return { day, i, date: Number(isoFromDay(day).slice(8, 10)), wd, weekend: wd === 0 || wd === 6 };
+  });
+}
+export type GanttDay = ReturnType<typeof buildDays>[number];
+
+export function buildMonths(days: GanttDay[], format: Intl.DateTimeFormat) {
+  const out: { key: string; label: string; i: number; length: number }[] = [];
+  for (const d of days) {
+    const key = isoFromDay(d.day).slice(0, 7);
+    const last = out.at(-1);
+    if (last?.key === key) last.length++;
+    else out.push({ key, label: format.format(new Date(d.day * DAY_MS)), i: d.i, length: 1 });
+  }
+  return out;
+}
+
+/** Rows in draw order. Groups come first, then their tasks, a parent before its children. */
+export function buildRows<T>(items: T[], source: RowSource<T>): Row<T>[] {
+  const { getId, getParent, groups, getGroup, folded, drag } = source;
+  const out: Row<T>[] = [];
+  let order = 0;
+  const live = (item: T, id: string) => liveSpan(spanOf(item, source), drag, id);
+
+  // Depth first, so a parent's row comes before its children. A parent's span is known
+  // only after its children are, so the row is pushed first and filled in after.
+  const emit = (members: T[]) => {
+    if (!getParent) {
+      for (const item of members) {
+        const id = getId(item);
+        const own = live(item, id);
+        out.push({ kind: "task", item, id, order: order++, depth: 0, hasChildren: false, open: true, own, span: own });
+      }
+      return;
+    }
+    const ids = new Set(members.map((item) => getId(item)));
+    const kids = new Map<string | null, T[]>();
+    for (const item of members) {
+      const parent = getParent(item);
+      const key = parent && ids.has(parent) ? parent : null;
+      kids.set(key, [...(kids.get(key) ?? []), item]);
+    }
+    const walk = (item: T, depth: number, visible: boolean): Span | null => {
+      const id = getId(item);
+      const children = kids.get(id) ?? [];
+      const open = !folded.has(id);
+      const own = live(item, id);
+      const row: TaskRow<T> = { kind: "task", item, id, order: 0, depth, hasChildren: children.length > 0, open, own, span: own };
+      if (visible) {
+        row.order = order++;
+        out.push(row);
+      }
+      let below: Span | null = null;
+      for (const child of children) below = join(below, walk(child, depth + 1, visible && open));
+      if (!own) row.span = below;
+      return join(own, below);
+    };
+    for (const item of kids.get(null) ?? []) walk(item, 0, true);
+  };
+
+  if (!groups || !getGroup) {
+    emit(items);
+    return out;
+  }
+  for (const group of groups) {
+    const members = items.filter((item) => getGroup(item) === group.id);
+    let span: Span | null = null;
+    for (const item of members) span = join(span, live(item, getId(item)));
+    out.push({ kind: "group", group, count: members.length, span });
+    emit(members);
+  }
+  return out;
+}
+
+/** A right-angled path through `points`, each corner rounded by up to `radius`. */
+export function roundedPath(points: [number, number][], radius: number): string {
+  let d = `M${points[0][0]},${points[0][1]}`;
+  for (let i = 1; i < points.length - 1; i++) {
+    const [px, py] = points[i - 1];
+    const [cx, cy] = points[i];
+    const [nx, ny] = points[i + 1];
+    const r = Math.min(radius, Math.hypot(cx - px, cy - py) / 2, Math.hypot(nx - cx, ny - cy) / 2);
+    const inX = cx - Math.sign(cx - px) * r;
+    const inY = cy - Math.sign(cy - py) * r;
+    const outX = cx + Math.sign(nx - cx) * r;
+    const outY = cy + Math.sign(ny - cy) * r;
+    d += ` L${inX},${inY} Q${cx},${cy} ${outX},${outY}`;
+  }
+  const [lx, ly] = points[points.length - 1];
+  return `${d} L${lx},${ly}`;
+}
+
+/** Each arrow runs from the end of the task waited on to the start of the one waiting. */
+export function buildArrows<T>(rows: Row<T>[], layout: Layout, getDependsOn: (item: T) => string[] | undefined): Arrow[] {
+  const { rowHeight, inset } = layout;
+  const at = new Map<string, { row: number; span: Span }>();
+  rows.forEach((row, index) => {
+    if (row.kind === "task" && row.span) at.set(row.id, { row: index, span: row.span });
+  });
+  const out: Arrow[] = [];
+  for (const row of rows) {
+    if (row.kind !== "task") continue;
+    const target = at.get(row.id);
+    if (!target) continue;
+    for (const dep of getDependsOn(row.item) ?? []) {
+      const source = at.get(dep);
+      if (!source) continue;
+      const x1 = dayX(layout, source.span.end + 1) - inset;
+      const y1 = source.row * rowHeight + rowHeight / 2;
+      const x2 = dayX(layout, target.span.start) + inset;
+      const y2 = target.row * rowHeight + rowHeight / 2;
+      // Room between the bars: one bend in the gap. No room: out, round the row gap, and back in.
+      const points: [number, number][] =
+        x2 - x1 >= 24
+          ? [[x1, y1], [x1 + 12, y1], [x1 + 12, y2], [x2, y2]]
+          : [
+              [x1, y1],
+              [x1 + 10, y1],
+              [x1 + 10, y1 + (y2 > y1 ? rowHeight / 2 : -rowHeight / 2)],
+              [x2 - 12, y1 + (y2 > y1 ? rowHeight / 2 : -rowHeight / 2)],
+              [x2 - 12, y2],
+              [x2, y2],
+            ];
+      out.push({
+        key: `${dep}->${row.id}`,
+        d: roundedPath(points, 6),
+        head: `M${x2 - 5},${y2 - 3.5} L${x2},${y2} L${x2 - 5},${y2 + 3.5}`,
+        from: dep,
+        to: row.id,
+      });
+    }
+  }
+  return out;
+}
+
+/** The pixel width of a span's bar, never under 8px. */
+export function barWidth(span: Span, layout: Layout): number {
+  return Math.max((span.end - span.start + 1) * layout.dayWidth - layout.inset * 2, 8);
+}
+
+export function rangeLabel(span: Span, format: Intl.DateTimeFormat): string {
+  const length = span.end - span.start + 1;
+  return `${format.format(new Date(span.start * DAY_MS))} to ${format.format(new Date(span.end * DAY_MS))}, ${length} ${length === 1 ? "day" : "days"}`;
+}