Render the Gantt chart with @tasknotes/calendar's timeline

README.md

@@ -62,11 +62,13 @@ staging, or production app; TaskNotes still owns its own sign-in and approval.
   zooms around the pointer.
 - Drag a task bar to move its whole schedule. Drag either end to change its
   scheduled or due date. Drag an unscheduled row into the timeline to place it.
-- Focus a bar and use `Alt` + Left/Right Arrow for one-day keyboard moves. The
-  resize grips support Left/Right Arrow directly.
-- Drag from the small handle below either end of one bar to an end of another
-  bar to create the corresponding start/finish relationship. Cycles and
-  self-links are rejected.
+- Focus a bar and use `Alt` + Left/Right Arrow for one-day keyboard moves, or
+  `Alt` + `Shift` + Left/Right Arrow to change its end.
+- Drag from the handle at the end of one bar onto another bar to make the
+  second task blocked by the first (finish-to-start). Set other relationship
+  types in the inspector. Cycles and self-links are rejected.
+- On touch screens, press and hold a bar or an unscheduled title before
+  dragging it.
 - Select a task to edit dates, status, priority, ordered project memberships,
   dependencies, or relationship types in the inspector.
 
@@ -166,5 +168,5 @@ src/components   React application and Gantt surface
 src/data         mdbase connection and repository adapters
 src/domain       task and timeline semantics
 public           web and mdbase application manifests
-vendor           pinned TaskNotes model and mdbase Connect packages
+vendor           pinned development mdbase packages and contract packs
 ```

e2e/phone-planner.spec.ts

@@ -83,7 +83,7 @@ test("schedule dates and times have full-width rows on phones", async ({
   }
 });
 
-test("an unscheduled title can drop onto a date header and still opens the editor on click", async ({
+test("an unscheduled title can drop onto the timeline and still opens the editor on click", async ({
   page,
 }) => {
   await page.goto("/?demo=1");
@@ -94,21 +94,17 @@ test("an unscheduled title can drop onto a date header and still opens the edito
   const name = await title.locator("strong").innerText();
   const ledger = page.locator(".task-ledger-main").filter({ hasText: name });
   const source = await title.boundingBox();
-  const header = await page.locator(".timeline-header").boundingBox();
-  const corner = await page.locator(".gantt-corner").boundingBox();
-  if (!source || !header || !corner)
-    throw new Error("Drag geometry unavailable");
+  const corner = await page.locator(".tnc-tl-corner").boundingBox();
+  if (!source || !corner) throw new Error("Drag geometry unavailable");
   await page.mouse.move(
     source.x + source.width / 2,
     source.y + source.height / 2,
   );
   await page.mouse.down();
   await page.mouse.move(
     corner.x + corner.width + 200,
-    header.y + header.height / 2,
-    {
-      steps: 12,
-    },
+    source.y + source.height / 2,
+    { steps: 12 },
   );
   await page.mouse.up();
   await expect(page.locator(".gantt-interaction-message")).toHaveText(
@@ -129,7 +125,8 @@ for (const width of [320, 390]) {
     await page.setViewportSize({ width, height: 844 });
     await page.goto("/e2e/fixtures/phone-ledger.html");
     await page.getByLabel(/^Search tasks/).fill(phonePrefix);
-    await expect(page.locator(".task-row")).toHaveCount(2);
+    const rows = page.locator(".tnc-tl-row:not(.is-group)");
+    await expect(rows).toHaveCount(2);
     await page.evaluate(() => document.fonts.ready);
     for (const suffix of ["alpha", "beta"]) {
       const title = page
@@ -155,26 +152,14 @@ for (const width of [320, 390]) {
         }, suffix),
       ).toBe(true);
     }
-    for (const row of await page.locator(".task-row").all()) {
-      expect((await row.boundingBox())!.height).toBe(65);
-      expect((await row.locator(".task-ledger").boundingBox())!.height).toBe(
-        65,
-      );
-      expect((await row.locator(".timeline-row").boundingBox())!.height).toBe(
-        65,
-      );
+    for (const row of await rows.all()) {
       const bounds = (await row.boundingBox())!;
-      const action = (await row
-        .locator(".unscheduled-row-action")
-        .boundingBox())!;
-      expect(
-        Math.abs(action.y + action.height / 2 - bounds.y - bounds.height / 2),
-      ).toBeLessThanOrEqual(1);
+      expect(bounds.height).toBe(65);
+      const ledger = (await row.locator(".task-ledger").boundingBox())!;
+      const track = (await row.locator(".tnc-tl-track").boundingBox())!;
+      expect(ledger.y).toBe(track.y);
+      expect(ledger.height).toBe(track.height);
     }
-    await expect(page.locator(".dependency-layer")).toHaveAttribute(
-      "height",
-      "165",
-    );
     expect(
       await page.evaluate(() => document.documentElement.scrollWidth),
     ).toBeLessThanOrEqual(width);

package.json

@@ -32,7 +32,8 @@
     "@mdbase-dev/connect": "file:vendor/mdbase-dev-connect-0.1.0-beta.96-56ed32ffde05.tgz",
     "@mdbase-dev/sdk": "file:vendor/mdbase-dev-sdk-dev-0ecbef41.tgz",
     "@mdbase-dev/ui": "file:vendor/ui-dev-9553ad66.tgz",
-    "@tasknotes/model": "file:vendor/tasknotes-model-0.3.0-rc.15.tgz",
+    "@tasknotes/calendar": "0.1.0",
+    "@tasknotes/model": "0.3.0-rc.17",
     "lucide-react": "1.25.0",
     "react": "19.2.8",
     "react-dom": "19.2.8",