kennel 0.2.3 → 0.2.6

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

@@ -1,160 +0,0 @@
-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

@@ -1,80 +0,0 @@
-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

@@ -1,418 +0,0 @@
-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} />
-}