@a4ui/core 0.33.0 → 0.35.0

package/src/ui/EventScheduler.tsx

@@ -0,0 +1,280 @@
+// Time-grid calendar: day or week view of hour bands (startHour..endHour) with
+// events absolutely positioned by their start/end minutes, split side-by-side on
+// overlap. Shares its time-slot idiom with AvailabilityPicker (native `Date`,
+// ISO/'HH:mm' strings, no date library) — this one draws a positioned grid
+// instead of a button list. Plain Solid + theme tokens (works in light/dark).
+import type { JSX } from 'solid-js'
+import { createMemo, For, Show } from 'solid-js'
+
+import { cn } from '../lib/cn'
+
+/** A single scheduled event; `start`/`end` are local ISO datetimes ('YYYY-MM-DDTHH:mm'). */
+export interface SchedulerEvent {
+  id: string
+  title: string
+  start: string
+  end: string
+  tone?: 'primary' | 'accent'
+}
+
+export interface EventSchedulerProps {
+  events: SchedulerEvent[]
+  /** Day to show (day view) or the week containing it (week view). ISO 'YYYY-MM-DD'. @default today */
+  date?: string
+  /** @default 'day' */
+  view?: 'day' | 'week'
+  /** First hour band shown (0–23). @default 7 */
+  startHour?: number
+  /** Last hour band shown, exclusive (0–23). @default 21 */
+  endHour?: number
+  class?: string
+}
+
+const HOUR_PX = 56
+const DAY_LABELS = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'] as const
+
+const TONE_CLASSES: Record<'primary' | 'accent', string> = {
+  primary: 'bg-primary text-primary-foreground',
+  accent: 'bg-accent text-accent-foreground',
+}
+
+/** Local-time `YYYY-MM-DD` key for a Date. */
+function isoKey(d: Date): string {
+  const y = d.getFullYear()
+  const m = String(d.getMonth() + 1).padStart(2, '0')
+  const day = String(d.getDate()).padStart(2, '0')
+  return `${y}-${m}-${day}`
+}
+
+/** Parse a local ISO datetime ('YYYY-MM-DDTHH:mm') into a `Date`, no timezone shifting. */
+function parseLocal(dt: string): Date {
+  const [datePart, timePart = '00:00'] = dt.split('T')
+  const [y, m, d] = datePart.split('-').map(Number)
+  const [hh, mm] = timePart.split(':').map(Number)
+  return new Date(y, m - 1, d, hh, mm)
+}
+
+function minutesOfDay(d: Date): number {
+  return d.getHours() * 60 + d.getMinutes()
+}
+
+/** 'HH:mm'-since-midnight minutes rendered as a 12h clock label, e.g. 570 -> '9:30 AM'. */
+function fmtTime(min: number): string {
+  const h = Math.floor(min / 60)
+  const m = min % 60
+  const period = h < 12 ? 'AM' : 'PM'
+  const h12 = h % 12 === 0 ? 12 : h % 12
+  return `${h12}:${String(m).padStart(2, '0')} ${period}`
+}
+
+interface PositionedEvent {
+  event: SchedulerEvent
+  startMin: number
+  endMin: number
+}
+
+interface LaidOutEvent extends PositionedEvent {
+  col: number
+  colCount: number
+}
+
+/**
+ * Greedy interval-graph coloring: overlapping events in a day column get
+ * side-by-side sub-columns (like most calendar UIs). Non-overlapping events
+ * each get the full column width.
+ */
+function layoutColumn(events: PositionedEvent[]): LaidOutEvent[] {
+  const sorted = [...events].sort((a, b) => a.startMin - b.startMin || a.endMin - b.endMin)
+  const results: LaidOutEvent[] = []
+  let cluster: (PositionedEvent & { col: number })[] = []
+  let colEnds: number[] = []
+  let clusterMaxEnd = -Infinity
+
+  const flush = () => {
+    if (cluster.length === 0) return
+    const colCount = Math.max(...cluster.map((e) => e.col)) + 1
+    for (const e of cluster) results.push({ ...e, colCount })
+    cluster = []
+  }
+
+  for (const ev of sorted) {
+    if (ev.startMin >= clusterMaxEnd) {
+      flush()
+      colEnds = []
+      clusterMaxEnd = -Infinity
+    }
+    let col = colEnds.findIndex((end) => end <= ev.startMin)
+    if (col === -1) {
+      col = colEnds.length
+      colEnds.push(ev.endMin)
+    } else {
+      colEnds[col] = ev.endMin
+    }
+    clusterMaxEnd = Math.max(clusterMaxEnd, ev.endMin)
+    cluster.push({ ...ev, col })
+  }
+  flush()
+  return results
+}
+
+/**
+ * Time-grid calendar: one column per visible day, hour bands from `startHour` to
+ * `endHour`, events absolutely positioned by their start/end minutes and split
+ * side-by-side when they overlap. Draws a "now" line through today's column
+ * when it's in view. Read-only positioning (drag-to-create/resize is out of
+ * scope). Scrolls vertically when the hour range is tall.
+ *
+ * @example
+ * ```tsx
+ * <EventScheduler
+ *   view="week"
+ *   date="2026-07-21"
+ *   events={[
+ *     { id: '1', title: 'Standup', start: '2026-07-21T09:00', end: '2026-07-21T09:30', tone: 'primary' },
+ *     { id: '2', title: 'Design review', start: '2026-07-21T09:15', end: '2026-07-21T10:00', tone: 'accent' },
+ *   ]}
+ * />
+ * ```
+ */
+export function EventScheduler(props: EventSchedulerProps): JSX.Element {
+  const startHour = () => props.startHour ?? 7
+  const endHour = () => props.endHour ?? 21
+  const hours = createMemo(() => {
+    const out: number[] = []
+    for (let h = startHour(); h < endHour(); h++) out.push(h)
+    return out
+  })
+  const gridHeight = () => (endHour() - startHour()) * HOUR_PX
+  const rangeStart = () => startHour() * 60
+  const rangeEnd = () => endHour() * 60
+  const pxFor = (min: number) => ((min - rangeStart()) / (rangeEnd() - rangeStart())) * gridHeight()
+
+  const baseDate = createMemo(() => (props.date ? parseLocal(props.date) : new Date()))
+
+  const days = createMemo(() => {
+    const base = baseDate()
+    if ((props.view ?? 'day') === 'day') {
+      return [new Date(base.getFullYear(), base.getMonth(), base.getDate())]
+    }
+    const sunday = new Date(base.getFullYear(), base.getMonth(), base.getDate() - base.getDay())
+    return Array.from(
+      { length: 7 },
+      (_, i) => new Date(sunday.getFullYear(), sunday.getMonth(), sunday.getDate() + i),
+    )
+  })
+
+  const eventsByDay = createMemo(() => {
+    const map = new Map<string, PositionedEvent[]>()
+    for (const event of props.events) {
+      const start = parseLocal(event.start)
+      const end = parseLocal(event.end)
+      const key = isoKey(start)
+      const startMin = minutesOfDay(start)
+      const list = map.get(key) ?? []
+      list.push({ event, startMin, endMin: Math.max(minutesOfDay(end), startMin + 15) })
+      map.set(key, list)
+    }
+    return map
+  })
+
+  const today = new Date()
+  const nowMin = today.getHours() * 60 + today.getMinutes()
+
+  return (
+    <div class={cn('flex flex-col overflow-hidden rounded-xl border border-border bg-card', props.class)}>
+      {/* Header row: gutter + one label per visible day */}
+      <div class="flex border-b border-border">
+        <div class="w-14 shrink-0" />
+        <For each={days()}>
+          {(day) => (
+            <div class="flex-1 border-l border-border py-2 text-center">
+              <div class="text-xs text-muted-foreground">{DAY_LABELS[day.getDay()]}</div>
+              <div
+                class={cn(
+                  'mx-auto mt-0.5 grid h-6 w-6 place-items-center rounded-full text-sm text-foreground',
+                  isoKey(day) === isoKey(today) && 'bg-primary font-semibold text-primary-foreground',
+                )}
+              >
+                {day.getDate()}
+              </div>
+            </div>
+          )}
+        </For>
+      </div>
+
+      {/* Body: scrolls vertically; gutter of hour labels + day columns */}
+      <div class="flex overflow-y-auto" style={{ 'max-height': '32rem' }}>
+        <div class="w-14 shrink-0" style={{ height: `${gridHeight()}px` }}>
+          <For each={hours()}>
+            {(h) => (
+              <div
+                class="relative text-right text-xs text-muted-foreground"
+                style={{ height: `${HOUR_PX}px` }}
+              >
+                <span class="absolute -top-2 right-2">{fmtTime(h * 60)}</span>
+              </div>
+            )}
+          </For>
+        </div>
+
+        <For each={days()}>
+          {(day) => {
+            const laidOut = createMemo(() => layoutColumn(eventsByDay().get(isoKey(day)) ?? []))
+            const isToday = isoKey(day) === isoKey(today)
+            return (
+              <div class="relative flex-1 border-l border-border" style={{ height: `${gridHeight()}px` }}>
+                {/* Hour gridlines */}
+                <For each={hours()}>
+                  {(h) => (
+                    <div
+                      class="absolute inset-x-0 border-t border-border"
+                      style={{ top: `${pxFor(h * 60)}px` }}
+                    />
+                  )}
+                </For>
+
+                {/* "Now" line, today's column only */}
+                <Show when={isToday && nowMin >= rangeStart() && nowMin <= rangeEnd()}>
+                  <div class="absolute inset-x-0 z-20 h-px bg-accent" style={{ top: `${pxFor(nowMin)}px` }}>
+                    <span class="absolute -left-1 -top-1 h-2 w-2 rounded-full bg-accent" />
+                  </div>
+                </Show>
+
+                {/* Events */}
+                <For each={laidOut()}>
+                  {(item) => {
+                    const clampedStart = Math.max(item.startMin, rangeStart())
+                    const clampedEnd = Math.min(item.endMin, rangeEnd())
+                    const top = pxFor(clampedStart)
+                    const height = Math.max(pxFor(clampedEnd) - top, 18)
+                    const widthPct = 100 / item.colCount
+                    return (
+                      <Show when={clampedEnd > rangeStart() && clampedStart < rangeEnd()}>
+                        <div
+                          class={cn(
+                            'absolute z-10 overflow-hidden rounded-md px-1.5 py-1 text-left text-xs shadow-sm',
+                            TONE_CLASSES[item.event.tone ?? 'primary'],
+                          )}
+                          style={{
+                            top: `${top}px`,
+                            height: `${height}px`,
+                            left: `${item.col * widthPct}%`,
+                            width: `calc(${widthPct}% - 2px)`,
+                          }}
+                          title={`${item.event.title} · ${fmtTime(item.startMin)}–${fmtTime(item.endMin)}`}
+                        >
+                          <div class="truncate font-medium">{item.event.title}</div>
+                          <div class="truncate opacity-80">{fmtTime(item.startMin)}</div>
+                        </div>
+                      </Show>
+                    )
+                  }}
+                </For>
+              </div>
+            )
+          }}
+        </For>
+      </div>
+    </div>
+  )
+}

