kennel 0.2.0 → 0.2.2

package/kernel/plugins/calendar/src/server.ts

@@ -0,0 +1,160 @@
+import { readdir, readFile } from "node:fs/promises"
+import { basename, dirname, relative, resolve, sep } from "node:path"
+
+import type {
+  FolderPluginContext,
+  FolderPluginData,
+  FolderPluginDetection,
+} from "@raggle-ai/folder-plugin/server"
+
+import type { CalendarSource } from "./parse.ts"
+import { calendarManifest } from "./manifest.ts"
+import {
+  calendarIssueSummary,
+  eventCount,
+  mergeCalendars,
+  parseCalendarJson,
+  parseCalendarSource,
+  starterCalendarSource,
+} from "./parse.ts"
+
+/**
+ * Recursively discover valid `calendar.json` sources under a folder.
+ * Hidden directories and `node_modules` are skipped, and directory symlinks
+ * are not followed, so discovered files stay contained inside the folder.
+ *
+ * Returns every found file with its validated issues (empty for valid files)
+ * plus the tolerated calendar for valid files. A file that triggers
+ * validation issues still parses tolerantly when possible, so the view can
+ * show the good events while listing what is wrong.
+ */
+type CalendarSourceLoad = {
+  issues: Array<{
+    file: string
+    problems: Array<{ path: string; message: string }>
+  }>
+  sources: CalendarSource[]
+}
+
+async function loadSources(folder: string): Promise<CalendarSourceLoad> {
+  const visit = async (current: string): Promise<string[]> => {
+    const entries = await readdir(current, { withFileTypes: true }).catch(
+      () => [],
+    )
+    const paths: string[] = []
+    for (const entry of entries) {
+      if (entry.isFile() && entry.name === "calendar.json") {
+        paths.push(resolve(current, entry.name))
+        continue
+      }
+      if (
+        !entry.isDirectory() ||
+        entry.name.startsWith(".") ||
+        entry.name === "node_modules"
+      )
+        continue
+      paths.push(...(await visit(resolve(current, entry.name))))
+    }
+    return paths
+  }
+
+  const paths = (await visit(folder)).sort((left, right) =>
+    relative(folder, left).localeCompare(relative(folder, right)),
+  )
+  const issues: CalendarSourceLoad["issues"] = []
+  const sources: CalendarSource[] = []
+  await Promise.all(
+    paths.map(async (path) => {
+      const sourceText = await readFile(path, "utf8")
+      const file = relative(folder, path).split(sep).join("/")
+      const validation = parseCalendarSource(sourceText)
+      if (!validation.ok) {
+        issues.push({ file, problems: validation.issues })
+        return
+      }
+      const calendar = parseCalendarJson(sourceText)
+      if (!calendar) {
+        issues.push({
+          file,
+          problems: [{ path: "#", message: "could not be read as a calendar" }],
+        })
+        return
+      }
+      const directory = dirname(file)
+      sources.push({
+        calendar,
+        folder: dirname(path),
+        group: directory === "." ? basename(folder) : directory,
+        path: file,
+      })
+    }),
+  )
+  issues.sort((left, right) => left.file.localeCompare(right.file))
+  return { issues, sources }
+}
+
+function flattenIssues(load: CalendarSourceLoad) {
+  return load.issues.flatMap(({ file, problems }) =>
+    problems.map((problem) => ({
+      path: problem.path === "#" ? file : `${file}: ${problem.path}`,
+      message: problem.message,
+    })),
+  )
+}
+
+function detectionFor(load: CalendarSourceLoad) {
+  const noContent = load.sources.length === 0 && load.issues.length === 0
+  if (noContent) return { status: "unavailable" as const }
+  if (load.issues.length > 0) {
+    return {
+      status: "error" as const,
+      error: calendarIssueSummary(flattenIssues(load)),
+    }
+  }
+  return {
+    count: eventCount(mergeCalendars(load.sources)),
+    status: "available" as const,
+  }
+}
+
+export function createCalendarPlugin() {
+  return {
+    ...calendarManifest,
+    async detect(context: FolderPluginContext): Promise<FolderPluginDetection> {
+      return detectionFor(await loadSources(context.folder))
+    },
+    async handle(
+      context: FolderPluginContext,
+      subpath: string,
+    ): Promise<FolderPluginData> {
+      if (subpath !== "") return { kind: "unavailable" }
+
+      const load = await loadSources(context.folder)
+      const detection = detectionFor(load)
+      if (detection.status === "unavailable") return { kind: "unavailable" }
+      const calendar = mergeCalendars(load.sources)
+      const issues = flattenIssues(load)
+      return {
+        kind: "available",
+        data: {
+          calendar: {
+            count: calendar.events.length,
+            items: calendar.events,
+            startDate: calendar.startDate,
+            title: calendar.title,
+          },
+          folder: context.folder,
+          issues: issues.length > 0 ? issues : undefined,
+          // Broken files are flagged but excluded from the rendered dataset;
+          // valid sibling files still render next to the error panel.
+          status: issues.length > 0 ? "error" : "available",
+        },
+      }
+    },
+    async init(context: FolderPluginContext) {
+      return {
+        files: [{ path: "calendar.json", content: starterCalendarSource() }],
+      }
+    },
+  }
+}

