@joewinke/jatui 0.36.3 → 0.38.0

package/dist/artifact-blocks/blocks/timeline/TimelineBlock.svelte

@@ -0,0 +1,347 @@
+<script lang="ts">
+  /**
+   * TimelineBlock — SVG gantt / milestone renderer (block type "timeline").
+   *
+   * Layout lives in ./schema.ts (pure, unit-tested): UTC-day domain, tick
+   * ladders per zoom, lane rows with greedy sub-rows for overlapping bars,
+   * dependency elbows. This file is the render layer.
+   *
+   * Token discipline: colors are DaisyUI token classes resolved through a
+   * STATIC map (no dynamic `text-${tone}` — that breaks Tailwind extraction).
+   * Text is text; no {@html} anywhere. The today line renders client-side
+   * only (browser flag) so SSR and hydration never disagree on geometry.
+   */
+  import type { BlockProps } from "../../types.js"
+  import type { ToneToken } from "../../params.js"
+  import {
+    timelineParamsSchema,
+    layoutTimeline,
+    dependencyPoints,
+    timelineRows,
+    type TimelineParams,
+    type ToneToken as ToneTokenType,
+  } from "./schema.js"
+  import { LANE_W, PLOT_W, BAR_H, MS_R } from "./constants.js"
+  import SectionTools from "../../SectionTools.svelte"
+
+  const browser = typeof window !== "undefined"
+
+  let { params: rawParams, ctx }: BlockProps<TimelineParams> = $props()
+
+  /** Params are parsed here, not assumed pre-parsed: the host validates at
+   * publish but stores what was sent. Corrupt params fall back to an empty
+   * render — a bad agent payload must never throw inside the artifact page. */
+  const EMPTY_PARAMS: TimelineParams = {
+    zoom: "month",
+    showToday: true,
+    milestones: [],
+    bars: [],
+    dependencies: [],
+  }
+  const parsed = $derived(timelineParamsSchema.safeParse(rawParams))
+  const params = $derived(parsed.success ? parsed.data : EMPTY_PARAMS)
+
+  // ── Tone classes (STATIC maps — token-only theming, no dynamic classes) ──
+  const BAR_FILL: Record<ToneTokenType, string> = {
+    primary: "fill-primary/25",
+    secondary: "fill-secondary/25",
+    accent: "fill-accent/25",
+    neutral: "fill-base-content/15",
+    info: "fill-info/25",
+    success: "fill-success/30",
+    warning: "fill-warning/30",
+    error: "fill-error/25",
+  }
+  const BAR_STROKE: Record<ToneTokenType, string> = {
+    primary: "stroke-primary/70",
+    secondary: "stroke-secondary/70",
+    accent: "stroke-accent/70",
+    neutral: "stroke-base-content/35",
+    info: "stroke-info/70",
+    success: "stroke-success/70",
+    warning: "stroke-warning/80",
+    error: "stroke-error/70",
+  }
+  const PROGRESS_FILL: Record<ToneTokenType, string> = {
+    primary: "fill-primary/60",
+    secondary: "fill-secondary/60",
+    accent: "fill-accent/60",
+    neutral: "fill-base-content/40",
+    info: "fill-info/60",
+    success: "fill-success/65",
+    warning: "fill-warning/70",
+    error: "fill-error/60",
+  }
+  const HEAD_FILL: Record<ToneTokenType, string> = {
+    primary: "fill-primary/80",
+    secondary: "fill-secondary/80",
+    accent: "fill-accent/80",
+    neutral: "fill-base-content/50",
+    info: "fill-info/80",
+    success: "fill-success/80",
+    warning: "fill-warning/90",
+    error: "fill-error/80",
+  }
+  const barTone = (t?: ToneToken): ToneTokenType => t ?? "primary"
+  const msTone = (t?: ToneToken): ToneTokenType => t ?? "accent"
+
+  // ── Layout ────────────────────────────────────────────────────────────────
+  // The today line is client-only: SSR passes nowMs=null so the rendered
+  // geometry (domain, bars, ticks) is byte-identical on both sides.
+  const nowMs = $derived(browser ? Date.now() : null)
+  const layout = $derived(
+    layoutTimeline(params, { plotW: PLOT_W, laneW: LANE_W, nowMs }),
+  )
+  const W = $derived(Math.max(240, layout.width))
+  const H = $derived(Math.max(60, layout.height))
+
+  const ariaLabel = $derived(
+    `timeline${params.title ? `: ${params.title}` : ""}. ${params.bars.length} bars, ${params.milestones.length} milestones, ${params.bars.reduce((n, b) => n + (b.progress != null ? 1 : 0), 0)} with progress, zoom ${params.zoom}.`,
+  )
+
+  // ── Path helpers ──────────────────────────────────────────────────────────
+  const r1 = (n: number) => Math.round(n * 10) / 10
+
+  // ── Bar labels: inside when the box fits the estimate, else outside ──────
+  function barLabelInside(label: string, w: number): boolean {
+    return label.length * 6.2 <= w - 10
+  }
+  function truncate(s: string, n: number): string {
+    return s.length > n ? `${s.slice(0, n - 1)}…` : s
+  }
+
+  // ── A11y data fallback ────────────────────────────────────────────────────
+  let dataOpen = $state(false)
+  const tableId = $derived(`block-data-${ctx.blockId || "timeline"}`)
+  const rows = $derived(timelineRows(params))
+</script>
+
+<figure class="w-full" data-block-type="timeline">
+  {#if params.title || params.subtitle}
+    <div class="mb-1">
+      {#if params.title}
+        <div class="flex items-center gap-2">
+          <h4 class="min-w-0 text-sm font-semibold text-base-content">
+            {params.title}
+          </h4>
+          <SectionTools {ctx} inline />
+        </div>
+      {/if}
+      {#if params.subtitle}
+        <p class="text-xs text-base-content/60">{params.subtitle}</p>
+      {/if}
+    </div>
+  {/if}
+
+  {#if params.bars.length === 0 && params.milestones.length === 0}
+    <p class="text-sm text-base-content/45">No timeline to show.</p>
+  {:else}
+    <div class="w-full overflow-x-auto">
+      <svg
+        viewBox="0 0 {W} {H}"
+        class="block h-auto w-full"
+        role="img"
+        aria-label={ariaLabel}
+      >
+        <!-- tick grid: vertical recessive lines + labels on top -->
+        {#each layout.ticks as t, ti (ti)}
+          <line
+            x1={r1(t.x)}
+            x2={r1(t.x)}
+            y1={12}
+            y2={H - 4}
+            class="stroke-base-content/10"
+            stroke-width="1"
+            shape-rendering="crispEdges"
+          ></line>
+          <text
+            x={r1(t.x)}
+            y={10}
+            text-anchor="middle"
+            class="fill-base-content/45 text-2xs tabular-nums"
+          >
+            {t.label}
+          </text>
+        {/each}
+
+        <!-- today line (client-only; dashed + labeled) -->
+        {#if layout.today}
+          <line
+            x1={r1(layout.today.x)}
+            x2={r1(layout.today.x)}
+            y1={12}
+            y2={H - 4}
+            class="stroke-warning/80"
+            stroke-width="1.5"
+            stroke-dasharray="4 4"
+          ></line>
+          <text
+            x={r1(layout.today.x + 5)}
+            y={20}
+            class="fill-warning text-2xs font-medium"
+          >
+            today
+          </text>
+        {/if}
+
+        <!-- lane rows: alternating tint + label + marks -->
+        {#each layout.rows as row, ri (row.id + ri)}
+          <rect
+            x={0}
+            y={r1(row.y)}
+            width={W}
+            height={r1(row.height)}
+            class={ri % 2 === 0
+              ? "fill-base-content/[0.03]"
+              : "fill-transparent"}
+          ></rect>
+          <text
+            x={8}
+            y={r1(row.y + row.height / 2 + 3)}
+            class="fill-base-content/55 text-2xs font-medium"
+          >
+            {truncate(row.label, Math.floor(LANE_W / 6.2))}
+          </text>
+
+          {#each row.bars as b (b.id)}
+            {@const tone = barTone(b.tone)}
+            {@const yTop = b.y - BAR_H / 2}
+            <rect
+              x={r1(b.x)}
+              y={r1(yTop)}
+              width={r1(b.w)}
+              height={BAR_H}
+              rx="4"
+              class="{BAR_FILL[tone]} {BAR_STROKE[tone]}"
+              stroke-width="1"
+            ></rect>
+            {#if b.progress != null && b.progress > 0}
+              <rect
+                x={r1(b.x)}
+                y={r1(yTop)}
+                width={r1((b.w * b.progress) / 100)}
+                height={BAR_H}
+                rx="4"
+                class={PROGRESS_FILL[tone]}
+              ></rect>
+            {/if}
+            {#if barLabelInside(b.label, b.w)}
+              <text
+                x={r1(b.x + 6)}
+                y={r1(b.y + 3.5)}
+                class="fill-base-content text-2xs font-medium"
+              >
+                {truncate(b.label, Math.max(1, Math.floor((b.w - 10) / 6.2)))}
+              </text>
+            {:else}
+              <text
+                x={r1(b.x + b.w + 6)}
+                y={r1(b.y + 3.5)}
+                class="fill-base-content/70 text-2xs"
+              >
+                {truncate(b.label, 24)}
+              </text>
+            {/if}
+            <title>{b.label}: {b.start} → {b.end}</title>
+          {/each}
+
+          {#each row.milestones as m, mi (m.id + mi)}
+            {@const tone = msTone(m.tone)}
+            <polygon
+              points="{r1(m.x)},{r1(m.y - MS_R)} {r1(m.x + MS_R)},{r1(m.y)} {r1(
+                m.x,
+              )},{r1(m.y + MS_R)} {r1(m.x - MS_R)},{r1(m.y)}"
+              class="{BAR_FILL[tone]} {BAR_STROKE[tone]}"
+              stroke-width="1.5"
+            ></polygon>
+            <text
+              x={r1(m.x + MS_R + 5)}
+              y={r1(m.y + 3.5)}
+              class="fill-base-content/70 text-2xs"
+            >
+              {truncate(m.label, 20)}
+            </text>
+            <title>{m.label}: {m.date}</title>
+          {/each}
+        {/each}
+
+        <!-- dependency elbows -->
+        {#each params.dependencies as d, di (di)}
+          {@const a = layout.rows
+            .flatMap((r) => r.bars)
+            .find((b) => b.id === d.from)}
+          {@const b = layout.rows
+            .flatMap((r) => r.bars)
+            .find((bar) => bar.id === d.to)}
+          {#if a && b}
+            {@const pts = dependencyPoints(
+              { xEnd: a.x + a.w, y: a.y },
+              { xStart: b.x, y: b.y },
+            )}
+            <polyline
+              points={pts.map((p) => `${r1(p.x)},${r1(p.y)}`).join(" ")}
+              fill="none"
+              class="stroke-base-content/45"
+              stroke-width="1"
+            ></polyline>
+            {@const last = pts[pts.length - 1]}
+            {@const prev = pts[pts.length - 2]}
+            {@const ang = Math.atan2(last.y - prev.y, last.x - prev.x)}
+            <polygon
+              points="{r1(last.x)},{r1(last.y)} {r1(
+                last.x - 7 * Math.cos(ang - 0.45),
+              )},{r1(last.y - 7 * Math.sin(ang - 0.45))} {r1(
+                last.x - 7 * Math.cos(ang + 0.45),
+              )},{r1(last.y - 7 * Math.sin(ang + 0.45))}"
+              class="fill-base-content/50"
+            ></polygon>
+          {/if}
+        {/each}
+      </svg>
+    </div>
+  {/if}
+
+  <!-- accessible data fallback: sr-only table always; expandable -->
+  <div class="mt-1.5 flex items-center justify-between gap-2">
+    <span class="text-2xs text-base-content/45">
+      {params.bars.length} bars · {params.milestones.length} milestones · zoom
+      {params.zoom}
+    </span>
+    <button
+      type="button"
+      class="btn btn-ghost btn-xs text-base-content/70"
+      aria-expanded={dataOpen}
+      aria-controls={tableId}
+      onclick={() => (dataOpen = !dataOpen)}
+    >
+      {dataOpen ? "Hide data" : "View data"}
+    </button>
+  </div>
+  <div
+    class={dataOpen
+      ? "mt-1 max-h-64 overflow-auto rounded-box border border-base-content/10"
+      : "sr-only"}
+  >
+    <!-- sr-only sits on the wrapper: a <table> ignores width:1px and grows to
+         its content, so on the table itself it widened the page at 390px. -->
+    <table id={tableId} class={dataOpen ? "table table-sm" : undefined}>
+      <caption class="sr-only">
+        Timeline data{params.title ? `: ${params.title}` : ""}
+      </caption>
+      <thead>
+        <tr>
+          <th scope="col" class="text-left">Item</th>
+          <th scope="col" class="text-left">Schedule</th>
+        </tr>
+      </thead>
+      <tbody>
+        {#each rows as row, ri (ri)}
+          <tr>
+            <th scope="row" class="text-left font-normal">{row.label}</th>
+            <td class="text-left">{row.detail}</td>
+          </tr>
+        {/each}
+      </tbody>
+    </table>
+  </div>
+</figure>

package/dist/artifact-blocks/blocks/timeline/TimelineBlock.svelte.d.ts

@@ -0,0 +1,42 @@
+/**
+   * TimelineBlock — SVG gantt / milestone renderer (block type "timeline").
+   *
+   * Layout lives in ./schema.ts (pure, unit-tested): UTC-day domain, tick
+   * ladders per zoom, lane rows with greedy sub-rows for overlapping bars,
+   * dependency elbows. This file is the render layer.
+   *
+   * Token discipline: colors are DaisyUI token classes resolved through a
+   * STATIC map (no dynamic `text-${tone}` — that breaks Tailwind extraction).
+   * Text is text; no {@html} anywhere. The today line renders client-side
+   * only (browser flag) so SSR and hydration never disagree on geometry.
+   */
+import type { BlockProps } from "../../types.js";
+declare const TimelineBlock: import("svelte").Component<BlockProps<{
+    zoom: "month" | "week" | "day";
+    showToday: boolean;
+    milestones: {
+        label: string;
+        date: string;
+        id?: string | undefined;
+        tone?: "error" | "warning" | "info" | "success" | "primary" | "secondary" | "neutral" | "accent" | undefined;
+        lane?: string | undefined;
+    }[];
+    bars: {
+        id: string;
+        label: string;
+        start: string;
+        end: string;
+        lane?: string | undefined;
+        tone?: "error" | "warning" | "info" | "success" | "primary" | "secondary" | "neutral" | "accent" | undefined;
+        progress?: number | undefined;
+    }[];
+    dependencies: {
+        from: string;
+        to: string;
+    }[];
+    title?: string | undefined;
+    subtitle?: string | undefined;
+    lanes?: string[] | undefined;
+}>, {}, "">;
+type TimelineBlock = ReturnType<typeof TimelineBlock>;
+export default TimelineBlock;

package/dist/artifact-blocks/blocks/timeline/block.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Timeline block definition (block type "timeline").
+ * Contract: src/lib/artifact-blocks/CONTRACT.md — registry.ts discovers this
+ * folder; nothing else registers a block.
+ */
+import type { ArtifactBlockDef } from "../../types.js";
+import { type TimelineParams } from "./schema.js";
+declare const def: ArtifactBlockDef<TimelineParams>;
+export default def;

package/dist/artifact-blocks/blocks/timeline/block.js

@@ -0,0 +1,96 @@
+import { timelineParamsSchema as timelineSchema, } from "./schema.js";
+import TimelineBlock from "./TimelineBlock.svelte";
+const EXAMPLE = {
+    title: "Q4 launch plan",
+    subtitle: "Design → build → rollout",
+    zoom: "month",
+    showToday: true,
+    lanes: ["Design", "Build", "Go-live"],
+    milestones: [
+        { id: "kickoff", label: "Kickoff", date: "2026-10-05", tone: "accent" },
+        { id: "beta", label: "Private beta", date: "2026-11-20", tone: "info" },
+        { id: "launch", label: "Launch", date: "2026-12-18", tone: "success" },
+    ],
+    bars: [
+        {
+            id: "design-system",
+            label: "Design system",
+            start: "2026-10-05",
+            end: "2026-10-23",
+            lane: "Design",
+            tone: "secondary",
+            progress: 60,
+        },
+        {
+            id: "landing",
+            label: "Landing page",
+            start: "2026-10-19",
+            end: "2026-11-06",
+            lane: "Design",
+            tone: "secondary",
+        },
+        {
+            id: "api",
+            label: "API + data model",
+            start: "2026-10-12",
+            end: "2026-11-13",
+            lane: "Build",
+            tone: "primary",
+        },
+        {
+            id: "web",
+            label: "Web app",
+            start: "2026-10-26",
+            end: "2026-12-04",
+            lane: "Build",
+            tone: "primary",
+            progress: 15,
+        },
+        {
+            id: "qa",
+            label: "QA + fixes",
+            start: "2026-11-30",
+            end: "2026-12-11",
+            lane: "Build",
+            tone: "warning",
+        },
+        {
+            id: "rollout",
+            label: "Phased rollout",
+            start: "2026-12-07",
+            end: "2026-12-18",
+            lane: "Go-live",
+            tone: "success",
+        },
+    ],
+    dependencies: [
+        { from: "design-system", to: "landing" },
+        { from: "api", to: "web" },
+        { from: "web", to: "qa" },
+        { from: "qa", to: "rollout" },
+    ],
+};
+const def = {
+    type: "timeline",
+    title: "Timeline / Gantt",
+    description: "Dated milestones and gantt bars with dependencies on a UTC-day-anchored time axis — " +
+        "launch plans, sprints, project schedules. bars are { id, label, start, end, lane?, tone?, " +
+        "progress? } (id is REQUIRED kebab-case — dependencies reference it; end >= start; progress " +
+        "0-100 renders a darker completion fill); milestones are { id?, label, date, tone?, lane? } " +
+        "drawn as diamonds on their lane (lane-less milestones collect on a top 'Milestones' lane). " +
+        "dependencies are { from, to } bar-id pairs routed as elbow arrows from a bar's end to its " +
+        "successor's start. lanes orders the rows explicitly (first-seen order otherwise; lane-less " +
+        "bars share a 'Tasks' row). zoom day/week/month picks the axis granularity (day ticks, " +
+        "Monday ticks, month ticks — the step widens automatically past ~46 ticks so a 2-year plan " +
+        "still reads). showToday (default true) draws a dashed today line when today falls inside " +
+        "the range (it renders client-side only — SSR shows the plan without it, so no hydration " +
+        "drift). Caps: 50 milestones, 80 bars, 120 dependencies, labels ≤200 chars. An accessible " +
+        "data table is built in ('View data') — don't pair a timeline with a duplicate schedule " +
+        "list. Tip: give every bar a stable id and chain the critical path through dependencies.",
+    schema: timelineSchema,
+    component: TimelineBlock,
+    // mos-8fvt9: the section's Listen + comment sit on the heading row.
+    hostsTools: (p) => Boolean(p.title),
+    example: EXAMPLE,
+};
+export default def;

package/dist/artifact-blocks/blocks/timeline/constants.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Timeline block — caps and layout constants (pure numbers, no colors).
+ * The renderer maps tones to theme-token classes; schema.ts computes all
+ * geometry from these.
+ */
+export declare const MAX_MILESTONES = 50;
+export declare const MAX_BARS = 80;
+export declare const MAX_DEPS = 120;
+export declare const MAX_LANES = 24;
+/** Bar / milestone label text cap (chars). */
+export declare const BAR_TEXT_MAX = 200;
+export declare const ID_MAX = 64;
+export declare const LANE_MAX = 80;
+export type ToneTokenT = "primary" | "secondary" | "accent" | "neutral" | "info" | "success" | "warning" | "error";
+/** Left column that carries the lane labels. */
+export declare const LANE_W = 130;
+/** Plot width of the time axis at natural (unscaled) size. */
+export declare const PLOT_W = 720;
+/** Height of the tick header strip. */
+export declare const TICK_H = 22;
+export declare const ROW_PAD = 9;
+export declare const BAR_H = 16;
+/** Vertical pitch of a bar sub-row (bar + gap). */
+export declare const SUB_ROW_H: number;
+/** Milestone diamond size (half-diagonal). */
+export declare const MS_R = 5.5;

package/dist/artifact-blocks/blocks/timeline/constants.js

@@ -0,0 +1,27 @@
+/**
+ * Timeline block — caps and layout constants (pure numbers, no colors).
+ * The renderer maps tones to theme-token classes; schema.ts computes all
+ * geometry from these.
+ */
+// ── Caps (untrusted-input bounds) ─────────────────────────────────────────
+export const MAX_MILESTONES = 50;
+export const MAX_BARS = 80;
+export const MAX_DEPS = 120;
+export const MAX_LANES = 24;
+/** Bar / milestone label text cap (chars). */
+export const BAR_TEXT_MAX = 200;
+export const ID_MAX = 64;
+export const LANE_MAX = 80;
+// ── Layout constants (px) ─────────────────────────────────────────────────
+/** Left column that carries the lane labels. */
+export const LANE_W = 130;
+/** Plot width of the time axis at natural (unscaled) size. */
+export const PLOT_W = 720;
+/** Height of the tick header strip. */
+export const TICK_H = 22;
+export const ROW_PAD = 9;
+export const BAR_H = 16;
+/** Vertical pitch of a bar sub-row (bar + gap). */
+export const SUB_ROW_H = BAR_H + 7;
+/** Milestone diamond size (half-diagonal). */
+export const MS_R = 5.5;

package/dist/artifact-blocks/blocks/timeline/schema.d.ts

@@ -0,0 +1,102 @@
+/**
+ * Timeline block — params schema, validation, date scale and layout
+ * (mos-d70v4).
+ *
+ * Pure functions only (no DOM): dates parse to UTC-midnight epoch ms (a
+ * date-only ISO string parses identically in every timezone), the domain,
+ * ticks, lane rows and dependency elbows are computed here, and colors
+ * NEVER appear — the renderer maps tones to theme-token classes.
+ *
+ * Untrusted-input rules (CONTRACT.md): text params are length-capped
+ * strings, dates are ISO-validated (impossible calendar dates are refused
+ * at publish), arrays are capped (50 milestones / 80 bars / 120 deps).
+ */
+import { z } from "zod";
+import { type ToneTokenT } from "./constants.js";
+import type { TimelineParams, Point, Tick, TimelineLayout } from "./types.js";
+export declare const timelineParamsSchema: z.ZodObject<{
+    title: z.ZodOptional<z.ZodString>;
+    subtitle: z.ZodOptional<z.ZodString>;
+    zoom: z.ZodDefault<z.ZodEnum<{
+        month: "month";
+        week: "week";
+        day: "day";
+    }>>;
+    showToday: z.ZodDefault<z.ZodBoolean>;
+    milestones: z.ZodDefault<z.ZodArray<z.ZodObject<{
+        id: z.ZodOptional<z.ZodString>;
+        label: z.ZodString;
+        date: z.ZodString;
+        tone: z.ZodOptional<z.ZodEnum<{
+            error: "error";
+            warning: "warning";
+            info: "info";
+            success: "success";
+            primary: "primary";
+            secondary: "secondary";
+            neutral: "neutral";
+            accent: "accent";
+        }>>;
+        lane: z.ZodOptional<z.ZodString>;
+    }, z.core.$strip>>>;
+    bars: z.ZodDefault<z.ZodArray<z.ZodObject<{
+        id: z.ZodString;
+        label: z.ZodString;
+        start: z.ZodString;
+        end: z.ZodString;
+        lane: z.ZodOptional<z.ZodString>;
+        tone: z.ZodOptional<z.ZodEnum<{
+            error: "error";
+            warning: "warning";
+            info: "info";
+            success: "success";
+            primary: "primary";
+            secondary: "secondary";
+            neutral: "neutral";
+            accent: "accent";
+        }>>;
+        progress: z.ZodOptional<z.ZodNumber>;
+    }, z.core.$strip>>>;
+    dependencies: z.ZodDefault<z.ZodArray<z.ZodObject<{
+        from: z.ZodString;
+        to: z.ZodString;
+    }, z.core.$strip>>>;
+    lanes: z.ZodOptional<z.ZodArray<z.ZodString>>;
+}, z.core.$strip>;
+export type TimelineParamsInput = z.input<typeof timelineParamsSchema>;
+export type TimelineParams = z.output<typeof timelineParamsSchema>;
+export type { ToneTokenT as ToneToken };
+export declare const DAY_MS = 86400000;
+/** ISO date(-time) → epoch ms. Date-only strings are UTC midnight. */
+export declare function parseDay(v: string): number;
+export declare function addDays(ms: number, days: number): number;
+/** Calendar-aware ticks for the domain at the chosen zoom, snapped to real
+ * day/week/month boundaries (never "Mar 34"). Returns ≤ ~48 ticks; the step
+ * widens when the span is too long for the zoom. */
+export declare function timeTicks(d0: number, d1: number, zoom: "day" | "week" | "month"): Tick[];
+/** Full layout for the renderer. `nowMs` (client-only) adds the today line
+ * when it falls inside the domain; SSR passes null and the line is skipped
+ * — no hydration mismatch. */
+export declare function layoutTimeline(p: TimelineParams, opts?: {
+    plotW: number;
+    laneW: number;
+    nowMs?: number | null;
+}): TimelineLayout;
+/** Dependency elbow path: from the END of bar A to the START of bar B,
+ * routed through the row gap. Points (not a path string) so the renderer
+ * draws + head-triangles it like every other polyline here. */
+export declare function dependencyPoints(from: {
+    xEnd: number;
+    y: number;
+}, to: {
+    xStart: number;
+    y: number;
+}): Point[];
+export interface TimelineRow {
+    kind: "milestone" | "bar";
+    label: string;
+    detail: string;
+}
+/** Flat rows for the accessible data fallback (sr-only table). */
+export declare function timelineRows(p: TimelineParams): TimelineRow[];
+export type { ToneTokenT } from "./constants.js";