Add timeline component primitives

.changeset/swift-pumas-breathe.md

@@ -0,0 +1,40 @@
+---
+"@tailor-platform/app-shell": minor
+---
+
+Add composable `Timeline` primitives for building time-based layouts, including axis guides/levels, row backgrounds, intervals, and dependency links.
+
+- `Timeline.Root` defines the shared start/end range.
+- `Timeline.Viewport` renders the axis, decorations, scrolling area, and link layer.
+- `Timeline.Row` defines one timeline lane and owns row height/background.
+- `Timeline.Interval` positions content across a time range.
+- `Timeline.Link` draws dependency lines between timeline items.
+
+```tsx
+import { Timeline } from "@tailor-platform/app-shell";
+
+<Timeline.Root start={0} end={100}>
+  <Timeline.Viewport
+    axis={{
+      guides: [{ at: 0 }, { at: 50 }, { at: 100 }],
+      levels: [
+        {
+          kind: "spans",
+          items: [
+            { start: 0, end: 50, label: "Phase 1" },
+            { start: 50, end: 100, label: "Phase 2" },
+          ],
+        },
+      ],
+    }}
+  >
+    <Timeline.Row height={40}>
+      <Timeline.Interval start={10} end={35}>
+        <div className="h-full rounded-md bg-primary" />
+      </Timeline.Interval>
+    </Timeline.Row>
+  </Timeline.Viewport>
+</Timeline.Root>;
+```
+
+`Tooltip.Content` also now accepts `noArrow` for popover-like timeline labels and custom overlays.

examples/nextjs-app/src/modules/custom-module.tsx

@@ -23,6 +23,7 @@ import { csvImporterDemoResource } from "./pages/csv-importer-demo";
 import { dataTableDemoResource } from "./pages/data-table-demo";
 import { colorDemoResource } from "./pages/color-demo";
 import { gridDemoResource } from "./pages/grid-demo";
+import { timelineDemoResource } from "./pages/timeline-demo";
 
 export const customPageModule = defineModule({
   path: "custom-page",
@@ -229,6 +230,17 @@ export const customPageModule = defineModule({
               Grid Demo (responsive columns, auto-fit, custom widths, spanning)
             </Link>
           </p>
+          <p>
+            <Link
+              to="/custom-page/timeline-demo"
+              style={{
+                color: "hsl(var(--primary))",
+                textDecoration: "underline",
+              }}
+            >
+              Timeline Demo (task dependencies, job execution)
+            </Link>
+          </p>
         </div>
       </div>
     );
@@ -257,5 +269,6 @@ export const customPageModule = defineModule({
     csvImporterDemoResource,
     dataTableDemoResource,
     gridDemoResource,
+    timelineDemoResource,
   ],
 });