package/kernel/plugins/calendar/src/utils.ts

@@ -0,0 +1,80 @@
+import type { CalendarColor, CalendarEvent } from "./parse"
+
+type CalendarTone = {
+  badge: string
+  dot: string
+  selected: string
+  soft: string
+}
+
+const tones: Record<CalendarColor, CalendarTone> = {
+  blue: {
+    badge:
+      "border-blue-300 bg-blue-50 text-blue-800 dark:border-blue-800 dark:bg-blue-950 dark:text-blue-200",
+    dot: "bg-blue-500",
+    selected:
+      "border-blue-600 bg-blue-600 !text-white shadow-sm hover:bg-blue-700",
+    soft: "border-blue-200 bg-blue-50 text-blue-800 hover:bg-blue-100 dark:border-blue-900 dark:bg-blue-950 dark:text-blue-200",
+  },
+  green: {
+    badge:
+      "border-emerald-300 bg-emerald-50 text-emerald-800 dark:border-emerald-800 dark:bg-emerald-950 dark:text-emerald-200",
+    dot: "bg-emerald-500",
+    selected:
+      "border-emerald-600 bg-emerald-600 !text-white shadow-sm hover:bg-emerald-700",
+    soft: "border-emerald-200 bg-emerald-50 text-emerald-800 hover:bg-emerald-100 dark:border-emerald-900 dark:bg-emerald-950 dark:text-emerald-200",
+  },
+  orange: {
+    badge:
+      "border-orange-300 bg-orange-50 text-orange-800 dark:border-orange-800 dark:bg-orange-950 dark:text-orange-200",
+    dot: "bg-orange-500",
+    selected:
+      "border-orange-600 bg-orange-600 !text-white shadow-sm hover:bg-orange-700",
+    soft: "border-orange-200 bg-orange-50 text-orange-800 hover:bg-orange-100 dark:border-orange-900 dark:bg-orange-950 dark:text-orange-200",
+  },
+  purple: {
+    badge:
+      "border-purple-300 bg-purple-50 text-purple-800 dark:border-purple-800 dark:bg-purple-950 dark:text-purple-200",
+    dot: "bg-purple-500",
+    selected:
+      "border-purple-600 bg-purple-600 !text-white shadow-sm hover:bg-purple-700",
+    soft: "border-purple-200 bg-purple-50 text-purple-800 hover:bg-purple-100 dark:border-purple-900 dark:bg-purple-950 dark:text-purple-200",
+  },
+  red: {
+    badge:
+      "border-red-300 bg-red-50 text-red-800 dark:border-red-800 dark:bg-red-950 dark:text-red-200",
+    dot: "bg-red-500",
+    selected:
+      "border-red-600 bg-red-600 !text-white shadow-sm hover:bg-red-700",
+    soft: "border-red-200 bg-red-50 text-red-800 hover:bg-red-100 dark:border-red-900 dark:bg-red-950 dark:text-red-200",
+  },
+  yellow: {
+    badge:
+      "border-amber-300 bg-amber-50 text-amber-900 dark:border-amber-800 dark:bg-amber-950 dark:text-amber-100",
+    dot: "bg-amber-500",
+    selected:
+      "border-amber-500 bg-amber-500 !text-amber-950 shadow-sm hover:bg-amber-600",
+    soft: "border-amber-200 bg-amber-50 text-amber-900 hover:bg-amber-100 dark:border-amber-900 dark:bg-amber-950 dark:text-amber-100",
+  },
+}
+
+export function calendarTone(color?: CalendarColor) {
+  return tones[color ?? "blue"]
+}
+
+export function eventTone(event: CalendarEvent) {
+  return calendarTone(event.color ?? event.groupColor)
+}
+
+export function cn(...values: Array<false | null | string | undefined>) {
+  return values.filter(Boolean).join(" ")
+}
+
+export function eventSpan(event: CalendarEvent) {
+  return {
+    allDay:
+      event.allDay ?? event.end.getTime() - event.start.getTime() >= 86_399_000,
+    end: event.end,
+    start: event.start,
+  }
+}