package/src/ui/FollowingPointer.tsx

@@ -0,0 +1,112 @@
+// FollowingPointer — hides the native cursor over `children` and renders a
+// custom arrow + label chip that follows the mouse instead. Position is
+// written straight to the DOM node's `transform` on every pointermove (same
+// "skip the signal, touch the ref directly" idiom as Magnetic.tsx) rather
+// than through a reactive signal, so the follow is jank-free. No-op (native
+// cursor kept, nothing custom rendered) under motionReduced().
+import { onCleanup, onMount, Show, type JSX } from 'solid-js'
+
+import { cn } from '../lib/cn'
+import { motionReduced } from '../lib/motion'
+
+export interface FollowingPointerProps {
+  label?: JSX.Element
+  /** Tone of the custom cursor + label chip. @default 'primary' */
+  color?: 'primary' | 'accent'
+  children: JSX.Element
+  class?: string
+}
+
+/**
+ * Wraps `children` in a `relative` container that hides the native cursor
+ * and renders a custom pointer — a small arrow glyph plus a rounded label
+ * chip in the given tone — that follows the mouse within the container.
+ * Hidden until the pointer enters, hidden again on leave. Under
+ * {@link motionReduced}, the native cursor is kept and nothing custom is
+ * rendered. Listeners are cleaned up on unmount.
+ *
+ * @example
+ * ```tsx
+ * <FollowingPointer label="Alex" color="accent">
+ *   <div class="grid h-48 place-items-center rounded-lg border">Hover me</div>
+ * </FollowingPointer>
+ * ```
+ */
+export function FollowingPointer(props: FollowingPointerProps): JSX.Element {
+  let root: HTMLDivElement | undefined
+  let pointerEl: HTMLDivElement | undefined
+
+  onMount(() => {
+    if (motionReduced() || !root || !pointerEl) return
+
+    const handlePointerMove = (event: PointerEvent): void => {
+      const rect = root!.getBoundingClientRect()
+      const x = event.clientX - rect.left
+      const y = event.clientY - rect.top
+      pointerEl!.style.transform = `translate(${x}px, ${y}px)`
+    }
+
+    const handlePointerEnter = (event: PointerEvent): void => {
+      pointerEl!.style.opacity = '1'
+      handlePointerMove(event)
+    }
+
+    const handlePointerLeave = (): void => {
+      pointerEl!.style.opacity = '0'
+    }
+
+    root.addEventListener('pointermove', handlePointerMove)
+    root.addEventListener('pointerenter', handlePointerEnter)
+    root.addEventListener('pointerleave', handlePointerLeave)
+
+    onCleanup(() => {
+      root!.removeEventListener('pointermove', handlePointerMove)
+      root!.removeEventListener('pointerenter', handlePointerEnter)
+      root!.removeEventListener('pointerleave', handlePointerLeave)
+    })
+  })
+
+  const tone = (): 'primary' | 'accent' => (props.color === 'accent' ? 'accent' : 'primary')
+
+  return (
+    <div ref={root} class={cn('relative', !motionReduced() && 'cursor-none', props.class)}>
+      {props.children}
+      <Show when={!motionReduced()}>
+        <div
+          ref={pointerEl}
+          aria-hidden="true"
+          class="pointer-events-none absolute left-0 top-0 z-50 flex items-center opacity-0 transition-opacity duration-150 will-change-transform"
+        >
+          <svg
+            width="20"
+            height="20"
+            viewBox="0 0 20 20"
+            class={cn(
+              '-translate-x-0.5 -translate-y-0.5 drop-shadow',
+              tone() === 'accent' ? 'text-accent' : 'text-primary',
+            )}
+          >
+            <path
+              d="M2 2 L18 9 L10 11 L8 18 Z"
+              fill="currentColor"
+              stroke="hsl(var(--background))"
+              stroke-width="1"
+            />
+          </svg>
+          <Show when={props.label}>
+            <div
+              class={cn(
+                'ml-2 whitespace-nowrap rounded-full px-2.5 py-1 text-xs font-medium shadow-lg',
+                tone() === 'accent'
+                  ? 'bg-accent text-accent-foreground'
+                  : 'bg-primary text-primary-foreground',
+              )}
+            >
+              {props.label}
+            </div>
+          </Show>
+        </div>
+      </Show>
+    </div>
+  )
+}