package/kernel/plugins/calendar/src/views.tsx

@@ -0,0 +1,418 @@
+import type { ReactNode } from "react"
+import { useEffect, useRef } from "react"
+import {
+  addDays,
+  format,
+  isSameDay,
+  isSameMonth,
+  startOfDay,
+  startOfMonth,
+  startOfWeek,
+} from "date-fns"
+import { CalendarDays } from "lucide-react"
+
+import type { CalendarEvent } from "./parse"
+import { EventDialog } from "./event-dialog"
+import { cn, eventSpan, eventTone } from "./utils"
+
+const weekdays = ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"]
+const weekStart = { weekStartsOn: 1 as const }
+const hourHeight = 48
+
+type LaneItem = {
+  endCol: number // inclusive last covered column
+  event: CalendarEvent
+  lane: number
+  startCol: number
+}
+
+// Place events intersecting one week row into horizontal lanes. Multi-day events
+// keep one lane across their covered columns so they render as a single bar.
+function layoutLanes(days: Date[], events: CalendarEvent[]): LaneItem[] {
+  if (days.length === 0) return []
+  const first = startOfDay(days[0]!)
+  const last = addDays(startOfDay(days[days.length - 1]!), 1)
+  const relevant = events
+    .filter((event) => event.end > first && event.start < last)
+    .sort(
+      (left, right) =>
+        left.start.getTime() - right.start.getTime() ||
+        right.end.getTime() -
+          right.start.getTime() -
+          (left.end.getTime() - left.start.getTime()),
+    )
+
+  const laneEnds: number[] = []
+  const items: LaneItem[] = []
+  for (const event of relevant) {
+    const startCol = Math.max(
+      0,
+      days.findIndex(
+        (day) => day.getTime() >= startOfDay(event.start).getTime(),
+      ),
+    )
+    let endCol = startCol
+    for (let index = startCol; index < days.length; index++) {
+      if (days[index]!.getTime() >= event.end.getTime()) break
+      endCol = index
+    }
+    let lane = laneEnds.findIndex((end) => end <= startCol)
+    if (lane === -1) {
+      lane = laneEnds.length
+      laneEnds.push(-1)
+    }
+    laneEnds[lane] = endCol + 1
+    items.push({ endCol, event, lane, startCol })
+  }
+  return items
+}
+
+function LaneGrid({ columns, items }: { columns: number; items: LaneItem[] }) {
+  if (items.length === 0) return null
+  const lanes = Math.max(...items.map((item) => item.lane)) + 1
+
+  return (
+    <div
+      className="relative grid"
+      style={{
+        gridTemplateColumns: `repeat(${columns}, 1fr)`,
+        gridTemplateRows: `repeat(${lanes}, auto)`,
+      }}
+    >
+      {items.map((item) => (
+        <div
+          className="min-w-0 pr-0.5 pb-0.5"
+          key={item.event.id}
+          style={{
+            gridColumn: `${item.startCol + 1} / ${item.endCol + 2}`,
+            gridRow: item.lane + 1,
+          }}
+        >
+          <EventDialog
+            event={item.event}
+            variant={item.endCol > item.startCol ? "bar" : "chip"}
+          />
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export function MonthView({
+  date,
+  events,
+}: {
+  date: Date
+  events: CalendarEvent[]
+}) {
+  const monthStart = startOfMonth(date)
+  const start = startOfWeek(monthStart, weekStart)
+  const weeks = Array.from({ length: 6 }, (_, week) =>
+    Array.from({ length: 7 }, (_, day) => addDays(start, week * 7 + day)),
+  )
+
+  return (
+    <div>
+      <div className="grid grid-cols-7">
+        {weekdays.map((label) => (
+          <div
+            className="text-muted-foreground border-b py-1 text-center text-xs
+              font-medium"
+            key={label}
+          >
+            {label}
+          </div>
+        ))}
+      </div>
+      {weeks.map((days) => (
+        <MonthWeek
+          days={days}
+          events={events}
+          key={days[0]!.toISOString()}
+          monthStart={monthStart}
+        />
+      ))}
+    </div>
+  )
+}
+
+function MonthWeek({
+  days,
+  events,
+  monthStart,
+}: {
+  days: Date[]
+  events: CalendarEvent[]
+  monthStart: Date
+}) {
+  const items = layoutLanes(days, events)
+
+  return (
+    <div className="min-h-20 border-b last:border-b-0">
+      <div className="grid grid-cols-7">
+        {days.map((day) => {
+          const isCurrentMonth = isSameMonth(day, monthStart)
+          const isToday = isSameDay(day, new Date())
+          return (
+            <div
+              className={cn(
+                "flex justify-end border-r px-1.5 py-1 last:border-r-0",
+                !isCurrentMonth && "bg-muted/30",
+              )}
+              key={day.toISOString()}
+            >
+              <span
+                className={cn(
+                  "flex size-5 items-center justify-center rounded-full text-xs",
+                  isToday
+                    ? "bg-primary text-primary-foreground font-semibold"
+                    : "text-muted-foreground",
+                )}
+              >
+                {format(day, "d")}
+              </span>
+            </div>
+          )
+        })}
+      </div>
+      <div className="relative min-h-14 pt-0.5">
+        <div
+          aria-hidden="true"
+          className="pointer-events-none absolute inset-0 grid grid-cols-7"
+        >
+          {days.map((day) => (
+            <div
+              className={cn(
+                "border-r last:border-r-0",
+                !isSameMonth(day, monthStart) && "bg-muted/30",
+              )}
+              key={day.toISOString()}
+            />
+          ))}
+        </div>
+        <LaneGrid columns={days.length} items={items} />
+      </div>
+    </div>
+  )
+}
+
+function eventsByHour(events: CalendarEvent[], day: Date) {
+  const start = startOfDay(day)
+  const next = addDays(start, 1)
+  const hours = new Map<number, CalendarEvent[]>()
+  for (const event of events.filter(
+    (item) => item.end > start && item.start < next && !eventSpan(item).allDay,
+  )) {
+    const first = Math.max(0, Math.floor(event.start.getHours()))
+    const last = Math.min(23, event.end.getHours())
+    for (let hour = first; hour <= last; hour++) {
+      const list = hours.get(hour) ?? []
+      list.push(event)
+      hours.set(hour, list)
+    }
+  }
+  return hours
+}
+
+function HourGrid({
+  columns,
+  columnHeaders,
+  events,
+}: {
+  columns: Date[]
+  columnHeaders?: ReactNode[]
+  events: CalendarEvent[]
+}) {
+  const area = useRef<HTMLDivElement>(null)
+  const grid = columns.map((column) => ({
+    hours: eventsByHour(events, column),
+  }))
+  const allDayItems = layoutLanes(
+    columns,
+    events.filter((event) => eventSpan(event).allDay),
+  )
+  const hasAllDay = allDayItems.length > 0
+  const first = events
+    .filter((event) => !eventSpan(event).allDay)
+    .sort((left, right) => left.start.getTime() - right.start.getTime())[0]
+
+  useEffect(() => {
+    const frame = requestAnimationFrame(() => {
+      const viewport = area.current?.querySelector<HTMLElement>(
+        '[data-slot="scroll-area-viewport"]',
+      )
+      const event = viewport?.querySelector<HTMLElement>(
+        '[data-calendar-first-event="true"]',
+      )
+      if (!viewport || !event) return
+
+      const viewportRect = viewport.getBoundingClientRect()
+      const eventRect = event.getBoundingClientRect()
+      viewport.scrollTo({
+        behavior: "auto",
+        top: Math.max(
+          0,
+          viewport.scrollTop +
+            eventRect.top -
+            viewportRect.top -
+            viewport.clientHeight / 2 +
+            eventRect.height / 2,
+        ),
+      })
+    })
+
+    return () => cancelAnimationFrame(frame)
+  }, [first?.id, first?.start])
+
+  return (
+    <div className="h-[calc(100vh-240px)] min-h-80" ref={area}>
+      <div
+        className="size-full overflow-auto rounded-[inherit]"
+        data-slot="scroll-area-viewport"
+      >
+        <div className="min-w-[600px]">
+          {columnHeaders ? (
+            <div
+              className="grid border-b"
+              style={{
+                gridTemplateColumns: `52px repeat(${columns.length}, 1fr)`,
+              }}
+            >
+              <div />
+              {columnHeaders.map((header, index) => (
+                <div
+                  className="border-l px-2 py-2 font-medium"
+                  key={columns[index]?.toISOString()}
+                >
+                  {header}
+                </div>
+              ))}
+            </div>
+          ) : null}
+          {hasAllDay ? (
+            <div
+              className="grid border-b"
+              style={{
+                gridTemplateColumns: `52px 1fr`,
+              }}
+            >
+              <div
+                className="text-muted-foreground px-1 py-1 text-right
+                  text-[0.65rem] uppercase"
+              >
+                All day
+              </div>
+              <div className="relative min-h-8 py-0.5">
+                <div
+                  aria-hidden="true"
+                  className="pointer-events-none absolute inset-0 grid"
+                  style={{
+                    gridTemplateColumns: `repeat(${columns.length}, 1fr)`,
+                  }}
+                >
+                  {columns.map((column) => (
+                    <div className="border-l" key={column.toISOString()} />
+                  ))}
+                </div>
+                <LaneGrid columns={columns.length} items={allDayItems} />
+              </div>
+            </div>
+          ) : null}
+          <div
+            className="grid"
+            style={{
+              gridTemplateColumns: `52px repeat(${columns.length}, 1fr)`,
+            }}
+          >
+            <div>
+              {Array.from({ length: 24 }, (_, hour) => (
+                <div
+                  className="text-muted-foreground relative pr-2 text-right
+                    text-[0.65rem]"
+                  key={hour}
+                  style={{ height: hourHeight }}
+                >
+                  <span className="absolute top-0 right-1 -translate-y-1/2">
+                    {hour === 0 ? "" : format(new Date(2020, 0, 1, hour), "ha")}
+                  </span>
+                </div>
+              ))}
+            </div>
+            {grid.map((column, index) => (
+              <div className="border-l" key={columns[index]?.toISOString()}>
+                {Array.from({ length: 24 }, (_, hour) => (
+                  <div
+                    className="relative border-t px-1"
+                    key={hour}
+                    style={{ height: hourHeight }}
+                  >
+                    {column.hours.get(hour)?.map((event) => (
+                      <div
+                        className={cn(
+                          "mb-0.5 truncate rounded border-l-2 text-xs last:mb-0",
+                          eventTone(event).badge,
+                        )}
+                        data-calendar-first-event={
+                          event.id === first?.id ? "true" : undefined
+                        }
+                        key={event.id}
+                      >
+                        <EventDialog event={event} />
+                      </div>
+                    )) ?? null}
+                  </div>
+                ))}
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export function DayView({
+  date,
+  events,
+}: {
+  date: Date
+  events: CalendarEvent[]
+}) {
+  return (
+    <HourGrid
+      columnHeaders={[
+        <div className="flex items-center gap-1.5" key="day">
+          <CalendarDays aria-hidden="true" className="size-4" />
+          {format(date, "EEE MMM d")}
+        </div>,
+      ]}
+      columns={[startOfDay(date)]}
+      events={events}
+    />
+  )
+}
+
+export function WeekView({
+  date,
+  events,
+}: {
+  date: Date
+  events: CalendarEvent[]
+}) {
+  const start = startOfWeek(date, weekStart)
+  const days = Array.from({ length: 7 }, (_, index) => addDays(start, index))
+  const headers = days.map((day) => (
+    <div
+      className={cn(
+        "leading-tight",
+        isSameDay(day, new Date()) && "text-primary",
+      )}
+      key={day.toISOString()}
+    >
+      <strong>{format(day, "EEE")}</strong>{" "}
+      <span className="text-muted-foreground">{format(day, "d")}</span>
+    </div>
+  ))
+
+  return <HourGrid columnHeaders={headers} columns={days} events={events} />
+}