package/src/ui/GanttChart.tsx

@@ -0,0 +1,283 @@
+// GanttChart — a read-only project schedule chart built from plain flex/grid
+// `div`s (no SVG, no date library). Each task is a row with its name in a
+// fixed-width left column and a bar positioned on a proportional time axis
+// (left%/width% derived from the task's start/end within the overall date
+// range), mirroring BarChart's percentage-of-max layout idiom. Dependency
+// arrows are drawn as right-angle elbow connectors using bordered divs so
+// the whole chart stays in the same box-model coordinate space as the bars.
+import { createMemo, For, Show, type JSX } from 'solid-js'
+
+import { cn } from '../lib/cn'
+
+const DAY_MS = 24 * 60 * 60 * 1000
+/** Header height (`h-8`) in px — the coordinate origin for row overlays. */
+const HEADER_HEIGHT = 32
+/** Per-task row height (`h-10`) in px. */
+const ROW_HEIGHT = 40
+/** Candidate tick spacings (days); the smallest that keeps ticks readable wins. */
+const TICK_STEP_DAYS = [1, 2, 3, 7, 14, 30, 60, 90, 180]
+
+/** A single bar rendered by {@link GanttChart}. */
+export interface GanttTask {
+  id: string
+  name: string
+  /** ISO date, `'YYYY-MM-DD'`. */
+  start: string
+  /** ISO date, `'YYYY-MM-DD'`. */
+  end: string
+  /** Ids of tasks that must finish before this one starts; drawn as elbow connectors. */
+  dependencies?: string[]
+  /** Bar color. Defaults to `'primary'`. */
+  tone?: 'primary' | 'accent'
+}
+
+export interface GanttChartProps {
+  tasks: GanttTask[]
+  class?: string
+}
+
+interface Tick {
+  label: string
+  percent: number
+}
+
+interface Connector {
+  id: string
+  /** Elbow's vertical run: x of the dependency's end, from its row to the dependent's row. */
+  xFrom: number
+  yFrom: number
+  xTo: number
+  yTo: number
+  arrowRight: boolean
+}
+
+function pickStepDays(totalDays: number): number {
+  const target = totalDays / 8
+  return TICK_STEP_DAYS.find((step) => step >= target) ?? TICK_STEP_DAYS[TICK_STEP_DAYS.length - 1]
+}
+
+function formatTick(date: Date): string {
+  return date.toLocaleDateString(undefined, { month: 'short', day: 'numeric' })
+}
+
+/**
+ * Read-only Gantt chart: a header row of date ticks over a proportional time
+ * axis, one row per task with a colored bar spanning `start`–`end`, elbow
+ * connectors for `dependencies`, and a "today" marker when today falls
+ * within the overall range. Horizontal scroll kicks in when the range is
+ * wide relative to the container.
+ *
+ * @example
+ * ```tsx
+ * <GanttChart
+ *   tasks={[
+ *     { id: 'design', name: 'Design', start: '2026-01-05', end: '2026-01-16', tone: 'accent' },
+ *     { id: 'build', name: 'Build', start: '2026-01-19', end: '2026-02-06', dependencies: ['design'] },
+ *     { id: 'launch', name: 'Launch', start: '2026-02-09', end: '2026-02-10', dependencies: ['build'] },
+ *   ]}
+ * />
+ * ```
+ */
+export function GanttChart(props: GanttChartProps): JSX.Element {
+  const range = createMemo(() => {
+    if (props.tasks.length === 0) return null
+    let min = Number.POSITIVE_INFINITY
+    let max = Number.NEGATIVE_INFINITY
+    for (const task of props.tasks) {
+      const start = new Date(task.start).getTime()
+      const end = new Date(task.end).getTime()
+      if (start < min) min = start
+      if (end > max) max = end
+    }
+    // Guard a zero-width range (single task, start === end) so percentages stay finite.
+    const totalMs = Math.max(max - min, DAY_MS)
+    return { min, max: min + totalMs, totalMs }
+  })
+
+  const percentFor = (isoOrTime: string | number): number => {
+    const r = range()
+    if (!r) return 0
+    const time = typeof isoOrTime === 'string' ? new Date(isoOrTime).getTime() : isoOrTime
+    return Math.min(100, Math.max(0, ((time - r.min) / r.totalMs) * 100))
+  }
+
+  const ticks = createMemo<Tick[]>(() => {
+    const r = range()
+    if (!r) return []
+    const totalDays = Math.max(1, Math.round(r.totalMs / DAY_MS))
+    const step = pickStepDays(totalDays)
+    const out: Tick[] = []
+    for (let d = 0; d <= totalDays; d += step) {
+      out.push({ label: formatTick(new Date(r.min + d * DAY_MS)), percent: (d / totalDays) * 100 })
+    }
+    return out
+  })
+
+  const todayPercent = createMemo<number | null>(() => {
+    const r = range()
+    if (!r) return null
+    const now = new Date()
+    const today = Date.UTC(now.getFullYear(), now.getMonth(), now.getDate())
+    if (today < r.min || today > r.max) return null
+    return percentFor(today)
+  })
+
+  const rowIndex = createMemo(() => {
+    const map = new Map<string, number>()
+    props.tasks.forEach((task, i) => map.set(task.id, i))
+    return map
+  })
+
+  const connectors = createMemo<Connector[]>(() => {
+    const byId = new Map(props.tasks.map((t) => [t.id, t]))
+    const index = rowIndex()
+    const out: Connector[] = []
+    for (const task of props.tasks) {
+      for (const depId of task.dependencies ?? []) {
+        const dep = byId.get(depId)
+        if (!dep || dep.id === task.id) continue
+        const iDep = index.get(dep.id)
+        const iTask = index.get(task.id)
+        if (iDep === undefined || iTask === undefined) continue
+        const xFrom = percentFor(dep.end)
+        const xTo = percentFor(task.start)
+        out.push({
+          id: `${dep.id}->${task.id}`,
+          xFrom,
+          yFrom: iDep * ROW_HEIGHT + ROW_HEIGHT / 2,
+          xTo,
+          yTo: iTask * ROW_HEIGHT + ROW_HEIGHT / 2,
+          arrowRight: xTo >= xFrom,
+        })
+      }
+    }
+    return out
+  })
+
+  return (
+    <div class={cn('overflow-x-auto rounded-lg border border-border bg-card', props.class)}>
+      <Show
+        when={props.tasks.length > 0}
+        fallback={<p class="p-4 text-sm text-muted-foreground">No tasks to display.</p>}
+      >
+        <div class="flex min-w-[640px]">
+          {/* Names column */}
+          <div class="w-40 shrink-0 border-r border-border">
+            <div class="flex h-8 items-center px-3 text-xs font-medium text-muted-foreground">Task</div>
+            <For each={props.tasks}>
+              {(task, i) => (
+                <div
+                  class={cn(
+                    'flex h-10 items-center border-t border-border px-3',
+                    i() % 2 === 1 && 'bg-muted',
+                  )}
+                >
+                  <span class="truncate text-sm text-foreground" title={task.name}>
+                    {task.name}
+                  </span>
+                </div>
+              )}
+            </For>
+          </div>
+
+          {/* Chart column: header ticks, rows, connectors and the today marker all
+              share this box as their coordinate space (percent for x, px for y). */}
+          <div class="relative flex-1">
+            {/* Vertical gridlines, one per tick, spanning the whole chart column. */}
+            <div class="pointer-events-none absolute inset-0">
+              <For each={ticks()}>
+                {(tick) => (
+                  <div
+                    class="absolute inset-y-0 border-l border-border/40"
+                    style={{ left: `${tick.percent}%` }}
+                  />
+                )}
+              </For>
+            </div>
+
+            <div class="relative h-8">
+              <For each={ticks()}>
+                {(tick) => (
+                  <span
+                    class="absolute top-1/2 -translate-y-1/2 whitespace-nowrap pl-1 text-[11px] text-muted-foreground"
+                    style={{ left: `${tick.percent}%` }}
+                  >
+                    {tick.label}
+                  </span>
+                )}
+              </For>
+            </div>
+
+            <For each={props.tasks}>
+              {(task, i) => {
+                const left = () => percentFor(task.start)
+                const width = () => Math.max(percentFor(task.end) - left(), 1)
+                return (
+                  <div class={cn('relative h-10 border-t border-border', i() % 2 === 1 && 'bg-muted')}>
+                    <div
+                      title={`${task.name}: ${task.start} → ${task.end}`}
+                      class={cn(
+                        'absolute inset-y-2 rounded',
+                        task.tone === 'accent' ? 'bg-accent' : 'bg-primary',
+                      )}
+                      style={{ left: `${left()}%`, width: `${width()}%` }}
+                    />
+                  </div>
+                )
+              }}
+            </For>
+
+            {/* Dependency connectors: elbow (vertical run at the predecessor's end,
+                horizontal run into the dependent's start) as bordered divs. */}
+            <div
+              class="pointer-events-none absolute inset-x-0 bottom-0"
+              style={{ top: `${HEADER_HEIGHT}px` }}
+            >
+              <For each={connectors()}>
+                {(c) => (
+                  <>
+                    <div
+                      class="absolute border-l border-border"
+                      style={{
+                        left: `${c.xFrom}%`,
+                        top: `${Math.min(c.yFrom, c.yTo)}px`,
+                        height: `${Math.abs(c.yTo - c.yFrom)}px`,
+                      }}
+                    />
+                    <div
+                      class="absolute border-t border-border"
+                      style={{
+                        top: `${c.yTo}px`,
+                        left: `${Math.min(c.xFrom, c.xTo)}%`,
+                        width: `${Math.abs(c.xTo - c.xFrom)}%`,
+                      }}
+                    />
+                    <div
+                      class={cn(
+                        'absolute h-0 w-0 border-y-4 border-y-transparent',
+                        c.arrowRight ? 'border-l-8 border-l-border' : 'border-r-8 border-r-border',
+                      )}
+                      style={{
+                        top: `${c.yTo - 4}px`,
+                        left: c.arrowRight ? `calc(${c.xTo}% - 8px)` : `${c.xTo}%`,
+                      }}
+                    />
+                  </>
+                )}
+              </For>
+            </div>
+
+            {/* "Today" marker, spanning the header + every row. */}
+            <Show when={todayPercent() !== null}>
+              <div
+                class="pointer-events-none absolute inset-y-0 border-l border-primary"
+                style={{ left: `${todayPercent()}%` }}
+                title="Today"
+              />
+            </Show>
+          </div>
+        </div>
+      </Show>
+    </div>
+  )
+}